HTML5 A HTML4 tükrében
Története A HTML4 ajánlást 1999-ben adta ki a World Wide Web Consortium (W3C) Az XHTML megjelenése után 2004-ben a W3C úgy döntött, befejezi a HTML fejlesztését Þ megalakult a Web Hypertext Application Technology Working Group (WHATWG) elkezdték a HTML5-öt fejleszteni később a W3C is csatlakozott hozzájuk
Története A kidolgozás befejezése előtt a két fejlesztő azonban szétvált máshogy képzelték a fejlesztési irányt A WHATWG 2012-ben adta ki az első leírását a HTML5-ről A W3C 2014-ben adta ki a HTML5 ajánlását
A HTML5 jellemzői Előnyök: Egyszerűsített, letisztult kód Multimédiás elemek hozzáadása Beépített lehetőségek (API) bővítése JavaScript alapúak pl.: felhasználó helyének meghatározása Full duplex kliens-szerver kommunikáció megvalósítása
A HTML5 jellemzői Fejlettebb kliens oldali adattárolás Jóval hatékonyabb hibakezelés Hátrány: a böngésző kompatibilitása rosszabb mint az elődjéé relatív új nyelvnek számít
Főbb különbségek – HTML4 és HTML5
HTML5 alapszerkezet <!DOCTYPE html> <html lang="hu"> alapértelmezett nyelv <head> <meta charset="UTF-8"> kódolás megadása <title></title> </head> <body> </body> </html>
<!DOCTYPE> A böngészőnek adott információ a HTML verziójáról nem HTML tag, a <html> elé kell kerülnie HTML4 esetén: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 esetén: <!DOCTYPE html>
Karakterkódolás UTF-8 kódolás megadása HTML4-ben: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5-ben: <meta charset="UTF-8"> ez az alapértelmezett kódolás Nyelv megadása (csak HTML5) <html lang="hu">
Újdonságok HTML5-ben Új szemantikai elemek: <header>, <footer>, <article>, <section> szemantikai = a nevük árulkodik a funkciójukról Új grafikus elemek: <svg>, <canvas> Új multimédiás elemek: <audio>, <video> Folyamatjelző sáv megjelenítése: <progress> JavaScript-tel szemléltethető a folyamat
Újdonságok HTML5-ben Új tulajdonságok (opciók) a legtöbb tag-hez a legtöbb újítás az űrlapelemeknél az oldal alapértelmezett nyelve is megadható a <html> lang tulajdonságával, kétbetűs értékkel Magyar nyelv esetében: hu Szintaktikai változás: a tag-ek és a tulajdonságok csupa kisbetűvel írandók!
Ami már nincs, vagy változott A formázáshoz használt tulajdonságok eltűntek teljes egészében CSS-sel történik a formázás Eltávolított tag-ek: <applet> - Java applet beágyazása <big> - alapértelmezettnél nagyobb betűméret <center> - középre igazítás <font> - szövegrész betűtípusa, mérete és színe <frame>, <frameset> - oldalak felosztása
Ami már nincs, vagy változott Az <a> tag már csak hivatkozások megadására használható oldalon belüli „ugráshoz” (könyvjelző) az új szemantikai elemek azonosítója használható A <hr> funkciója megváltozott elsősorban különböző témák elválasztására szolgál
Új szemantikai elemek <section>: szakasz, a tartalom csoportosítása téma alapján azonos témához tartozó tartalmak összefogására (pl.: sport) <article>: független, önálló tartalmat ad meg az oldalon belül használható pl.: fórum hozzászóláshoz, blogbejegyzéshez és újságcikk esetében
Új szemantikai elemek <header>: fejléc megadható a teljes dokumentumra, de szakaszra is <footer>: lábléc információ a dokumentum/szakasz tartalmáról általában a szerző neve, copyright, illetve kapcsolatfelvételi információk kerül ide <nav>: navigációs linkek gyűjteménye (menü)
Új szemantikai elemek <main>: az oldal fő tartalma egyedi tartalom, csak egy lehet belőle <aside>: kiegészítő információ a szöveghez, megjegyzés kapcsolatban kell lennie a körülötte lévő szöveggel <figcaption>: képaláírás <figure>: kép és a hozzátartozó aláírás egy csoportba foglalása
Weboldal felosztása szemantikus elemekkel <header> <nav> <footer> <section> <article> <aside>
Új űrlap-tulajdonságok Új <input> típusok (type) űrlapoknál: number, date, time, calendar, range, color, email a korlátozó tulajdonságok is bővültek (min, max, required, pattern) egy űrlapon belül több feldolgozó fájl is megadható (formaction tulajdonsággal)
Új grafikus elemek <canvas>: (pixel)grafika készítéséhez téglalap alakú rajzterület (mérete megadható) a tényleges rajzolás JavaScripttel történik <svg>: vektorgrafikák készítéséhez külön tag-ekkel és CSS-sel formázható alakzatok
Videó lejátszás <video>: videó lejátszására megadható a lejátszási felület mérete (width, height) autoplay – automatikus lejátszás elkezdése controls – vezérlési lehetőségek (lejátszás, szünet és hangerő)
Videó lejátszás <video></video> közé meg kell adni <source> tag-et ebben a forrásfájlt (src) és a videofájl típusát (type) kell megadni a HTML5 három videoformátumot támogat: MP4, WebM, és ogm a böngészőknél különböző mértékű ezek támogatottsága az mp4 a legszélesebb körben elterjedt
Videó lejátszás példa <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Videó lejátszás A formátumproblémák elkerülésére youtube-videó is beágyazható <iframe> tag-el megadható a lejátszó mérete (width, height) forrásként a videó URL-jét kell megadni (src) beállítható még a lejátszás azonnali kezdése (autoplay), a folyamatos lejátszás (loop), és a vezérlők megjelenése (controls)
Audió fájl lejátszás <audio>: hang lejátszására controls – vezérlők hozzáadása (lejátszás, szünet és hangerő) <audio></audio> közé <source> tag-gel az audiofájl forrását (src) és típusát (type) kell megadni a HTML5 három audioformátumot támogat: MP3, Wav, és ogg a böngészőknél különböző mértékű ezek támogatottsága az mp3 a legszélesebb körben elterjedt
Audió fájl lejátszás példa <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Kiegészítők A webböngészők kiegészítői (plug-in, add- on) <object> tag-gel ágyazhatóak be a HTML dokumentumba minden böngésző támogatja szükség esetén méret megadható hozzá (width, height) data tulajdonsággal adható meg a forrás fájl neve Használata Java applet, PDF olvasó, Flash lejátszó esetén
Kiegészítők <embed> tag is használható a beágyazáshoz minden nagyobb böngésző támogatja mérete megadható src tulajdonsággal adható meg a forrás fájl neve Használata Java applet, PDF olvasó, Flash lejátszó esetén
Kiegészítő megadás példa Flash elem beágyazása: <object width="400" height="50" data="vmi.swf"> </object> vagy <embed width="400" height="50" src="vmi.swf">
A HTML4-ből átvett tag-ek
Karakterformázás Alapvető formázások: <b> - félkövér <i> - dőlt <u> - aláhúzott <s> - áthúzott <sup> - felső index <sub> - alsó index <small> - kisebb karakterméret <span> - szövegrészek tetszőleges formázására (<font> helyett is használható)
Karakterformázás Kiemelések: <mark> - a szöveg hátterének sárgával kiemelése <strong> - a félkövérhez hasonló szövegkiemelés <em> - a dőlthöz hasonló szövegkiemelés
Bekezdésformázások Címsorok: <h1>-től <h6>-ig Bekezdés: <p> Előformázott szöveg: <pre> megtartja a szöveg eredeti kinézetét (sortörés, szóközök), fix szélességű betűtípust használ Sortörés: <br> Elválasztóvonal: <hr>
Bekezdésformázások Idézetek: <q> - rövid, mondaton belüli idézéshez (idézőjelet rak) <blockquote> - hosszabb idézetet elkülönít a többi szövegtől <abbr> - rövidítések/betűszavak esetében megadható magyarázat az adott betűszóra állva megjelenik a megadott szöveg
Listák Felsorolás: <ul> Számozás: <ol> Listaelem: <li> (felsorolásnál/számozásnál) Leíró lista: <dl> - fogalmak magyarázatára <dt> - a fogalom neve <dd> - a fogalom magyarázata
Hivatkozások <a> - hivatkozás fájlra, az oldalon belüli pontra, vagy weboldalra interneten <link> - dokumentum és külső forrás összekapcsolására általában külső CSS fájl csatolásához
Képek <img> - kép beszúrása src tulajdonsággal <map> - képen belül különböző kattintható területek létrehozása az <img> usemap tulajdonságával hívható meg benne <area> tag-gel adhatóak meg a kijelölendő területek
Táblázatok <table> - táblázat megadása <tr> - táblázaton belüli sorok <td> - táblázaton (soron) belüli oszlopok <th> - oszlopfejléc <caption> - táblázat címe (táblázaton kívül, felette jelenik meg) közvetlenül a <table> alá írható csak be
Űrlapok és elemei <form> - űrlap megadása <input> - a legfontosabb űrlapelem, többféle típusa adható meg (type tulajdonsággal) text – egysoros beviteli mező password – jelszavas mező (szöveg helyett jelek) hidden – rejtett, nem látható radio – választógomb checkbox – jelölőnégyzet submit – elküldés gomb
Űrlapok és elemei <select> - lista megadása (legördülő/doboz) <option> - lista eleme <textarea> - szövegterület (sora és oszlopa is van) <button> - nyomógomb
Egyéb <div> - weboldal részekre osztására (blokkok) <script> - kliens oldali scriptek megadására pl.: JavaScript kód beágyazására <style> - a HTML elemek megjelenési formájának megadása stíluslapok (CSS) adott oldalon belüli használatára