- Visual Studio Code használata és beállítása
- egy html oldal alapvető szerkezeti felépítése
- karakterformázási műveletek
- <! 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
- 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
![]() |
![]() |
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.
![]() |
Feladatsor
- 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.
- Másold be a megnyitott forrásállományt a ‹body› és a ‹/body› közé eső területre.
- Alkalmazd a sorok végén a lágy sortörés címkét. ‹br/›
- A karakterméret - a sorok első karaktereit kivéve - legyen 20pt-os
- Minden sor első karaktere legyen 30 pt méretű.
- Folytassuk tovább az első karakterek formázását! A karaktertípusa legyen Algerian. (Ügyelj a helyesírásra!)
- 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.
- Aláhúzással emeld ki az első versszak utolsó sorát!
- 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ú
- 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
- Készíts a HTML-szerkesztés szigorú szabályainak megfelelő weboldalt, 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
- Készíts a HTML-szerkesztés szigorú szabályainak megfelelő weboldalt, 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á
- Készíts a HTML-szerkesztés szigorú szabályainak megfelelő weboldalt, 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
- Készíts a HTML-szerkesztés szigorú szabályainak megfelelő weboldalt, 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
![]() |
![]() |