kurs www – wykład 2
DESCRIPTION
Kurs WWW – wykład 2. Paweł Rajba [email protected] http://www.ii.uni.wroc.pl/~pawel/. HTML c.d. Tabela, grupowanie wierszy ... nagłówek ... ... stopka ... ... pierwszy wiersz pierwszego bloku danych ... - PowerPoint PPT PresentationTRANSCRIPT
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:[email protected]?
[email protected]&[email protected]&
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>