Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
Narzędzia internetowe Paweł Rajba pawel@ii.uni.wroc.pl http://pawel.ii.uni.wroc.pl/
2
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">
3
HTML Struktura dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4
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
5
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
6
HTML Nagłówek, META, przykłady Ogólna składnia content dla Robots content = "ALL" | "NONE" | directives directives = directive ["," directives] direcitve = INDEX,NOINDEX,FOLLOW,NOFOLLOW
![HTML Nagłówek, META, przykłady Ogólna składnia content dla Robots content = ALL | NONE | directives directives = directive [ , directives] direcitve = INDEX,NOINDEX,FOLLOW,NOFOLLOW](http://images.slideplayer.pl/16/5198516/slides/slide_6.jpg "HTML Nagłówek, META, przykłady Ogólna składnia content dla Robots content = ALL | NONE | directives directives = directive [ , directives] direcitve = INDEX,NOINDEX,FOLLOW,NOFOLLOW")
7
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; URL=http://www.onet.pl/"> <BASE href="http://www.ii.uni.wroc.pl/" target="main_frame">
8
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
9
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
10
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.
11
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"> Chapter 2...reszta dokumentu...
12
HTML Przykładowy nagłówek: Strona domowa Pawła Rajby pawel@ii.uni.wroc.pl <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">
13
HTML Przykładowy nagłówek c.d.:
14
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
15
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.
16
HTML Grupowanie elementów DIV – elementu typu block SPAN – element typu inline Atrybut: align, lang
17
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, …)
18
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)
19
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:
20
HTML Cytowania BLOCKQUOTE – typu block Q – typu inline Atrybut: cite="URL" Indeksy SUB – dolny SUP – górny
21
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
22
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
23
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.
24
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.
25
HTML Listy – przykład Kod: Pierwszy punkt Drugi punkt Trzeci punkt i tutaj value jest 31 Da wynik: E. Pierwszy punkt AD. Drugi punkt 31. Trzeci punkt i tutaj value jest 31
26
HTML Listy – przykład zagnieżdżania Dzień pierwszy Jedzenie Spanie Wszystkie pozostałe dni Jedzenie Spanie
27
HTML Lista definicji DL – definition list DT – definition type DD – definition data
28
HTML Lista definicji - przykład Kod: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne Wynik: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne
29
HTML Tabele – znaczniki TABLE, TR, TH, TD Mały przykład na początek: Nr indeksu Ocena 91044 5.0 91057 5.0 91088 5.0 91092 5.0
30
HTML Tabele, TABLE summary="tekst" – opis tabeli width="50%" | "500" – szerokość tabeli border="2" cellpadding="4" cellspacing="1"
31
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.
32
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
33
HTML Tabela, kolejny przykład <table cellspacing="2" cellpadding="4" border="1" bgcolor="aqua" width="80%" summary="Oceny studentów z kursu WWW"> Indeks Ocena Grupa 91044 5.0 Gr. 1 91055 5.0 Razem
34
HTML Tabela, kolejny przykład c.d.
35
HTML c.d. Tabela, grupowanie wierszy...nagłówek......stopka......pierwszy wiersz pierwszego bloku danych......pierwszy wiersz drugiego bloku danych......drugi wiersz drugiego bloku danych...
36
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ąć.
37
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:...
38
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.
39
HTML Tabela, grupowanie kolumn, przykład......dalsza część tabelki...
40
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
41
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
42
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
43
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
44
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
45
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
46
HTML Tabela, duży przykład na koniec (efekt)
47
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
48
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
49
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
50
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
51
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
52
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
53
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">
54
HTML Ramki – FRAMESET FRAMESET rows, cols – liczba wierszy i kolumn NOFRAMES – alternatywna zawartość Przykłady...cała reszta...... cała reszta...
55
HTML Ramki, FRAMESET Przykład zagnieżdżenia...zawartość ramki 1......zawartość ramki 2, wiersz 1......zawartość ramki 2, wiersz 2......zawartość ramki 3...
56
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
57
HTML Ramki – przykład (strona 1/2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> Przykładowy dokument z ramkami...
58
HTML Ramki – przykład (strona 2/2)... Ten dokument zawiera: Dokument 2
59
HTML Ramki pływające – IFRAME IFRAME name src frameborder marginwidth marginheight scrolling height width align="(left|right|middle|top|bottom)"
60
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. ]
61
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)
62
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"
63
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"
64
HTML Formularze, przykład Imię: Nazwisko: Email: Mężczyzna Kobieta
65
HTML Formularze, przykład
66
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
67
HTML Formularze, SELECT – tworzy menu name="nazwa" size="3" multiple disabled tabindex="4"
68
HTML Formularze OPTION – element menu selected disabled label="etykieta" value="wartość" OPTGROUP – grupuje elementy disabled label
69
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
70
HTML Formularze, przykład SELECT
71
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.
72
HTML Formularze FIELDSET – grupuje elementy w ramce LEGEND – pozwala dodać opis Dane personalne Imię Nazwisko Adres:...pozostałe informacje...
Podobne prezentacje
