Zawartość:
Czym jest ten język
HTML to język do tworzenia stron internetowych. Jeśli porównasz stronę internetową do domu, HTML będzie jej ramą i ścianami.
Język ten pojawił się w 1991 roku dzięki Timowi Bernersowi-Lee. Naukowiec potrzebował sposobu na udostępnianie dokumentów naukowych przez internet. Tak narodził się HTML – prosty sposób oznaczania tekstu specjalnymi poleceniami – tagami.
Przeglądarki traktują kod HTML jako instrukcje: gdzie umieścić tekst, obrazy i inne obiekty na stronie. Na przykład polecenie <h1>Witaj!</h1> spowoduje, że przeglądarka wyświetli tekst „Witaj!” jako główny nagłówek.
HTML służy do:
- tworzenia struktury witryny;
- Wstawianie obrazów;
- Dodawanie linków;
- Formatowanie tekstu;
- Publikowanie filmów.
Strony internetowe nie mogą istnieć bez HTML — jest on podstawą sieci WWW.
Naucz się pisać strony internetowe i oprogramowanie na kursie „Frontend Developer”
Dowiedz się więcejCo zawiera HTML
HTML to skrót od HyperText Markup Language (język znaczników hipertekstu). Za pomocą języka przeglądarka rozumie, gdzie na stronie powinien znajdować się tekst, obrazy i linki.
Prosty przykład: kiedy czytasz wiadomości w Internecie, widzisz:
- Nagłówek;
- Tekst;
- Zdjęcia;
- Przyciski do nawigacji do innych artykułów.
Wszystko to jest umieszczone na stronie za pomocą HTML. Działa on jako szkielet witryny — określa strukturę i kolejność elementów.
Struktura
Dokument HTML jest jak konstruktor — składa się z kilku wymaganych bloków. Oto główne części dokumentu HTML:
- <!DOCTYPE html> — pierwszy wiersz dokumentu. Informuje przeglądarkę, że jest to plik HTML.
- <html> — główny znacznik, wewnątrz którego znajduje się cała reszta kodu.
- <head> — sekcja z informacjami technicznymi. Tutaj przechowywane są ustawienia strony: tytuł, kodowanie, połączenie stylów.
- <body> — główna część dokumentu. Wszystko, co widzi użytkownik, znajduje się tutaj: tekst, obrazy, przyciski.
- <footer> — dolny, ostatni blok każdego zasobu internetowego.
Oto przykład dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj, świecie!</h1>
</body>
</html>
Podstawowe tagi
HTML ma wiele tagów — podstawowe jednostki strukturalne strony internetowej. Omówimy najważniejsze.
- Nagłówki. Tagi od <h1> do <h6> służą do tworzenia nagłówków. <h1> to główny i największy nagłówek na stronie, a <h6> to najmniejszy i najmniej znaczący. Tagi porządkują i formatują tekst według jego ważności oraz ułatwiają nawigację.
- Akapity. <p> Tag definiuje standardowy akapit tekstu. Oddziela jeden blok informacji tekstowej od drugiego, dzięki czemu tekst staje się czytelny.
- Linki. Tag <a> tworzy linki. Jest on potrzebny do połączenia bieżącej strony z innymi. Jest to ważne dla nawigacji i komunikacji.
- Obrazy. Tag <img> służy do wstawiania obrazów na stronę. Wymaga ścieżki do pliku obrazu i może zawierać dodatkowe informacje. Na przykład tekst alternatywny.
- ListyTagi <ul> i <ol> tworzą odpowiednio listy wypunktowane i numerowane. Pomagają one uporządkować informacje w punkty, ułatwiając ich odbiór.
Pokażemy Ci, jak działają tagi, na przykładzie. Spróbuj uruchomić ten kod w swoim edytorze:
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Tytuł</title>
</head>
<body>
<h1>Nagłówek główny</h1>
<p>Tekst główny</p>
<h2>Podtytuł</h2>
<p>Tekst napisów</p>
<h3>Tekst napisów</h3>
<p>Tekst napisów</p>
<h4>Link</h4>
<p>Opis linku</p>
<p>Przykład linku: <a href=»https://www.example.com»>Link</a></p>
<h5>Obraz</h5>
<p>Opis obrazu</p>
<p>Przykład obrazu: <img src=»https://via.placeholder.com/150″ alt=»Obraz»></p>
<h6>Lista</h6>
<p>Opis listy</p>
<p>Przykład listy wypunktowanej: </p>
<ul>
<li>Pozycja</li>
<li>Pozycja</li>
<li>Pozycja</li>
</ul>
<p>Przykład listy numerowanej: </p>
<ol>
<li>Pozycja</li>
<li>Pozycja</li>
<li>Pozycja</li>
</ol>
</body>
</html>
Atrybuty
Atrybuty w HTML to specjalne „wskazówki” dla tagów. Dodają one szczegóły do elementów, aby działały zgodnie z przeznaczeniem. Na przykład pomagają ustawić adres linku lub wskazują ścieżkę do obrazu.
Atrybuty zapewniają elastyczność elementów. Bez nich wiele funkcji HTML byłoby niedostępnych.
- href jest używany w tagu link. Atrybut określa adres witryny, do której prowadzi link. Na przykład ten kod tworzy niebieski, klikalny tekst: <p>Przykładowy link: <a href=»https://www.example.com«>Link</a></p>
- src określa ścieżkę do obrazu. Przykład użycia w kodzie: <img src=»image.jpg» alt=»Opis obrazu»>
Atrybuty są zawsze uwzględniane w znaczniku otwierającym i zapisywane w formacie nazwa = "wartość". Pomagają nadać elementom strony interaktywność i dostarczać informacji, co jest ważne dla doświadczenia użytkownika.
Modele blokowe i liniowe
HTML pozwala kontrolować układ elementów na stronie internetowej za pomocą modeli blokowych i liniowych. Modele te określają, jak dokładnie różne bloki treści oddziałują na siebie.
Elementy blokowe to elementy, które zajmują całą szerokość kontenera, w którym się znajdują. Zaczynają się w nowym wierszu, tworząc widoczny blok na stronie. Przykłady takich elementów: <div>, <h1>, <p>. Wizualnie przypominają cegły ułożone jedna na drugiej.
Kontener to element, który może zawierać inne elementy. Pomaga grupować i organizować treść.
Elementy śródliniowe są umieszczane w jednym wierszu. Zajmują tylko tyle miejsca, ile potrzebują, co pomaga zachować ogólną strukturę tekstu. Elementy takie jak <span>, <a>, <strong> są umieszczane w wierszu bez tworzenia przerw.
Różnice między modelami: Elementy blokowe zaczynają się w nowym wierszu i rozciągają się na całą szerokość kontenera nadrzędnego. Elementy inline są wyrównane i zajmują tylko swoją szerokość.
Czym jest CSS
HTML i CSS są zazwyczaj używane razem do tworzenia stron internetowych. HTML określa strukturę strony — jest jej „szkieletem”. CSS natomiast określa wygląd tego „szkieletu”. Nadaje stronie internetowej style, kolory, czcionki i marginesy.
CSS to język, który pozwala zmieniać wygląd elementów HTML. Bez CSS strony internetowe wyglądałyby jak pusty tekst bez żadnych dekoracji.
Dzięki CSS programiści pracują z następującymi elementami:
- Kolory — ustaw kolor tła lub tekstu.
- Czcionki — wybierz styl i rozmiar czcionki.
- Wcięcia i marginesy — pozycjonują elementy na stronie.
Na przykład, ulepszmy nasz poprzedni kod, używając CSS:
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» treść=»szerokość=szerokość-urządzenia, skala-początkowa=1.0″>
<tytuł>Tytuł</tytuł>
<styl>
ciało {
rodzina czcionek: Arial, sans-serif;
wysokość linii: 1,6;
margines: 0;
wypełnienie: 20px;
kolor tła: #f4f4f4;
kolor: #333;
h1, h2, h3, h4, h5, h6 {
kolor: #4CAF50;
p {
margines-dolny: 20px;
a {
kolor: #1E90FF;
dekoracja tekstu: brak;
a:hover {
dekoracja tekstu: podkreślenie;
img {
maksymalna szerokość: 100%;
wysokość: auto;
wyświetlanie: blokowe;
margines: 20px 0;
ul, ol {
margin-bottom: 20px;
padding-left: 20px;
ul li, ol li {
margin-bottom: 10px;
kod {
kolor-tła: #eee;
wypełnienie: 2px 4px;
promień obramowania: 4px;
</style>
</head>
<body>
<h1>Nagłówek główny</h1>
<p>Tekst główny</p>
<h2>Podtytuł</h2>
<p>Tekst podtytułu</p>
<h3>Podtytuł</h3>
<p>Podtytuł tekstowy</p>
<h4>Link</h4>
<p>Link Opis</p>
<p>Przykład łącza: <a href=»https://www.example.com»>Link</a></p>
<h5>Obraz</h5>
<p>Opis obrazu</p>
<p>Przykład obrazu: <img src=»https://via.placeholder.com/150″ alt=»Obraz»></p>
<h6>Lista</h6>
<p>Opis listy</p>
<p>Przykład listy wypunktowanej: </p>
<ul>
<li>Pozycja</li>
<li>Pozycja</li>
<li>Pozycja</li>
</ul>
<p>Przykładowa lista numerowana:</p>
<ol>
<li>Przedmiot</li>
<li>Przedmiot</li>
<li>Przedmiot</li>
<li>Przedmiot</li>
</ol>
</body>
</html>
Jak widać, cały kod CSS jest dodawany wewnątrz znacznika <style>. Oto, co nasz kod wyświetla w przeglądarce:
Czym jest HTML5
HTML5 to najnowsza wersja języka znaczników stron internetowych. Dodaje nowe funkcje do tworzenia witryn internetowych. HTML5 sprawia, że kod jest przejrzysty i wygodny dla programistów. Najważniejsze ulepszenia obejmują:
- Tagi strukturalne. HTML5 dodaje specjalne znaczniki do oznaczania części strony:
- <header> — dla nagłówka witryny.
- <footer> — dla stopki.
- <article> — dla artykułów.
- <section> — dla sekcji.
- Multimedia.Tagi do pracy z dźwiękiem i obrazem: <video src=»film.mp4″>Video</video><audio src=»song.mp3″>Music</audio>
- Nowe typy pól formularzy. date — do wyboru daty, email — do wprowadzenia adresu e-mail, tel — do numeru telefonu, color — do wyboru koloru.
Obecnie ta wersja HTML jest standardem w tworzeniu stron internetowych.
Przydatne materiały od redaktorów Skillbox.by
HTML jest podstawą wszystkich stron internetowych. Definiuje strukturę treści i umożliwia przeglądarkom poprawne wyświetlanie informacji. Bez HTML stworzenie jakiegokolwiek zasobu internetowego byłoby niemożliwe.
Hypertext Markup Language to punkt wyjścia dla każdego, kto chce opanować technologie internetowe. Znajomość HTML to pierwszy krok do opanowania złożonych narzędzi i języków programowania. Możesz to zrobić z pomocą książek, filmów, stron internetowych i przydatnych artykułów – podstawy HTML opanujesz w kilka dni. Zebraliśmy materiały, które Ci w tym pomogą:
Literatura:
- „HTML i CSS: Tworzenie i projektowanie stron internetowych” Johna Ducketta – książka jest odpowiednia dla początkujących i wyjaśnia podstawy prostym językiem.
- HTML5: Kieszonkowy podręcznik autorstwa Jennifer Robbins — Ta książka omawia najnowsze funkcje HTML i idealnie nadaje się do szybkiej nauki.
- Learning HTML5 autorstwa Bruce'a Lawsona i Remi Sharp — Ta książka pokazuje, jak używać HTML5 do tworzenia stron internetowych.
Witryny:
- developer.mozilla.org — Dokumentacja HTML.
- ru.stackoverflow.com— Lista całej dokumentacji HTML i dokumentów referencyjnych.
Kanały Telegramu:
- Wywiad frontendowy — wywiady Javascript / Html / CSS — kanał przygotowujący do rozmów kwalifikacyjnych front-end.
- Biblioteka front-end | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js — artykuły i różnorodne materiały na temat tworzenia stron internetowych.
Opanuj zawód „Frontend developera od podstaw do PRO” dzięki Skillbox
Nauczysz się JavaScript, TypeScript, Ionic i innych popularnych technologii do tworzenia aplikacji internetowych. Zbuduj portfolio, naucz się pracować w zespole i rozpocznij karierę jako front-end developer.
Uzyskaj dostęp