logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.

HTML5 weboldalak készítése

Programozott tananyag:


HTML5 bevezetés
A tananyag célja: interaktív weboldalak, webáruházak készítéséhez szükséges ismeretek közreadása.

HTML5 alapok
A HTML szerkesztés alapfogalmai.

A HTML5 weboldalak felépítése
A HTML weboldalak három alapvető szerkezeti eleme: a dokumentumtípus (DOCTYPE) )megadása, dokumentumfej (Head) és dokumentumtörzs (body).

HTML5 dokumentumfej (Head) tartalma
A dokumentumfej a HTML weboldalak címének, karakterkészletének és metaadatainak megadását, és külső erőforrások illesztését teszi lehetővé.

HTML5 szöveges tartalom
Megismerkedünk a szöveges tartalom formázását lehetővé tévő HTML címkékkel. Ezek egy része szabadon, más része pedig a közreadott tartalom függvényében használható.

HTML5 linkek
A linkek (hivatkozások) kötik össze a weblapokat, és lehetőséget teremtenek egy hosszabb oldalon található fejezet gyors elérésére is.

HTML5 listák
A számozott és számozatlan listák segítenek a tartalom strukturált, áttekinthető közreadásában, és jó szolgálatot tesznek pl. egy webáruház menüjének elkészítésekor.

HTML5 táblázatok
Megismerjük a HTML táblázatok felépítését, és elsősorban arra fogjuk őket használni amire valók: adatok közreadására áttekinthető formában.

HTML5 képek
Megismerjük az állóképek jellemzőit, megtanuljuk a képtérképek készítését.

HTML5 űrlapok
Az űrlapok használatával a felhasználó számára lehetővé válik, hogy adatok bevitelével, lehetőségek közül való választással befolyásolja a megjelenített tartalmat és/vagy információt küldjön a szerver felé.

HTML5 beágyazott keret
HTML oldalunkba beágyazott keret segítségével egy másik dokumentum (pl. weblap, szöveges dokumentum vagy akár multimédia ) tartalmát illeszthetjük be.

HTML5 multimédia
Megismerjük külső objektumok (pl. audio, video, Java appletek, ActiveX, PDF, Flash) beillesztésének módját.

HTML5 weboldalak kialakítása
Megismerjük a weboldalak egy és két oszlopos kialakításának módjait HTML5 elemek segítségével. Formázásuk már a CSS3 fejezet tárgya lesz.

HTML5 elemek jellemzői
A HTML elemek speciális jellemzőivel és azok használatával az adott elemek leírásánál találkoztunk. Van azonban néhány olyan jellemző, amely szinte valamennyi HTML címkénél használható.

HTML5 események
Egy HTML oldal vagy egy HTML elem életében is történhetnek nagy események. Pl. a felhasználó az egérkurzort fölé mozgatja, vagy leüt egy billentyűt.

Szkriptek használata
Szkripteket írhatunk a weboldal HTML kódjában, vagy külső erőforrásként beilleszthetjük a szkripteket tartalmazó fájlokat.

HTML5 vizualizáció
Numerikus értékek és és folyamatok állapota vizuális megjelenítése HTML5 elemek segítségével.

HTML oktatóvideók
YouTube oktató videó gyűjtemény a HTML weboldalak készítésének megismeréséhez és ismétléshez.

HTML5 címkék a tananyagban

Cimke (tag) Leírás, jellemzők és példakód a tananyagban
<!--...--> A szöveg tagolása
<!DOCTYPE> Dokumentumtípus definíció
<a> Linkek (hivatkozások)
<abbr> Definíciók és rövidítések
<address> Idézetek, címek, szerzők jelolése
<area> Képtérkép (image map)
<article> HTML5 tárolóelemek
<aside> HTML5 tárolóelemek
<audio> HTML5 - Audio elem
<b> Karakterformázás HTML elemekkel
<base> A fejléc elemei
<bdi>
<bdo> Általános szövegformázás
<blockquote> Idézetek, címek, szerzők jelolése
<body> A dokumentumtörzs (body )
<br> A szöveg tagolása
<button> HTML - Button nyomógombok
<canvas>
<caption> Táblázat címe
<cite> Idézetek, címek, szerzők jelolése
<code> Számítógépes kódok megjelenítése
<col> Oszlopcsoportok
<colgroup> Oszlopcsoportok
<command> A nagyobb böngészők nem támogatják.
<datalist> Adatlista (datalist)
<dd> Meghatározáslista
<del> A szöveg változásának jelzése
<details> HTML5 - Elrejthető részletek
<dfn> Definíciók és rövidítések
<dialog>
<div> Általános tárolóelem
<dl> Meghatározáslista
<dt> Meghatározáslista
<em> Karakterformázás HTML elemekkel
<embed> Tárolóelem létrehozása
<fieldset> Elemcsoportok (fieldset)
<figcaption> HTML5 - Tárolóelem ábrákhoz
<figure> HTML5 - Tárolóelem ábrákhoz
<footer> HTML5 tárolóelemek
<form> Űrlap létrehozása
<h1> .. <h6> Címsorok
<head> A dokumentumfej (head )
<header> HTML5 tárolóelemek
<hgroup> HTML5 - Címsor csoport
<hr> A szöveg tagolása
<html> HTML tag (címke)
<i> Karakterformázás HTML elemekkel
<iframe> Dokumentumok beágyazása
<img> Állókép beillesztése
<input> Input elem
<ins> A szöveg változásának jelzése
<kbd> Számítógépes kódok megjelenítése
<keygen> HTML5 - Ellenörző kód
<label> Felirat űrlap elemekhez (Label)
<legend> Elemcsoportok (fieldset)
<li> Számozatlan lista
<link> Link elem
<map> Képtérkép (image map)
<mark> Karakterformázás HTML elemekkel
<menu> A nagyobb böngészők nem támogatják.
<meta> A meta címkék
<meter> Érték szemléltetése
<nav> HTML5 tárolóelemek
<noscript> JavaScript a HTML oldalon
<object> Beágyazás object elem segítségével
<ol> Számozott lista
<optgroup> Lenyíló listaelem csoport
<option> HTML - Lenyíló lista (select)
<output> HTML5 - Output elem (select)
<p> A szöveg tagolása
<param> Beágyazás object elem segítségével
<pre> Általános szövegformázás
<progress> Folyamatok szemléltetéses
<q> Idézetek, címek, szerzők jelolése
<rp> Kelet-ázsiai szövegeknél lehetne használni.
<rt> Kelet-ázsiai szövegeknél lehetne használni.
<ruby> Kelet-ázsiai szövegeknél lehetne használni.
<s> Karakterformázás HTML elemekkel
<samp> Számítógépes kódok megjelenítése
<script> JavaScript a HTML oldalon
<section> HTML5 tárolóelemek
<select> HTML - Lenyíló lista (select)
<small> Karakterformázás HTML elemekkel
<source> HTML5 - Video elem
<span> Karakterformázás HTML elemekkel
<strong> Karakterformázás HTML elemekkel
<style> Belső vagy beágyazott CSS stílusok
<sub> Karakterformázás HTML elemekkel
<summary> HTML5 - Elrejthető részletek
<sup> Karakterformázás HTML elemekkel
<table> Egyszerű táblázat
<tbody> Táblázatok hármas tagolása
<td> Egyszerű táblázat
<textarea> Többsoros szövegbevitel
<tfoot> Táblázatok hármas tagolása
<th> Táblázat fejléce
<thead> Táblázatok hármas tagolása
<time> Időpont megadása
<title> Az oldal neve
<tr> Egyszerű táblázat
<track> A nagyobb böngészők nem támogatják.
<u> Karakterformázás HTML elemekkel
<ul> Számozatlan lista
<var> Számítógépes kódok megjelenítése
<video> Video elem
<wbr> A szöveg tagolása

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.