Podstawy HTMLa

By 8 października 2014ITlogy
Wpis-Header (5)

Ten wpis to uzupełnienie do kursu Javy pisanego przez Kubę. Wyjątkowo przesunęliśmy lekcję Javy na pt, tak by dać Ci jego podstawy najpierw. Poniżej znajdziesz więc absolutne minimum do pracy z HTMLem.

HTML czyli…

 HyperText Markup Language – język znaczników, wykorzystywany do tworzenia stron internetowych. Tak naprawdę, każda strona w sieci go wykorzystuje. Możemy o nim pomyśleć jako o takiej instrukcji dla przeglądarki, która wg niego wyświetla treści. 

Uwaga, ważne! Poniższy wpis nie jest w żadnym wypadku kursem tworzenia stron WWW, czy nawet pisania w HTMLu. Chcemy jedynie, byś zrozumiała koncepcje języka, potrafiła skorzystać z bardzo podstawowego formatowania i orientowała się co jest czym w kodzie HTML. Ta wiedza może okazać się przydatna również gdy tworzysz swojego bloga na WordPressie i czasem siada Ci formatowanie.

Co charakteryzuje HTML?

  • Dokumenty HTML to zbiór znaczników(tagów), które określają jak ma wyglądać treść
  • Każdy tag opisuje inny sposób wyświetlania
  • Każdy tag musi być zamknięty, tj. musi posiadać tag otwierający i zamykający (to w prawdzie może być ten sam tag, ale w naszym przypadku nie będziemy tego używać).

Struktura

Dokumenty HTML mają ściśle określoną strukturę, która ułatwia jego przetwarzanie przez komputer. Rządzi się ona kilkoma prostymi zasadami:

  • Każdy tag musi być zamknięty, tj musi posiadać tag otwierający i zamykający
  • Tagi możemy zagnieżdżać w sobie, tzn. niektóre tagi są wewnątrz innych – tutaj ważne jest zachowanie hierarchii, tzn. jeśli zagnieżdżamy tag A w tagu B, to początek B musi być za początkiem A, a koniec B musi być przed końcem B.
  • 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 zanim tag B zostanie otwarty
  • dodatkowo określone tagi mogą być wewnątrz innych a inne nie
  • dokument powinien być możliwy do przetworzenia jako XML (formalnie jest to tzw. XHTML, natomiast struktura dokumentów HTML na tyle przypomina XML, że możemy stosować zasady XMLa zachowując pełną poprawność w kwestii HTML

Brzmi trochę sztywno, ale zobaczmy na przykładzie:

<html>
    <head>
        <title>Tytuł</title>
    </head>
    <body>
        <p>Akapit tekstu</p>
    </body>
</html>

Na powyższym przykładzie widzimy od razu kilka standardowych tagów:

  • <html> – główny tag dokumentu, może posiadać jedynie dwa tagi: head i body
    • <head> – tutaj definiujemy wszystkie elementy, które nie są bezpośrednio wyświetlane, np. skrypty, arkusze styli, tytuł strony, słowa kluczowe itp
      • <title> – tytuł strony, który wyświetli się w górnym pasku przeglądarki
    • <body> – w tym tagu umieszczamy wszystkie inne tagi, które odpowiadają za wyświetlanie
      • <p> – paragraf tekstu, wewnątrz wpisujemy po prostu tekst
      • <h1>, <h2>, <h3> – nagłówki 1, 2, 3 poziomu (h1 jest największy)
      • <a href=”http://adres.pl”> – odnośnik do innych adresów w internecie
      • <ul> – lista elementów nienumerowanych (wypunktowanie). Każdy element który ma być wypunktowany w ramach tej listy otaczamy tagiem <li>

Powyższa lista oczywiście nie wyczerpuje tagów – jest ich wiele więcej i sama znajomość HTML’a też jest pewną ścieżką kariery (osoba zajmująca się głównie HTMLem i powiązanymi technologiami nazywana jest webmasterem).

HTMLa będziemy używać tylko po to, żeby wyświetlić dane z naszej aplikacji. Nie będziemy dbali o warstwę estetyczną – prywatnie jeśli robimy jakiś projekt, kupujemy zawsze szablon na themeforest.net od osób, które zajmują się tym profesjonalnie. W tym kontekście znajomość HTMLa jest istotna głównie po to, żeby wiedzieć co zmienić w kupionym szablonie.

Jeśli po tym wstępie do HTMLa czujesz niedosyt, w sieci jest wiele świetnych 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órymi można się zapoznać.

Pomimo tego że testowanie HTMLa jest banalnie proste na własnym komputerze (wystarczy zapisać kod HTML w pliku tekstowym z rozszerzeniem html i otworzyć go za pomocą przeglądarki), istnieją też proste narzędzia dzięki którym możemy edytować 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 poniedziałek pokażemy Ci jak go wykorzystać w naszej aplikacji webowej!

  •  
  •  
  •  
  •  
  •  
  • Asia

    Jakiś czas temu zaczęłam naukę HTML i CSS. Niby proste, ale pokombinować trzeba.

    Myślę jeszcze o czymś więcej, ponieważ powoli też chcę zmienić branżę, ale dokładnie sama nie wiem od czego i jak mam zacząć…
    Pozdrawiam,
    Asia

    • Cześć!
      Oczywiście, że trzeba pokombinować w szczególności, jeśli chcemy stworzyć coś naprawdę ładnego i funkcjonalnego. Twój komentarz zainspirował nas do stworzenia wpisu o tym, jak można zacząć i od czego, za co Ci dziękujemy. Jeśli chcesz możemy Ci napisać maila z naszymi pomysłami, jak możesz sobie pomóc w wyborze tego pierwszego kroku.

  • gościu

    Na w3schools ponoć jest sporo błędów, lepiej korzystać z MDN.

    • „ponoć” ? W3C jest organizacją, która jest odpowiedzialna za standardy takie jak HTML i CSS – na ten moment jest to ‚najpewniejsze’ źródło jeśli chodzi o różnego rodzaju technologie webowe, przyznam że nie słyszałem o problemach z merytoryczną zawartością.

      Co do MDN – podeślij proszę tutaj linki – zawsze ktoś, kto będzie chciał w przyszłości się uczyć, będzie miał większy wybór :)

      • koodo218

        @jderda:disqus piszesz, że w3c i w3schools to to samo, ale jesteś w błędzie. Poza mylącą nazwą nie mają one nic wspólnego, co zresztą pokazuje sekcja about.
        http://www.w3schools.com/about/
        „The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C.”

        • Oops, faktycznie, moja wina, że nie sprawdziłem :(
          Faktycznie, W3Schools jest niezwiązana z W3C – w tym wypadku MDN (Mozilla Development Network – https://developer.mozilla.org/pl/) może być lepszym rozwiązaniem. Nadal jednak podtrzymuje, że w3school ma raczej dobre materiały – nie zdarzyło mi się wypatrzeć tam błędu, choć fakt, że nie korzystam za często :)
          Raz jeszcze przepraszam za wprowadzenie w błąd i dzięki za zwrócenie uwagi!