Leírónyelvek: HTML és XHTML
Főbb témakörök A HTML nyelv fejlődése, lehetőségei és céljai. Az XHTML nyelv. XHTML dokumentumok szerkezete, címkék és szerepük a dokumentum szerkezetének leírásában, a szöveges információ formázásában.
HTML fejlődése ős: SGML (Standard Generalized Markup Language) – 1986 precízen leírta a tartalmat hangsúly nem a formázáson volt HTML 1.0 Tim Berners-Lee – 1989 első böngésző - Mosaic 1993 HTML 2.0 Internet Engineering Task Force - 1996 már nem csak a tartalomra koncentrál HTML 3.2 W3C javaslat – 1997 január Netscape elemek: fontok, táblázatok, appletek, stb.
HTML fejlődése HTML 4.0 W3C javaslat – 1997 dec., 1998 ápr. stíluslapok HTML 4.01 apróbb javítások – 1999 továbbfejlesztés XHTML 1.0 W3C javaslat – 2000 január HTML 5.0 kidolgozás alatt XHTML 2.0 kidolgozás alatt
HTML nyelv HyperText Markup Language – Hypertext Jelölő Nyelv célja: dokumentumok számára standard kód segítségével formázott megjelenítést biztosítani alapeleme a címke (tag) pl. <html> nyitó- és záró címke pl. <html> … </html> csak nyitó címke pl. <br>, <hr> nyitó címke belsejében attribútumok pl. <a href="http://www.gdf.hu"> a böngészők intelligens módon értelmezik félreértések elkerülésére: XHTML
XHTML Extensible HyperText Markup Language a HTML szigorúbb és tisztább változata a HTML elemeket leírása XML segítségével minden címkének van záró eleme egysoros címkénél a lezárást jelezzük pl. <br /> minden címkenév kisbetűvel írandó minden eleme azonosítható a Document Object Model segítségével, az objektumok módosíthatók
HTML (XHTML) dokumentum alapszerkezete <head> <title>címsor szövege</title> </head> <body> a dokumentum törzs </body> </html>
Első weblap Használjuk a Notepad2 editort <HTML> <HEAD> <TITLE>Első weblap fejléce</TITLE> </HEAD> <BODY> Elkészült az első weblapom. </BODY> </HTML>
Első weblap
<HTML></HTML> A dokumentum kezdetét és végét jelöli.
<HEAD></HEAD> a HTML dokumentum leírására szolgál nincs attribútuma további elemek tárolója <title> a címsorban megjelenő szöveg <base> a dokumentum alapértelmezett helye <link> kapcsolat más dokumentumokkal <meta> információ a dokumentumról kulcsszavak leírás stb. <script> JavaScript vagy VBScript kód helye <style> beágyazott stíluslap
<head> elem - példa <title>A webprogramozás alapjai</title> <base href="http://www.gdf.hu" /> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="webszerkesztés, XHTML, oktatás" /> <script language="JavaScript1.2"> function ujablak(file, nev, parameterek) { window.open('file', 'nev', 'parameterek'); } </script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt </style> </head>
<body> elem eredetileg a dokumentum törzsének határolója kiterjesztették a dokumentum háttér és a szövegszíneinek beállítására háttérszín: <body bgcolor="color"> szövegszín: <body text ="color"> hyperlinkek színe: <body link ="color"> meglátogatott link: <body vlink ="color"> aktív linkek színe: <body alink ="color"> oldal betöltéséhez, mint eseményhez kapcsolható események is itt helyezhetők el
Feladat Módosítsuk az előző lapot úgy, hogy a háttér piros, a szövegszín fehér legyen! <BODY BGCOLOR="red" TEXT="white">
Szövegtagoló elemek <p></p> - paragrafus (bekezdés) előtte és utána nagyobb hely align attributumában igazítás (left, right, center) új sor <div></div> - több bekezdést magába foglaló egység nincs sortávolság növekedés <span></span> - bekezdésnél kisebb egység erre alkalmazható speciális formázás <blockquote></blockquote> - blokkidézetek behúzás a kijelölt részre <pre></pre> - eredeti formázás megőrzése <code></code> - programkód megjelenítése <br /> - sortörés <hr /> - vízszintes vonal
Feladat Módosítsuk az előző dokumentumot!
<BODY BGCOLOR="red" TEXT="white"> <P>Elkészült az első weblapom.</P> <P ALIGN="center">A második bekezdés középre igazított.</P> <P ALIGN="right">A harmadik jobbra igazított.<P> </BODY>
Feladat Módosítsuk az előbbi dokumentumot!
<P ALIGN="right">A harmadik jobbra igazított.<BR> Ez nem új bekezdés, csak új sor<BR> Ez az utolsó sor.</P>
Feladat Módosítsuk az előbbi dokumentumot!
<P ALIGN="center">A második bekezdés középre igazított <P ALIGN="center">A második bekezdés középre igazított.</P> <HR> <P ALIGN="right">A harmadik jobbra igazított.<BR> Ez nem új bekezdés, csak új sor<BR> Ez az utolsó sor.</P>
Szövegformázó elemek <font></font> - szöveg típusának, színének, nagyságának beállítása <hn></hn> n = 1..6 - címsorok félkövér előtte és után üres sor <b></b> - félkövér betű <i></i> - dőlt betű <sup></sup> - felső index <sub></sub> - alsó index <big></big> - a környezeténél nagyobb betű <small></small> - a környezeténél kisebb betű <strong></strong> - erősen hangsúlyozott (félkövér)
Feladat Módosítsuk a dokumentumot!
<P ALIGN="center"> <FONT SIZE="6" COLOR="blue">A második bekezdés középre igazított, 6-os méretű.</FONT> </P>
Feladat Módosítsuk a dokumentumot!
<BODY BGCOLOR="red" TEXT="white"> <H2>A Weblap címe 2-es szintű</H2> <P>Elkészült az első weblapom.</P>
Feladat Módosítsuk a dokumentumot!
<P ALIGN="center"> <FONT SIZE="6" COLOR="blue">A <B>második</B> bekezdés <I>középre</I> igazított, 6-os méretű.</FONT> </P>
Feladat Módosítsuk a dokumentumot!
a<SUP>2</SUP>+b<SUP>2</SUP>=c<SUP>2</SUP><BR> 2H<SUB>2</SUB>+O<SUB>2</SUB>=2H<SUB>2</SUB>O
Kép elem - <img> <img src="kep.xxx" alt="szoveg" width="800" height="600"> src – forrás fájl (gif, jpg, png, stb.) alt – kép rövid leírása width – kép szélessége height – kép magassága
Feladat A Paint programmal készítsünk rajzot! Mentsük jpg formátumba! Jelenítsük meg a weblapunkon a vízszintes vonal fölött!
<IMG SRC="rajz.jpg"> <HR>
Kép részekre bontása - <map> adott kép darabokra bontható a darabokhoz linkek kapcsolhatók <img> tag-ben usemap attribútum <img src= … usemap="#navkep" /> <map id="navkep" name="navkep"> <area shape= "rect" coords= : két sarok "circle" coords= : középpont, sugár "poly" coords= : összes csúcspont
Táblázat deklarálása <table align background bgcolor border cellpadding távolság a cella határ és a tartalom között cellspacing távolság a cellák között height width >
Táblázat cím és adatsorai címsor, címsor cellái <thead> <tr> <th>cím cella1</th> <th>cím cella2</th> </tr> </thead> adatsorok, adatcellák <tbody> <td>adat cella1</td> <td>adat cella2</td> </tbody>
Feladat Egészítsük ki a weblapot a következő táblázattal!
<TABLE ALIGN="center" BGCOLOR="black" BORDER="2" CELLPADDING="2" CELLSPACING="3" WIDTH="500"> <THEAD> <TR> <TH>Ország</TH> <TH>Főváros</TH> <TH>Nyelv</TH> </TR> </THEAD> <TBODY> <TD>Magyarország</TD> <TD>Budapest</TD> <TD>magyar</TD> <TD>Németország</TD> <TD>Berlin</TD> <TD>német</TD> <TD>Lengyelország</TD> <TD>Varsó</TD> <TD>lengyel</TD> </TBODY> </TABLE>
Felsorolás - <li></li> Egyszerű felsorolás Pontozott (rendezetlen) lista <ul type=""> <li>…</il> </ul> Számozott (rendezett) lista <ol type=""> </ol>
Feladat Készítsük el a következő új weblapot!
<HTML> <HEAD> <TITLE>A második weblap fejléce</TITLE> </HEAD> <BODY BGCOLOR="yellow"> Számozatlan lista <UL> <LI>Első elem <LI>Második elem <LI>Harmadik elem </UL> Számozott lista <OL> </OL> </BODY> </HTML>
Színek a weboldalon betűszín (text), háttérszín (bgcolor) linkek színei normál (link) megtekintett (vlink) aktív (alink) egész dokumentumra, valamely elemre (pl. táblázat, vagy annak egy cellája) megadása angol néven (pl. red, yellow) hexadecimális kóddal (pl. "#FF0000", "#FFFF00") Rgb kóddal (pl. rgb(255,0,0), rgb(255,255,0))
Keretek – frame csak az oldal változó részét kell frissíteni nehezen követhetők a linkek <body> elem helyett <frameset> <frameset cols = "25%, 25%, *"> <frame src="bal.htm" name=”bal”/> <frame src="kozep.htm" name=”kozep”/> <frameset rows = „50%, *"> <frame src="jobb_f.htm" name=”jobb_f”/> <frame src="jobb_a.htm" name=”jobb_a”/> </frameset>
Feladat Az előző két weblapból alakítsuk ki a következő keretes elrendezést!
<HTML> <HEAD> <TITLE>Kezdőlap</TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="masodik.html" NAME="baloldali"> <FRAME SRC="elso.html" NAME="jobboldali"> </FRAMESET> </HTML>
Keretek – noframes, iframe <noframes></noframes> arra az esetre ha a böngésző nem tudná a kereteket kezelni <iframe> - inline frame ablak az ablakon belül forrásfájl, méretek megadásával <iframe src="iframe.htm" width="200" height="100">
Feladat Készítsük el a következő elrendezést!
Speciális karakterek & és ; jelek közé írva <: < >: > non-breaking space: copyright: © magyar ékezetes betűk:
HTML szerkesztők egyszerű szövegszerkesztők jegyzettömb dedikált szerkesztőprogramok HomeSite DreamWeaver FirstPage FrontPage
Adatok összekapcsolása - hyperlinkkel dokumentumon belül <a href="#bevezetes">Bevezetés</a> <a name="bevezetes"></a>Bevezetés</a> dokumentumok között <a href="./leiras.htm">Leírás</a> világhálón <a href="http://www.gdf.hu/leiras.htm"> Leírás </a>
Feladat A számozatlan lista első elemét alakítsuk olyan linkké, amely megnyitja az első weblapot! A második elemet alakítsuk olyan linkké, amely megnyitja az iskola honlapját!
<UL> <LI><A HREF="elso.html">Első elem</A> <LI><A HREF= "http://szerver2.lacszki.sulinet.hu">Második elem</A> <LI>Harmadik elem </UL>
1. gyakorlat
<HTML> <HEAD> <TITLE>Feladat 1-1</TITLE> </HEAD> <BODY> Miért kezdődik minden könyv első mintaprogramja azzal, hogy "Helló világ?!" </BODY> </HTML>
2. gyakorlat
Ez a szöveg <B>vastagon jelenik meg</B>. Ez pedig <I>megdöntve</I>. Ez egy <U>aláhúzott szöveg, </U> ez egy <STRIKE>áthúzott szöveg lesz</STRIKE>. Ez egy <KBD>nem proporcionális, azaz fix széles szöveg</KBD>. Ez a szöveg <SUB>subscript jellegű</SUB>. Ez a szöveg pedig <SUP>superscript jellegű</SUP>.
3. gyakorlat
<FONT COLOR="blue">Színek!</FONT> <FONT SIZE="5">Méret!</FONT> <FONT FACE="Courier">Betűtípus!</FONT> <FONT SIZE="6" COLOR="blue" FACE="Arial">Több változás együtt!</FONT>
4. gyakorlat
<P>Ez a sor egy paragrafus példa. <P>Ez pedig egy másik paragrafus.</P> <H1>Itt látunk egy első szintű fejlécet.</H1> <H2>Itt látunk egy második szintű fejlécet.</H2> Ez a mondat után nincs soremelés. Ez után viszont <B>van</B>. <BR> Ez a mondat után sincs soremelés. Ez után sincs soremelés.
5. gyakorlat
<PRE> Amit itt látunk, az egy előre megformázott szöveg. Vegyük észre, hogy pontosan úgy jelenik meg, ahogy begépeltük. </PRE> <HR> <HR WIDTH="50%" SIZE="6"> Az itt megadott mondatot a böngésző kettétörheti, ha úgy jön ki a lépés, és nem fér ki az ablakban. <NOBR>Ezt a mondatot viszont semmiképpen nem törheti ketté, még akkor sem, ha nem férne el az ablakban.</NOBR>
6. gyakorlat
<P ALIGN="left">Ez a paragrafus balra van igazítva.</P> <H2 ALIGN="center">Ez a 2-es szintű fejléc középre igazított.</H2> <H5 ALIGN="right">Ez az 5-ös fejléc jobbra igazított.</H5> <CENTER>Ez egy sima középre igazított szöveg.</CENTER>
7. gyakorlat
Itt látható egy image (kép): <IMG SRC="sample Itt látható egy image (kép): <IMG SRC="sample.gif" WIDTH="20" HEIGHT="36">. <BR><BR> <IMG SRC="sample.gif" WIDTH="20" HEIGHT="36" ALIGN="right"> A most következő kép jobbra van igazítva. Az igazítás miatt a kép kikerül a normál szövegfolyamból, és az őt körülvevő szöveghez viszonyított relatív elhelyezést nyer. <BR> Ez itt egy hivatkozás az <A HREF="http://www.om.hu">OM</A> honlapjára. A következő helyi hyperlinkhez kép és szöveg is tartozik. <A HREF="Feladat 1-4.htm"><IMG SRC="sample.gif"> text</A>
8. gyakorlat
<UL>Ez az első szint. <UL>Ez a második szint.</UL> <UL>Ez a második szint. <UL> Ez a harmadik szint.</UL> </UL> <HR> <UL>Ez egy első szintű fejléc. <LI>Ez az első elem az első listában. <LI>Ez a második elem az első listában. <UL> <LI>Ez az első elem a második listában. <LI>és ez a második elem a második listában. <LI>Ez a harmadik elem az első listában.
9. gyakorlat
<HTML> <HEAD> <TITLE>Feladat 1-9</TITLE> </HEAD> <BODY> <OL> <LI>Ez az első elem az első listában. <LI>Ez a második elem az első listában. <OL TYPE="a"> <LI>Ez az első elem a második szinten. <LI>És ez a második elem a második szinten. </OL> <LI>Ez a harmadik elem az első listában. </BODY> </HTML>
10. gyakorlat
<OL TYPE="1"> <LI>Itt számokat használunk. <OL TYPE="A"> <LI>Itt nagybetűket. <OL TYPE="a"> <LI>Itt pedig kisbetűket. <OL TYPE="I"> <LI>Római számok nagybetűvel. <OL TYPE="i"> <LI>Római számok kisbetűvel. <LI>Itt is római számok jelennek meg kisbetűvel. </OL> <UL> <LI>Ez is egy bajusz. </UL>
11. gyakorlat
<TABLE BORDER="1"> <TR> <TD>Az első cella tartalma</TD> <TD>Első sor, Második oszlop</TD> </TR> <TD>2. sor, 1. oszlop</TD> <TD>Utolsó cella</TD> </TABLE>
12.gyakorlat
<TABLE BORDER="1"> <TR> <TD COLSPAN="2" ALIGN="center">Egy hosszú első sor</TD> </TR> <TD>2. sor, 1. oszlop</TD> <TD>2. sor, 2. oszlop</TD> </TABLE>
13. gyakorlat
<TABLE BORDER="5" CELLPADDING="2" CELLSPACING="15" BGCOLOR="yellow"> <TR> <TD>Első cella</TD> <TD>Első sor, Második oszlop</TD> </TR> <TD BGCOLOR="white">2. sor, 1. oszlop</TD> <TD BACKGROUND="back.gif">Utolsó cella</TD> </TABLE> <HR>
<TABLE BORDER="10" CELLPADDING="15" CELLSPACING="2" BACKGROUND="back.gif"> <TR> <TD>Első cella</TD> <TD>Második cella</TD> </TR> <TD BGCOLOR="white">Harmadik cella</TD> <TD>Negyedik cella</TD> </TABLE>
14. gyakorlat
<TABLE BORDER="1"> <TR> <TD COLSPAN="4" ALIGN="center"><B>Gyümölcs eladás</B></TD> </TR> <TD></TD> <TD>1. üzlet</TD> <TD>2. üzlet</TD> <TD ROWSPAN="2">Alma</TD> <TD>1. nap</TD><TD>40</TD><TD>25</TD> <TD>2. nap</TD><TD>30</TD><TD>30</TD> <TD ROWSPAN="2">Narancs</TD> </TABLE>
15. gyakorlat
<TABLE BORDER="1" CELLPADDING="5"> <TR> <TD VALIGN="top">1</TD> <TD> <TABLE BORDER="2"> <TR><TD>A</TD><TD>B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> </TABLE> </TD> </TR> <TABLE BORDER="5"> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> <TD VALIGN="bottom" ALIGN="right">2</TD>
16. gyakorlat
<BODY TOPMARGIN="0" LEFTMARGIN="0"> <TABLE WIDTH="100%" HEIGHT="100%" CELLSPACING="0" CELLPADDING="5" BORDER="0"> <TR> <TD COLSPAN="3" ALIGN="CENTER" BGCOLOR="black" HEIGHT="25"> <FONT COLOR="white"><B>Táblázatokat használó lap</B></FONT> </TD> </TR> <TD BGCOLOR="thistle" WIDTH="80" VALIGN="top"> <IMG SRC="trans.gif" WIDTH="80" HEIGHT="0" BORDER="0"><BR> <B>Feladatok</B><BR> <A HREF="Feladat 2-1.htm">Feladat 2-1</A><BR> <A HREF="Feladat 2-2.htm">Feladat 2-2</A><BR> <A HREF="Feladat 2-3.htm">Feladat 2-3</A><BR> <A HREF="Feladat 2-4.htm">Feladat 2-4</A><BR>
<TD ALIGN="center"> <IMG SRC="trans.gif" WIDTH="150" HEIGHT="0" BORDER="0"><BR> Ez a lap a táblázatok használatát mutatja be.<BR> Helyi linkeket tartalmaz baloldalon, külső linkeket a jobboldalon, a tartalom pedig középen jelenik meg, a fejléc pedig a tetején. </TD>
<TD VALIGN="top" WIDTH="25%" BGCOLOR="lightgrey"> <IMG SRC="trans.gif" WIDTH="120" HEIGHT="1" BORDER="0"><BR> <B>Szervezetek</B><BR> <A HREF="http://www.microsoft.com">Microsoft</A><BR> <A HREF="http://mspress.microsoft.com">Microsoft Press</A><BR> <A HREF="http://www.w3.org">W3C</A><BR> <BR> <B>Érdekes site-ok</B><BR> <A HREF="http://microsoft.com/Workshop">SBN Workshop</A><BR> <A HREF="http://msdn.microsoft.com/">MSDN</A><BR> <A HREF="http://www.webreference.com">WebReference.com</A><BR> <A HREF="http://www.webreview.com">WebReview.com</A><BR> </TD> </TR> </TABLE>
17. gyakorlat
<BODY TOPMARGIN="0" LEFTMARGIN="0"> <TABLE WIDTH="100%" HEIGHT="100%" CELLSPACING="10" CELLPADDING="5" BORDER="1"> <TR> <TD COLSPAN="3" ALIGN="CENTER" BGCOLOR="black" HEIGHT="25"> <FONT COLOR="white"><B>Táblázatokat használó lap</B></FONT> </TD> </TR> <TD BGCOLOR="thistle" WIDTH="80" VALIGN="top"> <IMG SRC="trans.gif" WIDTH="80" HEIGHT="0" BORDER="0"><BR> <B>Feladatok</B><BR> <A HREF="Feladat 2-1.htm">Feladat 2-1</A><BR> <A HREF="Feladat 2-2.htm">Feladat 2-2</A><BR> <A HREF="Feladat 2-3.htm">Feladat 2-3</A><BR> <A HREF="Feladat 2-4.htm">Feladat 2-4</A><BR>
<TD ALIGN="center"> <IMG SRC="trans.gif" WIDTH="150" HEIGHT="0" BORDER="0"><BR> Ez a lap a táblázatok használatát mutatja be.<BR> Helyi linkeket tartalmaz baloldalon, külső linkeket a jobboldalon, a tartalom pedig középen jelenik meg, a fejléc pedig a tetején. </TD>
<TD VALIGN="top" WIDTH="25%" BGCOLOR="lightgrey"> <IMG SRC="trans.gif" WIDTH="120" HEIGHT="1" BORDER="0"><BR> <B>Szervezetek</B><BR> <A HREF="http://www.microsoft.com">Microsoft</A><BR> <A HREF="http://mspress.microsoft.com">Microsoft Press</A><BR> <A HREF="http://www.w3.org">W3C</A><BR> <BR> <B>Érdekes site-ok</B><BR> <A HREF="http://microsoft.com/Workshop">SBN Workshop</A><BR> <A HREF="http://msdn.microsoft.com/">MSDN</A><BR> <A HREF="http://www.webreference.com">WebReference.com</A><BR> <A HREF="http://www.webreview.com">WebReview.com</A><BR> </TD> </TR> </TABLE>
18. gyakorlat
<HTML> <HEAD> <TITLE>Feladat 1-15</TITLE> </HEAD> <FRAMESET COLS="50%,70,*"> <FRAME SRC="Elso00.html"> <FRAME SRC="Masodik00.html"> <FRAME SRC="Harmadik00.html"> </FRAMESET> </HTML>
Elso00.html <HTML> <BODY BGCOLOR="yellow"> <B> Ez az első keret. </BODY> </HTML>
Masodik00.html <HTML> <BODY BGCOLOR="gray"> <B> Ez a második keret. </BODY> </HTML>
Harmadik00.html <HTML> <BODY BGCOLOR="white"> <B> Ez a harmadik keret. <BR> <IFRAME SRC="Elso00.html" WIDTH="100"> </BODY> </HTML>
19. gyakorlat
<FRAMESET ROWS="50,*" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME SRC="Első.htm" NAME="frame1" SCROLLING="no"> <FRAMESET COLS="20%,80%" FRAMEBORDER="1" FRAMESPACING="1"> <FRAME SRC="Második.htm" NAME="frame2" SCROLLING="yes"> <FRAME SRC="Harmadik.htm" NAME="frame3" SCROLLING="auto"> </FRAMESET>
20. gyakorlat
<FRAMESET COLS="25%,75%" FRAMEBORDER="1" FRAMESPACING="1"> <FRAME SRC="Navigal.html" NAME="baloldali" SCROLLING="yes"> <FRAME SRC="Elso00.html" NAME="jobboldali" SCROLLING="auto"> </FRAMESET>
Navigal.html <HTML> <BODY> <A HREF="Elso00.html" TARGET="jobboldali">Első keret</A><BR> <A HREF="Masodik00.htm" TARGET="jobboldali">Második keret</A><BR> <A HREF="Harmadik00.htm" TARGET="jobboldali">Harmadik keret</A><BR> </BODY> </HTML>
21. gyakorlat
<FIELDSET> Ebben a fieldset-ben nincs LEGEND. </FIELDSET> Ez a szöveg az 1. fieldset után jön. <FIELDSET TITLE="Ez egy Fieldset"> <LEGEND>2. Fieldset</LEGEND> Ez a 2. fieldset belsejében van. Ez a szöveg az 2. fieldset után jön.
<FIELDSET ALIGN="right" STYLE="width:140"> <LEGEND>3. Fieldset</LEGEND> Ez a harmadik Fieldset-ben van. </FIELDSET> Ez a szöveg az 3. fieldset után jön. <FIELDSET> <LEGEND ALIGN="center">4. Fieldset</LEGEND> Ez a szöveg a negyedik fieldset-ben található. Ez a szöveg az 4. fieldset után jön.
22. gyakorlat
<IMG SRC="nav.gif" WIDTH="300" HEIGHT="200" USEMAP="#NavMap"> <MAP NAME="NavMap"> <AREA SHAPE="rect" COORDS="0,0,50,100" HREF="http://www.microsoft.com"> <AREA SHAPE="circ" COORDS="100,150,20" HREF="http://www.w3c.org"> <AREA SHAPE="poly" COORDS="200,50,250,50,250,100,200,150,150,100" HREF="http://mspress.microsoft.com"> </MAP> <BR> <A HREF="http://www.microsoft.com">Microsoft</A> <A HREF="http://www.w3c.org">W3C</A> <A HREF="http://mspress.microsoft.com">Microsoft Press</A>
23. gyakorlat
Az itt látható <SPAN STYLE="font:bold 14pt">szöveg</SPAN> egy SPAN-ben van. <HR> Ez itt pedig <DIV STYLE="font:bold 14pt">egy DIV</DIV> része. SPAN: stílust lehet adni olyan elemeknek, szövegrészeknek is, amelyek beállítására hagyományosan más mód nincsen DIV: Hasonlóan működik, mint a SPAN, de ez egy blokkszintű elem (neve a division szóból ered). Tartalmazhat bekezdéseket,táblázatokat, címsorelemeket, és további DIV-eket is
24. gyakorlat
<P> Ez a paragrafus <B>vastag</B>, <I>dőlt betűs</I>, és <U>aláhúzott</U> tagokat tartalmaz. </P> <XMP> </XMP>
25. gyakorlat
Vastag betűkkel kiírjuk, hogy az X kisebb, mint az Y: <B> X<Y </B>. Ez a paragrafus karakter egyedet használ. <HR> Ez a paragrafus nem használ karakter egyedet.
VÉGE