Fizika, matek, informatika érettségi

Home Fizika Excel Access A weboldalról

HTML elemek

Címsorok   Szövegformázás   Hivatkozások    Hivatkozások   Listák   Táblázatok   Képek, média

Címsorok

A weboldalon belül lehetnek főcímek, fejezetcímek, alcímek stb. Ezt a HTML címsor1, címsor2… (header1, header2…) címkékkel oldja meg (h1, h2…). Pl:

<h1>Egy a legnagyobb címsor</h1>

Egy a legnagyobb címsor

 

<h2>Egy egy kisebb címsor</h2>

Egy egy kisebb címsor

 

Feladatok:

  1. Oldd meg a HTML fájlod HEAD részében, hogy minden 1. szintű címsor (h1) barnán (brown) jelenjen meg!
  2. Hogyan kell megadnod azt a HTML címkét, amelyik meghatározza, hogy az egyik 2. szintű címsor sötét magenta (#8B008B) színnel jelenjen meg?

1.
<style>
h1: {color: brown};
</style>

2.
<h2 style="color:#8B008B;">...</h2>


Szövegformázás

Szövegformázás

A bekezdések, azon belül a szövegrészek, a címsorok, táblázatcellák stb. szövegjellemzőinek beállítására lehetőség van HTML címkékkel és CSS-sel. A CSS elsőbbséget élvez!

Betűkészletek (font): Azok a betűtípusok, amiket az oldal a megjelenő szövegben használ. A képernyős megjelenítésekhez talp nélküli, könnyen olvasható betűtípusokat választunk, és ne legyen kettőnél több betűtípus az oldalon (egyik a címeké, másik a sima szövegé).

CSS3 fontok: https://webfejlesztes.gtportal.eu/?f0=2_font

Részletesebben a fontokról (angol): https://www.w3schools.com/css/css_font.asp

 

Karakterformázás HTML elemekkel: https://webfejlesztes.gtportal.eu/?f0=1_szoveg_02

<b>Ez a szöveg félkövér (bold).</b>

<i>Ez a szöveg dőlt betűs (italic).</i>

További HTML címkék: strong (fontos), em (emphasized, hangsúlyozott), mark (marked, megkülönböztetett), small (kicsi), del (deleted, törölt), ins (inserted, beszúrt), sub (subscript, alsóindex), sup (superscript, felső index).

 

Karakterformázás CSS-sel: https://webfejlesztes.gtportal.eu/?f0=2_szoveg

Angolul (és részletsen): https://www.w3schools.com/css/css_text.asp

Beállítható a szöveg (karakterek) színe, háttérszíne, betűtípusa, betű családja, vastagsága (font-weight), mérete (size; többféle mértékegységgel), távolsága a blokk szélétől (padding; https://www.w3schools.com/css/css_padding.asp), igazítása (pl. text-align: justify; a sorkizárt igazítás csal CSS-sel lehetséges; https://www.w3schools.com/css/css_text_align.asp), az aláhúzás (decoration), betűtávolság, sortávolság, árnyék-effektek.

 

A szöveg tagolása: https://webfejlesztes.gtportal.eu/?f0=1_szoveg_08

Ami fontos: bekezdés, üres sor (<br>), vízszintes vonal (<hr>), megjegyzés. A vonalak hosszának meghatározása többféleképpen is történhet:

<hr>
100% szélességű vízszintes vonal.
<hr width="50%">
A szélessége 50%.
<hr width="200px">
200px szélességű vonal.
<hr style="width: 350px; border: 1px solid red;">
CSS-sel meghatározott szélesség és vonaljellemzők.
<p>Ez egy megtört soros <br>bekezdés</p>
A bekezdésen belül sortörés van.


Hivatkozások

A hivatkozások (linkek) biztosítják a böngészés lényegét (hypertext), a honlapok összekapcsolását.

 

A hivatkozásokat többféleképpen lehet használni:

A hivatkozott weboldal (vagy weboldalon belüli hely) megjelenhet ugyanabban az ablakban, de nyithat új böngészőablakot is.

 

Háromféle link szín állítható be CSS-sel:

 

HTML megvalósítása



Hivatkozások

A hivatkozások (linkek) biztosítják a böngészés lényegét (hypertext), a honlapok összekapcsolását.

 

A hivatkozásokat többféleképpen lehet használni:

A hivatkozott weboldal (vagy weboldalon belüli hely) megjelenhet ugyanabban az ablakban, de nyithat új böngészőablakot is.

 

Háromféle link szín állítható be CSS-sel:

 

HTML megvalósítása



Listák

A listák (list) lehetnek számozottak vagy felsorolásjellel megjelölt listák. A felsorolásjel lehet bármilyen karakter vagy kép, alapértelmezés szerint teli karika. A számozás is többféle lehet (pl. 1., 2.,… vagy a., b…. vagy I., II….). A listák egymásba is ágyazhatók.

  1. Számozatlan lista (ul – unoredered list): https://webfejlesztes.gtportal.eu/?f0=1_listak_01
  2. Számozatlan listák egymásba ágyazása: https://webfejlesztes.gtportal.eu/?f0=1_listak_02
  3. Számozott lista (ol – ordered list): https://webfejlesztes.gtportal.eu/?f0=1_listak_03
  4. Számozott lista jellemzői: https://webfejlesztes.gtportal.eu/?f0=1_listak_04
  5. Számozott listák egymásba ágyazása: https://webfejlesztes.gtportal.eu/?f0=1_listak_05


Táblázatok

BOX modell

A táblázatok (table) sorokból (row) és oszlopokból (column) állnak. Ezek össze is vonhatók. Beállítható

A táblázatok egymásba is ágyazhatók.

  1. Egyszerű táblázat: https://webfejlesztes.gtportal.eu/?f0=1_tablazatok_01
  2. Táblázat fejléce: https://webfejlesztes.gtportal.eu/?f0=1_tablazatok_02
  3. Cellák összevonása: https://webfejlesztes.gtportal.eu/?f0=1_tablazatok_04
  4. Oszlopcsoportok: https://webfejlesztes.gtportal.eu/?f0=1_tablazatok_05


Képek, média

A honlapot fel lehet dobni fotógalériával és flash animációkkal is, azonban a nagy méretű képek és média fájlok betöltése komolyan lassítja a honlap betöltését. Flash animációkat ma már nem használunk, mert a böngészők nem támogatják. Vigyázzunk, mert a média tartalmak és a szövegek általában szerzői jogi védelem alatt állnak, és nem használhatók a tulajdonos/szerző engedélye nélkül.

A képek jellemzői közé tartozik a forrásuk, a feliratuk, a buboréksúgó (az a szöveg, ami megjelenik, ha az egeret a kép fölé húzzuk) és azt alt (alternatív, magyarázó) szöveg (a gyengén látók számára vannak olyan böngészők, amelyek felolvassák a weblap tartalmát; azok ezt az alt szöveget olvassák fel).

Általában jpg, png és gif típusú képeket használunk, de a weboldalba beágyazhatók svg ábrák is (vektorgrafikusan írja le a pontok, görbék, szövegek…. helyét). A képeket általában egy külön gyűjtőmappába gyűjtjük. Fontos, hogy a kép forrásának megjelölésénél pontosan adjuk meg, hogy a képet melyik mappában találja a böngésző. A HTML fájllal egy mappában levő képeknél elég csak a kép fájlnevét megadni.

A formázásnak CSS-sel sok lehetősége van, ilyenek pl. az átlátszóság és a sarkak lekerekítése.

  1. Állókép beillesztése: https://webfejlesztes.gtportal.eu/?f0=1_kepek_01
  2. Állóképek jellemzői: https://webfejlesztes.gtportal.eu/?f0=1_kepek_02
  3. Háttérkép és képek beillesztése: https://informatika.gtportal.eu/?f0=web_gyak_138