niedziela, 2 września 2012

HTML - Nagłówek, czyli to co tygryski lubią najbardziej.

Header - o konfiguracji słów kilka.

Strefa nagłówka – sekcja nagłówkowa – <head></head> – to tak w skrócie. Dlaczego ta sekcja jest tak istotna dla nas ? Oto kilka powodów:
  1. Tytuł strony wyświetlany na pasku przeglądarki. Jest ustalany za pomocą znacznika <title>Tu wpisz tytuł</title>.
    <!-- przykład_2_1.html -->
    <html>
     <head>
          <title>Moja przykładowa strona - Tytuł </title>
     </head>
     <body>
          A tu mamy treść strony.
     </body>
    </html>
  2. Kodowanie strony jest to zestaw znaków zastosowany na danej stronie. Co to takiego ? Po krótce jest to taki “alfabet” wykorzystywany na stronie. Czas na trochę historii. Na początku gdy powstawały komputery, systemy ludzie marzyli o tym aby każdy mógł porozumiewać się z komputerem w swoim własnym języku. Jednak było to wtedy trudne do zrealizowania. Postanowiono więc wprowadzić standard jakim był oczywiście alfabet łaciński (jakżeby inaczej…). Ten standard nazwano ASCII. Z czasem jednak możliwości były coraz większe więc wprowadzono UNICODE. UNICODE jest to taki standard, który ma obsługiwać wszystkie litery wszystkich języków na całym świecie, czyli polskie ogonki, niemieckie umlauty itd. Mimo wszystko jednak nie jest on jeszcze aż tak standardowy aby każda strona go używała. W pozostałościach więc po poprzedniej epoce została składnia pozwalająca na wybór jednego z kilku kodowań (zestawów znaków) których będziemy używali. Nas oczywiście interesuje możliwość wypisywania na swojej stronie ogonków ą, ę, ć, ś, ź, ż.
    Oto lista najczęściej używanych kodowań:
      • windows-1250 - Nie będziemy z niego korzystać.
      • iso-8859-2 - Mogłoby wystarczyć, ale czasami pojawiają się typowe "krzaki".
      • UTF-8 - Z tej strony kodowej będziemy korzystać

    Radzę odwiedzić wikipedię i poczytać o ASCII, UNICODE, Windows-1250, ISO-8859-2, UTF-8. Nie jest to jednak niezbędne by dalej uczyć się z poniższego kursu.
    <!-- przykład_2_2.html -->
    <html>
     <head>
          <title>Moja strona z kodowaniem standardowym</title>
     </head>
     <body>
          ą,ę,ć,ś,ź, ściółka, ćma, ścinki, żyrafa
     </body>
    </html>
    
    <!-- przykład_2_3.html -->
    <html>
     <head>
          <title> To jest moja strona z kodowaniem UTF-8</title>
    
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
     </head>
     <body>
          Gżegżółka na ściółce siedziała i świergoliła radośnie o dżdżystym deszczu.
     </body>
    </html>
    
    Odpal powyższe przykłady i sprawdź. Według zamierzenia pierwszy plik powinien pojawić się z "krzaczkami", a drugi z pięknymi polskimi ogonkami.
  3. Style
  4. Skrypty Javascript. 
Ta sekcja posiada także inne funkcje jak miniaturka strony itp. O tym jednak będziemy mówić w części drugiej całego kursu.

PODSUMOWANIE:

Zalety sekcji HEAD
  • Możliwość ustawienia tytułu : <title>przykładowy tytuł strony </title>
  • Możliwość wyświetlania polskich znaków : <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
  • Style, skrypty javascript, inne kosmetyczne drobnostki takie jak info o autorze itp.

Praca domowa:

  1. Odszukaj w internecie (nie wikipedia) wyjaśnienia określenia sformuowania: Strona kodowa. Co to takiego?
  2. Podaj 3 zalety sekcji HEAD – z pamięci, nie zerkaj do kursu.
  3. Napisz własną stronę HTML w której umieścisz jakąś myśl (koniecznie z polskimi znakami). Zapisz jako PD_3_1.html
Powodzenia!

Brak komentarzy:

Publikowanie komentarza