1. fejezet¶

A fejezet anyaga¶

A kurzuson tárgyalt három nyelv általános szerepének áttekintése, a HTML szintaxisának és néhány alapvető elemének megismerése.

Áttekintés¶

A félév során a HTML, CSS és PHP nyelvekkel fogunk megismerkedni. Az alábbi táblázatban röviden összefoglaljuk ezeknek a nyelveknek az általános szerepét a webfejlesztésben.

	HTML	CSS	PHP
Micsoda?	jelölőnyelv	stílusleíró nyelv	szerveroldali szkriptnyelv
Szerepe	weboldalak tartalmának kialakítása, a tartalom strukturálása	weboldalak tartalmának formázása	tartalom dinamikus generálása, űrlapfeldolgozás, adatbázis-kezelés, menetkövetés, fájlkezelés, OOP, ...

HTML alapok I.¶

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.

Szabványok¶

A weboldalak készítésére vonatkozóan a W3C (World Wide Web Consortium) nevű szervezet ad ki előírásokat, szabványokat.

A fontosabb HTML szabványok:

HTML 4.01 (1999)
XHTML 1.0 Strict (2000)
- a korábbi HTML 4 szabvány "újraírása" XML alapokon
- szigorú szabályok jellemzik
- HTML dokumentumok egységessé tétele, egyszerűbb feldolgozhatóság programmal
HTML5 (2014)
- kevésbé szigorú az XHTML 1.0 Strict-hez képest
- programmal valamelyest nehezebb feldolgozni
- számos újdonságot tartalmaz elődjeihez képest (pl. szemantikus elemek, multimédia, grafikus elemek, új űrlapmező típusok).

A gyakorlaton a HTML5 és CSS3 szabványokkal fogunk foglalkozni. A webfejlesztés során érdemes törekednünk arra, hogy az általunk választott szabvány előírásait betartsuk!

Szabványosság ellenőrzése¶

Egy HTML vagy CSS fájl szabványosságát legegyszerűbben böngészős bővítményekkel vagy az alábbi online validátor szoftverek segítségével ellenőrizhetjük:

A HTML validátor weboldalán válasszuk a "Validate by File Upload" opciót, töltsük fel az ellenőrizni kívánt HTML fájlt, majd kattintsunk a "Check" gombra! Amennyiben az általunk írt kód nem szabványos, a validátor különböző megjegyzéseket bocsát rendelkezésünkre:

A piros hátterű Error-ok súlyosabb validálási hibákat jelentenek, amiket mindenképpen javítanunk kell. A hibaüzenetből egy kis angoltudással egyszerűen rájöhetünk a probléma okára (ha esetleg nem jöttök rá, nyugodtan keressétek a gyakorlatvezetőtöket).
A sárga hátterű Warning-ok kevésbé súlyos figyelmeztetések, amelyek általában megfontolandóak. Ezeknek a maradéktalan kijavítása viszont nem elvárt ezen a kurzuson.

Példa: Egy validálási hiba és egy figyelmeztetés

Validátor hibák és figyelmeztetések

Tipp

A beadandó projekt szabványossága egyszerűen ellenőrizhető a validátor segítségével.

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="webtervezés,webterv,HTML,CSS,PHP"/>: 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

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>

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>

Szakaszok¶

HTML-ben lehetőségünk van a weboldal tartalmának strukturálására is. Ezt szakaszok, tartalmi egységek kialakításával tehetjük meg.

A <div>...</div> egy általános célú blokkszintű (block) szakasz. A blokkszintű elemek mindig új sorban kezdődnek, és kihasználják a teljes rendelkezésre álló szélességet.

A <span>...</span> egy átalános célú sorszintű (inline) szakasz. A sorszintű elemek nem kezdődnek új sorban, illetve szélességük csak akkora, mint amekkora helyre szükségük van.

Szabály

Egy sorszintű (inline) HTML elem nem tartalmazhat blokkszintű (block) elemet.

Példa: A <span> és <div> tagek használata. A kód kimenetében a szemléletesség kedvéért a <div>-ek által meghatározott szakaszokat világoskék, míg a <span> által meghatározott szakaszt sárga háttérrel jelöltük

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Szakaszok</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div>
      <h2>1. tartalmi egység</h2>
      <p>Ez egy bekezdés.</p>
      <p>Ez egy másik bekezdés.</p>
    </div>
    <div>
      <h2>2. tartalmi egység</h2>
      <p>Ez egy olyan bekezdés, ami egy <span>span elemet</span> tartalmaz.</p>
    </div>
  </body>
</html>

A kód kimenete, színezéssel kiegészítve

Utolsó frissítés: 2024-02-10 17:23:02

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