1. témakör – Alapszerkezet, karakterformázás

Ezen az órán feladatunk:
  1. Visual Studio Code használata és beállítása
  2. egy html oldal alapvető szerkezeti felépítése
  3. karakterformázási műveletek
Új html címkék:
  • <! DOCTYPE html> -> html dokumentumtípus deklarálása
  • <html>...</html> -> html oldal
  • <head>...</head> -> fejrész
  • <title>...</title> -> böngészőfülön megjelenő felirat
  • <body>...</body> -> törzsrész
  • <br/> -> újsor (sortörés)
  • <span>...</span> -> karaktertulajdonságok beállítása
  • <sup>...</sup> -> felsőindex
  • <sub>...</sub> -> alsóindex
Új tulajdonságok:
  • style="tul-1;tul-2...tul-n"-> stílus meghatározása tulajdonságok felsorolásával [több tulajdonság esetén a tulajdonságok közé ";"-t kell tenni]
  • text-decoration: underline;-> aláhúzott karakter
  • font-size; -> karakter mérete
  • font-family; -> karaktercsalád beállítása
  • font-weight; -> félkövér karakter, értékei lehetnek temészetes számok 1000-ig, ill. kifejezések, pld.: bold, bolder, normal, stb...
  • font-style: italic; -> dőlt karakter
  • font-variant: small-caps; -> kiskapitális karakter
Egy html oldal általános alapszerkezete
forráskód eredmény


Karakterműveletek
forráskód eredmény


Közös minta feladat

A közösen elvégzendő feladat Arany János: Toldi c. művének Első ének-nek első két versszakát fogjuk a megadott feltételek szerint formázni.
Mielőtt nekikezdenénk, hallgassuk meg Básti Lajos Kossuth-díjas színművész előadásában - aki egyébként Keszthelyen született 1911-ben és Budapesten húnyt el 1977-ben.
A forrásállományt letöltheted: innen.
Feladatsor
  1. Hozz létre egy "szigorúan szabályos weboldal-szerkezetet" az óra elején létrehozott mappába és mentsd el "index.html" néven és kiterjesztéssel. Nyisd meg a Chrome böngészőablakban.

  2. Másold be a megnyitott forrásállományt a ‹body› és a ‹/body› közé eső területre.

  3. Alkalmazd a sorok végén a lágy sortörés címkét. ‹br/›

  4. A karakterméret - a sorok első karaktereit kivéve - legyen 20pt-os

  5. Minden sor első karaktere legyen 30 pt méretű.

  6. Folytassuk tovább az első karakterek formázását! A karaktertípusa legyen Algerian. (Ügyelj a helyesírásra!)

  7. Még mindig az első karakter formai beállítását "halmozzuk": legyenek dőltek és piros színűek. A piros színt rgb színkód segítségével határozd meg.

  8. Aláhúzással emeld ki az első versszak utolsó sorát!

  9. Szúrj be egy új sort az 1-es szám elé, és írd be az "Első ének" karaktersort az alábbi tulajdonságokkal:
    • a karaktersor legyen kiskapitális,
    • mérete 60pt
    • félkövér stílusú
  10. A fenti beállításokat alkalmazd a második versszakra úgy, hogy minden sorkezdő karakter más- és más típusú és színű legyen! A színeket - a változatosság kedvéért - angol kifejezésekkel határozd meg.
Az elkészült cím és az első versszak


Gyakorló feladatok
  1. Készíts a HTML-szerkesztés szigorú szabályainak megfelelő weboldalt,
    2. amelyben az informatika órai csoportod tagjai szerepelnek az alábbi feltételek szerint:
    • a nevek egymás alatt szerepeljenek úgy, hogy minden név között kihagysz egy üres sort,
    • a karaktertípus legyen Agency FB,
    • a kezdőbetűk kivételével a karakterméretet állítsd 15pt-ra,
    • a vezeték- és a keresztnév első karakterének mérete legyen a kétszerese a többi karakterének, 750-es súlyozással kiemelve, dőlt stílussal
  2. Készíts a HTML-szerkesztés szigorú szabályainak megfelelő weboldalt,
    3. amely kizárólag a saját neved tartalmazza az alábbi feltételek szerint:
    • a karakterek típusa tetszőleges, de talpatlan karaktercsaládból származzon
    • legyen kiskapitális kódolású
    • a karakterméret 35pt
    • minden karakter más színű. A színeket angol kifejezésükkel kódold
    • a kezdőkaraktereket húzd alá
  3. Készíts a HTML-szerkesztés szigorú szabályainak megfelelő weboldalt,
    4. amely a minta szerinti K-színskálát tartalmazza a következő feltételekkel:
    • a karaktercsalád: Agency FB
    • karakterméret: 90 pt
    • a színkódot az rgb kódolás szerint alakítsd ki, mégpedig úgy, hogy a zöld és a kék értéke mindvégig nulla, míg a vörös szín a 250-ről indulva, 10-vel csökkenve érje el a nulla értéket
  4. Készíts a HTML-szerkesztés szigorú szabályainak megfelelő weboldalt,
    5. amely a minta szerinti pirosból-zöldbe tartó S-színskálát tartalmazza a következő feltételekkel:
    • a karaktercsalád: Bradley Hand ITC
    • karakterméret: 90 pt
    • a színkódot az rgb kódolás szerint alakítsd ki, mégpedig úgy, hogy a kék értéke mindvégig nulla, míg a vörös szín a 250-ről indulva, 10-vel csökkenve éri el a nullát, míg a zöld értéke 0-ról indulva, 10-vel növekedve éri el a 250-t
PHP Code Snippets Powered By : XYZScripts.com