1 Narzędzia internetowe Paweł Rajba [email protected] http://pawel.ii.uni.wroc.pl/
2 HTML Typy dokumentów HTML
3 HTML Struktura dokumentu
4 HTML Nagłówek, czyli znacznik HEAD TITLE – tytuł dokumentu wyświetlany w pasku przyglądarki META – metainformacje LINK – wzajemne relacje między dokumentami BASE – adres bazowy dla relatywnych odwołań ze strony
5 HTML Nagłówek, META name, content – atrybuty zawierające dodatkowe informacje o dokumencie http-equiv, content – atrybuty zawierające nagłówki serwera protokołu HTTP lang – określa język wartości atrybutu content scheme – określa dodatkowy kontekst, który ułatwia interpretację zawartości content
6 HTML Nagłówek, META, przykłady Ogólna składnia content dla Robots content = "ALL" | "NONE" | directives directives = directive ["," directives] direcitve = INDEX,NOINDEX,FOLLOW,NOFOLLOW
7 HTML Nagłówek, META, BASE, przykłady
8 HTML Nagłówek, LINK, atrybuty: charset – kodowanie wskazywanego zasobu href – adres zasobu type – typ zawartości rel – typ dokumentu wskazywanego rev – typ dokumentu, z którego jest odwołanie do bieżącego dokumentu
9 HTML Nagłówek, LINK, typy dokumentów (rel) Alternate – alternatywna wersja dokumentu, często stosowana z atrybutem lang StyleSheet – zewnętrzny arkusz styli Start – strona startowa w kolekcji dokumentów Next – następna strona w kolekcji Prev – strona poprzednia w kolekcji Index – index kolekcji dokumentów
10 HTML Nagłówek, LINK, typy dokumentów (rel) c.d. Contents – spis treści (ang. Table of Contents) dokumentów w kolekcji Glosssary – słownik pojęć Copyright – prawa autorskie dla dokumentu Appendix – appendix dla kolecji dokumentów Help – plik z dodatkową pomocą, informacjami linkami itp.
11 HTML Nagłówek, LINK, przykłady Chapter 2...reszta dokumentu...
12 HTML Przykładowy nagłówek: Strona domowa Pawła Rajby [email protected]
13 HTML Przykładowy nagłówek c.d.:
14 HTML Podstawowy zestaw atrybutów id – identyfikator elementu w dokumencie; w ramach dokumenty identyfikatory muszą być różne class – określa zestaw klas elementu style – definiuje styl elementu
15 HTML BODY, czyli treść dokumentu bgcolor="kolor" – kolor tła background="URI" – obrazek tła text="kolor" – kolor tekstu link="kolor" – kolor linków vlink="kolor" – kolor odwiedzonych linków alink="kolor" – kolor aktywnych linków Wszystkie powyższe atrybuty mają status Deprecated. W ich miejsce należy używać styli.
16 HTML Grupowanie elementów DIV – elementu typu block SPAN – element typu inline Atrybut: align, lang
17 HTML Formatowanie tekstu EM – wyróżnienie STRONG – mocne wyróżnienie DFN – definicja CODE – fragment kodu programu SAMP – wynik działania programu, skryptu,… VAR – zmienna, argument programu ABBR – skróty (np. WWW, HTTP, URI, …)
18 HTML Formatowanie tekstu c.d. TT – czcionka stałej szerokości I – pochylenie B – pogrubienie BIG – "duży" font SMALL – mały font STRIKE lub S – przekreślenie (Deprecated) U – podkreślenie (Deprecated)
19 HTML Formatowanie tekstu c.d. FONT – ustawia czcionkę size – rozmiar, liczba od 1 do 7 lub relatywnie np. +1, -3 color face – lista nazw czcionek Przykład:
20 HTML Cytowania BLOCKQUOTE – typu block Q – typu inline Atrybut: cite="URL" Indeksy SUB – dolny SUP – górny
21 HTML Elementy blokowe H1-H6 – nagłówki tekstu ADRESS – adres P – akapit tekstu PRE – preformatowany fragment tekstu BR – złamanie linii Atrybut: clear="left" | "right" | "both" HR – linia pozioma Atrybuty: align, noshade, size, width
22 HTML Elementy blokowe c.d. INS, DEL – elementy mające za zadanie zaznaczać fragmenty tekstu, które zmieniły się w kolejnej wersji dokumentu Atrybuty cite="URL" – dodatkowa informacja, która ma pomóc wyjaśnić, dlaczego dokument został zmieniony datetime="datetime" – data zmiany dokumentu
23 HTML Listy UL – nienumerowane (Unordered Lists) type="disc" | "circle" | "square" compact – większy stopień upakowania OL – nienumerowane (Ordered Lists) type="1" | "A" | "a" | "i" | "I" compact – większy stopień upakowania Wszystkie powyższe atrybuty są Deprecated.
24 HTML Listy c.d. LI – element listy (List Item) type=odpowiednio do UL lub OL value="30" – numer elementu listy compact – większy stopień upakowania Wszystkie powyższe atrybuty są Deprecated.
25 HTML Listy – przykład Kod: Pierwszy punkt Drugi punkt Trzeci punkt i tutaj value jest 31 Da wynik: E. Pierwszy punkt AD. Drugi punkt 31. Trzeci punkt i tutaj value jest 31
26 HTML Listy – przykład zagnieżdżania Dzień pierwszy Jedzenie Spanie Wszystkie pozostałe dni Jedzenie Spanie
27 HTML Lista definicji DL – definition list DT – definition type DD – definition data
28 HTML Lista definicji - przykład Kod: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne Wynik: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne
29 HTML Tabele – znaczniki TABLE, TR, TH, TD Mały przykład na początek: Nr indeksu Ocena 91044 5.0 91057 5.0 91088 5.0 91092 5.0
30 HTML Tabele, TABLE summary="tekst" – opis tabeli width="50%" | "500" – szerokość tabeli border="2" cellpadding="4" cellspacing="1"
31 HTML Tabele, TR – wiersz w tabeli align="left" | "center" | "right" | "justify" valign="top" | "middle" | "bottom" Tabele, TH, TD – komórka w tabeli align, valign - wyrównywanie nowrap – blokuje automatyczne zawijanie wierszy width="40" – szerokość kolumny height="20" – wysokość kolumny Powyższe atrybuty dla TH i TD są Deprecated.
32 HTML Tabele TH, TD c.d. headers="a1 a2" – id komórek, którą są nagłówkiem dla bieżącej komórki scope="row" | "col" | "rowgroup" | "colgroup" – określa, jaki jest zakres komórki nagłówka rowspan="4" – łączy wiersze colspan="2" – łączy kolumny CAPTION – tytuł tabeli
33 HTML Tabela, kolejny przykład Indeks Ocena Grupa 91044 5.0 Gr. 1 91055 5.0 Razem
34 HTML Tabela, kolejny przykład c.d.
35 HTML c.d. Tabela, grupowanie wierszy...nagłówek......stopka......pierwszy wiersz pierwszego bloku danych......pierwszy wiersz drugiego bloku danych......drugi wiersz drugiego bloku danych...
36 HTML Tabela, grupowanie wierszy, kilka uwag: każda grupa musi mięć co najmniej 1 wiersz, sekcja TFOOT powinna być przed TBODY, znacznik TBODY jest obowiązkowy, chyba że występuje sam i wtedy można go pominąć, znaczniki zamykające można pominąć.
37 HTML Tabela, grupowanie kolumn COLGROUP – grupuje kolumny span="4" – określa ilość kolumn w grupie, nie stosujemy gdy występuje znacznik COL width="50" – określa domyślną szerokość każdej kolumny w grupie Przykładzik:...
38 HTML Tabela, grupowanie kolumn c.d. COL – umożliwia łączenie kolumn i stosowanie do nich wspólnego formatowania; NIE grupuje kolumn span="4" – określa ilość połączonych kolumn width="50" – określa domyślną szerokość każdej kolumny w zestawie, przykrywa COLGROUP.width.
39 HTML Tabela, grupowanie kolumn, przykład......dalsza część tabelki...
40 HTML Tabela, TABLE frame – określa sposób obramowania tabeli void – z żadnej strony (domyślnie) above, below – na górze, na dole lhs, rhs – z lewej, z prawej hsides – na górze i na dole, vsides – z lewej i z prawej box, border – z każdej strony
41 HTML Tabela, TABLE rules – określa sposób wyświetlania linii wewnętrznych none – żadnych linii all – pomiędzy wierszami i kolumnami groups – pomiędzy grupami wierszy i grupami kolumn row – pomiędzy wierszami cols – pomiędzy kolumnami
42 HTML Tabela, duży przykład na koniec (strona 1/4) CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
43 HTML Tabela, duży przykład na koniec (strona 2/4) Code-Page ID Name ACP OEMCP Windows NT 3.1 Windows NT 3.51 Windows 95
44 HTML Tabela, duży przykład na koniec (strona 3/4) 1200 Unicode (BMP of ISO/IEC- 10646) X X * 1250 Windows 3.1 Eastern European X X X X 1251 Windows 3.1 Cyrillic X X X X 1252 Windows 3.1 US (ANSI) X X X X 1253 Windows 3.1 Greek X X X X 1254 Windows 3.1 Turkish X X X X 1361 Korean (Johab) X ** X
45 HTML Tabela, duży przykład na koniec (strona 4/4) 437 MS-DOS United States X X X X 708 Arabic (ASMO 708) X X 709 Arabic (ASMO 449+, BCON V4) X X 710 Arabic (Transparent Arabic) X X 720 Arabic (Transparent ASMO) X X
46 HTML Tabela, duży przykład na koniec (efekt)
47 HTML Odnośniki – znacznik A name="nazwa" – nazwa odnośnika href="URI" – adres zasobu hreflang="pl" – określa język zasobu wskazywanego przez href type="content-type" – określa typ zawartości zasoby wskazywanego przez href rel, rev – zależności między dokumentami charset – rodzaj kodowania
48 HTML Odnośniki, A, przykłady W3C Web site Kotwica I wtedy odwołujemy się: dokument.html#kotwica Albo: Kotwica Adres względny i bezwzględny Dok
49 HTML Odnośniki, inne protokoły gopher..., telnet..., newsy..., poczta.... Przykład, wysyłanie poczty Mailnij mnie
50 HTML Obrazki – znacznik IMG src="URI" – źródło obrazka alt="tekst" – krótki opis obrazka longdesc="URI" – link do długiego opisu name="nazwa" – nazwa obrazka height="wys" – wysokość width="szer" – szerokość usemap="URI" – adres mapy
51 HTML MAPY – MAP, AREA MAP name="nazwa" – nazwa mapy AREA – definiuje obszar na mapie shape="(rect|circle|poly|default)" – typ obszaru coords="1,2,3,4" – współrzędne obszaru href="URI" – adres zasobu związanego z obszarem nohref – z tym obszarem nie jest związana żadna czynność alt="tekst" – opis obszaru
52 HTML MAPY – atrybut coords coords – określa współrzędne obszaru rect – lewy-x, góra-y, prawy-x, dół-y circle – środek-x, środek-y, promień poly – x1,y1,x2,y2,...,xN,yN
53 HTML MAPY – przykład { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_53.jpg", "name": "HTML MAPY – przykład ", "description": "HTML MAPY – przykład ", "width": "800" } 54 HTML Ramki – FRAMESET FRAMESET rows, cols – liczba wierszy i kolumn NOFRAMES – alternatywna zawartość Przykłady...cała reszta...... cała reszta... { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_54.jpg", "name": "HTML Ramki – FRAMESET FRAMESET rows, cols – liczba wierszy i kolumn NOFRAMES – alternatywna zawartość Przykłady...cała reszta......", "description": "cała reszta....", "width": "800" } 55 HTML Ramki, FRAMESET Przykład zagnieżdżenia...zawartość ramki 1......zawartość ramki 2, wiersz 1......zawartość ramki 2, wiersz 2......zawartość ramki 3... { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_55.jpg", "name": "HTML Ramki, FRAMESET Przykład zagnieżdżenia...zawartość ramki 1......zawartość ramki 2, wiersz 1......zawartość ramki 2, wiersz 2......zawartość ramki 3...", "description": "HTML Ramki, FRAMESET Przykład zagnieżdżenia...zawartość ramki 1......zawartość ramki 2, wiersz 1......zawartość ramki 2, wiersz 2......zawartość ramki 3...", "width": "800" } 56 HTML Ramki, FRAME longdesc="tekst" – długi opis name="nazwa" – nazwa src="URI" – adres zawartości ramki frameborder="(1|0)" – czy obramowanie marginwidth="pixele" – margines poziomy marginheight="pixele" – margines pionowy scrolling="(yes|no|auto)" – paski przewijania { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_56.jpg", "name": "HTML Ramki, FRAME longdesc= tekst – długi opis name= nazwa – nazwa src= URI – adres zawartości ramki frameborder= (1|0) – czy obramowanie marginwidth= pixele – margines poziomy marginheight= pixele – margines pionowy scrolling= (yes|no|auto) – paski przewijania", "description": "HTML Ramki, FRAME longdesc= tekst – długi opis name= nazwa – nazwa src= URI – adres zawartości ramki frameborder= (1|0) – czy obramowanie marginwidth= pixele – margines poziomy marginheight= pixele – margines pionowy scrolling= (yes|no|auto) – paski przewijania", "width": "800" } 57 HTML Ramki – przykład (strona 1/2) Przykładowy dokument z ramkami... { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_57.jpg", "name": "HTML Ramki – przykład (strona 1/2) Przykładowy dokument z ramkami...", "description": "HTML Ramki – przykład (strona 1/2) Przykładowy dokument z ramkami...", "width": "800" } 58 HTML Ramki – przykład (strona 2/2)... Ten dokument zawiera: Dokument 2 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_58.jpg", "name": "HTML Ramki – przykład (strona 2/2)... Ten dokument zawiera: Dokument 2", "description": "HTML Ramki – przykład (strona 2/2)... Ten dokument zawiera: Dokument 2", "width": "800" } 59 HTML Ramki pływające – IFRAME IFRAME name src frameborder marginwidth marginheight scrolling height width align="(left|right|middle|top|bottom)" { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_59.jpg", "name": "HTML Ramki pływające – IFRAME IFRAME name src frameborder marginwidth marginheight scrolling height width align= (left|right|middle|top|bottom)", "description": "HTML Ramki pływające – IFRAME IFRAME name src frameborder marginwidth marginheight scrolling height width align= (left|right|middle|top|bottom)", "width": "800" } 60 HTML Ramki pływające – IFRAME Przykład [Your user agent does not support frames or is currently configured not to display frames. However, you may visit the related document. ] { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_60.jpg", "name": "HTML Ramki pływające – IFRAME Przykład [Your user agent does not support frames or is currently configured not to display frames.", "description": "However, you may visit the related document. ].", "width": "800" } 61 HTML Formularze, kontrolki: buttons (BUTTON, INPUT; BUTTON lepszy do wyświetlania) checkboxes (INPUT) radio buttons (INPUT) menus (SELECT z OPTION, OPTGROUP) text input (INPUT, TEXTAREA) file select (INPUT) hidden controls (INPUT) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_61.jpg", "name": "HTML Formularze, kontrolki: buttons (BUTTON, INPUT; BUTTON lepszy do wyświetlania) checkboxes (INPUT) radio buttons (INPUT) menus (SELECT z OPTION, OPTGROUP) text input (INPUT, TEXTAREA) file select (INPUT) hidden controls (INPUT)", "description": "HTML Formularze, kontrolki: buttons (BUTTON, INPUT; BUTTON lepszy do wyświetlania) checkboxes (INPUT) radio buttons (INPUT) menus (SELECT z OPTION, OPTGROUP) text input (INPUT, TEXTAREA) file select (INPUT) hidden controls (INPUT)", "width": "800" } 62 HTML FORM – definicja formularza action="URI" method="(POST|GET)" (domyślnie GET) enctype=zawartość – określa typ zawartości (ma sens w przypadku metody POST); domyślnie jest to "application/x-www-form-urlencoded", natomiast jeśli wysyła się plik powinno się ustawić na "multipart/form-data" accept-charset="charsetlist" – rodzaj kodowania akceptowany przez serwer accept="contenttypelist" name="nazwa" { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_62.jpg", "name": "HTML FORM – definicja formularza action= URI method= (POST|GET) (domyślnie GET) enctype=zawartość – określa typ zawartości (ma sens w przypadku metody POST); domyślnie jest to application/x-www-form-urlencoded , natomiast jeśli wysyła się plik powinno się ustawić na multipart/form-data accept-charset= charsetlist – rodzaj kodowania akceptowany przez serwer accept= contenttypelist name= nazwa", "description": "HTML FORM – definicja formularza action= URI method= (POST|GET) (domyślnie GET) enctype=zawartość – określa typ zawartości (ma sens w przypadku metody POST); domyślnie jest to application/x-www-form-urlencoded , natomiast jeśli wysyła się plik powinno się ustawić na multipart/form-data accept-charset= charsetlist – rodzaj kodowania akceptowany przez serwer accept= contenttypelist name= nazwa", "width": "800" } 63 HTML Formularze, INPUT – kontrolka formularza type=text|password|checkbox|radio|submit|reset|file| hidden | image | button name="nazwa" values="początkowa wartość" – nie dotyczy radio i checkbox size="rozmiar" maxlength="liczba" – dotyczy text i password checked – dotyczy radio i checkbox) src="URI" – dotyczy image readonly disabled tabindex="4" { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_63.jpg", "name": "HTML Formularze, INPUT – kontrolka formularza type=text|password|checkbox|radio|submit|reset|file| hidden | image | button name= nazwa values= początkowa wartość – nie dotyczy radio i checkbox size= rozmiar maxlength= liczba – dotyczy text i password checked – dotyczy radio i checkbox) src= URI – dotyczy image readonly disabled tabindex= 4", "description": "HTML Formularze, INPUT – kontrolka formularza type=text|password|checkbox|radio|submit|reset|file| hidden | image | button name= nazwa values= początkowa wartość – nie dotyczy radio i checkbox size= rozmiar maxlength= liczba – dotyczy text i password checked – dotyczy radio i checkbox) src= URI – dotyczy image readonly disabled tabindex= 4", "width": "800" } 64 HTML Formularze, przykład Imię: Nazwisko: Email: Mężczyzna Kobieta { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_64.jpg", "name": "HTML Formularze, przykład Imię: Nazwisko: Email: Mężczyzna Kobieta", "description": "HTML Formularze, przykład Imię: Nazwisko: Email: Mężczyzna Kobieta", "width": "800" } 65 HTML Formularze, przykład { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_65.jpg", "name": "HTML Formularze, przykład", "description": "HTML Formularze, przykład", "width": "800" } 66 HTML Formularze, BUTTON – tworzy przycisk name="nazwa" value="wartość" – wysyłane do serwera przy wysyłaniu type="(button|submit|reset)" – typ przycisku disabled tabindex Przykład Reset { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_66.jpg", "name": "HTML Formularze, BUTTON – tworzy przycisk name= nazwa value= wartość – wysyłane do serwera przy wysyłaniu type= (button|submit|reset) – typ przycisku disabled tabindex Przykład Reset", "description": "HTML Formularze, BUTTON – tworzy przycisk name= nazwa value= wartość – wysyłane do serwera przy wysyłaniu type= (button|submit|reset) – typ przycisku disabled tabindex Przykład Reset", "width": "800" } 67 HTML Formularze, SELECT – tworzy menu name="nazwa" size="3" multiple disabled tabindex="4" { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_67.jpg", "name": "HTML Formularze, SELECT – tworzy menu name= nazwa size= 3 multiple disabled tabindex= 4", "description": "HTML Formularze, SELECT – tworzy menu name= nazwa size= 3 multiple disabled tabindex= 4", "width": "800" } 68 HTML Formularze OPTION – element menu selected disabled label="etykieta" value="wartość" OPTGROUP – grupuje elementy disabled label { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_68.jpg", "name": "HTML Formularze OPTION – element menu selected disabled label= etykieta value= wartość OPTGROUP – grupuje elementy disabled label", "description": "HTML Formularze OPTION – element menu selected disabled label= etykieta value= wartość OPTGROUP – grupuje elementy disabled label", "width": "800" } 69 HTML Formularze, przykład SELECT None SuSE 8.2 SuSE 9.0 Aurox 9.2 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_69.jpg", "name": "HTML Formularze, przykład SELECT None SuSE 8.2 SuSE 9.0 Aurox 9.2", "description": "HTML Formularze, przykład SELECT None SuSE 8.2 SuSE 9.0 Aurox 9.2", "width": "800" } 70 HTML Formularze, przykład SELECT { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_70.jpg", "name": "HTML Formularze, przykład SELECT", "description": "HTML Formularze, przykład SELECT", "width": "800" } 71 HTML Formularze, TEXTAREA – pole tekstowe name="nazwa" rows="10" cols="40" disabled readonly tabindex="10" First line of initial text. Second line of initial text. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5198516/slides/slide_71.jpg", "name": "HTML Formularze, TEXTAREA – pole tekstowe name= nazwa rows= 10 cols= 40 disabled readonly tabindex= 10 First line of initial text.", "description": "Second line of initial text..", "width": "800" } 72 HTML Formularze FIELDSET – grupuje elementy w ramce LEGEND – pozwala dodać opis Dane personalne Imię Nazwisko Adres:...pozostałe informacje...
54 HTML Ramki – FRAMESET FRAMESET rows, cols – liczba wierszy i kolumn NOFRAMES – alternatywna zawartość Przykłady...cała reszta...... cała reszta...
55 HTML Ramki, FRAMESET Przykład zagnieżdżenia...zawartość ramki 1......zawartość ramki 2, wiersz 1......zawartość ramki 2, wiersz 2......zawartość ramki 3...
56 HTML Ramki, FRAME longdesc="tekst" – długi opis name="nazwa" – nazwa src="URI" – adres zawartości ramki frameborder="(1|0)" – czy obramowanie marginwidth="pixele" – margines poziomy marginheight="pixele" – margines pionowy scrolling="(yes|no|auto)" – paski przewijania
57 HTML Ramki – przykład (strona 1/2) Przykładowy dokument z ramkami...
58 HTML Ramki – przykład (strona 2/2)... Ten dokument zawiera: Dokument 2
59 HTML Ramki pływające – IFRAME IFRAME name src frameborder marginwidth marginheight scrolling height width align="(left|right|middle|top|bottom)"
60 HTML Ramki pływające – IFRAME Przykład [Your user agent does not support frames or is currently configured not to display frames. However, you may visit the related document. ]
61 HTML Formularze, kontrolki: buttons (BUTTON, INPUT; BUTTON lepszy do wyświetlania) checkboxes (INPUT) radio buttons (INPUT) menus (SELECT z OPTION, OPTGROUP) text input (INPUT, TEXTAREA) file select (INPUT) hidden controls (INPUT)
62 HTML FORM – definicja formularza action="URI" method="(POST|GET)" (domyślnie GET) enctype=zawartość – określa typ zawartości (ma sens w przypadku metody POST); domyślnie jest to "application/x-www-form-urlencoded", natomiast jeśli wysyła się plik powinno się ustawić na "multipart/form-data" accept-charset="charsetlist" – rodzaj kodowania akceptowany przez serwer accept="contenttypelist" name="nazwa"
63 HTML Formularze, INPUT – kontrolka formularza type=text|password|checkbox|radio|submit|reset|file| hidden | image | button name="nazwa" values="początkowa wartość" – nie dotyczy radio i checkbox size="rozmiar" maxlength="liczba" – dotyczy text i password checked – dotyczy radio i checkbox) src="URI" – dotyczy image readonly disabled tabindex="4"
64 HTML Formularze, przykład Imię: Nazwisko: Email: Mężczyzna Kobieta
65 HTML Formularze, przykład
66 HTML Formularze, BUTTON – tworzy przycisk name="nazwa" value="wartość" – wysyłane do serwera przy wysyłaniu type="(button|submit|reset)" – typ przycisku disabled tabindex Przykład Reset
67 HTML Formularze, SELECT – tworzy menu name="nazwa" size="3" multiple disabled tabindex="4"
68 HTML Formularze OPTION – element menu selected disabled label="etykieta" value="wartość" OPTGROUP – grupuje elementy disabled label
69 HTML Formularze, przykład SELECT None SuSE 8.2 SuSE 9.0 Aurox 9.2
70 HTML Formularze, przykład SELECT
71 HTML Formularze, TEXTAREA – pole tekstowe name="nazwa" rows="10" cols="40" disabled readonly tabindex="10" First line of initial text. Second line of initial text.
72 HTML Formularze FIELDSET – grupuje elementy w ramce LEGEND – pozwala dodać opis Dane personalne Imię Nazwisko Adres:...pozostałe informacje...