Jak wygląda kod strony internetowej?

W dzisiejszych czasach nie ma dnia, abyśmy nie korzystali z internetu i nie wchodzili na różnorodne strony internetowe. Z pewnością niejednokrotnie zdarza się, że nachodzi nas myśl: „W zasadzie, jak powstaje strona internetowa i jak ona wygląda od zaplecza?”. W końcu efekt, z którym użytkownicy mają styczność, to tylko estetyczne opakowanie, które skrywa mnóstwo enigmatycznych ciągów znaków, czyli kod strony internetowej. To właśnie on odpowiada za poszczególne elementy widoczne na stronie. Wyjaśniamy nieco, czym właściwie on jest i co warto wiedzieć na temat HTML.

Czym jest HTML?

Zacznijmy od wyjaśnienia samego skrótu HTML, od którego wszystko się zaczyna. Rozwijając go, mamy pojęcie Hypertext Markup Language, czyli język znaczników, który używa się za każdym razem do stworzenia nowej strony internetowej. Kod ten wpływa zarówno na samą strukturę, czyli szkielet strony HTML, jak i jej dalszą zawartość. Od razu trzeba podkreślić jedną kwestię, o której często się mówi w błędny sposób. HTML nie jest językiem programowania. Opiera się on na tagach, dzięki którym można w wygodny sposób opracować witrynę pod względem jej funkcjonalności, a także samego wyglądu.

Strony HTML nie są niczym nowym, ponieważ prototyp tego języka powstawał już ponad 40 lat temu – w latach 80. XX wieku. Jednak za przełomową datę pierwszej i oficjalnej opublikowanej wersji strony zaprojektowanej w HTML uznaje się 1991 rok. Następnie pojawiały się kolejne wersje kodu – dynamiczny rozwój wynikał ze zmian technologicznych, ulepszania stron i dopasowania kodu do potrzeb użytkowników. Od 2014 roku funkcjonuje piąta wersja HTML – to rekomendowały język, który wykorzystywany jest po dziś dzień przez większość osób. Mowa oczywiście o HTML 5.

Szkielet strony HTML

Każda strona internetowa ma zaprojektowaną strukturę, dzięki której każdego dnia możemy poruszać się po funkcjonalnie opracowanych witrynach, gdzie każdy element jest odpowiednio przemyślany. Szkielet strony HTML składa się z dwóch podstawowych części – elementu head oraz body, a także może być dodatkowo rozbudowany o kolejne elementy. Na samym początku pisanej strony warto umieścić !Doctype html – jest to deklaracja standardu i uznaje się, że dobrą praktyką jest dodanie jej w pierwszej linijce kodu. Dzięki temu przeglądarki mają ułatwione zadanie, jakim jest rozpoznanie typu dokumentu. Sam element Html oznacza, że całość tworzonej treści zawiera się w stronie internetowej. Więcej informacji na ten temat znajdziesz tutaj: https://responsywnie.pl/web-development/kod-html-strony-internetowej/.

Po wspomnianej deklaracji szkielet strony HTML zawiera element head – obowiązkowy, który trzeba bezwzględnie umieścić. Następnie konieczne jest podanie meta charset=”utf-8″ i title. Pierwszy element określa używany system kodowania, którym będziemy posługiwać się na stronie. To istotny moment, którego nie można pominąć. Dzięki temu elementowi w kodzie można używać wszystkich znaków specjalnych obecnych w danym języku. Z kolei kodowanie UTF-8 wspiera typowo język polski i nasze znaki jak np. ś, ź, ą, ó.

Kolejnym ważnym elementem jest tag title, który pozwala na określenie tytułu naszej witryny. Nazwa ta będzie wyświetlać się internautom w kilku miejscach – m.in. wynikach wyszukiwania czy na karcie przeglądarki. Kończąc sekcję head, mamy szansę na wykazanie się kreatywnością, czyli napisanie właściwej części strony internetowej, która prezentuje konkretną treść. Ta zaś określana jest przez body, w którym zawierają się takie elementy jak np. nagłówki (h).

Jakie są elementy HTML?

Każdy element, jaki składa się na kod źródłowy HTML, jest zbudowany z trzech części. Pierwszą z nich jest tag otwierający, który zawiera w sobie nazwę znacznika – np. gdy chcemy stworzyć nagłówek, będzie to h. Musi być on otoczony z obu stron nawiasami trójkątnymi. Następnie dochodzimy do zawartości, czyli treści danego elementu. Na koniec mamy tag zamykający, który wygląda jak tag otwierający, jednak poprzedzony jest znakiem slash, który oznacza zawsze zamknięcie konkretnego elementu.

Dla przykładu:
<h1>To jest Twój pierwszy nagłówek </h1>
<p>Tutaj możesz napisać przykładową treść i następnie zamknąć element w poprawny sposób</p>

Warto wiedzieć, że każdy element może mieć dodatkowy atrybut. Oto kilka podstawowych:
<b>pogrubienie tekstu</b>
<u>podkreślenie tekstu</u>
<i>pochylenie tekstu</i>

Mając taką podstawową wiedzę, jesteś w stanie lepiej zrozumieć kod HTML tworzący każdą stronę internetową.