Kihagyás

1. fejezet

A fejezet anyaga

A követelmények ismertetése.

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ő plug-inekkel 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, majd töltsük fel az ellenőrizni kívánt HTML fájlt! 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.

1
<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.

1
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

1
<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

1
<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

1
<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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!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
  • <html>...</html>: ez írja le magát a weboldalt
    • a lang attribútummal megadhatjuk a weboldal talmá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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!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
&nbsp; szóköz
&lt; < kisebb mint
&gt; > nagyobb mint
&amp; & és-jel
apos; ' aposztróf
&quot; " idézőjel
&copy; © 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

1
<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)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!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 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.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!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: 2021-02-19 15:16:23