1 Kurs WWW – wykład 2 Paweł Rajba [email protected] http://www.ii.uni.wroc.pl/~pawel/
2 HTML c.d. Tabela, grupowanie wierszy...nagłówek......stopka......pierwszy wiersz pierwszego bloku danych......pierwszy wiersz drugiego bloku danych......drugi wiersz drugiego bloku danych...
3 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ąć.
4 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:...
5 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.
6 HTML Tabela, grupowanie kolumn, przykład......dalsza część tabelki...
7 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
8 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
9 HTML Tabela, duży przykład na koniec (strona 1/4) CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
10 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
11 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
12 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
13 HTML Tabela, duży przykład na koniec (efekt)
14 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
15 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
16 HTML Odnośniki, inne protokoły gopher..., telnet..., newsy..., poczta.... Przykład, wysyłanie poczty Mailnij mnie
17 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
18 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
19 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
20 HTML MAPY – przykład { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5035854/slides/slide_20.jpg", "name": "HTML MAPY – przykład ", "description": "HTML MAPY – przykład ", "width": "800" } 21 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/5035854/slides/slide_21.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" } 22 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/5035854/slides/slide_22.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" } 23 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/5035854/slides/slide_23.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" } 24 HTML Ramki – przykład (strona 1/2) Przykładowy dokument z ramkami... { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5035854/slides/slide_24.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" } 25 HTML Ramki – przykład (strona 2/2)... Ten dokument zawiera: Dokument 2 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5035854/slides/slide_25.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" } 26 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/5035854/slides/slide_26.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" } 27 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/5035854/slides/slide_27.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" } 28 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/5035854/slides/slide_28.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" } 29 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/5035854/slides/slide_29.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" } 30 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/5035854/slides/slide_30.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" } 31 HTML Formularze, przykład Imię: Nazwisko: Email: Mężczyzna Kobieta { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5035854/slides/slide_31.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" } 32 HTML Formularze, przykład { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5035854/slides/slide_32.jpg", "name": "HTML Formularze, przykład", "description": "HTML Formularze, przykład", "width": "800" } 33 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/5035854/slides/slide_33.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" } 34 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/5035854/slides/slide_34.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" } 35 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/5035854/slides/slide_35.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" } 36 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/5035854/slides/slide_36.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" } 37 HTML Formularze, przykład SELECT { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/16/5035854/slides/slide_37.jpg", "name": "HTML Formularze, przykład SELECT", "description": "HTML Formularze, przykład SELECT", "width": "800" } 38 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/5035854/slides/slide_38.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" } 39 HTML Formularze FIELDSET – grupuje elementy w ramce LEGEND – pozwala dodać opis Dane personalne Imię Nazwisko Adres:...pozostałe informacje...
21 HTML Ramki – FRAMESET FRAMESET rows, cols – liczba wierszy i kolumn NOFRAMES – alternatywna zawartość Przykłady...cała reszta...... cała reszta...
22 HTML Ramki, FRAMESET Przykład zagnieżdżenia...zawartość ramki 1......zawartość ramki 2, wiersz 1......zawartość ramki 2, wiersz 2......zawartość ramki 3...
23 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
24 HTML Ramki – przykład (strona 1/2) Przykładowy dokument z ramkami...
25 HTML Ramki – przykład (strona 2/2)... Ten dokument zawiera: Dokument 2
26 HTML Ramki pływające – IFRAME IFRAME name src frameborder marginwidth marginheight scrolling height width align="(left|right|middle|top|bottom)"
27 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. ]
28 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)
29 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"
30 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"
31 HTML Formularze, przykład Imię: Nazwisko: Email: Mężczyzna Kobieta
32 HTML Formularze, przykład
33 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
34 HTML Formularze, SELECT – tworzy menu name="nazwa" size="3" multiple disabled tabindex="4"
35 HTML Formularze OPTION – element menu selected disabled label="etykieta" value="wartość" OPTGROUP – grupuje elementy disabled label
36 HTML Formularze, przykład SELECT None SuSE 8.2 SuSE 9.0 Aurox 9.2
37 HTML Formularze, przykład SELECT
38 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.
39 HTML Formularze FIELDSET – grupuje elementy w ramce LEGEND – pozwala dodać opis Dane personalne Imię Nazwisko Adres:...pozostałe informacje...