Czym jest HTML i co warto o tym wiedzieć? Podpowiadamy!
6 min
6 min
Na skróty
HTML jest podstawowym zagadnieniem we współczesnym biznesie internetowym. Temat ten porusza się zarówno pod kątem pozycjonowania stron, ich tworzenia oraz edycji. Zdaniem ekspertów Semcore każdy specjalista od marketingu czy nawet przedsiębiorca, któremu zależy na wysokim wyniku w SERP-ach powinien zagłębić się w dzisiejszy artykuł – pomoże to lepiej zrozumieć osoby, z którymi podejmie współpracę. Zatem, czym jest HTML i co warto o tym wiedzieć? Podpowiadamy!
HTML (z ang. HyperText Markup Language) to hipertekstowy język znaczników, czyli nazwa języka stosowanego do opracowywania dokumentów hipertekstowych. Aktualnie HTML stosujemy przede wszystkim do tworzenia stron internetowych – pozwala on dodać do kodu źródłowego istotne elementy tj.:
HTML pozwala określić, jak konkretny tekst zaprezentuje się w przeglądarce. Jest on złożony z kilku istotnych elementów, m.in. odwołania, znaczniki oraz ich atrybuty, a także typy danych czy deklaracje typu dokumentu.
Zapamiętaj!
W przeglądarce widzimy końcowy efekt działania znaczników w kodzie źródłowym, a nie ich pierwotną formę.
Znaczniki w HTML odpowiadają za wyświetlanie poszczególnych elementów. Dla przykładu – tag HyperText Markup Language to komenda instruująca, jak ma się wyświetlać i do czego służyć konkretny element. Warto również wspomnieć, iż znaczniki HTML występują w parach, przyjmując formę tekstu, który został umieszczony w specjalnych ostro zakończonych nawiasach.
Najpopularniejszymi znacznikami HTML są tagi otwierające, znaczniki nagłówków, tytułu oraz treści konkretnych dokumentów. Bazując na doświadczeniu ekspertów Semcore, możemy jednoznacznie powiedzieć, że web developerzy praktykują również tagi pogrubiające, znaczniki obrazu oraz hiperłącza. Poniżej przedstawiamy najważniejsze i najpopularniejsze znaczniki HTML w 2022 roku!
Jak już wcześniej wspomnieliśmy – w HTML możemy wyróżnić znaczniki otwierające (np. <h1>) oraz zamykające (np. </h1>). Pomiędzy nimi umieszczamy stosowny tekst, który chcemy sformatować według odpowiedniej komendy podanej w kodzie źródłowym.
Zanim przejdziemy do całego sformułowania pt.: semantyczny HTML, należy dowiedzieć się, co oznacza samo słowo semantyczny. Otóż według definicji ze słownika poprawnej polszczyzny jest to dział językoznawstwa, którego przedmiotem podaje się analizę znaczeń wyrazów. Z punktu widzenia innego słownika j. polskiego semantyczny to dział semiotyki specjalizujący się w badaniu związków zachodzących między wyrażeniami języka a poszczególnymi przedmiotami, do których się odnoszą. Reasumując, semantyczny w kontekście HTML oznacza najprościej – znaczeniowy.
Kompleksowe zagłębienie się w pojęcie semantyczny HTML pozwoli zrozumieć, co dokładnie niesie za sobą znaczenie semantyczne (wbrew pozorom nie jest to aż tak oczywiste). Przechodząc do konkretów – znaczniki HTML oraz ich atrybuty są zaprojektowane w taki sposób, aby pociągały za sobą znaczenie semantyczne. Dla przykładu – element <ol> otwiera uporządkowaną listę, natomiast <lang> to po prostu język stosowany na stronie www.
Utworzenie własnej strony internetowej w języku HTML nie jest aż tak trudnym zadaniem, jak może się wydawać. Oczywiście, pierwsza witryna nie będzie najbardziej funkcjonalna ani najpiękniejsza, natomiast proces ten pomoże nabyć nieco doświadczenia, które w późniejszym etapie przełoży się na opracowywanie kolejnych, bardziej złożonych projektów. Zatem, jak zrobić stronę internetową w HTML? Podpowiadamy!
W pierwszej kolejności należy uporządkować strukturę naszej strony www, tworząc pliki tj. index.html, omnie.html oraz style.css. Aby nie komplikować sobie życia, warto je wrzucić do jednego folderu i przejść do następnego kroku.
Plik index.html polecamy otworzyć w Notepadzie++, ponieważ w późniejszym etapie notatnik może nieco utrudniać pracę. Według ekspertów Semcore Notepad++ automatyzuje niektóre procesy i jest znacznie bardziej przejrzysty od standardowego notatnika.
W tym kroku po raz pierwszy zetkniemy się z kodem HTML – użyjemy podstawowych komend, które umożliwią zaprojektowanie prostego szkieletu strony. Poniżej przedstawiamy przykład kodu źródłowego:
<!doctype html><html lang=”pl”>
<head>
<meta charset=”utf-8″> <link rel=”stylesheet” href=”style.css”> <title>Index – Przykładowa witryna</title>
</head>
<body> <h1>Witaj na przykładowej witrynie</h1>
</body>
</html>
W pierwszej kolejności należy zdefiniować tzw. doctype oraz język konkretnej domeny w tagu <html>. Następnie powinniśmy dodać <head> oraz ustawić kodowanie znaków (język polski to zazwyczaj utf-8). Warto również załączyć dodatkowe arkusze CSS (dzięki nim nadamy stronie bardziej atrakcyjny wygląd) oraz tag title umożliwiający zatytułowanie naszej domeny w karcie przeglądarki.
W tym punkcie dodajemy elementy do sekcji body naszego dokumentu. Stosujemy również znaczniki <div> i </div> oraz nazwy klas (atrybut class) pozwalające nadać parametry poprawiające aspekty wizualne danej strony. Wygląda to w taki sposób:
<!doctype html><html lang=”pl”>
<head>
<meta charset=”utf-8″> <link rel=”stylesheet” href=”style.css”> <title>Index – Przykładowa witryna</title>
</head>
<body>
<div class=”top”> <h1> Przykładowa witryna </h1> </div>
<div class=”menu”> <a href=”index.html”>Strona Główna</a> | <a href=”omnie.html”>O mnie</a> </div>
<h2> Witaj na przykładowej witrynie </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at lobortis libero. Curabitur interdum metus facilisis tellus eleifend tincidunt. Vivamus rhoncus semper pretium. Aliquam vehicula tellus in euismod fermentum. Nullam rhoncus vehicula est, vitae aliquam tellus blandit ut.</p>
<div class=”footer”> Przykładowa witryna | Semcore 2022 </div>
</body>
</html>
To nie wszystko, bowiem w divie warto użyć dodatkowo tagi <a> (jak zrobiliśmy to powyżej), aby przekierować użytkownika na dowolną stronę po kliknięciu odpowiedniego znacznika. Ułatwi to przemieszczanie się po witrynie.
Teraz musimy wejść w plik style.css, a następnie odwołać się do klas ich indywidualną nazwą, natomiast do body odwołać się przy użyciu standardowej nazwy “body”. Jeśli chodzi o “menu” i “footer” – polecamy wstawić je po przecinku, nadając im takie same właściwości. Poniżej przedstawiamy edycję pliku style.css:
body {background: #eee; margin: 0 20%;}
.top { background: #cccccc; border: 3px solid #acacac; border-radius: 10px; padding: 30px; margin: 20px 0px; text–align: center;}
.menu, .footer { background: #cccccc; border: 3px solid #acacac; padding: 10px; text-align: center;}
a { color: #6b1d1d; font-size: 18px; font-weight: bold;}
Jeśli mowa o elementach <a>, nie musimy im koniecznie nadawać specjalnych klas (class) lub identyfikatorów (id) – wystarczy odwołać się do samego tagu. Warto również wspomnieć o prawidłowym ustawieniu parametrów odpowiedzialnych za m.in.:
Eksperci Semcore jako sprawdzony protip na naukę polecają skasować niektóre wartości i dodać nowe. Zapoznamy się wówczas z językiem HTML tzw. metodą prób i błędów.
Strona „O mnie” jest najmniej skomplikowana, ponieważ wystarczy zmienić wartość title, tytułu strony oraz treść, w której dodajemy listę punktowaną (elementy <li>). Można też dodać klasę logo w atrybucie <src> oraz zdefiniować wartość margin. Strona „O mnie” w języku HTML wygląda mniej więcej w taki sposób:
<!doctype html><html lang=”pl”>
<head> <meta charset=”utf-8″> <link rel=”stylesheet” href=”style.css”>
<title>O mnie – Przykładowa witryna </title>
</head>
<body>
<div class=”top”> <h1>O mnie</h1> </div>
<div class=”menu”> <a href=”index.html”>Strona Główna</a> | <a href=”omnie.html”>O mnie</a> </div> <img src=”https://przykladowawitryna.pl/wp-content/themes/przykladowawitryna-theme/img/logo-w.png” class=”logo”>
<h2> Przykładowa witryna </h2>
<p> Suspendisse lorem odio, lobortis non velit ut, accumsan maximus augue. Cras malesuada tempus pulvinar. In ut finibus quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ullamcorper consectetur nibh vel laoreet. Vestibulum fringilla maximus auctor. Aliquam vulputate egestas lorem. Fusce sagittis urna eu tortor efficitur tincidunt in ut felis. Nam condimentum mi eu sapien vestibulum, id aliquet leo feugiat. Mauris molestie mi erat. Fusce sed ipsum quis quam auctor pharetra.
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul> </p>
<div class=”footer”> Przykładowa witryna | Semcore 2022 </div></body></html>
Teraz wystarczy otworzyć swoją stronę przy użyciu pliku index.html za pomocą dowolnej przeglądarki (np. Chrome, Opera, Safari, Firefox).
Po otwarciu podglądu strony możemy ponownie wykonać zmiany w kodzie źródłowym, a następnie odświeżyć kartę przeglądarki, aby zobaczyć wdrożone zmiany. Jeśli zależy nam na opublikowaniu witryny w sieci – powinniśmy skorzystać z dowolnego serwera lub hostingu. Dobrą alternatywą są także darmowe hostingi współdzielone (szczególnie dla prostych stron HTML stworzonych w celach nauki).
HTML to nic innego jak hipertekstowy język znaczników praktykowany przede wszystkim w celu opracowywania dokumentów hipertekstowych. Pozwala on dodać istotne elementy do kodu źródłowego (np. wyróżnienia, ramki, akapity), które mają pomóc w kompleksowym opracowaniu konkretnej strony www.
Poniżej zebraliśmy odpowiedzi na najczęstsze pytania, które pojawiają się w sieci na temat HTML.
HTML jest językiem znaczników stosowanym do tworzenia dokumentów hipertekstowych (z ang. HyperText Markup Language).
Twórcą języka HTML jest Tim Berners-Lee. Jego pierwszą wersję opracował w 1989 roku.
Zawodowy copywriter specjalizujący się̨ w tworzeniu artykułów eksperckich dotyczących najważniejszych zagadnień związanych z SEO. Twierdzi, że nieustanne zmiany w tej dziedzinie napędzają go do dalszej pracy, a edukowanie innych pozwala mu wzrastać.
