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

Tartalomjegyzék
Bővített tartalomjegyzék

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 különböző böngészőkben. A legtöbb esetben persze ez nem szokott gondot okozni: a weboldalak azonosan jelennek meg a nagyobb böngészőkben. Ugyanakkor publikálás előtt mindig érdemes tesztelni őket, 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 épül fel. 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. A címkék rendszerének segítségével lehet kategorizálni egy dokumentum elemeit. 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. Például így <strong>Ez egy vastagon szedett szöveg</strong>. A zárócímkében mindig egy / jel található. Ha nem zárod le a címkét, akkor minden utána következő részre vonatkozni fog.

Nem minden címkének van azonban záró párja. Ezek az úgynevezett üres elemek, melyeknek nincs tartalma és önmagában létezik. Erre egy példa a <br> címke, mely sortörést jelez. Lezárhatod persze ezt is egy <br /> címkével, erre azonban nincs szükség.

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. Nem titkosak, így bármely publikált weboldalnak megtekinthető a böngésződben is a HTML kódja. Ahhoz, hogy egy weboldal HTML-kódjára rápillants, egyszerűen csak le kell nyomnod az adott oldalon a jobb gombot, majd az “Oldal forrása” lehetőségre kattintani. Ez persze egy csomó olyan kódot is tartalmaz általában, ami nem HTML.

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

A szükséges címkék

Egy HTML oldalnak bizonyos címkéket mindenkiéppen tartalmaznia kell.

  • Minden HTML dokumentum a <!DOCTYPE html> címkével kezdődik, mellyel önmagát azonosítja be, mint HTML dokumentum. Ennek záró címkéje a </html>, mely a file legvégén található.
  • A következő rész a <head>, mely olyan információkat tartalmaz, mint az oldal címe, vagy itt találhatók különböző szkriptek, melyek az oldalon futnak. Az itt található tartalomból nem sokat lát a felhasználó, csak az eredményével találkozik.
  • Végül pedig következik a <body> címke és ennek a szakasza, melynek tartalmával találkozik a weboldal látogatója. Ebben szerepelnek az oldal szövegei, képei, stb. A HTML dokumentum legnagyobb részét ez a szakasz teszi ki.

Gyakori HTML címkék

Mivel minden HTML címke áttekintése meglehetősen hosszadalmas lenne, ezért csak a legfontosabbakat említjük meg. Lehet, hogy nagyon egyszerűnek tűnnek számodra ezek a jelölések, de ne feledd, hogy a HTML-t 1993-ban hozták létre, és akkor még a web alapvetően szöveges tartalomból állt.

<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>: Az enter lenyomása egy weboldal szövegében nem azt jelenti, hogy a következő mondat új sorba kerül, ezért a sortörést jelezni kell. Ez a címke 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: az emphasis, vagyis a hangsúly rövidítése

(A fenti két címke helyett használhatod a régebbi megoldást is: a <b> szolgál a vastagon szedésre, az <i> pedig a dőlt betűvel írásra. Most már azonban javasolt az újabb címkéket használni.)

<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. A h után a szám a fontosságát mutatja. Minél nagyobb a szám, annál kisebb méretű címsort jelöl: h2, h3, h4, h5, stb. Bármennyi lehet bármelyikből, azonban leggyakrabban a h1 jelenti a legfontosabb címsor, mondjuk egy cikk esetében annak címét, a h2 pedig az alcímeket. Természetesen további alcímekkel is bonthatod a szöveget, mi is mindig használunk h3, h4 címkéket is.

<div></div>: A div egy tároló, mely a dokumentum egy szakaszát jelöli, és amelybe 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, azaz milyen forrásból töltöd be, 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.

Ezekből egy ilyen sor áll össze:

<img src=”https://webshark.hu/akarmi.jpg” alt=”Akármi” width=”711″ height=”313″>

Az img címkének nincs zárócímkéje,  a > jelzés zárja.

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. Ehhez kapcsolódik a href attribútum, mely az jelzi, hova mutat a link. Valamint gyakran felbukkan a title elem is, mely az a szöveg, ami akkor jelenik meg, ha valaki az egérmutatóval a kép fölé érkezik. Így áll össze a sor:

<a href=”https://webshark.hu/” title=”Kattints ide!”>Webshark</a>

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.

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.

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.

Hogyan kapcsolódik össze a HTML a CSS és a JavaScript?

Láttuk tehát, hogy miként formáz a HTML egy weboldalt. Önmagában azonban ma már nem elegendő ahhoz, hogy egy korszerű weboldalt működtess. Régen, az 1.0-ás web korszakában tökéletesen megfelelt, ma azonban már több kell egy statikus szövegnél.

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

Az előbbiek miatt kapcsolódik a HTML-hez a CSS (Cascading Style Sheets), mely azt határozza meg, hogyan nézzen ki egy szöveg a weboldalon. Korábban említettük a <div> címkét, melyen belül meghatározhatsz úgynevezett “class” attribútumokat. Ez a kapcsolódó CSS dokumentumra hivatkozik, melyben utasítások szerepelnek az adott rész megjelenésére.

A CSS lényege tulajdonképpen az, hogy az egész oldalra vonatkozóan kialakítasz egy megjelenést, és nem kell a HTML-ben mindenhol beállítani ugyanazt a stílust. Persze a HTML kódon belül is meg tudnád határozni a megfelelő stílust, ez azonban nem igazán praktikus, és kerüljük a használatát.

Mint láttuk, minden HTML dokumentum tartalmaz egy <head> címkét. Ide kell elhelyezni az inline CSS stíluslapot. Ebben meghatározhatod a különböző formázásokat.

Bekezdés formázás

A CSS-ben az a jó, hogy nem kell megadni a stílust minden egyes alkalommal, amikor létrehozol egy elemet. Csak annyit jelzel, hogy minden bekezdés alkalmazza az adott stílust. Például azt szeretnéd, hogy minden bekezdésed (melyek <p> címkék között szerepelnek) legyen valamivel nagyobb, és mondjuk a betűk sötétszürkék, nem pedig feketék. Ezt CSS-ben úgy tudod megtenni, hogy beírod:

p {
font-size: 120%;
color: dimgray;
}

Ennek hatására, amikor a böngésző megjelenít egy bekezdést, akkor a szövege 120 százaléka lesz az eredetinek, míg a színe fekete helyett szürke. Ha kíváncsi vagy arra, hogy milyen színeket használhatsz, a Mozilla oldalán megnézheted a CSS színek listáját.

Kis vagy nagybetűk használata

Azt tehát láttuk, hogy miként tudod befolyásolni minden bekezdés megjelenését. Most nézzük azt, hogy valamely bekezdést hogyan tudsz kisbetűssé tenni. Ehhez be kell írnod az alábbiakat:

p.smallcaps {
font-variant: small-caps;
}

Ahhoz, hogy egy adott bekezdésnél megváltozzon a betű, kicsit változtatni kell a HTML címkéknél:

<p class=”smallcaps”>Ez a bekezdés.</p>

A CSS-ben tehát megadásra került a class név egy pont elhelyezése után. Ez megteheted nem csak szöveggel, hanem képekkel, linkekkel, vagy bármi mással.

Színek módosítása

De a CSS nem csak a bekezdésekhez kapcsolódik. Például, ha linkekről van szó, akkor azoknál négy színről beszélhetünk. Van egy általános színük, ami megváltozik, ha kattintottak már rájuk, lehet egy hover által megjelenített szín, és egy aktív szín (tehát, amikor kattintás történik). Ezt így írhatjuk le CSS-ben:

a:link {
color: gray;
}

a:visited {
color: green;
}

a:hover {
color: rebeccapurple;
}

a:active {
color: teal;
}

Az előző részhez képest fontos változás, hogy nem pont szerepel az a után, hanem kettőspont.

Gomb kialakítása

Weboldalakon gyakran szükség van gombokra, ami már nem annyira egyszerű, mint az eddigiek. Így néz ki egy CSS-ben a gomb formázása:

a:link, a:visited, a:hover, a:active {
background-color: green;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

Ezután természetesen itt is meghatározhatsz a gomb négy állapotára négy megjelenést. A színek talán egyértelműek, a padding és a text align azt mondja meg, hogy hol helyezkedjen el a szöveg, míg a text-decoration eltávolítja az aláhúzást a linkből.

Szövegdoboz létrehozása

Ha valamely bekezdésedet úgy módosítanád, hogy egy keretbe vagy dobozba helyezed el, mivel kiemelnéd, akkor azt így teheted meg:

p.important {
border-style: solid;
border-width: 5px;
border-color: purple;
}

Ahhoz, hogy ez egy bekezdésre vonatkozzon, az alábbinak bele kell kerülnie a HTML-ben a megfelelő helyre:

<p class=”important”>Ide jön a keretes szöveg.</p>

Azt is meghatározhatod persze, hogy milyen legyen a keret stílusa: dotted, double, thin, medium, thick. De úgy is meghatározhatod minden egyes vonal vastagságát, hogy ezt írod be:

border-width: 5px 8px 3px 9px;

A felső vonal ebben az esetben 5 pixeles lesz, a jobb oldali 8, az alsó 3 és a bal oldali 9.

Középre rendezés

Erre több megoldás is kínálkozik. Egy kép esetében például ez:

.center {
display: block;
margin: auto;
}

Ez azt adja meg, hogy az adott elem blokként jelenik meg, és hogy a szegély minden oldalán automatikusan állítódik be, vagyis egyforma lesz mindenhol. Ha minden képet középre akarsz helyezni egy adott oldalon, akkor ezt írd be:

img {
margin: auto;
}

Ha szöveget akarsz középre helyezni, akkor ez a megoldása:

.centertext {
text-align: center;
}

Ha a centertext classt akarjuk használni, mert egy adott bekezdés szövegét középre helyeznénk, akkor ezt jelezni kell a HTML-ben:

<p class=”centertext”>This text will be centered.</p>

Egy kép áttetszőségének megváltoztatása

A CSS segítségével azonban minden egyéb apróság is megformázható az oldalon. Ilyen lehet például, ha egy képet áttetsző megjelenéssel akarsz elhelyezni az oldalon:

img {
opacity: 0.5;
filter: alpha(opacity=50);
}

De ha mondjuk azt szeretnéd, hogy amikor a felhasználó fölé viszi az egérmutatót, akkor elveszítse ezt az átlátszóságát, azt így teheted meg:

img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}

Mindezek alapján tehát valószínűleg már nagyjából kirajzolódik, hogyan is áll össze a CSS, hogyan működik. Ha elkezded használni, akkor egy idő után felismered a mintázatokat és egyre könnyebb lesz alkalmazni.

Mi az a JavaScript? Mire használhatod?

Mint láttuk a HTML határozza meg a tartalmat, a CSS pedig annak megjelenését. A harmadik fontos része a weboldalaknak a JavaScript, mely azt teszi lehetővé, hogy a weboldalak reagáljanak a felhasználói cselekvésekre anélkül, hogy egy új oldal töltődne be. Például a JavaScript segítségével lehetővé válik, hogy a weboldal figyelmeztesse a felhasználót arra, hogy egy beírt jelszó nem felel meg a követelményeknek.

A JavaScript egy szkriptnyelv, mellyel rendkívül sok dolog kivitelezhető, és sokkal bonyolultabb, mint a HTML és a CSS együttvéve. A legtöbb asztali böngésző támogatja, így a Chrome, a Firefox, a Safari, az Edge, az Opera, stb., illetve a a mobilböngészők nagy része is. Elsődleges célja, hogy a weboldalakat felhasználóbarátabbá tegye. Ebbe pedig beletartozik, hogy dinamikusan frissüljenek, megjelenítse a menüket, párbeszéd-dobozokat, animációkat, grafikákat, interaktív térképeket, videókat. A JavaScriptnek ez a típusú felhasználása a kliens-oldali javascript.

A JavaScriptet még a Netscape kezdte fejleszteni 1995-ben. Szükség volt ugyanis valamilyen “ragasztó-nyelvre”, ami javítja a weboldalak felhasználói élményét. Az első verziója a Mocha volt 1995 májusában, majd ezt átnevezték LiveScriptre szeptemberben, és végül decemberben kapta a JavaScript nevet.

Mit tehetsz meg a JavaScripttel?

A JavaScript egy teljes értékű programozási nyelv, mely be van ágyazva a böngészőbe. Bármit meg lehet vele tenni, amit a Javával is. Ebbe beletartozik:

  • Változók megadása
  • Értékek tárolása és visszakeresése
  • Saját osztályok meghatározása
  • Külső modulok betöltése és használata
  • Eseménykezelők írása, melyek válaszolnak a felhasználónak és más eseményeknek
  • Stb.

A folyamat úgy néz ki, hogy a böngésző betölti a weboldalt, értelmezi a HTML-t és létrehoz egy Document Object Modelt (DOM) a tartalmakból. A DOM a weboldal egy élő nézetét jeleníti meg a weboldalnak a JavaScript számára. A kódod frissítheti a DOM-ot, és egyből meg is jelenítheti a felhasználó számára. A böngésző lehetővé teszi az értesítéseket olyan eseményekről, mint az egérmozgás vagy egy kattintás. Ezáltal készíthetők jól használható alkalmazások, melyek bármilyen célt kiszolgálnak.

Természetesen a JavaScripttel létrehozhatók malware-ek, vírusok, böngésző-eltérítések. Ezek ellophatnak böngésző cookie-kat, jelszavakat, hitelkártyákat és letölthetnek vírusokat is a számítógépre.

Hogyan működik a JavaScript?

Amikor a böngésző betölt egy weboldalt, akkor a HTML-elemző elkezdi elemezni a HTML kódot és létrehozza a DOM-ot. Amikor az elemző találkozik egy CSS vagy JavaScript irányelvvel, akkor azt átadja a CSS-elemzőnek vagy a JavaScript motornak. A JavaScript motor betölti a külső JavaScript fájlokat és a belső kódot, de nem futtatja azonnal a kódot. Megvárja, amíg a HTML és a CSS feldolgozása befejeződjön. Ha ez megtörténik, akkor a JavaScript abban a sorrendben hajtódik végre, ahogy a weboldalon megtalálható. A különböző aktivitások eredményeként a JavaScript frissíti a DOM-ot, és azonnal meg is jeleníti a böngésző segítségével.

Általában a JavaScript betöltése a HTML script címkével történik. Erre több lehetőség is van, attól függően, hogy mire van szükséged. Egy külső javascript fájl betöltése ezzel a sorral történhet meg:

<script type=”text/javascript” src=”/path/to/javascript”></script>

Ugyanakkor meghatározhatod a teljes URL-t is, ha a javascript egy eltérő domainről származik:

<script type=”text/javascript” src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>

Közvetlenül is elhelyezhető azonban a HTML-ben. Például ha egy felugró ablakot akarsz megjeleníteni, akkor az így kerül be a kódba:

<script type=”text/javascript”>
alert(“Page is loaded”);
</script>

De ezeken túl egyéb módszerek is rendelkezésre állnak a JavaScript betöltésére. Tulajdonképpen teljes keretrendszerek használhatók JavaScript modulok betöltésére és futtatására.

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.