DTD
- Mi is az? A HTML nyelv minden verziója egy Document Type Definiton-nal definált.
- Miért használjuk? A böngészők számára segítség, hiszen már az oldal betöltése elején tudatjuk vele, hogy milyen verzióban íródott.
Szerény véleményem szerint nem kötelező kívülről megtanulni minden verzió DTD-jét, hiszen egy idő után úgyis megjegyezzük, addig pedig a már kész dokumentumból kimásolhajtuk.
Nézzünk is meg (a számunkra fontos) néhány DTD-t. A HTML 4.01-nek 3 fajta DTD-je van.
STRICT --> A legszigorúbb. Nem engedi az elavult elemeket (pl.: formázások, framek)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
TRANSITIONAL --> Már megengedi az elavult formázásokat is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
FRAMESET --> Engedi a FRAMEK használatát is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Az összes többi DTD-t elérhetitek a W3 oldalán.
A DTD helye:
A DTD mindig a kód legelején, a <html>-en kívül van.
Valahogy így:
Valahogy így:
Ennyit kell tudnunk a DTD-ről.
És most vessünk bele magunkat egy kis CSS-be. Vagyis inkább a HTML-kód CSS-részébe. A CSS-ről annyit kell tudnunk egyelőre, hogy egy stílusleíró nyelv. Segítségével a HTML kódból eltávolíthatunk minden formázást és a stíluslapot (ami a formázást tartalmazza) külön szerkeszthetjük. Szemléltetésképpen nézzük meg ezt az oldalt. Az oldal jobb oldalán kiválaszthatunk különböző dizájnokat. A szöveg mindig ugyan az, csak a dizájnelemek változnak. Miért jó? Hogyha esetleg megszeretnéd változtatni az oldalad kinézetét, akkor nem kell végigbogarászni a HTML-kódot, hanem egyszerűen csak a stíluslapon belül dolgozunk.
A stílust több módon is a HTML-kódba juttathatjuk. De előtte nézzük meg egy egyszerű stíluslap szintaxisát.
Vegyünk egy formázásoktól mentes HTML kódot, ami tele van bekezdésekkel <p> és félkövér szövegrészekkel <b>. Az szeretnénk, hogy minden bekezdés piros betűszínű legyen, de minden félkövér szöveg zöld. Az a következő képpen tehetjük meg:
p {
color:red;
}
b {
color:green;
}
Ha ezt a kódot *.css kiterjesztéssel mented el, akkor van egy css stíluslapod. Ezt a css kódot több módon is a HTML kódba lehet ágyazni.
KÜLSŐ STÍLUSLAP:
Ilyenkor a HTML-kód fejében a valami.css fájl elérési útvonalát adom meg a következő képpen:
<head>
<link rel="stylesheet" type="text/css" href="valami.css" /></head>
A stílust több módon is a HTML-kódba juttathatjuk. De előtte nézzük meg egy egyszerű stíluslap szintaxisát.
Vegyünk egy formázásoktól mentes HTML kódot, ami tele van bekezdésekkel <p> és félkövér szövegrészekkel <b>. Az szeretnénk, hogy minden bekezdés piros betűszínű legyen, de minden félkövér szöveg zöld. Az a következő képpen tehetjük meg:
p {
color:red;
}
b {
color:green;
}
Ha ezt a kódot *.css kiterjesztéssel mented el, akkor van egy css stíluslapod. Ezt a css kódot több módon is a HTML kódba lehet ágyazni.
KÜLSŐ STÍLUSLAP:
Ilyenkor a HTML-kód fejében a valami.css fájl elérési útvonalát adom meg a következő képpen:
<head>
<link rel="stylesheet" type="text/css" href="valami.css" /></head>
link rel - megadja a dokumentum és a HTML-kód közötti kapcsolat típusát. Esetünkben "stylesheet" avagy stíluslap
type - megadja a csatolt dokumentum típusát.
href - megadja a stíluslap helyét, nevét.
BELSŐ STÍLUSLAP:
Ilyenkor a HTML-kód fejében adom meg a CSS-kódot a következő képpen:
<head>
<style type="text/css">
p {
color:red;
}
b {
color:green;
}
</style>
</head>
SORON BELÜLI STÍLUSLAP:
Ilyenkor a különböző elemeknek külön adjuk meg a stílusát. Ezt használtuk mi is eddig.
<p style="color:red;">Ez egy bekezdés.</p>
Ennyit mára. A CSS-ről majd lesznek természetesen leckék, csak először végezzünk a W3-as tananyag HTML részével. Legközelebb részletesen megnézzük a <head>-taget.
Nincsenek megjegyzések:
Megjegyzés küldése