HTML — element głowy
Element HTML <head>jest kontenerem dla następujących elementów:
<title>, <style>,
<meta>, <link>, <script>i <base>.
Element HTML <head>
Element <head>jest kontenerem na metadane (dane o danych) i jest umieszczany pomiędzy <html>tagiem a <body>tagiem.
Metadane HTML to dane dotyczące dokumentu HTML. Metadane nie są wyświetlane.
Metadane zazwyczaj definiują tytuł dokumentu, zestaw znaków, style, skrypty i inne metainformacje.
Element HTML <tytuł>
Element <title>określa tytuł dokumentu. Tytuł musi zawierać tylko tekst i jest wyświetlany na pasku tytułu przeglądarki lub na karcie strony.
Element <title>jest wymagany w dokumentach HTML!
Treść tytułu strony jest bardzo ważna dla optymalizacji wyszukiwarek (SEO)! Tytuł strony jest używany przez algorytmy wyszukiwarki do określenia kolejności umieszczania stron w wynikach wyszukiwania.
Element <title>:
- definiuje tytuł na pasku narzędzi przeglądarki
- zapewnia tytuł strony po dodaniu jej do ulubionych
- wyświetla tytuł strony w wynikach wyszukiwania
Postaraj się więc, aby tytuł był jak najbardziej dokładny i znaczący!
Prosty dokument HTML:
Przykład
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Element <styl> HTML
Element <style>służy do definiowania informacji o stylu dla pojedynczej strony HTML:
Przykład
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Element HTML <link>
Element <link>definiuje relację między bieżącym dokumentem a zasobem zewnętrznym.
Tag <link>
jest najczęściej używany do łączenia z zewnętrznymi arkuszami stylów:
Przykład
<link rel="stylesheet" href="mystyle.css">
Wskazówka: aby dowiedzieć się wszystkiego o CSS, odwiedź nasz samouczek CSS .
Element <meta> HTML
Element <meta>jest zwykle używany do określenia zestawu znaków, opisu strony, słów kluczowych, autora dokumentu i ustawień rzutni.
Metadane nie będą wyświetlane na stronie, ale są używane przez przeglądarki (jak wyświetlić treść lub przeładować stronę), wyszukiwarki (słowa kluczowe) i inne usługi sieciowe.
Przykłady
Zdefiniuj używany zestaw znaków:
<meta charset="UTF-8">
Zdefiniuj słowa kluczowe dla wyszukiwarek:
<meta name="keywords" content="HTML, CSS, JavaScript">
Zdefiniuj opis swojej strony internetowej:
<meta name="description" content="Free Web tutorials">
Określ autora strony:
<meta name="author" content="John Doe">
Odśwież dokument co 30 sekund:
<meta http-equiv="refresh" content="30">
Ustaw widok tak, aby Twoja witryna wyglądała dobrze na wszystkich urządzeniach:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Przykład <meta>tagów:
Przykład
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Ustawianie rzutni
Widoczny obszar to widoczny dla użytkownika obszar strony internetowej. Różni się w zależności od urządzenia – na telefonie komórkowym będzie mniejszy niż na ekranie komputera.
Powinieneś umieścić następujący <meta>element na wszystkich swoich stronach internetowych:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Daje to przeglądarce instrukcje dotyczące kontrolowania wymiarów i skalowania strony.
Część width=device-widthustawia szerokość strony zgodnie z szerokością ekranu urządzenia (która będzie się różnić w zależności od urządzenia).
Część initial-scale=1.0ustawia początkowy poziom powiększenia, gdy strona jest ładowana po raz pierwszy przez przeglądarkę.
Oto przykład strony internetowej bez metatagu viewport i tej samej strony internetowej z metatagiem viewport:
Wskazówka: jeśli przeglądasz tę stronę za pomocą telefonu lub tabletu, możesz kliknąć dwa poniższe łącza, aby zobaczyć różnicę.
Element <script> HTML
Element <script>służy do definiowania skryptów JavaScript po stronie klienta.
Poniższy kod JavaScript pisze "Witaj JavaScript!" do elementu HTML z id="demo":
Przykład
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Wskazówka: aby dowiedzieć się wszystkiego o JavaScript, odwiedź nasz samouczek JavaScript .
Element HTML <baza>
Element <base>określa podstawowy adres URL i/lub cel dla wszystkich względnych adresów URL na stronie.
W <base>tagu musi być obecny atrybut href lub target albo oba te elementy.
<base>
W dokumencie może być tylko jeden element!
Przykład
Określ domyślny adres URL i domyślny cel dla wszystkich linków na stronie:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Podsumowanie rozdziału
- Element
<head>jest kontenerem na metadane (dane o danych) - Element
<head>jest umieszczony pomiędzy<html>tagiem a<body>tagiem - Element
<title>jest wymagany i określa tytuł dokumentu - Element
<style>służy do definiowania informacji o stylu dla pojedynczego dokumentu - Tag
<link>jest najczęściej używany do łączenia z zewnętrznymi arkuszami stylów - Element
<meta>jest zwykle używany do określenia zestawu znaków, opisu strony, słów kluczowych, autora dokumentu i ustawień rzutni - Element
<script>służy do definiowania skryptów JavaScript po stronie klienta - Element
<base>określa podstawowy adres URL i/lub cel dla wszystkich względnych adresów URL na stronie
Elementy nagłówka HTML
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .