A HTML címeket a "h" tagokkal definiálják, hat mérete van, a méretük különbözteti meg, a legnagyobbtól a legkisebbig:
...
<h1>This is a
heading</h1>
<h2>This is a
heading</h2>
<h3>This is a
heading</h3>
<h4>This is a
heading</h4>
<h5>This is a
heading</h5>
<h6>This is a
heading</h6>
...
E html kód kinézete a böngészőben:
A HTML bekezdéseket a "p" tagokkal definiálják:
...
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a<br />
paragraph</p>
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<p>This is a paragraph</p>
...
E html kód kinézete a böngészőben:
Amennyiben bárhol a szövegen belül szükség van áttérni az új sorba, a <br /> tagot lehet használni. Ez a tag nem rendelkezik zárótaggal és a lezárását egy ferde vonallal a > előtt kell megtenni.
A két sor közötti távolság eltérő ha egy illetve két bekezdéshez tartoznak a sorok.
Amennyiben egy vízszintes vonalra van szükség a szöveg elválasztására, a <hr /> tagot használják. Ez a tag nem rendelkezik zárótaggal és a lezárását egy ferde vonallal a > előtt kell megtenni.
A HTML linkeket az "a" tagokkal definiálják. A link címe a href attribútummal van meghatározva. Az attribútumok biztosítják a további adatokat a HTML elemekről. Az attribútumok a nyitó tagon belül találhatók.
...
<p>This is a paragraph.
<a href="http://www.google.com">Google</a>
This is the same paragraph.</p>
...
E html kód kinézete a böngészőben:
A teljes szöveg az <a> és </a> tagok között a link a megadott oldal felé (Google).
Az attribútumokat a nyitó tagokba kell beírni. Az attribútumokat párokban kell megadni: attribútum_név="érték". Az értékeket idézőjelek közé kell írni. A HTML engedélyezi a dupla és a szimpla idézőjelek használatát az attribútum értékének a megadásánál.
Megjegyzés:
E példában észre lehet venni egy alapszabályt a tagokkal kapcsolatban: a
tagok beágyazottak lehetnek. A belső tag egy külső tagon belül lehet,
azzal hogy a belső tagot mek kell nyitni és be kell zárni a külső tagon
belül.
E példában a <p> tag a külső, és az <a> tag a belső.
A HTML képeket az <img> tag definiálja.
A kép forrását a src attribútum határozza meg, és a kép teljes elérési útvonalát tartalmazza. A leggyakoribb hiba a kis és nagy betűk használatánál történik. Ajánlott kizárólag a kis betúket használni a web-en található folderoknál és fájloknál. A kis és nagy betű hibákat a windows nem észleli ha a hard diskről vannak nyitva a html dokumentumok.
Az alternatív szöveget az alt attribútum adja meg. Az alternatív szöveg abban az esetben lesz kiírva ha a böngésző a megadott helyen nem találja a képet.
A width és a height attribútumok adják meg a kép szélességét és magosságát pixelekben.
...
<img
src="http://www.atlagic.rs/Website_Under_Construction.gif" alt="Ovo je alternativni tekst"
width="180px" height="180px" />
...
E html kód kinézete a böngészőben:
Ez a tag nem rendelkezik zárótaggal és a lezárását egy ferde vonallal a > előtt kell megtenni.
A böngészők szépen szabályozzák a képek növelését illetve csökkentését, vigyazni kell a képek szélesség és magasság arányaira hogy a kép ne legyen eltorzítva.
Az attribútumok legfontosabb tulajdonságai
A dokumentum nyelvét a <html> tagban kell beállítani. A dokumentum nyelvét a lang attribútum segítségével lehet megadni. A nyelv megadását ajánlatos megadni. Az első két karakter a nyelv, a második a dialektus (például: en-US, sr-RS, hu, ...).
<!DOCTYPE html>
<html lang="en-US">
<head>
...
</head>
<body>
...
</body>
</html>
Amennyiben az egér mutatója ilyen bekezdés felett van, megjelenik egy lapocska melynek felirata a title attrubútum értéke lessz:
...
<p title="My title">This is a paragraph. This is a paragraph</p>
...
E html kód kinézete a böngészőben:
| Attribútum | Magyarázat |
|---|---|
| alt | A kép alternatív szövege |
| disabled | A tiltott elemet definiálja |
| href | Az URL-t definiálja (a link web címét) |
| id | Az elem egyedülálló id-ét definiálja |
| src | A kép URL-ét definiálja |
| style | Az elem CSS stílusát definiálja |
| title | Adatokat biztosít az elemről (lapocska megjelenése a kiírással) |
| value | Az elem szöveges értékét definiálja. |
A title elemen kívül a <head> tagban további adatokat lehet megadni a dokumentumról. Az ékezetes betűk szabályos kiírásához a head tagban egy metatagot kell megadni:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
...
</body>
</html>
Minden HTML dokumentumnak megvan az alapértelmezett stílusa (fehér háttér és fekete szöveg). Az alapértelmezett stílus módosítása a style attribútum segítségével történik.
A style attribútum helyesírása a következő: style="property:value", a property (tulajdonság) CSS tulajdonság a value (érték) CSS érték.
Lehetséges több különböző stílusbeállítást egy style attribútumon belül
elvégezni. Ez esetben a "property:value" párok pontosvesszővel vannak
elválasztva:
style="property1:value1; property2:value2;..."
...
<h1>Black Heading</h1>
<h1 style="color:red">Red Heading</h1>
<h1 style="color:blue">Blue Heading</h1>
...
E html kód kinézete a böngészőben:
...
<body style="background-color:lightgray">
<h1>Heading</h1>
<p>This is a paragraph</p>
</body>
...
E html kód kinézete a böngészőben:
...
<h1 style="color:red">Red heading</h1>
<p style="color:blue">Blue paragraph</p>
...
E html kód kinézete a böngészőben:
...
<h1 style="font-family:verdana">Verdana heading</h1>
<p style="font-family:courier">Courier paragraph</p>
...
E html kód kinézete a böngészőben:
...
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph</p>
...
E html kód kinézete a böngészőben:
...
<h1 style="text-align:center">This is a heading</h1>
<p style="text-align:justify">This is one paragraph.
This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.
This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.
This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.
This is one paragraph. This is one paragraph. This is one paragraph. This is one paragraph.
This is one paragraph. This is one paragraph. </p>
...
E html kód kinézete a böngészőben:
A HTML <b> jelöli a vastagított szöveget melynek nincs különosebb fontossága.
...
<p>This is a normal paragraph.</p>
<p><b>This is a bold paragraph.</b></p>
...
E html kód kinézete a böngészőben:
A HTML <strong> jelöli a vastagított szöveget mely különosen fontos.
...
<p>This is a normal paragraph.</p>
<p><strong>This paragraph is strong.</strong></p>
...
E html kód kinézete a böngészőben:
A böngészők ugyanúgy jelenítik meg a <strong> és a <b>, valamint a <em> és a <i> is. A fontos különbség a tagok jelentése között az hogy a <b> és a <i> jelölik a vastagított illetve dőlt szöveget. A <strong> és a <em> jelölik a vastagított illetve dőlt szöveget amely "fontos".
A HTML <i> jelöli a dőlt szöveget melynek nincs különosebb fontossága.
...
<p>This is a normal paragraph.</p>
<p><i>This is an italic paragraph.</i></p>
...
E html kód kinézete a böngészőben:
A HTML <em> jelöli a dőlt szöveget mely különosen fontos.
...
<p>This is a normal paragraph.</p>
<p><em>This paragraph is emphasized.</em></p>
...
E html kód kinézete a böngészőben:
A böngészők ugyanúgy jelenítik meg a <strong> és a <b>, valamint a <em> és a <i> is. A fontos különbség a tagok jelentése között az hogy a <b> és a <i> jelölik a vastagított illetve dőlt szöveget. A <strong> és a <em> jelölik a vastagított illetve dőlt szöveget amely "fontos".
A HTML <small> tagon belüli szoveg csökkentett méretű szövegként jelenik meg.
...
<p>This is a <small>small</small> text.</p>
...
E html kód kinézete a böngészőben:
A HTML <mark> tagon belüli szoveg kijelölt szövegként jelenik meg.
...
<p>This is a <mark>marked</mark> text.</p>
...
E html kód kinézete a böngészőben:
A HTML <del> tagon belüli szoveg törölt szövegként jelenik meg.
...
<p>This is a <del>deleted</del> text.</p>
...
E html kód kinézete a böngészőben:
A HTML <ins> tagon belüli szoveg beillesztett szövegként jelenik meg.
...
<p>This is an <ins>inserted</ins> text.</p>
...
E html kód kinézete a böngészőben:
A HTML <sub> tagon belüli szoveg alsó indexként jelenik meg.
...
<p>This is a <sub>subscripted</sub> text.</p>
...
E html kód kinézete a böngészőben:
A HTML <sup> tagon belüli szoveg felső indexként jelenik meg.
...
<p>This is an <sup>superscripted</sup> text.</p>
...
E html kód kinézete a böngészőben:
A megjegyzések nem láthatóak a HTML dokumentumokban, csak az oldal forráskódjában láthatóak. A megjegyzés szövege <!-- és --> tag között van.
...
<p>This is a paragraph.</p>
<!-- This is a comment. -->
<p>This is another paragraph.</p>
...
E html kód kinézete a böngészőben: