1.1. fejezet¶

Bevezetés¶

A HTML (HyperText Markup Language) egy jelölőnyelv, amelynek segítségével megmondhatjuk, hogy mi az, amit egy weboldalon látni szeretnénk (pl. szövegek, képek, hivatkozások, táblázatok, multimédia stb.).

A HTML lehetőséget biztosít a weboldalak tartalmának strukturálására is. Ezt különböző szakaszok, tartalmi egységek (pl. fejléc, menüsor, fő tartalom, lábléc stb.) kialakításával tehetjük meg.

HTML kód írása¶

A HTML kód írása roppant egyszerű:

a kódot egy tetszőleges szerkesztőprogramba írjuk (pl. Gedit, Notepad++, Sublime Text, WebStorm, Visual Studio Code stb.)
az állományt .html kiterjesztéssel mentjük el
végül a fájlt megnyitjuk egy szimpatikus böngészővel, és már láthatjuk is az eredményt.

Megjegyzés

Ugyanannak a HTML kódnak a kimenete különböző böngészőkben (illetve böngészőverziókban) eltérő módon jelenhet meg.

HTML alapfogalmak¶

Tagek¶

A HTML fájlok alapvető építőelemei a tagek (ejtsd: "tegek"). Ezek < és > közé írt, speciális jelentéssel bíró HTML objektumok. A HTML nyelv egy előre definiált tagkészlettel rendelkezik.

A legtöbb HTML tag páros tag, ami azt jelenti, hogy egy nyitótagből és egy zárótagből áll. A zárótaget úgy képezzük a nyitótagből, hogy a tag neve elé, azaz közvetlenül a < után egy perjelet teszünk. Ilyen páros tag például a bekezdések beszúrására alkalmas <p> tag.

<p>Ide jön valami szöveg...</p>

Vannak viszont páratlan tagek (más néven üres tagek) is, amelyek csak nyitótagből állnak. Ilyen például a sortörés beszúrására alkalmas <br> tag.

Első sor <br>Második sor

A páratlan tagek végére opcionálisan perjelet is tehetünk (tehát például <br> helyett azt is írhatjuk, hogy <br/>). Ebben a jegyzetben minden páratlan tag esetén kitesszük ezt a perjelet, noha ez a HTML5 szabványban szabadon elhagyható.

A HTML tageket egymásba is ágyazhatjuk. Ekkor fontos, hogy az egymásba ágyazott tageket belülről kifelé haladva kell lezárnunk!

Példa: Tagek egymásba ágyazása: először lezárjuk a legbelső <span> taget, majd az őt beágyazó <p> taget, végül pedig a legkülső <div> taget

<div><p>Ide jön valami <span>szöveg...</span></p></div>

Attribútumok¶

A tagekhez tartozhatnak bizonyos speciális tulajdonságok, úgynevezett attribútumok is, amelyekhez speciális értékeket rendelhetünk. Ezeket az attribútum-érték párokat mindig a nyitótag neve után írjuk, szóközzel elválasztva.

Példa: Egy páros <a> tag, amely a href és target attribútumokkal rendelkezik

<a href="https://www.google.com" target="_blank">Google</a>

Példa: Egy páratlan <img> tag, amely az src, alt és width attribútumokkal rendelkezik

<img src="cat.jpg" alt="Macska" width="100"/>

A HTML dokumentum felépítése¶

Minden HTML dokumentumunk elkészítése az alábbi kód megírásával fog kezdődni:

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Weboldal címe...</title>
    <meta charset="UTF-8"/>
  </head>
  <body>

  </body>
</html>

Tipp

A fenti (vagy ahhoz hasonló) kiinduló HTML kódot néhány szerkesztőprogrammal le is generáltathatjuk:

A WebStorm automatikusan generálja a kiinduló kódot HTML fájlok esetén
Sublime Text-ben legépeljük, hogy html, majd közvetlen utána nyomunk egy Tab-ot
Visual Studio Code-ban leírunk egy felkiáltójelet (!), majd közvetlen utána nyomunk egy Tab-ot.

Nézzük meg, hogy az egyes sorok mit is jelentenek a kódban!

<!DOCTYPE html>: közöljük a böngészővel, hogy a HTML5 szabvány szerint írtuk a kódot
- ez nem egy HTML tag, csupán egy deklaráció, egyfajta információközlés a böngészővel
<html>...</html>: ez a tag írja le magát a weboldalt
- a lang attribútummal megadhatjuk a weboldal tartalmának nyelvét (pl. hu = magyar, en = angol, de = német stb.)
<head>...</head>: fejrész - az oldalon nem megjelenő metainformációk, fájlcsatolások, CSS- és szkriptbeágyazások helye
- <title>...</title>: a böngészőfülön megjelenő cím
- <meta charset="UTF-8"/>: UTF-8 karakterkódolás beállítása
<body>...</body>: törzsrész - a megjelenő tartalom, strukturális elemek és szkriptek helye

Kommentek¶

A HTML fájlokba lehetőségünk van kommenteket (megjegyzéseket) írni az alábbi szintaxissal:

1	`<!-- Ez egy komment a HTML kódban -->`

A kommentek szövege a weboldalon természetesen nem jelenik meg, viszont az oldal HTML forráskódjában (amit a legtöbb böngészőben a Ctrl+Shift+I billentyűkombinációval egyszerűen megtekinthetünk) ezek a kommentek láthatóak lesznek.

A head fontosabb tagjei¶

Az alábbiakban áttekintjük a HTML dokumentum fejrészében (<head> és </head> között) használatos fontosabb tageket.

<title>...</title>: a böngészőfülön megjelenő cím (ezt mindig adjuk meg!)
<meta charset="UTF-8"/>: UTF-8 karakterkódolás beállítása (ezt mindig adjuk meg!)
<meta name="author" content="Gipsz Jakab"/>: a weboldal szerzője
<meta name="description" content="Jakab blogoldala"/>: a weboldal leírása
<meta name="keywords" content="webfejlesztes,webfejl,HTML,CSS"/>: keresési kulcsszavak megadása
<link rel="stylesheet" href="valami.css"/>: külső CSS fájl beágyazása
<link rel="icon" href="valami.png"/>: böngészőfülön megjelenő ikon
<style>...</style>: CSS formázás beszúrása
<script>...</script>: JavaScript beszúrása

A body fontosabb tagjei¶

Ebben a részben megismerkedünk néhány, a HTML dokumentum törzsrészében (<body> és </body> között) használatos taggel.

Bekezdések, címsorok¶

<p>...</p>: bekezdés
<h1>...</h1>: 1. szintű címsor (legfontosabb)
<h2>...</h2>: 2. szintű címsor
<h3>...</h3>: 3. szintű címsor
<h4>...</h4>: 4. szintű címsor
<h5>...</h5>: 5. szintű címsor
<h6>...</h6>: 6. szintű címsor (legkevésbé fontos)

Példa: Címsorokat és egy bekezdést tartalmazó HTML kód

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Bekezdések, címsorok</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <h1>1. szintű címsor</h1>
    <h2>2. szintű címsor</h2>
    <h3>3. szintű címsor</h3>
    <h4>4. szintű címsor</h4>
    <h5>5. szintű címsor</h5>
    <h6>6. szintű címsor</h6>
    <p>Ez egy bekezdés...</p>
  </body>
</html>

A fenti kódot tartalmazó HTML fájlt böngészőben megnyitva a következő kimenetet kapjuk:

A kód kimenete

Képek¶

Ha egy weboldalra egy képet szeretnénk beszúrni, akkor ezt az <img/> páratlan taggel tudjuk megtenni. A tag fontosabb attribútumai:

src: a kép elérési útvonala
alt: helyettesítő szöveg, ha a kép betöltése sikertelen
title: a kép címe, ami akkor jelenik meg, ha a kurzor a kép fölött áll
width: a kép szélessége (pixelben)
height: a kép magassága (pixelben).

Ha a width és height attribútumok közül csak az egyiket adjuk meg, akkor a másik a kép eredeti méretarányaiból számolódik. Tehát például, ha egy 400x300-as (400 pixel széles, 300 pixel magas) kép szélességét 800 pixelre állítjuk (megduplázzuk), akkor a magassága automatikusan 600 pixel lesz.

Példa: A HTML fájllal egy mappában van egy img mappa, amiben található egy cat.jpg kép. Szúrjuk be a képet a weboldalunkra úgy, hogy a szélessége 400 pixel legyen! (A kép forrása)

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Kép beszúrása</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <img src="img/cat.jpg" alt="Macska" title="Ez egy macska" width="400"/>
  </body>
</html>

A kód kimenete

Az id és class attribútumok¶

Minden HTML objektumnak adható egyedi azonosító, illetve minden HTML objektum csoportosítható osztályokba. Ezek alapvetően majd CSS-ben lesznek hasznosak, amikor egy-egy objektumra vagy objektumok csoportjára szeretnénk hivatkozni.

Az egyedi azonosító (id attribútum) egy adott HTML elem egyértelmű azonosítására szolgál. Értéke a dokumentumon belül szabályosan egyedi kell, hogy legyen, továbbá ez az érték nem tartalmazhat szóközt, valamint számmal sem kezdődhet.

Az osztály (class attribútum) jellemzően több HTML elem csoportosítására használatos. A class attribútum értéke nem kell, hogy egyedi legyen, sőt általában nem az. Értékéül szóközzel elválasztva megadható több olyan osztály neve is, amelyekhez az adott elem tartozik.

Példa: id és class attribútumok használata

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>id, class</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <!-- Egy "asd" egyedi azonosítóval rendelkező bekezdés, ami a "foo" osztályhoz tartozik -->
    <p id="asd" class="foo">Ide jön valami szöveg...</p>

    <!-- Egy kép, ami a "foo" és "bar" osztályokhoz tartozik -->
    <img class="foo bar" src="my-image.png" alt="Valami kép..."/> 
  </body>
</html>

Hivatkozások (Linkek)¶

Hivatkozásokat (avagy linkeket) az <a>...</a> páros tag segítségével szúrhatunk be a weboldalunkra. A tag fontosabb attribútumai:

href: cél, ahova a hivatkozásra kattintva jutunk
- lehet egy másik weboldal - pl. <a href="https://www.google.com">Google</a>
- lehet egy másik fájl - pl. <a href="bevasarlolista.txt">Bevásárlólista</a>
- lehet lapon belüli hivatkozás - pl. <a href="#top">Vissza a tetejére</a> (ez az id="top" attribútummal rendelkező elemre mutat)
target: hol legyen megnyitva a hivatkozott cél
- _self: ugyanott, ahol rákattintottunk (alapértelmezett)
- _blank: új lapon vagy ablakban
title: hivatkozás címe, ami akkor jelenik meg, ha a kurzor a hivatkozás fölött áll.

Példa: Hivatkozások beszúrása

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Hivatkozások</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <h1 id="top-of-page">Hivatkozások (linkek)</h1>

    <!-- Egy hivatkozás, ami egy másik weboldalt nyit meg egy új lapon -->
    <p><a href="https://youtu.be/dQw4w9WgXcQ" target="_blank">Valami klassz dolog</a></p>

    <!-- Egy hivatkozás, ami egy képet nyit meg ugyanott, ahol a linkre kattintottunk -->
    <a href="img/cat.jpg" title="Megtekintés nagyobb méretben">
      <img src="img/cat.jpg" alt="Macska" width="400"/>
    </a>

    <!-- Egy hivatkozás, ami az id="top-of-page" attribútummal rendelkező elemre mutat -->
    <p><a href="#top-of-page">Vissza a lap tetejére</a></p>
  </body>
</html>

Karakterentitások¶

Mivel HTML-ben vannak speciális célokra lefoglalt karakterek (pl. a < és > karakterek), ezért ezeket valahogy máshogy kell írnunk, ha meg szeretnénk őket jeleníteni a weboldalunkon. Az ilyen karakterek megadására szolgálnak a karakterentitások.

Néhány gyakrabban használt karakterentitás (teljes lista itt):

Karakterentitás	Megjelenítés	Elnevezés
` `		szóköz
`<`	<	kisebb, mint
`>`	>	nagyobb, mint
`&`	&	és-jel
`'`	'	aposztróf
`"`	"	idézőjel
`©`	©	copyright

Példa: Ha egy bekezdésbe azt szeretnénk írni, hogy 5 < 10 > 8, akkor ezt a következőképpen tehetjük meg karakterentitások használatával

<p>5 &lt; 10 &gt; 8</p>

Utolsó frissítés: 2024-08-16 16:51:30

Karakterentitás	Megjelenítés	Elnevezés
` `		szóköz
`<`	<	kisebb, mint
`>`	>	nagyobb, mint
`&`	&	és-jel
`'`	'	aposztróf
`"`	"	idézőjel
`©`	©	copyright

Karakterentitás	Megjelenítés	Elnevezés
` `		szóköz
`<`	<	kisebb, mint
`>`	>	nagyobb, mint
`&`	&	és-jel
`'`	'	aposztróf
`"`	"	idézőjel
`©`	©	copyright

Karakterentitás	Megjelenítés	Elnevezés
` `		szóköz
`<`	<	kisebb, mint
`>`	>	nagyobb, mint
`&`	&	és-jel
`'`	'	aposztróf
`"`	"	idézőjel
`©`	©	copyright