Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Leírónyelvek: HTML és XHTML

Hasonló előadás


Az előadások a következő témára: "Leírónyelvek: HTML és XHTML"— Előadás másolata:

1 Leírónyelvek: HTML és XHTML

2 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.

3 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 már nem csak a tartalomra koncentrál HTML 3.2 W3C javaslat – 1997 január Netscape elemek: fontok, táblázatok, appletek, stb.

4 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

5 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

6 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

7 HTML (XHTML) dokumentum alapszerkezete
<head> <title>címsor szövege</title> </head> <body> a dokumentum törzs </body> </html>

8 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>

9 Első weblap

10 <HTML></HTML>
A dokumentum kezdetét és végét jelöli.

11 <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

12 <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> ", "width": "800" }

13 <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

14 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">

15 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

16 Feladat Módosítsuk az előző dokumentumot!

17 <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>

18 Feladat Módosítsuk az előbbi dokumentumot!

19 <P ALIGN="right">A harmadik jobbra igazított.<BR>
Ez nem új bekezdés, csak új sor<BR> Ez az utolsó sor.</P>

20 Feladat Módosítsuk az előbbi dokumentumot!

21 <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>

22 Szövegformázó elemek <font></font> - szöveg típusának, színének, nagyságának beállítása <hn></hn> n = 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)

23 Feladat Módosítsuk a dokumentumot!

24 <P ALIGN="center">
<FONT SIZE="6" COLOR="blue">A második bekezdés középre igazított, 6-os méretű.</FONT> </P>

25 Feladat Módosítsuk a dokumentumot!

26 <BODY BGCOLOR="red" TEXT="white">
<H2>A Weblap címe 2-es szintű</H2> <P>Elkészült az első weblapom.</P>

27 Feladat Módosítsuk a dokumentumot!

28 <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>

29 Feladat Módosítsuk a dokumentumot!

30 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

31 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

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

33

34 <IMG SRC="rajz.jpg">
<HR>

35 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

36 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 >

37 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>

38 Feladat Egészítsük ki a weblapot a következő táblázattal!

39 <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>

40 Felsorolás - <li></li>
Egyszerű felsorolás Pontozott (rendezetlen) lista <ul type=""> <li>…</il> </ul> Számozott (rendezett) lista <ol type=""> </ol>

41 Feladat Készítsük el a következő új weblapot!

42 <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>

43 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))

44 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>

45 Feladat Az előző két weblapból alakítsuk ki a következő keretes elrendezést!

46 <HTML> <HEAD> <TITLE>Kezdőlap</TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="masodik.html" NAME="baloldali"> <FRAME SRC="elso.html" NAME="jobboldali"> </FRAMESET> </HTML>

47 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">

48 Feladat Készítsük el a következő elrendezést!

49 Speciális karakterek & és ; jelek közé írva <: < >: >
non-breaking space:   copyright: © magyar ékezetes betűk:

50 HTML szerkesztők egyszerű szövegszerkesztők
jegyzettömb dedikált szerkesztőprogramok HomeSite DreamWeaver FirstPage FrontPage

51 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>

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

53

54 <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>

55 1. gyakorlat

56 <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>

57 2. gyakorlat

58 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>.

59 3. gyakorlat

60 <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>

61 4. gyakorlat

62 <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.

63 5. gyakorlat

64 <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>

65 6. gyakorlat

66 <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>

67 7. gyakorlat

68 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>

69 8. gyakorlat

70 <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.

71 9. gyakorlat

72 <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>

73 10. gyakorlat

74 <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>

75 11. gyakorlat

76 <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>

77 12.gyakorlat

78 <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>

79 13. gyakorlat

80 <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>

81 <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>

82 14. gyakorlat

83 <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>

84 15. gyakorlat

85 <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>

86 16. gyakorlat

87 <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>

88 <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>

89 <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>

90 17. gyakorlat

91 <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>

92 <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>

93 <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>

94 18. gyakorlat

95 <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>

96 Elso00.html <HTML> <BODY BGCOLOR="yellow">
<B> Ez az első keret. </BODY> </HTML>

97 Masodik00.html <HTML> <BODY BGCOLOR="gray">
<B> Ez a második keret. </BODY> </HTML>

98 Harmadik00.html <HTML> <BODY BGCOLOR="white">
<B> Ez a harmadik keret. <BR> <IFRAME SRC="Elso00.html" WIDTH="100"> </BODY> </HTML>

99 19. gyakorlat

100 <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>

101 20. gyakorlat

102 <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>

103 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>

104 21. gyakorlat

105 <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.

106 <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.

107 22. gyakorlat

108 <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>

109 23. gyakorlat

110 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

111 24. gyakorlat

112 <P> Ez a paragrafus <B>vastag</B>, <I>dőlt betűs</I>, és <U>aláhúzott</U> tagokat tartalmaz. </P> <XMP> </XMP>

113 25. gyakorlat

114 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.

115 VÉGE


Letölteni ppt "Leírónyelvek: HTML és XHTML"

Hasonló előadás


Google Hirdetések