1 / 39

Kurs WWW – wykład 2

Kurs WWW – wykład 2. Paweł Rajba pawel@ii.uni.wroc.pl http://www.ii.uni.wroc.pl/~pawel/. HTML c.d. Tabela, grupowanie wierszy <TABLE> <THEAD> <TR> ... nagłówek ... </THEAD> <TFOOT> <TR> ... stopka ... </TFOOT> <TBODY> <TR> ... pierwszy wiersz pierwszego bloku danych ... </TBODY>

anitra
Download Presentation

Kurs WWW – wykład 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <TABLE> <THEAD> <TR> ...nagłówek... </THEAD> <TFOOT> <TR> ...stopka... </TFOOT> <TBODY> <TR> ...pierwszy wiersz pierwszego bloku danych... </TBODY> <TBODY> <TR> ...pierwszy wiersz drugiego bloku danych... <TR> ...drugi wiersz drugiego bloku danych... </TBODY> </TABLE>

  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: • <TABLE> <COLGROUP span="10" width="50"> <THEAD><TR><TD> ... </TABLE>

  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 • <TABLE> <COLGROUP> <COL width="30"> <COLGROUP> <COL width="30"> <COL width="0*"> <COL width="2*"> <COLGROUP align="center"> <COL width="1*"> <COL width="3*"> <THEAD> <TR><TD> ... ...dalsza część tabelki... </TABLE>

  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"> <CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3">

  10. HTML Tabela, duży przykład na koniec (strona 2/4) <THEAD valign="top"> <TR> <TH>Code-Page<BR>ID <TH>Name <TH>ACP <TH>OEMCP <TH>Windows<BR>NT 3.1 <TH>Windows<BR>NT 3.51 <TH>Windows<BR>95

  11. HTML Tabela, duży przykład na koniec (strona 3/4) <TBODY> <TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>* <TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X

  12. HTML Tabela, duży przykład na koniec (strona 4/4) <TBODY> <TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X <TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X <TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X <TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X <TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X </TABLE>

  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 <A href="http://www.w3.org/" charset="ISO-8859-1">W3C Web site</A> <A name="kotwica">Kotwica</A> I wtedy odwołujemy się: dokument.html#kotwica Albo: <A href="dokument.html#kotwica">Kotwica</A> Adres względny i bezwzględny <A href="../dok.html">Dok</A> <A href="http://www.wp.pl/dok.html">Dok</A>

  16. HTML Odnośniki, inne protokoły • gopher<A HREF="gopher://...">...</A>, • telnet <A HREF="telnet://...">...</A>, • newsy <A HREF="news://...">...</A>, • poczta <A HREF="mailto:...">...</A>. 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</a>

  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 • <IMG src="navbar.gif" alt="Nawigacja" usemap="#mapa"> • <MAP name="mapa"> <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"> </MAP>

  21. HTML Ramki – FRAMESET • FRAMESET • rows, cols – liczba wierszy i kolumn • NOFRAMES – alternatywna zawartość Przykłady • <FRAMESET rows="50%, 50%"> ...cała reszta... </FRAMESET> • <FRAMESET rows="30%,400,*,2*" cols="1*,250,3*"> ... cała reszta... </FRAMESET>

  22. HTML Ramki, FRAMESET Przykład zagnieżdżenia • <FRAMESET cols="33%, 33%, 34%"> ...zawartość ramki 1... <FRAMESET rows="40%, 50%"> ...zawartość ramki 2, wiersz 1... ...zawartość ramki 2, wiersz 2... </FRAMESET> ...zawartość ramki 3... </FRAMESET>

  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 HTML4.01Frameset//EN"> <HTML> <HEAD> <TITLE>Przykładowy dokument z ramkami</TITLE> </HEAD> <FRAMESET cols="20%,80%"> <FRAMESET rows="100,*"> <FRAME src="frame1.gif"> <FRAME src="frame2.html"> </FRAMESET> <FRAME src="frame3.html"> ...

  25. HTML Ramki – przykład (strona 2/2) ... <NOFRAMES> <P>Ten dokument zawiera: <UL> <LI><IMG src="frame1.gif" alt="Obrazek"> <LI><A href="frame2.html">Dokument 2</A> <LI><A href="frame3.html">Dokument 2</A> </UL> </NOFRAMES> </FRAMESET> </HTML>

  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 <A href="ramka.html">the related document.</A>] </IFRAME>

  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 • <FORM action="http://e.pl/adduser" method="post"> <P> Imię:<INPUT type="text" name="fname"><BR> Nazwisko:<INPUT type="text" name="lname"><BR> Email: <INPUT type="text" name="email"><BR> <INPUT type="radio" name="sex" value="Male"> Mężczyzna<BR> <INPUT type="radio" name="sex" value="Female"> Kobieta<BR> <INPUT type="submit" value="Wyslij"> <INPUT type="reset"> </P> </FORM>

  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 <BUTTON name="reset" type="reset">Reset <IMG src="/icons/oops.gif" alt="oops"></BUTTON>

  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 • <FORM action="http://e.pl/adduser" method="post"> <P><SELECT name="Linux"> <OPTION selected label="none" value="none">None</OPTION> <OPTGROUP label="SuSE"> <OPTION label="SuSE 8.2" value="suse82">SuSE 8.2</OPTION> <OPTION label="SuSE 9.0" value="suse82">SuSE 9.0</OPTION> </OPTGROUP><OPTGROUP label="Aurox"> <OPTION label="Aurox 9.2" value="suse82">Aurox 9.2</OPTION> </OPTGROUP> </SELECT></P> </FORM>

  37. HTML Formularze, przykład SELECT

  38. HTML Formularze, TEXTAREA – pole tekstowe • name="nazwa" • rows="10" • cols="40" • disabled • readonly • tabindex="10" <TEXTAREA name="thetext" rows="20" cols="80"> First line of initial text. Second line of initial text. </TEXTAREA>

  39. HTML Formularze • FIELDSET – grupuje elementy w ramce • LEGEND – pozwala dodać opis <FIELDSET> <LEGEND>Dane personalne</LEGEND> Imię <INPUT name="fname" type="text" tabindex="1"> Nazwisko <INPUT name="lname" type="text" tabindex="2"> Adres: <INPUT name="address" type="text" tabindex="3"> ...pozostałe informacje... </FIELDSET>

More Related