Nyomtatás

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é!


Folytatása következik!