0. lecke (HTML5, CSS3, nincs PHP)


Szükséges "anyagok":

  • egy egyszerű szövegszerkesztő - editor (Jegyzettömb, Notepad++, GEdit, ... - amikkel formázni sem tudunk - Ms.Word)
  • egy webböngésző (FireFox, Google Chrome, Opera, Ms.Explorer, ...)
  • egy fájlkezelő (az operációs rendszeré, ill. Total Commander, Midnight Commander, ...)

Készítsük el a könyvtárakat!

  1. Először a főkönyvtárat (pl. suli), és ebben
  2. css - a lapok színét, betűtípusait, elrendezését, és megjelenéssel kapcsolatos dolgokat beállító fájlok (stílusfájlok) helye
  3. imgs - az oldalakon szereplő képek, háttérképek helye; ezen belül
  4. top960x200 - a fejrészen lévő képek helye (ezek 960x200 pixel méretűek)

Töltsük le, csomagoljuk ki, majd helyezzük a megfelelő könyvtárba a fájlokat!

Itt a fájlok tömörítve: lecke0.zip

    suli
        index0.html
        css
            main0.css
        imgs
            bg_fal.jpg
            bg_halo.gif
            bg_rajz.jpg
            bg_rajz1.jpg
            top960x200
                01.jpg
                02.jpg
                ...
                10.jpg

Nézzük meg az index0.html indítófájlt egy editorban!

Az oldal "látható része" a <body> és </body> elemek közt van (kivétel a <title> utáni szöveg, mert ez is látható).

A <head> és </head> elemek közt pedig az oldal tulajdonságait állíthatjuk be:

  • kódolás (itt UTF-8),
  • böngészőfülön lévő cím (||| Piripócsi Általános ... ),
  • tartalom-elemek tulajdonságai (stílusokkal),
  • stb.


Nézzük meg az index0.html oldalt egy böngészőben!

Valami hasonlót kell látnunk (rákattintva nagyítható!):

(Első nekifutásra egy leegyszerűsített weboldalt készítünk.)

A fejrész és a lábrész még "nem az igazi", egy kis CSS-sel szépítünk rajtuk.

Tegyük/másoljuk (kijelölés,Ctrl+C,Ctrl+V) a lábrész-beli (footer) bekezdés (p) CSS tulajdonságait az index0.html fájlba a <style> és </style> parancsok közé!

(A padding-top 16 pixelnyi közt/kitöltést tesz a bekezdés tetejére, a font-size kissé csökkenti a betűméretet, a color fehérre állítja a betűszínt. Módosítsunk ezeken egyesével, s figyeljük a változásokat! Figyeljünk az egyes tulajdonságok mögötti lezáró ";"-re!)

    footer p {
        padding-top:16px;
        font-size:95%;
        color:white;
    }

Ha sikerült megérteni, szépítsük hasonlóképpen a fejrészt is! Tegyük az előbbi fölé (de a <style> alá) az alábbi stílusokat! Célszerű egyesével berakosgatni a header p jellemzőit a kezdő { és lezáró } zárójelek közé! Itt csak a "font-family" az új: a "Piripócsi Általános Iskola" szöveget "Times New Roman" betűtípussal szeretnénk kiírni, de ha ilyen nincs a gépünkön, akkor bármilyen talpas (serif) betű is jó lesz.

    header p {
        color:orange;
        font-size:64px;
        font-family:"Times New Roman",serif;
        padding-top:120px;
        padding-left:150px;
    }


A többi CSS tulajdonság beállítása

A weblap háttere a "main0.css" fájlban van beállítva (bg_rajz.jpg), próbáljuk kicserélni a többi "bg_" kezdetű fájlokra (s a legszebbet hagyjuk meg)!

A fejrészben lévő kép (07.jpg) szintén cserélhető bármely másik ugyanebben a könyvtárban lévőre, hiszen méretük egyforma (960x200 pixel).

Kipróbálhatjuk a többi jellemzők is módosítani, de mindig csak egyet változtassunk, figyeljük meg a változást, s utána állítsuk vissza!



Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

57273 perc még

Elérhetőség

Katt a képre!

Weboldalaim

Naptár

Névnap

Kelemen napja van ma
Klementina napja van ma

Boldog névnapot kívánok!