Zbigniew Rudnicki

 

Elementarne podstawy języka HTML

 

Większość z milionów stron internetowych w serwisie zwanym WWW – World Wide Web (światowa pajęczyna) napisanych jest w języku znaczników hipertekstowych HTML (Hypertxt Markup Language).

Dokumenty napisane w tym języku mają rozszerzenia nazw .html (albo .htm) i aby były widoczne na całym świecie jako strony WWW muszą być umieszczone w odpowiednim folderze na dowolnym z milionów serwerów www czyli takich komputerów, które podłączone są na stałe do Internetu i działa na nich odpowiedni program do obsługi serwera (także nazywany serwerem www). Takie darmowe programy można znaleźć i pobrać z Internetu. Jednym z nich jest STWEB.

Programy do przeglądania Internetu (przeglądarki) jak Ms Internet Explorer, albo Netscape czy Opera (i in.) potrafią interpretować znaczniki HTML tak aby pokazać użytkownikowi eleganckie kolorowe i pełne obrazków witryny.

a) b)

Rys. 1

Rysunek 1a pokazuje przykład takiej strony w języku HTML a rysunek 1b pokazuje postać w jakiej strona będzie wyświetlona po zinterpretowaniu przez przeglądarkę.

Opis w HTML można jak wszystko skomplikować i tak robią współczesne programy a także edytor Ms Word, który wprawdzie pozwala każdy dokument zapisać w formacie HTML jednakże tworzy skomplikowany i nieoszczędny zapis, często nie pozbawiony usterek. Można jednak także tworzyć całkiem przyzwoite strony WWW możliwie najprostszymi środkami i narzędziami (jak choćby NOTATNIK w systemie Ms Windows) co właśnie w trakcie tych ćwiczeń będzie pokazane.

Jest wiele programów zwanych EDYTORAMI HTML ułatwiających tworzenie nawet zaawansowanych stron www. Programy te dzielą się na:

· edytory kodu HTML – w których użytkownk tworzy poszczególne znaczniki HTML
Przykładem jest polski darmowy program EZHTML

· edytory HTML typu WYSIWYG (What You See Is What You Get) – “widzisz to co dostaniesz ostatecznie na ekranie” w których użytkownik nie musi widzieć i znać języka HTML o opracowuje jedynie wygląd stron. Przykładem jest Ms WORD w którym każdy dokument można zapisać w formacie HTML.

1. Struktura dokumentu w języku HTML. Deklaracje "głowy"

Dokument zawiera się między znacznikami: <HTML> </HTML> i składa z "głowy" HEAD oraz "ciała" BODY:

 

"Głowa" zawiera informacje o dokumencie takie jak tytuł, autor, tematyka, słowa kluczowe, sposób kodowania liter – w przypadku pokazanym niżej użyto kodowania polskich liter stosowanego w Ms Windows co podano deklaracją:

<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=windows-1250">

 

 

2. Ciało dokumentu. Formatowanie czcionek i akapitów

W deklaracji <BODY> rozpoczynającej "ciało" dokumentu mogą być dodatkowe informacje takie jak kolor tła: BGCOLOR="#RRGGBB" gdzie RR, GG, BB to zapisany cyframi szestnastkowymi udział kolorów składowych czerwonego (RED), zielonego (GREEN) i niebieskiego (BLUE). Zgodnie z tym np. "#FFFFFF" to kolor biały, "#000000" – czarny, "#FFFFDD" – jasnożółty.

Zazwyczaj ciało dokumentu rozpoczyna się od nagłówków, których mamy do dyspozycji wiele poziomów. Najwyższy pokazano na rysunku a niższe to odpowiednio:

<H2> Nagłówek poziomu 2 </H2>

<H3> Nagłówek poziomu 3 </H3>

<H4> Nagłówek poziomu 4 </H4>

<H5> Nagłówek poziomu 5 </H5>

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

Najprostsze znaczniki do formatowania czcionek to:

<B> ten napis będzie wytłuszczony </B>

<I> ten napis będzie pochylony </I>

<U> ten napis będzie podkreśony </U>

Akapity rozpoczyna się znacznikiem <P> co daje dość duże odstępy między nimi.
Mniejszy odstęp między liniami daje zastosowanie znaku "złamania linii"
<BR>

Teraz wyrównywanie akapitów:

<center> ten akapit będzie wycentrowany </center>

<right> a ten dosunięty do prawej </right>

 

3. Listy (wykazy) wypunktowane i numerowane

Lista wypunktowana:

<UL>

<LI> treść punktu

<LI> treść punktu

. . . . . . . . . . .

<LI> treść punktu

</UL>

Lista numerowana:

<OL>

<LI> treść punktu

<LI> treść punktu

. . . . . . . . . . .

<LI> treść punktu

</OL>

4. Odsyłacze hipertekstowe do innych dokumentów

Termin "hipertekst" oznacza dokumenty zawierające wyróżnione słowa, których kliknięcie przenosi nas do innego tekstu albo w tym samym dokumencie albo w innym dokumencie na tym czy innym komputerze (będącym serwerem www). Takie słowa to odsyłacze (zwane po angielsku LINKS – łączniki).

Odsyłacz do dokumentu istniejącego w tym samym folderze:

<A HREF=” nazwa_pliku ”> Tekst odsyłacza </A>

na przykład:

<A HREF=” zadania.htm ”> Zadania z fizyki</A>

Odsyłacze dokumentów na innych komputerach (serwerach):
<A HREF=”http://nazwa_komputera/dokument”> tekst </A>

Na przykład odsyłacz do dokumentu dydak.htm na serwerze adam.imir.agh.edu.pl:

<A HREF=”http://adam.imir.agh.edu.pl/dydak.htm”> Nauczanie </A>

 

5. Grafika

Wstawianie obrazków:

<img src=”nazwa_pliku_z_obrazkiem">

IMG jest skrótem od Image (obraz),
SRC jest skrótem od Source (żródło).

Na przykład:

<img src=” kwiatek.gif">

6. Tabele

Definicja tabeli zawarta jest między znacznikami: <TABLE border = n > ... </TABLE>
gdzie n - szerokość obramowania
opis wiersza (ang.”row”) zawarty jest między znacznikami:
<TR> ... </TR>
opis komórki danych w wierszu zawarty jest między znacznikami: <TD> ... </TD>

Aby tabela zawierała linie siatki, po słowie TABLE musi wystąpić parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.

Kolor tła tabeli możemy określić parametrem BGCOLOR=”kolor” (tak jak dla dokumentu w deklaracji BODY)

Oto przykład tabeli mającej 1 wiersz i 2 kolumny:

<Table border=1 bgcolor="yellow">
<tr>
<td> Lewa <br> kolumna </td>
<td> Prawa <br> kolumna </td>
</tr>
</Table>

Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1). Przy okazji poszerzymy ramkę do 10:

<Table border=10 bgcolor="yellow" cellpadding=15>
<tr>
<td> Lewa <br> kolumna </td>
<td> Prawa <br> kolumna </td>
</tr>
</Table>

7. Podsumowanie

Sprawdź czy znasz wypunktowane niżej zagadnienia: Jeśli NIE znasz któregoś to jeszcze raz przeczytaj objasnienie w powyższym tekście a jeśli masz czas to poszerz wiadomości z Internetowego samouczka
Opracował: Dr inż. Zbigniew Rudnicki