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ę?

Powiązane oferty pracy

React.js developer (mid)

UOP:

7000 - 15000 PLN brutto

Pokaż wszystkie oferty

Powiązane case studies

Strony internetowe CeeCam

UX/UI, Web development

PolandBuild - wyszukiwarka nieruchomości

Web development

Pokaż wszystkie case study

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 początkujących

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

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.

Powiązane artykuły

Co to jest Design Token?

23 lis 2023

Design Token staje się niezastąpionym narzędziem dla projektantów XXI wieku. Wpływa na efektywność pracy i zapewnia spójność designu na różnych platformach. Pozwala na tworzenie skutecznych algorytmów, które pomagają dostosować interfejs do specyficznych potrzeb użytkownika. Dowiedz się więcej o tej technologii, która przekształca świat projektowania.

Tomasz Kozon

#web-design

related-article-image-Design Tokeny w projektowaniu UI/UX

Web Usability - jak zwiększyć wygodę użytkowania strony internetowej?

23 lis 2023

Web usability, czyli użyteczność strony internetowej, jest kluczowym elementem, na który twórcy stron internetowych muszą zwrócić szczególną uwagę. Poprawia nie tylko interakcję użytkowników z danym witryną, ale także zwiększa zadowolenie z użytkowania. W tym artykule odkryjemy tajemnice związane z zwiększaniem komfortu i wygody korzystania ze stron internetowych.

Tomasz Kozon

#web-design

PostCSS - co to jest i jak zacząć?

23 lis 2023

Rozpoczynasz pracę z PostCSS - potężnym narzędziem pomagającym w transpilacji CSS, ale nie wiesz, od czego zacząć? Ten artykuł to Twoj klucz do zrozumienia podstaw i efektywnego startu. Poznasz możliwości, jakie otwiera PostCSS oraz dowiesz się, jak szybko zacząć go używać w codziennej pracy.

Tomasz Kozon

#front-end

Hybrydowe Aplikacje: Kiedy są najlepszym wyborem?

22 lis 2023

Hybrydowe aplikacje mobilne, łączące elementy natywnych i internetowych rozwiązań, zyskują na popularności. To interaktywne narzędzia, które umożliwiają szybkie i skuteczne osiągnięcie celów biznesowych. Kiedy jednak są one najlepszym wyborem? Czy zawsze warto postawić na hybrydę? Na te pytania postaramy się odpowiedzieć w poniższym artykule.

Tomasz Kozon

#mobile

Kapitaliki w Web Designie: Istotność i wpływ na użytkownika

22 lis 2023

Kapitaliki - wydawałoby się drobny element estetyczny w web designie, mają jednak zdecydowany wpływ na percepcję strony przez użytkownika. Stanowią znaczący aspekt doświadczenia użytkownika, wpływając na czytelność, utrzymanie uwagi i ogólną estetykę strony. W tym artykule przybliżymy ich naturę, znaczenie oraz skutki ich zastosowania w projekcie webowym.

Tomasz Kozon

#web-design

Wireframing - fundament w procesie budowy nowoczesnych aplikacji

21 lis 2023

Wireframing to kluczowy etap w procesie budowy aplikacji, niezależnie od jej skomplikowania i przeznaczenia. Te cyfrowe szkielety są fundamentem, na którym konstruowane są nowoczesne aplikacje. Definiują one strukturę, układ i działanie interfejsów, wpływając bezpośrednio na jakość i funkcjonalność finalnego produktu. Wireframing to niezastąpione narzędzie każdego twórcy oprogramowania.

Tomasz Kozon

#web-design

Co to jest DaisyUI?

17 lis 2023

DaisyUI to popularna, lekka i konfigurowalna biblioteka komponentów dla Tailwind CSS, zaprojektowana z myślą o zwiększeniu produktywności i ułatwieniu projektowania interfejsów użytkownika. Zawiera gotowe do użycia komponenty, które można łatwo dostosować, co pozwala twórcom szybko tworzyć atrakcyjne i spójne interfejsy.

Tomasz Kozon

#web-design

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

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

Web design

2 minuty czytania

Tomasz Kozon

21 lut 2022

html5

css3

wordpress

Spis treści

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

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

Powiązane oferty pracy

React.js developer (mid)

UOP:

7000 - 15000 PLN brutto

Pokaż wszystkie oferty

Powiązane case studies

Strony internetowe CeeCam

UX/UI, Web development

PolandBuild - wyszukiwarka nieruchomości

Web development

Pokaż wszystkie case study

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

html dla początkujących

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

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

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.

Powiązane artykuły

Co to jest Design Token?

23 lis 2023

Tomasz Kozon

#web-design

Web Usability - jak zwiększyć wygodę użytkowania strony internetowej?

23 lis 2023

Tomasz Kozon

#web-design

PostCSS - co to jest i jak zacząć?

23 lis 2023

Tomasz Kozon

#front-end

Hybrydowe Aplikacje: Kiedy są najlepszym wyborem?

22 lis 2023

Tomasz Kozon

#mobile

Kapitaliki w Web Designie: Istotność i wpływ na użytkownika

22 lis 2023

Tomasz Kozon

#web-design

Wireframing - fundament w procesie budowy nowoczesnych aplikacji

21 lis 2023

Tomasz Kozon

#web-design

Co to jest DaisyUI?

17 lis 2023

Tomasz Kozon

#web-design

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