Kurs WWW – wykład 2 Paweł Rajba

Prezentacja na temat: "Kurs WWW – wykład 2 Paweł Rajba"— Zapis prezentacji:

1 Kurs WWW – wykład 2 Paweł Rajba pawel@ii.uni.wroc.pl 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) <TABLE border="2" frame="hsides" rules="groups" summary="Code page support in different versions of MS Windows." bgcolor="aqua"> 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 <a href="mailto:pawel@ii.uniw.roc.pl? cc=bugs@tunes.com&bcc=duffy@tunes.com& subject=Tytuł&body=Treść">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 <AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60"> <AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">

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) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> 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 <IFRAME src="ramka.html" width="400" height="500" scrolling="auto" frameborder="1" align="right"> [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 <OPTION selected label="none" value="none">None <OPTION label="SuSE 8.2" value="suse82">SuSE 8.2 <OPTION label="SuSE 9.0" value="suse82">SuSE 9.0 <OPTION label="Aurox 9.2" value="suse82">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...