HTML podstawy
Szablon dokumentu HTML
Wszystkie stworzone przez nas strony WWW, w poprzednich wskazówkach były bardzo proste oraz niezgodne ze standardami HTML 4.01 ani XHTML 1.1. Było tak dlatego, że standardy te nakazują zastosowanie, pewnego szablonu. Każdy dokument HTML musi zawierać takie elementy jak:
- Cały plik musi być objęty znacznikami <html> i </html> ,
- Dokument powinien zostać podzielony na sekcję nagłówkową <head> i </head> oraz ciało <body> i </body> ,
- W nagłówku ( <head> </head> ) muszą znajdować się różne informacje związane z dokumentem- na przykład: tytuł, sposób kodowania znaków, informacje o autorze, opis, słowa kluczowe itd.
- Natomiast ciało dokumentu powinno zawierać treść główną strony WWW.
Każdy znak możliwy do wstawienia na klawiaturze ma przypisany tak zwany kod ASCII. Znaki pochodzące z alfabetu angielskiego mają przypisany stały kod. Ale wraz z rozwojem informatyki oraz Internetu, pojawiły się problemy z różnymi dziwnymi znakami innych języków (np. Ś). Pula kodów ASCII ograniczona jest tylko do 256 znaków, więc w jednym kraju, jakiś kod ASCII, może oznaczać inny znak niż ten sam kod w innym kraju. Aby rozwiązać taki problem wprowadzono pewne standardy. Microsoft opracował polski układ znaków w systemie Windows, który nosi nazwę „Windows-1250”. Istnieją również inne polskie układy, na przykład opracowany przez organizację normującą standard ISO, który nosi nazwę ISO8859-2. Jeśli tworzymy dokument i stosujemy układ znaków zgodny z ISO8859-2, oznacza to, że na przykład litera „ś” otrzyma kod ASCII 156. Jest to wszystko po to, żeby przeglądarka odczytująca dany dokument HTML wiedziała jakie kodowanie znaków zostało zastosowane w tym dokumencie. W przeciwnym wypadku nie będzie wiedziała czy po napotkaniu kodu ASCII o numerze 156 wyświetlić literę „ś”, gdyż jest to standard ISO8859-2, czy ma wyświetlić inny znak. Aby przeglądarka internetowa nie miała takich problemów, należy poprzez znacznik <meta> określić jakie kodowanie znaków zastosowaliśmy w dokumencie. Jeżeli tego nie zrobimy, zamiast niektórych specyficznych liter (np. ś, ż, ź, ó itd.) możemy ujrzeć tak zwane „krzaczki”.
Szablon każdego dokumentu powinien więc wyglądać następująco:
<html>
<head>
...nagłówek...
</head>
<body>
...ciało dokumentu...
</body>
</html>Wobec tego druga z naszych stron wykonanych wcześniej powinna wyglądać następująco:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lekcja 1</title>
</head>
<body>
<p align="right">To jest akapit tekstu wyrównany do prawego marginesu</p>
<p align="center">To jest akapit wyśrodkowany, czyli znajduje się w identycznej odległości od obu marginesów</p>
<p>To jest akapit tekstu wyrównany do lewego marginesu (czyli zawiera domyślne wyrównanie)</p>
</body>
</html>Umieszczanie wielu spacji w dokumencie HTML, nie wpływa na jego wygląd. Jednak w niektórych miejscach wato wstawiać więcej spacji, co spowoduje, że napisany kod będzie bardziej czytelny. Z tego względu zalecam stosowanie wcięć, są to tak zwane dodatkowe odstępy jakie stawiamy przed liniami dokumentu aby bardziej uwidocznić jego strukturę.
Jak widać po mimo rozbudowania kodu HTML, wyświetlana strona przez przeglądarkę nie uległa zmianie. Jedyną różnicą jaką można dostrzec, jest zmiana tytułu strony, wyświetlanego w zakładce. Pojawił się tam ciąg znaków jaki umieściliśmy pomiędzy znacznikami <title> i </title> , w sekcji <head> </head> dokumentu HTML.
Niektóre znaczniki HTML, mają atrybut „color” lub „bgcolor” pozwalający na określanie koloru tła, danego elementu. Jako wartości tych atrybutów, wpisujemy nazwy kolorów w języku angielskim- na przykład: biały (white), czarny (black), czerwony (red), zielony (green), niebieski (blue), żółty (yellow), szary (gray), srebny (silver) itd. Wartości jednak tych atrybutów, można podawać w bardziej uniwersalny (dokładny) sposób, stosując tak zwany standard RGB. Czyli każdy kolor składa się z trzech składowych R- czerwony (red), G- zielony (Green), B- niebieski (Blue). Natomiast nasycenie każdej ze składowych określa się liczbą od 0 do 255. Możemy więc za przykład podać kolor czarny, którego nasycenie wynosi: R:0, G:0, B:0, biały: R:255, G:255, B:255, czy czerwony: R:255, G:0, B:0. Ale można też „stworzyć” kilka tysięcy odcieni, manipulując przy wartościach- na przykład: R:0, G:123, B:87. W codziennym, życiu posługujemy się systemem dziesiętnym. W informatyce, zamiast systemu dziesiętnego mamy szesnastkowy (najbardziej popularny system liczbowy). Składa się on z 16 cyfr, a nie z 10. Cyfry od 0 do 9 są takie same, natomiast cyfra 10 jest oznaczona jako „A”, cyfra 11 jako „B” i tak do cyfry 15 („F”). Podsumowując w systemie szesnastkowym występują cyfry takie jak: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Zapisując liczby na dwóch miejscach, w przedziale od 0-255 zapisujemy je w systemie szesnastkowym od 00 do FF. Więc dla atrybutów „color” i „bgcolor” możemy określać kolory zakodowane właśnie w systemie RGB, z wykorzystaniem liczb w systemie szesnastkowym. Należy w tedy taki kod poprzedzić znakiem „#” oraz wpisać jednym ciągiem trzy liczby szesnastkowe. Na przykład: #ffffff – oznacza biały, #000000- oznacza czarny, #ff0000- czerwony, #C0C0C0- odcień szarego itd.
Podstawowe znaczniki HTML | |
Akapit | |
Znacznik | Opis |
<p> … </p> | Akapit tekstu, Atrybuty: align. Może przyjąć wartości:
|
Formatowanie tekstu | |
Znacznik | Opis |
<b> … </b> | Pogrubienie. |
<i> … </i> | Kursywa. |
<u> … </u> | Podkreślenie. |
<strike> … </strike> | Przekreślenie. |
<sub> … </sub> | Indeks dolny. |
<sup> … </sup> | Indeks górny. |
<big> … </big> | Powiększenie. |
<small> … </small> | Pomniejszenie. |
<strong> … </strong> | Mocne wyróżnienie tekstu. |
<em> … </em> | Wyróżnienie tekstu. |
<cite> … </cite> | Cytat. |
<dfn> … </dfn> | Definicja. |
<code> … </code> | Kod programu (czcionka o stałej szerokości). |
<var> … </var> | Zmienna. |
<tt> … | Tekst jak z maszyny do pisania. |
<tt> … | Tekst jak z maszyny do pisania z zachowaniem formatowania i odstępów (blok preformatowany). |
<blockquote> … </blockquote> | Długi cytat z wcięciem. |
<hx> … </hx> | Nagłówek gdzie „x” to liczba z przedziału od 1 do 6, informująca o stopniu danego nagłówka- na przykład: <h3> … </h3> , to nagłówek stopnia trzeciego. |
Inne znaczniki | |
Znacznik | Opis |
<hr /> | Wstawianie poziomej linii. Atrybuty:
|
<br /> | Przełamanie wiersza. |
<head> … </head> | Nagłówek dokumentu HTML (treść w nim zawarta nie jest wyświetlana przez przeglądarkę, wyjątkiem jest znacznik <title> </title> ). |
<body> … </body> | Ciało dokumentu. Atrybuty:
|
Znacznik <title> służy do nadania tytułu danego dokumentu, który nie jest wyświetlany wewnątrz strony WWW, lecz na zakładce czy belce tytułowej przeglądarki. Natomiast znacznik <meta> jest dość rozbudowany. Pozwala on bowiem na przekazywaniu wielu różnych informacji o danym dokumencie HTML (stronie WWW). W poprzednim przykładzie opisałem za pomocą niego sposób kodowania Polskich znaków (ś, ć, ź itd.).
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
Taki zapis oznacza, że napisany dokument HTML używa kodowania „UTF-8”.
Standardy języka XHTML, wymagają żeby wszystkie znaczniki zostały zamknięte. Na przykład<b>pogrubienie</b> . Tutaj sprawa jest prosta, bo słowo pogrubienie zostało objęte znacznikiem <b> i </b>. Co jednak zrobić, gdy używamy znacznika, który niczego nie obejmuje? Na przykład <br> czy <meta> . Otóż symbol „/”, który występuje przy zamykaniu znaczników, używamy zaraz po napisaniu danego tagu, wstawiając go na koniec znacznika. Czyli znacznik <br> w XHTML-u będzie wyglądał tak: <br /> , a <meta> tak:<meta … /> . Taki zapis jest poprawny w XHTML-u ale nie poprawny w HTML-u. My jednak będziemy stosować się do standardów XHTML-u.
