

1986 rok, genewski CERN – powstanie języka HTML.



Autor: Tim Berners-Lee.



Zastosowanie: język opisu stron WWW, umożliwiający
definiowanie:



struktury i wyglądu stron internetowych,



ich zawartości



powiązań z innymi zasobami Sieci.



HTML to skrót od angielskiego zwrotu Hypertext
Markup Language, co znaczy -

język znaczników

hipertekstowych



Standaryzacją znaczników HTML zajmuje się
konsorcjum W3C (World Wide Web Consortium).

Informacje podstawowe

Edytory graficzne



Microsoft FrontPage,



Macromedia
Dreamwaver,



FrontPage Express,



Netscape Composer.

Kod źródłowy dokumentu HTML składa się ze zwykłego
tekstu, jaki można tworzyć i modyfikować praktycznie
w każdym edytorze. Dla wygody użytkowników Internetu
stworzono specjalne edytory HTML. Dzielą się one na dwie
kategorie: graficzne i tekstowe.

Edytory tekstowe:



Macromedia
HomeSite 5,



HotDog Profesional
6.6,



Pajączek 2000

Edytory HTML

Większość z nich to tzw. znaczniki obejmujące (parzyste),
składające się ze znacznika otwierającego i zamykającego,
na przykład:

<H1>

Instrukcja obsługi

H1>

Tekst w tym obszarze zaznaczony jest jako nagłówek
(header) pierwszego poziomu, czyli zostanie wyświetlony
największą czcionką zdefiniowaną dla nagłówków. Istnieje
sześć poziomów nagłówków w HTML-u:

Pojęcie znacznika

Tworzenie strony internetowej polega przede wszystkim na
wstawianiu
w odpowiednie miejsca ściśle określonych kodów ujętych
w nawiasy kątowe. Kody te są zwane znacznikami,
markerami lub tagami.

Niektóre znaczniki występują pojedynczo, np.:



<hr>

- tworzy linię poziomą,



<br>

- wymusza przejście do następnego wiersza,



<img> -

wstawia grafikę,



<meta> -

dostarcza informacji o dokumencie.

Znaczniki można zagnieżdżać, podobnie jak nawiasy w
matematyce:

<B><I> fragment tekstu </I></B>

Wiele znaczników może lub musi posiadać określone
atrybuty, np.:

<FONT

SIZE

="4"

COLOR

="red">

tekst

</FONT>

Atrybut

COLOR

może przyjmować różne wartości:

aqua, brown, cyan, gold, gray, green, lime, magenta,

maroon, navy, olive, orange, pink, plum, purple, red,
silver, teal, tomato, violet, white, yellow.

Atrybuty znaczników

html

head

meta

http-equiv=

"Content-Type"

content=

"text/html;

charset=iso-8859-2"

title

> Tytuł strony </

title

head

body

body

html

Podstawowa struktura strony

meta

http-equiv

"Content-Type"

content

"text/html;

charset=iso-8859-2"

Standard kodowania wyznacza polska norma

PN-91/T-

42115

, nazywana często ISO-8859-2

Druga metoda - kodowanie Windows CP 1250 (windows-
1250) - jest charakterystyczna dla MS Windows. Powoduje
czasem pojawienie się problemów przy wyświetlaniu
znaków w innych systemach.
<

meta

http-equiv

"Content-Type"

content

"text/html;

charset= windows-1250"

Kodowanie po polsku

meta

http-equiv

"Content-Type"

content

"text/html;

charset=iso-8859-2"

W nagłówku dokumentu umieszcza się zwykle informacje
ważne dla przeglądarek i wyszukiwarek – są to tzw.
znaczniki

META

meta

http-equiv

"Created"

content

"5-10-02"

Znaczniki META

meta

http-equiv

"Content-Language"

content

"pl"

meta

name

"description"

content

"Podstawy HTML"

meta

name

"Author"

content

"Mirosław Maciejczyk"

meta

name

"keywords"

content

"HTML, strony WWW"



>...</

> (paragraph)



> (break)



> (horizontal rule line)



PRE

>...</

PRE

> (preformatted)



>...</

> (unordered list) - tworzy listę

wypunktowaną.



>...</

> (ordered list) - tworzy listę

numerowaną.



>...</

> wprowadza element listy



BLOCKQUOTE

>...</

BLOCKQUOTE

> - cytat



DIV

>...</

DIV

> - grupuje tekst w jeden blok

HTML jest językiem

bezformatowym

, w którym ignorowane są

przejścia do nowego wiersza i wielokrotne spacje, zaś
wymaganą strukturę dokumentu nadaje się za pomocą
specjalnych znaczników.

Podstawowe znaczniki



>...</

> (bold)



>...</

> (italic)



>...</

> (underline)



>...</

> (teletype)



>...</

> - wyróżnienie



STRONG

>...</

STRONG

> - wyróżnienie silniejsze



STRIKE

>...</

STRIKE

> - przekreślenie tekstu



SUB

>...</

SUB

> - indeks dolny



SUP

>...</

SUP

> - indeks górny

Wyróżnianie tekstu



size

- rozmiar czcionki (od 1 do 7, wartością

domyślną jest 3)



color -

kolor



face

- krój

Rozmiar, kolor i krój czcionki można określić za pomocą
znacznika <

FONT

>...</

FONT

> i jego atrybutów:

font

color

"navy

size

"5"

face

"Helvetica"

> jakiś tekst </

font

Można też używać bardziej uniwersalnych

znaczników, takich jak:



BIG

>...</

BIG

> - powiększenie czcionki o 1 punkt,



SMALL

>...</

SMALL

> - zmniejszenie czcionki o 1

punkt.

Definiowanie czcionek

Przykład

Kolor tła określamy za pomocą atrybutu

bgcolor

znacznika

BODY



BODY

bgcolor

= ”aqua”

text

= ”navy” >



BODY

bgcolor

= ”#FFFF00 ”

text

= ”#FFFFFF ” >



BODY

bgcolor

= rgb(255, 255, 0)

text

= rgb(255,

255, 255) >

Tłem strony może być też tapeta zapisana w pliku
graficznym, którego nazwę podaje się jako wartość
atrybutu

background



BODY

background

= ”tlo.gif” >



BODY

background

= ”images/tlo.gif” >



BODY

background

= ”../tlo.gif” >

Kolor tła

Znacznik <

IMG

> (image) umożliwia umieszczenie w

dokumencie HTML grafiki in-line, tzn. jako element
bieżącego wiersza. Nazwa pliku zawierającego obrazek
podawana jest za pomocą atrybutu

SRC

(source).



IMG

src

= ”foto.gif” >



IMG

src

= ”foto.gif”

alt

= ”Tekst zastępczy”>



IMG

src

= ”foto.gif” width=”120” height=”70” >



IMG

src

= ”../images/foto.gif” >



IMG

src

= ”http://www.adres.pl/foto.gif” >

Przeglądarki akceptują jedynie grafikę zapisaną w
odpowiednim formacie. Najczęściej jest to:

Wstawianie grafiki



GIF



JPG



PNG

Sposób rozmieszczenia tekstu wokół obrazka określany jest
za pomocą atrybutu

ALIGN

znacznika

IMG

ALIGN

”top”

Wyrównanie grafiki

Do pionowego zorientowania rysunku względem wiersza
używane są następujące wartości:

Do oblewania grafiki tekstem używane są wartości left,
right:



ALIGN

= ”left” - dosunięcie obrazka do lewej i

otoczenie go tekstem z prawej strony,



ALIGN

= ”right” - odwrotnie

ALIGN

”middle”

ALIGN

”bottom”

img

src

"foto.gif

align

"middle"

> Ania na spacerze

Przykład

Odnośniki – zwane potocznie linkami - to elementy
interaktywne pozwalające na przemieszczanie się do
innego miejsca, przy czym może to być miejsce na tej samej
stronie, inna strona lub strona znajdująca się na odległym
serwerze.

Do tworzenia odnośników służy znacznik <

> (anchor –

kotwica), którego podstawowym atrybutem jest

href

(Hypertext REFerence), określający adres odnośnika:

Wstawianie odnośników

href

="index.htm"> <

img

src

1.gif

border

"> </

Jeśli chcemy, aby elementem interaktywnym był obrazek,
po prostu wstawiamy w odpowiednim miejscu znacznik
<

IMG

href

URL

"> tekst aktywny </

Zdefiniowanie
zakładki:

Tworzenie zakładek

href

="strona.htm#R_1">Rozdział I</

Postać
dnośnika:

name

="R_1"></

Znaczniki <

umożliwiają tworzenia
zakładek, czyli miejsc
znajdujących się na tej
samej stronie, do których
może nastąpić przeskok
hipertekstowy.

href

="strona.htm#R_1">

Rozdział I </

href

="strona.htm#R_2">

Rozdział II </

..............................................

name

="R_1"></

><h2>Rozdział

I</h2>

..............................................

name

="R_2"></

><h2>Rozdział

II</h2>

Tabele

języka HTML są ważnym narzędziem służącym do

kształtowania wyglądu strony; umożliwiają poprawne
rozmieszczenie na stronie elementów, takich jak tekst,
formularze czy grafika. Kod przykładowej tabeli wygląda
następująco:

Tabele

table

border

width

"100%

cellspacing

"10

align

"center

"><

width

"40

...

> <

...

></

...

> <

...

></

table

Każdy wiersz tabeli określony jest parą znaczników <

> i

> (table row). W wierszach, za pomocą znaczników <

i </

> umieszcza się komórki

z danymi (table data), np.: <

img

src

"obrazek.gif

"></

Szerokość kolumny tabelki zostaje dopasowana do
szerokości najszerszej komórki w danej kolumnie, przy
czym tabela ma tyle kolumn, ile komórek znajduje się w
najdłuższym wierszu.



Obramowanie tabeli



table

border

>...</

table



Szerokość i wysokość tabeli



table

width

"600

height

"300

>...</

table



Kolor tła



table

bgcolor

"yellow

>...</

table



Odstęp między komórkami tabeli



table

cellspacing

>...</

table



Odstęp między zawartością komórki a jej krawędzią



table

cellpadding

>...</

table



Wyrównanie tabeli na stronie



table

align

"center

>...</

table

Formatowanie tabel

Rozpinanie komórek

Do rozpinania komórek służą dwa atrybuty znacznika <

colspan

rowspan

Wartości tych atrybutów określają odpowiednio liczbę
kolumn i liczbę wierszy, na których ma zostać rozpięta
komórka. Na przykład:

table

border bgcolor

"yellow

width

"600

rowspan

">Nr<

colspan

">Pomiary</

>Seria 1<

>Seria 2</

>1<

>123<

>121</

table

Nr Pomiary

Seria 1

Seria2

123

121

Ramki

umożliwiają podzielenie okna przeglądarki na

mniejsze podokna
i wyświetlenie w każdym z nich osobnej strony WWW. Aby
zdefiniować układ ramek należy utworzyć nowy typ
dokumentu HTML zwany

FRAMESET

Tworzenie ramek

W takim dokumencie sekcja

body

zastąpiona jest sekcją

frameset

z odpowiednim atrybutem -

rows

lub

cols

, w zależności od

tego czy ramka ma być pozioma czy pionowa.

Następnie za pomocą polecenia

frame

z parametrem

src

podajemy nazwę strony do wstawienia.

Starsze przeglądarki (np. Lynx) w przypadku dokumentów

frameset

nie wyświetlają zwykle żadnej treści. Z tego

względu w takich dokumentach należy umieścić sekcję

noframes

zawierającą alternatywną postać strony, lub

odnośnik do wersji strony przeznaczonej dla przeglądarek
tekstowych.

Znaczniki

frameset

można zagnieżdżać, tworząc

rozbudowane układy.

Zagnieżdżanie ramek

html

head

title

>Tytuł strony</

title

></

head

frameset

rows

"100,*

border

frame

src

"str1.htm

name

"up

" >

frameset

cols

"30%,*

frame

src

"str2.htm

name

"menu

" >

frame

src

"str3.htm

name

"main

" >

frameset

html

Domyślnie dokument, do którego prowadzi łącze, zostaje
wyświetlony w tym samym oknie co łącze. Jednak często
łącze znajdujące się w jednej ramce powinno otwierać
stronę w innej ramce należącej do układu.

Aby wyświetlić nową stronę w danej ramce, po pierwsze
należy przypisać tej ramce nazwę za pomocą atrybutu

name

w znaczniku <

frame

Ramki docelowe

frame

src

default.htm

name

"main

href

"nowa.htm