3. lecke (HTML5, CSS3, PHP5)

Dekoratív csík/sáv a fejrészen lévő kép alá és fölé

Másoljuk le az "index2.php" fájlt "index3.php", valamint a "main2.css" fájlt "main3.css" néven a megfelelő helyre, majd javítsuk ki a PHP fájl tetején a stílusfájlra való hivatkozást!

Csináljunk egy kis rendet (a belső stílusokat áttesszük a külső stílusfájlba):

• helyezzük át a header p { ... } sorait az előbbi "main3.css" fájlba a header { ... } alá
• hasonlóképpen helyezzük át a footer p { ... } sorait az előbbi "main3.css" fájlba a footer { ... } alá
• (egyedül a "header"-beli PHP által generált változó háttérkép nem tehető át a stílusfájlba)

Most jönnek a fejkép alatti/feletti 24px széles zöld csíkok (lásd):

• másoljuk a   <div class='header0'></div>   sort a <header> sora fölé (ez lesz majd a felső csík)
• másoljuk ugyanezt a </header> sora alá is (ez lesz az alsó csík)

A <div> és </div> egy olyan általános HTML parancs-pár/tag-pár, amelynek konkrét funkciója nincs (emiatt mindenre használható), az utána álló "class='header0'" segítségével adjuk meg a "div" (pontosabban a "div" "header0" osztályának) stílusjegyeit, tulajdonságait.

Akkor most ez jön, másoljuk be a "main3.css"-be a "header { ... }" alá:

    .header0 {
        width:100%; height:24px;
        background-color:darkgreen;
        border-bottom:1px dotted darkgreen;
    }

Magyarázata soronként:

• szélessége a rendelkezésére álló terület 100%-a, itt most 960px; magassága 24px
• háttérszíne sötétzöld
• a sáv alsó részére 1 pixel vastag, szaggatott, sötétzöld színű szegély kerül (ha próbaképpen sárgára állítjuk, még látható is lesz)

Gördülő szöveg az alsó sávon (marquee)

<marquee direction='left' behavior='scroll' loop='infinite' scrollamount='2' scrolldelay='20' truespeed='' width='100%'>
 ~~~~~ K ö s z ö n t e l e k   Piripócson, a Piripócsi Általános Iskola weboldalán !!! ~~~~~
</marquee>

A fenti kódot helyezzük el az alsó <div id='header0'> ... </div> belsejébe! (És láss csodát, - ahogy itt fenn is - gördülni fog!)

Kicsit szépítsünk rajta, hiszen a szöveg a fekete színe miatt alig látszik, és nem a sáv közepén halad:

    marquee {
        margin-top:4px;
        color:white;
    }

Ezt természetesen a "main3.css" fájlba kerül. Tegyük valahova a "header" környékére (alá)!

Képek a baloldali (oldalsáv) oszlopban

Szeretnénk az itt látható három képet elhelyezni az oldalsáv oszlopban. (Innen letölthetők, s tegyük az "imgs"-be!)

Az oldalsáv szélessége 220 pixel, azaz egy-egy képre kb. 60-70px jut, s rajzolunk köréjük egy vékony zöld szegélyt.

A CSS bővítés (main3.css-be):

    aside img {
        width:60px;
        border:1px solid darkgreen;
    }

Az oldalsáv tartalma az   <aside>   tag-ben lesz, így a HTML bővítés (index3.php-be):

    <img src='imgs/eler.png'>
    <img src='imgs/smap.png'>
    <img src='imgs/link.png'>