HTML gyorsreferencia 

© Fejér Tamás, 2003
BME, Építészeti Ábrázolás Tanszék

HTML dokumentum szerkezete

* Kérdés, észrevétel   Ő Vissza   

Dokumentum szerkezete

Minimális html lap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>A lap címe</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
   <meta http-equiv="Content-Language" content="hu" />
</head>
<body>
   <p>Ez egy bekezdés.</p>
   <p>Ez még egy bekezdés.</p>
</body>
</html>

Általános html lap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>A lap címe</title><!-- A böngészőablak fejlécében jelenik meg -->
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /><!-- Használt karakterkészlet -->
   <meta http-equiv="Content-Language" content="hu" /><!-- A szöveg nyelve -->
   <meta name="keywords" content="kulcsszó1, kulcsszó2, kulcssó3, stb" /><!-- 5–10 kulcsszó -->
   <meta name="description" content="A lap leírása max 750 karakterben" /><!-- Egy rövid kivonat -->
   <meta name="robots" content="index, follow"><!-- A lapot indexelje a kereső, és kövesse a rajta lévő linkeket -->
   <link rel="previous" href="elozoLap.html"><!-- Sorban előtte lévő lap -->
   <link rel="next" href="kovetkezoLap.html"><!-- Sorban következő lap -->
   <link rel="contents" href="tartalom.html"><!-- Tartalomjegyzéket tartalmazó lap -->
   <link rel="stylesheet" href="sajat1.css" type="text/css"><!-- Külső stílusfájl megadása -->
   <link rel="stylesheet" href="sajat2.css" type="text/css">
   <style type="text/css"><!--
      body {background-color: silver;}
      p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;}
      h1 {font-size: medium; letter-spacing: 0.1em; font-weight: bold;}
   --></style>
</head>
<body>
   <h1>Ez cím</h1>
   <p>Ez meg a szöveg.</p>
   <p><a onclick="history.go(-1)" onMouseOver="style.cursor='hand'"><em>Vissza</em></a><p>
</body>
</html>

Továbblépő lap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Továbblépés</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
   <meta http-equiv="Content-Language" content="hu" />
   <meta http-equiv="pragma" content="no-cache" /><!-- Lapunk nem tárolódik az olvasó gépén, hanem mindig frissen töltődik le -->
   <meta http-equiv="refresh" content="10; url=AltalanosLap.html" />
   </head>
<body>
   <p>10 másodperc múlva továbblép az Általános lapra.</p>
</body>
</html>

Keretes (frame) lapok

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
   <title>Frame 1. példa</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<frameset cols="100,*" frameborder="no" border="0" framespacing="0" rows="*">
   <frame name="leftFrame" scrolling="auto" noresize src="F1bal.html" />
   <frame name="mainFrame" src="F1fo.html" />
</frameset>
<noframes><body>
   <p>Sajnos a böngészője nem tud kereteket megjeleníteni.</p>
   <p>A két keretben az <a href="F1bal.html">F1bal.html</a> és az <a href="F1fo.html">F1fo.html</a> fájlok láthatók.</p>
</body></noframes>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
   <title>Frame 2. példa</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<frameset rows="60%,40%" cols="3*,5*,2*" frameborder="yes" border="1" framespacing="0">
   <frame name="cornerFrame" src="F2-11.html" />
   <frame name="topFrame" src="F2-12.html" scrolling="no" />
   <frame name="top2Frame" src="F2-13.html" />
   <frame name="leftFrame" src="F2-21.html" />
   <frame name="mainFrame" src="F2-22.html" />
   <frame name="main2Frame" src="F2-23.html" />
</frameset>
<noframes> <body> ... </body> </noframes>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
   <title>Frame 3. példa</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<frameset rows="80,*" cols="*" framespacing="1">
   <frame name="topFrame" scrolling="no" noresize src="F2felso.html" />
   <frame name="bottomFrame" scrolling="no" noresize src="F2alkeretek.html" />
</frameset>
<noframes>
<body>
   <p>Sajnos a böngészõje nem tud kereteket megjeleníteni.</p>
   <p>A két keretben az <a href="F1bal.html">F1bal.html</a> és az <a href="F1fo.html">F1fo.html</a> fájlok láthatók.</p>
</body>
</noframes>
</html>
<frameset cols="60,1*,3*" framespacing="1">
   <frame name="leftFrame" noresize scrolling="no" src="F3bal.html" />
   <frame name="main1Frame" scrolling="yes" src="F3fo.html" frameborder="0" />
   <frame name="main2Frame" scrolling="auto" src="F3fo2.html" />
</frameset>