Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki. (finansowane przez EFS oraz MEiN) JĘZYK HTML

Transkrypt

1 1. Zasady nazywania i zapisywania plików: a. Nazwa pliku nie powinna zawierać znaków specjalnych typu: - polskie litery (tzw. ogonki): ĘęÓóĄąŚśŁłŻżŹźĆćŃń; - puste znaki (spacja) zastępujemy je innymi znakami (np. podkreślnikiem: _); - znaki specjalne, np. \?/><.,&^%$#@*; - duże litery. b. Plik strony startowej nosi najczęściej nazwę index.html lub index.htm (nie zalecane). c. Nie wolno tworzyć odwołań do miejsc bezpośrednio na naszym dysku. Pliki zapisujemy we wspólnym katalogu, co pozwala nam na skrócenie ich ścieżki. Jeżeli dany plik znajduje się w tym samy katalogu, w atrybucie wywołującym plik (np. src="") wpisujemy po prostu nazwę pliku: src="plik.html". Jeśli jest on w katalogu podrzędnym, piszemy pełną ścieżkę dostępu: src="katalog/plik.html". 2. Struktura dokumentu: HyperText Markup Language, czyli język hipertekstowy. Definicja języka: <!DOCTYPE html public -//w3c//dtd html 4.01 transitional//en > Struktura dokumentu: <> Początek dokumentu. <HEAD> Otwarcie nagłówka. Informacje nagłówkowe o dokumencie, łącznie z tytułem </HEAD> Zamknięcie nagłówka. <BODY> Otwarcie ciała strony. Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp. </BODY> Zamknięcie ciała strony. </> Koniec dokumentu. 1 / 33

2 Nagłówek <HEAD></HEAD> a) Standart kodowania polskich liter: <META http-equiv= content-type content= text/html; charset=iso > <META http-equiv= content-type content= text/html; charset=windows-1250 > (nie zalecane!) b) <TITLE> tytuł strony, który ukazuje się w belce tytułowej przeglądarki </TITLE> Nie należy używać w tytułach samych WIELKICH LITER ani wpisywać adresów internetowych, ponieważ niektóre przeglądarki mogą to zignorować. Należy podawać jako tytuł informacje rzeczywiste o tym co znajduje się na stronie unikając ogólników. c) <META NAME ="Description" CONTENT="Opis treści znajdującej się na stronie"> Jest to opis zawartości strony, który osoba posługująca się wyszukiwarką zobaczy pod tytułem strony. d) <META NAME="Keywords" CONTENT="wyrazy, kluczowe, oddzielone, przecinkami"> Nie powinno się powtarzać słów, ponieważ wyszukiwarki mogą potraktować stroną jako spam. Nie należy przekraczać 1000 słów. e) <META HTTP-EQUIV="Content-Language" CONTENT="pl"> Zdefiniowanie języka (kraju) strony. Przeglądarki używają tego polecenia wyszukując strony stworzone w danym języku. pl Język polski en Język angielski de Język niemiecki fr Język francuski enus amerykański Język f) <META NAME="Author" CONTENT="imię i nazwisko"> Informacje o autorze strony. g) <META HTTP-EQUIV="Creation-date" CONTENT="Sun, 21 Nov :30:01 GMT"> Data stworzenia strony. h) <META HTTP-EQUIV="Reply-to" CONTENT="nick@poczta.pl"> Adres autora strony. i) <META NAME="Generator" CONTENT="nazwa generatora"> Edytor, przy pomocy którego utworzono stronę. Często jest to informacja generowana automatycznie przez edytory. 2 / 33

3 j) <META NAME="Refresh" CONTENT="wartość (co ile sekund strona ma być odświeżana)"> Narzucenie przeglądarce częstotliwości odświeżania strony. Polecenie to nie jest zalecane. <META NAME="Refresh" CONTENT="5; url= Przekierowanie strony na inny adres. W przykładzie po 5 sekundach nastąpi przekierowanie na stronę Onetu. Polecenia <BODY></BODY> Polecenia należy domykać w odwrotnej kolejności niż ta wg, której się pojawiały. Odpowiada to matematycznej notacji nawiasów: {poziom 3 [poziom 2 (poziom 1) poziom 2] poziom 3}, czyli przykładowo: poziom 3 poziom 2 poziom 1 poziom 2 poziom 3, będzie odpowaiadało zapisowi: <u> poziom 3 <i> poziom 2 <b>poziom 1</b> poziom 2</i> poziom 3</u>. a) Czcionka. <znacznik atrybut= wartość > Opis <B> tekst </B> Tekst pogrubiony. <I> tekst </I> Tekst pochylony (kursywa). <U> tekst </U> Tekst podkreślony. <S> tekst </S> Tekst przekreślony. <STRIKE> tekst </STRIKE> <SUB> tekst </SUB> Subskrypt czcionka w dolnym indeksie. <SUP> tekst </SUP> Superskrypt czcionka w górnym indeksie. Tekst przeformatowany, czyli tekst, w którym wszystkie znaki mają taką samą wielkość. <PRE> tekst </PRE> Przykładowo można w nim wstawiać wielokrotne spacje. Pisany jest najczęściej czcionką Fourier New. Numerowanie (każdy nowy punkt zaczynamy <OL> kolejne punkty </OL> przez <LI>). Zdefiniowanie typu numeracji: type= <OL type= wartość parametru > > type= a a. b. c. kolejne punkty </OL> type= A A. B. C. type= i i. ii. iii. type= I I. II. III. <OL start= wartość > kolejne punkty </OL> <UL> kolejne podpunkty </UL> Numerowanie rozpoczynające się od określonej wartości. Punktory (każdy nowy podpunkt zaczynamy przez <LI>). 3 / 33

4 <UL type= wartość parametru > kolejne podpunkty </UL> <FONT size= rozmiar > tekst </FONT> <FONT size= +/-rozmiar > tekst </FONT> <BASEFONT size= wartość > <FONT size= normal > tekst <SMALL> tekst </SMALL> tekst tekst <BIG> tekst </BIG> tekst <FONT color= nazwa koloru > tekst </FONT> <FONT face= nazwa czcionki > tekst </FONT> <BR> <FIELDSET> tekst </ FIELDSET > <FIELDSET> <LEGEND> tekst legendy </LEGEND> </FIELDSET> <CENTER> treść </ CENTER > <DIV align= center >treść</div> Zdefiniowanie typu punktora: DISC SQUARE o CIRCLE Zmiana rozmiaru czcionki. Skala: 1-7. Domyślna wartość wynosi 3, co odpowiada w zależności od przeglądarki czcionce około pkt. Zwiększenie/zmniejszenie rozmiaru czcionki (skala rozmiarów możliwych do przyjęcia: 1-7). Ustalenie domyślnego rozmiaru czcionki. Powrót do domyślnego rozmiaru czcionki. Pomniejszenie tekstu o 1 pomiędzy znacznikami. Powiększenie tekstu o 1 pomiędzy znacznikami. Zmiana koloru tekstu. Zmiana typu czcionki (np. Arial, Times New Roman, Vivien, Txt, ). Pisanie tekstu od nowej linii. Tekst w ramce. Dodaje opis do ramki. Dodając parametr ALIGN można wyrównać odpowiednio opis. Wyśrodkowanie na stronie. Nowy akapit tekstu. Pomiędzy poszczególne akapity tekstu <P> tekst </P> wstawiana jest automatyczna interlinia, czyli jedna pusta linijka. <P id= nazwa akapitu > tekst </P> Nowy akapit tekstu o nazwie nazwa akapitu. <P align= wartość parametru > tekst </P> <SPAN style= rodzaj formatowania > tekst formatowany</span> <Hn> tekst </Hn> <Hn align= wartość parametru > tekst </Hn> <Hn title= opis tekstu > tekst </Hn> 4 / 33 Wyrównanie tekstu: a. LEFT do lewej krawędzi strony; b. CENTER do środka strony; c. JUSTIFY wyjustowanie tekstu; d. RIGHT do prawej krawędzi strony. Pozwala na tymczasową zmianę stylu, przypisanie określonego formatowania do elementu. Tekst automatycznego nagłówka: stopień n=1,2,3,4,5,6 (H6-najmniejszy; H1-największy). Wyrównanie nagłówka na stronie: LEFT CENTER RIGHT Tekst opisujący nagłówek (żółty kartonik wyjeżdżający po przytrzymaniu myszki na tekście).

5 5 / 33

6 b) Inne (odsyłacze, tło strony, itp.). <znacznik atrybut= wartość > Opis <BODY bgcolor= nazwa koloru > Ustalenie koloru tła strony. <BODY background= nazwa obrazka lub ścieżka dostępu do obrazka > Ustalenie rysunku tła strony. <BODY text= nazwa koloru > Ustalenie koloru czcionki dla całej strony. <BODY topmargin= wartość > Podanie wartości (w pikselach) górnego marginesu. <BODY bottommargin= wartość > Podanie wartości (w pikselach) dolnego marginesu. <BODY leftmargin= wartość > Podanie wartości (w pikselach) lewego marginesu. <BODY rightmargin= wartość > Podanie wartości (w pikselach) prawego marginesu. <BODY link= nazwa koloru > Ustalenie koloru nowych linków. <BODY alink= nazwa koloru > Ustalenie koloru aktywnych linków. <BODY vlink= nazwa koloru > Ustalenie koloru odwiedzonych linków. Przejście przez kliknięcie w treść <A href= > odsyłacza do strony, której adres treść odsyłacza </A> wpisano (tutaj: Odsyłacze mogą być BLISKIE (w obrębie serwera naszej strony) lub DALEKIE (odsyłające na inny serwer). Zamiast odnośnika do strony można użyć dowolnego pliku: kliknięcie na link spowoduje otwarcie danego dokumentu w oknie przeglądarki, przy ewentualnym uruchomieniu odpowiedniego programu z dysku użytkownika strony (np. Media playera dla plików *.avi). Próba uruchomienia pliku typu *.exe, *.zip, *.rar (itp.) zaowocuje pojawieniem się okna z zapytaniem czy chcemy plik otworzyć z bieżącej lokalizacji (z serwera strony), czy zapisać go na naszym dysku. <A href= target= _blank > treść odsyłacza </A> <A href= mailto:nick@poczta.pl > treść odsyłacza </A> <A href= mailto:nick@poczta.pl?subjec t=temat listu > treść odsyłacza </A> <A href= mailto:nick@poczta.pl?subjec t=temat listu&body=treść listu > treść odsyłacza </A> 6 / 33 Strona otworzy się w nowym oknie. Przejście przez kliknięcie w treść odsyłacza do pisania wiadomości tekstowej (tutaj zaadresowany do: nick@poczta.pl). Tworzy nowy z wypełnionym tematem listu. Tworzy nowy z wypełnionym tematem listu oraz wpisaną treścią listu. Uwaga! Przy użyciu kilku parametrów oddzielane są znakiem: &. Pierwszy oddzielony został przezł?.

7 <A href= > treść odsyłacza </A> <A href= > treść odsyłacza </A> <A href= #nazwa akapitu > treść odsyłacza </A> <HR> <HR color= nazwa koloru > <HR noshade> <HR size= wartość > <HR width= wartość > <HR width= wartość align= wartość parametru >  lub: <! tekst komentarza // --> Tworzy nowy i wysyła go na adres: nick@poczta.pl, przesyłając kopię na adres: kopia@poczta.pl. Tworzy nowy i wysyła go na adres: nick@poczta.pl, przesyłając ukrytą kopię na adres: ukryty@poczta.pl. Przejście (w ramach tej samej strony) przez kliknięcie w treść odsyłacza do akapitu oznaczonego wcześniej jako: nazwa akapitu. Linia pozioma. Linia pozioma o określonym kolorze. Linia pozioma bez cieniowania. Linia pozioma o określonej grubości. Linia pozioma o określonej szerokości: a. bezwzględnej: wartość liczbowa (np.600) b. względnej: wartość procentowa (np.50%) Linia pozioma (o zmienionej szerokości!) wyrównana względem szerokości strony: LEFT CENTER RIGHT Komentarz (tekst, który zostanie zignorowany przez przeglądarkę). c) Multimedia. <znacznik atrybut= wartość > <IMG src= nazwa lub źródło obrazka > <IMG src= nazwa lub źródło obrazka width= wartość > <IMG src= nazwa lub źródło obrazka height= wartość > Opis Wstawianie obrazka lub innego elementu (film). Nazwę podajemy wraz z rozszerzeniem. Zmiana szerokości obrazka: a. bezwzględna: wartość liczbowa (np.600) b. względna: wartość procentowa (np.50%) Zmiana wysokości obrazka. 7 / 33

8 <IMG src= nazwa lub źródło obrazka alt= opis obrazka > <IMG src= nazwa lub źródło obrazka border= wartość > <IMG src= nazwa lub źródło obrazka align= wartość parametru > <IMG src= nazwa lub źródło obrazka align= left vspace= wartość > <IMG src= nazwa lub źródło obrazka align= left hspace= wartość > <IMG src= nazwa lub źródło obrazka usemap= #nazwa mapy > <IMG src= nazwa lub źródło filmu start= wartość parametru > Opis pojawiający się na obrazku w oknie przeglądarki po przytrzymaniu na nim myszki. Zamiast ALT można użyć TITLE. Obramowanie obrazka ramką o określonej szerokości. Oklejenie obrazka tekstem: a. LEFT - wyrównanie obrazka do lewej strony b. RIGHT - wyrównanie obrazka do prawej strony Inne zastosowanie tego polecenia to wyrównanie tekstu względem obrazka: - TOP tekst wyrównany względem górnej krawędzi; - MIDDLE - tekst wyrównany względem środka; - BOTTOM - tekst wyrównany względem dolnej krawędzi obrazka. Uwaga! <BR clear= left/right tak jak dla align > powoduje kontynuację pisania tekstu poniżej obrazka. Odsunięcie tekstu wokół obrazka o określoną wartość (względem pionu). Odsunięcie tekstu wokół obrazka o określoną wartość (względem poziomu). Przypisuje mapę do obrazka. Ustalenie momentu uruchamiania multimediów: ONLOAD po całkowitym załadowaniu się strony MOUSEOVER po najechaniu kursorem na film 8 / 33

9 d) Animacja <MARQUEE> Animacje tego typu rozpoznawane są przez Microsoft Internet Explorer i nie są uwzględniane w standardzie 4.0. <znacznik atrybut= wartość > <MARQUEE> tekst pływający </MARQUEE> <MARQUEE behavior= wartość parametru > tekst pływający </MARQUEE> <MARQUEE bgcolor= nazwa koloru > tekst pływający </MARQUEE> <MARQUEE direction= wartość parametru > tekst pływający </MARQUEE> <MARQUEE width= wartość > tekst pływający </MARQUEE> <MARQUEE height= wartość > tekst pływający </MARQUEE> <MARQUEE loop= wartość > tekst pływający </MARQUEE> <MARQUEE vspace= wartość >> tekst pływający </MARQUEE> <MARQUEE hspace= wartość > tekst pływający </MARQUEE> Opis Wstawianie pływającego tekstu ( ). Zdefiniowanie sposobu poruszania się tekstu: SCROLL tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu; SLIDE tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się tam; ALTERNATE tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. Definicja koloru tła (drogi) dla tekstu. Określenie kierunku ruchu dla tekstu: o LEFT ( ) o RIGHT ( ) Określenie szerokości pasa ruchu (drogi). Może być wyrażona jako wartość stała lub zmieniająca się procentowo. Określenie wysokości pasa ruchu (drogi). Pętla określenie ile razy ma być powtórzony ruch. Odsunięcie pływającego tekstu o określoną wartość od elementów z nim sąsiadujących. (względem pionu). Uwaga! Akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>. Odsunięcie pływającego tekstu o określoną wartość od elementów z nim sąsiadujących. (względem poziomu). 9 / 33

10 <MARQUEE scrollamount= wartość > tekst pływający </MARQUEE> <MARQUEE scrolldelay= wartość > tekst pływający </MARQUEE> <MARQUEE align= wartość parametru > tekst pływający </MARQUEE> Określenie płynności ruchu oraz jego tempa: - mała wartość parametru (np. 5) powoduje ruch płynny i powolny; - duża wartość parametru (np. 50) powoduje ruch szybki, ale szarpany. Określa odstępy pomiędzy skokami (w milisekundach). 1000=1sekunda Ustala, na jakiej wysokości pola (drogi) pojawi się tekst.: - TOP tekst wyrównany względem górnej krawędzi; - MIDDLE - tekst wyrównany względem środka; - BOTTOM - tekst wyrównany względem dolnej krawędzi obrazka. <TABLE> e) Tabele Struktura tabeli: </TABLE> <TR> </TR> <TD> </TD> Początek tabeli. Otwarcie wiersza. Otwarcie komórki. Zamknięcie komórki. Zamknięcie wiersza. Zamknięcie tabeli. Element powtarzamy tyle razy ile komórek chcemy uzyskać. Element powtarzamy tyle razy ile wierszy chcemy uzyskać. 10 / 33

11 Polecenia: <znacznik atrybut= wartość > <TD> &nbsp </TD> <TABLE border> zawartość tabeli </TABLE> <TABLE border= wartość > zawartość tabeli </TABLE> <TABLE cellspacing= wartość > zawartość tabeli </TABLE> <TABLE cellpadding= wartość > zawartość tabeli </TABLE> <TABLE width= wartość > zawartość tabeli </TABLE> <TABLE height= wartość > zawartość tabeli </TABLE> <TABLE align= wartość parametru > zawartość tabeli </TABLE> <TABLE color= nazwa koloru > zawartość tabeli </TABLE> <TABLE bgcolor= nazwa koloru > zawartość tabeli </TABLE> <TABLE background= ścieżka dostępu do obrazu > zawartość tabeli </TABLE> <TABLE border bordercolor= nazwa koloru > zawartość tabeli </TABLE> <TABLE border bordercolorlight= nazwa koloru bordercolordark= nazwa koloru > zawartość tabeli </TABLE> Opis &nbsp lepka spacja wpisywana do komórki jeśli chcemy aby pozostała pusta. Pokazanie krawędzi tabeli. Przypisanie określonej szerokości dla krawędzi zewnętrznej tabeli (obramowanie). Przypisanie określonej szerokości dla krawędzi wewnętrznych tabeli. Określenie marginesu pomiędzy zawartością komórek, a ich krawędziami. Określenie szerokości tabeli: a. bezwzględna: wartość liczbowa (np.600); b. względna: wartość procentowa (np.50%). Określenie wysokości tabeli. Oklejenie tabeli tekstem: a. LEFT - wyrównanie tabeli do lewej strony; b. RIGHT - wyrównanie tabeli do prawej strony. Ustalenie koloru czcionki tabeli. Ustalenie koloru tła tabeli. Ustalenie obrazu tła tabeli. Przypisanie jednego koloru dla krawędzi tabeli. Przypisanie dwóch kolorów dla krawędzi tabeli. 11 / 33

12 Pokazanie/ukrycie wybranych krawędzi tabeli: VOID Tylko wewnętrzne. ABOVE Wewnętrzne + górna. BELLOW Wewnętrzne + dolna. <TABLE border frame= wartość parametru > zawartość tabeli </TABLE> LHS RHS Wewnętrzne + lewa. Wewnętrzne + prawa. VSIDES Wewnętrzne + zewnętrzne pionowe (prawa, lewa). HSIDES Wewnętrzne + zewnętrzne poziome (górna, dolna). BOX Wewnętrzne i zewnętrzne. 12 / 33

13 Pokazanie/ukrycie krawędzi tabeli (przy zastosowaniu pełnej definicji tabeli: thead-tfoot-tbody): NONE Tylko krawędź zewnętrzna tabeli. <TABLE border rules= wartość parametru > zawartość tabeli </TABLE> GROUPS ROWS Krawędzie zewnętrzne poszczególnych elementów tabeli: thead, body, tfoot. Krawędzie zewnętrzne + poziome (wiersze). thead tbody tfoot COLS Krawędzie zewnętrzne + pionowe (kolumny). ALL Wewnętrzne i zewnętrzne. <TD align= wartość parametru > zawartość komórki </TD> <TD valign= wartość parametru > zawartość komórki </TD> <TD rowspan= ilość wierszy > zawartość komórki </TD> <TD colspan= ilość kolumn > zawartość komórki </TD> <CAPTION align= wartość parametru > tytuł tabeli </CAPTION> Wyśrodkowanie zawartości komórki względem poziomu: LEFT CENTER RIGHT Wyśrodkowanie zawartości komórki względem pionu: TOP MIDDLE BOTTOM Rozciągnięcie komórki na określoną ilość wierszy: scalenie komórek w pionie. Rozciągnięcie komórki na określoną ilość kolumn: scalenie komórek w poziomie. Przypisanie tytułu tabeli z ustaleniem jego położenia: TOP nad tabelą; BOTTOM pod tabelą. 13 / 33

14 <CAPTION align= wartość parametru valign= wartość parametru > tytuł tabeli </CAPTION> Przypisanie tytułu tabeli z ustaleniem jego położenia i wyśrodkowania: Align= LEFT CENTER RIGHT Valign = TOP BOTTOM Wiersz nagłówka: <TABLE> <TR> <TH> </TH> </TR> <TR> <TD> </TD> </TR> </TABLE> Początek tabeli. Otwarcie wiersza. Otwarcie komórki. Zamknięcie komórki. Zamknięcie wiersza. Otwarcie wiersza. Otwarcie komórki. Zamknięcie komórki. Zamknięcie wiersza. Zamknięcie tabeli. Element powtarzamy tyle razy ile komórek nagłówka chcemy uzyskać. Element powtarzamy tyle razy ile komórek chcemy uzyskać. Element powtarzamy tyle razy ile wierszy nagłówka chcemy uzyskać. Domyślnie wiersze nagłówkowe wyróżnione są czcionką pogrubioną. Element powtarzamy tyle razy ile wierszy chcemy uzyskać. 14 / 33

15 f) Wstawianie obiektów OBJECT. <znacznik atrybut= wartość > Opis <OBJECT ( )> Treść wyświetlana w przeglądarkach nieobsługujących polecenie typu obiekt. Wstawianie obiektu. </OBJECT> Pełna definicja ramki pływającej: o DATA miejsce na podanie źródła pliku; <OBJECT data= źródło pliku, który o WIDTH szerokość ramki; pojawi się jako obiekt type= typ o HEIGHT wysokość ramki; obiektu width= wartość o TYPE rodzaj danych height= wartość > Treść wczytywanych jako obiekt; alternatywna. Strona sieci Web </OBJECT> TEXT/ (html) TEXT/PLAIN Dokument tekstowy (txt) IMAGE/JPEG Obraz (jpg) g) Formularze <znacznik atrybut= wartość > <FORM> zawartość formularza </FORM> <FORM action= mailto:nick@poczta.pl method= post enctype= text/plain > zawartość formularza </FORM> Opis Polecenie definiujące formularz. Akcja, jaka ma zostać wykonana po wypełnieniu formularza: przesłanie jego wyników na adres nick@poczta.pl. Jeśli zamiast POST wpiszemy GET (wartość domyślna) wynikiem będzie pobranie informacji o czytelniku i np. zapisanie ich w bazie danych albo dopisanie informacji do podanego wcześniej w ACTION adresu URL(wyszukanie słowa na stronie). Parametr enctype= text/plain spowoduje przesłanie danych w postaci tekstowej (rozkodowanej). Do grupowanie poleceń w obrębie danego formularza można wykorzystać polecenie FIELDSET oraz TABLE. 15 / 33

16 <INPUT type= wartość parametru name= nazwa pola value= początkowa zawartość pola > Tworzy pola formularza: TYPE: 16 / 33

17 17 / 33 TEXT CHECKBOX RADIO PASSWORD HIDDEN BUTTON IMAGE FILE SUBMIT Jednowierszowe pole tekstowe. Jest to wartość domyślna tego parametru. Dla pól tekstowych można dodatkowo zdefiniować parametr SIZE= wartość, określający rozmiar pola. Pole do fajkowania tekstu przy kwadraciku zaznaczania. Możemy wybrać więcej niż jedną opcję. W poniższym przykładzie wartość przy parametrze VALUE zostanie przesłana do autora formularza, natomiast tekst wpisany po zdefiniowaniu pola będzie widoczny dla osoby wypełniającej formularz: <INPUT TYPE="checkbox" NAME="jezyk" VALUE="angielski"> angielski <INPUT TYPE="checkbox" NAME="jezyk" VALUE="francuski"> francuski Pole wyboru tylko jednej z istniejących opcji: kropeczka przeskakuje pomiędzy odpowiednimi polami. W poniższym przykładzie podobnie jak wcześniej oprócz podania wartości parametru VALUE, należy wpisać treść, która będzie widoczna dla użytkownika: <INPUT TYPE="radio" NAME="plec" VALUE="kobieta" checked> Kobieta <INPUT TYPE="radio" NAME="plec" VALUE="mężczyzna"> Mężczyzna Możliwość wpisania hasła Ukryte pole. Nie wyświetla się w oknie przeglądarki, a może służyć do przechowywania pewnych danych, których nie może zmieniać internauta. Pole w postaci przycisku. Pole w postaci grafiki. Należy podać również jaki obraz ma zostać wyświetlony (SRC= obrazek.jpg ). Umożliwia przeglądnięcie dysku komputera, celem znalezienia pliku do wysłania. Wysyła informację do autora formularza. Wartość parametru VALUE w tym przypadku pojawi się na przycisku, a informacje zostaną wysłane na adres zdefiniowany w poleceniu <FORM ACTION= mailto:nick@poczta.

18 <INPUT type= wartość parametru name= nazwa pola value= wartość parametru readonly> <INPUT type= wartość parametru name= nazwa pola id= nazwa identyfikująca pole > <INPUT type= wartość parametru name= nazwa pola value= wartość parametru maxlength= wartość > <INPUT type= wartość parametru name= nazwa pola tabindex= wartość > <INPUT type= wartość parametru name= nazwa pola accesskey= klawisz skrótu > <INPUT type= wartość parametru name= nazwa pola disabled> <LABEL for= nazwa identyfikująca pole > treść etykiety </LABEL> <BUTTON> treść przycisku </BUTTON> <BUTTON disabled> treść przycisku </BUTTON> <BUTTON name= nazwa przycisku > treść przycisku </BUTTON> <BUTTON type= button/submit/reset > treść przycisku </BUTTON> <BUTTON title= podpis > treść przycisku </BUTTON> <SELECT name= nazwa pola > lista opcji możliwych do wybrania </SELECT> 18 / 33 Blokuje możliwość modyfikacji pola przez użytkownika. Wprowadza identyfikator pola. Ogranicza ilość znaków możliwych do wpisania w polu. Umożliwia określenie kolejności poruszania się po elemantach formularza (przy użyci klawisza tabulatora). Umożliwia zdefiniowanie klawisza skrótu do elementu. Często klawisz skrótu działa łącznie z klawiszem ALT. Wyłączenie elementu. Etykieta przypisywana do pola o określonej nazwie (parametr ID pola). Wstawia przycisk. Wewnątrz przycisków można stosować wszystkie inne polecenie i tworzyć np. przycisk z wklejonym na nim obrazkiem. Wyłącza przycisk Przypisuje nazwę do przycisku. Przyporządkowanie akcji do kliknięcia. Podpis pojawiający się po najechaniu myszką na przycisk. Służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje. Kolejne wiersze definiowane są przy pomocy polecenia: <OPTION> <SELECT NAME="nazwa_listy"> <OPTION> pierwsza pozycja <OPTION> druga pozycja <OPTION> trzecia pozycja

19 <SELECT name= nazwa pola multiple> lista opcji możliwych do wybrania </SELECT> <SELECT name= nazwa pola > <OPTION selected> opcja domyślnie wybrana </SELECT> <SELECT name= nazwa pola multiple size= wartość > lista opcji możliwych do wybrania </SELECT> <TEXTAREA name= nazwa pola > domyślny tekst pola tekstowego </TEXTAREA> <TEXTAREA name= nazwa pola rows= wartość cols= wartość > domyślny tekst pola tekstowego </TEXTAREA> <TEXTAREA name= nazwa pola wrap= wartość parametru > domyślny tekst pola tekstowego </TEXTAREA>... </SELECT> Dopisanie tego polecenia zamienia listę rozwijaną na listę pokazującą więcej wierszy możliwości wyboru. Domyślnie są to 4 wiersze. Wielokrotny wybór możliwy jest przez klikanie z wciśniętym klawiszem CTRL. Zaznaczenie danej opcji. Określenie rozmiaru okna selekcji. Polecenie wstawiające większe pole tekstowe. Domyślnie ma ono rozmiar 40 kolumn i 4 wierszy. Zmiana rozmiaru pola tekstowego. Zawijanie tekstu: OFF wyłącza zawijanie tekstu (opcja domyślna); PHYSICAL zawijanie tekstu w okienku I wysyłanie również jako zawinięty; VIRTUAL zawijanie tekstu w okienku, ale wysyłanie go jako tekst niezawijany. 19 / 33

20 h) Ramki pływające (floating frame, inline frame) Ramki pływające mogą być umieszczone w dowolnym miejscu na stronie. <znacznik atrybut= wartość > Opis Definicja ramki pływającej. <IFRAME ( )> Tekst alternatywny Jeśli przeglądarka nie akceptuje tego dla przeglądarek, które nie akceptują typu ramek, odczyta jedynie tekst ramek pływających. </IFRAME> umieszczony pomiędzy znacznikami. <IFRAME width= wartość height= wartość src="źródło pliku"> Tekst alternatywny dla przeglądarek, które nie akceptują ramek pływających. </IFRAME> <IFRAME width= wartość height= wartość src="źródło pliku" frameborder= wartość parametru > Tekst alternatywny </IFRAME> <IFRAME width= wartość height= wartość src="źródło pliku" scrolling= wartość parametru > Tekst alternatywny </IFRAME> <IFRAME width= wartość height= wartość src="źródło pliku" marginwidth= wartość > Tekst alternatywny </IFRAME> <IFRAME width= wartość height= wartość src="źródło pliku" marginheight= wartość > Tekst alternatywny </IFRAME> <IFRAME width= wartość height= wartość src="źródło pliku" hspace= wartość > Tekst alternatywny </IFRAME> <IFRAME width= wartość height= wartość src="źródło pliku" vspace= wartość > Tekst alternatywny </IFRAME> <IFRAME width= wartość height= wartość src="źródło pliku" name= nazwa ramki > Tekst alternatywny </IFRAME> 20 / 33 Pełna definicja ramki pływającej: o Width szerokość ramki; o Height wysokość ramki; o Src źródło pliku, jaki ma pojawić się w ramce. Pokazywanie (1) lub ukrywanie (0) obramowania ramki. Zezwalanie (YES) lub zakazywanie (NO) na przewijanie ramki (suwaki). Wprowadzenie marginesów z prawej i lewej strony ramki. Wprowadzenie marginesów u góry i u dołu ramki. Wprowadzenie odstępu poziomego ramki od elementów sąsiadujących. Wprowadzenie odstępu pionowego ramki od elementów sąsiadujących. Nadanie ramce nazwy. Uwaga! Jeśli nazwiemy ramkę możemy utworzyć grupę odsyłaczy otwierających się w danej ramce, np. <A href="plik.htm" TARGET="nazwa ramki pływającej"> Treść odsyłacza </A>

21 2. Ramki Ramki stosuje się w celu ułatwienia nawigacji na stronach. Polegają one na podzieleniu okna przeglądarki na kilka części i załadowaniu w nich kilku plików. Struktura strony opartej na ramkach Podstawową sprawą jest stworzenie strony bazowej opartej na ramkach, z której tworzymy odwołania do innych stron, będących w stosunku do bazowej stronami podrzędnymi. Na stronie bazowej definiujemy układ ramek oraz sposób otwierania innych dokumentów. Na podstawowej (bazowej) stronie nie umieszczamy znaczników, za wyjątkiem zdefiniowania postaci ramek oraz bloku nagłówka. Znacznik <BODY> </BODY> umieszcza się pomiędzy <NOFRAMESET> </NOFRAMESET>. Przykładowo: <> <HEAD> <TITLE> tytuł </TITLE> </HEAD> Część nagłówkowa strony. <FRAMESET COLS= 25%, *% > <FRAME SCROLLING= auto NAME= nazwa ramki SRC= nazwa pliku strony, która ma pojawiś się w ramce > <FRAME SCROLLING= yes NAME= nazwa ramki SRC= plik.html > <NOFRAMES> <BODY> Zawartość strony dla przeglądarek nieobsługujących ramek. </BODY> </NOFRAMES> 21 / 33 Zdefiniowanie rozkładu kolumn poszczególnych ramek na 25% szerokości strony dla rakmi pierwszej oraz na 75% (reszta szerokości strony) dla ramki drugiej. Źródło i nazwa ramki pierwszej. Źródło i nazwa ramki drugiej. Dodatkowa część zawierająca treść strony dla przeglądarek nieobsługujących ramek.

22 </> </FRAMESET> Polecenia <znacznik atrybut= wartość > <FRAMESET> zawartość ramki </FRAMESET > <NOFRAMESET> zawartość strony </NOFRAMESET > <FRAMESET cols= wartość, wartość > zawartość ramki </FRAMESET > <FRAMESET rows= wartość, wartość > zawartość ramki </FRAMESET > Opis Koniec definiowania ramek. Definicja ramki. Dodatkowa część zawierająca treść strony dla przeglądarek, które nie obsługują ramek. Jeśli dana przeglądarka obsługuje ramki, treść pomiędzy tymi znacznikami zostanie zignorowana. Definicja szerokości kolumn (ramek). Po przecinkach podaje się odpowiednie wartości w postaci liczbowej lub procentowej szerokości kolejnych kolumn. Wpisanie gwiazdki (*) zamiast wartości oznacza wykorzystanie pozostającej szerokości okna przeglądarki dla kolumny. Definicja ilości i szerokości wierszy (ramek). 22 / 33

23 Uwaga! Jeśli chcemy podzielić stronę jednocześnie na kilka kolumn i wierszy, najpierw definiujemy podział na wiersze, a następnie w ramach definicji danego wiersza deklarujemy podział na kolumny. Przykładowo: <FRAMESET ROWS= 10%,*%,20% > <FRAME SRC= wiersz1.htm > Zdefiniowanie pierwszego wiersza strony. <FRAMESET COLS=35%,*,35%> <FRAME SRC= kol1.htm > <FRAME SRC= kol2.htm > <FRAME SRC= kol3.htm > </FRAMESET> Zdefiniowanie drugiego wiersza strony, składającego się z 3 kolumn. Zdefiniowanie strony złożonej z 3 wierszy <FRAMESET COLS=50%,50%> <FRAME SRC= kol4.htm > <FRAME SRC= kol5.htm > </FRAMESET> Zdefiniowanie trzeciego wiersza strony, składającego się z 2 kolumn. </FRAMESET> taki sposób definiuje się bardziej złożony układ ramek. W <FRAMESET border= wartość > zawartość ramki </FRAMESET > Definicja szerokości obramowania dzielącego poszczególne ramki. 23 / 33

24 <FRAMESET frameborder= wartość parametru > zawartość ramki </FRAMESET> <FRAMESET bordercolor= nazwa koloru > zawartość ramki </FRAMESET > <FRAME src= nazwa pliku, który pojawi się w ramce > zawartość ramki </FRAME > <FRAME src= plik.html scrolling= wartość parametru > zawartość ramki </FRAME > <FRAME name= nazwa ramki > zawartość ramki </FRAME > <FRAME noresize> zawartość ramki </FRAME > <FRAME frameborder= wartość parametru > zawartość ramki </FRAME > <FRAME bordercolor= nazwa koloru > zawartość ramki </FRAME > <FRAME marginheight= wartość > zawartość ramki </FRAME > <FRAME marginwidth= wartość > zawartość ramki </FRAME > Określenie czy obramowanie rozdzielające ramki ma być pokazane czy nie: o YES lub 1 pokaż obramowanie; o NO lub 0 ukryj obramowanie. Domyślnie jest ono wyświetlane. Uwaga! Aby usunąć obramowania w IE, we FRAMESET oprócz FRAMEBORDER=0 powinniśmy jeszcze użyć parametru FRAMESPACING=0. Definicja koloru obramowania. Przypisaniu dokumentu do ramki. Zezwolenie na przewijanie dokumentu w ramce: o YES zezwala na przewijanie; o NO zakazuje przewijania; o AUTO tworzy suwaki automatycznie kiedy strona nie mieści się w ramce. Przypisanie nazwy do ramki. Zablokowanie możliwości modyfikowania przez użytkownika szerokości poszczególnych ramek (skalowania). Określenie czy obramowanie danej ramki będzie wyświetlane: o YES lub 1 pokaż obramowanie; o NO lub 0 ukryj obramowanie. Uwaga! Oprócz FRAMEBORDER=0 powinniśmy jeszcze użyć parametru FRAMESPACING=0. Zdefiniowanie koloru ramki. Wymuszenie dodatkowego odstępu u dołu i i góry ramki. Wymuszenie dodatkowego odstępu z prawej i lewej strony ramki. 24 / 33

25 <A href= nazwa pliku target= wartość parametru > zawartość ramki </A > Zdefiniowanie odsyłacza (linku) oraz miejsca, gdzie się powinien otworzyć: o _BLANK otwarcie strony nastąpi w nowym oknie przeglądarki; o _SELF nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku; o _PARENT przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu; o _TOP przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę"; o nazwa ramki otwarcie nastąpi ramce o podanej nazwie. 25 / 33

26 3. Kolory podstawowe: Kolory można podawać trzema sposobami: 1- słownie, używając ich angielskich nazw; 2- używając systemu Red-Green-Blue; 3- za pomocą trypletu szesnastkowego. Nazwa koloru (pl) Nazwa koloru Syst. (ang) szesnastkowy Syst. dziesiętny biały white #FFFFFF rgb(255,255,255) czarny black # rgb(0,0,0) zielony green # rgb(0,128,0) niebieski blue #0000FF rgb(0,0,255) różowy fuchsia #FF00FF rgb(255,0,255) żółty yellow #FFFF00 rgb(255,255,0) intensywny zielony lime #00FF00 rgb(0,255,0) (limetka) ciemno żółty (oliwka) olive # rgb(128,128,0) fioletowy purple # rgb(128,0,128) zielonomodry teal # rgb(0,128,128) srebrny (szary 25%) silver #C0C0C0 rgb(192,192,192) czerwony red #FF0000 rgb(255,0,0) ciemno niebieski navy # rgb(0,0,128) ciemno czerwony maroon # rgb(128,0,0) szary (50%) gray # rgb(128,128,128) turkusowy aqua #00FFFF rgb(0,255,255) 26 / 33

27 4. Kaskadowe arkusze stylów CSS Style CSS służą do definiowania wyglądu poszczególnych elementów na stronie. o Budowa: selektor1 {parametr1:wartość1; parametr2:wartość2} Selektor to nazwa Tagu, który chcemy modyfikować, np. h2, p, img, o Rodzaje i metody zapisu stylów: Typ stylu Opis Przykład OSADZONY ZEWNĘTRZNY WPISANY Definiowany w nagłówku, pomiędzy znacznikiem: <STYLE type= text/css > </STYLE> oraz znacznikiem komentarza:  Definiowany w oddzielnym pliku, zapisywanym z rozszerzeniem: style.css. W nagłówku strony tworzymy odnośnik do pliku stylów: <LINK href= STYLE.CSS rel= stylesheet type= text/css >. W pliku stylu (style.css) definiujemy właściwości elementów pomiędzy znacznikiem komentarza: . Definiowany tylko dla jednego znacznika (elementu), poprzez dodanie do jego definicji (bezpośrednio w sekcji BODY) parametru: STYLE= parametr1:wartość1; parametr2:wartość2. <HEAD> <STYLE type= text/css >  </STYLE> </HEAD> Plik index.html: <HEAD> <LINK href= STYLE.CSS rel= stylesheet type= text/css > </HEAD> Plik style.css:  <P style= color:blue; font-weight:bold > Tekst paragrafu będzie napisany niebieską i pogrubioną czcionką. </P> 27 / 33

28 o Grupowanie. Aby przyporządkować ten sam styl do kilku elementów (selektorów) podajemy je oddzielone od siebie przecinkami: selektor1, selektor2, selektor3 {parametr1:wartość1; parametr2:wartość2} o Klasy. Klasy umożliwiają wprowadzenie odstępstw od stylu (wyjątki). Definiuje się je w arkuszu style.css w postaci:.wyjatek1 {parametr1:wartość1} a następnieprzy elemencie do którego odnosi się wyjątek dodajemy parametr: class= wyjatek1. Przykładowo: Plik index.html: <h3 class= kolorek > Nagłówek objęty regułą wyjątku. </h3> Plik style.css: H3 {text-align:center; color:red}.kolorek {color:green} o Pseudoklasy. Służą do definiowania wyglądu hiperłączy: Polecenie a:link a:active a:visited a:hover Opis Zwykły link, przed uaktywnieniem go. Link aktywny: podczas ładowania się strony do której prowadzi. Link odwiedzony. Link w momencie wskazania go myszką (w chwili najechania na niego wskaźnikiem myszy). Wpisywane są w arkuszu stylów style.css w postaci: a:link {parametr1:wartość1; parametr2:wartość2} 5. Warstwy. 28 / 33

29 Warstwa jest to wycięty kawałek strony, który możemy umieścić w dowolnym miejscu. Warstwy mogą być umieszczane jedna na drugiej. Właściwości warstw definiowane są w pliku stylów style.css w postaci: #warstwa1 {position:relative; background-color:yellow} #warstwa2 {position:absolute; top:100px; left:100px background-color:green} W pliku index.html w sekcji <BODY> warstwy definiuje się poprzez znacznik: <DIV id= warstwa1 > Zawartość warstwy. </DIV> Ustalanie położenia warstwy: POSITION:RELATIVE, czyli położenie względne odpowiadające umiejscowieniu warstwy zgodnie z układem elementów strony. POSITION:ABSOLUTE; TOP:999PX; LEFT:999PX, czyli położenie bezwzględne, definiowane jako odległość lewego górnego rogu warstwy od takiegoż rogu strony. Kolejność warstw: parametr Z-INDEX= wartość. Warstwa znajdująca się na spodzie ma najmniejszą wartość parametru z-index (czyli z-index:1), czyli im większa wartość tym wyżej znajdzie się dana warstwa. z-index:3 z-index:1 z-index:4 z-index:2 29 / 33

30 Wybrane właściwości CSS Właściwości dotyczące tekstu ELEMENT OPIS MOZLIWE WARTOSCI color kolor czcionki wszystkie możliwe kolory font-family font-size krój czcionki wielkość czcionki wszystkie możliwe kroje czcionek w punktach (pt); xx-small, x- small, smaler, small, large, larger, x-large, xx-large font-style styl czcionki normal, italic, oblique font-weight waga (grubość) czcionki lighter, normal, bold, bolder font-variant kapitaliki normal, small_caps text-align wyrównanie tekstu left, right, center, justify text-decoration dekoracja tekstu none, underline, line-through text-indent text-transform white-space cursor wcięcie pierwszego wiersza akapitu transformacja tekstu tekst normalny / preformatowany / 'niełamliwy' wiersz rodzaj kursora w punktach (pt), procentach lub pikselach (px) none, lowercase, uppercase, capitalize normal, pre, nowrap e-resize, ne-resize, n-resize, nwresize, w-resize, sw-resize, s- resize, se-resize, hand, crosshair, help, move, text, auto, default, wait Właściwości dotyczące tła backgroundattachment ELEMENT OPIS MOŻLIWE WARTOŚCI tło przewijane/znak wodny scroll, fixed background-color kolor tła wszystkie możliwe kolory background-image grafika jako tło url("plik.jpg") background-position pozycja tła w punktach (pt), procentach lub pikselach (px) 30 / 33

31 background-repeat sposób powtarznia tła repeat, repeat-x, repeat-y, norepeat Właściwości dotyczące odstępów i marginesów margin-top ELEMENT OPIS MOŻLIWE WARTOŚCI margin-bottom margin-left margin-right word-spacing letter-spacing line-height górny margines dolny margines lewy margines prawy margines odstępy pomiędzy wyrazami odstępy pomiędzy znakami odstępy pomiędzy wierszami w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) Właściwości dotyczące obramowania i pasków przewijania border-width border-style ELEMENT OPIS MOŻLIWE WARTOŚCI grubość obramowania styl obramowania w punktach (pt), procentach lub pikselach (px) none, solid, double, inset, outset, groove, ridge border-color kolor obramowania wszystkie możliwe kolory 31 / 33

32 scrollbar-face-color scrollbar-arrow-color scrollbar-track-color scrollbar-highlightcolor scrollbar-shadowcolor scrollbar-3dlightcolor scrollbardarkshadow-color elementy paska przewijania wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory Właściwości dotyczące warstw position top bottom left right ELEMENT OPIS MOZLIWE WARTOSCI pozycja warstwy: względna/bezwzględna położenie warstwy względem górnego marginesu położenie warstwy względem dolnego marginesu położenie warstwy względem lewego marginesu położenie warstwy względem prawego marginesu relative, absolute w pikselach (px) w pikselach (px) w pikselach (px) w pikselach (px) z-index kolejność warstwy liczby całkowite width wysokość warstwy w pikselach (px) height szerokość warstwy w pikselach (px) visibility widoczność warstwy: pokazana/ukryta visible, hidden dla IE, show, hide dla NN background-color kolor tła wszystkie możliwe kolory background-image grafika jako tło url("plik.jpg") 32 / 33

33 source-include clip źródło pliku ładowanego w warstwie część warstwy, która ma zostać pokazana url("plik.hmtl") rect(x1,y1,x2,y2) 33 / 33