Wstęp do XHTML
Wstęp do XHTML
Korzyści
Korzyści
• identyczny wygląd za pomocą jednego pliku
css
• przejrzystość dokumentu, jego warstwy
• ułatwienie dla robotów przeglądarki
• kod czysty robot nie ma problemu strona
zostanie zaindeksowana
• zmiana wyglądu np:nagłówka
• (zmiana w warstwie prezentacji w kodzie css)
• Jednak mimo wyłączenia warstwy prezentacji
• oprócz własnego kodu
• przeglądarka interpretuje na swój sposób
określone elementy strony
czym są znaczniki
• <p> przykładowa treść</p>
• Atrybuty znacznika
• <p id=„tresc” alt=„alternatywna
treść”>
przykładowa treść</p>
• <p id=„tresc” alt=„alternatywna
treść”>
przykładowa treść
<img src=„obraz” />
</p>
• <p id=„tresc” alt=„alternatywna
treść”>
przykładowa treść
<br />
<img src=„obraz” />
</p>
Zasady konstrukcja
znaczników
• małe litery
• zamykać tagi
• kolejność tagów
Reguła tag otwarty jako ostatni zamykamy
jako pierwszy
<b><i> treść </i></b>
• zamkniemy w złej kolejności błąd
przeglądarki
encja
• <
• >
• "
• &
• ©
W XHTML 1.0 istnieją trzy
wersje
DTD czyli definicje typu
dokumentu:
‘transitional’, ’strict’,
‘frameset’. Wersje te pozwalają
na poprawną walidację tzw.
sprawdzenie poprawności
dokumentu XHTML.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"
lang="pl">
• title – ważny element struktury
strony
• krótki treściwy tytuł ; zawiera jak
najwięcej słów kluczowych
• spójny gramatycznie
• od 3 do max 7 fraz – potencjalnie
wpisywane przez klientów
• marka firmy lub odpowiednia fraza
• <title> moja firma -> tytuł podstrony
</title>
• <head>
• <meta name="description" content="To jest
opis, który pojawi się w większości
wyszukiwarek pod tytułem strony" />
<meta name="Author" content=" [dane autora]
" />
• <meta name="keywords" content="Słowa
kluczowe, które większość przeglądarek
zignoruje" />
<meta name="Generator" content="kED" />
content type- robots
• <title>Tytuł, który pojawi się jako nagłówek w
wyszukiwarce</title>
• </head>
• <head>
<meta http-equiv="Content-type"
content="application/xhtml+xml; charset=iso-8859-2"
/>
• <meta http-equiv="content-type"
content="text/html;
charset=utf-8" />
• <meta http-equiv="content-language"
content="pl" />
• <link rel="stylesheet" href="css/style.css"
type="text/css" media="screen" />
• <link rel="alternate stylesheet" href="css/style1.css"
type="text/css" title="Styl dla osób z wadą wzroku" />
• <link rel="shortcut icon" type="image/ico"
href="gfx/favicon.ico" />
• </head>
ikonka
• 16 x16