==FLOD==Zajász és Webizé

Lecke 1: HTML bevezetés

Na mit is értünk HTML alatt? A HTML egy úgynevezett leíró nyelv, amelyet kifejezetten weboldalak számára fejleszettek ki. A név a “HyperText Markup Language” azaz “hiperszöveges jelölő nyelv” kifejezésből származik. Aktuális verziója manapság a HTML5.

 

A HTML fájlok jelölő elemeket (tageket) tartalmazó szöveges állományok. Négyfajta jelölő elemet különböztetünk meg a HTML-ben:
– Struktúrális elemek: Ezek az elemek határozzák meg a weboldalunk vázát gyakorlatilag (pl.: <p>Ez itt egy új bekezdés</p>, <h1>Ez itt a címsor</h1> …stb)
– Eszköz elemek: Ezek segítségével gombokat, listákat, beviteli mezőket helyezhetünk el a weboldalunkon. (pl.: <input name=”beviteli_mezo” type=”text” />)
– Hiperszöveg elemek: Ezek segítségével kapcsolatot tudunk létesíteni a weboldalunk dokumentumai között, de hivatkozhatunk más weboldal dokumentumaira is akár (pl.: <a href=”oldal2.html”>Következő oldal</a>)
– Prezentációs elemek: Használatuk mára már elavultnak. Ezek lényege, hogy leírják, hogy az adott elem, hogy legyen megjelenítve (pl.: <i>Ez itt egy dőltbeűs szöveg</i>). Manapság már muszáj különválasztanunk a tartalmat formától, hogy weboldalunk rugalmasan tudjon alkalmazkodni a különféle megjelenítő eszközökhöz. Éppen ezért, a formázást CSS-ben oldjuk meg, amiről szintén fogok indítani külön oktató sorozatot.

Az utolsó típust leszámítva bőven fogunk majd látni példákat a különböző jelölő elemekre.

 

Most viszont nézzük meg, hogy hogyan is néz ki egy nagyon alap HTML fájl a gyakorlatban! HTML kódok írásához szükségünk lesz egy erre alkalmas szövegszerkesztőre. Az én favoritom erre a célra, Notepad++ elnevezésű progi. Még mielőtt viszont akármit is elmentenénk fontos szót ejtenünk a fájlok logikus elrendezéséről a táhelyünkön (ami most jelenesetben a saját számítógépünk lesz). Az én javaslatom az alábbi:

Hozzunk létre egy mappát a merevlemezünkön “flod_tutorial” néven! Ezen belül legyen egy mappa “html” néven és ezen belül legyen egy mappa “lecke1” néven! Az alábbi kódot írjuk be a választot szerkesztőbe és mentsük el index.html néven a “lecke1” mappába! Ez a struktúra alkalmas arra, hogy más témakörben is össze tudd gyűjteni az oktatóanyagokat tőlem leckék szerint. (A lejjebb található képernyőképen nálam eltér egy kicsit a struktúra, de ez téged ne zavarjon meg!)

 

<!DOCTYPE html>
<html lang=”hu”>
<head>
<title>Az első weboldalam</title>
</head>
<body>
<h1>Üdvözöllek az oldalamon!</h1>
<p>Ez itt a legelső weboldalam legelső bekezdése.</p>
<p>Ez pedig itt a legelső weboldalam második bekezdése.</p>
</body>
</html>

 

Ha mindent jól írtunk be, az alábbi kimenetet kell kapnunk:

 

html1_1

Na akkor nézzük sorról sorra, hogy mi, mit csinál a kódban:
– <!DOCTYPE html>: A HTML dokumentum legelső sorának kell lennie. Ez nem számít HTML tag-nek, az ő feladata, hogy jelezze a böngészőnek, hogy egy HTML oldalt kell megjelenítenie.
– <html></html>: Ezek a tagek fogják közre a HTML dokuemntumot. Itt láthattok egy lang attribútumot is (lang=”hu”), ami jelzi, hogy a weboldal magyarnyelvű. A lang használata opcionális, de a keresők, illetve a felolvasó programok szempontjából jó, ha kint van.
– <head></head>: Ez tartalmazza a weboldal címét, az esetleges css és javascript hivatkozásokat, meta adatokat, illetve különböző szkripteket. A fenti példában csak a weboldal címét tartalmazza, de későbbi oktatóanyagokban láthattok majd a többire is példát.
– <title></title>: Ezek közé a tagek közé írhatjuk a weboldal címét, amit aztán  a böngészőablak fülén jelenik meg.
– <body></body>: Ezek a tagek tartalmazzák a weboldal tartalmát. Amit ezek közé írunk látható lesz a weboldalon, hacsak le nem tiltjuk a láthatóságukat.
– <h1></h1>: A tartalom címsorát tartalmazza. A címsorok értékei 1-től 6-ig terjedhetnek, fontosságuktól függően. A <h1></h1> a legfontosabb címsor, a <h6></h6> pedig a legkevésbbé az.
– <p></p>: A bekezdéseket tartalmazzák.

 

Na most akkor pihi,  hamarosan folytatjuk!