Co to jest język HTML?
HTML to język znaczników używany do tworzenia stron internetowych. Znaczniki HTML pozwalają na strukturyzację i formatowanie treści, takich jak tekst, obrazy i linki, oraz dodawanie interaktywnych elementów, takich jak formularze. Przeglądarki internetowe interpretują kod HTML i wyświetlają stronę internetową zgodnie z określonymi przez nie regułami.
Co to jest znacznik HTML lub tag HTML?
Znacznik HTML to element składniowy języka HTML, który umożliwia definiowanie i formatowanie zawartości strony internetowej. Każdy znacznik HTML zaczyna się od znaku „<” i kończy znakiem „>”. Znacznik zamykający ma dodatkowo ukośnik przed nazwą, np. „</nazwa_znacznika>”. Pomiędzy znacznikami umieszcza się zawartość, która ma być wyświetlana na stronie internetowej. Na przykład, znacznik <p> oznacza akapit, a zawartość umieszczona między znacznikami <p> i </p> będzie wyświetlana jako tekst w akapicie. Istnieje wiele różnych znaczników HTML, które pozwalają na definiowanie tekstu, obrazów, linków, formularzy i innych elementów strony internetowej.
Atrybuty znaczników HTML
Atrybuty znaczników HTML to parametry, które określają dodatkowe informacje o danym elemencie HTML. Atrybuty zawsze umieszcza się wewnątrz znacznika i zaczyna się od nazwy atrybutu, po której następuje znak równości „=” oraz wartość atrybutu umieszczona w cudzysłowie. Przykładowo, atrybut „src” w znaczniku <img> określa źródło obrazka, a atrybut „href” w znaczniku <a> określa adres URL, do którego ma prowadzić link. Atrybuty mogą również służyć do określania stylów CSS dla danego elementu, np. atrybut „style” w znaczniku <p> pozwala na zdefiniowanie stylu tekstu w akapicie. Atrybuty znaczników HTML są ważnym elementem pozwalającym na precyzyjne określanie wyglądu i funkcjonalności elementów strony internetowej.
Znaczniki HTML w sekcji META
Znaczniki w sekcji META strony HTML służą do przekazywania dodatkowych informacji o stronie internetowej dla przeglądarek internetowych i wyszukiwarek. Te informacje są niewidoczne dla użytkowników, ale mają wpływ na sposób, w jaki strona jest interpretowana i wyświetlana w wyszukiwarkach, a także na interakcje między użytkownikami a stroną.
W sekcji META można umieścić różne atrybuty i wartości, które przekazują informacje o stronie internetowej, takie jak:
- Opis strony (atrybut „description”) – krótki opis strony, który pojawia się w wynikach wyszukiwania.
- Słowa kluczowe (atrybut „keywords”) – słowa kluczowe związane z tematem strony, które pomagają w wyszukiwaniu.
- Autor (atrybut „author”) – nazwa autora lub twórcy strony.
- Kodowanie znaków (atrybut „charset”) – określa, w jakim kodowaniu znaków jest napisana strona.
- Wygasające (atrybut „expires”) – określa datę, po której strona przestaje być aktualna i powinna być odświeżona.
- Roboty (atrybut „robots”) – określa, czy wyszukiwarki mogą indeksować stronę i jakie działania powinny podjąć w odniesieniu do niej.
Wszystkie te informacje pomagają przeglądarce internetowej i wyszukiwarkom w skuteczniejszym analizowaniu i wyświetlaniu strony internetowej, co z kolei może zwiększyć jej widoczność i dostępność dla użytkowników.
Oto lista 30 podstawowych znaczników HTML:
- <html> – Określa początek i koniec dokumentu HTML.
- <head> – Określa sekcję nagłówka dokumentu, która zawiera informacje o dokumencie.
- <title> – Określa tytuł dokumentu, który wyświetla się w pasku tytułu przeglądarki.
- <body> – Określa sekcję zawartości dokumentu.
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> – Określają nagłówek sekcji, gdzie <h1> jest najważniejszy, a <h6> najmniej ważny.
- <p> – Określa akapit tekstu.
- <a> – Określa link do innej strony lub pliku.
- <img> – Określa obrazek.
- <ul> – Określa listę punktowaną.
- <ol> – Określa listę numerowaną.
- <li> – Określa element listy.
- <div> – Określa sekcję strony lub kontener dla innych elementów.
- <span> – Określa część tekstu lub kontener dla innych elementów.
- <form> – Określa formularz, który zbiera dane od użytkownika.
- <input> – Określa element formularza, w którym użytkownik może wprowadzać dane.
- <label> – Określa etykietę dla elementu formularza.
- <select> – Określa listę rozwijaną, w której użytkownik może wybierać jedną z kilku opcji.
- <option> – Określa opcję w elemencie <select>.
- <textarea> – Określa pole tekstowe, w którym użytkownik może wprowadzać dłuższy tekst.
- <button> – Określa przycisk, który może być kliknięty przez użytkownika.
- <table> – Określa tabelę.
- <tr> – Określa wiersz w tabeli.
- <th> – Określa nagłówek kolumny lub wiersza w tabeli.
- <td> – Określa komórkę tabeli.
- <thead> – Określa sekcję nagłówka w tabeli.
- <tbody> – Określa sekcję treści w tabeli.
- <tfoot> – Określa sekcję stopki w tabeli.
- <style> – Określa styl dla dokumentu HTML.
- <script> – Określa skrypt JavaScript.
- <meta> – Określa dodatkowe informacje o dokumencie, takie jak opis strony, słowa kluczowe, kodowanie znaków.
Znaczniki HTML podzielone według działania
Znaczniki HTML można podzielić na różne grupy w zależności od ich funkcji. Oto kilka przykładowych grup znaczników:
- Znaczniki strukturalne:
- <html>
- <head>
- <title>
- <body>
- <div>
- <span>
- <header>
- <footer>
- <nav>
- <section>
- <article>
- <aside>
- <main>
- <figure>
- <figcaption>
- Znaczniki tekstu:
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- <p>
- <b>, <strong>
- <i>, <em>
- <u>, <ins>
- <s>, <del>
- <sup>, <sub>
- <br>
- <hr>
- <blockquote>
- <q>
- Znaczniki linków:
- <a>
- Znaczniki obrazów i multimediów:
- <img>
- <video>
- <audio>
- <source>
- <track>
- Znaczniki list:
- <ul>
- <ol>
- <li>
- Znaczniki tabel:
- <table>
- <tr>
- <th>
- <td>
- <thead>
- <tbody>
- <tfoot>
- Znaczniki formularzy:
- <form>
- <input>
- <label>
- <select>
- <option>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <optgroup>
Znaczniki HTML podzielone ze względu na występowanie w <body> lub </head>
Znaczniki HTML można podzielić ze względu na ich występowanie w sekcji <head> lub <body> dokumentu. Oto przykładowe znaczniki z każdej grupy:
Znaczniki występujące w sekcji <head>:
- <title>
- <meta>
- <link>
- <style>
- <script>
- <base>
Znaczniki występujące w sekcji <body>:
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- <p>
- <a>
- <img>
- <ul>, <ol>, <li>
- <table>, <tr>, <th>, <td>
- <form>, <input>, <label>, <select>, <option>, <textarea>, <button>
W sekcji <head> umieszcza się informacje o dokumencie, takie jak tytuł, opis, słowa kluczowe, a także odwołania do plików stylów CSS i skryptów JavaScript. W sekcji <body> umieszcza się zawartość właściwą dokumentu, taką jak tekst, obrazy, linki, formularze i tabele. Podział na sekcje <head> i <body> umożliwia oddzielenie informacji o dokumencie od jego zawartości, co pozwala na łatwiejsze zarządzanie i modyfikowanie stron internetowych.
<body>