(Microsoft PowerPoint - Podstawy j\352zyka HTML)

Ogólne informacje i zasady języka HTML

Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu) i odnosi się do

jednego z wielu języków znakowania. Język znakowania to sposób kodowania dokumentów tekstowych

przy pomocy specjalnych elementów – znaczników.

Znaczniki języka HTML mają postać:

dwuczęściową:

<nazwa_polecenia>...</nazwa_polecenia>

. <P>...</P>

jednoczęściową:

<nazwa_polecenia>

np.

<BR>

Znaczniki posiadają atrybuty, które dają elastyczność w tworzeniu dokumentów HTML. Dostarczają

dodatkowych informacji o elementach strony definiowanych poprzez znaczniki.

Atrybut definiowany jest za pomocą pary

atrybut="wartość":

<nazwa_polecenia atrybut="wartość">...</nazwa_polecenia>

np.
<P align="center">...</P>

Podstawowe elementy dokumentu

Dokument HTML składa się z dwóch części:

części nagłówkowej,

obszaru treści.

Ogólna struktura dokumentu wygląda następująco:

<HTML>

<HEAD> - początek nagłówka

- Polecenia zawarte w nagłówku -

</HEAD> - koniec nagłówka

<BODY> - początek obszaru treści

- Treść dokumentu -

</BODY> - koniec obszaru treści

</HTML>

Dodatkowe elementy HEAD

W elemencie HEAD można umieścić m.in. takie elementy jak:

TITLE - definiuje tytuł dokumentu HTML,

META - definiuje dodatkowe informacje o dokumencie, takie jak: standard kodowania znaków,

informacje o autorze strony, słowa kluczowe, czy opis strony,

STYLE - definiuje style wewnątrz dokumentu HTML,

LINK - łączy stronę z zewnętrznym arkuszem stylów.

Przykład 1. Zastosowanie elementów TITLE i META.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html; charset=iso-8859-2">
<META name="Description" CONTENT="Zabytki Krakowa: fotografie archiwalne, oraz

współczesne, mapa zabytków, historia miasta.">

<META name="Keywords" CONTENT="Kraków, zabytek, historia">
<META name="Author" CONTENT="Jan Kowalski">
<TITLE>Strona o zabytkach Krakowa.</TITLE>

</HEAD>
<BODY>
</BODY>
</HTML>

Formatowanie zawartości dokumentu

za pomocą elementów blokowych

Strona WWW składa się z elementów blokowych. Służą one dwóm celom:

informują przeglądarkę, jaki rodzaj zawartości znajduje się w bloku,

umożliwiają określenie w arkuszu stylów, w jaki sposób będą one wyglądać.

Przykładowe elementy blokowe określające strukturę wierszy i akapitów:

P – akapit,

H1, H2, H3, H4, H5 i H6 – nagłówki,

PRE - tekst preformatowany.

Przykład 2. Wykorzystanie elementów blokowych.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html;charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

</HEAD>
<BODY>

<P align="center">Ten akapit jest wyśrodkowany</P>
<P align="left">Ten akapit jest wyrównany do lewej strony okna</P>
<P align="right">Ten jest wyrównany do prawej strony</P>
<P> Ten tekst zostanie przełamany dokładnie <BR> w tym miejscu</P>

<HR size="5" width="60%" align="center" color="red">
<HR size="6" width="80%" align="center">
<HR size="8" align="center" color="black">
<HR size="6" width="80%" align="center">
<HR size="5" width="60%" align="center" color="red">
<H1>Tytuł pierwszego stopnia</H1>
<H2>Tytuł drugiego stopnia</H2>
<H3>Tytuł trzeciego stopnia itd.</H3>

<PRE>

Ten akapit wyjaśnia

ideę

tekstu preformatowanego. Można

zauważyć,

e tekst zachowuje swoje właściwości..

i nie jest łamany.

</PRE>

</BODY>
</HTML>

Elementy liniowe i znaki specjalne

Elementy liniowe są częścią dokumentu wypełniającą elementy blokowe. Można zdefiniować m.in. takie

elementy liniowe jak:

B - pogrubienie tekstu,

I - kursywa,

TT – czcionka maszynowa,

BIG - czcionka powiększona,

U – podkreślenie.

W języku HTML zdefiniowano zestaw kodów, zwanych kodami znaków, które zastępują najczęściej

używane znaki specjalne np.: ©, ®.

Przykład 3. Formatowanie tekstu poprzez elementy liniowe i znaki specjalne.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

</HEAD>
<BODY>

<H3>Elementy liniowe</H3>
<B>Ten tekst jest pisany czcionką pogrubioną</B><BR>
<I>Ten tekst jest pisany kursywą</I><BR>
<TT>Ten tekst jest pisany czcionką maszynową</TT><BR>
<BIG>Czcionka powiększona</BIG><SMALL> czcionka pomniejszona</SMALL><BR>
Indeks dolny: H<SUB>2</SUB>O<BR>
Indeks górny: x<SUP>2</SUP><BR>
Kod programu: <CODE>For a=1</CODE>
<H3>Znaki specjalne</H3>
Zastrzeżony znak towarowy: ® <BR>
Znak praw autorskich: © <BR>
Znak funta: £ <BR>
Znak paragrafu: ¶

</BODY>
</HTML>

Tworzenie list

W języku HTML istnieją trzy rodzaje list:

listy wypunktowane (zwane listami nieuporządkowanymi) - tworzone za pomocą elementu UL,

listy numerowane (zwane listami uporządkowanymi) - tworzone za pomocą elementu OL,

listy definicji - tworzone za pomocą elementu DL.

Przykład 4. Tworzenie list wypunktowanych, numerowanych oraz list definicji.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

</HEAD>
<BODY>

<UL type="circle">

<LI>element numer 1</LI>
<LI>element numer 2
<UL type="square">

<LI>element wewnętrzny numer 1</LI>
<LI>element wewnętrzny numer 2</LI>

</UL>
</LI>
<LI>element numer 3</LI>

</UL>
<OL type="I">

<LI>element numer 1</LI>
<LI>element numer 2
<OL type="a">

<LI>element wewnętrzny numer 1</LI>
<LI>element wewnętrzny numer 2</LI>

</OL>
</LI>
<LI>element numer 3</LI>

</OL>
<DL>

<DT>Hasło numer 1</DT>

<DD>Ten tekst jest wyjaśnieniem hasła numer 1</DD>

<DT>Hasło numer 2 </DT>

<DD>Ten tekst jest wyjaśnieniem hasła numer 2</DD>

</DL>

</BODY>
</HTML>

Dodawanie łączy

Połączenie (odnośnik) to narzędzie nawigacji, które umożliwia czytelnikowi przemieszczanie się między

stronami serwisu WWW. Wyróżnia się następujące typy odnośników:

do innych miejsc na tej samej stronie,

do innych stron internetowych,

pocztowy (e-mail).

Do utworzenia łącza na stronie wykorzystywany jest element A z atrybutami href oraz name.

Przykład 5. Wstawianie hiperłączy.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html;charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

</HEAD>
<BODY>

<P><A href="http://www.onet.pl">Link do Onet.PL</A></P>
<P>Przykładowy tekst</P>
<H1><A name="odnośnik">To jest odnośnik.</A></H1>
<P>Przykładowy tekst</P>
<P>Przykładowy tekst</P>
<P><A href="#odnośnik">Link do odnośnika</A></P>
<P>Przykładowy tekst</P>
<P>Przykładowy tekst</P>
<A href="mailto:arek.14@interia.pl">Link do adresu pocztowego</A>

</BODY>
</HTML>

Wstawianie grafiki i kolorów

Pliki graficzne mogą być w wielu formatach, ale na stronach WWW wykorzystuje się raczej trzy: GIF

(Graphics Interface Format), JPEG (Joint Photographic Experts Group) i PNG (Portable Network

Graphic

). Dodawanie grafiki odbywa się za pomocą elementu IMG i atrybutu src.

Barwy można określać za pomocą rozszerzeń kolorów HTML na dwa różne sposoby:

za pomocą liczby szesnastkowej (#FFFFFF),

za pomocą predefiniowanej nazwy (Black).

Przykład 6. Wstawianie grafiki.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html;charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

</HEAD>
<BODY bgcolor="Yellow">

<P align="center">
<IMG src="Logo.gif" width="285" height="271" alt="Logo PL">
</P>
<H2 align="center">Logo Politechniki Lubelskiej</H3>

</BODY>
</HTML>

Tabele

Tabele języka HTML umożliwiają prezentację danych na stronach WWW, oraz kontrolowanie

umiejscawiania elementów strony – tekstu, obrazów, pól formularzy, czy też innych tabel, poprzez

umieszczanie ich w kolumnach lub wierszach tabeli.

Elementy definiujące tabele:

TABLE - tworzy tabele,

TR - definiuje wiersze,

TH - definiuje komórki nagłówka,

TD - definiuje komórki danych.

Przykład 7. Standardowa tabela.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html;charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

</HEAD>
<BODY>
<TABLE border="1">

<CAPTION>Tabela przykładowa</CAPTION>
<TR>

<TH>NAGŁÓWEK, komórka 1</TH>
<TH>NAGŁÓWEK, komórka 2</TH>

</TR>
<TR>

<TD>wiersz 1, komórka 1</TD>
<TD>wiersz 1, komórka 2</TD>

</TR>
<TR>

<TD>wiersz 2, komórka 1</TD>
<TD>wiersz 2, komórka 2</TD>

</TR>

</TABLE>
</BODY>
</HTML>

Tworzenie formularzy

Formularze HTML służą do pobierania informacji od osób odwiedzających witryny WWW. Istnieje ich

bardzo wiele: proste formularze służące do przeszukiwania, formularze umożliwiające zalogowanie się na

witrynie, kupowanie produktów za pośrednictwem Internetu itd.

Każdy formularz składa się z elementu FORM zawierającego specjalne elementy kontrolne, takie jak

przyciski, pola tekstowe, pola wyboru, oraz listy. Najbardziej uniwersalnym elementem tworzącym

kontrolki jest element INPUT.

Przykład 8. Wykorzystanie kontrolek tworzonych przy pomocy elementu INPUT.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html;charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

</HEAD>
<BODY>

<FORM>
<P>Pole tekstowe (text) - <INPUT type="text" size="20"><BR>
Pole typu "password" - <INPUT type="password" size="20"><BR>
Przycisk typu "checkbox" - <INPUT type="checkbox"><BR>
Przycisk typu "radio" - <INPUT type="radio"><BR>
Przycisk typu "file" - <INPUT type="file"> <BR>
Przycisk typu "button" - <INPUT type="button" value="button"><BR>
Przycisk typu "reset" - <INPUT type="reset" value="reset"><BR>
Przycisk typu "submit" - <INPUT type="submit" value="submit"><BR>
Przycisk typu "image" - <INPUT type="image" src="image.gif"></P>
</FORM>

</BODY>
</HTML>

Tworzenie ramek

Ramki pozwalają wyświetlić w oknie przeglądarki więcej niż jeden dokument HTML. Każdy z takich

dokumentów jest prezentowany w odrębnej ramce, a poszczególne ramki są od siebie niezależne. Zawartość

ramki tworzy standardowy plik HTML.

Do stworzenia dokumentu układu ramek używane są następujące elementy:

FRAMESET - określa, ile będzie ramek i jakiej wielkości,

FRAME - nadaje każdej ramce nazwę i ładuje do niej stronę początkową.

Przykład 9. Tworzenie ramek.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html;charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>
</HEAD>
<FRAMESET frameborder="1" rows="25%,*">

<FRAME name="gora" src="strona1.html">

<FRAMESET cols="25%,*">

<FRAME name="lewa" src="strona2.html">
<FRAME name="prawa" src="strona3.html" scrolling="yes">

</FRAMESET>

</FRAMESET>
</HTML>

Wprowadzenie do kaskadowych arkuszy stylów

Kaskadowy arkusz stylów (CSS - Cascading Style Sheets) to mechanizm definiujący formatowanie dla

danej strony przy zastosowaniu stylów złożonych, które przeglądarka zinterpretuje w określonym porządku

zwanym kaskadą. Arkusze stylów to potężne narzędzie do formatowania stron WWW. Dają one ogromne

możliwości manipulowania wyglądem dokumentów i zwiększają efektywność narzędzi.

Arkusze stylów dają wiele możliwości stosowania stylów. Definicja stylu może pojawić się w konkretnym

elemencie HTML – wówczas mówimy o stylu wpisanym, w obrębie elementu HEAD strony HTML (to

znaczy między znacznikami <HEAD> </HEAD>) – takie arkusze stylów nazywa się osadzonymi, lub może

zostać pobrana z pliku zewnętrznego – jest to wtedy zewnętrzny lub łączony arkusz stylów.

Składnia CSS

Ogólna postać CSS

Postać arkusza stylu CSS zależy od typu arkusza. W przypadku stylu wpisanego ma ona następującą

postać:
<znacznik style=”właściwość: wartość;”>

Ogólna postać osadzonego i zewnętrznego arkusza CSS jest następująca:

selektor {właściwość: wartość;}

Definicja składa się z selektora i jednej lub kilku deklaracji. Deklaracja składa się z właściwości i jednej

lub kilku wartości. Selektorem nazywa się znacznik czy też element, który jest definiowany, właściwość

to jego atrybut, który zmieniany jest poprzez przypisanie mu nowej wartości.

Definiowanie klas

Klasy umożliwiają modyfikacje elementów na stronie. Dzięki klasom można zdefiniować w arkuszu stylu kilka

wyglądów jednego elementu, a następnie na tworzonej stronie określa się tylko, jaki wygląd zostanie w danym

momencie użyty. Definiowane są za pomocą następującego zapisu:
element.nazwa_klasy{właściwość: wartość;}

lub
.nazwa_klasy{właściwość: wartość}

Aby wykorzystać klasę na tworzonej stronie, należy odwołać się do niej poprzez atrybut class.

Definiowanie identyfikatora

Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu id. Można go

zdefiniować na dwa sposoby:
#nazwa {właściwość: wartość;}

lub
element#nazwa {właściwość: wartość;}

Dodawanie stylów do strony WWW

Zewnętrzne arkusze stylów

Zewnętrzny arkusz stylów dołącza się za pomocą znacznika <LINK>, który jest umieszczany w sekcji

HEAD dokumentu HTML.

<HEAD>

</HEAD>

Zaleta arkuszy stylów tego typu polega na tym, iż reguły stylów można wykorzystywać w wielu

dokumentach HTML wchodzących w skład witryny.

Osadzone arkusze stylów

Osadzone arkusze stylów to standardowe dokumenty HTML, wewnątrz których zostały umieszczone

między znacznikami <STYLE></STYLE> definicje stylów. Element ten powinien znaleźć się w

nagłówku dokumentu. Konfiguruje on atrybuty stylu dla całej strony.

Lokalne arkusze stylów

Styl lokalny pozwala na nadanie formatowania konkretnemu pojedynczemu elementowi strony. Styl taki

jest definiowany przy pomocy atrybutu style. Jest on wprowadzany w wybranym znaczniku i nie ma

wpływu na pozostałe znaczniki. Ogólna postać definicji stylu wpisanego jest następująca:

Formatowanie akapitów

CSS używa pomysłowej metafory, aby ułatwić definiowanie elementów blokowych na stronie – traktuje je jak

pudełko. Określając formatowanie tychże elementów na potrzeby CSS (mogą to być akapity, bloki cytatów, listy,

grafika itp.), definiowane jest formatowanie pudełka. Nie ma znaczenia, co jest w środku, istotne jest tylko, jak ma

być sformatowany element. Ta możliwość CSS dotyczy elementów blokowych dokumentu, włączając w to akapity.

Margines

Obwódka

Odstęp

Element

Akapity formatuje się za pomocą następujących właściwości:

padding – ustawianie odstępów,

margin – ustawianie marginesów,

border – ustawianie obwódki,

text-indent – zdefiniowanie wcięcia lub wysunięcia pierwszej linii tekstu,

text-align – kontrolowanie wyrównania tekstu.

Przykład 10. Użycie arkuszy stylów do formatowania akapitów.

border: medium solid blue;
text-indent: 1cm;
text-align: justify;

}

OL {list-style-type: upper-alpha;}
UL {list-style-type: circle;}
-->
</STYLE>
</HEAD>
<BODY>
<P CLASS="akapit" >Ten akapit jest otoczony obwódką, posiada odstępy, wyrównanie i wcięcie
takie jak zdefiniowane w klasie ".akapit". Marginesy są zgodne z właściwościami
zawartymi w definicji "BODY".</P>

<UL>Lista wypunktowana:

<LI>element numer 1</LI>
<LI>element numer 2</LI>
<LI>element numer 3</LI>

</UL>
<OL>Lista numerowana:

<LI>element numer 1</LI>
<LI>element numer 2</LI>
<LI>element numer 3</LI>

</OL>

</BODY>
</HTML>

Definiowanie czcionek

Arkusze stylów umożliwiają bardzo elastyczne definiowanie czcionek na stronach WWW co sprawia że,

style CSS definiujące krój, kolor, rozmiar i styl czcionki są bardzo często stosowane.

Definiowane są podstawowe cechy czcionek jak:

rodzaj - właściwość font-family,

wielkość - właściwość font-size,

grubość - właściwość font-weight,

rozmieszczenie znaków – właściwości letter-spacing, word-spacing, line-height.

Przykład 11. Określanie postaci czcionki.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>
<STYLE type="text/css">
<!--
P.zwiekszony { font-size:14pt;

line-height:24pt;
letter-spacing: .5em;
word-spacing: 1em;

}

P.zmniejszony { font-size:13pt;

line-height:13pt;
letter-spacing: -.5pt;

}

-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN style="font-family: Arial">font-family: Arial</SPAN><BR>
<SPAN style="font-family: fantasy">font-family: fantasy</SPAN></P> <HR color="green">
<SPAN style="font-size: small">font-size: small</SPAN>
<SPAN style="font-size: medium">font-size: medium</SPAN>
<SPAN style="font-size: xx-large">font-size: xx-large</SPAN> <HR color="green">
<SPAN style="font-weight: 100">font-weight: 100</SPAN><BR>
<SPAN style="font-weight: 900">font-weight: 900</SPAN><HR color="green">
<P CLASS="zwiekszony">Tekst rozstrzelony Tekst rozstrzelony Tekst rozstrzelony Tekst
rozstrzelony </P>
<HR color="green">
<P CLASS="zmniejszony">Tekst ściśnięty Tekst ściśnięty Tekst ściśnięty Tekst ściśnięty
Tekst ściśnięty Tekst ściśnięty Tekst ściśnięty </P>
</BODY>
</HTML>

Dodawanie kolorów i tła

Możliwości kontroli kolorów i tła jakie daje CSS są bardzo duże. Dzięki temu, iż style są stosowane do

określania postaci poszczególnych elementów strony, istnieje możliwość określenia różnego tła i kolorów

dla różnych elementów.

Można zdefiniować m.in.:

kolory dla tekstu - właściwość color,

kolor tła elementu - właściwość background-color,

obraz jako tło elementu - właściwość background-image.

Przykład 12. Zmiana kolorów i tła.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html;charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

<STYLE type="text/css">
<!--
BODY {background: #6495ED; color:#FFFF00; margin-left: 2cm;

margin-right: 2cm;}

H2 {font-size: 20pt; color: #FF0000; background: #FFFFFF;}
P.tlo {font-size: 14pt; color: gray; border: medium dashed black;

background-color: lime;}

P.grafika {font-size: 14pt; color: white; padding: 1cm;

background-image: url(tlo.gif);}

-->
</STYLE>
</HEAD>
<BODY>
<H2>Czerwony nagłówek na białym tle</H2>
<P>Tekst jest żółty na niebieskim tle.</P>
<H2 style="color: white; background-color: red;">Biały nagłówek na czerwonym tle</H2>
<P class="tlo">Tekst jest szary na zielonym tle. Akapit posiada czarne obramowanie.</P>
<P class="grafika">Tekst jest biały. Jako tło wykorzystano plik graficzny<SPAN style="font-
family: cursive; color: aqua;" >tlo.gif </SPAN>
</P>
</BODY>
</HTML>

Grupowanie elementów za pomocą DIV i SPAN

Style można nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku. Bloki

wydzielane są za pomocą pary znaczników <DIV></DIV>. Fragment dokumentu objęty nimi można w

swobodny sposób formatować za pomocą stylów. Mogą one zawierać nagłówki, akapity, listy, a nawet inne

bloki.

Element SPAN jest liniowym odpowiednikiem elementu DIV. Można grupować dowolną liczbę elementów

wewnątrz elementu blokowego lub pomiędzy nimi, otaczając je znacznikami <SPAN></SPAN>.

Znacznika <SPAN> można użyć nawet do określenia postaci pierwszej litery lub pierwszego słowa strony.

Przykład 13. Wykorzystanie elementów DIV i SPAN.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<META http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Pierwszy dokument</TITLE>

</HEAD>
<BODY>

<DIV style="border: thick double blue; background-color: lime;">
<P> Ten akpit i poniższe listy są otoczone obwódką, oraz mają wspólne
tło.</P>
<B>Lista wypunktowana:</B>
<UL>

<LI>element numer 1</LI>
<LI>element numer 2</LI>
<LI>element numer 3</LI>

</UL>
</DIV>
<P> Akapit, w którym <SPAN style="color:#FF0000;font-weight:bold;">
fragment tekstu jest formatowany</SPAN> zgodnie z określonym stylem</P>

</BODY>
</HTML>