Trochę Teorii

HTML (HyperText Markup Language) w tłumaczeniu na polski ‘hipertekstowy język znaczników’. Jest podstawowym budulcem praktycznie każdej strony internetowej (a przynajmniej powinien być).

Znacznik Otwierający Znacznik Zamykający
<html> </html>
<head> </head>
<body> </body>
<p> </p>
<h1> </h1>

Język HTML jest oparty na rozmaitych znacznikach. W wieksząści porzypadków są to znaczniki podwójne (otwierający i zamykający). Wszystkie posiadają identyczną strukturę i oto kilka przykładów:

Mam nadzieję, że każdy bez problemu dostrzeże analogie w przykładach po prawej stronie ale na wszylki wypadek podsumuję. Wszystkie znaczniki HTML zawierają się między znakami ‘<‘ i ‘>’ oraz znacznik zamykający różni się od otwierającego znakiem ‘/’ przed nazwą znacznika.

Może kiedyś napiszę artykuł na temat histori powstawania HTMLa itp… Jednak to jest tuturial i jesteśmy tu z zamiarem nauczenia sie korzystania/stosowania HTML w praktyce a nie poznawania ciekawostek historycznych dlatego nie będę się bardziej rozpisywał na temat historii tego języka

Aby rozpocząć zabawę z HTML nie potrzebujemy żadnego specjalnego oprogramowania ani niewiadomo jakiej maszyny. Wystarczy przeglądarka i notatnik. Polecam poświęcić parę minut i zainstalować troche ulepszony odpowiednik windowsowego notatnika notepad2, który ma wbudowane podświetlanie składni co z pewnością ułatwi start.

Przejdzmy do praktyki – szkielet dokumentu

Więc zaczynamy… otwieramy nasz notatnik i wstawiamy następujacy kod:



   
      
   
   
       Hello World !!

Teraz zapisujemy plik w dowolnym miejscu nadając mu nazwę ‘index.html’. Na tym etapie możnaby mu nadać dowolną nazwę (cokolwiek.html) ponieważ będziemy plik otwierać ręcznie w przeglądarce. Należy jednak pamiętać, ze pliki index.html czy indexc.php (w przypadku kożystania z tego jezyka) są plikami ‘rozruchowymi’ i jeżeli chcielibyśmy naszą stronę umieścić na serwerze to musi mieć ona taką nazwę inaczej nie zadziałą ona bez bezpośredniego wywołania. Nie chciałbym się teraz za mocno zagłębiać w pojęcia serwerowe. Jest to obszerny wątek, a nie jest to temat tego artykułu 😉

Aby otworzyć ten plik wystarczy kliknąć na niego dwukrotnie myszką lub przeciągnąć do okna przeglądarki. Naszym oczom powinien ukazać się sam napis ‘Hello World !!’

Teraz pora na wyjaśnienia dlaczego widać tylko ‘Hello World !!’ a np ‘Moja pierwsza strona’ już nie. Kod który przed chwilą wkleiliśmy do notanika można by nazwać podstawowym szablonem. Zawiera on trzy podstawowe znaczniki, które muszą się znaleźć w każdej stronie (taka święta świętość):

  • <html> , </html> – otwarcie i zamknięcie dokumentu
  • <head> , </head> – otwarcie i zamknięcie nagłówka strony
  • <body> , </body> – otwarcie i zamknięcie zawartości strony

Co do pierwszego znacznika poprostu zawiera on w sobie całą strone. To jest jego jedyne zadanie poza deklaracją dokumentu tak jak znacznik wyżej (DOCTYPE), ale o nim to już w późniejszym etapie. Na tą chwile musimy po prostu pamiętać, że ma tam być i kopiować go do każdego dokumentu.

Sekcja HEAD

Sekcja HEAD czyli nagłówek zawiera elementy w większości nie dostrzegane przez zwykłego użytkownika. Zamieszcza się tu takie informacje jak kodowanie strony, autora, język czy linki do arkuszy styli CSS lub javascript. W naszym przykładowym kodzie znajduje się jeden znacznik w sekcji HEAD. Jest to znacznik <title> i jako jeden z niewielu ten akurat jest dostrzegalny przez użytkownika. Nie widać go bezpośrednio na stronie (ponieważ za to odpowiada sekcja BODY) ale nadaje on główny tytuł strony, który można zobaczyć między innymi na zakładce przeglądarki :

browser_title

Sekcja BODY

Sekcja BODY, inaczej faktyczna zawartość strony, zawiera treści przeznaczone dla użytkownika. W naszym przypadku były to tylko słowa ‘Hello World !!’ ale w prawdziwych stronach sekcja HEAD może mieć kilka set, kilka tysięcy, a nawet kilkadziesiąt tysięcy linijek kodu!!. Wszystko to po to aby zbudować odpowiedni szkielet strony, któremu następnie będzie można nadać niepowtarzalny wygląd przy użyciu CSS. Nie oszukumy się. W dzisiejszych czasam sam HTML nie wystarczy. CSS jest również ważny jednak zaczynamy od HTMLa!!. HTML bez CSS TAK!!! CSS bez HTML zdecydowane NIE!!!


Na tym momencie zakończyłbym ten etap. Co za dużo to nie zdrowo. W następnej części wejdziemy troche głębiej w sekcję BODY, w ktorej o wiele łatwiej jest śledzić rezultaty niż w sekcji HEAD, która na początek jest zbyt nieoczywista i skomplikowana. Zapraszam i dziękuję

Następna część już w krótce!!