Język HTML podstawy programowania

Język HTML Język HTML podstawy podstawy

programowaniaprogramowania

WstępWstęp

Dokument HTML jest zwykłym plikiem tekstowym, w Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. którym znajdują się polecenia HTML.

dokument taki można utworzyć za pomocą najprostszego dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też programy klasy shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie sporo programów komercyjnych i całkowicie bezpłatnych (freeware). bezpłatnych (freeware).

2. Zaczynamy …2. Zaczynamy …

Osnowa dokumentuOsnowa dokumentu Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym

nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</H1>. tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</H1>. Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami są Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami są interpretowane w ten sam sposób. Staranniej wykonane edytory HTML interpretowane w ten sam sposób. Staranniej wykonane edytory HTML pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi literami.czy wielkimi literami.

Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, które wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, które szkieletu nie zawierają (czasem tylko jego część), ale nie należy stosować tej szkieletu nie zawierają (czasem tylko jego część), ale nie należy stosować tej metody, gdyż w pewnych okolicznościach może ona zaowocować metody, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami.niespodziewanymi efektami.

Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>.być objęte z kolei znacznikami <BODY> </BODY>.

Przykład:Przykład:

<HTML><HTML> <HEAD><HEAD> informacje nagłówkowe jak np. autor, nazwa itp.informacje nagłówkowe jak np. autor, nazwa itp. </HEAD></HEAD> <BODY><BODY> właściwa treść (ciało) dokumentuwłaściwa treść (ciało) dokumentu </BODY></BODY> </HTML></HTML>

Gdy już wiemy, jaka jest formalna osnowa Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka dokumentu, warto jeszcze dodać kilka użytecznych informacji użytecznych informacji

Między znacznikami <HEAD> i </HEAD> Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> powinno się znaleźć polecenie <TITLE> </TITLE>.</TITLE>.

Przykład:Przykład: <HEAD><HEAD> <TITLE>Tytuł strony</TITLE><TITLE>Tytuł strony</TITLE> </HEAD></HEAD>

Zawarta między znacznikami TITLE Zawarta między znacznikami TITLE treść ukaże się w pasku tytułowym treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. przeglądarki, a nie w dokumencie.

Na przykład:Na przykład: <HEAD><HEAD> <TITLE>Kurs języka HTML</TITLE><TITLE>Kurs języka HTML</TITLE> </HEAD></HEAD>

Drugim bardzo ważnym elementem jest informacja o Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu stronie kodowej dokumentu

Zaleca się stosowanie strony kodowej ISO-8859-2 Zaleca się stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to międzynarodowy standard, a (czyli ISO Latin 2). Jest to międzynarodowy standard, a także Polska Norma. Należy sporządzać dokument w także Polska Norma. Należy sporządzać dokument w tym standardzie i zarazem opatrywać go informacją tym standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana w ramach typu META. Jest ona umieszczana w ramach znaczników HEAD i wygląda następująco:znaczników HEAD i wygląda następująco:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"><meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

Tworzymy pierwszą Tworzymy pierwszą stronę 3W w języku HTMLstronę 3W w języku HTML

Pierwszą czynnością, którą należy wykonać jest uruchomienie Pierwszą czynnością, którą należy wykonać jest uruchomienie programu notatnikprogramu notatnik

Gdy już mamy uruchomiony notatnik umieszczamy w nim metodą „kopiuj Gdy już mamy uruchomiony notatnik umieszczamy w nim metodą „kopiuj – wklej” poniższy tekst (lub przepisujemy):– wklej” poniższy tekst (lub przepisujemy):

<HTML><HTML><HEAD><HEAD><meta http-equiv="content-type" content="text/html; <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">charset=iso-8859-2"><TITLE>Tytuł strony</TITLE><TITLE>Tytuł strony</TITLE></HEAD></HEAD><BODY><BODY>To jest moja pierwsza strona internetowaTo jest moja pierwsza strona internetowa</BODY></BODY></HTML></HTML>

Tak przygotowaną stronę należy zapisać:Tak przygotowaną stronę należy zapisać:

Proponowanym katalogiem na strony jest katalog Proponowanym katalogiem na strony jest katalog C:\WWW.C:\WWW.(jeśli katalog ten nie istnieje należy go wcześniej utworzyć)(jeśli katalog ten nie istnieje należy go wcześniej utworzyć)

Jeśli wszystko przebiegło prawidłowo oglądamy naszą stronę Jeśli wszystko przebiegło prawidłowo oglądamy naszą stronę klikając na niej dwukrotnie lewym przyciskiem myszy. klikając na niej dwukrotnie lewym przyciskiem myszy. Powinniśmy ujrzeć:Powinniśmy ujrzeć:

Rozbudowujemy naszą Rozbudowujemy naszą stronę 3Wstronę 3W

KOLOR TŁAKOLOR TŁA Gdy w dokumencie znajduje się para Gdy w dokumencie znajduje się para

znaczników <BODY> i </BODY>, możemy znaczników <BODY> i </BODY>, możemy zdefiniować kolor tła dokumentu. Gdybyśmy zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie miało taki kolor, jaki tego nie uczynili, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce został domyślnie przyjęty w przeglądarce WWW (zazwyczaj szary). Możemy wstawić WWW (zazwyczaj szary). Możemy wstawić polecenie:polecenie:

<BODY BGCOLOR="kolor"><BODY BGCOLOR="kolor">

„„Kolor" może być podany imiennie (np. red, green, black, white) lub Kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF.przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF.

Poniższy przykład należy przekopiować metodą jak wyżej i przetestować <HTML>

<HEAD><meta http-equiv="content-type" content="text/html; charset=iso-8859-2"><TITLE>Tytuł strony</TITLE></HEAD><BODY BGCOLOR=„green">BGCOLOR=„green">To jest moja pierwsza strona internetowa</BODY></HTML>

Tytuły Tytuły

W dokumentach często wprowadzamy tytuły. Służy do W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn> </Hn>. Znak H oznacza header, tego polecenie <Hn> </Hn>. Znak H oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <H1> i składa się ze znacznika otwierającego <H1> i zamykającego </H1>. Ten drugi zawiera dodatkowo zamykającego </H1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Większość poleceń zawiera ukośnik (ang. slash). Większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek stosuje znacznik otwierający i zamykający, aczkolwiek stosuje się też polecenia zawierające jedynie znacznik się też polecenia zawierające jedynie znacznik otwierający. Niektóre polecenia można używać w obu otwierający. Niektóre polecenia można używać w obu postaciach, choć coraz powszechniejsze używanie postaciach, choć coraz powszechniejsze używanie stylów wymusza ostatnio bardziej rygorystyczne stylów wymusza ostatnio bardziej rygorystyczne stosowanie znaczników zamykających (np. akapit). stosowanie znaczników zamykających (np. akapit).

Przykłady użycia Przykłady użycia polecenia <Hn>polecenia <Hn>

<H1>To jest tytuł </H1><H1>To jest tytuł </H1> <H2>To jest tytuł </H2><H2>To jest tytuł </H2> <H3>To jest tytuł </H3><H3>To jest tytuł </H3> <H4>To jest tytuł </H4><H4>To jest tytuł </H4>

Akapit i wiersz Akapit i wiersz

Jak wprowadzać do dokumentu "zwykły" tekst? W Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu, Gdybyśmy jednak wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza rozdzielając w edytorze akapity za pomocą klawisza EnterEnter, przeglądarka zignoruje znaki końca wierszy i , przeglądarka zignoruje znaki końca wierszy i akapitów i wyświetli jednolity blok tekstu. Aby akapitów i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć naprawdę rozdzielić akapity, należy się posłużyć poleceniem <P> (P = paragraph), które wstawi poleceniem <P> (P = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika Zalecamy także konsekwentne stosowanie znacznika zamykającego </P>. zamykającego </P>.

PrzykładPrzykład

<P>To jest pierwszy akapit</P><P>To jest pierwszy akapit</P> <P>To jest drugi akapit</P><P>To jest drugi akapit</P>

Niekiedy zdarza się, że chcemy przełamać tekst, nie Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyńcze polecenie <BR>, które wówczas zastosować pojedyńcze polecenie <BR>, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii.dodatkowej interlinii.

To jest pierwszy wiersz<BR>To jest pierwszy wiersz<BR>To jest drugi wiersz<BR>To jest drugi wiersz<BR>To jest trzeci wiersz<BR>To jest trzeci wiersz<BR>To jest czwarty wiersz<BR>To jest czwarty wiersz<BR>

Ponadto polecenie <BR> ma jeszcze jedną zaletę. Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <BR> pozwala poszerzyć Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami.pionowy odstęp między elementami.

Atrybuty czcionkiAtrybuty czcionki

Aby tekst w przeglądarce nie wyglądał wszędzie tak Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki - samo, stosuje się dodatkowe atrybuty czcionki - pogrubieniepogrubienie (bold), (bold), pochyleniepochylenie (italic) i (italic) i podkreśleniepodkreślenie (underlined). Atrybuty pozwalają uwypuklić jakieś (underlined). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia: ważniejsze pojęcia za pomocą pogrubienia:

To jest tekst normalnyTo jest tekst normalny <B>To jest tekst pogrubiony (bold)</B><B>To jest tekst pogrubiony (bold)</B> <I>To jest tekst pochylony (italic, kursywa)</I><I>To jest tekst pochylony (italic, kursywa)</I> <U>To jest tekst podkreślony (underlined)</U><U>To jest tekst podkreślony (underlined)</U>

Superskrypt (indeks górny)Superskrypt (indeks górny) Składnia: <SUP></SUP>Składnia: <SUP></SUP> PrzykładPrzykład To jest trzy do potegi drugiej: 3<SUP>2</SUP>To jest trzy do potegi drugiej: 3<SUP>2</SUP>

Subskrypt (indeks dolny)Subskrypt (indeks dolny) Składnia: <SUB> </SUB>Składnia: <SUB> </SUB> PrzykładPrzykład To jest trzy element „a” o numerze 11: To jest trzy element „a” o numerze 11:

a<SUB>11</SUB>a<SUB>11</SUB>

Duża czcionka (+1 punkt)Duża czcionka (+1 punkt) Składnia: <BIG></BIG>Składnia: <BIG></BIG> Przykład:Przykład: To jest czcionka.<BIG>To jest czcionka o jeden znak To jest czcionka.<BIG>To jest czcionka o jeden znak

większa</BIG>większa</BIG>

Mała czcionka (-1 punkt)Mała czcionka (-1 punkt) Składnia: <SMALL> </SMALL>Składnia: <SMALL> </SMALL> Przykład:Przykład: To jest czcionka.<SMALL>To jest czcionka o jeden znak To jest czcionka.<SMALL>To jest czcionka o jeden znak

mniejsza</SMALL>mniejsza</SMALL>

Kolor czcionkiKolor czcionki

Dowolnemu fragmentowi tekstu można Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami nadać kolor, obejmując go znacznikami koloru.koloru.

Składnia: <FONT COLOR="nazwa_koloru"></FONT>Składnia: <FONT COLOR="nazwa_koloru"></FONT> Niektóre z dostępnych kolorów:Niektóre z dostępnych kolorów: BlackBlack,, olive olive,, teal teal,, red red,, blue blue,, maroon maroon,, navy navy,, gray gray,, lime lime,,

fuchsiafuchsia,, white white Przykład:Przykład: <FONT COLOR=„red">To jest czcionka czerwona</FONT<FONT COLOR=„red">To jest czcionka czerwona</FONT>>

Wielkość czcionkiWielkość czcionki Czcionka może mieć wielkość zależną od Czcionka może mieć wielkość zależną od

osoby redagującej dokument HTML. Wystarczy osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników objąć fragment tekstu parą znaczników

<FONT SIZE="xx"> </FONT>. <FONT SIZE="xx"> </FONT>. Na przykład:Na przykład: <FONT SIZE=„2”>TO JEST TEKST</FONT><FONT SIZE=„2”>TO JEST TEKST</FONT> Czcionka normalna ma przypisaną wartość 3 Czcionka normalna ma przypisaną wartość 3

(nie mylić ze stopniem pisma). Pozostałe (nie mylić ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7.wartości są zawarte w przedziale od 1 do 7.

Gdy redagujemy tekst, możemy w dowolnej Gdy redagujemy tekst, możemy w dowolnej chwili zmienić wielkość czcionki, przypisując jej chwili zmienić wielkość czcionki, przypisując jej wartość bezwzględną z przedziału 1-7, wartość bezwzględną z przedziału 1-7, posługując się podanym wyżej parametrem. posługując się podanym wyżej parametrem. Możemy jednak także użyć innego parametru, Możemy jednak także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość.o zadaną wartość.

<FONT SIZE="+x"> </FONT><FONT SIZE="+x"> </FONT> Na przykład:Na przykład: To jest standardowa wielkość.<FONT To jest standardowa wielkość.<FONT

SIZE=„+1”>A to o jeden większa</FONT>SIZE=„+1”>A to o jeden większa</FONT>

Zmiana kroju czcionkiZmiana kroju czcionki Jeszcze jedną możliwość urozmaicenia Jeszcze jedną możliwość urozmaicenia

dokumentu daje polecenie dokumentu daje polecenie <FONT FACE="nazwa_kroju"> </FONT>. <FONT FACE="nazwa_kroju"> </FONT>. Pozwala ono zmienić krój czcionki dla danego Pozwala ono zmienić krój czcionki dla danego

dokumentudokumentu Przykład:Przykład: <FONT FACE=„Arial”>To jest czcionka <FONT FACE=„Arial”>To jest czcionka

Arial</FONT><FONT FACE=„courier”> a to Arial</FONT><FONT FACE=„courier”> a to courier</FONT>courier</FONT>

OdsyłaczeOdsyłacze

Charakterystyczną cechą Internetu jest Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy ważne jest, aby miał do nich łatwy dostęp.dostęp.

Odsyłacz do innej strony jest tworzony za Odsyłacz do innej strony jest tworzony za pomocą polecenia:pomocą polecenia:

<A HREF="adres.strony.internetowej">Jakaś <A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>nazwa tej strony</A>

PrzykładPrzykład <A HREF=„http://www.wp.pl”>Odsyłacz do strony Wirtualnej Polski</A><A HREF=„http://www.wp.pl”>Odsyłacz do strony Wirtualnej Polski</A> <A HREF=„C:\WWW\index.html”>Odsyłacz do strony index.html w <A HREF=„C:\WWW\index.html”>Odsyłacz do strony index.html w

katalogu WWW na dysku C:</A>katalogu WWW na dysku C:</A> W powyższym przykładzie użyto tzw. „ścieżki bezwzględnej” o czym W powyższym przykładzie użyto tzw. „ścieżki bezwzględnej” o czym

mówi zapis C:\WWW\index.html. Należy unikać tego typu zapisu jeśli mówi zapis C:\WWW\index.html. Należy unikać tego typu zapisu jeśli planujemy umieścić naszą stronę w sieci Internet.planujemy umieścić naszą stronę w sieci Internet.

Zaleca się stosować tzw. „ścieżki względne” jak w poniższym Zaleca się stosować tzw. „ścieżki względne” jak w poniższym przykładzie:przykładzie:

<A HREF=„./index.html”>Odsyłacz do strony index.html w katalogu <A HREF=„./index.html”>Odsyłacz do strony index.html w katalogu umieszczonej w bieżącym katalogu</A>umieszczonej w bieżącym katalogu</A>

Zapis „ ./ „ oznacza tyle iż strona o nazwie index.html znajduje się w tym Zapis „ ./ „ oznacza tyle iż strona o nazwie index.html znajduje się w tym samym katalogu co strona na której umieściliśmy do niej odsyłacz. Inne samym katalogu co strona na której umieściliśmy do niej odsyłacz. Inne przykłady:przykłady:

../index.html – strona o nazwie index.html znajduje się o jeden katalog ../index.html – strona o nazwie index.html znajduje się o jeden katalog wyżej niż strona w której umieściliśmy do niej odsyłaczwyżej niż strona w której umieściliśmy do niej odsyłacz

./Katalog/index.html - strona o nazwie index.html znajduje się w katalogu ./Katalog/index.html - strona o nazwie index.html znajduje się w katalogu „Katalog” znajdującym się w katalogu w którym umieszczona jest strona „Katalog” znajdującym się w katalogu w którym umieszczona jest strona zawierająca odsyłacz.zawierająca odsyłacz.

Istotną kwestią jest też wielkość znaków. System Windows Istotną kwestią jest też wielkość znaków. System Windows nie rozróżnia wielkich i małych znaków. Często zdarza się nie rozróżnia wielkich i małych znaków. Często zdarza się jednak iż wysyłając stronę do sieci Internet korzystamy konta jednak iż wysyłając stronę do sieci Internet korzystamy konta na serwerze opartym na systemie UNIX, gdzie wielkość na serwerze opartym na systemie UNIX, gdzie wielkość znaków jest bardzo istotna. Należy zatem w miarę możliwości znaków jest bardzo istotna. Należy zatem w miarę możliwości stosować wyłącznie małe znaki a zamiast spacji znak stosować wyłącznie małe znaki a zamiast spacji znak podkreślenia.podkreślenia.

Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często autorzy stron, którzy dysponują zazwyczaj Bardzo często autorzy stron, którzy dysponują zazwyczaj swoim własnym adresem, wstawiają go na stronie, prosząc o swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi czytelnika. Jest to dobry obyczaj, który daje uwagi czytelnika. Jest to dobry obyczaj, który daje czytelnikowi łatwy kontakt z autorem.czytelnikowi łatwy kontakt z autorem.

Stosujemy tutaj na przykład następujące polecenie:Stosujemy tutaj na przykład następujące polecenie:

<A HREF="mailto:[email protected]">Imię i nazwisko</A><A HREF="mailto:[email protected]">Imię i nazwisko</A>

Przykład:Przykład: <A HREF="mailto:[email protected].">Redaktor strony</A><A HREF="mailto:[email protected].">Redaktor strony</A>

Wstawianie grafiki do dokumentuWstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny">postać: <img src="plik_graficzny">

Przykład:Przykład: <img src="ala.jpg"><img src="ala.jpg"> Wielkość obrazka możemy regulować za pomocą Wielkość obrazka możemy regulować za pomocą

parametrów HEIGHT (wysokość) i WIDTH parametrów HEIGHT (wysokość) i WIDTH (szerokość). (szerokość).

Na przykład:Na przykład: <IMG SRC=„ala.jpg" HEIGHT=150><IMG SRC=„ala.jpg" HEIGHT=150>

Możemy również zdeformować obrazek, podając Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości arbitralne wartości wysokości i szerokości obrazka:obrazka:

<IMG SRC= "ala.jpg" WIDTH=200 HEIGHT=50><IMG SRC= "ala.jpg" WIDTH=200 HEIGHT=50> Odrębny, specjalny zespół parametrów, Odrębny, specjalny zespół parametrów,

ALIGN=abc, steruje pozycją obrazka w ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu. stosunku do oblewającego go akapitu.

Konstrukcja ma postać:Konstrukcja ma postać: <IMG SRC="obrazek" ALIGN=abc><IMG SRC="obrazek" ALIGN=abc>. . Parametr abc może Parametr abc może

przyjmować wartości: left, right, top, bootom, middle. przyjmować wartości: left, right, top, bootom, middle. Znacznik ALIGN może być powszechnie stosowany Znacznik ALIGN może być powszechnie stosowany także w stosunku do pozycjonowaniu tekstu np.:także w stosunku do pozycjonowaniu tekstu np.:

<P ALIGN=„CENTER”>To jest wyśrodkowany tekst</P><P ALIGN=„CENTER”>To jest wyśrodkowany tekst</P>

<P ALIGN=„LEFT”>To jest tekst wyrównany od lewej</P><P ALIGN=„LEFT”>To jest tekst wyrównany od lewej</P>

<P ALIGN=„RIGHT”>To jest tekst wyrównany od prawej</P><P ALIGN=„RIGHT”>To jest tekst wyrównany od prawej</P>

Należy dodać iż znacznik ALIGN nie występuje osobno ale z Należy dodać iż znacznik ALIGN nie występuje osobno ale z innymi (najczęsciej z <P>).innymi (najczęsciej z <P>).

TabeleTabele

Składnia: <TABLE> </TABLE>Składnia: <TABLE> </TABLE> Definicja tabeli musi być umieszczona między tymi Definicja tabeli musi być umieszczona między tymi

dwoma znacznikami, które stanowią jej delimitery. W dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, komórek w rzędach, konkretne dane w komórkach,

tytuł tabeli i nagłówki wierszy i kolumntytuł tabeli i nagłówki wierszy i kolumn..

Wiersz tabeliWiersz tabeli

Składnia: <TR> </TR>Składnia: <TR> </TR> Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy

dla komórek z danymi. W ramach <TABLE> </TABLE> dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> można umieścić wiele kolejnych definicji wierszy <TR> </TR></TR>

Przykład:Przykład: <TABLE> <TABLE> <TR></TR><TR></TR> <TR></TR><TR></TR> <TR></TR><TR></TR> </TABLE></TABLE>

Komórka w wierszuKomórka w wierszu

Składnia: <TD> </TD>Składnia: <TD> </TD> Komórka zawiera konkretne dane. Między jej Komórka zawiera konkretne dane. Między jej

znacznikami można umieszczać tekst i grafikę. znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład:znacznikami wybranego rzędu, na przykład:

<TABLE> <TABLE> <TR> <TD> </TD><TD> </TD><TD> </TD></TR><TR> <TD> </TD><TD> </TD><TD> </TD></TR> <TR> <TD> </TD><TD> </TD><TD> </TD></TR><TR> <TD> </TD><TD> </TD><TD> </TD></TR> <TR> <TD> </TD><TD> </TD><TD> </TD></TR><TR> <TD> </TD><TD> </TD><TD> </TD></TR> </TABLE></TABLE>

Obramowanie tabeliObramowanie tabeli

Aby tabela zawierała naokoło obramowanie, wystarczy Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.domyślna wartość.

Składnia:Składnia: <TABLE BORDER=„xx”> </TABLE><TABLE BORDER=„xx”> </TABLE> Należy zwrócić uwagę iż BORDER nie występuje Należy zwrócić uwagę iż BORDER nie występuje

osobno ale wraz ze znacznikiem TABLEosobno ale wraz ze znacznikiem TABLE

Marginesy dla komórekMarginesy dla komórek

Jeśli uznamy, że odstęp między Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1). CELLPADDING (domyślnie wynosi on 1). Np.: <TABLE BORDER CELLPADDING=2></TABLE>Np.: <TABLE BORDER CELLPADDING=2></TABLE>

Obramowanie komórekObramowanie komórek

Aby komórki (nie tabela!) zawierały inne Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto użyć parametru CELLSPACING (de facto jest to odległość między komórkami).jest to odległość między komórkami).

Np:Np: <TABLE BORDER <TABLE BORDER CELLSPACING=8CELLSPACING=8></TABLE>></TABLE>

Szerokość tabeliSzerokość tabeli

Dotychczas tworzyliśmy tabele, które Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przybierały domyślną szerokość na ekranie przeglądarki. Parametr WIDTH daje nam przeglądarki. Parametr WIDTH daje nam możliwość samodzielnego zdefiniowania możliwość samodzielnego zdefiniowania szerokości tabeli. Podany parametr jest szerokości tabeli. Podany parametr jest "silniejszy" od innych parametrów, które "silniejszy" od innych parametrów, które wpływają na szerokość tabeli na ekranie.wpływają na szerokość tabeli na ekranie.

Przykład:Przykład: <TABLE BORDER <TABLE BORDER WIDTH=600WIDTH=600></TABLE>></TABLE>

Podpis/tytuł tabeliPodpis/tytuł tabeli

Tabela powinna na ogół zawierać tytuł, Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go wyjaśniający jej treść. Należy go umieścić zaraz za ogólną definicją tabeli. umieścić zaraz za ogólną definicją tabeli. Na przykład:Na przykład:

<TABLE BORDER WIDTH=300><TABLE BORDER WIDTH=300><CAPTION ALIGN=top><CAPTION ALIGN=top>

Tytuł tabeli umieszczony u góry</CAPTION>Tytuł tabeli umieszczony u góry</CAPTION> Spowoduje umieszczenie tytułu tabeliSpowoduje umieszczenie tytułu tabeli

Natomiast:Natomiast: <TABLE BORDER WIDTH=300><TABLE BORDER WIDTH=300>

<CAPTION ALIGN=bootom><CAPTION ALIGN=bootom> Podpis tabeli umieszczony u dołu</CAPTION>Podpis tabeli umieszczony u dołu</CAPTION>

Spowoduje umieszczenie podpisu tabeliSpowoduje umieszczenie podpisu tabeli

Łączenie komórekŁączenie komórek

Aby komórka w danym wierszu Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć rozciągała się na x wierszy, należy użyć w jej definicji parametru w jej definicji parametru

<TD ROWSPAN=x><TD ROWSPAN=x>

gdzie x oznacza ilość wierszy przez które gdzie x oznacza ilość wierszy przez które ma się rozciągać tabela.ma się rozciągać tabela.

RamkiRamki <IFRAME WIDTH=<IFRAME WIDTH=liczba punktówliczba punktów HEIGHT= HEIGHT=szerokość szerokość

SRC="SRC="ddokument">Twoja przeglądarka nie akceptuje okument">Twoja przeglądarka nie akceptuje pływającychpływających ramek!</IFRAME>ramek!</IFRAME>

Gdybyśmy chcieli się pozbyć obramowania ramki, Gdybyśmy chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję:moglibyśmy podać definicję:

<IFRAME WIDTH=300 HEIGHT=200 FRAMEBORDER=0 <IFRAME WIDTH=300 HEIGHT=200 FRAMEBORDER=0 SRC=„SRC=„strona.htmlstrona.html">Twoja przeglądarka nie akceptuje ">Twoja przeglądarka nie akceptuje pływających ramek</IFRAME>pływających ramek</IFRAME>

NależyNależy zwrócić uwagę na parametr FRAMEBORDER. zwrócić uwagę na parametr FRAMEBORDER. Jeśli podamy w definicji parametr Jeśli podamy w definicji parametr SCROLLING=NOSCROLLING=NO,,

ramka zostanie pozbawiona suwakaramka zostanie pozbawiona suwaka

Ramki c.d.Ramki c.d.

Podstawową rolę w "ramkowym" Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się pozycję ramek oraz zachowanie się innych dokumentów w momencie innych dokumentów w momencie uaktywnienia łącza hipertekstowego. uaktywnienia łącza hipertekstowego. Pozostałe strony, wchodzące w skład Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, całego, wielostronicowego dokumentu, są stronami podrzędnymi. są stronami podrzędnymi.

Zauważmy od razu, że na podstawowej Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki definicją samych ramek. Dopiero znaczniki NOFRAMES pozwalają umieścić treść, NOFRAMES pozwalają umieścić treść, która będzie wyświetlana przez która będzie wyświetlana przez przeglądarki nie interpretujące ramek. przeglądarki nie interpretujące ramek. Znaczniki <BODY></BODY> mogą być Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie umieszczane jedynie w obrębie NOFRAMES NOFRAMES


<FRAMESET COLS="25%,*%"><FRAMESET COLS="25%,*%"> <FRAME SCROLLING="auto" NAME="lista <FRAME SCROLLING="auto" NAME="lista

edytorów" SRC="edyt.htm">edytorów" SRC="edyt.htm"> <FRAME SCROLLING="yes" NAME="edytory" <FRAME SCROLLING="yes" NAME="edytory"

SRC="edyt.htm">SRC="edyt.htm"> </FRAMESET></FRAMESET> <NOFRAMES><NOFRAMES> <BODY><BODY> </BODY></BODY> </NOFRAMES></NOFRAMES>

Kluczowe znaczenie ma para znaczników Kluczowe znaczenie ma para znaczników <FRAMESET> </FRAMESET>. Stanowią one, z <FRAMESET> </FRAMESET>. Stanowią one, z dodatkowymi parametrami, ramy dla całej dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek. ramek, podziału strony i wielkości ramek.

Liczby x i y służą do liczbowego określenia Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy). większą liczbę kolumn lub wierszy).

Sam podział na ramki to nie wszystko. Należy Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty im jeszcze przypisać jakieś dokumenty

Aby przypisać ramce dokument, musimy podać Aby przypisać ramce dokument, musimy podać źródło dokumentu. Należy w tym celu użyć źródło dokumentu. Należy w tym celu użyć konstrukcji:konstrukcji:

<FRAME SRC="nazwa_pliku.htm"><FRAME SRC="nazwa_pliku.htm"> Jeśli przywoływany plik jest spory Jeśli przywoływany plik jest spory

objętościowo, zapewne nie zmieści się w objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć całości w ramce. Możemy w takim razie użyć parametru, który wyświetli ramkę razem z parametru, który wyświetli ramkę razem z suwakami. Stosowny parametr ma postać:suwakami. Stosowny parametr ma postać:

<FRAME SCROLLING=yes><FRAME SCROLLING=yes>

Czytelnik dokumentu może regulować Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji Gdy jednak użyjemy w definicji parametruparametru

<FRAME NORESIZE><FRAME NORESIZE>


Strona podstawowa (dowolna nazwa):Strona podstawowa (dowolna nazwa):

<html><html> <head><head> <title>Przykładowa strona</title><title>Przykładowa strona</title> </head></head> <frameset cols="18%,82%"><frameset cols="18%,82%"> <FRAME SRC="strona1.html"><FRAME SRC="strona1.html"> <FRAME SRC="strona2.html"><FRAME SRC="strona2.html"> </FRAMESET></FRAMESET> </html></html>

Strona1.html:Strona1.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">3.2//EN">

<HTML><HTML> <HEAD><HEAD> <title>Strona 1</title><title>Strona 1</title> <meta name="description" content="Strona 1"><meta name="description" content="Strona 1"> <meta http-equiv="content-type" <meta http-equiv="content-type"

content="text/html; charset=iso-8859-2">content="text/html; charset=iso-8859-2"> </head></head> <body bgcolor="green"><body bgcolor="green"> <HR><HR> <H1>To jest strona 1</H1><H1>To jest strona 1</H1> </body></body> </html></html>

Strona2.html:Strona2.html:

<html><head><html><head> <meta http-equiv="content-type" content="text/html; <meta http-equiv="content-type" content="text/html;

charset=iso-8859-2">charset=iso-8859-2"> <title>Mailer</title><title>Mailer</title> <<meta name="description„meta name="description„ content="Formularze">content="Formularze"> </HEAD></HEAD> <body bgcolor="silver"><body bgcolor="silver"> <HR><HR> <H1>To jest strona 2</H1><H1>To jest strona 2</H1> <HR></body></html><HR></body></html>

Documents

Język HTML podstawy programowania