HTML Dokumentum szerkezete

Alap jelek meghatározzák HTML fájl területeket.

Elem Jelentése Páros Tartózkodás
html HTML dokumentum kezdete igen fájl elején
head oldal feje igen fálj elején
body oldal törzse + háttér definíciója igen <head> után
<!-- --> megjegyzés igen bárhol
!doctype DTD definíció nem teljesen elején

html

Egész dokumentumnak a kezdése és vége. Minden tartalomnak benne kell lennie. Ez a jel nem kötelező, legtöbb böngésző kitalálja. De ha azt akarod, hogy fáljok szabványosak legyenek, használj <HTML> elemet.

HTML taghoz nincsenek attribútumok.

head

Dokumentumnak a feje, amely nem jelenik meg. Itt találhatunk további nem kötelező elemeket (title, meta, link, script, style stb.). Ha fejbe egyszerű szöveget írsz, valamelyik böngészőben megjelenik a dokumentum elején.

Fej taghoz nincsenek attribútumok.

body

Dokumentum törzse. Tartalmazza összes megjelenített oldal tartalmát.

Lent feltünt attribútumok régiesek (kivéve alap attribútúmokat) és helyettesítik CSS body beállított tulajdonságokkal. Ajánlott CSS tulajdonságokat jobb oszlopban találhatod.

Body törzselem attribútuma Jelentés Értékek CSS helyettesítés Body elem számára
bgcolor háttér szín szín background-color
background kép a háttérben kép URL background-image
szöveg előtér (szöveg) szín szín color
link nem látogatott link színe szín a:link {color: ...}
vlink meglátogatott link színe szín a:visited {color: ...}
alink klikkelt linkek színe szín a:active {color: ...}
bgproperties kép háttér mozgása scroll / fixed background-attachment
scroll törzs görgetés (inkább nehasználjátok) yes/no overflow
leftmargin bal szegély képpontok margin-left
topmargin felső szegély képpontok margin-top
rightmargin jobb szegély (NN kivéve) képpontok margin-right
bottommargin alsó szegély (NN kivéve) képpontok margin-bottom
marginwidth bal és jobb (csak NN) képpontok margin-left, margin-right
marginheight felső és alsó (csak NN) képpontok margin-top, margin-bottom

Példa: <body background="kep.gif" bgcolor="red" text="white" link="yellow" vlink="brown" alink="#BBB">

Szín attribútumok megadása törzselemben régies, HTML dokumentumot javaslom színezni CSS stílusok segítségével, például:

<body style="color: white; background-image: URL('kep.gif') red">

vagy még jobban dokumentum fejében style elem segítségével:

<style> body {color: black; background-color: green; background-image: URL('kep.gif')}
a:link {color: blue;}
a:active {color: #FFF}
a:visited {color: red;}
</style>

!--< megjegyzés -->

Minden, ami HTML fáljban <!-- és --> jelekkel van becsomagolva megjegyzésként veszi a böngésző és sose jelenik meg. Tehát <!-- megjegyzés eleje és --> megjegyzés vége.

Négy cseles helyzet:

  • Nem működnek többszörös megjegyzések: <!-- ez megjegyzés, <!-- ez is --> de ez már nem! -->
  • <style> és <script> elemek belűl tartalmat megjegyzésekbe csomagolják, hogy régi böngészők figyelmen kívül hadják és jól fogalmazzák tartalmat mint stílust vagy skriptként és nem pedig mint HTML kódot. Csomagolás megjegyzésekbe manapság már teljesen felesleges (publikált 2009-ben)
  • Valamelyik programok és skriptek használják megjegyzéseket dolgok beillesztéshez. Megjegyzés elem mögöt adnak valamilyen kódot. Pl.: <!--# egy SSI beillesztés -->, <!--webbot egy Frontpage beillesztés -->
  • Előírás azt mondja, hogy megjegyzés befejezésben lehet szóköz vagy akár más jel. Tehát ez: -- > is megjegyzés befejezése. Vigyázni kell, hogy a megjegyzésben ne legyen két kötőjel: -- egymás után, mert utána elég egy > és ez itt így már nem megjegyzés.

!doctype

DTD szabvány. Dokumentum elején kell írni, még a <HTML> jel előtt. Nem muszáj csinálni ezt, de SGML és XML nyelv szabvány jelzés szerint jó, ha strukturált formában elmondjuk, hogy ez a dokumentum egy HTML dokumentum; méghozzá azt is kellene jelezni , hogy HTML dokumentum melyik verziónak megfelel. Ennek a lényege csak a jövőben rejlik, amikor dokumentumok jobban automatikusan lesznek feldolgozva. Ennek a szintaktisa elég fura. Csak egy pár példát mutatok:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

"Strict" lánc helyett valamikor használunk "draft" vagy "final" láncot. Amennyiben nincsen ellenőrízve fálj szintaktisa parserel hozzákötődő DTD szerint, <!doctype>-t inkább nehasználjatok.

Manapság !doctype fő funkciója megjelenített CSS modulok átkapcsolás. Másszóval doctype határozza meg melyik böngészőben hogyan lesznek kiszámolva a szélességek és szöveg mérete. Ez egy elég kényelmetlen helyzet, amely történelmi folyamatból alakult ki.

Példa

Klasszikus HTML fálj így nézhet ki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
fej tartalma
</head>

<body>
törzs tartalma
</body>
</html>
Copyright © 2009, Ervin Linszter