() translation by (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".
1 |
<!DOCTYPE html>
|
Po tym potrzebujemy znacznika <html>.
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
</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.
1 |
<body>
|
2 |
<p>This paragraph element is nested inside the body element.</p> |
3 |
</body>
|
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!
1 |
<html>
|
2 |
<head>
|
3 |
<title>Tuts Town</title> |
4 |
</head>
|
5 |
</html>
|
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+.
1 |
<html>
|
2 |
<head>
|
3 |
<title>Tuts Town</title> |
4 |
</head>
|
5 |
<body>
|
6 |
<header></header>
|
7 |
</body>
|
8 |
</html>
|
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.
1 |
<footer> </footer> |
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.
1 |
<!-- Anything in between these set of symbols is a comment that our browser cannot read, sort of like a little secret for designers only. -->
|
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!
