Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka...

25
1 Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ekonomiczna Forma zaj ęć: Ćwiczenia Temat: Usługi sieciowe. Tworzenie serwisów internetowych. KORZYSTANIE Z USŁUG SIECIOWYCH Przesyłanie plików – Protokół FTP Zasady przesyłania plików określone są przez protokół transferu plików (protokół FTP – File Transfer Protocol). Protokół ten jest stosowany powszechnie w sieci Internet. Komunikacja pomiędzy dwoma komputerami odbywa się na zasadzie Klient-Serwer. Serwer FTP to komputer posiadający oprogramowanie zdolne rozpoznawać i realizować polecenia zdefiniowane w protokole. Użytkownik łączy się z serwerem FTP za pomocą specjalnego oprogramowania nazywanego klientem FTP. 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.

Transcript of Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka...

Page 1: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 2: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 3: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 4: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 5: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 6: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 7: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 8: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 9: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 10: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 11: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 12: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 13: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 14: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 15: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 16: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 17: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 18: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 19: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 20: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 21: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 22: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 23: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

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

Page 24: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

24

Programy do tworzenia stron WWW Notatnik

vi

25

Pajączek - httpwwwpajaczekpl

Macromedia Dreamweaver - httpwwwmacromediacom

Page 25: Kierunek: Informatyka i Ekonometria Przedmiot: Informatyka ...tuchowski.uek.krakow.pl/files/ie/html.pdf · tags), § odwołania do obiektów, które mają być umieszczone na stronie

25

Pajączek - httpwwwpajaczekpl

Macromedia Dreamweaver - httpwwwmacromediacom