HTML5 A HTML4 tükrében.

Slides:



Advertisements
Hasonló előadás
Skultéti Attila március 24.
Advertisements

Számítógépes alapismeretek Kommunikáció Információs és Kommunikációs Technológiák (IKT)
ECM/DMS A GYAKORLATBAN E-SZÁMLA KIBOCSÁTÁS ÉS BEFOGADÁS E-SZÁMLA KIBOCSÁTÁS ÉS BEFOGADÁS
Fókuszban az önkormányzati tagsággal rendelkező szociális szövetkezetek _ A pályázatkezelői felület bemutatása.
TÖMÖRÍTÉS. Fogalma A tömörítés egy olyan eljárás, amelynek segítségével egy fájlból egy kisebb fájl állítható elő. A tömörítési arány függ a fájl típusától,
W3C WAI Akadálymentesség Vándor Tamás november 3.
Útmutató az adatbázis használatához. − 1957 – ODK - Orvostudományi Dokumentációs Központ − 1960-tól: OOKDK - Országos Orvostudományi Könyvtár és Dokumentációs.
INTERNETES BÖNGÉSZ Ő K Készítette: Horváth Tünde.
Követelményelemzés – követelményspecifikáció A szoftverfejlesztés kapcsán az elemzés speciálisan egy kezdeti szakaszt jelöl, amelynek alapvető feladata.
A szoftver mint komplex rendszer (folyt.) A SunTone módszertan 3 dimenziós osztályozási sémája kifinomultabb osztályozást tesz lehetővé.
CÉLCÉLCSOPORT  Egészségügyi szakmai tájékoztatás és betegtájékoztatás, az egészséges életvitelhez szükséges információk szolgáltatása, publikálása, áttekint-
Nem csak szövegszerkeszt ő virtuózoknak Az Open Office.org 2.0 béta verzió Bándliné Utasi Mária Writer.
Két nagy múltú szövegszerkesztő összehasonlítása az oktatás szempontjából.
Word - elmélet
avagy a háromszög technika
KÉPZŐ- ÉS IPARMŰVÉSZET ISMERETEK ÁGAZATI SZAKMAI ÉRETTSÉGI VIZSGA (középszintű) május-június.
Hogyan partícionáljuk meghajtónkat?
Internet tudományos használata
ERASMUS+ DISSZEMINÁCIÓS PLATFORM
Integrációs elméleti alapok, az integrációk típusai
Informatikai rendszerek
Munkalapok védelme az Excelben
Nagyméretű állományok küldése
DIGITÁLIS VÁSÁRLÁSOK, GENERÁCIÓS KÜLÖNBSÉGEK
Adatbázis normalizálás
Asynchronous Javascript And XML
Technikai lehetőségek, korlátok, kihívások
A program főmenüjében a Könyvelés -> Számlázás -> Számlakészítés menüpontot kell választani
HUNTÉKA Integrált Könyvtári (Közgyűjteményi) Rendszer
A MIMIO interaktív tábla használata
videós team Team vezetője: Tariné Péter Judit Tagok:
Adatok importálása, rendezése és szűrése
A KINOVEA mozgáselemző rendszer használata
Tömörítés.
Követelményelemzés Cél: A rendszer tervezése, a feladatok leosztása.
Programozás III. Ismétlés (Grafikai lehetőségek WPF-ben)
Ez a címdia 1. szövegdoboza
Adatbázis alapfogalmak
A Hálózat és Az internet
Az Endnote bibliográfia adatbázis-kezelő szoftver alapvető használata november Skultéti Attila
aka.ms/coauthorinword
Szövegkezelés, hibakezelés
Internet és kommunikáció
Informatikai gyakorlatok 11. évfolyam
Informatikai gyakorlatok 11. évfolyam
Új pályainformációs eszközök - filmek
A minőségellenőrzést támogató program bemutatása, Kérdőívek értékelése
Részletes ismertető: Microsoft SharePoint-hírek
Tapolcai Ágnes Országos Széchényi Könyvtár
A Microsoft SharePoint testreszabása Online webhely
Bibliográfia adatbázis-kezelő alkalmazások, EndNote 2018 Skultéti Attila
Alkalmazott Informatikai Tanszék
A távoli asztal, valamint az Endnote használata a távoli asztalon
Lapkiadó, rendezvényszervező vállalatirányítási rendszer SQL alapon
Interaktív Adatmenedzsment Kft.
Webszerkesztés Webszerkesztés.
Ez az előadás alcíme vagy a tárgy neve vagy a konferencia neve
Bibliográfia adatbázis-kezelő alkalmazások, EndNote 2018 Skultéti Attila
Erasmus+ hallgatói mobilitásra jelentkezéshez
SQL jogosultság-kezelés
Tájékoztató az EPER pályázati folyamatáról
Áramlástan mérés beszámoló előadás
Informatika Oktató: Katona Péter.
Access alapok Táblák, kapcsolatok, űrlapok.
Erasmus+ hallgatói mobilitásra jelentkezéshez
A POWERPOINT 2007 újdonságai
Algoritmusok.
Kód tördelése és a megjelenés
Hagyományos megjelenítés
OpenBoard Kezelő Tananyag közzététele a KRÉTA rendszerben.
Előadás másolata:

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