3. témakör- Táblázat készítése, kép beillesztése

Az óra tartalma:

  1. táblázat készítése
  2. cellák egyesítése
  3. kép beillesztése
Új címkék:
  • <table>...</table> -> táblázat létrehozása
  • <tr>...</tr> -> sor létrehozása
  • <td>...</td> -> cella létrehozása
  • <img /> -> kép beszúrása a weboldalra
Új tulajdonságok:
  • align: vízszintes igazítás
  • text-align: szöveg vízszintes igazítása
  • src: a kép forráshelyének meghatározása
  • height: magasság
  • width: szélesség
  • border: szegély
  • border-color: szegélyszín
  • colspan: vízszintes cellaegyesítés
  • rowspan: függőleges cellaegyesítés
  • font-variant: small-caps -> kiskapitális karakterré alakítás
  • writing-mode:vertical-rl -> szöveg függőleges (fentről-lefelé) történő kiírása
Felhasználandó képállományok: Táblázat létrehozásának menete:
kiinduló táblázat cellák egyesítése elkészült táblázat
Forráskód:
kiinduló táblázat cellák egyesítése elkészült táblázat
Eredmény:
kiinduló táblázat cellák egyesítése elkészült táblázat


Feladatok
  1. Az alábbi feladatban egy régi postai plakát weboldalát hozzuk létre a leírás és a minta alapján. Ebben a feladatban még segítségként láthatod a pozícionáláshoz használt kisegítő táblázatot.

    2. Felhasznált kép: karacsonyfa-ag.png

    Elkészült weboldal minta:


    Feladat részletezése:
    1. Készíts egy könyvtárat a hálózati meghajtódra. Minden állományt ebbe ments! (Képet is.)
    2. Alakítsd ki a hibátlan alap html oldalszerkezetet.
    3. A böngésző fülrészén megjelenő szöveg: Szövegformázás és színhasználat
    4. Az oldal háttészínét állítsd rgb(239,236,211) értékűre
    5. Alakíts ki egy táblázatot az alábbiak szerint (Ez lesz a keretrendszere a szövegnek)
      • alapértelmezetten egy szabályos táblázatból indulj ki: 2 oszlop és 7 sor
      • a táblázat szegélye legyen piros színű
      • a cellákat sorszámozd be, hogy a későbbiek során a cellaegyesítésnél segítséget kapj a megfelelő cella törléséhez!
      • a táblázatot igazítsd az oldal közepére, a szélessége legyen 600pt
        • Minta:
      • egyesítsd a megfelelő cellákat az alábbiak szerint. Töröld a feleslegessé váltakat!
        • Minta:
    6. Szövegbeállítások részletezése:
      • "Felhívjuk" -> méret:60pt; típus: Algerian;szín:rgb(145,89,60)
      • "a postát igénybe vevőket" -> méret 20pt; kiskapitális; szín: rgb(51,0,7)
      • "hogy a karácsonyi megnövekedett forgalomra való tekintettel" -> méret: 20pt; igazítása sorkizárt, kiskapitális; szín: rgb(51,0,7)
      • "a csomagokat" -> méret: 60 pt, kiskapitális, típus: Courier New; középre igazított, félkövér és zöld
      • "ha nem romló tartalmú," -> méret 20pt; kiskapitális; típus: Courier New
      • "minél előbb" -> méret: 50pt; kiskapitális; típus: Courier New; szín:zöld
      • "romlandó tartalmúakat" -> méret 20pt; kiskapitális; típus: Courier New
      • "december 21-ig" -> méret: 50pt; kiskapitális; típus: Courier New; szín:zöld
      • "adják postára" -> 20pt méretű, félkövér és középre igazított szöveg
      • "Gondosan burkolják és a címiratot tartóüsan erősítsék a csomagra, a címirat másolatát a csomagban helyezzék el. A csomag tartalmát a szállítólevélen és a burkolaton részletesen tüntessék fel." -> kiskapitális, mérete 20 pont és Courier New típusú. A szöveg sorkizárt igazítású
      • "részletesen" -> félkövér
      • "Postahivatal" -> dőlt, félkövér és 40 pt méretű
    7. alul a vékony csík – a Postahivatal felirat alatt - sötétbarna színű
    plakát segédtáblázattal elkészült plakát

    Következő órán dolgozatot írsz!

Táblázat készítése - felelet

A tanultak alapján, továbbá az alábbi feladatsor és a minta segítségével készítsd el a táblázatot.
  1. Készíts el egy szabályos html oldalszerkezetet. A böngészőfülön megjelenő szöveg: Táblázat - felelet
  2. Az oldal háttérszíne legyen rgb(0,96,125) kódolású
  3. A táblázat legyen középre igazított, 1000pt széles. A forráskódot lásd el megjegyzésekkel.

PHP Code Snippets Powered By : XYZScripts.com