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.

  1. 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; példa. (1p)
  2. 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; példa. (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é.)
  3. 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; példa. (1p)
  4. 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 példa .(1p)
  5. 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. példa, összesítve. (1p)
  6. 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; példa. (2p)

3. Elhelyezés a neten

Valid CSS!

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/