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

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

Lookback w praktyce: metody przeprowadzania badań użyteczności

10 gru 2024

Lookback to narzędzie niezastąpione w badaniach użyteczności stron czy aplikacji. Pozwala na zrozumienie użytkowników zawierając w sobie możliwości testowania na żywo, rejestrowania sesji czy pomiarów analitycznych. W praktyce, odpowiednie wykorzystanie Lookback otwiera drogę do optymalizacji interfejsów, angażowania użytkowników i wyprzedzania problemów. W tym artykule przedstawiamy efektywne metody jego użycia.

Tomasz Kozon

#web-design

related-article-image-Lookback

OutSystems: Co to jest i dlaczego jest jedną z wiodących platform low-code?

7 gru 2024

OutSystems, lider w branży low-code, zmienia sposób, w jaki tworzymy oprogramowanie. Dzięki intuicyjnej platformie, różnorodności możliwości i efektywności, OutSystems odgrywa kluczową rolę w uproszczeniu procesu tworzenia oprogramowania. W tym artykule odkryjemy tajemnicę sukcesu tej wiodącej platformy.

Tomasz Kozon

#web-design

Device Agnostic: Wstęp do koncepcji projektowania niezwiązanego z konkretnym urządzeniem

5 gru 2024

W świecie technologii, gdzie liczba rodzajów urządzeń rośnie w ekspresowym tempie, pojawia się coraz większe zapotrzebowanie na uniwersalne rozwiązania. Jednym z nich jest Device Agnostic - koncepcja projektowania niezależnego od konkretnego urządzenia. Pozwala ona tworzyć aplikacje i strony internetowe, które swobodnie 'poruszają' się między różnymi platformami.

Tomasz Kozon

#web-design

Mapy podróży klienta (User Journey Maps): Efektywne projektowanie doświadczeń użytkownika

4 gru 2024

Zrozumienie potrzeb i oczekiwań użytkowników jest kluczem do konstruowania efektywnych rozwiązań. Dlatego, warto znać narzędzie jakim są 'Mapy Podróży Klienta' (User Journey Maps). Zagwarantują one nie tylko większą satysfakcję odbiorców, lecz przede wszystkim ufność w rozwiązania, które oferujemy. W tym artykule przybliżymy ich istotę i rolę w projektowaniu doświadczeń użytkownika.

Tomasz Kozon

#web-design

Frictionless Navigation: Co to jest i dlaczego jest kluczowe dla UX?

3 gru 2024

W dobie cyfryzacji, nawigacja na stronie internetowej stanowi kluczowy element user experience. To ona odpowiada za bezproblemowe poruszanie się po treściach witryny i przekierowywanie użytkownika do poszczególnych zakładek. Właściwie dostosowana nawigacja potrafi znacząco podnieść użyteczność strony. W naszym artykule dowiesz się więcej na ten temat.

Tomasz Kozon

#web-design

Variable Fonts: Przewodnik po zmiennych czcionkach i ich znaczeniu w web designie

2 gru 2024

Zmienne czcionki rewolucjonizują świat web designu, zapewniając twórcom stron nieskończone możliwości dostosowywania typografii. W tym artykule poznasz zalety korzystania ze zmiennych czcionek, nauczysz się, jak je implementować i dowiesz się, jak mogą one wpłynąć na efektywność Twojego designu.

Tomasz Kozon

#web-design

Capping a UX: Jak ograniczanie liczby wyświetleń reklam kształtuje doświadczenie użytkownika?

1 gru 2024

W dobie rosnącej konkurencji w przestrzeni cyfrowej, UX stało się kluczowym czynnikiem wyróżniającym marki. W tym kontekście, 'capping a UX' - czyli ograniczanie liczby wyświetleń reklam, nabiera szczególnego znaczenia. Pojęcie to odnosi się do strategii mających na celu zwiększenie satysfakcji użytkowników poprzez kontrolowanie ilości i częstotliwości wyświetlanych reklam. Czy to rzeczywiście wpływa na jakość doświadczenia użytkownika? Zapraszamy do lektury.

Tomasz Kozon

#web-design

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