Advertisement
  1. Web Design
  2. Kids

Web Design dla dzieci: Struktura HTML

by
Read Time:6 minsLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website
Web Design for Kids: HTML Content

Polish (Polski) translation by Krzysztof Kaptur (you can also view the original English article)

Witaj w trzeciej lekcji serii Web Design dla dzieci, Struktura HTML!

Nauczymy się, jak napisać strukturę naszej strony. Struktura przygotuje nas do umieszczenia treści, którą będziemy dodawali w następnej lekcji.

Jeśli chcielibyśmy porównać web design do budowy (np. budowy Miasteczka Tuts+) to HTML byłby fundamentem i szkieletem; jest podstawą, na której wszystko się opiera.

Ważne! Pliki tworzone w tej lekcji są dostępne pod tym adresem.

Czym właściwie jest HTML?

Wspominaliśmy wiele razy o HTML, ale jeszcze nie wyjaśniliśmy czym właściwie jest, oprócz tego, że jest "odjazdowym, tajnym językiem". Sieć składa się z języków i komunikacji, i HTML jest tego ważną częścią.

Język znaczników hipertekstowych, HTML, jest językiem, który oznacza zawartość strony, by przeglądarka go zrozumiała i wyświetliła. Nadaje strukturę zwykłemu pliku tekstowemu, którego normalnie przeglądarka nie była by w stanie odczytać.

Na przykład, nie możemy napisać paragrafu w edytorze tekstowym i oczekiwać, że przeglądarka będzie wiedziała, że to paragraf. Zawartość paragrafu musi się znaleźć w odpowiednik znaczniku HTML, w elemencie <p> (zabawny znaczek, jak <p> informuje, że jest kodem).

Elementy

HTML jest zbudowany z elementów, które mają ważne znaczenie, jak paragraf wspomniany przed chwilą. Każdy element posiada początkowy i końcowy znacznik, z treścią umieszczoną pomiędzy nimi.

Te otwierające i zamykające znaczniki zapisane są pomiędzy ostrymi nawiasami (jak te: < >), a zamykający posiada jeszcze ukośnik (jak ten: < / >).

Planowanie struktury

Poprzednio narysowaliśmy naszą stronę, więc przyszedł czas by przygotować strukturę, lub też szkielet, naszego projektu.

Zaczniemy od dodania ogólnych notatek do naszej strony, by lepiej zrozumieć, jak najlepiej ją zaplanować.

Wewnątrz elementu body w pliku html, będziemy mieli kilka podstawowych elementów: header (nagłówek), main (główna zawartość) oraz footer (stopka).

Przygotowywanie dokumentów

Mówiliśmy ostatnio jak ustawiać pliki strony i dzisiaj z tej wiedzy skorzystamy.

  • Na początek, stwórz na swoim komputerze folder o nazwie "tutsfolder".
  • Przyszedł czas na otwarcie edytora tekstowego, który tylko czeka na coś niesamowitego.
  • Następnie, stwórz nowy dokument za pomocą swojego edytora (zazwyczaj Plik > Nowy) i zapisz w folderze "tutsfolder" jako "index.html"

Pamiętaj: "index" jest nazwą pliku, a ".html" jest rozszerzeniem, które mówi, z jakim rodzajem pliku mamy do czynienia.

Strony internetowe mogą się składać z wielu, wielu podstron, dlatego strona główna zawsze ma nazwę "index.html", mówiąc przez to "Cześć, tutaj się wszystko zaczyna!".

A teraz, napiszmy wreszcie trochę HTMLa

Budowanie struktury

Teraz możemy dodać naszą strukturę. Ponownie pomyśl, że stawiamy budynek, więc potrzebujemy szkieletu. 

Pierwszym elementem HTML, który piszemy jest <!DOCTYPE html>, który informuje przeglądarkę "Jestem dokumentem HTML".

Po tym potrzebujemy znacznika <html>.

Wszystkie elementy będą zagnieżdżone w tym elemencie.

Czekaj. Zagnieżdżenie?

"Jak ptasie gniazda?" Bardziej jak matrioszki, lub zostając przy naszym miasteczku, zagnieżdżone budynki. Zagnieżdżenie ma miejsce, gdy umieszczamy jeden element wewnątrz drugiego.

Kod poniżej przedstawia zagnieżdżenie paragrafu wewnątrz elementu body, ponieważ znajduje się on pomiędzy otwierającym i zamykającym znacznikiem.

Zrobiliśmy nasz kod bardziej czytelny, przesuwając zagnieżdżone elementy w prawo. W taki sposób:

Dobrze, wracajmy do pracy...

Nagłówek

Następnie, elementem który chcemy dodać do html jest element head (nagłówek).

Head będzie zawierało title (tytuł) strony, który będzie wyświetlany w zakładce przeglądarki. Dużo zagnieżdżania!

Wiele elementów w sekcji head dokumentu HTML jest niewidocznych na stronie, bo ma za zadanie przekazać wyszukiwarce informacje, np. Google, o czym jest strona.

Później stworzymy jeszcze plik ze stylami, który połączymy z tym dokumentem przez hiperłącze w sekcji head. Jest to jakby centrum dowodzenia naszej strony, w większości ukryte przed użytkownikami.

Ciało

Wszystko co zobaczymy na naszej stronie będzie zagnieżdżone w elemencie body, i właśnie tu zaczyna się zabawa!

Nagłówek

Element header nie jest tym samym co element head, o którym już mówiliśmy. Header znajduje się w body i zazwyczaj umieszczone jest na górze strony.

Pierwszą rzeczą, którą mamy na górze strony jest nagłówek zawierający trochę tekstu oraz obrazek Miasteczka Tuts+.

Dodamy teraz header, ale wypełnimy go później.

Część główna

Główna część strony MiasteczkoTuts+ zawiera najważniejsze informacje. Nasza strona zawiera listę firm, więc tę zawartość umieścimy w elemencie main.

Mniejsze elementy (trzy różne grupy: Sen, Jedzenie oraz Sklep), wraz z głównym  kontenerem (main) omówimy w następnej lekcji, kiedy będziemy dodawali treść.

Stopka

Stopka (footer) znajduje się na samym końcu strony. Zwykle umieszczone są tu hiperłącza, np. do Facebooka i Twittera, lub dopisek kto jest twórcą strony.

W stopce (footer) umieścimy informację, że to my jesteśmy jej dumnymi autorami.

Pamiętaj, że: nadal dodajemy elementy wewnątrz body.

Powtórka

Zróbmy powtórkę tego, co przerobiliśmy do tej pory.

Łatwo zapomnieć o znacznikach zamykających, przez co można napotkać błędy na stronie. Musimy się upewnić, że wszystkie znaczniki zostały zamknięte.

Wygląda na to, że wszystko jest jak należy! Pora dodać treść do super konstrukcji, którą właśnie stworzyliśmy.

Szybka uwaga do komentarzy

HTML pozwala nam pisać pomocne komentarze w naszej pracy. Komentarze nie będą pokazane na stronie, ale okażą się świetnym sposobem na dodanie przydatnych informacji dla innych projektantów przeglądających nasz kod.

Plik HTML do tej lekcji (który ściągniesz tutaj) posiada kilka komentarzy, które pomogą Ci lepiej zrozumieć kod.

Brawo!

W tej lekcji nauczyliśmy się czym jest HTML, czym są elementy, jak je zagnieżdżać, oraz jak stworzyć podstawowy szkielet HTML z kilkoma powszechnymi elementami.

W następnej lekcji, dodamy tekst oraz obrazki do nowo zbudowanej struktury.

Do zobaczenia w miasteczku!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.