Elavult címkék és attribútumok

Ez a fejezet olyan címkékkel foglalkozik, amelyeket nagyon sok weboldal használ, viszont nem ajánlott a használatuk, ugyanis vagy már elavultak, vagy pedig van helyettük jobb megoldás (stíluslapok). Egy címke vagy attribútum akkor elavult, ha egy régebbi szabvány részei voltak, de a legújabb szabványnak már nem részei. Például ha egy címkét a HTML 3.2 szabvány ír le, de ugyanez a címke már nem része a HTML 4.01 szabványnak, akkor ez a címke elavult: A böngészők még mindig felismerik, azonban van helyettük jobb megoldás.

Először lássuk azokat a címkéket, amelyek ugyan részei a HTML 4.01 Strict doctype-nak, viszont stíluslappal kiválthatók!

b: Szöveget félkövérré tesz. Helyette használjuk a strong címkét, ha valamit ki akarunk hangsúlyozni, vagy a font-weight: bold meghatározást a span címkével együtt, ha csak a kinézet miatt vastagítunk valamit.
i: Szöveget dőltbetűssé tesz. Helyette használjuk az em címkét, ha valamit ki akarunk hangsúlyozni, de nem annyira, mint a strong esetében, vagy a font-style: italic meghatározást a span címkével együtt, ha csak prezentációs célra használjuk a dőlt betűt.
big: Megnöveli a betűméretet. Helyette használjuk a h1, h2 stb. címkéket, vagy a font-size tulajdonságot, ha csak a kinézet miatt kell a nagyobb vagy kisebb betű.
small: Lecsökkenti a betűméretet. Helyette használjuk a font-size tulajdonságot.
cellpadding és cellspacing attribútumok a táblázatoknál: Szabad őket használni, de itt is jobb megoldás stíluslap használata.

Az elavult címkék listája nagyobb, ezért őket csak felsorolásszinten említem meg. Az oktatóanyagban biztos, hogy nem találkoztunk velük, ha látjuk őket valamelyik weboldalán forrásában, akkor tudjuk róluk, hogy elavultak.

Gyakran használt elavult címkék: font, u, center, menu, layer stb.

Gyakran használt elavult attribútumok: align, target, link, alink, vlink, background, text, bgcolor, name, topmargin, rightmargin, bottommargin, leftmargin stb.

Framek

A framekkel lehetőség van egynél több weboldalt megjeleníteni egyetlen böngészőablakban. Eddig minden HTML fájlunk egy böngészőablakot foglalt el. Lehetőségünk van frameket (kereteket) definiálnunk, és minden frameben egy külön HTML fájlt jeleníthetünk meg ugyanabban a böngészőablakban.

A framekkel kapcsolatban fennálló több probléma miatt nem ajánlott azok használata. Ezek a problémák a következők:

Egy framekkel rendelkező weboldal kedvencekbe való felvételekor nem az éppen látható állapotot, hanem az eredetileg látható weboldalakat menti el a böngésző.
A keresők sem szeretik a frameket.
A framek miatt több görgetősáv is megjelenhet a böngésző ablakában, ami miatt nehezebb használni az oldalt.
A nyomtatás is máshogy működik egy frames oldal esetében.

A framek alternatívája lehet valamilyen szerveroldali megoldás, vagy pedig a CSS overflow és display: fixed meghatározása.

A framek helyett használjuk ezt a megoldást.

Ha mégis érdekelnek minket a framek, akkor lássuk első példánkat!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Framek</title>
</head>
<frameset cols="33%,33%,34%">
  <frame src="frame_a.html" title="A felső frame">
  <frame src="frame_b.html" title="A középső frame">
  <frame src="frame_c.html" title="Az alsó frame">
  <noframes>
  <body>
  <ul>
    <li><a href="frame_a.html">A felső frame</a></li>
    <li><a href="frame_b.html">A középső frame</a></li>
    <li><a href="frame_c.html">Az alsó frame</a></li>
  </ul>
  </body>
  </noframes>
</frameset>
</html>

Az eredmény itt tekinthető meg!

Az első dolog amit tennünk kell, hogy a dokumentum típusát beállítjuk Frameset-re, mert ez kell ahhoz, hogy frameket használhassunk.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

A következő, ami feltűnhetett, hogy a fejrész (head) után nem a törzs (body) következett, hanem a <frameset>...</frameset> elem. Ez az elem az egész dokumentumot felosztja részekre: sorokra, oszlopokra, vagy mindkettőre. Ezért nincsen body-nk, mert ez a dokumentum csak frameket definiál.

A cols="25%,50%,25%" attribútum három oszlopot definiál, amik a megadott százalékok szerint aránylanak egymáshoz. Figyeljünk arra, hogy a százalékos értékeket vesszővel válasszuk el, és az összegük adja ki a 100%-ot!

A title attribútumot nagyon fontos megadni minden framehez, mert így tudjuk akadálymentesíteni a frameket! A title írja le röviden a frameben található információ célját.

A <noframes>...</noframes> elem a frameket nem kezelő böngészők miatt kellenek, és a frameset elemen belül kell elhelyeznünk őket, egy példányban. Ugyanis ha egy böngésző nem kezeli a frameket, akkor az itt található szöveget jeleníti meg. Nyilván itt elérhetővé kell tennünk a weboldalak linkjeit, amiket egyébként framekben jelenítettünk volna meg. Viszont itt már kell a <body>...</body> elem, ahogy a példában látszik!

<frame src="frame_a.html" title="A felső frame">
<frame src="frame_b.html" title="A középső frame">
<frame src="frame_c.html" title="Az alsó frame">

Ezek a sorok mondják meg a böngészőnek, hogy a három frameben melyik három honlapot kívánjuk megjeleníteni.

Nemcsak sorok, hanem oszlopok szerint is feloszthatjuk a dokumentumot, és egy URL-t megadhatunk az src értékének. Ekkor nem a cols (oszlopok), hanem a rows (sorok) attribútumot kell használnunk, a példa többi része megegyezik az előzővel.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Framek</title>
</head>
<frameset rows="25%,50%,25%">
  <frame src="frame_a.html" title="A felső frame">
  <frame src="http://www.google.hu/" title="A középső frame, a Google.hu webhelyre mutat">
  <frame src="frame_c.html" title="Az alsó frame">
  <noframes>
  <body>
  <ul>
    <li><a href="frame_a.html">A felső frame</a></li>
    <li><a href="http://www.google.hu/">A középső frame, a Google.hu webhelyre mutat</a></li>
    <li><a href="frame_c.html">Az alsó frame</a></li>
  </ul>
  </body>
  </noframes>
</frameset>
</html>

Az eredmény itt tekinthető meg!

A framek közti elválasztóvonal húzásával módosíthatók alapesetben a framek egymáshoz képesti méretei. Ezt letilthatjuk, ha hozzáadjuk a noresize="noresize" attribútumot a frame címkéhez.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Framek</title>
</head>
<frameset rows="25%,50%,25%">
  <frame src="frame_a.html" title="A felső frame" noresize="noresize">
  <frame src="http://www.google.hu/" title="A középső frame, a Google.hu webhelyre mutat" noresize="noresize">
  <frame src="frame_c.html" title="Az alsó frame" noresize="noresize">
  <noframes>
  <body>
  <ul>
    <li><a href="frame_a.html">A felső frame</a></li>
    <li><a href="http://www.google.hu/">A középső frame, a Google.hu webhelyre mutat</a></li>
    <li><a href="frame_c.html">Az alsó frame</a></li>
  </ul>
  </body>
  </noframes>
</frameset>
</html>

Az eredmény itt tekinthető meg!

A <frameset>...</frameset> elemeket egymásba is ágyazhatjuk.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Framek</title>
</head>
<frameset rows="50%,50%">
  <frame src="frame_a.html" title="Frame A">
  <frameset cols="25%,75%">
    <frame src="frame_b.html" title="Frame B">
    <frame src="frame_c.html" title="Frame C">
  </frameset>
  <noframes>
  <body>
  <ul>
    <li><a href="frame_a.html">Frame A</a></li>
    <li><a href="frame_b.html">Frame B</a></li>
    <li><a href="frame_c.html">Frame C</a></li>
  </ul>
  </body>
  </noframes>
</frameset>
</html>

Az eredmény itt tekinthető meg!

Belső framek

Belső framek használatakor nem az egész böngészőablak területét osztjuk fel, hanem csak egy téglalap alakú részt fog elfoglalni a frame. Az iframe kikerült a HTML Strict doctype-ból, ezért ha használni kívánjuk, HTML Transtional doctype-ot kell használnunk.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Beágyazott frame</title>
</head>
<body>
<p>A beágyazott frame elé/mögé bármilyen tartalom kerülhet.</p>
<iframe src="http://www.w3.org/" width="100%" height="300" title="A W3C honlapja">
<p>Ez a szöveg azoknál jelenik meg, akik nem támogatják az iframe elemeket. Ez a frame a <a href="http://www.w3.org/">http://www.w3.org/</a> webhelyre mutat.</p>
</iframe>
<p>A beágyazott frame elé/mögé bármilyen tartalom kerülhet.</p>
</body>
</html>

Az eredmény itt tekinthető meg!

Az iframe címkében is használjuk a title attribútumot, és az iframe elemen belül pedig tegyük elérhetővé a megjeleníteni kívánt oldal linkjét, ugyanis a frameket nem támogató böngészők megjelenítik az elem tartalmát.

Alapesetben, ha nem fér ki a teljes weboldal a frameben, akkor megjelennek a gödítősávok. A gördítősávokat letilthatjuk az iframe scrolling="no" attribútumával. Ekkor azonban csak annyit látunk a frameben lévő weboldalból, amennyi kifér belőle.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Beágyazott frame</title>
</head>
<body>
<p>A beágyazott frame elé/mögé bármilyen tartalom kerülhet.</p>
<iframe src="http://www.w3.org/" width="100%" height="300" title="A W3C honlapja" scrolling="no">
<p>Ez a szöveg azoknál jelenik meg, akik nem támogatják az iframe elemeket. Ez a frame a <a href="http://www.w3.org/">http://www.w3.org/</a> webhelyre mutat.</p>
</iframe>
<p>A beágyazott frame elé/mögé bármilyen tartalom kerülhet.</p>
</body>
</html>

Az eredmény itt tekinthető meg!

Ajánlott linkek

Jakob Nielsen: Miért rosszak a framek? http://www.useit.com/alertbox/9612.html

A framek helyett felkínált megoldás: http://www.dynamicdrive.com/style/layouts/category/C11/