docJęzyk HTML
download 
Reklamacja Transkrypt
Język HTML
Kurs WWW Paweł Rajba [email protected] http://pawel.ii.uni.wroc.pl/ HTML Typy dokumentów HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> HTML Struktura dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <!–- Nagłówek dokumentu --> </HEAD> <BODY> <!-- Treść dokumentu --> </BODY> </HTML> HTML Nagłówek, czyli znacznik HEAD TITLE – tytuł dokumentu wyświetlany w pasku przyglądarki META – metainformacje LINK – wzajemne relacje między dokumentami BASE – adres bazowy dla relatywnych odwołań ze strony HTML Nagłówek, META name, content – atrybuty zawierające dodatkowe informacje o dokumencie http-equiv, content – atrybuty zawierające nagłówki serwera protokołu HTTP lang – określa język wartości atrybutu content scheme – określa dodatkowy kontekst, który ułatwia interpretację zawartości content HTML Nagłówek, META, przykłady <META name="Author" content="Paweł Rajba"> <META name="Keywords" content="Rajba,Paweł,java,jsp"> <META name="Description" content="Strona domowa"> <META name="Generator" content="Dreamweaver MX 2004"> <META name="Revisit-After" content="14 days"> <META name="Robots" content=""> Ogólna składnia content dla Robots content = "ALL" | "NONE" | directives directives = directive ["," directives] direcitve = INDEX,NOINDEX,FOLLOW,NOFOLLOW HTML Nagłówek, META, BASE, przykłady <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <META http-equiv="Expires" content="Wed, 26 Apr 2001 08:21:57 GMT"> <META http-equiv="Refresh" content="10"> <META http-equiv="Refresh„ content="10; URL=http://www.onet.pl/"> <META http-equiv="Pragma" content="no-cache"> <BASE href="http://www.ii.uni.wroc.pl/" target="main_frame"> HTML Nagłówek, LINK, atrybuty: charset – kodowanie wskazywanego zasobu href – adres zasobu type – typ zawartości rel – typ dokumentu wskazywanego rev – typ dokumentu, z którego jest odwołanie do bieżącego dokumentu HTML Nagłówek, LINK, typy dokumentów (rel) Alternate – alternatywna wersja dokumentu, często stosowana z atrybutem lang StyleSheet – zewnętrzny arkusz styli Start – strona startowa w kolekcji dokumentów Next – następna strona w kolekcji Prev – strona poprzednia w kolekcji Index – index kolekcji dokumentów HTML Nagłówek, LINK, typy dokumentów (rel) c.d. Contents – spis treści (ang. Table of Contents) dokumentów w kolekcji Glosssary – słownik pojęć Copyright – prawa autorskie dla dokumentu Appendix – appendix dla kolecji dokumentów Help – plik z dodatkową pomocą, informacjami linkami itp. HTML Nagłówek, LINK, przykłady <LINK href="style.css" type="text/css" rel="StyleSheet"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Chapter 2</TITLE> <LINK rel="Index" href="../index.html"> <LINK rel="Next" href="Chapter3.html"> <LINK rel="Prev" href="Chapter1.html"> </HEAD> ...reszta dokumentu... HTML Przykładowy nagłówek: <HEAD> <TITLE>Strona domowa Pawła Rajby</TITLE> <META name="Author" content="Paweł Rajba, [email protected]"> <META name="Copyright" content="© 2004 Paweł Rajba"> <META name="Keywords" lang="pl" content="Rajba,java,jsp,php,algorytmy,sieci"> <META name="Keywords" lang="en" content="Rajba,java,jsp,php,algorithms,networks"> <META name="Description" content="Strona domowa Pawła Rajby"> HTML Przykładowy nagłówek c.d.: <META scheme="Month-Day-Year" name="Date" content="10-10-98"> <META name="Revisit-After" content="7 Days"> <META name="Robots" content="Index,Follow"> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <META http-equiv="Content-Language" content="pl"> <LINK href="contents.html" type="text/html" rel="Contents" title="Spis treści"> <LINK href="style.css" type="text/css" rel="StyleSheet"> <BASE href="http://www.ii.uni.wroc.pl/" target="main_frame"> </HEAD> HTML Podstawowy zestaw atrybutów id – identyfikator elementu w dokumencie; w ramach dokumenty identyfikatory muszą być różne class – określa zestaw klas elementu style – definiuje styl elementu HTML BODY, czyli treść dokumentu bgcolor="kolor" – kolor tła background="URI" – obrazek tła text="kolor" – kolor tekstu link="kolor" – kolor linków vlink="kolor" – kolor odwiedzonych linków alink="kolor" – kolor aktywnych linków Wszystkie powyższe atrybuty mają status Deprecated. W ich miejsce należy używać styli. HTML Grupowanie elementów DIV – elementu typu block SPAN – element typu inline Atrybut: align, lang HTML Formatowanie tekstu EM – wyróżnienie STRONG – mocne wyróżnienie DFN – definicja CODE – fragment kodu programu SAMP – wynik działania programu, skryptu,… VAR – zmienna, argument programu ABBR – skróty (np. WWW, HTTP, URI, …) HTML Formatowanie tekstu c.d. TT – czcionka stałej szerokości I – pochylenie B – pogrubienie BIG – "duży" font SMALL – mały font STRIKE lub S – przekreślenie (Deprecated) U – podkreślenie (Deprecated) HTML Formatowanie tekstu c.d. FONT – ustawia czcionkę size – rozmiar, liczba od 1 do 7 lub relatywnie np. +1, -3 color face – lista nazw czcionek Przykład: <FONT face="Arial, Helvetica, sans-serif" size="+2" color="navy"> HTML Cytowania BLOCKQUOTE – typu block Q – typu inline Atrybut: cite="URL" Indeksy SUB – dolny SUP – górny HTML Elementy blokowe H1-H6 – nagłówki tekstu ADRESS – adres P – akapit tekstu PRE – preformatowany fragment tekstu BR – złamanie linii Atrybut: clear="left" | "right" | "both" HR – linia pozioma Atrybuty: align, noshade, size, width HTML Elementy blokowe c.d. INS, DEL – elementy mające za zadanie zaznaczać fragmenty tekstu, które zmieniły się w kolejnej wersji dokumentu Atrybuty cite="URL" – dodatkowa informacja, która ma pomóc wyjaśnić, dlaczego dokument został zmieniony datetime="datetime" – data zmiany dokumentu HTML Listy UL – nienumerowane (Unordered Lists) type="disc" | "circle" | "square" compact – większy stopień upakowania OL – nienumerowane (Ordered Lists) type="1" | "A" | "a" | "i" | "I" compact – większy stopień upakowania Wszystkie powyższe atrybuty są Deprecated. HTML Listy c.d. LI – element listy (List Item) type=odpowiednio do UL lub OL value="30" – numer elementu listy compact – większy stopień upakowania Wszystkie powyższe atrybuty są Deprecated. HTML Listy – przykład Kod: <OL start="5" type="A"> <LI>Pierwszy punkt</LI> <LI value="30">Drugi punkt</LI> <LI type="1">Trzeci punkt i tutaj value jest 31</LI> </OL> Da wynik: E. Pierwszy punkt AD. Drugi punkt 31. Trzeci punkt i tutaj value jest 31 HTML Listy – przykład zagnieżdżania <UL> <LI>Dzień pierwszy</LI> <LI> <OL><LI>Jedzenie</LI> <LI>Spanie</LI></OL> </LI> <LI>Wszystkie pozostałe dni</LI> <LI> <OL><LI>Jedzenie</LI> <LI>Spanie</LI></OL> </LI> </UL> HTML Lista definicji DL – definition list DT – definition type DD – definition data HTML Lista definicji - przykład Kod: <DL> <DT>Kura</DT> <DD>Zwierzątko małorolne</DD> <DT>Łasica</DT> <DD>Zwierzątko zupełnie nierolne</DD> </DL> Wynik: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne HTML Tabele – znaczniki TABLE, TR, TH, TD Mały przykład na początek: <table> <tr><th>Nr indeksu</th><th>Ocena</th></tr> <tr><td>91044</td><td>5.0</td> <tr><td>91057</td><td>5.0</td> <tr><td>91088</td><td>5.0</td> <tr><td>91092</td><td>5.0</td> </table> HTML Tabele, TABLE summary="tekst" – opis tabeli width="50%" | "500" – szerokość tabeli border="2" cellpadding="4" cellspacing="1" HTML Tabele, TR – wiersz w tabeli align="left" | "center" | "right" | "justify" valign="top" | "middle" | "bottom" Tabele, TH, TD – komórka w tabeli align, valign - wyrównywanie nowrap – blokuje automatyczne zawijanie wierszy width="40" – szerokość kolumny height="20" – wysokość kolumny Powyższe atrybuty dla TH i TD są Deprecated. HTML Tabele TH, TD c.d. headers="a1 a2" – id komórek, którą są nagłówkiem dla bieżącej komórki scope="row" | "col" | "rowgroup" | "colgroup" – określa, jaki jest zakres komórki nagłówka rowspan="4" – łączy wiersze colspan="2" – łączy kolumny CAPTION – tytuł tabeli HTML Tabela, kolejny przykład <table cellspacing="2" cellpadding="4" border="1" bgcolor="aqua" width="80%" summary="Oceny studentów z kursu WWW"> <tr><th id="n1" scope="col">Indeks</th> <th id="n2" scope="col">Ocena</th> <th id="n3" scope="col">Grupa</th></tr> <tr><td headers="n1">91044</td> <td headers="n2">5.0</td> <td headers="n3" rowspan="2">Gr. 1</td></tr> <tr><td headers="n1">91055</td> <td headers="n2">5.0</td></tr> <tr><td headers="n1 n2 n3" colspan="3">Razem</td></tr> </table> HTML Tabela, kolejny przykład c.d. 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/IEC10646)<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, 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> 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 – 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> 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 tabindex Przykł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 Formularze OPTION – 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>
