Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
HTML5 A HTML4 tükrében
2
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
3
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
4
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
5
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
6
Főbb különbségek – HTML4 és HTML5
7
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>
8
<!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 Transitional//EN" " HTML5 esetén: <!DOCTYPE html>
9
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">
10
Ú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
11
Ú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!
12
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
13
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
14
Ú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
15
Ú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ü)
16
Ú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
17
Weboldal felosztása szemantikus elemekkel
<header> <nav> <footer> <section> <article> <aside>
18
Új űrlap-tulajdonságok
Új <input> típusok (type) űrlapoknál: number, date, time, calendar, range, color, 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)
19
Ú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
20
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ő)
21
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
22
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>
23
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)
24
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
25
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>
26
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
27
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
28
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">
29
A HTML4-ből átvett tag-ek
30
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ó)
31
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
32
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>
33
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
34
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
35
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
36
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
37
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
38
Ű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
39
Ű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
40
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
Hasonló előadás
