Ha front-end fejlesztő akarsz lenni, az egyik leggyakoribb tanács, amit kapsz, hogy tanulj meg HTML-t. A Hypertext Markup Language, rövidítve HTML, a legtöbb weboldal alapja.
A HTML különböző dolgokból áll, például címkékből, attribútumokból és elemekből. A HTML-címkékre összpontosítunk. HTML-címkéket használunk, hogy megmondjuk a böngészőknek, hogyan strukturálják a tartalmat címsorokba, címekbe, bekezdésekbe, képekbe és még sok másra. A HTML-címkék tehát olyanok, mint a kulcsszavak, amelyek meghatározzák, hogy a böngésző hogyan jelenítse meg vagy formázza a tartalmat.
A szerverek felülről lefelé olvassák a HTML-címkéket. Nincs korlátozás a weboldalon található HTML-címkék számára.
- Minden HTML-címke a <> közé tartozik
- Minden HTML címke más funkciót lát el
- A legtöbb HTML-címkében van nyitó
és záró
Tartalomjegyzék
HTML címkék vs HTML elemek vs HTML attribútumok
A legtöbb ember felváltva használja a HTML-címkék és -elemek kifejezéseket. De vajon ugyanazok? Technikailag a HTML-elemek és a HTML-címkék különböznek egymástól.
A HTML címkék HTML elemeket határoznak meg. Ennek elérése érdekében a tartalom tördelése olyan nyitó és záró címkenév használatával történik, amely megegyezik az általunk használt címke tartalmával.
Ez egy példa egy HTML elemre:
<p> This is a paragraph </p>
A
egy példa egy HTML-címkére
A HTML attribútumok további információkat adnak a dokumentum HTML elemeiről. Az attribútumok a HTML elemeken belül találhatók.
Ez egy példa egy HTML attribútumra
<button id=" SubmitOrder" class="btn">Order</button>
HTML címkék, amelyeket mindenkinek tudnia kell
A HTML mint jelölőnyelv az évek során fejlődött, mióta Tim Berners-Lee 1993-ban bemutatta. Az első HTML-verzió 18 címkét tartalmazott. Minden HTML-verzióhoz új címkéket adunk; a legutóbbi frissítés a HTML5 volt 2014-ben.
A HTML és a HTML5 alapos összehasonlítása azt mutatja, hogy az utóbbi szemantikai címkékkel rendelkezik, mint például a
A DOCTYPE technikailag nem egy címke, hanem egy deklaráció, amely megmondja a böngészőnek, hogy milyen fájl kerül betöltésre. Ez a címke közli a böngészővel a betöltendő HTML típusát.
A HTML5-ben a fájlt így deklarálhatja
<!DOCTYPE html>
Vagy
<!doctype html>
Megjegyzés: A deklarációnak nincs záró címkéje, és nem különbözteti meg a kis- és nagybetűket.
A ….. címke a DOCTYPE címke után jön. Ez a címke weblapként határozza meg a dokumentumot; minden más elem be lesz ágyazva. A HTML címke egy HTML-dokumentum elejét és végét határozza meg.
A címke a következőképpen jelenik meg:
<html>Content</html>
A HTML-dokumentum fejrészét egy
címke képviseli. Ez a címke a címkén belül található, és általános információkat ad a weboldalról.A
címke más címkéket is tartalmaz, amelyek a weboldal sajátosságait adják meg, például az oldal címét és szerzőjét. A címke tartalma nem jelenik meg a weboldalonEz a
címke szintaxisa;<head> …….. </head>
A
A
<title>HTML Tags for Beginners</title>
Ha egy
címkén belül van, akkor a következőképpen fog megjelenni;<head> <title>HTML Tags for Beginners</title> </head>
A
A törzsben található további címkék közé tartozik a
címke a bekezdéshez, a címke a képekhez, a címke a félkövér szöveghez és az
- címke a rendezett listához, hogy néhányat említsünk.
- címkével együtt kell használni.
A kettő megjelenhet egy kódszerkesztőben, mint;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>
A böngészőben megjelenített tartalom számozottan jelenik meg.
Hozzáadhat egy képet a látványosság kedvéért, vagy akár egy logót is. Ilyenkor jól jön az önzáró képcímke, az .
A képcímke szintaxisa a következő lesz;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>
Az idézőjelek közé tett tartalom a forrás URL-t jelöli.
Becsomagolás
Több mint 100 HTML-címke létezik, de a fentieket kezdőként ismernie kell. A HTML-t a legtöbb kódszerkesztő támogatja, így Ön biztos lehet benne, hogy soha nem fog rosszul járni, amikor elkezdi a tanulást.
A
címke szintaxisa:<body> Content </body>
–
Címkék
Címkék
Egy HTML-dokumentumban legfeljebb 6 címke lehet. Mindegyik címkét egy 1-től 6-ig kezdődő szám jelöli:
,
,
,
,
és
.
,
,
és
.
és
.
A H1 a legnagyobb címsor, míg a H6 a legkisebb.
Egy HTML-dokumentumban a fejléccímkék a következőképpen ábrázolhatók:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
A
–
címkék a címkén belül vannak.
Például egy ,
címke a következőképpen lesz bezárva;
<body>
<h1> This is heading 1 >/h1>
</body>
A
vagy egyszerűen a bekezdéscímke akkor használatos, ha a tartalmat bekezdésbe kívánja strukturálni. Ha megnyomja az „Enter” gombot egy HTML-dokumentumban a kódszerkesztőben, nem hoz létre új bekezdést.
Ha egynél több bekezdést szeretne, több
címkét kell használnia a dokumentumban. A bekezdéscímkéket a
címkén belül kell elhelyezni.A bekezdéscímke szintaxisa:
<p> ….some content here….</p>
Ha négy bekezdést szeretne, akkor a kód a következőképpen fog épülni;
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body>
A vagy egyszerűen félkövér címke a nyitó és a záró között lévő tartalmat félkövérre formázza.
A félkövér címke lehet egy címsor, például H1, vagy akár egy bekezdéscímkén belül is.
Ezek példák a félkövér címkékre;
<b> Bold Tag </b>
A „Bold Tag” kifejezés félkövéren jelenik meg.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>
Az ötödik kiadás félkövérrel lesz szedve.
A dőlt címke, amelyet az jelöl, dőlt betűvel szedi a címkéken belüli szöveget.
Például, ha van
<i> These are italics </i>
Az „ezek dőlt betűsek” szavak dőlt betűvel jelennek meg.
Az aláhúzott címkét vagy az -t akkor használjuk, ha egy HTML-dokumentumban egy bizonyos szövegrészt akarunk aláhúzni.
Például, ha van;
<u> underline these words </u>
A címkék közötti kifejezés aláhúzva lesz.
A Center címke, a
Például, ha van egy h2 címkénk a következőképpen írva:
Tartalom központosítása HTML-ben
, akkor a következőképpen tudjuk központosítani;
<center> <h2> Centering Content in HTML </h2> </center>
A Span címke, a , egy általános soron belüli tároló, amely nem rendelkezik alapértelmezett stílussal. A span címkével csoportosíthatja a stílusozni kívánt szövegeket.
A címkéket más címkéken belül is átterelheti, például a címeket és a bekezdéseket;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
<p> Learn HTML <span> from experts </span> and be ready for the market </p>
Az osztáscímke, rövidítve div, olyan címke, amely lehetővé teszi a különböző címkék csoportosítását egy HTML-dokumentumban.
A div címkének megadható egy ‘osztály’, amellyel külső stílust adhat hozzá CSS használatával.
Így jelenik meg a h1, h2 és egy bekezdéscímkét tartalmazó div.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div>
A hangsúly vagy az címke bizonyos szavak hangsúlyozására szolgál egy HTML-dokumentumban.
A címkék közötti tartalom ferdén vagy dőlt betűvel jelenik meg.
A bekezdésen belüli kiemelt tartalom megjelenhet egy kódszerkesztőben, így fog megjelenni;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>
A vagy a felső index címke lehetővé teszi, hogy a mellékelt szöveg a többi felett legyen. Tökéletes példa az, amikor egy X számot négyzetre szeretnénk emelni, és matematikailag ábrázolni szeretnénk, hogy X2-t kapjunk
A bekezdéscímkén belül a szintaxisa a következő lesz;
<H1> Harveys <sup>TM </sup> Company Limited </H1>
Az alsó index vagy címke a felső index címke ellentéte. A címkébe zárt tartalom a normál szövegsor alatt jelenik meg. Tökéletes példa erre, amikor a víz kémiai képletét H20-nak írjuk.
Az alsó index címke szintaxisa a következő lesz;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water
A
egy önzáró címke, amely a szünetet jelenti. A
utáni összes tartalom új sorban kezdődik.
A
szintaxisa egy bekezdésen belül a következő lesz;
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p>
és
A rendezett lista címkét vagy az
- címkét egy másik címkével, például a