Język HTML. Zasady nazywania i zapisywania plików: Struktura dokumentu: HyperText Markup Language, czyli język hipertekstowy.

Transkrypt

1 Język HTML Zasady nazywania i zapisywania plików: 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. Plik strony startowej nosi najczęściej nazwę index.html lub index.htm (nie zalecane). 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 parametrze 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". Struktura dokumentu: HyperText Markup Language, czyli język hipertekstowy. Definicja języka: <!DOCTYPE html public -//w3c//dtd html 4.01 transitional//en > Struktura dokumentu: <HTML> Początek dokumentu. <HEAD> Otwarcie nagłówka. Informacje nagłówkowe o dokumencie, łącznie z tytułem </HEAD> Zamknięcie nagłówka.

2 <BODY> Otwarcie ciała strony. Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp. </BODY> Zamknięcie ciała strony. </HTML> Koniec dokumentu.

3 Nagłówek <HEAD></HEAD> Standart kodowania polskich liter: <META http-equiv= content-type content= text/html; charset=iso > <META http-equiv= content-type content= text/html; charset=windows > (nie zalecane!) <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. <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. <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. <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 Język amerykański <META NAME="Author" CONTENT="imię i nazwisko"> Informacje o autorze strony. <META HTTP-EQUIV="Creation-date" CONTENT="Sun, 21 Nov :30:01 GMT"> Data stworzenia strony. <META HTTP-EQUIV="Reply-to" CONTENT="nick@poczta.pl"> Adres autora strony. <META NAME="Generator" CONTENT="nazwa generatora"> Edytor HTML, przy pomocy którego utworzono stronę. Często jest to informacja generowana automatycznie przez edytory.

4 <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.

5 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>. Czcionka. Polecenie <B> tekst </B> <I> tekst </I> <U> tekst </U> <S> tekst </S> <STRIKE> tekst </STRIKE> Opis Tekst pogrubiony. Tekst pochylony (kursywa). Tekst podkreślony. Tekst przekreślony. <SUB> tekst </SUB> Subskrypt czcionka w dolnym indeksie. <SUP> tekst </SUP> Superskrypt czcionka w górnym indeksie. <PRE> tekst </PRE> <OL> kolejne punkty </OL> <OL type= wartość parametru > > kolejne punkty </OL> <OL start= wartość > kolejne punkty </OL> <UL> kolejne podpunkty </UL> Tekst przeformatowany, czyli tekst, w którym wszystkie znaki mają taką samą wielkość. Przykładowo można w nim wstawiać wielokrotne spacje. Pisany jest najczęściej czcionką Fourier New. Numerowanie (każdy nowy punkt zaczynamy przez <LI>). Zdefiniowanie typu numeracji: type= type= a a. b. c. type= A A. B. C. type= i i. ii. iii. type= I I. II. III. Numerowanie rozpoczynające się od określonej wartości. Punktory (każdy nowy podpunkt zaczynamy przez <LI>).

6 <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 > <P> tekst </P> Zdefiniowanie typu punktora: DISC SQUARE 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 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> 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.

7 <SPAN style= rodzaj formatowania > tekst formatowany</span> <Hn> tekst </Hn> <Hn align= wartość parametru > tekst </Hn> <Hn title= opis tekstu > tekst </Hn> 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). Inne (odsyłacze, tło strony, itp.). Polecenie <BODY bgcolor= nazwa koloru > <BODY background= nazwa obrazka lub ścieżka dostępu do obrazka > <BODY text= nazwa koloru > <BODY topmargin= wartość > <BODY bottommargin= wartość > <BODY leftmargin= wartość > <BODY rightmargin= wartość > <BODY link= nazwa koloru > <BODY alink= nazwa koloru > <BODY vlink= nazwa koloru > Opis Ustalenie koloru tła strony. Ustalenie rysunku tła strony. Ustalenie koloru czcionki dla całej strony. Podanie wartości (w pikselach) górnego marginesu. Podanie wartości (w pikselach) dolnego marginesu. Podanie wartości (w pikselach) lewego marginesu. Podanie wartości (w pikselach) prawego marginesu. Ustalenie koloru nowych linków. Ustalenie koloru aktywnych linków. Ustalenie koloru odwiedzonych linków.

8 <A href= > treść odsyłacza Przejście przez kliknięcie w treść odsyłacza do strony, której adres </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> Strona otworzy się w nowym oknie. <A href= mailto:nick@poczta.pl > treść odsyłacza Przejście przez kliknięcie w treść odsyłacza do pisania wiadomości </A> tekstowej (tutaj zaadresowany do: nick@poczta.pl). <A href= mailto:nick@poczta.pl?subject=temat Tworzy nowy z listu > treść odsyłacza </A> wypełnionym tematem listu. Tworzy nowy z wypełnionym tematem listu oraz wpisaną treścią listu. <A href= mailto:nick@poczta.pl?subject=temat Uwaga! listu&body=treść listu > treść odsyłacza </A> Przy użyciu kilku parametrów oddzielane są znakiem: &. Pierwszy oddzielony został przezł?. <A Tworzy nowy i wysyła go na adres: nick@poczta.pl, href= mailto:nick@poczta.pl?cc=kopia@poczta.pl > przesyłając kopię na adres: treść odsyłacza </A> kopia@poczta.pl. <A Tworzy nowy i wysyła go na adres: nick@poczta.pl, href= mailto:nick@poczta.pl?bcc=ukryty@poczta.pl > przesyłając ukrytą kopię na adres: treść odsyłacza </A> ukryty@poczta.pl.

9 Przejście (w ramach tej samej strony) przez kliknięcie w treść <A href= #nazwa akapitu > treść odsyłacza </A> odsyłacza do akapitu oznaczonego wcześniej jako: nazwa akapitu. Utworzenie mapy: opcja ta polega na wydzieleniu obszarów na <MAP name= nazwa mapy > definicja mapy </MAP> rysunku, które przejmą rolę zwykłych odsyłaczy. Zdefiniowanie kształtów obszarów na mapie: SHAPE= rectangle tworzy prostokąt (podajemy współrzędne przeciwległych wierzchołków); <MAP name= nazwa mapy > SHAPE= circle tworzy okrąg <AREA shape= nazwa kształtu coords= współrzędne (podajemy współrzędne środka kształtu href= plik odnośnika > okręgu i długość promienia); </MAP> SHAPE= polygon tworzy wielokąt (podajemy współrzędne co najmniej 3 wierzchołków). Współrzędne podajemy wg zasady: x1, y1, x2, y2, x3, y3, Przykład: <map name="mapa"> <area shape="rectangle" coords="7, 10, 84, 84" href="1.html"> <area shape="rectangle" coords="107, 15, 145, 65" href="2.html"> <area shape="circle" coords="129, 130, 38" href="3.html"> <area shape="polygon" coords="141, 83, 173, 7, 192, 98" href="4.html"> <area shape="polygon" coords="11, 97, 31, 111, 99, 93, 72, 133, 114, 187, 55, 169, 2, 187" href="5.html"> </map> <img src="temp/linki.jpg" border="0" usemap="#mapa"> W podanym przykładzie po kliknięciu myszką na biały obszar na obrazku, zostaniemy przeniesieni do zdefiniowanego wcześniej pliku. <HR> Linia pozioma.

10 <HR color= nazwa koloru > <HR noshade> <HR size= wartość > <HR width= wartość > <HR width= wartość align= wartość parametru >  lub: <! tekst komentarza // --> 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ę). Grafika lub multimedia. Polecenie <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ść > <IMG src= nazwa lub źródło obrazka alt= opis obrazka > 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. Opis pojawiający się na obrazku w oknie przeglądarki po przytrzymaniu na nim myszki. Zamiast ALT można użyć TITLE.

11 <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 > 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

12 Animacja <MARQUEE> Animacje tego typu rozpoznawane są przez Microsoft Internet Explorer i nie są uwzględniane w standardzie HTML 4.0. Polecenie Opis <MARQUEE> tekst pływający </MARQUEE> 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 <MARQUEE behavior= wartość wypływa ponownie zza pierwszego brzegu; parametru > tekst pływający SLIDE tekst wyrusza od pierwszego brzegu, </MARQUEE> dociera do drugiego i zatrzymuje się tam; ALTERNATE tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. <MARQUEE bgcolor= nazwa koloru > tekst pływający </MARQUEE> Definicja koloru tła (drogi) dla tekstu. <MARQUEE direction= wartość Określenie kierunku ruchu dla tekstu: parametru > tekst pływający LEFT ( ) </MARQUEE> RIGHT ( ) Określenie szerokości pasa ruchu (drogi). <MARQUEE width= wartość > tekst Może być wyrażona jako wartość stała lub pływający </MARQUEE> zmieniająca się procentowo. <MARQUEE height= wartość > tekst pływający </MARQUEE> Określenie wysokości pasa ruchu (drogi). <MARQUEE loop= wartość > tekst Pętla określenie ile razy ma być powtórzony pływający </MARQUEE> ruch. Odsunięcie pływającego tekstu o określoną wartość od elementów z nim sąsiadujących. <MARQUEE vspace= wartość >> tekst pływający </MARQUEE> (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ą <MARQUEE hspace= wartość > tekst wartość od elementów z nim sąsiadujących. pływający </MARQUEE> (względem poziomu).

13 <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.

14 Tabele Struktura tabeli: <TABLE> <TR> Początek tabeli. Otwarcie wiersza. </TABLE> </TR> <TD> Otwarcie komórki. Element powtarzamy tyle Zamknięcie </TD> komórki. Zamknięcie wiersza. Zamknięcie tabeli. razy ile komórek chcemy uzyskać. Element powtarzamy tyle razy ile wierszy chcemy uzyskać. Polecenia: Polecenie Opis <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> &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.

15 <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> Ustalenie obrazu tła tabeli. Przypisanie jednego koloru dla krawędzi tabeli. Przypisanie dwóch kolorów dla krawędzi tabeli. 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 Wewnętrzne + lewa. RHS Wewnętrzne + prawa. VSIDES Wewnętrzne + zewnętrzne pionowe (prawa, lewa). HSIDES Wewnętrzne + zewnętrzne poziome (górna, dolna).

16 BOX Wewnętrzne i zewnętrzne. Pokazanie/ukrycie krawędzi tabeli (przy zastosowaniu pełnej definicji tabeli: thead-tfoottbody): NONE Tylko krawędź zewnętrzna tabeli. GROUPS Krawędzie poszczególnych zewnętrzne elementów thead tbody <TABLE border rules= wartość tabeli: thead, body, tfoot. tfoot parametru > zawartość tabeli </TABLE> ROWS Krawędzie zewnętrzne + poziome (wiersze). 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ść 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.

17 komórki </TD> <CAPTION align= wartość parametru > tytuł tabeli </CAPTION> <CAPTION align= wartość parametru valign= wartość parametru > tytuł tabeli </CAPTION> Przypisanie tytułu tabeli z ustaleniem jego położenia: TOP nad tabelą; BOTTOM pod tabelą. Przypisanie tytułu tabeli z ustaleniem jego położenia i wyśrodkowania: Align= LEFT CENTER RIGHT TOP Valign = BOTTOM Wiersz nagłówka: <TABLE> Początek tabeli. <TR> Otwarcie wiersza. Element powtarzamy <TH> Otwarcie komórki. Element powtarzamy </TH> Zamknięcie komórki. </TR> Zamknięcie wiersza. <TR> Otwarcie wiersza. tyle razy ile komórek nagłówka chcemy uzyskać. tyle razy ile wierszy nagłówka chcemy uzyskać. Domyślnie wiersze nagłówkowe wyróżnione są czcionką pogrubioną. </TR> <TD> Otwarcie komórki. Element powtarzamy Zamknięcie </TD> komórki. Zamknięcie wiersza. tyle razy ile komórek chcemy uzyskać. Element powtarzamy tyle razy ile wierszy chcemy uzyskać. </TABLE> Zamknięcie tabeli. Pełna definicja tabeli: thead-tfoot-tbody <TABLE> <THEAD> <TR> <TD> Definicja Zdefiniowanie wiersza. Definicja części nagłówkowej tabeli.

18 </TD > pojedynczej komórki. </TR > </THEAD > <TFOOT> <TR> </TR > <TD> </TD > Definicja pojedynczej komórki. Zdefiniowanie wiersza. Definicja części stopki tabeli. Uwaga! Definicję stopki umieszcza się PRZED definicją ciała tabeli. </TFOOT> <TBODY> <TR> <TD> </TD > Definicja pojedynczej komórki. Zdefiniowanie wiersza. Definicja właściwej części (ciała) </TR tabeli. > </TBODY > </TABLE>

19 Wstawianie obiektów OBJECT. Polecenie <OBJECT ( )> Treść wyświetlana w przeglądarkach nieobsługujących polecenie typu obiekt. </OBJECT> <OBJECT data= źródło pliku, który pojawi się jako obiekt type= typ obiektu width= wartość height= wartość > Treść alternatywna. </OBJECT> Opis Wstawianie obiektu. Pełna definicja ramki pływającej: DATA miejsce na podanie źródła pliku; WIDTH szerokość ramki; HEIGHT wysokość ramki; TYPE rodzaj danych wczytywanych jako obiekt; TEXT/HTML Strona sieci Web (html) TEXT/PLAIN Dokument tekstowy (txt) IMAGE/JPEG Obraz (jpg) Formularze Polecenie <FORM> zawartość formularza </FORM> Opis Polecenie definiujące formularz.

20 <FORM action= method= post enctype= text/plain > zawartość formularza </FORM> <INPUT type= wartość parametru name= nazwa pola value= początkowa zawartość pola > Akcja, jaka ma zostać wykonana po wypełnieniu formularza: przesłanie jego wyników na adres 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. Tworzy pola, które mogą być wypełniane przez użytkownika. TYPE: Jednowierszowe pole tekstowe. Jest to wartość domyślna tego parametru. TEXT 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 CHECKBOX 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

21 RADIO PASSWORD HIDDEN BUTTON IMAGE FILE SUBMIT <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.pl > <INPUT TYPE="submit" VALUE="Wyślij do nas informacje"> RESET Kliknięcie w przycist czyści

22 wszystkie pola formularza. <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> Wartość parametru VALUE w tym przypadku pojawi się na przycisku: <INPUT TYPE="reset" VALUE="Usuń wszystkie informacje"> NAME nazwa pola (ułatwia jego identyfikację. VALUE wprowadza początkową wartość do pola, np jakiś tekst. 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. <BUTTON disabled> treść przycisku </BUTTON> Wyłącza przycisk

23 <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> <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> 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... </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.

24 <TEXTAREA name= nazwa pola wrap= wartość parametru > domyślny tekst pola tekstowego </TEXTAREA> 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.

25 Ramki pływające (floating frame, inline frame) Ramki pływające mogą być umieszczone w dowolnym miejscu na stronie. Polecenie <IFRAME ( )> Tekst alternatywny dla przeglądarek, które nie akceptują ramek pływających. </IFRAME> <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> Opis Definicja ramki pływającej. Jeśli przeglądarka nie akceptuje tego typu ramek, odczyta jedynie tekst umieszczony pomiędzy znacznikami. Pełna definicja ramki pływającej: Width szerokość ramki; Height wysokość ramki; 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.

26 <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> 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>

27 Ramki Ramki stosuje się w celu ułatwienia nawigacji na stronach HTML. Polegają one na podzieleniu okna przeglądarki na kilka części i załadowaniu w nich kilku plików HTML. 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: <HTML> <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 > 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. <NOFRAMES> <BODY> Zawartość strony dla przeglądarek nieobsługujących ramek. </BODY> </NOFRAMES> Dodatkowa część zawierająca treść strony dla przeglądarek nieobsługujących ramek. </FRAMESET> Koniec definiowania ramek.

28 </HTML > Polecenia Polecenie <FRAMESET> zawartość ramki </FRAMESET > <NOFRAMESET> zawartość strony </NOFRAMESET > <FRAMESET cols= wartość, wartość > zawartość ramki </FRAMESET > <FRAMESET rows= wartość, wartość > zawartość ramki </FRAMESET > Opis 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).

29 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 > <FRAMESET COLS=35%,*,35%> <FRAME SRC= kol1.htm > <FRAME SRC= kol2.htm > <FRAME SRC= kol3.htm > </FRAMESET> Zdefiniowanie pierwszego wiersza strony. 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> W taki sposób definiuje się bardziej złożony układ ramek. <FRAMESET border= wartość > zawartość ramki </FRAMESET > <FRAMESET frameborder= wartość parametru > zawartość ramki </FRAMESET> <FRAMESET bordercolor= nazwa koloru > zawartość ramki </FRAMESET > Definicja szerokości obramowania dzielącego poszczególne ramki. Określenie czy obramowanie rozdzielające ramki ma być pokazane czy nie: YES lub 1 pokaż obramowanie; 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.

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

31 Zdefiniowanie odsyłacza (linku) oraz miejsca, gdzie się powinien otworzyć: _BLANK otwarcie strony nastąpi w nowym oknie przeglądarki; _SELF nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku; _PARENT przywoływany dokument zamieni <A href= nazwa pliku target= wartość dokument nadrzędny w hierarchii dla bieżącego parametru > zawartość ramki </A > dokumentu; _TOP przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę"; nazwa ramki otwarcie nastąpi ramce o podanej nazwie. Kolory podstawowe: Kolory można podawać trzema sposobami: słownie, używając ich angielskich nazw; używając systemu Red-Green-Blue; za pomocą trypletu szesnastkowego. Nazwa koloru (pl) Nazwa koloru (ang) Syst. 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 (limetka) lime #00FF00 rgb(0,255,0) 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)

32 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) Kaskadowe arkusze stylów CSS Style CSS służą do definiowania wyglądu poszczególnych elementów na stronie. Budowa: selektor1 {parametr1:wartość1; parametr2:wartość2} Selektor to nazwa Tagu, który chcemy modyfikować, np. h2, p, img, Rodzaje i metody zapisu stylów: Typ stylu Opis Przykład OSADZONY Definiowany w nagłówku, pomiędzy znacznikiem: <STYLE type= text/css > </STYLE> oraz znacznikiem komentarza:  <HEAD> <STYLE type= text/css >  </STYLE> </HEAD>

33 ZEWNĘTRZNY WPISANY 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. 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> 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} 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>

34 Plik style.css: H3 {text-align:center; color:red}.kolorek {color:green} 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} Warstwy. 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.

35 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

36 Wlasciwosci CSS Właściwości dotyczące tekstu ELEMENT OPIS MOZLIWE WARTOSCI color kolor czcionki wszystkie możliwe kolory font-family krój czcionki wszystkie możliwe kroje czcionek font-size wielkość czcionki 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 wcięcie pierwszego wiersza w punktach (pt), procentach lub akapitu pikselach (px) text-transform transformacja tekstu none, lowercase, uppercase, capitalize white-space tekst normalny / preformatowany / normal, pre, nowrap 'niełamliwy' wiersz cursor rodzaj kursora 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 ELEMENT OPIS MOŻLIWE WARTOŚCI

37 background-attachment 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) background-repeat sposób powtarznia tła repeat, repeat-x, repeat-y, no-repeat

38 Właściwości dotyczące odstępów i marginesów ELEMENT OPIS MOŻLIWE WARTOŚCI margin-top margin-bottom margin-left margin-right górny margines dolny margines lewy margines prawy margines 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) word-spacing w punktach (pt), procentach lub odstępy pomiędzy wyrazami pikselach (px) letter-spacing odstępy pomiędzy znakami w punktach (pt), procentach lub pikselach (px) line-height odstępy wierszami pomiędzy w punktach (pt), procentach lub pikselach (px) Właściwości dotyczące obramowania i pasków przewijania ELEMENT OPIS MOŻLIWE WARTOŚCI border-width border-style 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 scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-3dlight-color scrollbar-arrow-color scrollbar-track-color wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory

39 scrollbar-darkshadowcolor wszystkie możliwe kolory

40 Właściwości dotyczące warstw ELEMENT OPIS MOZLIWE WARTOSCI position pozycja warstwy: relative, absolute względna/bezwzględna top bottom left right położenie względem marginesu położenie względem marginesu położenie względem marginesu położenie względem marginesu warstwy górnego w pikselach (px) warstwy dolnego w pikselach (px) warstwy lewego w pikselach (px) warstwy prawego w pikselach (px) z-index kolejność warstwy liczby całkowite width wysokość warstwy w pikselach (px) height szerokość warstwy w pikselach (px) visibility widoczność pokazana/ukryta warstwy: 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") source-include clip źródło pliku ładowanego w url("plik.hmtl") warstwie część warstwy, która ma rect(x1,y1,x2,y2) zostać pokazana