Nasz pierwsza strona :)

Zanim zaczniemy omawiać poszczególne znaczniki i zagłębimy się w świat HTML , napiszemy pierwszą prostą stronę. Dla przykładu 😉 Na tą chwilę nie potrzebujemy żadnego serwera czy specjalnego programu. Ba żeby pisać strony WWW nie potrzebujemy nawet połączenia z Internetem. Wszystko co nam trzeba to…. Notatnik 😉 Tak tak zwykły windowsowski  edytor tekstu. Nie korzystajcie natomiast z Worda czy innego rozbudowanego edytora bo jest to zupełnie nie potrzebne. Cała rzecz polega na tym iż kod pisany przez nas nie będzie miał żadnego formatowania. żadnych czcionek czy kolorów, czysty tekst. Póki co pozwoli nam to dość dobrze zaznajomić się z językiem. Jest oczywiście cała masa programów wspomagających pisane w HTML-u i są one bardzo pomocne jednak w tej chwili będą one tylko przeszkadzać. W późniejszym czasie przesiądziemy się na rozbudowany program do tworzenia stron internetowych , który bardzo ułatwi nam pracę i pozwoli na naprawdę ciekawe rzeczy. Ale na początku musimy poznać jednak budowę i wszelkie potrzebne nam polecenia języka HTML aby potem  zaawansowane edytory  mogły służyć nam pomocą.

Tak wiec otwieramy naszego Notatnika (jak by ktoś nie wiedział to – START->Programy->Akcesoria->Notatnik) i wpisujemy cały poniższy kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nasza pierwsza strona</title>
</head>
<body>

<h1>To jest treść strony</h1>
</body>
</html>

Póki co nie będzie on za bardzo zrozumiały ale się tym nie przejmujcie. Skopiujcie go tylko do notatnika. Następnie klikamy Plik->Zapisz jako i jako nazwe wpisujemy moja.html (ważne jest tu rozszerzenie nadane po kropce. Wszystkie dokumenty (strony) pisane w HTML mają takie właśnie rozszerzenie. Nie trudno zapamiętać 😉 Ewentualnie można zapisać moja.htm jednak polecam tą pierwszą formę). Zanim klikniemy zapisz zmieńmy kodowanie z ASCII na UTF-8. Pozwoli to na prawidłowe wyświetlenie polskich liter. Do kodowania jeszcze wrócimy i wtedy dowiemy się jak elegancko deklarować je w samym pliku html ale póki co wystarczy zmienić to tutaj. Klikamy zapisz (najlepiej na pulpicie) i oto nasza pierwsza strona gotowa. Teraz wystarczy dwa razy kliknąć na powstały plik ,a otworzy się nam przeglądarka internetowa(Domyślna, systemowa) wyświetlając naszą stronę:

Póki co nie ma za bardzo co oglądać no ale 😉 Pierwsze koty za płoty. Jak widać przeglądarka traktuje nasz plik tak jakby była to zwykła strona gdzieś w sieci. Tak naprawdę nie ma żadnej różnicy między stronami zachowanymi na dysku komputera czy tymi w internecie. Moglibyśmy umieścić ją na serwerze i tam odczytać za pomocą przeglądarki i efekt będzie taki sam.

Ważną sprawą już na początku jest prawidłowe formatowanie kodu. Nie stosujmy tu żadnych wymyślnych czcionek czy kolorów tylko po prostu zwykły tekst (dlatego korzystamy z notatnika , żeby nie kusiło 😉 ). Po za tym przeglądarka ignoruje wszystkie spacje i tabulatory w kodzie więc równie dobrze moglibyśmy zapisać cały powyższy kod w jednej linijce i będzie ten sam efekt. Jednak uczcie się od początku prawidłowego (przejrzystego) pisania , gdyż potem bardzo ułatwia to przeglądanie kodu, zmianę itd. Będziemy jeszcze do tego wracać 😉

No dobrze ale przyjrzyjmy się dokładniej temu co napisaliśmy. U samej góry wpisaliśmy:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Jest to deklaracja dokumentu HTML. Pisząc stronę musimy określić z jakiej wersji języka HTML korzystamy (jak już wcześniej wspominałem poszczególne wersje  różnią się obsługiwanymi znacznikami itp.), w naszym przypadku jest to najnowsza wersja tego języka czyli HTML 4.01. Warto przyjrzeć się ostatnim literom tej deklaracji loose.dtd, które oznaczają iż mimo iż piszemy w HTML 4.01 to nasz kod może posiadać jeszcze elementy  ze starszych wersji języka. Gdybyśmy chcieli pisać tylko według najnowszej wersji  to zamiast tych liter wpisać należy: strict.dtd a zamiast Transitional wpisujemy także Strict. Jednak jest to tylko w formie ciekawostki gdyż póki co bezpieczniej używać deklaracji takiej jak powyżej. Oczywiście nie uczymy się jej na pamięć. Wystarczy ja kopiować do wszystkich innych naszych dokumentów html (zaawansowane edytory html wyręczają nas w tym i same wpisują odpowiednią  deklarację.

Po deklaracji następuje otwarcie znacznika, mówiącego iż kod w którym piszemy to właśnie html:  <html>

Cała treść naszej witryny (cały jej kod) zawieramy zawsze między znacznikiem  początkowym <html> a znacznikiem końcowym  </html> (który oznacza koniec  kodu i zarazem koniec strony). Wyjątkiem jest deklaracja, którą wpisujemy przed znacznikiem <html>

Następnie mamy  znacznik <head> który oznacza nagłówek strony. W obrębie nagłówka wpisujemy inne znaczniki , które są potrzebne do prawidłowego funkcjonowania strony (jak np. kodowanie) oraz tytuł strony (widoczny w przeglądarce na belce tytułowej). W żadnym wypadku nie wpisujemy tu treści strony. Wszystko cokolwiek wpisujemy w nagłówku nie będzie widoczne  na samej stronie. Po znaczniku <head>  występuje kolejna para znaczników <title> </title> a pomiędzy nimi tytuł naszej strony. Jest on potem używany między innymi do katalogowania stron przez wyszukiwarki czy np. podczas zapisywania  danej strony do ulubionych. Poza tym jest to po prostu nazwa naszej strony więc musi być ona w miarę prosta i krótka, a dobrze charakteryzująca charakter strony itd. Między znacnzikami tytułu wpisujemy tylko treść bez żadnych innych znaczników.

Po tytule następuje zamknięcie nagłówka </head> (w przyszłości znajdą się w jego obrębie także inne potrzebne znaczniki , jednak na razie wystarczy sam tytuł). 

Następnie otwieramy „ciało” naszej strony czyli znacznik <body>. Między <body> a </body> wpisujemy całą treść naszej witryny, i to będzie już widoczne w oknie przeglądarki.

 W tym miejscu warto powiedzieć o prawidłowym zagnieżdżaniu znaczników. Obydwa znaczniki <body> i </body> znajdują się pomiędzy początkowym i końcowym znacznikiem <html>, podobnie sprawa ma się w przypadku znaczników <head>. Wszystkie znaczniki HTML-a działają właśnie w ten sposób — formatują zagnieżdżone fragmenty tekstu. Zawsze  musimy pamiętać że najpierw zamykamy ostatnio otwarty znacznik, potem następny itd. Nie możemy mienić kolejności zamykanych znaczników! Aby ułatwić sobie to , można zastosować wcięcia przy pisaniu kodu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

            <head>
                    <title>Nasza pierwsza strona</title>
            </head>
            <body>
                    <h1>To jest treść strony</h1>
            </body>
</html>

Pozwala to lepiej zorientować się które znaczniki są otwartej gdzie powinny być zamknięte, a także zwiększa przejrzystość naszego kodu. Od tej chwili będziemy stosować tylko takie formatowanie dla naszych kodów.

W treści naszej strony widzimy parę znaczników <h1> i </h1>. To nagłówek (nie mylić z nagłówkiem strony). Nagłówek służy do podziału tekstu na części, tak jak książka dzielona jest poprzez rozdziały. Między tymi znacznikami wpisujemy tekst który ma zostać nagłówkiem. Nagłówki mogą mieć różną wielkość, w zależności od naszych potrzeb. Wielkość tą ustalamy za pomocą cyfry po literze h w znaczniku. Największy jest nagłówek h1 , potem mamy mniejszy h2 i tak aż do h6. Najlepiej zilustruje to poniższy przykład:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
                <title>Nagłówki</title>
        </head>
        <body>

                <h1>To jest nagłówek h1</h1>
                <h2>To jest nagłówek h2</h2>
                <h3>To jest nagłówek h3</h3>
                <h4>To jest nagłówek h4</h4>
                <h5>To jest nagłówek h5</h5>
                <h6>To jest nagłówek h6</h6>
       </body>
</html>

Kopiujemy ten tekst do notatnika, zapisujemy i wyświetlamy w przeglądarce. Jak widać poszczególne nagłówki różnią się od siebie wielkością:

Po co nam nagłówki?? Aby oddzielać między sobą ważne części witryny. Nie stosujmy ich tylko do wyróżnienia jakiegoś tekstu ( do tego będzie służyć inny znacznik) gdyż wyszukiwarki internetowe indeksują strony (zbierają informacje o danej stronie) posiłkując się właśnie nagłówkami aby oznaczyć najważniejsze miejsca na stronie. Gdy zaczniemy używać nagłówków gdzie popadnie, nasza strona stanie się mało czytelna dla wyszukiwarek a także dla przeglądarek, które czasami różnie interpretują znaczniki od <h1> do <h6> (mogą się one różnić wyglądem i wielkością czcionki w różnych przeglądarkach).

 Poznaliśmy podstawową budowę naszej pierwszej strony, czas zatem ją trochę ulepszyć. Przydałoby się trochę więcej tekstu. Mamy już nagłówek (na podstawie  pierwszego przykładu) czas zatem na treść. Wpisujemy ją za pomocą znaczników akapitu <p>  i  </p>. Dobrym zwyczajem jest rozpoczynać każdy akapit właśni za pomocą znacznika <p> i kończyć </p>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
            <head>
                    <title>Nasza pierwsza strona</title>
            </head>
            <body>

                    <h1>To jest treść strony:</h1>
            <P> Mamy
                            do czynienia z klasyczną operacją wywiadu. Ten typek,
                            Falken, to twardy agent. Do licha, nikt nie potrafi powie-
                            dzieć,  kim  jest,  skąd przybył ani,  naturalnie,  dla  kogo
                            pracował. Jeśli nie nastąpi jakiś istotny przełom, mogę iść
                            o zakład, że nigdy tego nie ustalimy. Wiemy, raczej sądzimy,że
                            Niemcy nie są aż tak szaleni, ale wszystko wskazuje na
                            nich. Powiedz admirałowi, że dzieje się coś bardzo niedobrego.</p>
                               
                            <p>Toland dokładnie tak uczynił i przełożony, który żądał
                            konkretnych informacji, o mało nie urwał mu głowy.</p>

                </body>
</html>

Jak widać (po zapisaniu i otworzeniu powyższego kodu w przeglądarce) poszczególne akapity są od siebie oddzielane pustą linią.

Znaczne poprawia to czytelność dłuższych tekstów. Nie próbujmy jednak wymuszać dodatkowe puste linie za pomocą pustych znaczników <p> </p>  gdyż po pierwsze jest to nieeleganckie (do tego służy inny znacznik) a po drugie niektóre przeglądarki mogą zinterpretować kilka następujących po sobie znaczników akapitu jako jeden co może nam popsuć szyki J. Dobrze jest wyrobić sobie przyzwyczajenie do używania znacznika <p> na początku każdego akapitu oraz </p> przy jego końcu. Okaże się to szczególnie ważne, kiedy będziemy mówić o dosuwaniu tekstu do prawej i lewej strony czy też o jego centrowaniu.

I jeszcze jedno: mimo iż stosowanie znacznika zamykającego </p> jest opcjonalne , gdyż przeglądarka poradzi sobie i bez niego to jednak zawsze zamykajmy wszystkie znaczniki (prawda jest taka ze większość przeglądarek poradzi sobie i bez zamknięcia znacznikiem </html>  czy innymi) co pozwoli nam uchronić się od głupich błędów i niepoprawnego działania strony.

I to by było na tyle jeśli chodzi o drugą część. W następnym odcinku kursu nauczymy się jak tworzyć listy, oraz hiperłącza, co pozwoli nam na budowanie połączonych ze soba stron  i odnośników do innych stron w internecie. Zbudujemy też bardziej ambitna stronę przykładową 😉