SPIS TREŚCI
- Jak wygląda znacznik?
- Parametry znaczników
- Jak poprawnie kodować?
- Struktura dokumentu
- Nagłówek dokumentu
- Ciało dokumentu (body)
- HTML i polskie znaki
Jak wygląda znacznik?
Jeśli już wiesz czym jest HTML i czego możesz się po nim spodziewać, czas najwyższy dowiedzieć się jak on wygląda. Oto przykład:
<b>Ala ma kota</b> a kot ma Alę.
Parametry znaczników
Każdy znacznik może posiadać jeden lub więcej parametrów, które umożliwiają zdefiniowanie dodatkowych właściwości.
Oto przykład:
<p align="center">Ala ma kota</p>
Jak poprawnie kodować?
Każdym językiem rządzą pewne zasady. Nie inaczej jest z HTML’em.
-
-
Każdy znacznik musi posiadać otwarcie i zamknięcie. Wyjątkami od tej reguły są znaczniki nie posiadające zawartości.WAŻNE! Język XML wymaga zamykania wszystkich znaczników.
-
W przypadku zagnieżdżania znaczników muszą być one zamykane w odwrotnej kolejności niż były otwierane. Elementy HTML możemy zagnieżdżać. Oznacza to, że jeden element HTML może zawierać inny element.
<p><b>Witaj!</b></p>
- Wszystkie parametry znaczników należy podawać w cudzysłowach.
<p align="left">Witaj!</p>
-
Oprócz tego, standard definiuje jakie znaczniki mogą być wzajemnie zagnieżdżane – po szczegóły sięgnij do specyfikacji technicznej.
Struktura dokumentu
Najłatwiej omówić strukturę dokumentu na przykładzie:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> <title>Tytuł strony</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> </head> <body>
To jest treść dokumentu </body> </html>
Idąc dalej zauważysz podział dokumentu na dwie części:
- Nagłówek <head>
- Ciało dokumentu <body>
Nagłówek zawiera podstawowe informacje na temat dokumentu, tj. tytuł, standard kodowania tekstu, wersję językową, informacje o autorze itp. Oprócz tego możesz tam umieszczać style CSS, o których więcej w kolejnych rozdziałach.
W ciele dokumentu znajduje się cała zawartość, którą później zobaczysz na ekranie. To właśnie tutaj umieszczasz tekst właściwy, grafikę, dźwięki, animacje – wszystko to z użyciem odpowiednich znaczników.
Nagłówek dokumentu
Oto przykładowy nagłówek dokumentu HTML. Przeanalizuj go linia po linii.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ala i jej kot</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"> <meta name="description" content="To jest strona domowa Ali i kota"> <meta name="keywords" content="strona domowa, ala, kot"> <meta name="generator" content="Macromedia HomeSite 5.0"> <meta name="author" content="Ala Kowalski"> </head>
- Definiujesz typ dokumentu – jest to HTML 4.01 Transitional.
- Otwierasz dokument HTML.
- Otwierasz nagłówek.
- Ustalasz tytuł dokumentu na „Ala i jej kot”.
- Definiujesz rodzaj kodowania tekstu w dokumencie na iso-8859-2.
- Opisujesz stronę – w kilku słowach, zdaniach.
- Wpisujesz słowa kluczowe, po których strona ma być rozpoznawana w wyszukiwarkach.
- Definiujesz jakiego programu użyłeś do stworzenia dokumentu.
- Dodajesz autora strony.
- Zamykasz sekcję nagłówka.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ala i jej kot</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"> <meta name="keywords" content="strona domowa, ala, kot"> </head>
Ciało dokumentu (body)
W ciele (czyli tzw. body) dokumentu znajdują się wszystkie informacje, które zostaną wyświetlone na ekranie odwiedzającego. Przeanalizuj ten fragment.
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF"> <div align="center"> <h1>Witam na mojej stronie</h1> </div> <div> <p>Znajdziesz tutaj bardzo dużo informacji o Mnie i moim kotku...</p> <img src="gfx/kotek.jpg" width="200" height="200" alt="Kotek" border="0"> </div> </body> </html>
- Otwarcie ciała dokumentu. W znaczniku zdefiniowałeś kilka dodatkowych parametrów:
- bgcolor – kolor tła dokumentu,
- text – kolor czcionki,
- link – kolor linków.
- Wyrównujesz blok do środka.
- Włączasz nagłówek pierwszy (największy z cyfrą 1) oraz wpisujesz powitanie na ekranie.
- Zamykasz blok, który był wyrównywany do środka.
- Otwierasz nowy blok, którego zawartość będzie wyrównywana do lewej i prawej.
- Otwierasz paragraf i wypisujesz tekst. Na końcu zamykasz paragraf.
- Wstawiasz rysunek do dokumentu – podajesz jego ścieżkę, rozmiary oraz podpis.
- Zamykasz blok otwarty w linii 5.
- Zamykasz ciało dokumentu.
- Zamykasz dokument HTML.
Jest to dosyć prosty dokument. W następnych rozdziałach dowiesz się więcej na temat różnych znaczników, tabel i stylów. Dzięki nim będziesz mógł tworzyć o wiele bardziej zaawansowane dokumenty.
HTML i polskie znaki
Prawdą jest, że nie ma jednego standardu zapisu polskich znaków na stronach WWW. Istnieją trzy metody kodowania tekstu:
- iso-8859-2 – jest to oficjalna norma ISO (International Standarization Organization), określająca kody liter alfabetów krajów Europy Środkowej (w tym Polski),
- CP-1250 – standard stworzony przez ANSI (American National Standards Institute). Jest on stosowany w systemach operacyjnych firmy Microsoft,
- UTF – (Unicode Transformation Formats) jest uniwersalnym formatem, opisującym znaki wszystkich alfabetów (w tym momencie zdefiniowano ponad 100 000 znaków), za pomocą unikalnego, niepowtarzalnego numeru.
Jaki standard wybrać? Jeśli korzystasz z systemu Windows możesz wybrać CP-1250. Jednakże w naszym kraju obowiązują standardy ISO, a nie ANSI. Dlatego też zdecydowana większość stron jest tworzona w iso-8859-2 i ten standard polecamy.
Większość programów to produkty amerykańskie, wobec czego nie wszystkie obsługują kodowanie iso-8859-2. Aplikacje takie jak: FrontPage, Macromedia DreamWeaver 4+, Adobe GoLive 4+ obsługują je bezproblemowo. Natomiast programy: Macromedia HomeSite lub Notatnik samodzielnie nie umożliwiają tworzenia stron w tym formacie. Problem można rozwiązać na dwa sposoby:
- stworzyć stronę np. w CP-1250, a następnie skorzystać z jednego z wielu konwerterów tekstu,
- zainstalować na swoim komputerze klawiaturę ISO.
