logo
close

Od czego zacząć?

8 marca 2019
webo Komentarze: 0 Kategoria: Kurs html

Do przerabiania poszczególnych lekcji tego kursu będziesz potrzebował(a) edytor tekstu, który zapisuje pliki bez informacji o formatowaniu. Najprostszym programem tego typu jest np. Notatnik, który jest obecny w każdym systemie Windows. Można co prawda pisać stronę w edytorach pozwalających na formatowanie tekstu, jednakże przy zapisie należy przypilnować aby zapisywać dokument jako plik tekstowy bez formatowania, poprzez wybranie opcji “Zapisz jako” z menu i wybranie jako formatu zapisu “Plik tekstowy” lub coś w tym stylu.

Zalecam jednak zaopatrzenie się w jeden wielu dostępnych specjalizowanych edytorów HTML, gdyż ich stosowanie upraszcza znacznie tworzenie stron. Edytory tego typu posiadają wiele funkcji mających na celu wspomaganie tworzenia stron WWW, jak:

  • automatyczna konwersja polskich znaków przy otwieraniu i zamykaniu plików (w Internecie stosowany jest powszechnie standard ISO-8859-2, zaś pod Windows standardem jest CP-1250)
  • kolorowanie składni (np. znaczniki – na niebiesko, parametry znaczników – na brązowo, wpisywany tekst – na czarno, itd.)
  • automatycznie “domykanie” wpisywanych znaczników
  • znaczniki można wstawiać z użyciem skrótów klawiszowych, jak np. [Ctrl-B] – <b></b> (to jest para znaczników służąca do “pogrubienia” tekstu)
  • typowe czynności, jak np. tworzenie szkieletu strony i wypełnianie sekcji <head>, jak również ustawianie parametrów znaczników, można wykonać z użyciem dostarczanych razem z programem kreatorów.

Dostępnych jest bardzo wiele tego typu programów, jak np. Polski “Pajączek 2000” czy HomeSite. Większość z nich znajdziesz np. na witrynie Tucows (adres jednego z Polskich mirrorów: http://tucows.icm.edu.pl).

Pierwsza strona WWW

No ale koniec tego wstępu, przechodzimy do zaprezentowania przykładowej prostej strony WWW:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Moja Pierwsza Strona WWW</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
</head>
<body>
<p>Treść Mojej Pierwszej Strony WWW</p>
</body>
</html>

Powyższy kod HTML musisz przepisać dokładnie, i następnie zapisać go w pliku z rozszerzeniem .html lub .htm. Po otwarcie tego pliku w przeglądarce powinna ukazać się następująca strona: (kliknij tutaj). Nazwę pliku możesz wybrać dowolną, jednak w Internecie przyjęło się, iż strona główna serwisu powinna nazywać się index.html. Zwróć też uwagę na wielkość znaków – większość serwerów WWW używa systemu operacyjnego Unix (bądź Linux), w których to systemach wielkość znaków w nazwach plików jest rozróżniana i pomyłka w wielkości liter w nazwie spowoduje iż serwer nie będzie mógł znaleźć podaj strony. W przypadku gdy korzystasz z serwera Microsoft IIS, domyślną nazwą strony głównej może też być Default.htm, (jest to jednak zwykle zmieniane aby można było stosować index.html).

Przejdźmy jednak do analizy przedstawionego kodu.
Jak widać, język HTML składa się z tzw. tagów (zwanych także znacznikami), które zapisywane są w nawiasach ostrych (< i >). Do każdego z tagów zwykle można podać pewne atrybuty (inaczej parametry; nie zawsze jest to konieczne, bądź możliwe). Atrybut może posiadać także przypisaną pewną wartość, bądź występować samodzielnie – wtedy określa on uaktywnienie bądź nie pewnej cechy znacznika. Większość tagów wymaga także “zamknięcia” przy użyciu taga o identycznej nazwie jak tag otwierający, jednak poprzedzonej znakiem “/”. Tagi zamykające nigdy nie posiadają parametrów. Przykładowy tag wygląda następująco:

<tag parametr1="Wartość" parametr2 parametr3=15>fragment tekstu</tag>

Nazwy tagów oraz parametrów i ich wartości mogą być pisane zarówno dużymi, jak i małymi literami – nie jest to istotne. Zalecane jest jednak pisanie ich wyłącznie małymi literami, ze względu na fakt że język XHTML (następca HTML) tego wymaga. Trzymanie się jednej wielkości znaków upraszcza także później analizę kodu strony. Wartości parametrów mogą być otoczone cudzysłowami lub apostrofami. Nie jest to wymagane gdy wartość jest pojedynczą liczbą lub słowem, ale zalecam branie wszystkich wartości w cudzysłów ze względu na fakt że kiedyś możesz zechcieć zastosować XHTML – wtedy będzie prościej. Dodatkowo w XHTML każdy parametr musi mieć przypisaną wartość (jeżeli któryś parametr nie ma wartości określonej w standardzie HTML, wtedy przypisuje się jako wartość nazwę tego parametru). Powyższy przykład po uwzględnieniu tych zaleceń powinien zatem wyglądać następująco:

<tag parametr1="Wartość" parametr2="parametr2" parametr3="15">fragment tekstu</tag>

Warto też wiedzieć że wstawianie większej ilości dodatkowych odstępów (np. spacji lub cudzysłowów) pomiędzy atrybutami nie ma znaczenia. Podobnie traktowane są też znaki nowej linii (Enter’y). Powyższy przykład może więc wyglądać też w taki sposób:

<tag parametr1="Wartość"   parametr2="parametr2" 
     parametr3="15">fragment tekstu</tag>

Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania ma znaczenie – przy jej zmianie wynikowy dokument wyświetlony przez przeglądarkę jest zwykle inny. Przy umieszczaniu tagów zamykających (czyli rozpoczynających się od “/”) należy pilnować kolejności w jakiej były otwierane, i zamykać je w odwrotnej kolejności (poczynając od najbardziej zagnieżdżonego). Chociaż przeglądarki obecnie starają się “na siłę” ignorować wszelkie pojawiające się błędy w kodzie wyświetlanej strony, to nieprzestrzeganie tej reguły może też powodować błędne wyświetlanie się strony.

Wróćmy jednak do analizy przedstawionego powyżej przykładowego kodu strony.

Pierwsza linia w powyższym kodzie zawiera znacznik <!DOCTYPE>, który określa tzw. DTD (Document Type Definition – definicja typu dokumentu). Linia ta określa m.in. której wersji języka HTML będziemy używać na stronie. Obecnie w użyciu są głównie HTML 4.01 oraz XHTML 1.0. Różnice pomiędzy tymi dwoma standardami są niewielkie – XHTML 1.0 jest to język HTML 4.01 do którego zastosowano reguły języka XML (główne zasady wymieniłem już powyżej – znaczniki i atrybuty muszą być pisane małymi literami, znaczniki muszą być pozamykane i każdy atrybut musi mieć przypisaną wartość). Dokładne omówienie różnic to jest jednak temat na osobny poradnik, dlatego tutaj będę się jedynie ograniczał do przedstawiania przykładów kodu HTML który jest także zgodny z XHTML.

DOCTYPE/DTD czyli definicja typu dokumentu

Znacznik <!DOCTYPE> znajdując się w pierwszej linii określa także dodatkowo jaką odmianę danej wersji języka chcemy zastosować – do wyboru są Strict (najbardziej restrykcyjna, która wymaga aby formatowanie wyglądu tekstu było wykonane za pomocą arkuszy styli CSS), Transitional (zawiera znaczniki określające wygląd tekstu) i Frameset (do tworzenia dokumentów z ramkami). Osobiście staram się stosować wersję Strict, gdyż oddzielenie kodu HTML od jego formatowania (style CSS) pozwala na tworzenie bardziej czytelniejszego kodu. Ponieważ jednak na razie się dopiero uczysz języka HTML, możesz stosować też wersję Transitional.

Ponieważ znaczniki i atrybuty z DTD Transitional są oznaczone jako niezalecane, w dalszej części kursu będę używał tego określenia i zachęcał będę do stosowania zamiast nich odpowiednich komend kaskadowych arkuszy stylów CSS.

Standardy HTML 4.01 i XHTML 1.0 definiują następujące DTD które można używać:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Znacznik <!DOCTYPE> można też oczywiście zapisać w jednej linii – tutaj podzieliłem go na dwie tylko po to aby ładnie się wyświetlił.

Po linii określającej DTD, pojawia się tag <html>, zaś na końcu znajduje się zamykający go tag </html>. Ta para tagów określa granice dokumentu HTML, w ramach których powinny zawrzeć się wszystkie pozostałe znaczniki (wyłączając oczywiście deklarację używanego DTD, która jest wcześniej).

Po znaczniku <html> pojawiają się znaczniki określające dwie podstawowe części dokumentu – nagłówek (tagi <head> i </head>) i tzw. ciało dokumentu (tagi <body> i </body>). W nagłówku dokumentu znajduje się para tagów pomiędzy którymi znajduje się tytuł strony (tagi <title> i </title>) – jest on zwykle wyświetlany w pasku tytułu przeglądarki. W tej części znajdują się też tzw. meta-tagi (tagi <meta>), które określają pewne parametry pracy przeglądarki przy wyświetlaniu tej strony, czy też jej zachowanie. Tutaj umieszczony jest jeden taki znacznik, określający sposób kodowania Polskich znaków w dokumencie (standard ISO-8859-2). Poszczególne typy meta-tagów zostaną dokładniej opisane w dalszej części kursu.

Właściwa część strony, która jest wyświetlana wewnątrz okna przeglądarki, czyli tzw. ciało strony, umieszczone jest pomiędzy znacznikami <body> i </body>. W powyższym przykładzie ciałem strony jest napis “Treść Mojej Pierwszej Strony WWW” umieszczony dodatkowo w znaczniku <p> (znacznik ten służy do tworzenia paragrafów tekstu. Więcej o nim będzie w kolejnych lekcjach tego kursu). Ciało strony nie musi być jednakże wyłącznie prostymi napisami – język HTML pozwala na ich formatowanie (co prawda niezbyt skomplikowane, dlatego aby umożliwić bardziej skomplikowane sposoby formatowania powstały Kaskadowe Arkusze Stylów – CSS), w ciele strony można także umieścić grafikę, tabele, i inne elementy.

Znaki specjalne w HTML

Przy wpisywaniu tekstu musisz jednakże zwrócić uwagę na fakt, iż nie wszystkie znaki można wpisać bezpośrednio, gdyż zostały one już wcześniej zarezerwowane do określonych celów w języku HTML. Znaki te jednakże można uzyskać w utworzonym dokumencie podając w tekście dokumentu odpowiednie kody postaci &nazwa;. Do najczęściej używanych należą:

  • &quot; – znak cudzysłowu “
  • &lt; – znak mniejszości <
  • &gt; – znak większości >
  • &amp; – ampersand &
  • &nbsp; – tzw. twarda (niełamalna) spacja (wyrazy połączone taką spacją pozostaną w tej samej linii przy podziale tekstu strony na wiersze)

Dostępnych jest także wiele innych znaków które można uzyskać stosując podaną metodę, można także zlecić przeglądarce wyświetlenie znaku o określonym kodzie. Pełną listę takich znaków znajdziesz w artykule Znaki specjalne HTML.

Komentarze

Komentarz

Komentując, akceptujesz Politykę prywatności