HTML5 alapok

Tamás Ferenc: Weblapkészítés HTML alapokon – 11. rész

HTML5 alapismeretek

 

25.1. fejezet: HTML5 bevezetés

A jól ismert HTML4-es szabványt az internet folyamatos változása miatt meg kellett újítani. Ez lett a HTML5. Elég sok régi taget eltöröltek, valamint egyszerűsítettek, de több újdonság is bevezetésre került. Bevezetésként itt van egy sima kódlap:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A dokumentum fejléce</title>
</head>

<body>
A lap tartalma…
</body>

 </html>

Ez láthatólag jóval egyszerűbb lett! A legfontosabb: minden modern böngésző támogatja!

Az érdekesebb újítások (többek között):

- Új szemantikus elemek, mint: heater, footer, article, section.

- A form-elemek új attribútumai, pl.: number, date, time, calendar, range.

- Új grafikus elemek, mint: svg, canvas, Google Maps.

- Új multimédia elemek, mint: audio és video.

Szintén újításokat hoztak az API-k (applikációs szoftver interfészek)

- HTML Geolokalizáció

- HTML Húzd és dobd (Drag and drop)

- HTML helyi tárolás

- HTML Applikációs cache

- HTML Web bedolgozó modulok

- HTML SSE

 

Néhány fontosabb változás összefoglaló táblázatban:

Régi HTML4

Helyette javasolt HTML5

acronym

abbr

applet

object

basefont

CSS

big

CSS

center

CSS

dir

ul

font

CSS

frame

-

frameset

-

noframes

-

strike

CSS, s vagy del

tt

CSS

Egy kis HTML-történelem:

- 1989: Tim Berners-Lee bemutatta a www-t.

- 1991: Tim Barners-Lee bemutatta a HTML nyelvet.

- 1993: Dave Raggett felvázolta a HTML+-t.

- 1995: A HTML Working Group kifejlesztette a HTML2-es szabványt.

- 1997: Megjelent a W3C ajánlása: HTML 3.2.

- 1999: Megjelent a W3C ajánlása: HTML 4.01.

- 2000: Megjelent a W3C ajánlása: XHTML 1.0.

- 2008: WHATWG bemutatta a HTML5 első publikus vázlatát.

- 2012: WHATWG bemutatta a HTML5-ös szabványt.

- 2014: Megjelent a W3C ajánlása: HTML5.

- 2016: W3C által javasolt frissítés: HTML5.1.


25.2. fejezet: Új HTML5 elemek áttekintése

<article>

Cikk definiálása a dokumentumban.

<aside>

Az oldal tartalmától eltekintve tartalmakat határoz meg.

<bdi>

A szöveg egy részét elszigeteli a többitől, amely így pl. más irányban formázható.

<details>

További hozzáadott tartalmak, amely a felhasználó által látható vagy nem.

<dialog>

Dialógus boxot vagy ablakot definiál.

<figcaption>

A <figure> elem számára határoz meg címet.

<figure>

Önálló tartalom meghatározása.

<footer>

A dokumentum vagy egyes rész számára határoz meg láblécet.

<header>

A dokumentum vagy egyes rész számára határoz meg fejlécet.

<main>

A dokumentum fő tartalmát határozza meg.

<mark>

Kijelölt/átszínezett tartalmaz határoz meg.

<menuitem> 

Egy felbukkanó menüből hívható parancsot/menürészletet határoz meg.

<meter>

Ismert tartományon belüli skaláris mérést határoz meg.

<nav>

Navigációs linkek meghatározása.

<progress>

A feladat előrehaladását jelzi.

<rp>

Meghatározza a ruby nyelveket nem támogató böngészők által megjelenített tartalmakat.

<rt>

Az egyes karakterek magyarázata/kiejtése (főleg Kelet-Ázsiai nyelveknél).

<ruby>

Ruby megjegyzést definiál (főleg Kelet-Ázsiai nyelveknél).

<section>

A dokumentum egy részletét határozza meg.

<summary>

Meghatározza a <details> elem látható fejrészét.

<time>

Dátum/idő meghatározása.

<wbr>

Az esetleges sortörés meghatározása.

Részletesebben: https://www.w3schools.com/html/html5_semantic_elements.asp

 

Új form-elemek:

<datalist>: Megadja a beviteli mezők előre definiált listáját.

<output>: Számítás eredményét adja meg.

Részletesebben: https://www.w3schools.com/html/html_form_elements.asp

Új beviteli típusok:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Részletesebben: https://www.w3schools.com/html/html_form_input_types.asp

 

Új beviteli attribútumok:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height és width
  • list
  • min és max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Részletesebben: https://www.w3schools.com/html/html_form_attributes.asp


25.3. fejezet: Szemantikus HTML5-elemek

Maga a kifejezés a jelentéssel bíró elemeket jelenti. Például:

Nem-szemantikus elemek: <div> és <span>. Ezek semmit sem hordoznak a belső tartalomról.

Szemantikus elemek: <form>, <table> és <article>. Ezek jelentést hordoznak, mivel egyértelműen meghatározzák a belső tartalmukat.

A szemantikus elemeket minden modern böngésző támogatja.

A legtöbb weboldal a következő alapvető elemeket tartalmazza:

html5 táblázat

A fenti példán túl is van még számos szemantikus elem. Íme a teljes lista:

- <article>: cikk.

- <aside>: oldalsáv tartalom.

- <details>: részletek (látható vagy elrejtett).

- <figcaption>: kép aláírása vagy magyarázata.

- <figure>: képelem.

- <footer>: lábléc.

- <header>: fejrész.

- <main>: fő tartalom (weblapé).

- <mark>: megjelöli a kijelölt/kiemelt részeket.

- <nav>: navigációs linkek.

- <section>: szekció/részlet.

- <summary>: látható összegzés a <details> elemnél.

- <time>: idő/dátum definiálása.

HTML5 <section> elem: A dokumentum egy szakaszát (szekcióját) határozza meg. Példa:

<section>
  <h1>WWF</h1>
  <p>A természetvédelemért felelős szervezet (WWF) ...</p>
</section>

HTML5 <article> elem: Egy független, önálló tartalmat határoz meg. A cikknek önmagában is van értelme, így a weboldal többi részétől függetlenül van értelme. Példák: fórum poszt, blog bejegyzés, újságcikk. Konkrét példa:

<article>
  <h1>Meghatározás</h1>
  <p>Ez a meghatározás konkretizálása.</p>
</article>

HTML5 <header> elem: A legtöbb elemnek, például a <section> vagy az <article> lehet fejrésze. Ez a <header> elem. Értelemszerűen a fő-tartalom előtt jelenik meg. Egy weblapon számos <header> elem lehet. Példa a <footer> résznél!

HTML5 <footer> elem: Egyéb elemek lábléce. A fő-tartalom alatt jelenik meg. Egy weblapon számos <footer> elem lehet. Példa:

<article>
  <header>
    <h1>Fejléc kiemelése</h1>
    <p>Fejléc leíró tartalma.</p>
  </header>
  <p>Ez maga a fő tartalom. Lehet elég hosszú is!</p>
  <footer>
     <p>Lábléc tartalma.</p>
  </footer>
</article>

HTML5 <nav> elem: Ez tartalmazza a navigációs linket vagy linkeket. Nem minden navigációs linket kell ebbe az elembe zárni. Példa:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

HTML5 <aside> elem: Itt a főoldaltól eltérő tartalmat lehet elhelyezni, mint egy oldalsáv. Lényeg: az <aside> tartalmának kapcsolódni kell a főlap tartalmához.

<p>A családommal együtt Székesfehérváron lakom.</p>
<aside>
  <h4>Székesfehérvár</h4>
  <p>Ez Fejér megye székhelye.</p>
</aside>

HTML5 <figure> és <figcation> elemek: Az elemek célja a képhez fűzött magyarázat. A HTML5-ben a kép és a magyarázata egy elembe csoportosítható, ez a <figure>. Példa:

<figure>
  <img src="/valami_kep.jpg" alt="szöveg" width="300" height="200">
  <figcaption>Ez a kép aláírása vagy magyarázata.</figcaption>
</figure>

A fejezet leghitelesebb forrása: https://www.w3schools.com/html/html5_semantic_elements.asp  

(További példákkal.)


25.4. fejezet: HTML migráció (4-ből 5-be)

A régi HTML4-es nyelvből aránylag egyszerűen át lehet ültetni egy weblapot HTML5-ös szabványra. Ez a fejezet sok ötletet és tippet ad ehhez a migrációhoz.

Tipikus HTML4-es elem

HTML5-ös verziója

<div id=”header”>

<header>

<div id=”menu”>

<nav>

<div id=”content”>

<section>

<div id=”article”>

<article>

<div id=”footer”>

<footer>

Fontos az egyes weblapok fejlécének konkretizálása.

HTML4-es verzió:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5-ös verzió:

<!DOCTYPE html>

 

A fejezet leghitelesebb forrása: https://www.w3schools.com/html/html5_migration.asp

(További példákkal.)


25.5. fejezet: HTML5 stílusajánló

Alapelvek:

- Mindig egységes stílust kell használni, mivel ez megkönnyíti mások számára a HTML-kód megértését.

- A jövőben az XML-alapú olvasók szeretnék elolvasni a HTML-dokumentumokat.

- Mindig használjunk jól formázott XHTML-közeli szintaxist.

- Minden esetben használjunk tiszta, egyszerű kódokat.

- Törekedjünk a kisbetűs kódok használatára. Például kerülendő:   <!DOCTYPE html>

Helyes: <!doctype html>

 - Kerülendő a kevert kis- és nagybetűs elemnevek használata. Például rossz:

<Section>
  <p>Ez egy paragrafus.</p>
 </SECTION>

Helyette helyes:

<section>
  <p> Ez egy paragrafus.</p>
</section>

- Minden HMTL5-ös elemet le kell zárni! Míg a régebbi megjelenítők megengedik a lezáratlan elemeket (<p> például </p>) lezárás nélkül is, de a HTML5 már „szereti” a mindig lezárt elemeket, ha létezik záró elem.

- A zárórésszel nem rendelkező elemet is le kell zárni. Például: <br/> vagy <meta charset=”utf-8” />.

- Az attribútumok szavaiban is csak kisbetűket használjunk. Kerülendő: <div CLASS="menu"> . Helyette javasolt: <div class="menu">.

- A HTML5 megengedi az attribútumok idézőjel nélküli használatát. Viszont itt is érvényesek az előző alapelvek, tehát a kis- és nagybetű használata ez egyes elemekben rossz. Az idézőjelesen használt értékek jobbak olvashatóak, valamint ha a paraméter üres helyet (space) tartalmaz, akkor kötelező az idézőjel használata. Például nem fog működni a következő megoldás: <table class=table striped> (Mivel van üres hely a paraméterben és a table simán nem paraméter). Rossz a következő: <table class=striped> Helyette érdemes használni: <table class="striped">.

- A képek attribútumaiban mindig hozzá kell adni a leírást (alt=”leírás”). Indok: mindig ez jelenik meg ha a kép nem olvasható vagy túl lassan töltődik be. Továbbá az is végre a szabványba került, hogy mindig használjuk paraméterként a képek méretét is. Helyes példa: <img src="/html5.gif" alt="HTML5" style="width:128px;height:128px"> .

- Üres helyek és egyenlőségjelek: a HTML5 megengedi az egyenlőségjelek körüli üres helyek használatát (például: <link rel = "stylesheet" href = "styles.css"> ) De ettől függetlenül sokkal jobban olvasható és némileg tömörebb is az alábbi verzió: <link rel="stylesheet" href="/styles.css"> . Így az utóbbi a helyes!

- HMTL kódszerkesztőt használva kifejezetten kellemetlen a balra-jobbra görgetés. Erősen javasolt a max. 80 karakteres kódsorok használata.

- Üres sorok és behúzás: Indok nélkül ne legyenek üres sorok a HTML-kódban. Ám az olvashatóság érdekében a nagyobb blokkok előtt vagy után használjon üres sorokat. Az egyes blokkok esetén a kódsor elején használjon több üres helyet, de a TAB használata tilos. Viszont nem szükséges minden egyes elemet behúzni!

- A HTML5 szabványban a <html> és a <body> kihagyhatóak. Például a következő kód helyes (HTML5-ben):

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Ennek ellenére nem javasolt a fenti két elem kihagyása, mivel számos böngésző nehezebben vagy egyáltalán nem jeleníti meg a weblapot. Ráadásul a hiányzó két elem miatt a DOM és XML szoftverekben a weblap összeomlást okozhat.

- Hasonló a helyzet a <head> elemmel is. Ennek hiánya is problémákat okozhat.

- Meta adat: A <title> elem kötelező a HTML5-ben, ráadásul javasolt ennek releváns kitöltése. Például: <title>HTML5 szintaxis és stílus</title>.

- HTML5 kommentek: ennek hiánya a régebbi szabványok egyik hibája volt, de immár ez is lehetséges. Tehát megengedett a következő: <!-- Ez egy komment. Nem jelenik meg. -->. A több soros kommentek is ugyanígy engedélyezettek.

- A stíluslapok használata is egyszerűsödött. Immár engedélyezett az alábbi variáns:

<link rel="stylesheet" href="/styles.css">

Ezzel a type attribútum használata tűnt el. További egyszerűsítés, hogy több paraméter is egy sorba írható. Például így:

p.intro {font-family: Verdana; font-size: 16em;}

- JavaScript betöltése: ez is egyszerűbb lett. A type itt sem kell. Szabályos például:

<script src="/myscript.js">

- Javaslatok: a nem-Windows szerverek gyakran tekintik különbözőnek a kis- és nagybetűket, így javasolt egységesen kisbetűs fájlneveket használni. Továbbá szinten ezen szerverek miatt nem szabad a fájl nevében ékezetet, üres helyet vagy írásjelet használni.

- A fájlok kiterjesztése is egységes lett:

HTML fájlok esetén: .htm vagy .html. (A böngésző nem tesz különbséget közöttük.)

CSS fájlok esetén: .css.

JavaScript fájlok esetén: .js.

PHP bármelyik variánsa esetén: .php.

 

A fejezet leghitelesebb forrása: https://www.w3schools.com/html/html5_syntax.asp

Folytatás: HTML5 Canvas grafika