HTML – Podstawy tworzenia stron internetowych.

Damian Grabowski

Stronę WWW tworzy się podobnie jak zwykły dokument tekstowy: po otwarciu edytora HTML, należy wybrać opcję z menu: Plik/Nowy (lub File/New). Teraz można już zacząć pisanie strony. Jednak ponieważ dokument HTML nie jest całkowicie zwykłym plikiem tekstowym (zawiera hipertekst, osadzone obrazki i musi być poprawnie wyświetlany w różnych systemach operacyjnych na całym świecie), dlatego wymyślono specjalny szablon dokumentu HTML, który powinien być przestrzegany.

Podstawowe ramy każdego dokumentu HTML wyglądają tak:

 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
   <meta name="Description" content="Tu wpisz opis zawartości strony" />
   <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
   <title>Tu wpisz tytuł strony</title>
  </head>
  <body>

Tu wpisuje się treść strony

  </body>
 </html>

W powyższym kodzie źródłowym znajdują się po koleji następujące rzeczy:

  • deklaracja dokumentu
  • kodowanie dokumentu
  • opis strony czyli tego co się na niej znajduje
  • słowa kluczowe czyli najważniejsza zwroty opisujące twoją witrynę
  • tytuł strony
  • HEAD – to nagłówek dokumetnu w którym znajdują się inforamcje na temat strony
  • BODY – zawartość strony, czyli to co wyświetla się w przeglądarce.

Cała treść która znajduje się pomiędzy <head> oraz </head> (w szablonie powyżej) jest nazywana nagłówkiem dokumentu (treść nagłówkowa), natomiast wszystko pomiędzy <body> oraz </body> stanowi tzw. ciało dokumentu (treść właściwa).

WAŻNE
Plik będący stroną startową (czyli główną) musi nazywać się index.html lub index.htm.

Podstawowe znaczniki HTML

Istnieją znaczniki otwierające (np.: <b>) oraz zamykające (np.: </b>).

Pogrubienie tekstu

<b>Ten tekst zostanie wytłuszczony.</b>

Koniec lini (enter)

To jest pierwsza linia...<br />
a to jest druga linia.

Akapit

Każdy tekst który wpisujemy w treści strony, powineien się znajdować w akapicie. Służy on na do roździelenia nowego bloku tekstu, i pomaga sformatować treść na stronie. Ponadto zastępuje nam dwa znaczniki </ br></ br>

<p>Tu wpisz treść akapitu</p>

Wyrównanie treści w akapicie

<p align="left">Wyrównanie do lewe - domyślne wyrównanie</p>
<p align="right">Wyrównanie do prawej</p>
<p align="center">Wycentrowanie</p>
<p align="justify">Wyrównanie równomierne czyli justowanie</p>

Tekst pochylony – kursywa

<i>Tu wpisz tekst</i>

Tekst podkreślony

<u>Tu wpisz tekst</u>

Wielkość czcionki

<font size="n">Tu wpisz tekst</font>

W miejsce „n” podajemy wartość jaką chcemy uzyskać.

Przykłady

Wielkość – 1 xx-small

Wielkość – 2 small

Wielkość – 3 medium (domyślna)

Wielkość – 4 large

Wielkość – 5 x-large

Wielkość – 6 xx-large

Wielkość – 7 300%

Kolor czcionki

<font color="kolor">Tu wpisz tekst</font>

gdzie jako „kolor” można wpisać:

black (czarny)
white (biały)
silver (srebrny)
gray (szary)
maroon (kasztanowy)
red (czerwony)
purple (purpurowy)
fuchsia (fuksja)
green (zielony)
lime (limonowy)
olive (oliwkowy)
yellow (żółty)
navy (granatowy)
blue (niebieski)
teal (zielonomodry)
aqua (akwamaryna)

Można również używać składni koloru w systemie HEX czyli np:  #00ff00 lub #0f0f0f , gdzie kolor definiują nam warstości od 0 do 9 oraz wyżej jako a, b, c, d, e, f. Takie mieszanie liczb pozwala nam uzyskać dowolną barwę z wszystkich 16 777 216 kolorów.

Rodzaj czcionki

<font face="rodzaj">Tu wpisz tekst</font>
<font face="rodzaj1, rodzaj2, rodzaj3...">Tu wpisz tekst</font>

W miejsce „rodzaj” wpisz nazwę wybranej czcionki.

W drugim przykładzie przeglądarka internetowa najpierw spróbuje wykorzystać czcionkę „rodzaj1”, gdy nie znajdzie jej w systemie użytkownika, włączy „rodzaj2” a gdy jej nie znajdzie włączy „rodzaj3”. Warto stosować taką składnie aby przypadkiem przeglądarka nie wyświetliła nam strony inaczej niż planujemy, stosując jakąś standardową czcionkę.

WAŻNE:

Jeżeli nazwa czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy ją objąć w znaki apostrofu (np.: <font face="Verdana, 'Times New Roman', Arial">Tekst</font>).
W miejsce kropek można wpisać dalsze rodzaje czcionek, rozdzielone przecinkami (jeśli tego nie zrobimy, kropki należy pominąć).

 

Łączenie parametrów

Wszystkie powyższe parametry (atrybuty i znaczniki) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze:

<p align="center"><font size="5" color="red" face="Courier New"><b><i><u>
To jest jakiś tekst
</u></i></b></font></p>

 

Kolor tła i tekstu dla całej strony

<body bgcolor="kolor tła" text="kolor tekstu">
Tu jest właściwa treść strony
</body>

Stosując w atrybucie BODY powyższe definicje jesteśmy w stanie kolor tła i tekstu dla całej strony.

 

Wstawienie obrazka

<img src="ścieżka do pliku" alt="Tu podaj tekst alternatywny" align="ustawienie" />

SRC to ścieżka do pliku – musisz przeglądarce dokładnie wskazać gdzie w zasięgu twojego serwisu znajduje się plik.

ALT to tekst który się wyświetli gdy przeglądarka nie odnajdzie pliku.

W parametr „Align” wpisujemy „left” lub „right” – ustawia on obrazek po lewej lub po prawej stronie otaczającego go tekstu.

Pamiętaj iż IMG nie posiada znacznika zamykającego !!.

 

Wyśrodkowanie obrazka

<center><img src="ścieżka do pliku" alt="Tu podaj tekst alternatywny" /></center>

Parametr „Center” ustawi nam obrazek na środku strony.

 

Odsyłacz do strony

<a href="względna ścieżka dostępu do podstrony">Odsyłacz do podstrony</a>
<a href="adres internetowy">Odsyłacz do adresu internetowego</a>
<a href="mailto:adres poczty e-mail">Odsyłacz do maila</a>

Pierwszy przykład do odsyłacz do podstrony

Drugi do adresu internetowego

Trzeci to odsyłacz do poczty.

 

Tekst który znajduję się między atrybutami „A” będzie widoczny dla użytkownika.

Możesz również zastosować kompilacje obrazka i odsyłacza, łącząc te dwa atrybuty

<a href="Adres odsyłacza"><img src="ścieżka do obrazka" alt="Tu podaj tekst alternatywny" border="0" /></a>

 

PODSUMOWANIE

Powyższe atrybuty to podstawa przy tworzeniu stron internetowych. Nie zrobisz z nich drugiego Onetu, lecz pozwolą ci się pokazać  w internecie.