Zaczynamy kodowanie w języku HTML

SPIS TREŚCI

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ę.
W tym przykładzie pojawia się jeden z najczęściej używanych znaczników – pogrubienie . Każdy znacznik ma swoją nazwę – jest ona najczęściej skrótem od słowa angielskiego, oznaczającego właściwość komendy. Znacznik możesz poznać po tym, że jego nazwa jest ograniczona znakami mniejszości i większości. Każdy znacznik według standardu posiada swój kod otwierający oraz zamykający – wszystko co znajduje się pomiędzy nimi jest blokiem opisanym przez ten znacznik.
W przykładzie, znacznik otwierający to <b>, a zamykający to </b>. Jak widzisz, znacznik zamykający różni się tylko jednym elementem – ukośnikiem.
Jak już zapewne się domyśliłeś, przykład da następujący efekt: Ala ma kota 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.

Wszystkie parametry należy podawać w cudzysłowach.

Oto przykład:

<p align="center">Ala ma kota</p>
Znacznik <p> oznacza paragraf. Podany tutaj parametr align określa, w jaki sposób treść ujęta w tym paragrafie będzie wyrównywana w poziomie – w tym przypadku będzie to wyrównanie do środka.

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>

Dokument HTML można bardzo łatwo poznać po tym, że na samym początku znajduje się znacznik <html>, a na jego końcu </html>. Przed  umiesza się jeszcze definicję, określającą w jakim standardzie jest napisany cały dokument – w tym przypadku jest to HTML 4.01 Transitional.

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>
  1. Definiujesz typ dokumentu – jest to HTML 4.01 Transitional.
  2. Otwierasz dokument HTML.
  3. Otwierasz nagłówek.
  4. Ustalasz tytuł dokumentu na „Ala i jej kot”.
  5. Definiujesz rodzaj kodowania tekstu w dokumencie na iso-8859-2.
  6. Opisujesz stronę – w kilku słowach, zdaniach.
  7. Wpisujesz słowa kluczowe, po których strona ma być rozpoznawana w wyszukiwarkach.
  8. Definiujesz jakiego programu użyłeś do stworzenia dokumentu.
  9. Dodajesz autora strony.
  10. Zamykasz sekcję nagłówka.
Taki opis dokumentu jest kompletny – masz wszystkie informacje, których potrzebujesz. Dokument posiada tytuł, informacje o jego zawartości, autorze i narzędziu w jakim był tworzony. Tak naprawdę większość z tych informacji jest zbędna. Najistotniejsze informacje są następujące:
  <!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>
Najważniejsze informacje to rodzaj dokumentu, jego tytuł oraz rodzaj kodowania dokumentu. Dodatkowo można też zamieścić listę słów kluczowych – pomoże to znaleźć stronę w wyszukiwarkach internetowych.

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>
  1. Otwarcie ciała dokumentu. W znaczniku zdefiniowałeś kilka dodatkowych parametrów:
    • bgcolor – kolor tła dokumentu,
    • text – kolor czcionki,
    • link – kolor linków.
  2. Wyrównujesz blok do środka.
  3. Włączasz nagłówek pierwszy (największy z cyfrą 1) oraz wpisujesz powitanie na ekranie.
  4. Zamykasz blok, który był wyrównywany do środka.
  5. Otwierasz nowy blok, którego zawartość będzie wyrównywana do lewej i prawej.
  6. Otwierasz paragraf i wypisujesz tekst. Na końcu zamykasz paragraf.
  7. Wstawiasz rysunek do dokumentu – podajesz jego ścieżkę, rozmiary oraz podpis.
  8. Zamykasz blok otwarty w linii 5.
  9. Zamykasz ciało dokumentu.
  10. 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.
  • Czy artykuł był pomocny ?
  • Tak   Nie