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