[Strona główna/Wiedza/HTML]

Krótki opis języka HTML

Jacek Cichoń

HTML jest skrótem od Hypertext Markup Language, który można przetłumaczyć jako Hipertekstowy Język Znaczników. Słowo hipertekst oznacza "coś więcej niż tekst". Słowo znacznik występuje tutaj w znaczeniu "zakładka". Popularna nazwa tego języka to hipertekst.

Możliwości HTML: formatowanie tekstu, dołączanie grafiki, dźwięków, filmów video, możliwość odwoływania się do innych dokumentów.

Siła języka HTML polega między innymi na tym, że dokumenty tego języka zapisywane są w postaci zbiorów tekstowych, które bez trudu mogą być interpretowane przez dowolny komputer.

Do przeglądania dokumentów hipertekstowych służą tak zwane przeglądarki (ang. browser). Najpopularniejszymi dzisiaj przeglądarkami są: Microsoft Internet Explorer oraz Nestcape Navigator.

Dokument ten należy traktować jako ściągę. Jako początkową lekturę polecam książkę Elizabeth Castro pt. Po prostu HTML 3.2 wydaną przez wydawnictwo Helion w roku 1996. Jako znacznie bardziej zawansowaną lekturę polecam książkę Jima Heid'a pt. Sekrety HTML i publikacji WWW (wydawnictwo PLJ, Warszawa 1998).

SPIS TREŚCI

  1. Wykład I
    1. Znaczniki
    2. Struktura dokumentu
    3. Adresy i odwołania
    4. Hiperlącza i kotwice
    5. Przykład dokumentu
  2. Wyklad II
    1. Nagłówki
    2. Formatowanie tekstu

WYKŁAD I

W części tej omówimy pojęcie znacznika, strukturę najprostszego dokumentu, pojęcie adresu URL, połączenia i odnośnika oraz podamy przykład prostego dokumentu HTML ze znacznikami i wewnętrznymi połączeniami.

1.1. Znaczniki

Podstawowym pojęciem języka HTLM jest znacznik. Traktować je można jako pojęcie pierwotne. Istnieją dwa rodzaje znaczników: pojedynczy i podwójny. W najprostszej postaci znacznik pojedynczy ma postać
<nazwa>
zaś podwójny
Znaczniki mogą mieć atrybuty, które służą do sprecyzowania jego działania. Na przykład działanie znacznika <H1>, który służy do wyróżniania nagłówka w tekście może zostać sprecyzowane w następujący sposób <H1 ALIGN="center">. To sprecyzowanie znacznika służy do umieszczenia nagłówka po środku ekranu. Atrybut ALIGN może przyjmować wartości "left", "rigth" i "center". Domyślną wartością tego parametru jest "left".

Oto kilka przykładów znaczników:

  1. Nagłówki: <Hn> Tytuł </Hn>, gdzie n jest liczbą ze zbioru {1,2,3,4,5,6} określającą poziom nagłówka. Wersja rozbudowana tego znacznika: <Hn ALIGN={left,center,right}>
  2. Początek akapitu: <P>
  3. Nowa linia: <BR>
  4. Linia (kreska) pozioma : <HR>
Znaczniki mogą być zagłębiane, lecz w ten sposób, aby zakresy działania znaczników nie krzyżowały się. Na przykład:
<H1> Ala <EM> ma </EM> kota </H1>
jest poprawnym fragmentem tekstu HTML, zaś
<H1> Ala <EM> ma </H1> kota </EM>
jest niepoprawnym fragmentem tekstu (znaczenie znaczników <H1>, i <EM> zostanie wkrótce wyjaśnione).

1.2. STRUKTURA DOKUMENTU

Oto postać najprostszego dokumentu HTML:

<HTML>
 <HEAD>
  <TITLE> Tytuł </TITLE>
 </HEAD>
 <BODY>
  Treść dokumentu
 </BODY>
</HTML>

Cały dokument musi byc objęty zasięgiem działania znacznika <HTML>. Wyróżnione są w nim dwie sekcje:


W nagłówku znajdować się musi znacznik <TITLE> służący do nadania tytułu dokumentowi. Tytuł ten pojawia w nagłówku okiem przeglądarek oraz dodawany jest on do list tzw. "bookmarks" użytkownika. Przykład trochę bardziej rozbudowanego dokumentu znajduje się trochę dalej.

1.3. Adresy i odwołania

Kolejnym ważnym pojęciem języka HTML jest "adres URL". URL jest to skrót od "Uniform Resource Locator", czyli "Jednolity Wskaźnik Zasobów". Zasobem w HTML nazywamy dowolny obiekt który dostępny jest przeglądarkom HTML (!). Oto przykład: adres
http://www.promat.com.pl/CICHON/russel.html
wskazuje na dokument o nazwie russel.htm znajdujący się w kartotece o nazwie CICHON na serwerze o nazwie www.promat.com.pl. Początek nazwy - http:// - jest nazwą tak zwanego protokołu służącego do transmisji zasobu.
Oto lista kilku popularnych protokołów:
http:// Hypertex Transfer Protocol 
https://  protokół bezpiecznych stron internetowych
ftp  File Transer Protocol, protokół służący do transmisji plików
gopher://  protokół starych przeglądarek 
news protokół grup dyskusyjnych
mailto  protokół poczty elektronicznej

1.4. Hiperłącze i kotwice

Hiperłączem nazywamy znacznik postaci
<A HREF="adres URL"> tekst </A>
służący do określenia połączenia do zasobu HTML. Jeśli zasób znajduje się w tym samym katalogu co i dokument, to jako adres URL wystarczy podać jego nazwę. Jeśli zasób znajduje się na tym samym serwerze co dokument, to jako adres URL wystarczy podać względną ścieżkę do niego. Jeśli zasób znajduje się na innym serwerze to musisz podać przynajmiej nazwę tego serwera.

UWAGI:

  1. Bazowy adres może być modyfikowany za pomocą znacznika <BASE> umieszczonego w nagłówku dokumentu
  2. staraj się podawać możliwie szczegółowy adres hiperłącza
Kotwica nazywamy znacznik postaci
<A NAME="nazwa">
Służy on do wyróżnienia w dokumencie HTML miejsca do którego możemy (ale nie musimy) odwoływać się w hieperłączach. Hiperłącze z wykorzystaniem odnośnika wygląda następująco:
<A HREF="adres URL#nazwa"> tekst </A>
gdzie nazwa jest nazwą kotwicy z dokumentu

1.5. Przykład dokumentu

W przykładzie tym wykorzystamy nieomówione do tej pory znaczniki służące do tworzenia list uporządkowanych: znacznik <OL> ... </OL> oraz znacznik <LI> .. </LI> (OL = Ordered List; LI = List Item). 

<HTML>
<HEAD>
<TITLE> Niewymiernosc pierwiastka z dwóch </TITLE>
</HEAD>
<BODY>
<H1> Różne dowody niewymierności pierwiastka z dwóch </H1>
W artykule tym omówimy dwa różne dowody niewymiernosci
pierwiastka z liczby dwa - jednego z najważniejszych
rozumowań matematyki ....
<OL>
    <LI> <A HREF="#Klasyka"> Dowód klasyczny < /A>
    <LI> <A HREF="#Easterman"> Dowod Eastermana </A>
</OL>
<H2><A NAME="Klasyka"></A> Klasyczne rozumowanie </H2>
Załóżmy, że sqrt(2) jest liczbą wymierną. Niech sqrt(2) = p/q,
gdzie p i q są wzajemnie pierwszymi liczbami naturalnymi.
Wtedy 2*q*q=p*p, więc p=2n dla pewnego naturalnego n, więc
q*q = 2*n, więc q jest liczbą parzystą, co jest niemożliwe.

<H2><A NAME="Easterman"></A> Dowód Eastermana </H2>
Załóżmy, jak poprzednio, że sqrt(2) jest liczbą wymierną.
Niech k = min{n: n*sqrt(2) jest liczbą naturalną}. Rozważmy
liczbę l = k*sqrt(2) - k. Wtedy 0<l<k i l*sqrt(2) jest liczbą
naturalną, co jest niemożliwe.
</BODY>
</HTML>

W dokumencie występują dwie kotwice: "Klasyka" oraz "Easterman" oraz dwa hiperłącza: <A HREF="#Klasyka"> oraz <A HREF="#Easterman">. W hiperłączach tych nie podajemy protokółu, serwera ani nazwy dokumentu, gdyż są to hiperłącza do kotwic z tego dokumentu. Zwróć uwagę na znak # występujący w tych hiperłączach. Gdyby go nie było, to przeglądarka interpretowała by to połacznie inaczej: jako hiperłącze do dokumentu o nazwie "Klasyka" (bądź "Easterman") z katalogu w którym znajduje się dokument. 

WYKŁAD II

W części tej omówimy podstawowe środki formatowania dokumentów.

Nagłówki

Istnieje sześć rodzajów nagłówków: H1, H2, H3, H4, H5, H6. Oto przykłady stosowania znacznika:
Kod  Wynik 
<H1> Nagłówek 1 </H1> 

Nagłówek 1 
<H2> Nagłówek 2 </H1> 

Nagłówek 2 
<H3> Nagłówek 3 </H1> 

Nagłówek 3 
<H4> Nagłówek 4 </H1> 

Nagłówek 4 
<H5> Nagłówek 5 </H1> 
Nagłówek 5 
<H6> Nagłówek 6 </H1> 
Nagłówek 6 

Formatowanie tekstu

Uwaga: do ustalania kolorów stosuje się konwencji RGB (RRGGBB) . R oznacza intensywnosc koloru czrwonego, G- zielonego, B - niebieskiego. Tak więc #000000 oznacza kolor czarny (***), #FFFFFF - kolor biały (***), #FF0000 - intensywny czerwony (***), #0000FF - intensywny niebieski (***), #FFFF00 - intensywny żółty (***), #00FFFF - intensywny błekitny (***).

Do okreslenia rozmiaru czcionki używamy wartości +i lub -i. Służy to do względnej zmiany rozmiaru czcionki w stosunku do rozmiaru bazowego.

Listy

Istnieją dwa podstawowe typu list: uporządkowane i nieuporządkowane. Listy uporządkowane budujemy następująco (po lewej stronie jest ?ródło, po prawej stronie widzimy efekt):
Kod  Wynik 
<OL>
  <LI> Treść elementu nr 1 </LI>
  ....
  <LI> Treść elementu nr n </LI>
</OL>
  1. Treść elementu nr 1 
  2. .... 
  3. Treść elementu nr n 

Listy nieuporządkowane budujemy zaś następująco (po lewej stronie jest ?ródło, po prawej stronie widzimy efekt):
Kod  Wynik 
<UL>
  <LI> Treść elementu nr 1 </LI>
  ....
  <LI> Treść elementu nr n </LI>
</UL>
  • Treść elementu nr 1 
  • .... 
  • Treść elementu nr n 

Trzeci rodzaj list służy do budowania listy definicji:
Kod  Wynik 
<DL>
  <DT> sinus </DT>
  <DD> podstawowa funkcja trygonometryczna </DD>
  <DT> ....</DT>
  <DD> ......... .......... ......... ......... ....... </DD>
  <DT> całka </DT>
  <DD> operator odwrotny do pochodnej </DD>
</DL>
sinus 
podstawowa funkcja trygonometryczna 
... 
......... .......... ......... ......... ....... 
całka 
operator odwrotny do pochodnej 

C.D.N. 

[Strona główna]