Serwis WWW Definicja? Ogólna - zbiór infrmacji ujętych w specyficzną frmę dkumenty HTML sieć dnśników - publikwany w sieci Internet (WWW) Infrmatyczna - zbiór plików tekstwych HTML - umieszczny na serwerze (WWW) HTML (XHTML) Definicja? HTML - HyperText Markup Language - Dkument HTML plik tekstwy z rzszerzeniem htm lub html - Elementy składni HTML: znaczniki atrybuty struktura - Specyfikacje HTML (XTML) www.w3c.rg Przeglądarki Internetwe (interpretacja!!!) Hypertext Definicja? - idea - tekst + dnśniki - nawigacja - układ nieliniwy 1
Znaczniki pisu gólnej struktury strny html infrmuje że zawartść dczytywaneg pliku t kd HTML <html> ----- cała strna ----- </html> head wyznacza nagłówek strny <head> ----- nagłówek ----- </head> bdy zawiera pzstałą część strny <bdy> ----- treść właściwa ----- </bdy> Ogólna struktura strny <html> <head> - Infrmacje pisujące strnę - Niewidczne dla użytkwnika </head> <bdy> - Treść właściwa - Widczna knie przeglądarki </bdy> </html> 2
UWAGA! Pniższy materiał uwzględnia składnię pisaną w specyfikacji HTML 4.0 (1997). W dalszej części kursu przedstawine zstaną elementy nwszych standardów. Pniższy kurs dtyczy tylk wybranych znaczników, nie należy g traktwać jak kmpletnej specyfikacji. Nagłówek <head> Tytuł Strny <title> Tytuł strny </title> - napis ten ukazuje się w górnej belce przeglądarki - ddatkwe znacznie wyszukiwarki - właściwy dbór!!! <title> Oldtimer club stara mtryzacja</title> Znaczniki META <meta name="descriptin" cntent="pis zawartści strny"> <meta name="descriptin" cntent="strna miłśników starej mtryzacji"> <meta name="keywrds" cntent="pis strny - słwa kluczwe"> - słwa kluczwe hasła pisujące strnę - wypisujemy ddzielając przecinkami <meta name="keywrds" cntent="ldtimer, klub, mtryzacja, aut, stara, samchdy, zlty"> <meta http-equiv="cntent-type" cntent="text/html; charset=kdwanie"> - techniczny pis zawartści strny - kdwanie znaków!!! <meta http-equiv="cntent-type" cntent="text/html; charset=iso-8859-2"> <meta name="authr" cntent="imie i nazwisk"> <meta name="authr" cntent="paweł Zawadzki"> 3
Ciał dkumentu <bdy> Tł dkumentu Klr tła <bdy bgclr="klr"> - definicje klrów: szesnastkwy zapis RGB #rrggbb nazwa klru (angielska) - źródła definicji prgramy graficzne edytry HTML palety klrów <bdy bgclr="#ff0000"> <bdy bgclr="red"> Tł z pliku graficzneg <bdy backgrund="sciezka_d_pliku"> - typy plików: gif, jpg (rzmiar!!!) - ścieżki względne - kpiwanie plików - pwtarzanie tła <bdy backgrund="tł_mercedes.gif"> <bdy backgrund="brazki\tł_mercedes.gif"> Tekst na strnie Tekst bezpśredni w ciele dkumentu Tekst wystarczy umieścić w sekcji <bdy> Centrwanie <center>frd</center> Nwa linia <br> Linia pzima <hr> 4
Paragraf <p align="left/right/center">fiat</p> - blki teksu zamknięte w paragrafy mżemy dwlnie rzmieszczać - atrybut align decyduje wyrównaniu paragrafu w pzimie <p align="right">fiat</p> Frmat tekstu Czcinka <fnt face="krój czcinki" size="wielkść czcinki" clr="klr czcinki"> mercedes benz </fnt> - face - krój czcinki np. Verdana, Arial - size wielkść czcinki wartść d 1 d 7 - clr klr czcinki RGB lub nazwa <fnt face="verdana, arial" size="5" clr="red"> mercedes benz </fnt> Właściwści Tekst pgrubiny <b>pel</b> Tekst pchylny <i>pel</i> Tekst pdkreślny <u>pel</u> <b><i><u>pel</u></i></b> UWAGA! Frmatwanie tekstu w pierwszej klejnści przensimy d kaskadwych arkuszy stylów!!! 5
Grafika na strnie Obrazy w treści strny <img src="sciezka_d_pliku" alt="pis pliku"> - ścieżka względna - alt pis brazka przeglądarki tekstwe gdy nie mżna wyświetlić brazka dymek <img src="mercedes_123.jpg" alt="mercedes w123 rcznik 1978"> <img src="brazki/mercedes_123.jpg" alt="mercedes w123 rcznik 1978"> Wielkść brazka <img src="sciezka_d_pliku" alt="pis pliku" width="...%" height="..."> - wartści dla width i height pdajemy w pikselach lub prcentach - wielkść brazka najlepiej ustawiać w prgramach graficznych <img src="mercedes_123.jpg" width="100%" height="50"> Odnśniki (nawigacja) Linki d plików lkalnych <a href="sciezka_d_pliku">treść dnśnika</a> - treść dnśnika mże stanwić tekst lub plik graficzny <img...> - ścieżka d pliku względna!!! - href wskazuje cel linku <a href="mercedes_w123.htm">mercedes beczka</a> <a href="mercedes/mercedes_w123.htm">mercedes beczka</a> Linki d plików zewnętrznych <a href="sciezka_d_zasbu" target="...">treść dnśnika</a> - dnśnik mże wskazywać na dwlny adres url - wskazane jest twarcie takiej witryny w nwym knie target="_blank" <a href="http://www.autmbilista.pl" target="_blank">autmbilista</a> 6
Odnśnik d adresu e-mail <a href ="mailt:adres_email@pczta.pl">kntakt</a> - dnśnik uruchamia dmyślny prgram pcztwy - użytkwnik musi mieć sknfigurwaneg klienta pczty!!! - zalecana jest strżnść w publikwaniu w ten spsób adresów e-mail - uwaga na rbty internetwe <a href="mailt:inf@ldtimer.cm.pl">autmbilista</a> Odnśniki w brębie jedneg dkumentu Nazwanie miejsca w dkumencie <a name="miejsce_na_strnie">miejsce</a> - dnśnika a z atrybutem name nie widać na strnie - tak nazwane miejsce na strnie mże stać się celem dnśnika <a name="sbwe"> samchdy sbwe... </a> Odnśnik d miejsca w dkumencie <a href="#miejsce_na_strnie">treść linku</a> - tak sknstruwany dnśnik wskazuje nazwane miejsce na strnie - mżemy także wskazać knkretne miejsce w innym dkumencie <a href="#sbwe">samchdy sbwe</a> <a href="samchdy.htm#sbwe">samchdy sbwe</a> Odnśnik d różnych typów plików <a href ="plik_binarny">zdjęcie</a> - mżemy twrzyć dnśniki d plików dwlneg typu - jeżeli przeglądarka nie będzie mgła twrzyć daneg typu pliku uruchminy zstanie mechanizm pbierania <a href="zdjecie.jpg">plik JPG</a> <a href="zestawienie.pdf">plik PDF</a> <a href="dkument.dc">plik MS WORD</a> <a href="paczka.zip">archwium ZIP</a> <a href="prgram.exe">plik wyknywalny</a> 7