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><TBODY><TR> ...pierwszy wiersz drugiego bloku danych...<TR> ...drugi wiersz drugiego bloku danych...</TBODY></TABLE>

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ąć.

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>

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.

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>

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

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

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

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

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

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>

HTML

Tabela, duży przykład na koniec (efekt)

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

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>

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>

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

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

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

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>

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>

HTML

Ramki, FRAMESETPrzykł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>

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

HTML

Ramki – przykład (strona 1/2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//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"> ...

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>

HTML

Ramki pływające – IFRAME IFRAME

name src frameborder marginwidth marginheight scrolling height width align="(left|right|middle|top|bottom)"

HTML

Ramki pływające – IFRAMEPrzykł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>

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)

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"

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"

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>

HTML

Formularze, przykład

HTML

Formularze, BUTTON – tworzy przycisk name="nazwa" value="wartość" – wysyłane do serwera przy

wysyłaniu type="(button|submit|reset)" – typ przycisku disabled tabindexPrzykład

<BUTTON name="reset" type="reset">Reset<IMG src="/icons/oops.gif" alt="oops"></BUTTON>

HTML

Formularze, SELECT – tworzy menu name="nazwa" size="3" multiple disabled tabindex="4"

HTML

FormularzeOPTION – element menu selected disabled label="etykieta" value="wartość"OPTGROUP – grupuje elementy disabled label

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>

HTML

Formularze, przykład SELECT

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>

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>