Notatki z HTML

Informacje ogólne

Pliki

Dokument w formacie HTML jest plikiem tekstowym.
Jego nazwa ma rozszerzenie .html lub .htm.
Można go tworzyć w dowolnym edytorze tekstu (np. w notatniku).
Domyślny dokument w danym katalogu serwera zwyczajowo nazywany jest:
index.html lub index.htm
default.html lub default.htm

Pierwszy sposób preferują najpopularniejsze chyba serwery WWW Apache, drugi serwery WWW IIS (Microsoft).

Znaczniki (tagi)

Sposób, w jaki przeglądarka interpretuje i wyświetla treść dokumentu komponuje się wplatając weń polecenia HTML jako tzw. znaczniki nazywane też tagami. Są one ujmowane parą znaków: "mniejszy niż" i "większy niż",
właśnie tak:

<TAG>

Istnieją tagi występujące pojedynczo i parami. Para tagów jest jak para nawiasów: otwierający i zamykający i ma taką samą rolę - wyodrębnia fragment dokumentu jednolity pod jakimś względem. Tag zamykający zawsze rozpoczyna się znakiem "/",
właśnie tak:

<TAG>wyodrębniony fragment</TAG>

Struktura dokumentu

Cały dokument ujęty w parę tagów <HTML>...</HTML> podzielony jest na dwie sekcje: HEAD i BODY

<HTML>
<HEAD>informacje nagłówkowe</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>

Tytuł

Wyświetlany na belce okna przeglądarki tytuł dokumentu umieszcza się w sekcji HEAD:

<HEAD>
<TITLE>Tutaj tytuł....</TITLE>
</HEAD>

Polskie litery

Umieszczenie w sekcji HEAD odpowiedniego znacznika META zapewni właściwe wyświetlanie polskich liter w przeglądarce. Preferowaną przez webmasterów (i obowiązujacą wg Polskich Norm) tabelą znaków jest standard ISO-8859-2 zgodny z tabelą Latin 2:

<META HTTP-EQUIV= "CONTENT-TYPE" CONTENT= "TEXT/HTML ;CHARSET=ISO-8859-2">

Należy pamiętać, że windowsowy notepad zapisze tekst do pliku w zbiorze WINDOWS-1250. Jeśli nie zrobisz konwersji kodów na zgodne z ISO-8859-2, właściwym znacznikiem META będzie:

<META HTTP-EQUIV= "CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=WINDOWS-1250">

Linia Pozioma

Taki znacznik spowoduje wyświetlenie poziomej linii oddzielającej:

<HR>

Koniec wiersza

Przeglądarki ignorują rzeczywisty podział na poszczególne linie zbioru tekstowego. O ile nie zostanie to inaczej wymuszone, tekst przenoszony jest do następnej linii, gdy w oknie przeglądarki zabraknie miejsca. Wymuszenie załamania linii w danym miejscu osiąga się znacznikiem:

<BR>

Tytuły rozdziałów (nagłówki)

W celu wyszczególnienia fragmentu tekstu jako np. tytułu rozdziału, podrozdziału (itd.) stosuje się pary znaczników HN, gdzie N jest numerem poziomu rozdziału. H1 jest poziomem najwyższym.

<H1>Tytuł 1-go poziomu </H1>
<H2>Tytuł 2-go poziomu </H2>
<H3>Tytuł 3-go poziomu </H3>
<H4>Tytuł 4-go poziomu </H4>

itd. do H6 włącznie.

Akapit (paragraf)

W celu wyszczególnienia fragmentu tekstu jako akapitu stosuje się pary znaczników P. Zawartość akapitu jest oddzielona większym odstępem od poprzedzającej i następującej części dokumentu.

<P>Treść akapitu </P>

Wyśrodkowanie

<CENTER> ...jakiś tekst... </CENTER>

Pogrubienie

<B> ...jakiś tekst... </B>

Pochylenie

<I> ...jakiś tekst... </I>

Podkreślenie

<U> ...jakiś tekst... </U>

Kolory

W celu zdefiniowania kolorów wybranych elementów dokumentu używa się identyfikatorów słownych lub kodów kolorów

Identyfikatory są zgodne w pewnym zakresie z anglojęzycznymi nazwami kolorów, np.:

Ale jest ich dużo (256) i trudno je spamiętać.

Drugi sposób polega na mieszaniu kolorów czerwonego, zielonego i niebieskiego (RGB). Stosuje się do tego trzy liczby z zakresu od 0 do 255 - w zapisie szesnastkowym: od 00 do FF poprzedzone znakiem #. Każda liczba oznacza poziom nasycenia jednego z kolorów składowych, np.:

#000000 oznacza RGB(0,0,0) czyli kolor czarny

#FFFFFF oznacza RGB(255,255,255) czyli kolor biały

#FF0000 oznacza RGB(255,0,0) czyli kolor czerwony

Kolor fragmentu tekstu

<FONT COLOR="GREEN"> ...jakiś tekst... </FONT>

Kolor domyślny tekstu w całym dokumencie

Ustala się przez dodanie parametru TEXT=wartość do wnętrza znacznika otwierającego BODY, w taki sposób:

<BODY TEXT="WHITE">

Kolor tła całego dokumentu

Analogicznie jak kolor tekstu dokumentu:

<BODY BGCOLOR="BLACK">

Grafika jako tło

<BODY BACKGROUND="OBRAZEK.JPG">

Grafika w dokumencie

Wstawienie grafiki do dokumentu realizuje się następująco:

<IMG SRC="OBRAZEK.GIF">

Należy pamiętać o zoptymalizowaniu formatu pliku graficznego: obrazki o niewielkiej liczbie kolorów najmniej miejsca zajmą w formacie .GIF, zaś dla bogatych palet (np. zdjęcia) odpowiedni będzie .JPG.

Obrazek z ustalonym wymiarem

<IMG SRC="OBRAZEK.GIF" WIDTH=70 HEIGHT=90>

Tabelka

cała tabelka
<TABLE> ... </TABLE>
wiersz
<TR> ... </TR>
komórka w wierszu
<TD>...tekst komórki...</TD>
grubość ramek
<TABLE BORDER=1>

Przykład

<TABLE BORDER=5>
 <TR><TD>komórka1</TD><TD>komórka2</TD></TR>
 <TR><TD>komórka3</TD><TD>komórka4</TD></TR>
</TABLE>
komórka1 komórka2
komórka3 komórka4

Inne parametry znacznika TABLE

Odległość między komórkami: CELLSPACING=...
<TABLE BORDER=5 CELLSPACING=0>
komórka1 komórka2
komórka3 komórka4
<TABLE BORDER=5 CELLSPACING=10>
komórka1 komórka2
komórka3 komórka4
Wewnętrzny margines komórek: CELLPADDING
<TABLE BORDER=5 CELLSPACING=0 CELLPADDING=10>
komórka1 komórka2
komórka3 komórka4
Szerokość tabeli: WIDTH
<TABLE BORDER=1 WIDTH=100%>
komórka1 komórka2
komórka3 komórka4
Kolor tła tabeli: BGCOLOR
<TABLE BORDER=5 CELLSPACING=0 CELLPADDING=10 BGCOLOR="lightblue">
komórka1 komórka2
komórka3 komórka4

Nagłówki kolumn

<TH>komórka1<TH>
komórka1 komórka2
komórka3 komórka4

"Łączenie" komórek: COLSPAN, ROWSPAN

<TABLE BORDER=1>
 <TR><TD COLSPAN=2>komórka1</TD>
          <TD ROWSPAN=2>komórka2</TD></TR>
 <TR><TD>komórka3</TD>
          <TD>komórka4</TD></TR>
</TABLE>
komórka1 komórka2
komórka3 komórka4

Odnośniki (linki)

Odnośnik do dokumentu index.html
<A HREF="index.html">link do index.html</A>
Przykład
link do index.html
Odnośnik do miejsca w tym samym dokumencie

Miejsce musi być opatrzone tagiem A (kotwicą) ze zdefiniowaną nazwą.

<A NAME="kotwica1"></A>

Nazwa ta posłuży jako wartość parametru HREF we właściwym linku:

<A HREF=#kotwica1>od początku</A>
Przykład
od początku