2. Szövegformázás, Listák és Képek

Az előző részben elkészítettük a weboldalunk vázát a címsorokkal (<h1>) és a bekezdésekkel (). Most egy kicsit feldobjuk a tartalmat: megtanuljuk kiemelni a fontos szavakat, felsorolásokat készítünk, és megtanulunk képeket, valamint linkeket beilleszteni.

2.1. Szövegformázás és sortörés

Néha egy bekezdésen belül ki akarunk emelni egy szót, vagy új sorba akarunk lépni anélkül, hogy egy teljesen új bekezdést kezdenénk.

Sortörés és Vonal: Ahogy korábban említettük, vannak "üres" (önmagukat lezáró) tagek, amiknek nincs záró párjuk.

  (Break): Sima sortörést csinál a bekezdésen belül. A böngésző itt azonnal a következő sor elejére ugrik.
<hr> (Horizontal Rule): Egy vízszintes elválasztó vonalat húz a képernyőre. Szuperül használható témák elválasztására.

Kiemelések (Félkövér és Dőlt):

: Félkövérré (vastaggá) teszi a szöveget, és a keresőmotorok (Google) számára is jelzi, hogy ez egy nagyon fontos kulcsszó! (Régen a  taget használták erre, de a  ma már sokkal profibb és szabványosabb).
 (Emphasis): Dőlt betűssé teszi a szöveget, amivel finom hangsúlyt adhatunk a szónak. (Régen ez volt az  tag).

<p>Ez egy normál szöveg, de <strong>ez a szó nagyon fontos</strong>, <br> 
ez pedig már egy új sorban jelenik meg, <em>kissé megdöntve</em>.</p>

<hr>
<p>Ez a bekezdés már a vonal alatt van.</p>

2.2. Listák (Felsorolások)

A weboldalakon rengeteg listát használunk (például egy recept hozzávalói, vagy egy navigációs menü). A HTML-ben két fő listatípus létezik: a számozatlan (pöttyös) és a számozott.

Mindkét listánál kétféle taget kell kombinálnunk: egyet, ami magát a listát (a "dobozt") jelöli, és egyet, ami a listán belüli elemeket (a sorokat).

1. Számozatlan lista (<ul> - Unordered List) Egyszerű, "pöttyös" felsorolást készít. A lista elemeit az <li> (List Item) tagek közé kell tenni.

<h3>Kedvenc gyümölcseim:</h3>
<ul>
    <li>Alma</li>
    <li>Banán</li>
    <li>Eper</li>
</ul>

2. Számozott lista (<ol> - Ordered List) Ha a sorrend is számít (pl. egy recept lépései vagy egy toplista), ezt használjuk. A böngésző automatikusan beszámozza (1. 2. 3.) a sorokat!

<h3>A teafőzés lépései:</h3>
<ol>
    <li>Víz forralása</li>
    <li>Tea filter beáztatása</li>
    <li>Cukor és citrom hozzáadása</li>
</ol>

2.3. A nagy trükk: Az Attribútumok (Tulajdonságok)

Mielőtt továbblépnénk a linkekre és a képekre, meg kell értenünk az attribútumok (tulajdonságok) fogalmát. Sokszor magának a tagnak a neve nem elég. Ha be akarok tenni egy képet, a gépnek tudnia kell, hogy melyik képet. Ha egy linket, tudnia kell, hogy hova mutasson.

Az attribútumokat MINDIG a nyitó tagen belülre írjuk, a tag neve után, egy szóközzel elválasztva. Formátuma: tulajdonság_neve="érték"

2.4. Hivatkozások (Linkek) készítése

A weboldalakat a linkek kötik össze. Egy hivatkozást az <a> (Anchor - horgony) taggel hozunk létre. Azonban az <a> tag önmagában semmit sem csinál, kötelező megadni neki egy attribútumot: a href-et. Ez mondja meg, hova mutasson a link.

<p>Keresd meg a Google-ben: <a href="[https://www.google.hu](https://www.google.hu)">Kattints ide a Google megnyitásához!</a></p>

* href: A célállomás pontos URL címe (pl. https://...). * Ami a nyitó <a> és a záró </a> tag között van (a fenti példában a "Kattints ide..." szöveg), az lesz kék és aláhúzott, arra tud kattintani a felhasználó!

Tipp: Ha azt szeretnéd, hogy a link egy teljesen új fülön (tabon) nyíljon meg a böngészőben, és ne a te oldaladat zárja be, add hozzá a target="_blank" attribútumot is! <a href="https://www.google.hu" target="_blank">Google új fülön</a>

2.5. Képek beillesztése

Képet az <img> (Image) taggel szúrhatunk be. Ez egy üres tag, tehát nincs záró párja! A beillesztéshez az alábbi fontos attribútumokat használjuk:

src (Source - forrás): Ez mondja meg, honnan töltse be a képet. Ez lehet egy internetes link, vagy egy képfájl neve, ami a gépeden (a HTML fájlod mellett) van.
alt (Alternative text - alternatív szöveg): Ez a szöveg jelenik meg, ha a kép valamiért nem tud betöltődni (pl. rossz az internet), illetve ezt olvassák fel a látássérültek képernyőolvasó programjai. Ezt kötelező mindig megadni!
title (Cím - felugró szöveg): Ez az a szöveg, ami egy kis sárga/fehér buborékban (tooltip) megjelenik, amikor a felhasználó ráviszi az egeret a képre, és egy pillanatig rajta tartja. Extra információk átadására tökéletes!
width (Szélesség) és height (Magasság): Ezekkel adhatod meg a kép fizikai méretét pixelben (képpontban). Tipp: Ha csak az egyiket (pl. csak a szélességet) adod meg, a böngésző automatikusan, méretarányosan fogja beállítani a másikat, így garantáltan nem torzul el a fotó!

<!-- Kép beillesztése egy internetes címről, extra feliratokkal és 200x200 pixeles méretben -->
<img src="[https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png](https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png)" alt="A JavaScript logója" title="Ez a hivatalos JS logó" width="100" height="100">

💻 Gyakorlati Feladat

Készíts egy egyoldalas, bemutatkozó "Étlapot" vagy "Kedvenc filmjeim" listát az alábbi feltételekkel:

Az oldalnak legyen egy <h1>-es főcíme!
Használj alatta egy <hr> vonalat az elválasztáshoz!
Írj egy rövid, 2-3 mondatos  bekezdést, amiben legalább egy szót félkövérrel (), egyet pedig dőlten () emelsz ki!
Készíts egy számozott listát (<ol>) a 3 kedvenc ételedről vagy filmedről!
Keresd meg a Google Képkeresőben a listád első helyezettjét. Jobb gomb -> "Kép címének másolása" (Copy image address). Illeszd be a képet az oldaladra az <img> tag segítségével! Ne felejtsd el az alt attribútumot!
A kép alatt helyezz el egy linket (<a>), amely az IMDb-re, egy Wikipédia szócikkre, vagy a receptre mutat! Állítsd be, hogy a link új fülön nyíljon meg (target="_blank")!