HTML jest kręgosłupem dzisiejszego Internetu. Miliony stron internetowych razem utworzyły Internet. Gdzie HTML jest budulcem wszystkich tych stron. Dwadzieścia lat temu, nawet jeśli jesteś tylko blogerem hobbystą, musiałeś znać trochę kodowania stron internetowych, aby się chronić lub dodać prostą funkcję do swojej witryny. Ale teraz jest tak wiele edytorów i wtyczek, że nawet znajomość podstaw HTML nie jest już wymagana.
Problem w tym, że jeśli nie znasz kilku podstaw, możesz łatwo wpaść w poważne kłopoty na swoim blogu i będziesz musiał zatrudnić drogiego programistę, aby naprawił to, co może być drobnym problemem. Co więcej, wprowadzanie zmian na blogu, takich jak dodawanie niestandardowego widżetu tekstowego, wymaga odrobiny wiedzy.
Jeśli uważasz, że układ treści nie jest prawidłowy, znajomość języka HTML może pomóc Ci go poprawić.
Zanim zaczniesz – podstawy HTML
Co to jest HTML?
HTML to skrót od Hyper Text Markup Ljęzyk. Jest to standardowy język do tagowania treści dla przeglądarek internetowych.
HTML jest reprezentowany przez „Elementy”. Elementy są również znane jako „Tagi”.
Dlaczego HTML jest potrzebny?
Przeglądarki internetowe mogą renderować witrynę internetową tylko wtedy, gdy jest ona napisana w obsługiwanym przez nie języku. HTML jest najpopularniejszym językiem znaczników i ma najwyższą akceptację w przeglądarkach internetowych.
Dlatego potrzebujesz HTML.
Czy w HTML rozróżniana jest wielkość liter?
HTML nie rozróżnia wielkości liter. Ale najlepszą praktyką jest pisanie HTML z właściwymi wielkościami liter.
Kroki tworzenia pierwszego pliku HTML
Możesz utworzyć podstawowy plik HTML za pomocą Notatnika na swoim komputerze. Ale będzie to bolesne przy pisaniu wielu linijek kodu.
Potrzebujesz edytora kodu. Dobry edytor kodu ułatwi pisanie i organizowanie dużych kodów. Używam i polecam Notepad++ (darmowy i open-source) do pisania języków internetowych. Istnieją inne edytory, których możesz użyć, takie jak Sublime Text, Atom itp.
Oto, co musisz zrobić:
- Zainstaluj edytor kodu
- Otwórz to
- Utwórz nowy plik
- Zapisz jako plik .html
1. Witaj świecie!
Skopiuj i wklej poniższy kod do nowego pliku HTML i zapisz go. Teraz uruchom go w przeglądarce internetowej.
Kod HTML
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Wyjście:
Gratulacje! Stworzyłeś swój pierwszy plik HTML. Nie musisz go jeszcze rozumieć. Omówimy go wkrótce.
Zrozumienie struktury HTML
Każdy plik HTML ma wspólną, nagą strukturę. To tutaj wszystko się zaczyna. I każda duża strona kodów trafi do tej struktury po przycięciu.
Spróbujmy więc zrozumieć to z kodu „Hello World!”. Następujące elementy są obowiązkowymi częściami każdego pliku HTML.
- = Jest to deklaracja dla przeglądarki, że jest to plik HTML. Musisz to określić przed etykietka.
- = To jest główny element pliku HTML. Wszystko, co piszesz, trafia pomiędzy I .
- = To jest część meta informacji dla przeglądarki. Kody wewnątrz tego znacznika nie mają wyjścia wizualnego.
- = To jest część, którą renderuje przeglądarka internetowa. To, co dokładnie widzisz na stronie internetowej, to renderowanie kodów pomiędzy I .
2. Znaczniki HTML
HTML to współpraca setek różnych tagów. Musisz nauczyć się, jak one działają. Musisz również upewnić się, że użyto ich we właściwy sposób.
Znaczniki HTML zazwyczaj mają znacznik otwierający i zamykający. Znacznik otwierający ma słowo kluczowe otoczone znakiem mniejszym (<) i większym (>). Znacznik zamykający ma wszystko to samo, poza dodatkowym ukośnikiem (/) po znaku mniejszym (<).
Znaczniki nagłówkowe
Wszystkie znaczniki nagłówka znajdują się pomiędzy I . Zawierają meta informacje dla przeglądarek internetowych i wyszukiwarek. Zasadniczo nie mają wyjścia wizualnego.
Tag tytułu definiuje tytuł strony internetowej, który jest widoczny na karcie przeglądarki. Informacje te są wykorzystywane przez programy internetowe i wyszukiwarki. Możesz mieć najwyższy jeden tytuł na plik HTML.
Kod:
<title>My first web page</title>
Tag link łączy Twoją stronę HTML z zasobami zewnętrznymi. Jego głównym zastosowaniem jest łączenie strony HTML z arkuszami stylów CSS. Jest to tag samozamykający się i nie potrzebuje zakończenia Tutaj rel oznacza relację z plikiem, a src oznacza źródło.
Kod:
<link rel="stylesheet" type="text/css" src="style.css">Meta to kolejny samozamykający się tag, który dostarcza meta informacji o pliku html. Wyszukiwarki i inne usługi sieciowe korzystają z tych informacji. Meta tagi są niezbędne, jeśli chcesz zoptymalizować swoją stronę pod kątem wyszukiwarek.
Kod:
<meta name="description" content="This is the short description that search engines show"Tag script jest używany do dołączania skryptu po stronie serwera lub tworzenia linku do zewnętrznego pliku skryptu. Może mieć dwa atrybuty w tagu otwierającym. Jeden to typ, a drugi to źródło (src).
Kod:
<script type="text/javascript" src="scripts.js"></script>Tag Noscript działa, gdy skrypty są wyłączone w przeglądarce internetowej. Sprawia, że strona jest zgodna z tymi, którzy nie zezwalają na skrypty w swoich przeglądarkach internetowych.
Kod:
<noscript><p>Alas! Scripts are disabled.</p></noscript>Znaczniki ciała
Wszystkie znaczniki ciała znajdują się pomiędzy I . Mają wizualne wyniki. To tutaj wykonuje się najwięcej pracy. Musisz użyć tych tagów, aby ustrukturyzować treść swojej strony głównej.
Do
Oto tagi nagłówków. Najważniejszy nagłówek jest oznaczony tagiem i najmniej ważne z . Powinieneś używać ich w odpowiedniej hierarchii.
Kod:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>Wyjście:
Formatowanie znaczników
Tekst w pliku html można sformatować za pomocą wielu znaczników formatowania. Będzie to konieczne, gdy chcesz wyróżnić słowo lub wiersz z treści.
Kod:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>Wyjście:
Możesz odchylić niektóre kody od renderowania, używając znacznika komentarza. Kod pojawi się w kodzie źródłowym, ale nie zostanie wyrenderowany. Głównym zastosowaniem tego znacznika jest tworzenie dokumentacji plików html do wykorzystania w przyszłości.
Przykład:
<!-- <p>You can comment out any code by surrounding them in this way</p> -->Inne ważne znaczniki HTML
Anchor to bezcenny tag, który jest używany niemal wszędzie. Nie zobaczysz żadnej strony internetowej online bez co najmniej jednego linku anchor.
Struktura jest taka sama. Ma część otwierającą i zamykającą . Tekst, który chcesz zakotwiczyć, znajduje się pomiędzy i .
Istnieją pewne atrybuty, które określają, gdzie i jak użytkownik przejdzie po kliknięciu.
- ahref=” “ = Definiuje link docelowy. Link znajduje się między cudzysłowami.
- cel=” “ = Określa, czy adres URL zostanie otwarty w nowej karcie przeglądarki czy w tej samej karcie. target="_blank" dotyczy nowej karty, a target="_self" otwiera ją w tej samej karcie.
- rel=” “ = Definiuje relację bieżącej strony ze stroną linkowaną. Jeśli nie ufasz stronie linkowanej, możesz zdefiniować rel="nofollow".
Kod:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>Wyjście:
Tag obrazkowy to kolejny ważny tag, bez którego nie sposób wyobrazić sobie wielu stron internetowych opartych na obrazach.
jest samozamykającym się tagiem. Nie wymaga tradycyjnego zamykania jak . Istnieją pewne atrybuty, które musisz znać, zanim będziesz mógł używać go poprawnie.
- źródło=” “ = To służy do definiowania linku źródłowego obrazu. Umieść link dokładnie między podwójnymi cudzysłowami.
- alt=” “ = Oznacza tekst alternatywny. Kiedy twój obraz się nie ładuje, ten tekst da użytkownikom pojęcie o brakującym obrazie.
- szerokość=” “ = Definiuje szerokość obrazu w pikselach.
- Wysokość=” “ = Definiuje wysokość obrazu w pikselach.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />Wyjście:
Wskazówki: Chcesz wstawić klikalny obraz? Otocz kod obrazu tagiem. Zobacz, jak to się uda.
Lub
Znacznik listy służy do tworzenia listy elementów. oznacza listy uporządkowane (listy numerowane) i oznacza listy nieuporządkowane (punkty wypunktowane).
Elementy listy wewnątrz Lub jest oznaczony tagiem . li oznacza listę. Możesz mieć ich tyle, ile chcesz jak chcesz wewnątrz rodzica Lub etykietka.
Kod:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Wyjście:
Tag Table służy do tworzenia tabeli danych. Istnieje kilka tagów wewnętrznego poziomu, które definiują nagłówki tabeli, wiersze i kolumny.
jest zewnętrznym kodem nadrzędnym. W tym tagu, oznacza rząd stolików, oznacza kolumnę tabeli i oznacza nagłówek tabeli.
Kod:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>Wyjście:
Uwaga: Wartości wewnątrz pierwszego są nagłówkami. Więc użyliśmy który stosuje efekt pogrubienia tekstu.
Grupowanie tabel
Możesz rozszerzyć funkcjonalność tabeli, używając elementów grupowania tabel. Będą chwile, gdy będziesz musiał utworzyć duże tabele, które podzielą się na wiele stron.
Grupując dane tabeli w nagłówku, treści i stopce, możesz zezwolić na niezależne przewijanie. Część nagłówka i treści zostanie wydrukowana na każdej stronie, na której znajduje się tabela.
Tagi grupowania tabel to:
- = Do zawijania nagłówków tabeli. Drukuje się na każdej podzielonej stronie tabeli.
- = Do pakowania głównych danych tabeli. Możesz mieć ich tyle, ile chcesz jak potrzebujesz. A tag oznacza oddzielną grupę danych.
- = Do zawijania informacji stopki tabeli. Drukuje się na każdej podzielonej stronie tabeli.
Należy pamiętać, że nie jest obowiązkowe używanie grupowania. Można go użyć, aby uczynić większe tabele bardziej czytelnymi. Podczas gdy niektórzy specjalni programiści wyraźnie używają tych tagów jako selektorów CSS.
Oto jak możemy pogrupować naszą przykładową tabelę , I :
Kod:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>Wyjście:
Element formularza jest używany do tworzenia interaktywnych formularzy dla stron internetowych. Formularz HTML zawiera kilka następujących po sobie elementów. Na przykład: , itd .
Atrybut akcji w formularzu jest bardzo ważny. Wskazuje na stronę serwera lub stronę zewnętrzną w celu przetworzenia informacji. W celu przetworzenia należy najpierw zdefiniować metodę.
Możesz użyć jednej z dwóch metod, get lub post. Get wysyła wszystkie informacje w formacie URL, podczas gdy Post wysyła informacje w treści wiadomości.
Istnieje wiele typów danych wejściowych dla formularzy. Podstawowym typem danych wejściowych jest tekst. Jest on zapisywany jako . Typy mogą być również radio, pole wyboru, e-mail itd. Na dole powinno być pole typu Submit, aby utworzyć przycisk Submit.
tag służy do tworzenia etykiet i kojarzenia ich z danymi wejściowymi. Reguła kojarzenia etykiet z danymi wejściowymi polega na tym, że mają one tę samą wartość w atrybucie for=” ” etykiety i atrybucie id=” ” danych wejściowych.
Kod:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>Wyjście:
Uwaga: Wskazałem akcję o wartości null, ponieważ nie była ona połączona z żadnym serwerem w celu przetworzenia informacji.
3. Atrybuty HTML
Atrybuty są jednym z typów modyfikatorów dla tagów HTML. Dodają nowe konfiguracje do tagów HTML.
Atrybut wygląda jak attributename=” ” i znajduje się w otwierającym znaczniku HTML. Wartość atrybutu znajduje się między podwójnymi cudzysłowami.
id=”” i klasa=””
id i class to identyfikatory znaczników HTML. Różne nazwy są przypisane różnym elementom HTML za pomocą identyfikatorów. Możesz użyć jednego identyfikatora klasy dla wielu elementów. Ale nie możesz użyć jednego identyfikatora id dla wielu elementów.
Kod:
<h1 class="heading">This is the main title</h1>href=””
href oznacza Hypertext Reference. Kierują użytkowników do linków referencyjnych. Tag kotwicy używa href, aby kierować użytkowników do docelowego adresu URL.
Kod:
<a href="https://www.google.com/">Google</a>źródło=””
src oznacza źródło. Definiuje źródło mediów lub zasobu, którego używasz w pliku HTML. Źródło może być lokalnym lub zewnętrznym adresem URL.
Kod:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt=””
alt oznacza alternatywny. Jest to tekst zapasowy, który jest używany, gdy element HTML nie może się załadować.
Kod:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />styl=””
atrybut style jest często używany w znacznikach HTML. Wykonuje on zadanie CSS w znaczniku HTML. Twoje właściwości stylu znajdują się między cudzysłowami.
Kod:
<h2 style="color:red">This is another title</h2>4. Wyświetlanie kodu: blokowe czy liniowe
Niektóre elementy zawsze zaczynają się w nowej linii i zajmują całą dostępną szerokość. Są to elementy „Block”.
Były: , , - , formularz itp.
Niektóre elementy zajmują tylko wymaganą przestrzeń i nie zaczynają się w nowym wierszu. Są to elementy „Inline”.
Były: , , , , itp.
Będziesz musiał odróżnić elementy blokowe od inline, gdy będziesz używać stylów CSS. W tym przewodniku HTML nie jest to konieczne.
Kod:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>Wyjście:
5. Podwójny cudzysłów kontra pojedynczy cudzysłów w HTML
To pytanie jest bardzo oczywiste. Czego należy używać w HTML? Pojedynczego cudzysłowu czy podwójnego cudzysłowu? Ludzie wydają się używać obu, ale który jest poprawny?
W HTML, pojedynczy cudzysłów i podwójny cudzysłów są takie same. Nie robią żadnej różnicy w wyjściu.
Możesz użyć dowolnego, który wolisz. Ale mieszanie obu na stronie kodów jest uważane za złą praktykę. Powinieneś być konsekwentny w przypadku każdego z nich.
6. Semantyczny HTML kontra niesemantyczny HTML
Semantyczny HTML to najnowsza wersja HTML, nazywana również HTML5. Jest to rozwinięta wersja niesemantycznego HTML i XHTML.
Dlaczego HTML5 jest lepszy? W poprzednich wersjach elementy HTML były identyfikowane przez nazwy id/class. Na przykład: został uznany za artykuł.
W HTML5, tag reprezentuje sam siebie jako artykuł i nie wymaga żadnego identyfikatora/klasy.
Ze względu na HTML5, teraz wyszukiwarki i inne aplikacje internetowe mogą lepiej zrozumieć stronę internetową. Semantyczne strony internetowe okazały się lepsze dla SEO.
Oto lista kilku popularnych tagów HTML5:
- = Służy do pakowania głównej treści, którą chcesz pokazać widzom.
- = Służy do oznaczania części nagłówka treści, takiej jak tytuł lub metadane autora.
- = Określa użytkownikom treść zdefiniowaną przez użytkownika lub niezależną.
- = Może grupować dowolny kod, taki jak nagłówek, stopka lub pasek boczny. Można powiedzieć, że jest to forma semantyczna div.
- = W tym miejscu należy umieścić treść stopki, wyłączenie odpowiedzialności lub tekst dotyczący praw autorskich.
- = Umożliwia wstawianie plików audio bez konieczności korzystania z wtyczek.
- = Lubię , możesz wstawiać filmy używając tego tagu bez problemów z wtyczką.
Prosta struktura HTML5 wyglądałaby następująco:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. Walidacja HTML
Większość profesjonalistów internetowych weryfikuje swój kod po jego ukończeniu. Dlaczego konieczne jest weryfikowanie kodu, skoro działa on poprawnie?
Istnieją dwa możliwe powody weryfikacji kodów:
- Pomoże Ci to uczynić Twój kod kompatybilnym z wieloma przeglądarkami i platformami. Kod może nie wyświetlać żadnego błędu w Twojej bieżącej przeglądarce, ale może wyświetlać się w innej. Walidacja kodu to naprawi.
- Wyszukiwarki i inne programy internetowe mogą przestać indeksować Twoją stronę, jeśli zawiera ona błędy. Możesz potwierdzić poprzez walidację, że nie ma w niej żadnych poważnych błędów.
W3C Validator to najpopularniejsza usługa walidacji kodu. Mają kilka metod walidacji kodów. Możesz przesłać plik lub bezpośrednio wprowadzić kod do ich silnika walidacji.
Kolejny krok: od pisania kodu HTML do tworzenia i hostowania witryny internetowej
Teraz, gdy masz solidne zrozumienie podstaw HTML, jesteś na dobrej drodze do tworzenia funkcjonalnych, dobrze ustrukturyzowanych stron internetowych. Niezależnie od tego, czy kontynuujesz kodowanie ręcznie, czy wolisz bardziej uproszczone podejście, istnieje wiele narzędzi, które pomogą Ci wcielić Twoje projekty w życie.
Jeśli chcesz tworzyć strony internetowe bez zagłębiania się w kod, rozważ zapoznanie się z nasza lista najlepszych kreatorów stron internetowych bez kodu. Te platformy umożliwiają łatwe projektowanie i uruchamianie profesjonalnych witryn internetowych przy użyciu intuicyjnych interfejsów typu „przeciągnij i upuść” — idealnych do szybkiego przekształcania pomysłów w rzeczywistość bez poświęcania elastyczności.
Dla tych, którzy są gotowi, aby uruchomić swoje projekty HTML, wybór odpowiedniej usługi hostingowej jest kluczowy. Sprawdź niektóre z najlepsi dostawcy hostingu statycznych stron internetowych w tym przewodniku aby znaleźć niedrogie opcje, które idealnie uzupełnią Twoje ręcznie kodowane strony.
Bez względu na to, którą ścieżkę wybierzesz, połączenie umiejętności HTML z odpowiednimi narzędziami i rozwiązaniami hostingowymi stworzy podwaliny Twojej obecności online. Miłego kodowania!
