2. Tartalom
• Bevezető
• Fejlesztés
• Felépítés
• Dokumentum tipus definiciók
• HTML fejléc
• HTML on-page optimizálás
• HTML törzs
• Általános fogalmak
• Szemantikus elementek
• Listák
• Képek
• Táblázatok
• Formok
• Hasznos linkek
3. Bevezető
• A HTML (hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak
készítéséhez fejlesztettek ki és mára már internetes szabvánnyá vált
a W3C támogatásával
• A CSS és Javascript együttes használatával vizuálisan megnyerő
weboldalakat, és mobil alkalmazásoknál használt felhasznalói
felületeket lehet létrehozni
4. Fejlesztés
• Tim Berners-Lee fizikus 1980-ban a CERN rendszernek egy prototipust
készített ahol a tudosok dokumentumokat tudtak egymással
megosztani
• Tim Berners-Lee 1989-ben egy memo-t publikált ahol egy internet
alapu hiperteszt rendszert irt le
• Késöbb 1990-ben leírta a HTML nyelvet, megirta egy bögészö kódját és
a szerver szoftware-t is
5. Felépítés
• A HTML oldalak több strukturális elemből van felépítve
• Minden struktúrális elemnek több atributuma és értéke lehet
• <elem atributym=“érték”>…</elem>
• <elem atributum=”érték”>
• A HTML 5 verzió a dokumentum tipus definiciojaval hatarozható meg
• Három részt különítünk el:
• Dokumentum tipus definició
• HTML fejléc (<head>)
• HTML törzs (<body>)
6. Dokumentum tipus definiciók
HTML 5 (2014)
<!DOCTYPE html>
HTML 4.01 Strict, Transitional, Frameset (1999)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict, Transitional, Frameset (2000)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
7. HTML fejléc
Technikai és dokumentációs adatokat tartalmaz.
A fejléc több strukturális elemböl áll, mint:
• <title>HTML5 Video Player</title>
• <meta name=“description” content=“HTML kurzus”>
• <link rel=“stylesshet” src=“style.css” media=“screen”>
• <script>
• function kiir() { document.getElementById(“szöveg").innerHTML = “Szia"; }
• </script>
• <style> .navigacio { background: blue; } </style>
8. HTML on-page optimizálás
• A keresésoptimizálás egyik ága
• Részben:
• Strukturális elemek értékei veszi figyelembe
• A szemantikus elemek pozicióját az oldalon
• A belsö link kapcsolatokat
• A tartalmat és annak összefüggését a strukturával
• A meta tagokat a HTML fejlécéböl
• Az oldal sebességét
• Az oldal használhatóságát
9. HTML törzs
• A megjelenítendö információkat tartalmazza
• Fa strukturába van a törzs tartalma értelmezve
• Ezt DOM (document object model)-nek hívjuk,
ami által programok és szriptek dinamikusan
változtathatják az elementek tartalmát és
stílusát
10. Általános fogalmak
• Bizonyos elementek block elementek:
• <div>, <p>, <h1>, <table>, …
• Más strukturák inline módon viselkednek:
• <span>, <b>, <i>, <tt>, <abbr>, <code>, …
• Divitus és classitus:
• Használjuk több általános elementet vagy inkabb szemantikus
elemenseket használjunk?
• Id-k és osztályok:
• Minden elemensnek lehet id-je és class-ja
• Id-k egyediek, csak egyszer lehet öket használni, míg a
• Class-okat többször is fel lehet használni
<div id=“news” class=“news-general news-latest”> …. </div>
11. Szemantikus elementek
• A HTML5 uj szemantikus elementeket mutat be, mint:
• <article>, <aside>, <header>, <footer>, <section>, …
• A címeknel a következöket lehet használni:
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
• A tartalmonál használhatjuk a következöket:
• <p>, <span>, <div>, <br>
• Idézetekhez a következöket használjuk:
• <blockquote>, <cite>, <q>