HTML referencia


HTML (Hypertext Markup Language)

A HTML nyelv célja HTML dokumentumok vagy weblapok leírása. Ennek érdekében a weblapokon megjelenő tartalmat, a HTML dokumentum elemeit (többnyire szövegeket, de az elemek lehetnek képek, vagy más médián keresztül megjelenített információk is) HTML tagok segítségével írjuk le, jelöljük meg (markup). Egyes elemeket közvetlenül megadhatunk egy HTML taggal (pl. képek esetén), más elemek esetén az elem kezdetét és végét jelölhetjük meg egy nyitó és egy záró HTML taggal (pl. szöveges bekezdések esetén). Utóbbi esetben az elem tulajdonságainak megjelölésére rendszerint egyidejűleg több HTML tagot is használunk egymásba ágyazva; ilyenkor az egyidejűleg használt HTML tagok úgy tartalmazzák egymást, mint a matematikában a többszörös zárójelek. A weblap leírásakor használható

a HTML DTD (Document Type Definition) adja meg. A DTD-ben a használható HTML tagokat és ezek attribútumait egyenként definiáljuk, a tagok egymásba ágyazhatóságát pedig tagonként egy (többé-kevésbé) hierarchikus struktúrával, a tag ún. tartalommodelljével írjuk le.



HTML tagok

A HTML tagok a weblapokon megjelenítendő elemek kezdetét és végét kijelölő, illetve a weblapokon megjelenítendő elemeket közvetlenül megadó nyelvi elemek. A nyitó HTML tagok felépítése:

A záró HTML tagok <> jelek között egy / jelet és az adott HTML tag kódját tartalmazzák (pl. </FONT>). Megjegyzés: a záró tagok attribútumokat nem tartalmaznak!

Néhány alapvető szintaktikai szabály:

Például ha a "HTML referencia" tartalmú szövegrészt középre igazított főcímként akarjuk megadni, akkor tudnunk kell, hogy a főcím elemet a H1 kóddal azonosított HTML tag jelöli ki, a középre igazítást pedig az align=center attribútum-érték párral adhatjuk meg. Ezek után a szövegrész <H1 align=center>HTML referencia</H1> módon jelölhető meg HTML nyelven. Hatása:

Ha pedig például egy "lany.jpg" fájlban tárolt képet akarunk a weblapon  megjeleníteni "Catherine" néven, akkor ezt az <IMG SRC="lany.jpg" ALT="Catherine" /> HTML taggal tehetjük meg. Az IMG kóddal megadható HTML tagnak nincs záró tagja, az SRC="fájlnév.kiterjesztés" paraméter-érték párt kötelező, az ALT="képnév" paraméter-érték párt viszont nem kötelező megadnunk (bár érdemes). Hatása:


DOCTYPE

A tag a HTML dokumentum DTD-jét adja meg. "Kiolvasható" belőle a használt HTML nyelv(járás) verziószáma, ill. egyéb információk is. A <!DOCTYPE ...> tag kötelezően a HTML dokumentum első sora kell, hogy legyen. (A DOCTYPE tulajdonképpen nem a HTML nyelvnek, hanem az azt leíró SGML metanyelvnek a része.)

Példák:

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 3.2//en">

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0//en">

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 frameset//en">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


HTML

A tag a HTML dokumentum kezdetét és végét adja meg. Egy kereteket nem tartalmazó HTML dokumentum mindig egy fejrészből és egy törzsrészből épül fel.

Példa: egy kereteket nem, de stíluslapokat már tartalmazó, HTML 4.0 nyelven íródott HTML dokumentum szerkezete a következő:

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<HTML>
<HEAD>
    (fejrész)
<STYLE ...>
    (stílusok megadása)
</STYLE>
</HEAD>
<BODY ...>
    (törzsrész)
</BODY>
</HTML>
Egy kereteket (frame) tartalmazó ún. keretdefiníciós HTML dokumentum szerkezete pedig a következő:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 frameset//en">
<HTML>
<HEAD>
    (fejrész)
</HEAD>
<FRAMESET ...>
    (keretdefiníciós rész)
</FRAMESET>
</HTML>

HEAD

A tag a HTML dokumentum fejrészének kezdetét és végét adja meg.


TITLE

A tag a HTML dokumentum címének kezdetét és végét adja meg a dokumentum fejrészében. A megadott cím a HTML dokumentumot tartalmazó ablak felső sorában fog megjelenni.

Példa:

<TITLE>HTML referencia</TITLE>


META

A tag segítségével a HTML dokumentum meghatározott jellemzőit adhatjuk meg a dokumentum fejrészében. A használható attribútumok:

Példák:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <META HTTP-EQUIV="Expires" CONTENT="Mon, 1 Sep 2003 00:00:00 GMT"> <META NAME="Author" CONTENT="Boda István"> <META NAME="Generator" CONTENT="Mozilla/4.75 [en] (Win95; U) [Netscape]">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <META NAME="Description" CONTENT="A debreceni informatikus könyvtáros képzéshez készült segédanyag."> <META NAME="Classification" CONTENT="markup languages"> <META NAME="KeyWords" LANG="hu" CONTENT="Hypertext Markup Language, HTML">

entitáskódok

A HTML szabványos, platformfüggetlen megoldást ajánl a HTML dokumentumban használt karakterek kódolására. Az ún. entitáskódok két lehetséges formája:

A fontosabb entitáskódok listája megtekinthető itt.


SCRIPT

A SCRIPT tag egy (pl. JavaScript nyelven írt) programrész kezdetét és végét adja meg a HTML dokumentum fejrészében vagy törzsrészében.

Példa:

<TABLE BORDER=2 WIDTH=100%>
<SCRIPT>
var ch,cols,mod1,mod2;
cols=4; /* az oszlopok száma ennek kétszerese lesz */
mod1=32%cols; /* a maradék a sor első oszlopára az oszlopok számával osztva */
mod2=(32+cols-1)%cols; /* a maradék a sor utolsó oszlopára */
document.writeln("<TR>"); /* első sor (fejsor) */
for(ch=1;ch<=cols;ch++) {
    document.writeln("<TH>KÓD</TH>");
    document.writeln("<TH>ENTITÁS</TH>");
    }
document.writeln("</TR>");
for(ch=32;ch<=255;ch++) { /* sorok és cellák kiiratása */
    if(ch%cols==mod1) { /* első sor */
        document.writeln("<TR>");
        }
    document.writeln("<TD>",ch,"</TD>");
    document.writeln("<TD>&#",ch,";</TD>");
    if(ch%cols==mod2) { /* utolsó sor */
        document.writeln("</TR>");
        }
    }
</SCRIPT>
</TABLE>

A példában szereplő script kiírja egy nyolc oszlopos táblázatban az entitáskódokat:

A JavaScript nyelv legfontosabb elemei (további példákkal) megtalálhatóak itt, valamint az A tagnál (3, 4 és 5. példa).


FRAMESET

A FRAMESET tag segítségével kereteket definiálhatunk. A keretek egy ablak egymástól független részei, amelyekbe különböző HTML dokumentumok (vagy képek, "plain" szövegek stb.) tölthetőek be. A FRAMESET tagokba további FRAMESET tagok ágyazhatóak be, így lehetséges pl. egy függőlegesen felosztott ablak egyik keretét vízszintes irányban továbbosztani. A használható attribútumok:

Példák:

<FRAMESET COLS="30%,70%">
    <FRAME SRC="pelda1.html">
    <FRAME SRC="pelda2.html">
</FRAMESET>

hatása, ha a pelda1.html és pelda2.html HTML dokumentumok törzsrésze üres, csak egy (szürke, ill. narancsszínű) háttérszínt állítottunk be bennük, a következő:

<FRAMESET COLS="30%,70%" BORDER=0>
    <FRAME SRC="pelda1.html">
    <FRAMESET ROWS="20%,80%">
        <FRAME SRC="pelda2.html">
        <FRAME SRC="pelda3.html">
    </FRAMESET>
</FRAMESET>

hatása pedig, ha a pelda3.html HTML dokumentum törzsrésze szintén üres, csak egy (sötétzöld) háttérszínt állítottunk be benne, a következő:


FRAME

A FRAME tag segítségével egy HTML dokumentumot (vagy képet, stb.) tölthetünk be egy keretbe. A használható attribútumok:


BODY

A tag a HTML dokumentum törzsrészének kezdetét és végét, valamint a törzsrész tulajdonságait adja meg. A HTML dokumentum törzsrésze tartalmazza a dokumentumban megjelenítendő elemeket. A használható attribútumok:

1. példa:

<BODY BGCOLOR=orange>

2. példa:

<BODY TEXT="#000000" BGCOLOR="#C0C0C0" LINK="#0000EE" VLINK="#551A8B" ALINK="#FFFF00">

3. példa:

<BODY BGCOLOR=silver BACKGROUND="virag.jpg">

4. példa:

<BODY STYLE="color: rgb(40%,30%,10%);
                              background-color: silver;
                              background-image: url(Altdorfer.jpg);
                              background-repeat: no-repeat;
                              background-attachment: scroll;
                              background-position: -10% 50%">

5. példa:

<BODY STYLE="color: pink; background: green url(Altdorfer.jpg) repeat-y">
    <P>
        <FONT STYLE="font-weight: bold; font-style: italic; font-size: 3em">SUSANNA</FONT>
    </P>
</BODY>

6. példa: átlátszó hátterű kép beillesztése háttérképként
a háttérkép kicsinyítve (violin.gif): 

<BODY STYLE="color: white; background: green url(violin.gif) repeat-y">
<P>
<FONT STYLE="font-weight: bold; font-style: italic; font-size: 3em">H&Auml;NDEL</FONT>
</P>
</BODY>


additív színkeverés

Az additív színkeverés során legelterjedtebb RGB színmodellben három alapszín különböző intenzitású összekeverésével tudunk különböző színeket előállítani. A HTML-ben az alapszínek relatív intenzitását egy 256 értékből álló skálán tudjuk megadni (a {0, 1, ... , 255} decimális értékek, vagy a {00, 01, ..., 09, 0A, 0B, ..., 0E, 10, 11, ..., FF} hexadecimális értékek valamelyikével), a CSS-ben viszont lehetőségünk van az egyes alapszínek relatív intenzitását százalékosan is megadni. Például, ha a HTML dokumentum háttérszínét aranyszínűre akarjuk beállítani, ez háromféleképpen is lehetséges:

<BODY BGCOLOR=gold>
<BODY BGCOLOR="#FFD700">
<BODY STYLE="background: rgb(100%,84%,0)">

mivel aranyszín (gold) esetén a szabvány szerint az alapszínek relatív intenzitását a következőképpen kell beállítani:

FF16 = 25510 = 100% a vörös alapszín (red) relatív intenzitása,
D716 = 21510 = 84% a zöld alapszín (green) relatív intenzitása,
0016 = 0010 = 0% a kék alapszín (blue) relatív intenzitása.

(Pl. 21510 a Windows számológépe segítségével "tudományos" nézetben könnyen átváltható hexadecimális számrendszerbe:

=> 

módon.)

Eredményül a következőt kapjuk:


H1, H2, ..., H6

A tagok a HTML dokumentum főcímének, ill. alcímeinek a kezdetét és végét jelölik. Bekezdésszintű formázást adnak meg. A használható attribútumok:

A blokkszintű elemek formátumának megadásakor a W3C ajánlásában (W3C Recommendation) használt terminológia:
 

(forrás: Cascading Style Sheets, level 1; 4.1 Box-level elements)

(forrás: Cascading Style Sheets, level 1; 4 Formatting model)

1. példa

<H1 ALIGN=center>Főcím</H1>

2. példa

<H2 STYLE="background: cyan">Alcím</H2>

3. példa: hierarchikus címstruktúra kialakítása

<H1 STYLE="color: red">HTML REFERENCIA</H1>
    <H2 STYLE="color: green; margin-left: 0.75cm">1. Alapok</H2>
        <H3 STYLE="color: blue; margin-left: 1.5cm">1.1 A HTML fogalma</H3>
        <H3 STYLE="color: blue; margin-left: 1.5cm">1.2 A CSS fogalma</H3>
    <H2 STYLE="color: green; margin-left: 0.75cm">2. A nyelv elemei</H2>
        <H3 STYLE="color: blue; margin-left: 1.5cm">2.1 Struktúraelemek</H3>
        <H3 STYLE="color: blue; margin-left: 1.5cm">2.2 Bekezdésszintű formázás</H3>

4. példa: "kipárnázott", bekeretezett, és függőlegesen elhelyezett főcím

<H1 ALIGN=center STYLE="color: orange; background: black; border: medium double orange; line-height: 3em; padding: 1em">Főcím</H1>

5. példa: függőlegesen igazított karakterek
 
forráskód
megjelenített kód


P

A P tag egy bekezdés kezdetét és végét adja meg. Bekezdésszintű formázást valósít meg. A bekezdések között egy sorköznyi távolságot hagy ki. A használható attribútumok:

1. példa

<P ALIGN=center>Ez egy bekezdés ... </P>

2. példa

<P STYLE="background: red; border: thin double yellow">ez egy bekeretezett bekezdés</P>


DIV

A DIV tag egy bekezdés ("szekció") kezdetét és végét adja meg. A DIV tagot a SPAN taggal, valamint az ID és CLASS attribútumokkal együtt használva meghatározott adatszerkezeteket alakíthatunk ki. Bekezdésszintű formázást valósít meg. A bekezdések között nem hagy távolságot, ezért ha pl. egy képet, táblázatot vagy az ADDRESS taggal jelölt címinformációkat középre akarjuk igazítani, ezt a tagot célszerű alkalmaznunk. A használható attribútumok:

1. példa:

<DIV ALIGN=center>Ez egy bekezdés ... </DIV>

2. példa:

<DIV STYLE="background: red; border: thin solid cyan">ez egy bekeretezett bekezdés</DIV>

3. példa: iniciálé készítése háttérképpel
a használt háttérkép (kis_lany.jpg) 72 képpont vagy pixel élhosszúságú négyzet: 

<DIV STYLE="background: url(kis_lany.jpg); height: 72px; width: 72px; float: left">
<FONT STYLE="font-size: 65px; font-weight: bold; font-style: italic; color: red">C</FONT></DIV>
<DIV STYLE="line-height: 65px"><B><I>atherine</I> Oscar-díjas!</B></DIV>
<DIV STYLE="clear: left">
<B>A szinésznő az Oscar-díjat <I>2003</I>-ban kapta.</B>
</DIV>

4. példa: bibliográfia készítése

Legyen a pelda.html dokumentum tartalma a következő:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="Boda István">
   <title>DIV - SPAN</title>
<style>
DIV {margin: 1em}
DIV.konyv {background: beige}
DIV.cikk {background: pink}
</style>
</head>
<BODY>
<H1>Bibliográfia</H1>

<DIV id=1 class=konyv>
<SPAN class=cim>A világháló lehetőségei. Interaktív Weblapok készítése.</SPAN>
/
<SPAN class=szerzo>Bócz Péter, Szász Péter</SPAN>.<BR>
<SPAN class=kiado>ComputerBooks</SPAN>:
<SPAN class=kiad_hely>Budapest</SPAN>,
<SPAN class=kiad_ev>1998</SPAN>.
</DIV>

<DIV id=2 class=cikk>
<SPAN class=cim>PERL programozás. Ami a weblap mögött van.</SPAN>
/
<SPAN class=szerzo>Pál Zsolt</SPAN>.<BR>
In:
<SPAN class=folyoirat>CHIP</SPAN>
<SPAN class=ev>2003</SPAN>/<SPAN class=szam>3</SPAN>,
<SPAN class=oldal>133-135</SPAN>.
</DIV>

</BODY>
</html>

Figyeljük meg, hogy

A pelda.html dokumentum képe a következő lesz:


CENTER

A CENTER tag hatása megegyezik a DIV tag hatásával ALIGN=center paraméterezés mellett. Javasolt a DIV tag használata.


PRE

A PRE tag egy előre formázott bekezdés kezdetét és végét adja meg. Bekezdésszintű formázást valósít meg. A PRE tag hatására a megjelenítőprogram rögzített szélességű karaktereket használ és megjeleníti a bekezdésben szereplő szóközök és sorvége jelek mindegyikét. A használható attribútumok:


ADDRESS

Az ADDRESS tag egy címinformációkat tartalmazó bekezdés kezdetét és végét adja meg. Bekezdésszintű formázást valósít meg. A bekezdés karaktereit rendszerint dőlt betűstílusban jeleníti meg. A használható attribútumok:


BLOCKQUOTE

A BLOCKQUOTE tag egy idézetet tartalmazó bekezdés kezdetét és végét adja meg. Bekezdésszintű formázást valósít meg. Az idézet bal- és jobboldali margóját egy megadott értékkel behúzza, és az idézetek között egy meghatározott térközt hagy ki. A használható attribútumok:


UL

Az UL tag felsorolásoknak vagy listáknak a kezdetét és végét adja meg. A listaelemek vagy bejegyzések jelölője különböző alakú lehet (diszkosz, kör vagy négyzet). Az UL tag bekezdésszintű formázást valósít meg, de ellentétben a többi bekezdésszintű elemmel (P, DIV, stb.) a felsorolások egymásba is ágyazhatóak, azaz egy újabb UL tag nem zárja le automatikusan a korábban kezdett felsorolást. Az UL tag a baloldali margót adott értékkel megnöveli, vagyis a megadott listaelemek beljebb fognak kezdődni, és a felsorolás előtt és után meghatározott térközt hagy ki. A használható attribútumok:

Példa: kék színű jelölő beállítása

Tartalmazza a pelda.html dokumentum törzsrésze az alábbi HTML kódot:

<P STYLE="border: thin double blue">
Zsebtévé
</P>
<UL STYLE="color: blue; background: beige">
<LI><FONT COLOR=red>Tercsi</FONT></LI>
<LI><FONT COLOR=red>Fercsi</FONT></LI>
<LI><FONT COLOR=red>Kata</FONT></LI>
<LI><FONT COLOR=red>Klára</FONT></LI>
</UL>

Ekkor a következő képernyőképet kapjuk: 


OL

Az OL tag felsorolásoknak vagy listáknak a kezdetét és végét adja meg. A listaelemek vagy bejegyzések sorszámozottak, jelölőjük különböző betű-, ill. számformájú lehet. Az OL tag bekezdésszintű formázást valósít meg, de ellentétben a többi bekezdésszintű elemmel (P, DIV, stb.) a felsorolások egymásba is ágyazhatóak, azaz egy újabb OL tag nem zárja le automatikusan a korábban kezdett felsorolást. Az OL tag a baloldali margót adott értékkel megnöveli, vagyis a megadott listaelemek beljebb fognak kezdődni, és a felsorolás előtt és után meghatározott térközt hagy ki. A használható attribútumok:


LI

A LI tag egy listaelem kezdetét és végét adja meg. Bekezdésszintű formázást valósít meg. A LI tagot az UL vagy OL tagokkal jelölt felsorolásokon belül használhatjuk. A LI taggal jelölt listaelemek előtt egy jelölő (UL esetén szimbólum, OL esetén sorszám) jelenik meg. A használható attribútumok:


TABLE

A TABLE taggal táblázatok kezdetét és végét adhatjuk meg. A TABLE tag bekezdésszintű formázást valósít meg, de ellentétben a többi bekezdésszintű elemmel (P, DIV, stb.) a táblázatok egymásba is ágyazhatóak, azaz egy újabb TABLE tag egy táblázat cellájában megadva nem zárja le automatikusan a korábban kezdett táblázatot. A használható legfontosabb attribútumok:


CAPTION

A CAPTION tag egy táblázat feliratának kezdetét, ill. végét adja meg. A felirat középre igazítva jelenik meg a táblázathoz viszonyítva. A CAPTION tag egy táblázaton belül használható. A használható attribútumok:


TR

A TR tag egy táblázat egy sorának kezdetét, ill. végét adja meg. A TR tag egy táblázaton belül használható. A használható attribútumok:


TH, TD

A TH vagy a TD tag egy táblázat egy cellájának a kezdetét, ill. végét adja meg. A tagok egy TR tagon belül használhatóak. A különbség közöttük az, hogy a TH tag az első sor ( fejsor), ill. az első oszlop celláinak megadásakor használatos, a TD pedig bármilyen (adat)cellára. A TH tag a cella adattartalmát középre igazítja és félkövér betűstílusban jeleníti meg, míg a TD tag a cella tartalmát balra igazítja és normál karakterstílusban jeleníti meg. A használható attribútumok:

Példa: cellák összevonása és üres cella a táblázatban

Legyenek a pelda4.html dokumentum törzsrészében a következő tagok:

<TABLE BORDER=2 BORDERCOLOR=red WIDTH="100%">
<TR>
    <TD COLSPAN=2 ALIGN=center>1.1 és 1.2 cellák</TD>
    <TD>1.3 cella</TD>
    </TR>
<TR>
    <TD ROWSPAN=2 ALIGN=center>2.1 és 2.2<BR> cellák</TD>
    <TD>2.2 cella</TD>
    <TD>2.3 cella</TD>
    </TR>
<TR>
    <TD>3.2 cella</TD>
    <TD></TD>
    </TR>
</TABLE>

Ekkor a következő képet kapjuk:


FONT

A FONT taggal a megjelölt elemben szereplő karakterek jellemzőit tudjuk beállítani. Karakterszintű formázást valósít meg. A használható attribútumok:


SPAN

A SPAN tag egy meghatározott tartalmú szöveg kezdetét és végét adja meg. Karakterszintű formázást valósít meg. (Rendszerint a DIV taggal együtt használjuk.) A használható attribútumok:


B

A B tag egy félkövér (bold) betűstílusban megjelenített karaktersorozat kezdetét és végét adja meg. Karakterszintű formázást valósít meg. A használható attribútumok:


I

Az I tag egy dőlt (italic) betűstílusban megjelenített karaktersorozat kezdetét és végét adja meg. Karakterszintű formázást valósít meg. A használható attribútumok:


U

Az U tag egy aláhúzott betűstílusban megjelenített karaktersorozat kezdetét és végét adja meg. Karakterszintű formázást valósít meg. A használható attribútumok:


S vagy STRIKE

Az S vagy STRIKE tag egy áthúzott betűstílusban megjelenített karaktersorozat kezdetét és végét adja meg. Karakterszintű formázást valósít meg. A használható attribútumokat ld. pl. a FONT tagnál


BLINK

A BLINK tag egy villogó betűstílusban megjelenített karaktersorozat kezdetét és végét adja meg. Karakterszintű formázást valósít meg. (Nem szabványos tag, csak Netscape megjelenítőprogram esetén használatos.) A használható attribútumok:


SUB

A SUB tag egy alsó indexként megjelenített karaktersorozat kezdetét és végét adja meg. Karakterszintű formázást valósít meg. A használható attribútumok:


SUP

A SUP tag egy felső indexként megjelenített karaktersorozat kezdetét és végét adja meg. Karakterszintű formázást valósít meg. A használható attribútumok:


TT

A TT tag egy rögzített szélességű betűtípussal megjelenített karaktersorozat kezdetét és végét adja meg. Karakterszintű formázást valósít meg. A használható attribútumok:


BIG

A BIG tag nagy méretű karaktersorozatok kezdetét, ill. végét jelöli meg. Karakterszintű formázást valósít meg. A használható attribútumok:


SMALL

A SMALL tag kis méretű karaktersorozatok kezdetét, ill. végét jelöli meg. Karakterszintű formázást valósít meg. A használható attribútumok:


A

Az A tag kettős funkcióval rendelkezik:

A használható attribútumok: 1. példa: hipertext hivatkozások egy másik keretre

Legyenek egy pelda.html keretdefináló dokumentumban az alábbi HTML tagok:

<FRAMESET COLS="30%,70%">
    <FRAME SRC="pelda1.html" NAME="bal">
    <FRAME SRC="pelda2.html" NAME="jobb">
</FRAMESET>

A pelda1.html dokumentum törzsrésze legyen az alábbi:

<BODY BGCOLOR=green TEXT=white LINK=pink ALINK=yellow VLINK=pink>
<H2>KÉPEK</H2>
<UL>
<LI><A HREF="Batoni.jpg" TARGET="jobb">BATONI - Susanna</A></LI>
<LI><A HREF="Veronese.jpg" TARGET="jobb">VERONESE - Susanna</A></LI>
</UL>
<HR>
<DIV ALIGN=right>
<A HREF="pelda2.html" TARGET="jobb">Vissza</A>
</DIV>
</BODY>

A pelda2.html dokumentum törzsrésze pedig legyen az alábbi:

<BODY BACKGROUND="Altdorfer.jpg">
</BODY>

Ekkor a pelda.html behívása a következőt eredményezi:

A baloldali keretben aktivizálva az első linket, a következőt kapjuk:

A második linket aktivizálva pedig a következőt kapjuk:

2. példa: hivatkozások címkékre

Tartalmazza a pelda1.html dokuementum a következő tagokat a törzsrészében:

<H1>Hipertext hivatkozások címkék megadásával</H1>
<UL>
<LI><A HREF="pelda2.html#1">Első bekezdés</A></LI>
<LI><A HREF="pelda2.html#2">Második bekezdés</A></LI>
<LI><A HREF="pelda2.html#3">Harmadik bekezdés</A></LI>
<LI><A HREF="pelda2.html#4">Negyedik bekezdés</A></LI>
</UL>

Tartalmazza továbbá a pelda2.html dokuementum a következő tagokat és címkéket a törzsrészében:

<H1>Bekezdések</H1>
<A NAME="1">
    <HR>
    <H3>1. bekezdés</H3>
<A NAME="2">
    <HR>
    <H3>2. bekezdés</H3>
<A NAME="3">
    <HR>
    <H3>3. bekezdés</H3>
<A NAME="4">
    <HR>
    <H3>4. bekezdés</H3>
<HR>
(stb.)

Ekkor a pelda1.html dokumentum képe a következő lesz:

Ekkor ha pl. a "Harmadik bekezdés" szöveghez rendelt hipertext hivatkozást aktivizáljuk, a pelda2.html dokumentum 3. bekezdése fog megjelenni:

3. példa: írás a státuszsorba

A következő tag megjelenít a böngésző státuszsorában egy üzenetet, ha az egér a hivatkozás felé kerül:

<A HREF="pelda1.html" onMouseOver="window.status='Ugrás a pelda1.html dokumentumra.'; return true">
Egy másik példa</A>

Hatása:

4. példa: képek cseréje

Legyen a pelda.html dokumentum tartalma a következő:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="Boda István">
   <title>Változó képek</title>
<SCRIPT>
function cserel(mit,mire) {
 document[mit].src=mire;
 }
</SCRIPT>
</head>
<BODY>
<A HREF="pelda1.html"
    onMouseOver="cserel('x','kep1.jpg')"
    onMouseOut="cserel('x','kep.jpg')">
<IMG SRC="kep.jpg" NAME=x>
</A>
</BODY>
</html>

Ekkor a hipertext hivatkozást reprezentáló kép felé mozgatva a kurzort a kép megváltozik:

==> 

Ha viszont a kurzor már nincs a kép felett, az eredeti kép visszaáll.

A képcserére egy másik példa:
 

forráskód

megjelenített kód
(az egér nincs a kép felett)

megjelenített kód
(az egér a kép felett áll)

A használt forráskód (bemásolható!):

<SPAN onMouseOver="document.getElementById('kep').src='smiley2.jpg'"
       onMouseOut="document.getElementById('kep').src='smiley1.jpg'">
<IMG SRC="smiley1.jpg" ID="kep">
</SPAN>

5. példa: feliratok cseréje

Készítsünk el először egy olyan képet, amely egy egyszínű háttéren valamilyen feliratot tartalmaz. (Például IrfanView-t használva egy kijelölt téglalapba az Edit menü Add text menüpontjával írhatunk be tetszőleges szöveget.) Mentsük ki a feliratot tartalmazó képet gif formátumban, nyissuk meg újra, és mentsük ki újra, de kétféleképpen: átlátszó és nem átlátszó háttér beállításával, pl. text1.gif és text3.gif néven. (A háttér indexét IrfanView használata esetén az Image menü Palette menüpontjában, az Edit Palette menüpontban nézhetjük meg.) Ezután változtassuk meg a felirat színét (IrfanView használata esetén ezt az Image menü Palette menüpontjában, az Edit Palette menüpontban tehetjük meg), és ismét mentsük a kapott képet kétféleképpen: átlátszó és nem átlátszó háttér beállításával, pl. text2.gif és text4.gif néven. Eredményül például a következő képeket kaphatjuk:

text1.gif (átlátszó háttérrel): 

text2.gif (átlátszó háttérrel): 

text3.gif (nem átlátszó háttérrel): 

text4.gif (nem átlátszó háttérrel): 

Legyen ezek után a pelda.html dokumentum tartalma a következő:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="Boda István">
   <title>Változó feliratok</title>
<SCRIPT>
function cserel(mit,mire) {
 document[mit].src=mire;
 }
</SCRIPT>
</head>
<BODY>
<A HREF="pelda1.html" onMouseOver="cserel('x','text2.gif')"
onMouseOut="cserel('x','text1.gif')">
<IMG SRC="text1.gif" BORDER=0 NAME=x>
</A>
<BR>
<A HREF="pelda2.html" onMouseOver="cserel('y','text4.gif')"
onMouseOut="cserel('y','text3.gif')">
<IMG SRC="text3.gif" BORDER=0 NAME=y>
</A>
</BODY>
</html>

Figyeljük meg, hogy azoknál a képeknél, amelyekhez hipertext hivatkozásokat rendeltünk, a BORDER=0 attribútum-beállítással kikapcsoltuk a képek keretének megjelenítését (enélkül a keret megjelenne, hogy a megjelenítő ezáltal is jelezze, hogy a képhez hipertext hivatkozás van hozzárendelve).

Ekkor az első hipertext hivatkozást reprezentáló kép felé mozgatva a kurzort a felirat színe megváltozik:

==>

Hasonlóan megváltozik a felirat színe, ha a második hipertext hivatkozást reprezentáló kép felé mozgatjuk a kurzort:

==>

Mindkét esetben, ha a kurzor már nincs a kép felett, az eredeti feliratszín visszaáll.


BR

A BR tag egy soremelést ad meg. A HTML-ben csak így tudunk egy sortörést kikényszeríteni egy bekezdésen belül (a PRE tag az egyetlen kivétel). A használható attribútumok:

Példa: Word-ben írt szöveg átalakítása HTML formára

Legyen a Word-ben írt szöveg a következő:

Egészítsük ki a szöveget a minimálisan szükséges HTML, HEAD, TITLE és BODY tagokkal. Ekkor a következőt kapjuk:

Először mentsük el a dokumentumot proba.doc néven, majd mentsük el proba.txt néven szövegként is (Fájl.Mentés másként, majd a fájl típusát szöveges dokumentumra állítva). Ezután zárjuk be a Word-öt és nevezzük át a proba.txt fájlt proba.html néven. A böngészőbe betöltve a proba.html dokumentumot a következőt kapjuk:

Vagyis a sortörések helyett a böngésző csak egy szöközt jelenít meg. Éppen ezért hívjuk be a Word-öt és nyissuk meg újra az elmentett proba.doc fájlt. A Szerkesztés.Csere menüpont ablakába írjuk be a következőket:

Ezután kattintsunk a Mindet gombra. A következőt kapjuk:

Töröljük ki a felesleges <P> tagokat (a HTML, HEAD, BODY tagok és zárótagjaik elől). Ekkor a következőt kapjuk:

Ezután ismét hajtsuk végre a korábbi mentéseket és átnevezést. Végül a kapott proba.html dokumentumot megjelenítve a következőt kapjuk:

Ez már "igazi" HTML dokumentum, ami tetszés szerint alakítható.


HR

A HR tag egy vízszintes vonalat ad meg. A használható attribútumok:


IMG

Az IMG tag egy képet ad meg. Karakterszintű elem, a megadott kép egy karakterként viselkedik. A használható attribútumok:

1. példa: kép keretszínének megadása

Tartalmazza a pelda3.html dokumentum törzsrésze a következő tagokat:

<CENTER>
<IMG SRC="Veronese.jpg" HEIGHT=90% BORDER=10 STYLE="color: red">
</CENTER>

Ennek hatása a következő lesz:

2. példa: írás egy jobbra igazított kép mellé

Tartalmazza a pelda.html dokumentum törzsrésze a következő tagokat:

<H1>VERONESE, Paolo - Susanna</H1>
<P>
<IMG SRC="Veronese.jpg" WIDTH=35% ALIGN=right>
<B>A kép néhány jellemzője:</B>
<UL>
<LI>A háttér színtelen</LI>
<LI>A főalakok esetén a vörös szín dominál</LI>
<LI>...</LI>
</UL>
</P>
<HR STYLE="clear: right">
<DIV ALIGN=right>
<A HREF="pelda1.html"><I><FONT COLOR=red>További képek...</FONT></I></A>
</DIV>

Ennek hatása:

3. példa: jobbra és balra igazított képek

Tartalmazza a pelda.html dokumentum törzsrésze a következő tagokat:

<H1 ALIGN=center>Zsuzsanna a fürdőben</H1>
<FONT COLOR=red><B>
<IMG SRC="Batoni_200.jpg" ALIGN=left BORDER=5>
<IMG SRC="Veronese_200.jpg" ALIGN=right BORDER=5>
<DIV ALIGN=left><== Batoni</DIV>
<DIV ALIGN=right>Veronese ==></DIV>
<BR CLEAR=all>
</B></FONT>
<HR>

Ennek hatása a következő lesz:

Boda István, 2008. augusztus 21.