Pierwsza strona internetowa

Pierwsza strona internetowa

W poprzednim artykule dowiedziałeś się dlaczego warto uczyć się tworzenia stron i wiesz już także, że jest to dość proste zagadnienie. W tym wpisie chciałbym, żebyś przekonał się o tym na własnej skórze. Zaczniemy od fundamentalnych zagadnień i w miarę jak Twoja wiedza będzie rosła będziemy przechodzić do kolejnych bardziej szczegółowych tematów. Więc bez zbędnych wstępów zaczynajmy.

Jak zbudowana jest strona internetowa?

Na początku musisz dowiedzieć się jak zbudowana jest każda strona. Strona www to nic innego jak zestaw plików. Dokładnie takich samych jak te w katalogach na dysku Twojego komputera. Jakiego rodzaju są to pliki? W większości zwykłe pliki tekstowe z tą różnicą, że mają specyficzne rozszerzenia. Będą to w szczególności pliki z rozszerzeniem .html czyli pliki tekstowe zawierające w sobie kod html opisujący strukturę strony, a także pliki .css czyli pliki tekstowe zawierające w sobie opis wizualny strony. Oprócz tego w skład strony wchodzą pliki graficzne czyli zawierające elementy wizualne strony takie jak tła oraz inne elementy designu – menu, logo itp. Pliki graficzne, z których możemy korzystać to przeważnie te z rozszerzeniami: .gif, .png oraz .jpg. Rodzaje plików graficznych różnią się od siebie wieloma czynnikami tj. kompresją, liczbą możliwych kolorów itp. i bardzo ważne jest żeby odpowiednich typów plików używać w odpowiednich miejscach i przypadkach dlatego napiszę osobny artykuł na ten temat.

Z czego składa się plik HTML?

Dziś zajmiemy się podstawowym budulcem strony czyli plikami .html, a w szczególności plikiem index.html, który w większości przypadków jest punktem wyjścia, aby obejrzeć stronę w przeglądarce. Plik index.html jest w sposób szczególny traktowany przez przeglądarki. Jeśli przeglądarka trafi na ten plik na serwerze to traktuje go jako domyślny i w pierwszej kolejności otwiera właśnie jego. Dlatego właśnie zaczniemy od stworzenia tego pliku.

Zanim jednak przejdziemy do pisania pierwszej strony musimy mieć do tego odpowiednie narzędzie. Jako, że będziemy tworzyć pliki tekstowe to do ich pisania na początek wystarczy nam zwykły Notatnik – taki sam w jakim piszę ten artykuł. Niestety Notatnik, który normalnie jest w Windowsie nie nadaje się do tego zbyt dobrze. Jeśli używasz Windowsa to polecam, abyś w tej chwili ściągnął sobie program Notepad2. Można go zapisać na pulpicie i uruchamiać bez instalacji więc jest to bardzo wygodne. Jeśli natomiast korzystasz z Maca to myślę, że najlepszym wyborem będzie TextMate.

Jest oczywiście wiele tego typu programów do wyboru i każdy z nich ma swoje wady i zalety, ale żeby nie przedłużać to zaczniemy od najprostszych rozwiązań. w innym artykule opiszę, programy do edycji plików stron z zaznaczeniem, w których przypadkach, z którego najlepiej skorzystać. Jeśli masz już na swoim komputerze program Notepad2 to możesz go otworzyć. Na pulpicie utwórz sobie katalog o nazwie np. „mojastrona” i zapisz w nim za pomocą notatnika pusty plik o nazwie index.html. Jeśli teraz wejdziesz do tego katalogu to zobaczysz, że jako ikonka pliku pojawi się ikona przeglądarki której używasz. Oznacza to, że ten plik jest już widziany przez Twój komputer jako strona www. Gratulację właśnie stworzyłeś swoją pierwszą stronę 🙂

Oczywiście jeśli otworzysz ten plik przez kliknięcie na niego dwa razy to w przeglądarce zobaczysz puste okno – nic dziwnego jeśli nic jeszcze tam nie umieściliśmy. Wejdź więc ponownie do notatnika i wklej poniższy przykładowy kod do pliku index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
 <head>
  <title>Moja strona internetowa</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 </head>
 <body>
 </body>
</html>

Zapisz plik i odśwież przeglądarkę. Wbrew pozorom nic się nie zmieniło, ale jeśli spojrzysz na górną belkę przeglądarki to zobaczysz tam tytuł strony – „Moja strona internetowa”. Dokładnie ten sam, który został umieszczony w pliku index.html między tagami <title></title>. Jeśli te znaczki w tej chwili nic Ci nie mówią to nic się nie martw. W miarę czasu wszystko się wyjaśni. Na razie zobaczmy po kolei z czego składa się nasz plik index.html.

Co to są tagi?

Każdy dokument strony internetowej składa się z tzw. tagów. Są to znaczniki, które mówią przeglądarce z jakim elementem ma w danym miejscu do czynienia. Większość tagów ma swój początek i koniec. Wygląda to w taki sposób: <tag>zawartość tagu</tag> czyli:

  1. nazwa tagu w nawiasie ostrokątnym (plus ewentualne parametry jego działania o czym niżej)
  2. zawartość tagu
  3. koniec tagu czyli taka sama nazwa tagu z tą różnicą, że poprzedzona znakiem slash (/)

Kiedy przeglądarka napotka na swojej drodze nawias ostrokątny to wie, że musi potraktować to co się w nim znajduje jako rozpoczynający się tag. Jeśli trafi na dokładnie taki sam znacznik tylko zawierający przed nazwą slash (/) to wie, że jest to koniec tego tagu i musi wyłączyć jego działanie.

Każdy znacznik ma więc swój początek i koniec. Przykład: <html> początek kodu html, </html> koniec kodu html. Są pewne wyjątki od tej reguły – niektóre tagi nie mają w ogóle zawartości o czym za chwilę. Każdy z tagów ma też ściśle określoną funkcję. Przykład: <b>pogrubienie</b>. W tym przypadku przeglądarka wie, że po napotkaniu <b> musi przełączyć wyświetlanie na tekst pogrubiony, a gdy napotka </b> musi wyłączyć pogrubianie. W praktyce wygląda to tak, że cały tekst zawarty między <b>, a </b> będzie pogrubiony. Cały plik html składa się właśnie z takich prostych znaczników. Jak widzisz nie ma tu więc, żadnych skomplikowany algorytmów, obliczeń itp.

Zacznijmy więc analizę pliku, który właśnie utworzyliśmy

Pierwsza linijka rozpoczynająca się od <!DOCTYPE to tzw. typ dokumentu. Jest to specjalny znacznik, który mówi przeglądarce z jakim rodzajem pliku ma do czynienia. Jako, że nasz plik jest zwykłym plikiem tekstowym to przeglądarka sama nie bardzo jest w stanie domyślić się co dokładnie jej zapisaliśmy w naszym pliku. Musimy ją więc poinformować co będzie w dalszej części dokumentu. Na początku nie widzę większego sensu, aby dokładnie tłumaczyć ten tag. Po prostu w tym momencie załóżmy, że ma on tam być w takiej postaci w jakiej jest. Przyjdzie odpowiednia pora, aby dowiedzieć się co tam jest zapisane. Nie jest to natomiast wiedza niezbędna by zbudować działającą stronę.

W drugiej linijce rozpoczyna się wreszcie nasza strona. Tag <html> wraz z parametrami jest głównym korzeniem strony, z którego będą wychodzić kolejne elementy. Jak widzisz tag oprócz nazwy może zawierać tzw. parametry czyli pewne właściwości, które wpisujemy po nazwie w postaci parametr=”wartość parametru”. Przykład z życia: wysokość=”400m” czyli wysokość wynosi 400 metrów. W przypadku tagu <html> nie musisz na razie wiedzieć co dokładnie mówią te parametry, które zapisaliśmy w naszym pliku poza tym, że informują one przeglądarkę o tzw. przestrzeni nazw i języku w jakim jest zapisana strona.

Bardzo ważne natomiast jest to, że jeden tag może zawierać w sobie inne tagi. Tak jest w przypadku tagu <html>, który w istocie zawiera w sobie wszystkie inne tagi. Zauważ, że tag <html> kończy się na samym dole pliku czyli obejmuje on całą stronę. Możesz sobie wyobrazić go jako korzeń drzewa, z którego później wychodzą kolejne gałęzie. Wszystko co znajduje się między otwarciem i zamknięciem tagu jest gałęzią w stosunku do tego tagu. Najlepiej chyba zilustrować to na obrazku.

Jak więc widzisz mamy tag <html>, który zawiera w sobie dwa kolejne tagi <head> oraz <body>. Te dwa tagi dzielą całą stroną na dwie części. Pierwszą zawierającą tzw. nagłówek (z ang. head), który jest źródłem informacji dla przeglądarki i drugi zawierający ciało dokumenty (z ang. body) czyli to wszystko co widzimy po otwarciu strony. Większość czasu przy budowie strony poświęca się na budowanie zawartości tagu <body>.

Jak widzisz w tagu <head> czyli w nagłówku strony zawarliśmy kolejny tag <title>, który mówi przeglądarce jaki tytuł ma strona – to ten tekst wyświetlany na górnym pasku przeglądarki oraz drugi tag <meta>, który w tym przypadku mówi przeglądarce między innymi jakiego kodowania znaków użyliśmy w dokumencie. Kodowanie znaków oraz znaczniki <meta> to temat na osobny artykuł więc w tej chwili to pominiemy. Zauważ natomiast, że <meta> jest przykładem tagu, który nie ma zawartości więc nie ma też początku i końca tylko po otwarciu od razu jest zamykany w taki sposób <meta />. Tego typu tag nie może więc już zawierać w sobie żadnych innych elementów strony.

Całość strony w postaci drzewa wygląda więc tak:

Skomplikujmy troszeczkę cały projekt. Wklej w pliku index.html zamiast poprzedniego kodu ten poniżej:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
 <head>
  <title>Moja strona internetowa</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <p>Moja pierwsza strona</p>
 </body>
</html>

Zapisz i odśwież stronę. Jak widzisz pojawił się napis „Moja pierwsza strona”. W tagu <body> umieściliśmy kolejny tag. Tym razem jest to <p> czyli akapit (z ang. paragraph), który wskazuje przeglądarce, aby jego zawartość wyświetlić jako akapit na stronie.

Drzewo dokumentu wygląda teraz tak:

Najważniejsze w tej lekcji jest to, aby zrozumieć jak za pomocą tagów budujemy strukturę strony w postaci drzewa. Otwarcie tagu powoduje „wyrastanie gałęzi”, na której mogą powstać kolejne gałęzie i tak w nieskończoność. Zauważ także, że w kodzie powstanie gałęzi jest wyraźnie zaznaczone poprzez wcięcie od lewej strony dokumentu. Jeden poziom wcięcia w kodzie to jeden poziom niżej w strukturze drzewa strony. Polecam zawsze używać tego typu wcięć, aby kod był przejrzysty i łatwy do przeczytania.

Niestety nie wiem czy udało mi się wyjaśnić temat w wystarczająco zrozumiały sposób. Myślę jednak, że jeśli spojrzysz na rysunki, który załączyłem oraz na kod html i porównasz jedno i drugie to szybko uzmysłowisz sobie o co chodzi. W istocie jest to jedna z najtrudniejszych rzeczy do pojęcia, więc jeśli przez to przejdziesz i dobrze zrozumiesz to reszta powinna być już prosta. Mam więc nadzieje, że ten artykuł nie zniechęcił Cię do nauki. Pamiętaj, że zawsze możesz zadać pytanie w komentarzu. Na każde z przyjemnością odpowiem więc korzystaj z okazji.

Autor: