HTML dla zielonych. Jak zacząć i tworzyć proste projekty w HTML?

Web design

2 minuty czytania

Tomasz Kozon

21 lut 2022

html5

css3

wordpress

HTML (Hypertext Markup Language) to język znaczników, który jest podstawą każdej strony internetowej. Jeśli chcesz zacząć tworzyć proste projekty w HTML, to dobrym pierwszym krokiem jest poznanie podstawowych znaczników tego języka.

Spis treści

HTML – czym jest i do czego służy?

HTML dla zielonych – od czego zacząć naukę?

HTML

Umów się na bezpłatną konsultację

Twoje dane przetwarzamy zgodnie z naszą polityką prywatności.

Każda strona internetowa, bez względu na technologie, w których została stworzona, zawiera takie same komponenty. Prostą stronę wizytówkę z zaledwie kilkoma podstronami można zakodować za pomocą HTML i CSS, które budują jej strukturę oraz definiują wygląd. Coraz więcej osób postanawia nauczyć się podstawowych informacji o budowaniu stron WWW dla użytku własnego i firmowego. W mniejszym artykule skupimy się na języku znaczników, czyli podstawach HTML dla zielonych. 

 

HTML – czym jest i do czego służy?

HTML (Hyper Text Markup Language), czyli hipertekstowy język znaczników, nie jest językiem programowania w dosłownym znaczeniu tego słowa – nie korzysta z warunków, pętli czy iteracji . Jest to język kodowania struktury strony, jej treści i ich układu w taki sposób, w jaki zostaną one zaprezentowane użytkownikowi na ekranie. Powstał już w 1980 roku z ramienia W3C oraz WHATWG i do dzisiejszego dnia doczekał się kilku wersji, a obecnie korzysta się z wersji HTML5. Niezaprzeczalnie jest on (wraz z językiem CSS, który określa wygląd strony i któremu zdecydowanie bliżej do programowania) językiem pierwszego kontaktu,z którym powinni zapoznać się wszyscy, którzy chcieliby wejść w świat IT. Dlatego też powstało wiele kursów, samouczków, bootcampów szkoleń online, które oferują naukę HTML dla zielonych. 

html dla początkujących

Czy szukasz wykonawcy projektów IT ?
logo
Sprawdź case studies

HTML dla zielonych – od czego zacząć naukę?

Sam język znaczników nie jest dość skomplikowany, jednak do jego nauki niezbędna będzie odrobina wytrwałości, samodyscypliny i czasu, aby móc się nim swobodnie posługiwać na użytek własny lub w celu przebranżowienia się. W skład języka HTML wchodzą: 

 

ZNACZNIKI: otwierający <> i zamykający </> – to one odpowiadają za wygląd i funkcje treści:

 

<h1>To jest nagłówek pierwszego stopnia</h1>

<p>To jest akapit treści</p>

<i>To jest tekst pisany kursywą</i>

 

ATRYBUTY:

<a href=" https://boringowl.io/blog/html-dla-zielonych-jak-zaczac-i-tworzyc-proste-projekty-w-html"> HTML dla zielonych. Jak zacząć i tworzyć proste projekty w HTML?”</a>

atrybut href wprowadza wartość strony docelowej

<img src="obrazek.jpg"> 

atrybut src wprowadza obrazek

 

Struktura strony HTML dzieli się na trzy podstawowe sekcje/części:

dokument HTML 

<html> Zawiera cały dokument HTML</html>

zawiera cały dokument HTML

 HEAD

<head> Dotyczy ustawień dotyczące strony</head>

 BODY

<body>W tym miejscu znajduje się treść strony</body>

 

Z pomocą HTML można zbudować takie element, jak:

  • sekcje;
  • nagłówki;
  • menu;
  • akapity;
  • teksty pogrubione, pochylone,podkreślone;
  • rodzaje czcionek;
  • tło strony;
  • obrazki;
  • tabele;
  • linki;
  • stopki;
  • inne elementy strony.

 

Aby zbudować pełnowartościową estetyczną stronę zgodną z naszymi potrzebami i oczekiwaniami niezbędna jest znajomość nie tylko HTML, ale i języka ściśle z nim związanego, jakim jest CSS (Cascading Style Sheets), czyli kaskadowe arkusze stylów. Język ten informuje przeglądarkę jak strona ma wyświetlać się na ekranie monitora, a zatem definiuje wielkości czcionki, kolory poszczególnych sekcji, ich układ czy odstępy pomiędzy nimi, a nawet pozwala stworzyć proste animacje. Dlatego też, aby móc stworzyć swój pierwszy projekt strony WWW najlepiej jest znać oba języki. 

 

Podstawy HTML to niezwykle wartościowa umiejętność w XXI wieku, kiedy życie od dawna toczy się w Internecie, a każda firma posiada swoją stronę, aplikacje lub sklep internetowy. Dzięki niemu można w prosty sposób nie tylko napisać swoją własną witrynę stworzoną od podstaw, ale i ingerować w motywy i szablony stron opartych na najpopularniejszym systemie zarządzania treścią, jakim jest WordPress.

Nasza oferta

Web development

Dowiedz się więcej

Mobile development

Dowiedz się więcej

E-commerce

Dowiedz się więcej

Projektowanie UX/UI

Dowiedz się więcej

Outsourcing

Dowiedz się więcej

SEO

Dowiedz się więcej

Powiązane artykuły

HTML Header – co to jest i jak go poprawnie używać?

21 lut 2025

Nagłówek HTML jest fundamentalnym elementem struktury każdej strony internetowej. Bez niego, przeglądarki i wyszukiwarki internetowe mieliby problem z interpretowaniem informacji zawartych na stronie. W tym artykule przyjrzymy się bliżej temu elementowi, zdefiniujemy jego podstawowe właściwości oraz przedstawimy praktyczne wskazówki, które pomogą w poprawnym i efektywnym użytkowaniu nagłówków HTML.

Tomasz Kozon

#front-end

related-article-image-LAPTOP, HTML Header

Reklamy pop-up a UX: Jak nie zepsuć doświadczenia użytkownika?

21 lut 2025

Reklamy pop-up to najczęstsza metoda monetyzacji, ale czy zawsze skuteczna? Balansowanie między zyskiem a satysfakcją użytkownika to wyzwanie. Jak pogodzić efektywne UX z efektywną strategią reklamową?

Tomasz Kozon

#web-design

SEO i struktura strony: Subdomena kontra podkatalog - co jest lepszym wyborem?

20 lut 2025

Optymalizacja strony pod kątem SEO to zadanie, które niemal zawsze stoi przed twórcami stron internetowych. Nieodpowiednio zaplanowana struktura strony może wpłynąć ujemnie na jej pozycje w wynikach wyszukiwarki. Znane są dwa główne modele struktury strony: subdomeny i podkatalogi. Choć obie mają swoje zalety i wady, nie zawsze jest jasne, który wybór jest lepszy. Spróbujmy rozwikłać tę zagadkę.

Tomasz Kozon

#marketing

Slider na stronie - czy warto go używać, czy może lepiej z niego zrezygnować?

19 lut 2025

Slider na stronie internetowej może przyciągnąć uwagę odwiedzających. To interaktywny element, który prezentuje różnorodne treści w dynamiczny sposób. Zwolennicy twierdzą, że to efektowny sposób na zdobycie zainteresowania użytkowników. Przeciwnicy jednak zauważają, że może rozpraszać i opóźniać ładowanie strony. Czy zatem warto go zastosować? Czy może lepiej z niego zrezygnować? Oto, co powinieneś wiedzieć...

Tomasz Kozon

#web-design

FigJam – Przewodnik po narzędziu do zespołowej współpracy od twórców Figma

18 lut 2025

Zapoznajcie się z FigJam - nowym produktem znanego projektanta interfejsów, Figma. Jest to platforma dedykowana do zespołowej współpracy, integrująca w sobie funkcje brainstormingu, szkicowania i zapewniania sprawnego przepływu pomysłów w Twoim zespole.

Tomasz Kozon

#web-design

Pierwsze kroki z GitHub Pages: Praktyczne wprowadzenie

16 lut 2025

Github Pages to prosty, ale potężny narzędzie, które pozwala na tworzenie i hostowanie stron internetowych bezpośrednio z repozytorium Github. Czy jesteś developerem chcącym pokazać swój projekt, czy blogerem chcącym podzielić się swoją wiedzą - Github Pages jest dla Ciebie. Ten artykuł pomoże Ci w pierwszych krokach z tym serwisem.

Tomasz Kozon

#front-end

Content Planning: Definicja, znaczenie i wpływ na strategię marketingową

16 lut 2025

Planowanie treści to kluczowe zadanie dla każdego marketera. To strukturyzowanie i organizowanie treści w celu poprawy efektywności działań marketingowych. Poprzez celowe tworzenie i dystrybuowanie cennych treści, jesteśmy w stanie zwiększyć zaangażowanie klientów i wpłynąć na poprawę wyników sprzedaży. Ale jakie jest dokładnie znaczenie planowania treści i jaki ma wpływ na ogólną strategię marketingową?

Tomasz Kozon

#marketing

Zobacz wszystkie artykuły powiązane z #Web design