<head>
<base href="http://cymerman.eu">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Znajdziecie tu kilka informacji o mnie i moich zainteresowaniach a także kilka kursów">
<meta name="keywords" content="kurszy, szkolenia, HTML, CSS, Photoshop, Corel Draw">
<title>Jacek Cymerman - strona prywatna</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="/css/style.css>
</head>

<base> - określa bazowy adres url dla wszystkich odnośników wewnętrznych. Jeśli w znaczniku base zdefiniujemy adres naszej strony, to każdy odnośnik będziemy mogli skrócić o tę część adresu. Przykład:

adres do pliku graficznego:
<img src="http://cymerman.eu/images/html-icon.png" />

po zdefiniowaniu w nagłówku:
<base href="http://cymerman.eu" />

adres tego samego pliku wygląda tak:
<img src="/images/html-icon.png" />
Ponieważ zarówno zmacznik <img> jak i <base> nie posiadają znacznika zamykającego, w standardzie XHTML musimy go sami domykać "/>"

<meta> - metadane definiują dodatkowe informacje o stronie. Ponieważ zmacznik <meta> nie posiada znacznika zamykającego, w standardzie XHTML musimy go sami domykać "/>"

<meta name="author" content="Jacek Cymerman" /> - informacje o autorze strony
<meta name="description" content="Znajdziecie tu kilka informacji o mnie i moich zainteresowaniach a także kilka kursów" /> - krótki opis o stronie. Tekst ten pojawia się w wyszukiwarce pod niebieskim linkiem do strony. Zalecana długość to 150-160 znaków.
<meta name="keywords" content="kursy, szkolenia, HTML, CSS, Photoshop, Corel Draw" /> - słowa kluczowe opisujące stronę
<meta name="Robots" content="index,follow" /> - informacja dla botów wyszukiwarek, że mają indeksować stronę i podążać za linkami
<meta name="generator" content="FrontPage 4.0" /> - podaje informacje o programie użytym do stworzenia strony
<meta http-equiv="refresh" content="300" /> - wymusza czasowe odświeżanie strony
<meta http-equiv="Refresh" content="10; url=http://onet.pl" /> - po upływie określonego czasu zostaniemy przekierowani na inną stronę
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> - definiuje stronę kodową strony. W HTML 5 stosuje się: <meta charset="UTF-8">

<title>...</title> - tytuł strony. Wyświetlany jest na górnym pasku przeglądarki. Jest to element wymagany. Przyjmuje się, że pierwsze 3 słowa tytułu są najważniejsze z punktu widzenia pozycjonowania strony.

<link> - informacja jakie zasoby przeglądarka powinna dołączyć do zasobów.

<link rel="stylesheet" type="text/css" href="/css/style.css" /> - dołącz zewnętrzny arkusz stylów
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> - dołąćz favicon (mała ikonka obok tytułu strony na pasku przeglądarki)

<script>...</script> - dołączenie skryptów do dokumentu

skrypt można umieścić bezpośrednio w dokumencie HTML:
<script type="text/javascript">
document.write("Hello World!")
</script>

lub dołączyć zewnętrzny plik:
<script type="text/javascript" src="/javascript.js"></script>

<style>...</style> - definiowanie styli CSS

<style>
h1 {text-decoration: underline;color:#ffcc00;letter-spacing:3;}
</style>

Na końcu lekcji rozbudujmy nasz kod z lekcji pierwszej o poznane atrybuty nagłówka strony:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="pl" xml:lang="pl" dir="ltr">
<base href="http://moja-domena.pl" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Tu wpisz swoje imię i nazwisko" />
<meta name="description" content="To jest moja pierwsza strona. Prawda, że niezła?">
<meta name="keywords" content="ćwiczenia, kurs, xhtml, html, css" />
<meta name="Robots" content="index,follow" />
<title>Imię i nazwisko - strona prywatna</title>
<style>
h1 {text-decoration: underline;color:#ffcc00;letter-spacing:10px;}
</style>
</head>
<body style="color:white;background-color:black;">
<p>treść strony</p>
</body>
</html>

reveal-a

reveal-a

×

reveal-b

reveal-b

×

reveal-c

reveal-c

×