Mi az a HTML? És hogyan működik?

Ha nem vagy programozó, akkor is hallhattál már a HTML-ről a webbel kapcsolatban, hiszen minden weboldal alapja. Ugyanakkor ennél többet nem feltétlenül tudsz róla, mert a web használatához nincs rá szükséged. Ha viszont van egy weboldalad, akkor nem árt tisztában lenni a HTML alapokkal.

A kezdetekben a web az írott szövegre épült, gyakorlatilag olyan volt, mint egy szövegszerkesztő. A HTML-t ehhez készítette Tim Berners-Lee. Az egyszerű szövegekből akkor születtek egy kicsit látványosabb vizuális megoldások, miután megjelent a CSS és a Javascript, és persze később még sok egyéb változás. Mindezek ellenére a HTML máig megmaradt, ugyanúgy a weboldalak alapját képezi, csak egy kicsit továbbfejlődött, és ma már az 5-ös verziónál jár.

Mi az a HTML?

A HTML egy olyan nyelv, melyet weboldalak elkészítésére használhatunk. A kifejezés a Hypertext Markup Language (hiperszöveges jelölőnyelv) rövidítése, és egy utasításkészlet a webböngésződ számára. Az utasítások betartásával a böngésző úgy jeleníti meg a weboldalad, ahogy azt Te szeretnéd.

A HTML nem egy programozási nyelv, hanem egy jelölőnyelv. Az előbbieket arra használjuk, hogy problémákat oldjunk meg, mint amilyen egy matematikai egyenlet, vagy adatokat kezeljünk, vagy számítógépes játékok karaktereit mozgassuk. A HTML-t viszont ilyen feladatokra nem tudod használni, csak arra szolgál, hogy megmutassa egy weboldal elrendezését.

A különböző böngészők olykor eltérően értelmezik a HTML utasításait, így néha nem teljesen egyforma a megjelenése egy weboldalnak. A legtöbb esetben persze ez nem szokott gondot okozni: a weboldalak azonosak a különféle nagyobb böngészőkben. Ugyanakkor publikálás előtt mindig érdemes tesztelni, különösen akkor, ha új címkéket használsz, melyeket talán még nem minden böngésző támogat.

Hogyan épül fel a HTML?

A HTML elemekből áll. Ezek közé tartoznak a címkék (tagek), melyek utasításokat tartalmaznak arra vonatozóan, hogy miként jelenjen meg a weboldal egy adott része. Egy alap-weboldal körülbelül így néz ki HMTL-ben:

<html>
<head>
<title>Cím</title>
</head>
<body>
</body>
</html>

Az itt is látható címkék előre meghatározottak és olyan dolgoknak adják meg a tulajdonságait, mint például egy kép, egy link, egy gomb, stb. A címkék legnagyobb része úgy épül fel, hogy van egy kezdő- és egy zárócímke változata is. Ezek zárják be az előbb említett dolgokat, mint egy képet vagy linket.

A HTML címkék nem láthatók a weboldalon. A böngésződ csak követi az általuk meghatározott utasításokat, de soha nem mutatja meg őket magától a felhasználóknak. De nem titkosak, így bármely publikált weboldalnak megtekinthető a böngésződben is a HTML kódja.

HTML címkékből rengeteg van, de ezek mindegyikét nem kell megtanulnod ahhoz, hogy létrehozz egy weboldalt.

Mik azok a HTML jellemzők (attribútumok)?

A jellemzők meghatározzák a címkék speciális funkcióit, tulajdonságait, például amilyen a szélesség vagy a magasság. Az attribútumok a nyitott címkék közé kerülnek be.

<p width=”123″ height=”567″></p>

Ezek is előredefiniáltak a World Wide Web Consortium (W3C) által.

Gyakori HTML címkék

<p></p>: Jelentése paragraph, vagyis bekezdés. Az egyes bekezdéseket választhatod így el a szövegtörzsben, ahol elég hosszú a szöveg, hogy szükség legyen rá. Meghatározhatod a stílusát is (például: style=”width:200px; padding-right:5px; text-align:center;”) Itt a width a szélességét adja meg, a padding a körülötte lévő térközt (fent, lent, jobb vagy baloldal), míg a text-align azt mondja meg, hogy hova kerüljön a szöveg (jobbra, balra, középre).

<br />: Ez a bekezdésen belüli szöveg sortörésére szolgál. Ahol elhelyezed a címkét, ott kerül új sorba a bekezdés szövege.

<strong></strong>: A vastagon szedett szöveg címkéje. (<strong>Ide kerül a szöveg.</strong>)

<em></em>: Dőlt betűket tudsz létrehozni vele.

<ul></ul>: A ul az unordered list, azaz a rendezetlen lista rövidítése, ami azt jelenti, hogy listákat tudsz készíteni a címke segítségével. A <li></li> tageknek a tárolója.

<ol></ol>: Ez lenne a rendezett lista, vagyis az ordered list. A rendezetlen listával szemben az egyes listaelemek nem felsorolásjelekkel jelennek meg, hanem számozva.

<li></li>: A list item rövidítése, vagy listatételekről van szó. Az egyes sorokat jelölöd ezzel.

<h1></h1>: Headings, vagyis címsor. Ahogy nő a számuk, úgy lesznek egyre kisebb méretűek a címsorok: h2, h3, h4, h5, stb.

<div></div>: A div egy tároló, melybe bele tudsz helyezni dolgokat, melyeket később CSS segítségével strukturálhatsz.

<section><nav><footer>: Ezek már HTML5 címkék, melyekhez ugyanúgy kell zárócímke. Úgy működnek, mint a div, de azért praktikus a használatuk, mert így nem veszel el a sok div között, segítenek rendszerezni és átláthatóbbá tenni a kódot.

Hogyan helyezhetsz el képet HTML-ben?

Képek elhelyezésénél az img címkét kell használnod:

<img src=”https://webshark.hu/kep.jpg” alt=”Kép”>

A kép címkéhez két attribútum kapcsolódik: az src határozza meg, hogy hol található a kép, míg az alt címke az alternative text rövidítése, vagyis azé a szövegé, mely a kép helyett jelenik meg, ha nem töltődik be a kép.

A szélességet is meg tudod határozni a width=” ” és height=” ” attribútumokkal.

Az img címkének nincs zárócímkéje, /> jelzéssel tudod lezárni.

Hogyan módosíthatod a betűtípust?

A betűtípusok a font címkével és a face jellemzővel módosíthatók:

<font face=”arial”>Szöveg</font>

Ugyanígy a méret vagy a szín is megváltoztatható egy attribútum segítségével:

<font size=”12″>Szöveg</font>

<font color=”red”>Szöveg</font>

Hogyan helyezhetsz el linket?

A link elhelyezéséhez az “a” címkét kell használnod:

<a href=”https://webshark.hu/”>Webshark</a>

Itt a href attribútum az jelzi, hova mutat a link. Emellett még jó pár attribútum belekerülhet a link címkék közé. Így például jelezheted, hogy a linket egy új ablakba nyissa meg a böngésző (target=”_blank”), vagy, hogy ne kövesse a Google (rel=”nofollow”).

Hogyan hozz létre táblázatot HTML segítségével?

A <table> címkével jelezheted, hogy táblázatról van szó. Ezt majd le kell zárnod </table> címkével. Az egyes sorokat a <tr> kezdi és a </tr> zárja. Végül pedig a td az egyes cellákat jelöli (<td></td>). Ez így néz ki, ha elkészül:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Korábban a weboldalak strukturálására is használták a táblázatokat, mára azonban megszűnt ennek a gyakorlata, mert rossz megoldás.

Mi az a kikommentelés?

Mint néhány programozási nyelvben, a HTML-ben is lehetőség van kikommentelni dolgokat. A megjegyzésekkel a böngészők nem foglalkoznak, ha a megfelelő jelölést használod. Egyrészt kikapcsolhatsz vele címkéket:

<!-- <p width="123" height="567"></p> -->

Ilyenkor nem kell törölni a kódnak az adott a sorát, mivel azt közlöd a böngészővel, hogy ne vegye figyelembe az utasítást. Ugyanakkor a nyitó és a záró komment jelek közé értelmező megjegyzést is fűzhetsz üzenetként.

Címkék:

A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.