[Hungarian] HTML Course - Sapientia University

Sysgenic
Young minds fresh ideas
Iszlai Zoltán, Csapatvezető
HTML Sapientia MS – December 7, 2015

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

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

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

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>)

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">

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>

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

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

Á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>

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>

Listák
• Rendezetlen lista:
• <ul>
• <li>Item 1</li><li>Item 2</li>
• </ul>
• Rendezett lista:
• <ol>
• <li>Item 1</li><li>Item 2</li>
• </ol>
• Leírás lista:
• <dl>
• <dt>Coffee</dt>
• <dd>black hot drink</dd>
• <dt>Milk</dt>
• <dd>white cold drink</dd>
• </dl>

Képek
• A képeknél a következö HTML kodot használjuk:
• <img src=“images/blank.jpg” alt=“” width=“” height=“”>
• Egy térkép betevéséhez a következö elementeket használjuk:
• <map> és <area>, ahol
• <map> egy lefedés csoportosítást tartalmaz a képhez és
• <area> egy területet ír le: kör, téglalap, poligon, …
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Táblázatok
• A táblázatoknál a <table> elementet használjuk:
• Soroknal: <tr>
• Adatoknál: <td>
• Tábla cimnél: <caption>
• Az oszlop címeknél a: <th>
• Van több kisegítö elem is: <thead>, <tbody>, <tfoot>
<table cellspacing=“2” cellpadding=“2”>
<tr>
<th>Sr. No.</th>
<th>Roll No</th>
<th>Name</th>
<th>Team</th>
</tr>
<tr>
<td class=“row-nr”>1</td>
<td>1001</td>
<td>John</td>
<td>Red</td>
</tr>
</table>

Formok
• A formok-nal a következö elementeket használjuk:
• <form>, <fieldset>, <label>
• A felhasznalói tartalmat a következö elementek-el
adhatjuk át a szerver-nek:
• <input type=“text” …, <textarea …, <select …,
<form method=“post” action=“”>
<fieldset>
<label>
<input type="radio" name="sex" value="male">
Male
</label>
<label>
<input type="radio" name="sex" value="female" checked>
Femaile
</label>
</fieldset>
</form>

Hasznos linkek
• HTML szerkesztők:
• Sublime text: http://sublimetext.com
• Notepad++: http://notepad-plus-plus.org/
• Dreamweaver: http://www.adobe.com/products/dreamweaver.html
• Tutoriálok:
• W3C schools: http://www.w3schools.com/html/
• Tuts+: http://tutsplus.com
• Codeademy: http://www.codecademy.com
• Kép vágok (Kép szerkesztők):
• Adobe Photoshop
• Adobe Fireworks

Kérdések?
Köszönöm kedves figyelmeteket!

[Hungarian] HTML Course - Sapientia University

More Related Content

Similar to [Hungarian] HTML Course - Sapientia University

More from Zoltan Iszlai

[Hungarian] HTML Course - Sapientia University