7. Elmélyedés a HTML szerkesztés részleteiben
Mi az a CSS, és mire használjuk?
1. Régi mószer szerint:
Be kell írni a html dokumentum fejrészébe a
<body style="background:yellow" TEXT="#ff0000" link=green alink=black
vlink=red>
karaktersorozatot. Ez adja meg a
háttér,
a szöveg,
a link,
a nyomott gomb és a
látogatott link színét.
A szöveg színét három bájt (RGB) adja meg, hexadecimálisan.
2. CSS használatával
El kell dönteni, hogy egy- vagy több html dokumentum stílusát akarjuk-e megadni.
Ha csak egy oldalról van szó, a fejrészébe be kell írni a:
<style type="text/css">
</style>
stílusdefiniáló karaktersorozatot. A nyitó- és a záró tag-ek közé kerülnek majd a konkrét definíciók.
- Hogyan lehet megoldani, hogy minden 1. szintű cím kék és dőlt betűs legyen?
A nyitó és záró tag-ek közé bekerül a
<style type="text/css">
h1,h2 {
font-style: italic;
color: blue;
}
</style>
Ettől az első (és második) szintű címsor dőlt lesz és kék. Fontokról
itt lehet többet megtudni;
(1p)
- Azt, hogy a meglátogatott linkek pirosak, a még meg nem látogatottak pedig zöldek?
A nyitó és záró tag-ek közé bekerül a
a:link { color: green; }
a:visited { color: red; }
karaktersorozat;
.
(1p)
(A
body {
background: #eee;
color:#b00;
}
parancssor az oldal hátterét teszi szürkévé és a szöveg betűit enyhén rózsaszínűvé.)
- Azt, hogy ha rámegyünk az egérrel egy linkre, akkor kék háttér előtt sárga legyen,
egyébként pedig kék, és egyik esetben sem aláhúzott?
A nyitó és záró tag-ek közé bekerül a
a:link { text-decoration: none; color: blue; }
a:visited { text-decoration: none; color:red; background:gray; }
a:hover { color: yellow; text-decoration: none; background:navy; }
karaktersorozat;
. (1p)
- Hogyan lehet osztályokat definiálni?
Be kell írni a nyitó és záró tag-ek közé a
.figyelem {color: red; background-color: aaa; font-weight: bold;}
.figy2 {
color: blue;
background-color: eee;
font-size: 200%;
}
karaktersorozatot. Ezekel a "figyelem" és a "figy2" osztályokat definiáltuk;
hivatkozni rá, (használni) a
<p class="figyelem">
tag-el lehet
.(1p)
- Hogyan lehet egy oldal hátterének képet használni?
Be kell írni a nyitó és záró tag-ek közé a
body {
background-image: url("Sopron3.jpg");
}
karaktersorozatot. A képnek persze elérhetőnek kell lennie.
.
(1p)
- Hogyan lehet több oldal stílusát (címsor, szöveg betű- és háttérszín, betűméret)
egyszerre megadni?
Az oldal fejrészébe el kell helyezni a
<link rel="stylesheet" href="akarmi.css">
linket, ez hívja be a külön elhelyezett
akarmi.css nevű fájlt.
Ebben vannak a már megismert definíciók;
.
(2p)
3. Elhelyezés a neten
- Hogyan helyezhetjük el elkészített weboldalunkat az Interneten? Mi mindenre van ehhez szükség?
Tárhely (caesar.elte.hu), scp-program (winscp, mc, ssh), azonosító-jelszó.
- Hogyan lehet
ellenőrizni a CSS stíluslapunk
szintaxisának helyességét? (Elég csak egy egyszerű, de a netre felrakott oldalt ellenőriztetni.)
. (2p)
Feladat
Készítsen a fentiek felhasználásával weboldalt, helyezze el a neten (csak erre jár a pont) és
küldje el a webcímét a pgyula.feladat@gmail.com címre az óra végéig!
Ha az ellenőrzés azt adja ki, hogy jó a szintaxis, akkor az ellenőrző oldalt címét is küldje el!
4. Linkek:
http://hu.wikipedia.org/wiki/CSS
http://www.w3.org/TR/html401/present/frames.html
http://en.wikipedia.org/wiki/HTML_element#Frames
http://www.goer.org/HTML/intermediate/margins_and_padding/
http://www.brainjar.com/dhtml/menubar/default2.asp
http://www.w3.org/Style/Examples/007/menus.html
http://validator.w3.org
http://jigsaw.w3.org/css-validator/