Tamás Ferenc: Weblapkészítés HTML alapokon – 4. rész
10. fejezet: Keretek (frame-ek)
A HTML 4-es verzió születésekor egyértelmű volt a keret: FRAME. De ezt a verziót eléggé túlhaladta a kor és a bővülő követelményrendszer, így egyre másra tűntek fel az újabbnál újabb lehetőségek. De mindenek előtt tisztázzuk a klasszikus alapokat!
A HTML-oldalak igen hasznos része a keretek (angolul: FRAME-ek) használata. Ezt a szomszédos dokumentum is bizonyítja. (htmlpelda22.html) A felépítése gyakorlatilag igen egyszerű, mivel a két keret külön-külön is felhasználható és minden hivatkozhat mindenre. Amint ez a forráskódban is látható, a kereteket két tag: a <FRAMESET> és a <FRAME>. Természetesen a <FRAMESET>-ben százalékosan, illetve pixelesen is megadható a keretek aránya. Szükség esetén több keret is egymásba ágyazható. A vízszintes felosztáshoz a "rows" szócskát kell használni, míg a függőleges felosztáshoz a "cols" szükséges. |
Lényeges kiemelni, hogy a frameset taget a HTML5 már nem támogatja. Az egyes keretek szélességét meg lehet adni képpontban, százalékban vagy a csillag (*) jellel, ami csak egyszer használható, ám ilyenkor az összes többi helyet jelöli.
Az egyes kereteket a FRAME szócska jelöli, de sajnos ez sem támogatott a HTML5-ben.
A FRAME fontosabb HTML4-es paraméterei:
- frameborder=1/0. (vagy yes/no). Az adott frame keretének meglétét adja meg.
- marginheight = szám vagy %. Az adott frame alsó és felső keretének vastagságát adja meg.
- marginwidth = szám vagy %. Az adott frame bal és jobb oldalának vastagságát adja meg.
- name = szöveg. Az adott keret neve. (Így is hivatkozhatunk rá!) Hogy ez a funkció jobban érthető legyen, azért pár éve létrehoztam egy mintaoldalt. Már nagyon nem foglalkozom vele, de a működése érthető lesz. URL: http://tferi.uw.hu/ Itt van egy „bal” és egy „jobb” oldali keretnév, amelyekre linkelésnél hivatkozom.
- noresize. Az adott frame nem méretezhető át.
- scrolling = yes/no/auto. Az adott frame görgethetőségét adja meg.
- src=URL. Az adott frame URL-je, azaz forrása. Ez a legfontosabb paraméter!
Még pár gondolat a name paraméterhez. Időnként szükség lehet arra, hogy ne a megszokott helyre töltsön be a hivatkozott oldal. Ilyenkor jöhetnek jól a következő lehetséges értékek:
- A "_self" paraméter esetén a megfelelő frame helyébe töltődik az oldal.
- A "_parent" paraméter esetén a megfelelő frame fölé töltődik az oldal.
- A "_top" esetén legfölülre.
- A "_blank" paraméter esetén egy vadonatúj böngésző ablakába.
- Az "ablakneve" paraméter használata esetén a megadott nevű keretben nyílik meg a hivatkozás.
- A "_search" paraméternél a link a böngésző kereső-paneljába töltődik be.
18. feladat: Készítsen egy olyan keretrendszerű lapot, amely a tetején van egy 20% széles csík, majd a többi részét három különféle al-oldal foglalja el!
19. feladat: Az előző feladatban az oldal tetején lévő csíkot cserélje le 4 különböző linkre, amelyet közül az egyikre kattintva a bal alsó lap cserélődik le, a másikra kattintva az alsó-középső, a harmadikra kattintva a jobb alsó, míg a negyedikre kattintva a felső csík kapjon valami új tartalmat!
11. fejezet: Keretek újszerű módon - IFRAME
Mint már fentebb jeleztem, a Frame eléggé túlhaladott lett, helyette bejött a sok mindent öröklő, de sok újdonságot is tartalmazó Iframe. Ez már támogatott a HTML5-ben!
Példa:
<HTML>
...
<IFRAME SRC="http://www.tferi.hu/"></IFRAME>
...
</HTML>
Mint az a fenti példából is látható, az Iframe használatakor egy virtuális keretet hoz létre a megnyitott weblapban, melybe aztán igen sokféle tartalmat betölthetünk. Fontosabb paraméterek (ezeket támogatja a HTML5 is!):
- height = szám. A teljes Iframe keret vastagsága képpontban.
- name = szöveg. A teljes Iframe keret neve.
- scrolling = yes/no/auto. Az Iframe görgethetőségét adja meg.
- src = URL. A forrás megadása. Ez a legfontosabb paraméter.
- width = szám. A teljes Iframe keret vastagsága képpontban.
- srcdoc =HTML_code. A mutatott keret HTML-kódlapjának specifikációja. Óvatosan érdemes használni!
- sandbox = allow-forms/allow-pointer-lock/allow-popups//allow-same-origin/allow-scripts/allow-top-navigation. Az elemek tartalmának speciális korlátozása. Óvatosan érdemes használni!
További paraméterek – ezeket már nem támogatja a HTML5:
- align = left/right/top/middle/bottom. Az Iframe igazítása.
- frameborder=1/0. (vagy yes/no). Az adott Iframe keretének meglétét adja meg.
- longdesc = URL. A keret tartalmának hosszasabb leírása.
- marginheight = szám vagy %. Az adott frame alsó és felső keretének vastagságát adja meg.
- marginwidth = szám vagy %. Az adott frame bal és jobb oldalának vastagságát adja meg.
- scrolling = yes/no/auto. Az adott frame görgethetőségét adja meg.
20. feladat: Készítsen egy egyszerű weblapot, melynek a tetején legyen egy H1-es cím, majd alatta legyen belefoglalva egy másik weblap 800x600-as méretben! (Ha nem megy, akkor megnézheti a htmlpelda23.html állományban.)
12. fejezet: Egyéb szövegformázási lehetőségek
A HTML4-ben még elég sok lehetőség volt a szöveg különféle formázására, de ezek néhány kivételtől eltekintve mind eltűntek az 5-ös verzióból. Jöjjön most pár belőlük:
<ADDRESS>
Postacímet jelöl ki.
</ADDRESS>
<BLINK> Ez nem minden böngészőben villog! </BLINK>
<BIG> Nagyobb karakterméret </BIG>
<BLOCKQUOTE>
Szövegblokk - érdemes kipróbálni!
</BLOCKQUOTE>
<CITE> Idézet - ritkán használható</CITE>
<CODE> Programkód - a más betűstílus miatt érdemes használni</CODE>
<COMMENT> Kommentálás - semmi hatással nincs a dokumentumra. Nem íródik ki </COMMENT>
<DFN>Definiált szöveg </DFN>
<EM> Kiemelés - ritkán használt</EM>
<KBD> Billentyűzetről begépelhető input írógép stílussal </KBD>
<S> Keresztülhúzott szöveg</s>
<SAMP>
Irodalmi szövegrészlet, illetve mintakarakter
</SAMP>
<SMALL> Kisebb betűméret </SMALL>
<STRONG> Vastagított megjelenés </STRONG>
<SUB> Alsó index </SUB>
<SUP> Felső index </SUP>
<VAR> Változónevet jelöl ki </VAR>
<TT> Írógépkarakterek</TT>
A könnyebb hozzáférhetőség kedvéért ezt is megnézheti egy állományban: htmlpelda24.html.
Marquee
Érdekes, de nem minden böngészőben megjelenő lehetőség a szövegek feliratszerű mozgatása a <MARQUEE> és a </MARQUEE> között. Általában akkor lehet látványos az effektus, ha az ablak nagyobb részében látható lesz a mozgás, mint a lenti példában: (htmlpelda25.html)
<HTML> <Marquee behavior=alternate bgcolor="teal" dataformatas=text loop=3 width="75%" title="dumálás"> Ez a duma! </marquee> </HTML> |
Néhány lényeges paraméter:
- BEHAVIOR =alternate/scroll/slide - mozgásirány = balra-jobbra/átlapozás (scroll) a direction által meghatározott irányba/a szöveg levágása az előző mintájára
- BGCOLOR = háttérszín kódja vagy neve
- DATAFORMATAS = text/html - adatformátum - sima szöveg/html
- DIR = ltr/rtl - szöveg olvasási irányának meghatározása; ltr=balról jobbra (alapértelmezés); rtl = jobbról balra
- DIRECTION = left/right/up/down - görgetés iránya - bal/jobb/fel/le; Alapértelmezés: left
- HEIGHT = "n" - Hány %-ot, vagy képpontot foglalhat el a HTML-tag a képből.
- HSPACE = "n" - Mekkora legyen a HTML-tag mellett a szabad hely vízszintesen?
- VSPACE = "n" - Mekkora legyen a HTML-tag mellett a hely függőlegesen?
- LOOP = "n" - Hány ismétlés után álljon le a mozgatás. (Végtelen = -1)
- SCROLLAMOUNT = "n" - Hány pixel elcsúszással rajzoljon ismét a MARQUEE.
- SCROLLDELAY = "n" – Hány ezredmásodperc után rajzolja újra a HTML-taget.
- TITLE = "cím" - Mi jelenjen meg, ha az egeret fölé visszük?
- WIDTH = "n" - Az ablak hány százalékában jelenjen meg a MARQUEE.
21. feladat: Készítsen egy jobbról balra 4-szer elhaladó pár szavas szöveget, amely az aktuális ablak 65%-át foglalja el, de az egész alakzat középre legyen igazítva és sárga háttere legyen.
22. feladat: Ugyanezekkel a paraméterekkel készítsen egy újabb objektumot, melyben egy weblap linkje gördül tova.
Basefont
Fontos karakterformázási lehetőséget tartalmaz a <BASEFONT> tag, mely egy dokumentum alapvető karakterkészletét tartalmazhatja, amelyhez képest a többi karakter hogyan nézzen ki. Lehetséges paraméterei: COLOR (szín) és FACE (karakterkészlet neve). A fontosabb böngészők ismerik a SIZE (méret) paramétert. További segítséget jelenthet a következő állomány is: (htmlpelda26.html)
<html>
<head>
<basefont color="red" size="5" face="Arial">
</head>
<body>
<h1>1-es szintű főcím</h1>
<p>Egy sima bekezdés.</p>
</body>
</html>
Lényeges: a HTML5 nem támogatja ezt a taget!
BGSound
Csak pár régebbi böngésző által támogatott lehetőség a <BGSOUND> (háttérhang). Itt a gép hangkártyája segítségével lejátszathatjuk az oldalhoz rendelt háttérhangot. Választható kiterjesztések: WAV, AU, MID és CD. Kötelező paraméter a forrás megjelölése (SRC). Lehetséges paraméter az ismétlések számát szabályozó LOOP=n, melyben n egy sorszám. Abban az esetben, ha n = -1, akkor végtelenszer ismétlődik a háttérhang. Érdekes lehetőség a BALANCE=n paraméter, ahol n -10000 és +10000 közötti érték. Ez határozza meg a bal és jobb oldali hangszórók közti hangosság értékét. Alapértelmezés: 0. (Egyenlő hangosság.) További hasonló paraméter a VOLUME=n, ami a hangerőért felelős. n értéke -10000 és 0 között lehet, ahol 0 a legnagyobb hangerő. Lényeges, hogy a HTML5 ezt sem támogatja!
13. fejezet: BODY és META
A teljes értékű weblapok korrekt megjelenítéséhez, valamint a keresőrobotok jobb kiszolgálása végett igen fontos az ún. nem látható tagek rendszeres használata. A HTML5 különösen felértékeli ezt a lehetőséget, mivel szinte minden formázást ezzel érdemes (és lehet) megcsinálni.
Lássunk először is egy több soros mintát: (htmlpelda27.html)
<HTML>
<HEAD>
<TITLE>Ez a cím</TITLE>
<META name="description" content="Lap leírása">
<META name="keywords" content="Kulcsszavak">
<META name="generator" content="Mivel lett csinálva">
<META name="author" content="Szerző neve">
<META name="robot" content="index,follow">
<META http-equiv="Expires" content="Fri, 07 Jul 2017 14:25:27 GMT">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
Na, csak ez a látható!
</BODY>
</HTML>
Látható, hogy maga a HTML-tartomány két részre oszlik. Van egyrészt egy fejléc <HEAD> és </HEAD> között, valamint egy szövegtörzs a <BODY> és a </BODY> között. Eddig csak ez utóbbi került sorra. A fejléc megléte nem kötelező, de sokat tud segíteni a következő elemekkel:
<TITLE> A Dokumentum címe </TITLE>. Az elem szerepeltetése azért is lényeges, mert ez kerül a böngésző címsorába!
A <META> kezdetű elemeknek nincsen zárórésze és nem is jelennek meg, de annál hasznosabbak! Használata kizárólag a fejlécben engedélyezett. Fontosabb elemei:
- Description: pár szavas leírás - őszintén!
- Keywords: A lapra jellemző kulcsszavak a keresőrobotoknak.
- Generator: Milyen programmal lett a lap elkészítve. (Pl. Jegyzettömb)
- Author: A szerző neve, esetleg E-mail címe!
- Robots: Parancsok a keresőrobotok számára. Lehetséges értékek: "index/noindex" indexelhető vagy nem; "follow/nofollow" követhetők a hivatkozások vagy nem. Mivel úgyis mindkettőt használni kell, ezért célszerű helyettük írni a "deny" szót (tilos mindkettőt), illetve az "all" szót, amely mindkét tevékenységet engedi.
- Expires: Lejárat ideje. Ha pl. csak minden hónap elsején frissíti a lapját, akkor érdemes a mindig következő frissítési dátumot beírni. Így közvetlenül a Proxy-kből is le tud töltődni a lap. Ha mindig a legfrissebb tartalmat akarja láttatni, akkor időpont helyett egyszerűen a "NOW" (=most) szót kell beírnia.
Valamennyi <META name=...> kezdetű tagben használható a lang=”en”, vagy a lang=”hu” paraméter, ami a nyelvet jelöli. Indexelni például nem bűn angolul akkor is, ha a lap kizárólag magyar!
- A HTTP-EQUIV egy már lehetőséget rejt. Ugyanis itt megadhatjuk a böngészőnek, hogy az adott dokumentum mikor veszti érvényét. Így ha a böngésző újabb parancsot kap a dokumentum letöltésére, akkor ha a cache-ben eltárolt határidő előtt van még a weblap, akkor nem bajmolódik a letöltéssel, hanem beolvassa magából a gépből és már készen is van. Célszerű egy weblapnál nem túl távoli időpontot megadni!
- A másik sor (<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8”>) pedig a magyar karakterkészlet használatára készíti elő a gépet.
- Lehetőség nyílik arra is, hogy egy dokumentumot állandóan frissítsünk. A <META HTTP-EQUIV=”refresh” CONTENT=2> használata például 2 másodpercenként frissít egy weblapot! (Tőzsdei árfolyamoknál még jól jöhet.)
- Több értelme lehet egy másik webhely automatikus betöltésének. A <META HTTP-EQUIV=”refresh” CONTENT=”5; URL=http://www.tferi.hu/”> tag például az URL-ben megadott webhelyet hozza be 5 másodperc elteltével!
- Szintén érdemes használni a <META HTTP-EQUIV=”Reply-to” content=”Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.” taget is, ami a lehetséges válaszcímet adja meg.
Egy másik fontos elem a <BODY> és a </BODY> közé ékelt szövegtörzs nyitóeleme. Rengeteg lehetőséget tartalmaz és igen sokféleképpen lehet alkalmazni. Lehetséges paraméterei közül csak a lényegesebbek kerülnek itt felsorolásra:
- BGCOLOR="színkód" - background color; A háttérszín neve vagy kódja.
- ALINK="színkód" - active link; Az éppen aktív link(ek) színkódja vagy neve.
- VLINK="színkód" - visited link; A már meglátogatott linkek színkódja vagy neve.
- LINK= "színkód" - link's color. A még meg nem látogatott linkek színkódja vagy neve.
- TEXT="színkód" - text color; A sima (linkek nélküli) szöveg színkódja vagy neve.
- BACKGROUND="url" - Háttérkép neve (esetleges útvonallal).
- BGPROPERTIES=FIXED - Vízjel megadása. Ez így nem gördíthető!
- TITLE="szöveg" - Ez a szöveg lesz kiírva az egérmutató fölé (mintegy segítségként), ha az ablak fölé ér.
- NOWRAP="TRUE" - Szöveg nem törhető meg automatikusan. Alapértelmezés: NOWRAP="FALSE".
- SCROLL="NO" - Eltünteti az oldalsó görgető csíkot. Alapértelmezés: SCROLL="YES". Lehetséges érték még: "AUTO" (automatikus).
- BOTTOMMARGIN=n - Alsó margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0.
- TOPMARGIN=n - Felső margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 15. Minimum: 0.
- LEFTMARGIN=n - Bal oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0.
- RIGHTMARGIN=n - Jobb oldali margó pixelben. Felülbírálja az alapértelmezést. Csak egész szám lehet. Alapértéke: 10. Minimum: 0.
További elemek is lehetnek a weblap fejlécében:
- <ISINDEX> : Nem tartalmaz semmi szöveget és nincsen záróeleme sem. A böngésző számára jelzi, hogy kereshető (indexelhető) dokumentumról van szó. Javasolt helyette a "robots" META-tag használata.
- <LINK> : Jelzi a dokumentum kapcsolatát más dokumentumokkal, stíluslappal címszalaggal, stb. Kell záróelem. Paraméterei: DISABLED - megtiltja az elem használatát; HREF="url" - élőkapocs létrehozása; MEDIA="SCREEN" vagy MEDIA="PRINT" vagy MEDIA="ALL" - meghatározza a dokumentum kimenetét, lehetőségek: képernyő, nyomtató, minden (alapértelmezés).
23. feladat: Készítsen egy saját önéletrajzát tartalmazó weblapot, melyen jobb felső sarokban szerepel az Ön arcképe (max. 2x3 cm-es méretben). A weblapot tegye kereshetővé!