HTML oktatóprogram kezdőknek

Ha webmesterré szeretne válni, és meg akarja tanulni, hogyan hozzon létre egy weboldalt, lehet, hogy elég ijesztőnek találja a HTML kezelését.

Ezt azonban nem lehet elkerülni, mivel az Ön által látogatott weboldalak túlnyomó többsége HTML elemek segítségével íródott és strukturálódott. Valójában a HTML-t ma már az összes ismert webhely több mint 74%-a használja, miközben ez a nyelv segít javítani mindent, a webhely kialakításától kezdve a rajta található tartalom minőségéig.

Ebben az útmutatóban a HTML alapelveit és lehetséges alkalmazásait vizsgáljuk meg, mielőtt példákat nézünk az egyes elemekre, amelyeket a webhely kódolásakor használ.

Mi a HTML?

Egyszerűbben fogalmazva, a HTML a weboldalak online létrehozásának szabványos jelölőnyelvét jelenti. A Hyper Text Markup Language rövidítése, és elsődleges funkciója az egyes landing oldalak szerkezetének, elrendezésének és megjelenítésének kialakítása. Bár a webböngészők nem jelenítik meg közvetlenül a HTML nyelvet, mégis kulcsfontosságú szerepet játszik a látható, hozzáférhető és könnyen használható webhely létrehozásában.

A HTML-t számos egyedi elem is alátámasztja, amelyek fokozatosan építik fel a weboldalakat, strukturálják a tartalom megjelenítését és keltik életre a webhelyet. Ezeket az elemeket “címkék” hozzák létre és tartalmazzák, amelyek váltakozó tartalmi elemeket, például címsorokat, bekezdéseket és hasonló példákat határoznak meg.

A következőkben részletesebben megvizsgáljuk ezeket az elemeket és felépítésüket, miközben azt is megvizsgáljuk, hogyan lehet ezeket személyre szabni, hogy színt, linkeket és változó tipográfiát vezessen be a weboldalán.

Hol használják a HTML-t?

Amint látjuk, a HTML leggyakoribb alkalmazási területe a weboldalt alkotó egyes céloldalak kialakítása. A népszerű kódolási eszköznek azonban nem ez az egyetlen alkalmazási területe, a további felhasználási lehetőségek megértése azonban segít abban, hogy új webmesterként a legtöbbet hozza ki a nyelvből. Íme tehát néhány a HTML további alkalmazási lehetőségei közül:

• Testreszabható elemek létrehozása egy meglévő oldalon belül. Ha blogbejegyzések kommentálását vagy a felhasználók által generált tartalmak közzétételét kívánja engedélyezni a weboldalán, akkor HTML kódrészleteket használhat ennek lehetővé tételére. Ezek az elemek lehetővé teszik a felhasználók számára a kulcsszavak kiemelését, a linkek beágyazását és a hozzászólások formázását az Ön által moderátorként bevezetett korlátozásoktól függően.
• Kiegészítő tartalom létrehozása e-mailben. Az e-mail a HTML-t használja a gazdag szövegű üzenetek nyelveként is, amelyekben linkek, szöveg és számos más olyan elem található, amelyek nem jeleníthetők meg csak egyszerű szövegben. Ha tehát egy weboldalához kapcsolódó e-könyvet szeretne megosztani e-mailen keresztül, akkor a HTML segítségével optimalizálhatja üzenete hatását.
• Értse meg a számítógépére telepített offline súgó dokumentumokat. Érdekes módon a HTML-t olyan számítógépes súgó dokumentumok formátumaként használják, amelyek offline is elérhetők. A HTML alapszintű ismerete tehát segíthet megérteni a hardverrel kapcsolatos problémákat, és gyorsabban megoldani azokat, ami viszont biztosíthatja, hogy gyorsabban helyre tudja állítani a webhelyét olyan esetekben, amikor az offline állapotba került.

HTML oldal felépítése

Mielőtt egy html oldalt felépítene, az alapokra van szüksége.

Tipikusan egy oldal három szerkezeti elemből áll:

1. Fejléc: A fejléc tartalmazza a webhely minden oldalára vonatkozó tartalmat, például a logót vagy a webhely nevét, valamint a navigációs rendszert. A fejléc minden oldalon látható.
2. Főoldal: Ez foglalja el a legnagyobb területet a weboldalon. A megtekintett oldalra jellemző tartalmat tartalmaz.
3. Lábléc: A lábléc tartalma általában elérhetőségi információkat, szállítási címet vagy jogi közleményeket tartalmaz. A fejléchez hasonlóan a lábléc is minden oldalon megjelenik, de alul helyezkedik el.

Íme, hogyan néznek ki ezek az alapvető szerkezeti elemek, amikor összeállnak:

Itt egy másik példa, a tartalom esztétikus strukturálására a header tagek és a paragraph tag használatával. Ráadásul egy lábléc taget is bedobtunk az oldal fő tartalma alatti tartalomhoz:

HTML tagek

Minden HTML kód kiindulópontja az egyes tagek, amelyekkel minden lényeges elemet létrehozhatunk, és amelyek segítenek a weboldalak strukturálásában.

A következőkben a leggyakoribb címkéket vesszük szemügyre, mielőtt megvizsgálnánk, hogyan használhatók fel konkrét, az oldalon található elemek létrehozására:

Főcím címkék

Minden online dokumentum, beleértve a weboldalakat is, egy fejléccel kezdődik. Ezeket HTML-címkékkel építjük fel, a nyelv jelenleg legfeljebb hat, változó méretű elemet tesz lehetővé, amelyek további címekkel, feliratokkal és kiemelt, félkövér szövegsorokkal is strukturálhatják a tartalmat. A címsor indításához egyszerűen a megfelelő szöveget a <h1> , <h2> , <h3> , <h4> , <h5> vagy <h6> címkével kell megelőzni, a kívánt mérettől függően.

Ezután egy záró taget kell alkalmaznia a címsor végén, hogy a szöveget bezárja, és a következőképpen jelenik meg HTML formátumban:

A megerősítés után ez a következő esztétikai megjelenést fogja jelenteni a webhelye céloldalán:

Itt jól láthatóak a változó címsorok különböző méretei, valamint az, hogy a böngésző a címsor előtt és után egy sort ad hozzá. Azt is észrevehetjük, hogy a címsorszöveg végén lévő zárócímke kissé más esztétikájú, de erről majd a következő fejezetben lesz szó, amikor a címkékkel konkrét elemeket fogunk definiálni.

Kezdéscímkék

A hasonló elvet alkalmazzuk a kezdő bekezdéscímkékre is, amelyeket a <p> ábrázol. Ez lehetővé teszi a tartalom strukturálását és releváns bekezdésekre való felosztását, ami viszont könnyebb és zökkenőmentesebb olvasási élményt eredményez. A <p> címkét ismét a vonatkozó szöveg elejére kell helyezni, mielőtt az alternatív zárócímkét a végén alkalmaznánk a hatás teljessé tétele érdekében. A fejléc-tagokkal ellentétben azonban itt nincsenek olyan numerikus különbözőek, amelyek megváltoztathatják a bekezdésben szereplő szöveg méretét.

A HTML formátumon kívül ez a következőképpen tagolja a szöveget a kész weboldalon:

Sorszaktörő címkék

Az első példák a legalapvetőbb HTML címkéket képviselik, de vannak olyanok is, amelyek más formátumot és alternatív zárófelvételeket használnak. Vegyük például a sortörést, amely különbséget tesz a szövegsorok megszakítása és a következő sorban való folytatása között. A HTML területén alapvető különbség van a sortörések és a bekezdések között, mivel míg az utóbbiak szabványos blokkelemek, amelyek szöveget tartalmaznak, addig az előbbi egy meglévő <p> elemen belüli elválasztást hoz létre.

Emiatt a sortörések üres elemet jelentenek a HTML-ben, ezért nem határozzák meg sem a nyitó, sem a záró tagek. Ehelyett a <br /> címke ábrázolja őket, amely beilleszthető a meglévő <p> elemekbe, hogy megtörje a szöveget és esetleg kiemelje a fontos információkat. A <be> karakter és az elővágójel közötti egyetlen szóköz döntő fontosságú, mivel ellenkező esetben a tag nem ismerhető fel HTML formátumban.

Az alkalmazás után ez a következőképpen bontja a szöveget:

Amint látja, egy meglévő bekezdéselemen belül tetszőlegesen gyakran alkalmazhat sortöréseket, amennyiben azok hozzáadott értéket képviselnek és könnyebben emészthetővé teszik az információt. Azt is láthatja, hogy a bekezdés nyitó és záró tagjei változatlanok maradnak, a sortörés tagek pedig a bennük foglalt szöveg elrendezésének módosítására szolgálnak.

Ez az egyik példa arra, hogy a HTML tagek hogyan használhatók a meglévő elemek módosítására, ami kulcsfontosságú szerepet játszik a weboldalak és tartalmak vizuális elrendezésének meghatározásában.

Vízszintes vonalak

Hasonlóképpen vannak más címkék is, amelyek a <p> elemen belül vagy a weblapon található szövegrészek további elkülönítésére használhatók. Az egyik legelterjedtebb a <hr> tag, amely egy üres elem létrehozásában segít, amely vizuális, vízszintes vonalat húz az online dokumentum váltakozó szakaszai közé. Két szövegrész közé például azért érdemes vonalat elhelyezni, hogy az olvasót újrafókuszálja, vagy egyszerűen csak új vizuális elemet vezessen be. Így hozhat létre ilyen törést a HTML-ben:

Itt a hr karakterek közötti törés és az előremenő perjel kiemeli az üres elem felépítését, miközben ismét nincs szükség záró tagre a hatás befejezéséhez. Így a következő látványt kapjuk:

Képcímke

A képcímkék szintén üres elemeket jelentenek a HTML-ben, ami ismét azt jelenti, hogy nincs zárócímke. Mivel csak olyan attribútumokat tartalmaznak, amelyek az oldalra beágyazott kép URL-jéhez kapcsolódnak, egyszerűen az elem elején lévő <img > taggel határozzák meg őket. Ezek bárhol elhelyezhetők a webhelyen, bár szokatlan, hogy meglévő elemekbe, például bekezdésekbe vagy címsorokba illesszük őket. Íme, így néz ki egy tipikus HTML képcímke:

A képhez alternatív szöveget is meg kell adnia, ami lassú betöltési idő vagy képernyőolvasó használata esetén segíti a kép megtekintését. Így ha a böngésző nem találja a képet, akkor az alternatív attribútum értékét jeleníti meg a nézőknek. Ez ismét az image taget használja, de más attribútumokat tartalmaz:

HTML-elemek

Az előzőekben megnéztük, hogyan használhatók az egyszerű HTML-címkék az oldalon található elemek meghatározására, miközben azt is feltártuk, hogyan lehet ezeket tovább testreszabni a kép- és sortöréscímkéket tartalmazó üres elemek használatával. Ez segít megérteni, hogy milyen kapcsolat van a címkék és az elemek között, és hogyan használhatjuk őket a weboldal különböző típusú tartalmainak meghatározására.

Míg a HTML nyelv minden aspektusát egy címke reprezentálja, addig például egy meghatározott, tartalmat tartalmazó elemnek rendelkeznie kell egy kezdő és egy záró címkével is. A címsorok és a bekezdések tehát HTML-elemek, mivel kezdő- és zárócímkéket használnak a vonatkozó szöveg bekeretezésére és kiegészítésére. Ezzel szemben az üres elemek vagy attribútumokat tartalmaznak, vagy egyáltalán nem tartalmaznak tartalmat, így a meglévő elemeken belül záró tag nélkül használhatók.

HTML-elemek definiálása

Az olyan példák használatakor, mint a címsorok és a bekezdések, a kezdő és záró tagek helyes alkalmazása kulcsfontosságú. A kezdőcímke (például <h1> vagy <p>) határozza meg az adott elemet, míg a zárócímke biztosítja, hogy ez az elem ne folytatódjon a weboldal többi részén. Ha például egy kívánt bekezdés végén nem használjuk a záró </ p> taget, a szöveg egyetlen blokkban jelenik meg, ami csúnya és rendkívül nehezen olvasható.

A záró tagek megegyeznek a kezdő tagekkel, eltekintve attól, hogy az előbbiekben a vonatkozó karakterek előtt egy előremenő perjel szerepel. Tehát egy <h1>fejléc esetében a záró tag a </ h1> lesz, míg a bekezdések esetében mindig a </ p>-t használja a szövegtörés meghatározására. Ez a kódolás során figyelmet igényel, és a címsorok programozásakor fontos, hogy a használt számot (például h1 vagy h2) a kezdő és a záró tagben is alkalmazzuk.

Az egymásba ágyazott HTML-elemek használata

Ebben a szakaszban világosan látható, hogy a HTML-dokumentumokat és a weboldalakat különböző elemekből álló fa alkotja, amelyek egy sor eszköz építőelemeként szolgálnak. Megnéztük azt is, hogyan lehet ezeket az elemeket kialakítani és felhasználni az online tartalom strukturálására, és ezt most az egymásba ágyazott HTML-elemek vizsgálatával folytatjuk.

Amint ahogy az üres elemek és az önálló címkék (például <br / >) is beépíthetők meghatározott HTML-elemekbe, úgy az úgynevezett egymásba ágyazott elemek is elhelyezhetők a tartalomban, például a címsorokban és a bekezdésekben. Ezek közé olyan példák tartoznak, mint a félkövér és dőlt betűk és az aláhúzott szöveg, miközben alkalmazhatók a tartalom személyesebbé tételére és az olvasó szemének bizonyos érdekes pontokra való irányítására.

Feltűzött, dőlt és áthúzott szöveg a HTML-ben

Tegyük fel, hogy egy szót egy meglévő bekezdéselemen belül szeretnénk kiemelni. Ezt úgy érhetjük el, hogy a szabványos <p> elemen belül egyszerű címkékkel félkövérré tesszük. A HTML használatával ezt a következőképpen programozhatod:

Itt a beágyazott elemnek van kezdő és záró tagje is, amelyek mindegyike hasonló formátumot követ, mint a címekhez és bekezdésekhez tartozó tagek. Ezek zökkenőmentesen használhatók a meglévő elemeken belül, és ebben az esetben a következő eredményt adják:

Most tegyük fel, hogy ennek a szónak a tipográfiáját is szeretnénk megváltoztatni, hogy dőlt betűs is legyen. Ezt egyszerűen elérhetjük egy újabb beágyazott elem hozzáadásával, amelyet így kell kódolni:

Amint láthatjuk, a kezdő és záró dőlt betűs címkék egyszerűen beépültek a <p>elembe. Ez most úgy alakítja át az elemen belüli tartalmat, hogy az a következőképpen jelenjen meg:

Nem kizárt persze, hogy úgy dönt, hogy ezt a szót más módon szeretné kiemelni. Ezért használhat egy alternatív beágyazott elemet, például az áthúzást (amelyet a <s> és </s> címkék képviselnek. Ezek a címkék ugyanúgy alkalmazhatók a <p> elemen belül, a HTML-ben a következőképpen jelennek meg:

Ez esetben a szöveg a következőképpen fog megjelenni a dokumentumban vagy a céloldalon:

Ez betekintést nyújt a címkék által alkotható elemekbe, amelyek viszont meghatározzák a weboldalak szerkezetét és az azokon megjelenő tartalmakat. Nem csak ez, hanem üres és egymásba ágyazott elemek is használhatók a tartalom további meghatározására.

HTML-attribútumok

Ha a címkék az elemeket felépítő és meghatározó építőelemek, akkor a HTML-attribútumok segítségével testre szabhatók a jellemzők (például stílus, szín és nyelv. Minden HTML-elemnek vannak alapvető attribútumai, amelyek alapvető információkat szolgáltatnak, és mindig a stat címkén belül vannak megadva. Ezek általában párosítva jelennek meg, így gyakran a következő formátumban jelennek meg: name=”value.”

Egyszerűbben fogalmazva, a név a beállítani kívánt tulajdonságot jelenti, míg az érték a beépíteni kívánt konkrét kritériumra vonatkozik.

Nagyszámú attribútumot alkalmazhatunk a HTML-elemekre, de a kezdő webmesterek számára a legfontosabbak a következők:

A “lang” attribútum

A legegyszerűbb attribútum a dokumentum és elemeinek nyelvét határozza meg. Ezt a ‘lang’ attribútummal kell deklarálni, és bár könnyen figyelmen kívül hagyható, az az előnye, hogy a tartalom könnyebben hozzáférhetővé válik a képernyőolvasók és a keresőmotorok számára. Általában a dokumentum elején jelenik meg a következő formátumban:

A lang attribútum után az első két betű határozza meg a nyelvet (ami ebben az esetben angol). A kötőjel után a következő két betű a nyelvjárást határozza meg, bár ez nem minden nyelv esetében lesz jelen. Fontos, hogy ezt az attribútumot helyesen használd, ha sikeresen akarod elérni a közönségedet.

A ‘align’ attribútum

A HTML-attribútumok formátumát (name=”value”) már érintettük, és ennek legjobb megtestesülése akkor következik be, amikor megpróbálod az elemeken belüli tartalmat igazítani. Például úgy dönthetsz, hogy egy adott oldalon az összes bekezdést középre szeretnéd állítani, és az igazítás az a tulajdonság, amelyet be szeretnél állítani. Ezt követően a “center” az attribútum értéke, bár választhat, hogy a szöveget balra vagy jobbra igazítja.

Ezzel a <p> elemeit az oldal közepére igazítja, és egységes elrendezést hoz létre a webhely sajátos jellegének megfelelően (lásd alább):

A ‘href’ attribútum

Ha látható webhelyet kíván építeni, fontos, hogy mind a bejövő, mind a kimenő linkeket beépítse. A belső céloldalakra mutató backlinkeket tartalmazó linkportfólió építése szintén életképes stratégia, ezért meg kell tanulnia, hogyan kell ezeket HTML-ben kódolni.

A HTML-linkeket a <a>taggal határozzuk meg, amely tartalmazza a céllinket a kapcsolódó horgonyszöveggel együtt, amely az URL-nek otthont ad. Ez a ‘href ‘ attribútum, amely meghatározza a webhely címét, azonban ez a start tag részeként van beépítve. HTML-ben a következőképpen van kódolva:

Ez egyértelműen kiemeli a kezdő és a záró tag közötti különbséget, és a következőképpen fog lefordítani a céloldalon:

A “color” attribútum

Ez egy másik fontos attribútum, mivel a színek használata életet lehelhet a weboldalába, miközben segíthet fontos kontrasztok és erős designesztétika létrehozásában. A HTML-ben egy színt a nevével lehet megadni, bár a cél eléréséhez RGB- vagy HEX-értéket is lehet használni. Az előbbi lehetőség azonban a legkönnyebben követhető, miközben az oldaladon a fejlécekre, bekezdésekre és egyéb elemekre is alkalmazható.

Ez egy stílusattribútum, a választott szín pedig azt az értéket képviseli, amelyet be szeretnél állítani. Ha például a piros színt alkalmazza a főcímre, az így fog kinézni:

Az alkalmazás után ez az elem a következőképpen fog megjelenni a weboldalán:

Az elemet meghatározó kezdő és záró tagek között ismét egyértelmű a különbség, miközben ez az egyik legkönnyebben alkalmazható attribútum a HTML-ben. Továbbá a HTML-attribútumok name=”value” formátumát is kiemeli, így sokkal könnyebbé válik a tanulás folyamata, és ezek alkalmazása az egész webhelyen.

Teszteld magad

A HTML és egyes elemeinek alapvető megértésével a következő lépés néhány egyszerű projekt elvégzése, és az elméleti tudás alkalmazása a gyakorlati feladatok megoldására.

Az alábbiakban részletezett feladatban egy szöveg kivételével egy szöveget mutattunk be, és arra kértünk, hogy különböző szempontokat formázzunk meg a HTML segítségével. Használja az útmutatót és az eddig tanultakat a feladat megoldásához, miközben felkészül saját weboldalának kódolására.

Kérdések:

1. Töltse ki a fejléc elemet a megfelelő záró taggel.
2. A fejlécet tegye félkövérré.
3. A fejléc alá illesszen vízszintes vonalat.
4. Használja a color attribútumot, és árnyalja zöldre a “Köszönjük, hogy meglátogattuk” szöveget
5. Elhelyezze ezt a hiperhivatkozást (https://www.w3schools.com/html/) a horgonyszövegbe: “Tudjon meg többet.”
6. Az oldal fejlécében használja a name=”value” formátumot a bekezdések balra igazításához

HTML nyelvi statisztikák és tények

1. A HTML, head és body elemek az 1990-es évek közepe óta részei a HTML specifikációnak, és egészen néhány évvel ezelőttig ezek voltak az elsődleges elemek, amelyeket a HTML dokumentumok szerkezetének megadására használtak. A helyzet azonban az elmúlt néhány évben drámaian megváltozott, mivel a HTML5 egy sor új címkével bővült, amelyekkel gazdag szemantikai jelentést adhatunk a HTML-dokumentum szerkezetének.
2. A HTML-dokumentumoknak egy dokumentumtípus-nyilatkozattal (informálisan “doctype”) kell kezdődniük. A böngészőkben a doctype segít meghatározni a megjelenítési módot. A HTML5 nem definiál DTD-t, ezért a HTML5-ben a doctype-deklaráció egyszerűbb és rövidebb.
3. A mobil böngészők teljes mértékben elfogadták a HTML5-öt, így a mobilkész projektek létrehozása olyan egyszerű, mint a kisebb érintőképernyőkre való tervezés és építés – innen a Responsive Design népszerűsége. Van néhány nagyszerű meta-tag, amelyek szintén lehetővé teszik a mobilra való optimalizálást.
4. A tartalomfejlesztők 78%-a egyetért azzal, hogy a szerkezet alkalmas mobilalkalmazások készítésére, és 68% szerint bármilyen és mindenféle alkalmazás tervezésére alkalmas.
5. A HTML5 egy sor nagyszerű API-t is tartalmaz, amelyekkel jobb felhasználói élményt és erősebb, dinamikusabb webes alkalmazásokat építhet – itt egy gyors lista a natív API-król:
   • Drag and Drop (DnD)
   • Offline tároló adatbázis
   • Böngésző előzmények kezelése
   • Dokumentumszerkesztés
   • Timed média lejátszás
6. A HTML5 nem egy cég ellenőrzése alatt áll. Az egyik legjobb tulajdonsága abban rejlik, hogy nyílt szabvány. A fejlesztők szabadon engedhetik kreativitásukat, és annyi funkciót és funkciót adhatnak hozzá, amennyit csak tudnak.
7. A többi böngészővel összehasonlítva a Google Chrome minden frissítése gondoskodik arról, hogy tartalmazza a HTML5 támogatását. Emellett a YouTube alapértelmezett lejátszója már HTML5-ös, és a Google Flash-hirdetéseket is HTML5-re alakítják át.
8. A HTML5 használata a fejlesztők körében (régiók szerint): 50%

Következtetés

Míg a HTML-t csak 1991-ben hozták létre (a kódnyelv első verziója 1995-ben jelent meg), gyorsan meghatározó eszközzé vált a funkcionális és vizuálisan tetszetős weboldalak tervezésében. A HTML befolyásának mértéke is folyamatosan fejlődik, és a legújabb iterációt (HTML5) egyre több weboldal alkalmazza világszerte.

A HTML alapvető elemeinek megismerése és azok alkalmazása a legfontosabb lépés a sikeres, látható és végső soron versenyképes weboldal létrehozásában.