Trab család – adatok és képek

Ezeket a weboldalakat (ez már egy website!) szeretnénk elkészíteni:

fájlok és kapcsolatuk

index.html (a képek is linkek) gyerekek.html (ebben nincs táblázat)

adatok.html

Használjunk stílusfájlt, ezt a HTML fájl fejrészében (HEAD) helyezzük el:
     <link rel='stylesheet' href='style.css'>
és ebbe (style.css) a fájlba írjuk a szükséges stílusokat!

Itt található a stílusfájlt "csírája": katt ide (style.cs)

Adatok (szöveg, képek)

Itt található a kiadvány szövege: katt ide (05_nyers.txt)

A családnevek: szülők - Trab Antal, Major Anna, gyerekek - Trab Boriska és Trab Pista.

A "fényképeik" neve a monogramjaik alapján: TA.jpg, MA.jpg illetve (a gyerekről 3-3 kép van) TB1.jpg,TB2.jpg,TB2.jpg, TP1.jpg,TP2.jpg,TP2.jpg

Főbb lépések

Egyes nem említett tulajdonságokat a képek (index.png, gyerekek.png, adatok.png) alapján önállóan állítsuk majd!

A "gyerekek.html" fájl legyen az első

• először csak a stílusfájlt (style.css), a címsorokat (H1, H3) és a szövegeket (p) készítsük elő a képek nélkül
• próbáljuk megérteni (módosítgassuk!) a "style.css" egyes sorait (a "margin:0 auto;" sor középre igazítja a "html"-en belül a "body"-t)
• bővítsük a következőkkel:
      címsorok: sötétzöldek (darkgreen), h1 - 32 pixel, h2 - 24 pixel, h3 - 20 pixel; h3 elé (baloldalára) tegyünk 100 pixel közt
      bekezdések: betűméret 13 pixel, elé tegyünk 80 pixel térközt
• a "Vissza a főoldalra" bekezdést formázzuk külön a "p" tag-be írt style='text-align:center;' stílussal
• ugyanígy formázható a "Készítette ..." sor is: igazítsuk középre, tegyünk jobboldalára 100 pixel közt
• jöhetnek a képek: TB1.jpg, ..., TP3.jpg (ha az egészet <p> és </p> közé tesszük, a képeket is "jobbra tolja")

Az "index.html" fájl létrehozása

• itt csak a kétsoros táblázattal foglalkozunk, hozzuk létre: felül a nevek ("th" cellákban), alul a képek legyenek ("td" cellákban)
• a tábla stílusai:
      table: 800 pixel széles, középre igazított (margin:0 auto;), cellák külön élnek (border-collapse:separate;), a tábla körül vastag,zöld (border:3px solid green;)
      td: 200 pixel széles, kerete 1px vastag, solid, zöld
      th: hasonló a "th"-hoz, nagyobb betűméret - 24 pixel, alul-felül 8 pixel térköz (kitöltés/padding)
• a képek túl nagyok (256 x 256 pixel), állítsuk a szélességüket egy stílussal 200 pixelre

Végül az "adatok.html" fájl

• itt négy táblátatunk van, javaslom, hogy csak az elsőt hozzuk létre, s ha széppé formáztuk, másoljuk le és javítsuk át az adatokat
• a baloldali cellákba (célszerűek "th") a képet, a jobboldaliba ("td") a felsorolást tegyük
• a tábla másmilyen, ezért legegyszerűbb, ha a régi ("style.css-beli") tulajdonságokat felülírjuk - tegyük ezeket a <link rel='stylesheet' href='style.css'> bejegyzés alá a <style> és </style> tag-ek közé:
      table: középre igazított (margin:0 auto;), cellák összevonódnak (border-collapse:collapse;), a tábla körül nincs szegély (border:none;)
      th: 200 pixel széles, kerete 1px vastag, solid, zöld
      td: 600 pixel széles, kerete hasonló

Linkek beszúrása

• először a "Vissza a főoldalra" linkeket (adatok.html, gyerekek.html fájlokba) csináljuk meg úgy, hogy "visszavigyenek" az "index.html" fájlra
• másodszor a "További családi adatok" szöveget (index.html) irányítsuk az "adatok.html" oldalra
• végül készítsük el a képlinkeket: a "TB1.jpg" és a "TP1.jpg" képekről ugorjunk a "gyerekek.html" fájlra

Javaslat

• A stílusokat lépésenként fejlesszük, mentsük a stílusfájlt, frissítsünk majd nézzük meg a változást! (Szabad módosítani is!)
• A fájl úgy is fejleszthető, hogy először a "style", "/style" tag-ek közt teszteljük, és amikor tökéletes, visszatesszük a stílusfájlba.