Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka...
Transcript of Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka...
1
Kierunek Informatyka i Ekonometria Przedmiot Informatyka ekonomiczna Forma zajęć Ćwiczenia Temat Usługi sieciowe
Tworzenie serwisoacutew internetowych KORZYSTANIE Z USŁUG SIECIOWYCH Przesyłanie plikoacutew ndash Protokoacuteł FTP
bull Zasady przesyłania plikoacutew określone są przez protokoacuteł transferu plikoacutew (protokoacuteł FTP ndash File Transfer Protocol) Protokoacuteł ten jest stosowany powszechnie w sieci Internet
bull Komunikacja pomiędzy dwoma komputerami odbywa się na zasadzie Klient-Serwer
bull Serwer FTP to komputer posiadający oprogramowanie zdolne rozpoznawać i realizować polecenia zdefiniowane w protokole
bull Użytkownik łączy się z serwerem FTP za pomocą specjalnego oprogramowania nazywanego klientem FTP
bull Transmisja danych (łącznie z hasłami) nie jest szyfrowana
Przykładowe operacje
open - otwarcie połączenia z serwerem dir ls - wyświetlenie zawartości bieżącego katalogu get recv - przesłanie pliku z serwera do komputera lokalnego put send - przesłanie pliku z komputera lokalnego do serwera help - lista wszystkich dostępnych poleceń close - zakończenie sesji FTP
2
WS_FTP ndash przykład programu pracującego jako klient FTP
Określamy wartości w polach bull Host Name - nazwa komputera
z ktoacuterym chcemy się połączyć bull User ID - nazwa użytkownika
podajemy hasło użytkownika podanego w polu User ID (poprzednie okno)
3
Realizacja operacji przesyłania plikoacutew
Komputery uczestniczące w operacji przesyłania plikoacutew
bull Local System - system lokalny
bull Remote System - system odległy (system zdalny)
Tryby przesyłania plikoacutew
bull ASCII - dla plikoacutew tekstowych
bull Binary - dla plikoacutew roacuteżnych od tekstowych (programy pliki graficzne
doc xls)
Po przesłaniu pliku (plikoacutew) należy zamknąć sesję połączeniową (przycisk
CLOSE)
4
POCZTA ELEKTRONICZNA - PROGRAM bdquoPINErdquo
pine = Program for Internet News and Email
$ pine Menu głoacutewne
HELP - Get help using Pine C COMPOSE MESSAGE - Compose and send a message I FOLDER INDEX - View messages in current folder L FOLDER LIST - Select a folder to view A ADDRESS BOOK - Update address book S SETUP - Configure or update Pine Q QUIT - Exit the Pine program
bull wysyłanie poczty - Compose Message To adres odbiorcy Cc adresy osoacuteb otrzymujących kopię listu Attchment pliki dołączone do wiadomości Subject temat wiadomości ----- MESAGE TEXT -----
tekst wiadomości
struktura adresu nowakjwizarduekkrakowpl
bull odbioacuter poczty - Folder List
INBOX - zawartość skrzynki pocztowej
sent-mail - poczta wysłana
saved-mesages - poczta zapamiętana
5
POCZTA ELEKTRONICZNA - PROGRAM bdquoMAILrdquo
bull wysyłanie poczty
$ mail nowakj Subject Zadanie z matematyki
Janek Jak zrobic zadanie z matematyki ^D $
bull wysyłanie poczty do większej liczby odbiorcoacutew
$ mail janek gosia krysia
bull wysyłanie listu zapisanego w pliku
$ mail krysia lt listtxt
6
SERWISY INTERNETOWE - STRONY WWW (WORLD WIDE WEB - OGOacuteLNOŚWIATOWA PAJĘCZYNA) bull Strony WWW pozwalają na udostępnianie informacji roacuteżnego typu
(tekstu grafiki dźwięku animacji itd)
bull Informacje zamieszczone w systemie WWW mają postać hipertekstu
(tekst zawierający odnośniki do innych zasoboacutew sieci)
bull Do korzystania z zasoboacutew sieci niezbędne jest odpowiednie
oprogramowanie - przeglądarki stron WWW (Internet Explorer
Opera Netscape Navigator Mozilla Firefox itd)
Udostępnianie serwisoacutew internetowych odbywa się w trybie klient -
serwer
bull serwer WWW ndash program udostępniający strony WWW
bull klient - program wyświetlający pobrane strony (przeglądarka)
Zasady określające sposoacuteb przesyłania strony zdefiniowane są w
protokole HTTP (Hyper Text Transfer Protocol)
7
TWORZENIE STRON WWW
Strony WWW definiowane są za pomocą językoacutew opisu stron
Najpopularniejszym językiem tego typu jest język HTML (Hyper Text
Markup Language)
Zasady opisu stron w języku HTML
bull opis strony ma postać pliku tekstowego i zawiera
sect informacje tekstowe wyświetlane na stronie
sect instrukcje określające sposoacuteb wyświetlenie elementoacutew strony
WWW (tzw znaczniki - ang tags)
sect odwołania do obiektoacutew ktoacutere mają być umieszczone na stronie
(grafika aplety)
sect odnośniki do innych zasoboacutew
bull przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis
strony
Metody tworzenia stron WWW
bull poprzez bezpośrednią edycję plikoacutew w języku HTML
bull poprzez użycie edytoroacutew stron WWW
8
UDOSTĘPNIANIE STRONY HTML
1 określenie praw dostępu drwx--x--x (711) dla katalogu domowego
użytkownika (np nowakj) np
$ cd ~ $ chmod 711
2 utworzenie w katalogu domowym użytkownika katalogu o nazwie
public_html np
$ mkdir public_html
3 określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html np
$ cd public_html $ chmod 755
4 umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu
public_html pliku (plikoacutew) strony Plik ktoacutery ma być wyświetlany jako
pierwszy powinien mieć nazwę indexhtml
5 określenie praw dostępu -rwxr-xr-x (755) dla plikoacutew znajdujących się w
katalogu public_html np
$ cd ~ $ cd public_html $ chmod 755
6 przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w
postaci httpnazwa_serwera~login_użytkownika np
httpieuekkrakowpl~nowakj
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
2
WS_FTP ndash przykład programu pracującego jako klient FTP
Określamy wartości w polach bull Host Name - nazwa komputera
z ktoacuterym chcemy się połączyć bull User ID - nazwa użytkownika
podajemy hasło użytkownika podanego w polu User ID (poprzednie okno)
3
Realizacja operacji przesyłania plikoacutew
Komputery uczestniczące w operacji przesyłania plikoacutew
bull Local System - system lokalny
bull Remote System - system odległy (system zdalny)
Tryby przesyłania plikoacutew
bull ASCII - dla plikoacutew tekstowych
bull Binary - dla plikoacutew roacuteżnych od tekstowych (programy pliki graficzne
doc xls)
Po przesłaniu pliku (plikoacutew) należy zamknąć sesję połączeniową (przycisk
CLOSE)
4
POCZTA ELEKTRONICZNA - PROGRAM bdquoPINErdquo
pine = Program for Internet News and Email
$ pine Menu głoacutewne
HELP - Get help using Pine C COMPOSE MESSAGE - Compose and send a message I FOLDER INDEX - View messages in current folder L FOLDER LIST - Select a folder to view A ADDRESS BOOK - Update address book S SETUP - Configure or update Pine Q QUIT - Exit the Pine program
bull wysyłanie poczty - Compose Message To adres odbiorcy Cc adresy osoacuteb otrzymujących kopię listu Attchment pliki dołączone do wiadomości Subject temat wiadomości ----- MESAGE TEXT -----
tekst wiadomości
struktura adresu nowakjwizarduekkrakowpl
bull odbioacuter poczty - Folder List
INBOX - zawartość skrzynki pocztowej
sent-mail - poczta wysłana
saved-mesages - poczta zapamiętana
5
POCZTA ELEKTRONICZNA - PROGRAM bdquoMAILrdquo
bull wysyłanie poczty
$ mail nowakj Subject Zadanie z matematyki
Janek Jak zrobic zadanie z matematyki ^D $
bull wysyłanie poczty do większej liczby odbiorcoacutew
$ mail janek gosia krysia
bull wysyłanie listu zapisanego w pliku
$ mail krysia lt listtxt
6
SERWISY INTERNETOWE - STRONY WWW (WORLD WIDE WEB - OGOacuteLNOŚWIATOWA PAJĘCZYNA) bull Strony WWW pozwalają na udostępnianie informacji roacuteżnego typu
(tekstu grafiki dźwięku animacji itd)
bull Informacje zamieszczone w systemie WWW mają postać hipertekstu
(tekst zawierający odnośniki do innych zasoboacutew sieci)
bull Do korzystania z zasoboacutew sieci niezbędne jest odpowiednie
oprogramowanie - przeglądarki stron WWW (Internet Explorer
Opera Netscape Navigator Mozilla Firefox itd)
Udostępnianie serwisoacutew internetowych odbywa się w trybie klient -
serwer
bull serwer WWW ndash program udostępniający strony WWW
bull klient - program wyświetlający pobrane strony (przeglądarka)
Zasady określające sposoacuteb przesyłania strony zdefiniowane są w
protokole HTTP (Hyper Text Transfer Protocol)
7
TWORZENIE STRON WWW
Strony WWW definiowane są za pomocą językoacutew opisu stron
Najpopularniejszym językiem tego typu jest język HTML (Hyper Text
Markup Language)
Zasady opisu stron w języku HTML
bull opis strony ma postać pliku tekstowego i zawiera
sect informacje tekstowe wyświetlane na stronie
sect instrukcje określające sposoacuteb wyświetlenie elementoacutew strony
WWW (tzw znaczniki - ang tags)
sect odwołania do obiektoacutew ktoacutere mają być umieszczone na stronie
(grafika aplety)
sect odnośniki do innych zasoboacutew
bull przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis
strony
Metody tworzenia stron WWW
bull poprzez bezpośrednią edycję plikoacutew w języku HTML
bull poprzez użycie edytoroacutew stron WWW
8
UDOSTĘPNIANIE STRONY HTML
1 określenie praw dostępu drwx--x--x (711) dla katalogu domowego
użytkownika (np nowakj) np
$ cd ~ $ chmod 711
2 utworzenie w katalogu domowym użytkownika katalogu o nazwie
public_html np
$ mkdir public_html
3 określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html np
$ cd public_html $ chmod 755
4 umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu
public_html pliku (plikoacutew) strony Plik ktoacutery ma być wyświetlany jako
pierwszy powinien mieć nazwę indexhtml
5 określenie praw dostępu -rwxr-xr-x (755) dla plikoacutew znajdujących się w
katalogu public_html np
$ cd ~ $ cd public_html $ chmod 755
6 przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w
postaci httpnazwa_serwera~login_użytkownika np
httpieuekkrakowpl~nowakj
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
3
Realizacja operacji przesyłania plikoacutew
Komputery uczestniczące w operacji przesyłania plikoacutew
bull Local System - system lokalny
bull Remote System - system odległy (system zdalny)
Tryby przesyłania plikoacutew
bull ASCII - dla plikoacutew tekstowych
bull Binary - dla plikoacutew roacuteżnych od tekstowych (programy pliki graficzne
doc xls)
Po przesłaniu pliku (plikoacutew) należy zamknąć sesję połączeniową (przycisk
CLOSE)
4
POCZTA ELEKTRONICZNA - PROGRAM bdquoPINErdquo
pine = Program for Internet News and Email
$ pine Menu głoacutewne
HELP - Get help using Pine C COMPOSE MESSAGE - Compose and send a message I FOLDER INDEX - View messages in current folder L FOLDER LIST - Select a folder to view A ADDRESS BOOK - Update address book S SETUP - Configure or update Pine Q QUIT - Exit the Pine program
bull wysyłanie poczty - Compose Message To adres odbiorcy Cc adresy osoacuteb otrzymujących kopię listu Attchment pliki dołączone do wiadomości Subject temat wiadomości ----- MESAGE TEXT -----
tekst wiadomości
struktura adresu nowakjwizarduekkrakowpl
bull odbioacuter poczty - Folder List
INBOX - zawartość skrzynki pocztowej
sent-mail - poczta wysłana
saved-mesages - poczta zapamiętana
5
POCZTA ELEKTRONICZNA - PROGRAM bdquoMAILrdquo
bull wysyłanie poczty
$ mail nowakj Subject Zadanie z matematyki
Janek Jak zrobic zadanie z matematyki ^D $
bull wysyłanie poczty do większej liczby odbiorcoacutew
$ mail janek gosia krysia
bull wysyłanie listu zapisanego w pliku
$ mail krysia lt listtxt
6
SERWISY INTERNETOWE - STRONY WWW (WORLD WIDE WEB - OGOacuteLNOŚWIATOWA PAJĘCZYNA) bull Strony WWW pozwalają na udostępnianie informacji roacuteżnego typu
(tekstu grafiki dźwięku animacji itd)
bull Informacje zamieszczone w systemie WWW mają postać hipertekstu
(tekst zawierający odnośniki do innych zasoboacutew sieci)
bull Do korzystania z zasoboacutew sieci niezbędne jest odpowiednie
oprogramowanie - przeglądarki stron WWW (Internet Explorer
Opera Netscape Navigator Mozilla Firefox itd)
Udostępnianie serwisoacutew internetowych odbywa się w trybie klient -
serwer
bull serwer WWW ndash program udostępniający strony WWW
bull klient - program wyświetlający pobrane strony (przeglądarka)
Zasady określające sposoacuteb przesyłania strony zdefiniowane są w
protokole HTTP (Hyper Text Transfer Protocol)
7
TWORZENIE STRON WWW
Strony WWW definiowane są za pomocą językoacutew opisu stron
Najpopularniejszym językiem tego typu jest język HTML (Hyper Text
Markup Language)
Zasady opisu stron w języku HTML
bull opis strony ma postać pliku tekstowego i zawiera
sect informacje tekstowe wyświetlane na stronie
sect instrukcje określające sposoacuteb wyświetlenie elementoacutew strony
WWW (tzw znaczniki - ang tags)
sect odwołania do obiektoacutew ktoacutere mają być umieszczone na stronie
(grafika aplety)
sect odnośniki do innych zasoboacutew
bull przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis
strony
Metody tworzenia stron WWW
bull poprzez bezpośrednią edycję plikoacutew w języku HTML
bull poprzez użycie edytoroacutew stron WWW
8
UDOSTĘPNIANIE STRONY HTML
1 określenie praw dostępu drwx--x--x (711) dla katalogu domowego
użytkownika (np nowakj) np
$ cd ~ $ chmod 711
2 utworzenie w katalogu domowym użytkownika katalogu o nazwie
public_html np
$ mkdir public_html
3 określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html np
$ cd public_html $ chmod 755
4 umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu
public_html pliku (plikoacutew) strony Plik ktoacutery ma być wyświetlany jako
pierwszy powinien mieć nazwę indexhtml
5 określenie praw dostępu -rwxr-xr-x (755) dla plikoacutew znajdujących się w
katalogu public_html np
$ cd ~ $ cd public_html $ chmod 755
6 przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w
postaci httpnazwa_serwera~login_użytkownika np
httpieuekkrakowpl~nowakj
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
4
POCZTA ELEKTRONICZNA - PROGRAM bdquoPINErdquo
pine = Program for Internet News and Email
$ pine Menu głoacutewne
HELP - Get help using Pine C COMPOSE MESSAGE - Compose and send a message I FOLDER INDEX - View messages in current folder L FOLDER LIST - Select a folder to view A ADDRESS BOOK - Update address book S SETUP - Configure or update Pine Q QUIT - Exit the Pine program
bull wysyłanie poczty - Compose Message To adres odbiorcy Cc adresy osoacuteb otrzymujących kopię listu Attchment pliki dołączone do wiadomości Subject temat wiadomości ----- MESAGE TEXT -----
tekst wiadomości
struktura adresu nowakjwizarduekkrakowpl
bull odbioacuter poczty - Folder List
INBOX - zawartość skrzynki pocztowej
sent-mail - poczta wysłana
saved-mesages - poczta zapamiętana
5
POCZTA ELEKTRONICZNA - PROGRAM bdquoMAILrdquo
bull wysyłanie poczty
$ mail nowakj Subject Zadanie z matematyki
Janek Jak zrobic zadanie z matematyki ^D $
bull wysyłanie poczty do większej liczby odbiorcoacutew
$ mail janek gosia krysia
bull wysyłanie listu zapisanego w pliku
$ mail krysia lt listtxt
6
SERWISY INTERNETOWE - STRONY WWW (WORLD WIDE WEB - OGOacuteLNOŚWIATOWA PAJĘCZYNA) bull Strony WWW pozwalają na udostępnianie informacji roacuteżnego typu
(tekstu grafiki dźwięku animacji itd)
bull Informacje zamieszczone w systemie WWW mają postać hipertekstu
(tekst zawierający odnośniki do innych zasoboacutew sieci)
bull Do korzystania z zasoboacutew sieci niezbędne jest odpowiednie
oprogramowanie - przeglądarki stron WWW (Internet Explorer
Opera Netscape Navigator Mozilla Firefox itd)
Udostępnianie serwisoacutew internetowych odbywa się w trybie klient -
serwer
bull serwer WWW ndash program udostępniający strony WWW
bull klient - program wyświetlający pobrane strony (przeglądarka)
Zasady określające sposoacuteb przesyłania strony zdefiniowane są w
protokole HTTP (Hyper Text Transfer Protocol)
7
TWORZENIE STRON WWW
Strony WWW definiowane są za pomocą językoacutew opisu stron
Najpopularniejszym językiem tego typu jest język HTML (Hyper Text
Markup Language)
Zasady opisu stron w języku HTML
bull opis strony ma postać pliku tekstowego i zawiera
sect informacje tekstowe wyświetlane na stronie
sect instrukcje określające sposoacuteb wyświetlenie elementoacutew strony
WWW (tzw znaczniki - ang tags)
sect odwołania do obiektoacutew ktoacutere mają być umieszczone na stronie
(grafika aplety)
sect odnośniki do innych zasoboacutew
bull przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis
strony
Metody tworzenia stron WWW
bull poprzez bezpośrednią edycję plikoacutew w języku HTML
bull poprzez użycie edytoroacutew stron WWW
8
UDOSTĘPNIANIE STRONY HTML
1 określenie praw dostępu drwx--x--x (711) dla katalogu domowego
użytkownika (np nowakj) np
$ cd ~ $ chmod 711
2 utworzenie w katalogu domowym użytkownika katalogu o nazwie
public_html np
$ mkdir public_html
3 określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html np
$ cd public_html $ chmod 755
4 umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu
public_html pliku (plikoacutew) strony Plik ktoacutery ma być wyświetlany jako
pierwszy powinien mieć nazwę indexhtml
5 określenie praw dostępu -rwxr-xr-x (755) dla plikoacutew znajdujących się w
katalogu public_html np
$ cd ~ $ cd public_html $ chmod 755
6 przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w
postaci httpnazwa_serwera~login_użytkownika np
httpieuekkrakowpl~nowakj
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
5
POCZTA ELEKTRONICZNA - PROGRAM bdquoMAILrdquo
bull wysyłanie poczty
$ mail nowakj Subject Zadanie z matematyki
Janek Jak zrobic zadanie z matematyki ^D $
bull wysyłanie poczty do większej liczby odbiorcoacutew
$ mail janek gosia krysia
bull wysyłanie listu zapisanego w pliku
$ mail krysia lt listtxt
6
SERWISY INTERNETOWE - STRONY WWW (WORLD WIDE WEB - OGOacuteLNOŚWIATOWA PAJĘCZYNA) bull Strony WWW pozwalają na udostępnianie informacji roacuteżnego typu
(tekstu grafiki dźwięku animacji itd)
bull Informacje zamieszczone w systemie WWW mają postać hipertekstu
(tekst zawierający odnośniki do innych zasoboacutew sieci)
bull Do korzystania z zasoboacutew sieci niezbędne jest odpowiednie
oprogramowanie - przeglądarki stron WWW (Internet Explorer
Opera Netscape Navigator Mozilla Firefox itd)
Udostępnianie serwisoacutew internetowych odbywa się w trybie klient -
serwer
bull serwer WWW ndash program udostępniający strony WWW
bull klient - program wyświetlający pobrane strony (przeglądarka)
Zasady określające sposoacuteb przesyłania strony zdefiniowane są w
protokole HTTP (Hyper Text Transfer Protocol)
7
TWORZENIE STRON WWW
Strony WWW definiowane są za pomocą językoacutew opisu stron
Najpopularniejszym językiem tego typu jest język HTML (Hyper Text
Markup Language)
Zasady opisu stron w języku HTML
bull opis strony ma postać pliku tekstowego i zawiera
sect informacje tekstowe wyświetlane na stronie
sect instrukcje określające sposoacuteb wyświetlenie elementoacutew strony
WWW (tzw znaczniki - ang tags)
sect odwołania do obiektoacutew ktoacutere mają być umieszczone na stronie
(grafika aplety)
sect odnośniki do innych zasoboacutew
bull przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis
strony
Metody tworzenia stron WWW
bull poprzez bezpośrednią edycję plikoacutew w języku HTML
bull poprzez użycie edytoroacutew stron WWW
8
UDOSTĘPNIANIE STRONY HTML
1 określenie praw dostępu drwx--x--x (711) dla katalogu domowego
użytkownika (np nowakj) np
$ cd ~ $ chmod 711
2 utworzenie w katalogu domowym użytkownika katalogu o nazwie
public_html np
$ mkdir public_html
3 określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html np
$ cd public_html $ chmod 755
4 umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu
public_html pliku (plikoacutew) strony Plik ktoacutery ma być wyświetlany jako
pierwszy powinien mieć nazwę indexhtml
5 określenie praw dostępu -rwxr-xr-x (755) dla plikoacutew znajdujących się w
katalogu public_html np
$ cd ~ $ cd public_html $ chmod 755
6 przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w
postaci httpnazwa_serwera~login_użytkownika np
httpieuekkrakowpl~nowakj
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
6
SERWISY INTERNETOWE - STRONY WWW (WORLD WIDE WEB - OGOacuteLNOŚWIATOWA PAJĘCZYNA) bull Strony WWW pozwalają na udostępnianie informacji roacuteżnego typu
(tekstu grafiki dźwięku animacji itd)
bull Informacje zamieszczone w systemie WWW mają postać hipertekstu
(tekst zawierający odnośniki do innych zasoboacutew sieci)
bull Do korzystania z zasoboacutew sieci niezbędne jest odpowiednie
oprogramowanie - przeglądarki stron WWW (Internet Explorer
Opera Netscape Navigator Mozilla Firefox itd)
Udostępnianie serwisoacutew internetowych odbywa się w trybie klient -
serwer
bull serwer WWW ndash program udostępniający strony WWW
bull klient - program wyświetlający pobrane strony (przeglądarka)
Zasady określające sposoacuteb przesyłania strony zdefiniowane są w
protokole HTTP (Hyper Text Transfer Protocol)
7
TWORZENIE STRON WWW
Strony WWW definiowane są za pomocą językoacutew opisu stron
Najpopularniejszym językiem tego typu jest język HTML (Hyper Text
Markup Language)
Zasady opisu stron w języku HTML
bull opis strony ma postać pliku tekstowego i zawiera
sect informacje tekstowe wyświetlane na stronie
sect instrukcje określające sposoacuteb wyświetlenie elementoacutew strony
WWW (tzw znaczniki - ang tags)
sect odwołania do obiektoacutew ktoacutere mają być umieszczone na stronie
(grafika aplety)
sect odnośniki do innych zasoboacutew
bull przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis
strony
Metody tworzenia stron WWW
bull poprzez bezpośrednią edycję plikoacutew w języku HTML
bull poprzez użycie edytoroacutew stron WWW
8
UDOSTĘPNIANIE STRONY HTML
1 określenie praw dostępu drwx--x--x (711) dla katalogu domowego
użytkownika (np nowakj) np
$ cd ~ $ chmod 711
2 utworzenie w katalogu domowym użytkownika katalogu o nazwie
public_html np
$ mkdir public_html
3 określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html np
$ cd public_html $ chmod 755
4 umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu
public_html pliku (plikoacutew) strony Plik ktoacutery ma być wyświetlany jako
pierwszy powinien mieć nazwę indexhtml
5 określenie praw dostępu -rwxr-xr-x (755) dla plikoacutew znajdujących się w
katalogu public_html np
$ cd ~ $ cd public_html $ chmod 755
6 przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w
postaci httpnazwa_serwera~login_użytkownika np
httpieuekkrakowpl~nowakj
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
7
TWORZENIE STRON WWW
Strony WWW definiowane są za pomocą językoacutew opisu stron
Najpopularniejszym językiem tego typu jest język HTML (Hyper Text
Markup Language)
Zasady opisu stron w języku HTML
bull opis strony ma postać pliku tekstowego i zawiera
sect informacje tekstowe wyświetlane na stronie
sect instrukcje określające sposoacuteb wyświetlenie elementoacutew strony
WWW (tzw znaczniki - ang tags)
sect odwołania do obiektoacutew ktoacutere mają być umieszczone na stronie
(grafika aplety)
sect odnośniki do innych zasoboacutew
bull przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis
strony
Metody tworzenia stron WWW
bull poprzez bezpośrednią edycję plikoacutew w języku HTML
bull poprzez użycie edytoroacutew stron WWW
8
UDOSTĘPNIANIE STRONY HTML
1 określenie praw dostępu drwx--x--x (711) dla katalogu domowego
użytkownika (np nowakj) np
$ cd ~ $ chmod 711
2 utworzenie w katalogu domowym użytkownika katalogu o nazwie
public_html np
$ mkdir public_html
3 określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html np
$ cd public_html $ chmod 755
4 umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu
public_html pliku (plikoacutew) strony Plik ktoacutery ma być wyświetlany jako
pierwszy powinien mieć nazwę indexhtml
5 określenie praw dostępu -rwxr-xr-x (755) dla plikoacutew znajdujących się w
katalogu public_html np
$ cd ~ $ cd public_html $ chmod 755
6 przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w
postaci httpnazwa_serwera~login_użytkownika np
httpieuekkrakowpl~nowakj
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
8
UDOSTĘPNIANIE STRONY HTML
1 określenie praw dostępu drwx--x--x (711) dla katalogu domowego
użytkownika (np nowakj) np
$ cd ~ $ chmod 711
2 utworzenie w katalogu domowym użytkownika katalogu o nazwie
public_html np
$ mkdir public_html
3 określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html np
$ cd public_html $ chmod 755
4 umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu
public_html pliku (plikoacutew) strony Plik ktoacutery ma być wyświetlany jako
pierwszy powinien mieć nazwę indexhtml
5 określenie praw dostępu -rwxr-xr-x (755) dla plikoacutew znajdujących się w
katalogu public_html np
$ cd ~ $ cd public_html $ chmod 755
6 przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w
postaci httpnazwa_serwera~login_użytkownika np
httpieuekkrakowpl~nowakj
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
9
PODSTAWY JĘZYKA HTML
Przykładowa strona w języku HTML (1) ltdoctype html public -w3cdtd html 401 transitionalengt lthtmlgt ltheadgt ltmeta http-equiv=Content-Type content=texthtml charset=iso-8859-2gt ltmeta name=Description content=Jest to strona testowagt lttitlegtFormatowanie tekstulttitlegt ltheadgt ltbodygt lth1gtNagłoacutewek 1lth1gt lth2gtNagłoacutewek 2lth2gt lth3gtNagłoacutewek 3lth3gt lth4gtNagłoacutewek 4lth4gt lth5gtNagłoacutewek 5lth5gt lth6gtNagłoacutewek 6lth6gt Tekst normalnyltbrgt ltbgtTekst pogrubionyltbgtltbrgt ltigtTekst pochyłyltigtltbrgt ltugtTekst podkreślonyltugtltbrgt lthr width=100gt Poniżej znajduje się lista ltulgt ltligtopcja 1ltligt ltligtopcja 2ltligt ltligtopcja 3ltligt ltulgt lthr width=100gt Poniżej znajduje się lista numerowana ltolgt ltligtelement 1ltligt ltligtelement 2ltligt ltligtelement 3ltligt ltolgt lthr width=100gt Wyroacutewnanie do lewej strony ltcentergtCentrowanieltcentergt ltdiv align=rdquorightrdquogtWyroacutewnanie do prawej stronyltdivgt lthr width=100gt ltbodygt lthtmlgt
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
10
Przykładowa strona w języku HTML (2)
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
11
Znaczniki
Identyfikacja poszczegoacutelnych elementoacutew strony odbywa się na podstawie
specjalnych znacznikoacutew
bull znacznik składa się z samej nazwy lub nazwy i listy odpowiednich
atrybutoacutew
bull znaczniki ujęte są w nawiasy troacutejkątne
bull większość elementoacutew HTML posiada znacznik otwierający i
zamykający
bull rozroacuteżniamy znaczniki
o strukturalne
o informacyjne
o tekstowe
o listy
o tabel
o formularzy
o pozostałe
struktura znacznikoacutew
ltznacznik atrybut1=rdquowartość1rdquo atrybut2=rdquowartość2rdquo hellipgt Zawartość ltznacznikgt
np
ltfont color=greengtTo jest zielony tekstltfontgt
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
12
Deklaracja typu dokumentu
Deklaracja typu dokumentu (ang Document Type Definition) określa
standard użytego na stronie języka opisowego
bull deklaracja typu musi się pojawić na samym początku strony
bull możliwe jest podanie adresu URL do zastosowanego DTD
Dla języka HTML w wersji 401 istnieją trzy roacuteżne wersje deklaracji DTD
ltdoctype html public -w3cdtd html 401en httpwwww3orgtrhtml4strictdtdgt
Strict DTD (ścisły) dla stron napisanych zgodnie z deklarowanym
standardem i nie dopuszczający innych znacznikoacutew niż opisane w
standardzie
ltdoctype html public -w3cdtd html 401 transitionalen httpwwww3orgtrhtml4loosedtdgt
Transitional DTD (przejściowy) dla stron napisanych zgodnie z
deklarowanym standardem 401 i dopuszczający inne znaczniki np
niezalecane przez organizację W3C
ltdoctype html public -w3cdtd html 401 frameseten httpwwww3orgtrhtml4framesetdtdgt
Frames DTD (dla ramek) dla stron napisanych zgodnie z deklarowanym
standardem i dopuszczający inne znaczniki - stosowany gdy strona
zawiera ramki
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
13
Znaczniki strukturalne ndash budowa strony
bull znacznik otwierający i zamykający dokument HTML lthtmlgt lthtmlgt
bull znacznik otwierający i zamykający nagłoacutewek strony ltheadgt ltheadgt
bull znacznik otwierający i zamykający zawartość strony
ltbodygt ltbodygt
Przykładowo
lthtmlgt ltheadgt lttitlegtTytuł stronylttitlegt ltheadgt ltbodygt To jest moja strona
ltbodygt lthtmlgt
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
14
Znaczniki informacyjne w nagłoacutewku strony
Znacznik meta - szczegoacutełowa informacja o zawartości dokumentu
Atrybuty
http-equiv ndash zmienne systemowe
name ndash zmienne użytkownika
content ndash zawartość zmiennej bull ltmeta http-equiv=rdquocontent-typerdquo content=rdquordquogt -
rodzaj dokumentu i strona kodowa
bull ltmeta name=rdquoauthorrdquo content=rdquordquogt - autor dokumentu
bull ltmeta name=rdquokeywordsrdquo content=rdquordquogt - słowa kluczowe
reprezentujące treści zawarte w dokumencie
bull ltmeta name=rdquodescriptionrdquo content=rdquordquogt - kroacutetki opis
zawartości dokumentu
bull lttitlegtlttitlegt - tytuł dokumentu
np ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-2gt ltmeta name=keywords content=koty psy porady hodowlagt ltmeta name=author content=Jan Nowakgt lttitlegtStrona domowa Jana Nowakalttitlegt
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
15
Podstawowe znaczniki tekstowe - formatowanie tekstu bull ltbgtltbgt - pogrubienie tekstu np
ltbgtTekst pogubionyltbgt bull ltigtltigt - pochylenie tekstu np
ltigtTekst pochylonyltigt bull ltugtltugt - podkreślenie tekstu np
ltugtTekst podkreślonyltugt bull ltcentergtltcentergt - wyśrodkowanie tekstu np
ltcentergtTekst na środku stronyltcentergt bull ltpgtltpgt - nowy akapit (paragraf) tekstu np
ltpgtTo jest oddzielny paragraf tekstultpgt bull ltfont face=rdquonazwa czcionkirdquogt ltfontgt - określenie
rodzaju wyświetlanej czcionki (np Times New Roman Courier Arial
Verdana Tahoma) ltfont face=rdquoArialrdquogtTekst pisany Arialemltfontgt
Dodatkowe atrybuty znacznika ltfontgt
color=rdquordquo ndash kolor czcionki
size=rdquordquo ndash rozmiar czcionki (od 1 do 7)
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
16
Przykładowo
ltfont face=rdquoArialrdquo color=rdquoredrdquo size=rdquo5rdquogt Duży czerwony napis pisany czcionką Arial ltfontgt
bull lth1gtlth1gt - nagłoacutewek tekstu pierwszego poziomu np
lth1gtRozdział 1lth1gt lth1gtRozdział 2lth1gt bull lth2gtlth2gt - nagłoacutewek tekstu drugiego poziomu np
lth2gtRozdział 11lth2gt lth2gtRozdział 12lth2gt
bull lt-- --gt - komentarz nie wyświetlany na stronie np
lt-- to nie będzie widoczne podczas wyświetlenia strony--gt bull ltbrgt - znacznik końca wiersza
bull lthrgt - pozioma linia (używana najczęściej jako element rozdzielający
fragmenty tekstu) np
lthr width=rdquo80rdquogt Łączenie znacznikoacutew
Przykładowo kod
ltpgtltbgtltugtAdamltugtltbgt ltfont face=rdquoArialrdquogt dziś ma ltfontgtltigturodzinyltigtltpgt
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
17
będzie wyglądać
Adam dziś ma urodziny
Znaczniki list
bull Lista wypunktowana
ltulgt ltligtPunkt pierwszyltligt ltligtPunkt drugiltligt ltligtPunkt trzeciltligt ltulgt bull dodatkowy atrybut znacznika ltulgt
type=rdquordquo ndash kształt znaku wypunktowania (disc circle
square)
bull Lista ponumerowana
ltolgt ltligtelement pierwszyltligt ltligtelement drugiltligt ltligtelement trzeciltligt ltolgt bull dodatkowy atrybut znacznika ltolgt
type=rdquordquo ndash styl numeracji listy (1 ndash cyfry arabskie A ndash duże
litery a ndash małe litery I ndash duże cyfry rzymskie i ndash małe cyfry
rzymskie)
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
18
Odsyłacze do innych zasoboacutew (HREF)
Podstawowe pojęcia
bull Odsyłacz (odnośnik) - HREF - Hypertext Reference
bull Hipertekst - tekst zawierający odsyłacze do innych zasoboacutew
bull Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator
zasoboacutew
Budowa adresu URL
protokoacuteł adres_serwerakatalogplik
protokoacuteł - metoda dostępu do zasobu (ftp http https file)
Przykłady adresoacutew URL
httpieuekkrakowpltestprogramyhtml ftpkingacyf-kreduplmirrorspistxt
Znaczniki odsyłaczy
bull lta href=rdquohttpplikhtmlrdquogtltagt - odsyłacz do
adresoacutew absolutnych (np bdquohttpieaekrakowpllistahtmlrdquo) np lta href=rdquo httpwizardaekrakowplindexhtmlrdquogtWizardltagt
bull lta href=rdquoplikhtmlrdquogtltagt - odsyłacz do adresoacutew
relatywnych (adres relatywny określa położenie pliku względem
bieżącej strony np bdquowydzialyhtmlrdquo bdquobibliotekaopishtmlrdquo) np
lta href=rdquozadaniahtmlrdquogtZadania do zrobienialtagt
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
19
bull lta href=nazwagtltagt - odsyłacz do innych miejsc na tej
samej stronie np
lta href=poczatekgtPoczątek stronyltagt Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w
postaci
lta name=poczatekgtltagt
bull lta href=mailtoadres_mailowygtltagt - odsyłacz
uruchamiający program pocztowy np
lta href=rdquomailtonowakjwpplrdquogtNapisz do mnieltagt bull odsyłacz w formie obrazu (pliku graficznego) np
lta href=rdquohttpwwwuekkrakowplrdquogt ltimg src=rdquoimagesuczelniajpgrdquogt
ltagt
bull lta href=adres URL target=rdquo_blankrdquogtltagt -
odsyłacz uruchamiający podany adres w nowym oknie przeglądarki np
lta href=rdquohttponetplrdquo target=rdquo_blankrdquogtOnetltagt
Pliki graficzne (obrazy) w dokumentach HTML
bull ltimg src=rdquoadres URLrdquogt - znacznik wstawiający na stronę plik
graficzny (standardowe formaty plikoacutew to gif jpg bmp png) ze
wskazanego miejsca np
ltimg src=grafikazdjecie1jpggt
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
20
bull dodatkowe atrybuty znacznika ltimggt
alt=rdquotekstrdquo ndash tekst pojawiający się zamiast obrazka jeżeli brak
możliwości jego wyświetlenia (roacutewnież tekst w bdquodymkurdquo)
align=rdquordquo - umiejscowienie grafiki (np left righttop itd)
width=rdquordquo ndash szerokość grafiki (w pikselach)
height=rdquordquo ndash wysokość grafiki (w pikselach)
vspace=rdquordquo ndash odległość grafiki od innych elementoacutew (pionowa)
hspace=rdquordquo - odległość grafiki od innych elementoacutew (pozioma)
border=rdquordquo ndash wielkość otaczającej grafikę ramki (obramowania)
Przykładowo
ltimg src=aparatjpg alt=Zdjęcie - Kyocera Finecam S3R align=left width=90 height=75 vspace=5 hspace=30 border=3gt
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
21
Znaczniki tabel
bull lttablegt lttablegt - znaczniki definiujące tabelę
bull lttrgt lttrgt - znacznik definiujący wiersz
bull lttdgt lttdgt - znacznik definiujący komoacuterkę (kolumnę) w
wierszu bull dodatkowe atrybuty znacznika lttablegt
border=rdquordquo ndash wielkość obramowania tabeli
width=rdquordquo ndash szerokość tabeli (piksele lub procenty)
height=rdquordquo ndash wysokość tabeli (piksele lub procenty)
cellspacing=rdquordquo ndash odległość między komoacuterkami
cellpadding=rdquordquo ndash marginesy dla komoacuterek
align=rdquordquo - wyroacutewnanie tabeli
bgcolor=rdquordquo- kolor tła tabeli
bull dodatkowe atrybuty znacznika lttdgt
align=rdquordquo ndash poziome wyroacutewnanie danych w komoacuterkach
valign=rdquordquo ndash pionowe wyroacutewnanie danych w komoacuterkach
width=rdquordquo ndash szerokość komoacuterki
bgcolor=rdquordquo ndash kolor tła komoacuterki
rowspan=rdquordquo ndash łączenie kilku komoacuterek (pionowe)
colspan=rdquordquo ndash łączenie kilku komoacuterek (poziome)
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
22
Przykładowa tabela lttable border=rdquo1rdquo width=100 align=rdquocenterrdquo cellpadding=rdquo5rdquo height=rdquo200rdquogt lttrgt lttd align=rdquorightrdquogt Ala lttdgt lttd align=rdquocenterrdquogt Ewa lttdgt lttrgt lttrgt lttd valign=rdquotoprdquogt Adam lttdgt lttd valign=rdquobottomrdquogt Jurek lttdgt lttrgt
lttrgt lttd colspan=rdquo2rdquo bgcolor=rdquograyrdquo align=rdquocenterrdquo gt Roman lttdgt
lttrgt lttablegt
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
23
Kursy HTML dostępne w sieci
httpwebmasterhelionplkurshtml httpalgorytmypldocxhtml httpwwwkurshtmlboopl
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
24
Programy do tworzenia stron WWW Notatnik
vi
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom
25
Pajączek - httpwwwpajaczekpl
Macromedia Dreamweaver - httpwwwmacromediacom