Podstawy HTMLa

By 8 October 2014 January 12th, 2018 ITlogy

Ten wpis to uzu­pełnie­nie do kur­su Javy pisanego przez Kubę. Wyjątkowo prze­sunęliśmy lekcję Javy na pt, tak by dać Ci jego pod­stawy najpierw. Poniżej zna­jdziesz więc abso­lutne min­i­mum do pra­cy z HTMLem.

HTML czyli…

 Hyper­Text Markup Lan­guage — język znaczników, wyko­rzysty­wany do tworzenia stron inter­ne­towych. Tak naprawdę, każ­da strona w sieci go wyko­rzys­tu­je. Może­my o nim pomyśleć jako o takiej instrukcji dla przeglą­dar­ki, która wg niego wyświ­et­la treści. 

Uwa­ga, ważne! Poniższy wpis nie jest w żad­nym wypad­ku kursem tworzenia stron WWW, czy nawet pisa­nia w HTM­Lu. Chce­my jedynie, byś zrozu­mi­ała kon­cepc­je języ­ka, potrafiła sko­rzys­tać z bard­zo pod­sta­wowego for­ma­towa­nia i ori­en­towała się co jest czym w kodzie HTML. Ta wiedza może okazać się przy­dat­na również gdy tworzysz swo­jego blo­ga na Word­Pressie i cza­sem sia­da Ci formatowanie.

Co charak­teryzu­je HTML?

  • Doku­men­ty HTML to zbiór znaczników(tagów), które określa­ją jak ma wyglą­dać treść
  • Każdy tag opisu­je inny sposób wyświetlania
  • Każdy tag musi być zamknię­ty, tj. musi posi­adać tag otwier­a­ją­cy i zamyka­ją­cy (to w prawdzie może być ten sam tag, ale w naszym przy­pad­ku nie będziemy tego używać).

Struktura

Doku­men­ty HTML mają ściśle określoną struk­turę, która ułatwia jego przetwarzanie przez kom­put­er. Rządzi się ona kilko­ma prosty­mi zasadami:

  • Każdy tag musi być zamknię­ty, tj musi posi­adać tag otwier­a­ją­cy i zamykający
  • Tagi może­my zag­nieżdżać w sobie, tzn. niek­tóre tagi są wewnątrz innych — tutaj ważne jest zachowanie hier­ar­chii, tzn. jeśli zag­nieżdżamy tag B w tagu A, to początek B musi być za początkiem A, a koniec B musi być przed końcem A.
  • Nie moż­na mieszać (‘przeplatać’) tagów — tzn. jeśli na tym samym poziomie mamy tagi A i B, to tag A musi zostać zamknię­ty zan­im tag B zostanie otwarty
  • dodatkowo określone tagi mogą być wewnątrz innych a inne nie
  • doku­ment powinien być możli­wy do przetworzenia jako XML (for­mal­nie jest to tzw. XHTML, nato­mi­ast struk­tu­ra doku­men­tów HTML na tyle przy­pom­i­na XML, że może­my stosować zasady XMLa zachowu­jąc pełną poprawność w kwestii HTML

Brz­mi trochę szty­wno, ale zobaczmy na przykładzie:

<html>
    <head>
        <title>Tytuł</title>
    </head>
    <body>
        <h1>Tytuł Akapitu</h1>
        <p>Akapit tekstu</p>
        <a href = "http://kobietydokodu.pl">Wejdź na naszą stonę </a>
        <ul>
             <li>Przykład</li>
             <li>Inny Przykład</li>
       </ul>
    </body>
</html>

Na powyższym przykładzie widz­imy od razu kil­ka stan­dar­d­owych tagów:

  • html — główny tag doku­men­tu, może posi­adać jedynie dwa tagi: head i body 
    • head — tutaj defini­u­je­my wszys­tkie ele­men­ty, które nie są bezpośred­nio wyświ­et­lane, np. skryp­ty, arkusze styli, tytuł strony, słowa kluc­zowe itp 
      • title — tytuł strony, który wyświ­etli się w górnym pasku przeglądarki
    • body — w tym tagu umieszcza­my wszys­tkie inne tagi, które odpowiada­ją za wyświetlanie 
      • p — para­graf tek­stu, wewnątrz wpisu­je­my po pros­tu tekst
      • h1, h2, h3 — nagłów­ki 1, 2, 3 poziomu (h1 jest największy)
      • a href=“http://adres.pl” — odnośnik do innych adresów w internecie
      • ul — lista ele­men­tów nienu­merowanych (wypunk­towanie). Każdy ele­ment który ma być wypunk­towany w ramach tej listy otacza­my tagiem li

Powyższa lista oczy­wiś­cie nie wycz­er­pu­je tagów — jest ich wiele więcej i sama zna­jo­mość HTM­L’a też jest pewną ścieżką kari­ery (oso­ba zaj­mu­ją­ca się głównie HTM­Lem i pow­iązany­mi tech­nolo­gia­mi nazy­wana jest webmasterem).

HTM­La będziemy uży­wać tylko po to, żeby wyświ­etlić dane z naszej aplikacji. Nie będziemy dbali o warst­wę este­ty­czną — pry­wat­nie jeśli robimy jak­iś pro­jekt, kupu­je­my zawsze szablon na themeforest.net od osób, które zaj­mu­ją się tym pro­fesjon­al­nie. W tym kon­tekś­cie zna­jo­mość HTM­La jest istot­na głównie po to, żeby wiedzieć co zmienić w kupi­onym szablonie.

Jeśli po tym wstępie do HTM­La czu­jesz niedosyt, w sieci jest wiele świet­nych kursów ( np. https://www.udacity.com/course/ud304 , http://www.codecademy.com/courses/web-beginner-en-HZA3b , czy http://www.w3schools.com/html/) z który­mi moż­na się zapoznać.

Pomi­mo tego że testowanie HTM­La jest banal­nie proste na włas­nym kom­put­erze (wystar­czy zapisać kod HTML w pliku tek­stowym z rozsz­erze­niem html i otworzyć go za pomocą przeglą­dar­ki), ist­nieją też proste narzędzia dzię­ki którym może­my edy­tować kod i od razu podglą­dać jak wyglą­da, np http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic .

Jak sama widzisz, HTML jest całkiem prosty do nauczenia się :) Już w poniedzi­ałek pokaże­my Ci jak go wyko­rzys­tać w naszej aplikacji webowej!