HTML: Nagłówek strony
Element <head></head> jest kontenerem zawierającym metadane strony internetowej. Zawiera zatem dane, które opisują dane w niej zawarte. Standardowo blok ten zawiera informacje o tytule strony, kodowaniu znaków, odnośnik do kaskadowych arkuszy stylów, informację o czcionkach, skrypty. Metadane nie są wyświetlane w treści strony internetowej, są natomiast widoczne w kodzie źródłowym strony, a przeznaczone są dla przeglądarki, robotów wyszukiwarek i samych wyszukiwarek.
Następujące znaczniki kontenera <head> opisują metadane: <title>, <style>, <meta>, <link>, <script> oraz <base>.
Tytuł strony: <title></title>
Zgodnie ze standardem jest to wymagany znacznik strony internetowej. Generuje on tytuł strony, widoczny zarówno dla przeglądarki i wyświetlany w zakładce otwartej karty, a także dla wyszukiwarki, gdzie jest pierwszym wyświetlanym elementem charakteryzującym naszą witrynę. Dodatkowo tytuł strony wyświetlony jest po dodaniu naszej strony przez użytkownika do stron ulubionych.
Prosty przykład użycia znacznika <title>:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Zawartość
</body>
</html>
Style: <style></style>
Znacznik ten pozwala nam umieścić wewnętrzny arkusz stylów. Więcej o CSS w kolejnej sekcji kursu. Przykładowe użycie znaczników:
<!DOCTYPE html>
<html>
<head>
<style>
html, body{
width:100%;
height:100%;
margin: 0;
padding: 0;
}
p .news{
background: #ff0000;
padding: 10px;
}
#newest{
boder: 2px dashed yellow;
}
</style>
</head>
<body>
Zawartość
</body>
</html>
Dołączenie arkusza stylów: <link>
Służy do załączenia zewnętrznego arkusza stylów.
<link rel="stylesheet" href="/css/style.css">
Znaczniki meta: <meta>
Znaczniki meta służą do ustawienia kodowania znaków, opisu strony, słów kluczowych, autora i innych metadanych.
Kilka przykładów wykorzystania tego znacznika:
- charset – kodowanie znaków
<meta charset=”UTF-8″> - description
<meta name=”description” content=”Super opis mojej strony”> - keywords
<meta name=”keywords” content=”kurs html css, html, css”> - author
<meta name=”author” content=”szkoleniowcy tinf.pl”> - odświeżenie strony po 5 sekundach
<meta http-equiv=”refresh” content=”5″> - Viewport – opcja skalowania strony w urządzeniach mobilnych
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> - <script> – wstawienie skryptu
<script> function mojafunkcja { document.getElementById(“demo”).innerHTML = “Czść JavaScript!”; } </script>Więcej o języku JavaScript w kursie o tej właśnie nazwie. - <base> – określenie bazowego url dla relatywnych odnośników na stronie
<base href=”https://www.tinf.pl” target=”_blank”>