@Szczygliś was here: Kurs projektowania WWW od podstaw. Lekcja 1

UWAGA: Efekty działania znaczników nie są pokazywane na tej stronie! >> Przykłady.zip

Niniejszym artykułem rozpoczynamy kurs nauki języka HTML. Będzie to kurs zaczynający się od absolutnych podstaw, tak aby zrozumiały go osoby, które spotykają się z tym tematem po raz pierwszy.

Prawda jest taka, że znając podstawy i wiedząc choćby w teorii jak działają i jak "od kuchni" wyglądają strony WWW można będzie w każdej chwili pójść dalej i na podstawie dalszych poradników, czy książek nauczyć się więcej. Poza tym, znajomość budowy stron WWW naprawdę przydaje się w życiu, gdyż nie raz i nie dwa każdy z Was spotka się z potrzebą zbudowania choćby prostej strony. Warto również wiedzieć jak działa wszystko to, z czego korzystamy przecież na codzień, choćby dla samej tylko własnej satysfakcji.

Język HTML

Co to jest więc ten język HTML? Technicznie rzecz ujmując, jest to skrót od "Hyper Text Markup Language", co można przetłumaczyć jako "Język oparty na hipertekstowej składni". Czym jest więc ten język? Wyobraźmy sobie najpierw czym jest dla nas nasz ojczysty język - czyli język polski. Jest to pewna forma komunikacji, sposób na porozumienie się, dogadanie się, wyrażenie tego o co nam chodzi. Jak wiemy, składa się on ze ściśle określonych reguł i słów, takich jak rzeczowniki, czasowniki, przymiotniki i tym podobne. A teraz odpowiedzmy sobie na pytanie - kiedy możemy porozumieć się z drugą osobą za pomocą polskiego języka? Oczywiście tylko wtedy, gdy ta druga osoba również potrafi mówić po polsku. Z Chińczykiem, który nie potrafi mówić po polsku już w taki sposób nie porozmawiamy. Wiemy już więc, że język to po prostu ustandaryzowana forma komunikacji oparta na wzajemnym rozumieniu danego, konkretnego języka i rozumieniu znaczenia słów i reguł jakie wchodzą w jego skład. Tym jest język.

A czym jest "składnia"? W dużym uproszczeniu można to opisać jako zbiór pewnych reguł panujących w danym języku. Np. wyobraźmy sobie, że chcemy powiedzieć komuś, że wygląda dziś lepiej niż np. wczoraj. Jak to zrobimy? W języku polskim powiemy: "Dziś wyglądasz lepiej, niż wczoraj.". Nie powiemy natomiast "Lepiej niż wyglądasz wczoraj dziś". Niby te same słowa, a jednak drugie zdanie jest bez sensu, gdyż jego składnia nie jest poprawna. Osoba, z którą będziemy chcieli się porozumieć nie zrozumie tego drugiego zdania. Więc wiemy już, że żeby porozumieć się w danym języku nie wystarczy znać słów wchodzących w jego skład, trzeba znać również jego poprawną składnię, czyli zbiór reguł i zasad określających w jaki sposób poprawnie tych słów używać.

Dokładnie tym samym jest język HTML. Jest to po prostu wymyślony język, za pomocą którego strona internetowa "rozmawia" z przeglądarką internetową. Przy czym, tak samo jak to ma miejsce w przypadku naszego polskiego języka, również i HTML posiada swoje ściśle określone słowa o odpowiednim znaczeniu oraz pewną ustaloną składnię, której trzeba się trzymać, tak aby "słowa" i "zdania" miały swój logiczny sens i mogły być zrozumiane przez "rozmówcę". Wiemy więc już teraz, że nie tylko ludzie, ale i komputery posiadają swoje własne "języki" do porozumiewania się.

Jak to działa?

Zakładam, że nie znamy ani trochę języka HTML, jak więc porozumiewamy się z odwiedzaną stroną internetową? Otóż tak jak w realnym świecie, tak i tutaj funkcjonuje instytucja "tłumacza", który to, znając oba języki - ten komputerowy i ten ludzki dokona dla nas tłumaczenia. Tym wirtualnym tłumaczem jest nasza przeglądarka internetowa. Gdy wchodzimy na daną stronę internetową, to tak naprawdę nasza przeglądarka zapytuje się komputera, na którym owa strona jest umieszczona, o to żeby ów komputer przekazał jej dokument tekstowy, w którym to dokumencie, w języku HTML opisana jest krok po kroku budowa danej strony. Przeglądarka w odpowiedzi otrzymuje ten dokument i "w locie" dokonuje jego tłumaczenia na "nasz język". Wyświetla nam stronę w przystępnej dla naszych oczu formie.

Strona internetowa to tak naprawdę nic innego jak zwykły plik tekstowy, w którym linijka po linijce opisane jest, co też takiego, krok po kroku, ma się wyświetlić w naszej przeglądarce. Jest to opisane właśnie w języku HTML. Plik ze stroną tak naprawdę składa się ze zwrotów typu "Wyświetl teraz taki i taki napis. Podkreśl go, pokoloruj na czerwono i przejdź do następnej linijki, następnie wstaw tutaj taki, czy inny obrazek" itd. Tyle tylko, że z oczywistych względów, nie jest to pisane w języku polskim, lecz właśnie w języku HTML. Nie ma tu żadnej czarnej magii, jest jedynie inny, nieznany nam jeszcze język. Zauważmy też, że wchodząc na daną stronę, zazwyczaj kończy się ona rozszerzeniem ".html", lub "htm", np. "http://www.strona.pl/dokument.html".

Dokumenty HTML

Plik "dokument.html" to nic innego jak zwykły tekstowy dokument, tyle, że napisany w innym niż nasz - języku. Spotkaliście się również zapewne z innymi rozszerzeniami niż ".html", takimi jak ".php", czy ".cgi" - są to już bardziej zaawansowane strony, których nie będę tutaj opisywać, lecz również i w tym przypadku, są to wciąż jedynie zwykłe tekstowe dokumenty. Również wchodząc np. pod adres "http://www.strona.pl/" tak naprawdę uruchamiamy zwykły tekstowy dokument o nazwie "index.html", który jest uruchamiany domyślnie w danym katalogu, jeśli nie podana jest żadna nazwa pliku w pasku adresu.

Przykładowo: wpisując w przeglądarce adres "http://www.strona.pl/katalog" tak naprawdę otwieramy plik "http://www.strona.pl/katalog/index.html", pomimo iż nazwy "index.html" w pasku nie widzimy.

Oczywiście są od tego odstępstwa, w zależności od konfiguracji serwera, ale nie będziemy sobie tym zaprzątać głowy, gdyż jest to już wyższa szkoła jazdy. Na razie zapamiętajmy - plik o nazwie "index.html" jest zawsze pierwszym domyślnie ładowanym plikiem, o ile w adresie nie podana jest żadna inna nazwa.

Tak jak napisałem wcześniej, każdy język składa się z określonych części mowy, czy zdania. W języku polskim mamy więc np. rzeczowniki, przymiotniki itd. I jeśli chcemy opisać np. kolor kredki, to używamy do tego rzeczownika połączonego z opisującym go przymiotnikiem, np. "kredka czerwona", lub "kredka niebieska". W języku HTML jest bardzo podobnie, z tym że tutaj zamiast rzeczowników występują tzw. znaczniki, a zamiast przymiotników - atrybuty określające znacznik. O ile jednak w naszym języku zdania kończymy kropką, o tyle w języku HTML kończymy je tzw. "zamknięciem znacznika". To brzmi groźnie jedynie na początku, przekonacie się za chwilę jak bardzo logiczne jest to rozwiązania.

Pierwsza strona

Od teorii czas przejść do praktyki - za chwilę stworzymy naszą pierwszą, prościutką stronę WWW. Na początek stwórzmy sobie gdzieś, np. na Pulpicie jakiś folder, np. "moja strona", następnie otwórzmy program Notatnik (lub podobny). Stwórzmy nowy, pusty dokument i zapiszmy go w naszym świeżo stworzonym folderze pod nazwą "index.html". Tutaj mała uwaga - jeśli pracujemy pod systemem Windows, to Notatnik doda nam w momencie zapisu rozszerzenie ".txt" do pliku. Aby zapisać dokument jako "index.html", a nie jako "index.html.txt" należy podczas zapisywania pliku objąć całą nazwę w cudzysłowy ("..."). Jeśli mamy już zapisany plik "index.html" to tak naprawdę mamy już swoją pierwszą stronę internetową. Warto więc byłoby teraz coś do niej wstawić.

Tak jak napisałem wcześniej, język HTML składa się ze znaczników. Co to jednak są te znaczniki? Opiszę to na najprostszym z możliwych znaczniku - na znaczniku pogrubiającym tekst.

Wyobraźmy sobie taki zapis:

 to jest pogrubiony tekst 

W powyższym przykładzie,  i  to właśnie znaczniki, a pomiędzy nimi znajduje się przykładowy tekst, który dzięki właśnie tym znacznikom zostanie wyświetlony jako pogrubiony. Gdybyśmy mieli to przetłumaczyć na język polski, to przeglądarka powyższy zapis zinterpretuje jako:

<początek pogrubiania> to jest pogrubiony tekst </koniec pogrubiania>

Jak widzimy, wszystko co znajduje się pomiędzy danymi znacznikami zostanie pogrubione. Ale..no właśnie..pomiędzy. Jak widzimy są tutaj dwa znaczniki:  i , z czego ten drugi ma w zapisie ukośnik (slash - "/"). Ten drugi znacznik to właśnie znacznik zamykający, o którym pisałem wcześniej. Musimy zapamiętać, że każdy znacznik w HTMLu musi zostać właśnie w ten sposób "zamknięty". Inaczej - jeśli go nie zamkniemy, to będzie on obowiązywał dalej.

Dwa krótkie przykłady:

 to jest pogrubiony tekst.  to nie jest pogrubiony tekst.
 to jest pogrubiony tekst. to nie jest pogrubiony tekst. (znacznik pogrubienia wciąż działa, nie został zamknięty...)

Jak widzimy, w drugiej linijce brakuje zamknięcia znacznika , więc cała linijka i kolejne następne zostaną wyświetlone jako pogrubione, aż do momentu, gdy przeglądarka napotka na swojej drodze znacznik zamykający , który powie jej, że już koniec tego pogrubiania.

Warto zaznaczyć, że nie wszystkie znaczniki w HTML trzeba zamykać, ale o tym później. Dlaczego jednak akurat  odpowiada za pogrubienie tekstu? Dlatego, że wszystkie nazwy znaczników to skróty od angielskich nazw, w naszym przypadku znacznik  to skrót od angielskiego "bold", czyli po polsku "pogrubienie". Podobnie znacznik , który odpowiada za kursywę, czyli pochylenie tekstu. Znacznik  to nic innego jak skrót od angielskiego "italic", czyli po polsku "pochylenie".

Każdy znacznik w języku HTML umieszczany jest w nawiasach ostrych <...>, znacznik zamykający podobnie, lecz z dodaniem ukośnika </...>.

Wygląda to więc zawsze tak:

<znacznik>..na tą zawartość zadziała znacznik....</znacznik>

Znaczniki można w sobie zagnieżdżać. Co to znaczy? Znaczy to, że w jednym znaczniku można zamieścić kolejny, a w nim jeszcze kolejne i kolejne. Poza tym - znaczniki po sobie "dziedziczą".

Przykład:

 To jest zwykły tekst.
 To jest tekst pochylony.
 To jest tekst pogrubiony.
 To jest tekst pochylony i pogrubiony
 

Jak widać zdanie "To jest tekst pochylony i pogrubiony" będzie zarówno pogrubione jak i pochylone, ponieważ znajduje się wewnątrz znacznika "", odpowiadającego za pochylenie, jak i również znacznika "", odpowiadającego za pogrubienie czcionki.

Znaczniki można zagnieźdzać w sobie w nieskończoność, trzeba jednak pamiętać, o odpowiednim ich zamykaniu.

Dwa przykłady:

 To jest tekst pogrubiony.
 To jest tekst pochylony i pogrubiony
 


 To jest tekst pogrubiony.
 To jest tekst pochylony i pogrubiony
 

Czym różnią się powyższe przykłady? W obu przypadkach znaczniki  i  zostały zamknięte, jednakże w przykładzie drugim zrobione zostało to w nieodpowiedniej kolejności, co jest błędem. Należy więc o tym pamiętać - najpierw zamykamy znaczniki "najbliższe", potem "dalsze", w odwrotnej kolejności w jakiej zostały one "otwarte".

Drugą rzeczą, jaką warto wiedzieć jest to, iż w przypadku nazw znaczników wielkość liter nie ma żadnego znaczenia - nie jest rozróżniana przez przeglądarki.

Przykłady:

 To jest pogrubiony tekst.
 To jest pogrubiony tekst.
 To jest pogrubiony tekst.
 To jest pogrubiony tekst.

Wszystkie cztery powyższe przykłady są poprawne i sobie równoznaczne, wielkość liter nie ma w przypadku znaczników żadnego znaczenia.

W praktyce przyjęło się jednak, aby wszystkie znaczniki pisać z małych liter.

Jesli chodzi o anglojęzyczne nazewnictwo, to bardzo często zamiast słowa znacznik spotkamy się również ze słowem "tag", które znaczy to samo. Warto o tym pamiętać. Tag = znacznik. Tagi HTML = znaczniki HTML itd.

Tworzymy pierwszy projekt

Przejdźmy teraz do naszej pierwszej strony WWW.

Na początek znowu konieczne jest trochę teorii.

Każdy dokument HTML składa się z głównego znacznika, o nazwie nie innej, jak tylko właśnie "html".

Pusty, najprostszy dokument w języku HTML wyglądać więc będzie tak:

<html>
</html>

Cały nasz dokument mieścić się więc będzie pomiędzy <html>, a </html>.

I tutaj bardzo ważna rzecz - jak napisałem wcześniej - znaczniki można w sobie zagnieżdzać. Należy jednak wiedzieć o tym w jakiej kolejności należy to robić, gdyż nie każda kolejność jest odpowiednia, a czasami nawet wręcz złe zagnieżdżenie może spowodować błędne wyświetlenie się strony.

Każdy dokument HTML ma budowę "drzewiastą". Co to znaczy? Wyobraźmy sobie drzewo. Mamy więc gruby korzeń, który jest pierwszym głównym elementem drzewa, dopiero póżniej z tego korzenia wyrasta pień, a z pnia gałęzie, z nich gałązki, potem liście - jest więc zachowana pewna hierarchia. Tak samo jest z budową dokumentów HTML. Głównym korzeniem jest tu znacznik <html></html> i to dopiero w nim będziemy zamieszczać pozostałe z zachowaniem odpowiedniej hierarchi.

Mamy więc już "korzeń" (ng. root) naszego dokumentu (znaczniki <html>), teraz czas na podzielenie go.

Głowa i ciało

Każdy dokument HTML składa się z dwóch części - z "głowy/nagłówka" (head) i z "ciała strony" (body).

W praktyce wygląda to tak:

 <html>
 <head>
 ...tutaj znajduje się nagłówek
 </head>

 <body>
 ...tutaj znajduje się ciało strony
 </body>
 </html>

Dlaczego taki podział na <head> i <body> ?

Otóż - wszystko to co znajduje się w sekcji <head> jest wysyłane do przeglądarki jako pierwsze i niejako na starcie mówi naszej przeglądarce w jaki sposób ma ona interpretować naszą stronę. W tej sekcji znajdują się między innymi informacje takie jak tytuł strony, jej opis, użyte czcionki, kodowanie znaków itp.

Właściwa strona natomiast znajduje się jedynie w sekcji <body>.

Przejdźmy teraz do konkretów, znając zarys struktury dokumentu, stwórzmy w naszym Notatniku pierwszą stronę.

W pliku "index.html", który utworzyliśmy wcześniej wpiszmy dokładnie to co poniżej:

 <html>
 <head>
 <title>Moja pierwsza strona</title>
 </head>

 <body>
 <h1>To moja pierwsza strona.</h1>
 A to pierwszy tekst. 
 A to pierwszy pogrubiony tekst.
 </body>
 </html>

Następnie zapiszcie plik, zamknijcie Notatnik, przejdźcie do folderu z zapisanym plikiem HTML i odpalcie go w przeglądarce.

Gratulacje!

Oto Wasza pierwsza, własna strona WWW!

Na chwilę obecną tyle powinno Wam wystarczyć, niebawem lekcja numer 2.

[ spis treści]

nastepna lekcja >>

UWAGA: Efekty działania znaczników nie są pokazywane na tej stronie! >> Przykłady.zip