Co to jest HTML?
HTML oznacza język znaków hipertekstowych _ _ _ _
HTML to standardowy język znaczników dla stron internetowych
Elementy HTML są budulcem stron HTML
Elementy HTML są reprezentowane przez tagi <>
Elementy HTML
Element HTML to tag początkowy i tag końcowy z treścią pomiędzy:
<h1>To jest nagłówek</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
Atrybuty HTML
- Elementy HTML mogą mieć atrybuty
- Atrybuty dostarczają dodatkowych informacji o elemencie
- Atrybuty występują w parach nazwa/wartość, np . charset="utf-8"
Prosty dokument HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Przykład wyjaśniony
Elementy HTML to elementy składowe stron HTML.
- Deklaracja
<!DOCTYPE html>definiuje ten dokument jako HTML5 - Element
<html>jest głównym elementem strony HTML - Atrybut określa język
langdokumentu - Element
<meta>zawiera metainformacje o dokumencie charsetAtrybut określa zestaw znaków używany w dokumencie- Element
<title>określa tytuł dokumentu - Element
<body>zawiera widoczną zawartość strony - Element
<h1>definiuje duży nagłówek - Element
<p>definiuje akapit
Dokumenty HTML
Wszystkie dokumenty HTML muszą zaczynać się od deklaracji typu dokumentu: <!DOCTYPE html>.
Sam dokument HTML zaczyna się <html>i kończy na </html>.
Widoczna część dokumentu HTML znajduje się pomiędzy <body>i </body>.
Struktura dokumentu HTML
Poniżej znajduje się wizualizacja dokumentu HTML (strony HTML):
Uwaga: W przeglądarce wyświetlana jest tylko zawartość wewnątrz sekcji <body> (biały obszar powyżej).
Nagłówki HTML
Nagłówki HTML są definiowane za pomocą znaczników <h1>do .<h6>
<h1>definiuje najważniejszy nagłówek. <h6>definiuje najmniej ważny nagłówek:
Przykład
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Akapity HTML
Paragrafy HTML są definiowane za pomocą <p>tagów:
Przykład
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Linki HTML
Linki HTML są zdefiniowane za pomocą <a>tagów:
Przykład
<a href="https://www.w3schools.com">This is a link</a>
Miejsce docelowe łącza jest określone w hrefatrybucie.
Obrazy HTML
Obrazy HTML są definiowane za pomocą <img>znaczników.
Plik źródłowy ( src), tekst alternatywny ( alt),
widthi heightsą dostarczane jako atrybuty:
Przykład
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
Przyciski HTML
Przyciski HTML są zdefiniowane za pomocą <button>tagów:
Przykład
<button>Click me</button>
Listy HTML
Listy HTML są definiowane za pomocą znaczników <ul>(nieuporządkowana/lista punktowana) lub
<ol>(uporządkowana/lista numerowana), po których następują <li>
znaczniki (elementy listy):
Przykład
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Tabele HTML
Tabela HTML jest zdefiniowana za pomocą <table>znacznika.
Wiersze tabeli są definiowane za pomocą <tr>znaczników.
Nagłówki tabel są definiowane za pomocą <th>tagów. (domyślnie pogrubiony i wyśrodkowany).
Komórki tabeli (dane) są definiowane za pomocą <td>znaczników.
Przykład
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Programowanie HTML
Każdy element HTML może mieć atrybuty .
W przypadku tworzenia i programowania stron internetowych najważniejszymi atrybutami są id i klasa. Te atrybuty są często używane do rozwiązywania problemów związanych z manipulacjami na stronach internetowych za pomocą programu.
| Atrybut | Przykład |
|---|---|
| ID | < identyfikator tabeli ="tabela01" |
| klasa | <p class ="normalny"> |
| styl | <p style ="font-size:16px"> |
| dane- | <div data -id="500"> |
| na kliknięcie | <input onclick ="myFunction()"> |
| po najechaniu myszą | <a onmouseover ="this.setAttribute('style','color:red')"> |
Pełny samouczek HTML
To był krótki opis HTML.
Aby zapoznać się z pełnym samouczkiem HTML, przejdź do Samouczka HTML W3Schools .
Aby uzyskać pełne odniesienie do tagów HTML, przejdź do W3Schools Tag Reference .