F bb té témakö makörök

Leírónyelvek: HTML és XHTML

A HTML nyelv fejl dése, lehet ségei és cé céljai. Az XHTML nyelv. XHTML dokumentumok szerkezete, címké mkék és szerepü szerepük a dokumentum szerkezeté szerkezetének leí leírásában, a szö szöveges informá információ ció formá formázásában.

HTML fejl dése

HTML fejl dése

s: SGML (Standard Generalized Markup Language) Language) – 1986

HTML 4.0 W3C javaslat – 1997 dec., 1998 ápr.

– precí precízen leí leírta a tartalmat – hangsú hangsúly nem a formá formázáson volt

HTML 1.0 Tim BernersBerners-Lee – 1989 els böngé ngész - Mosaic 1993 HTML 2.0 Internet Engineering Task Force - 1996 – már nem csak a tartalomra koncentrá koncentrál

HTML 3.2 W3C javaslat – 1997 januá január

– stí stíluslapok

HTML 4.01 apró apróbb javí javít ások – 1999 tová továbbfejleszté bbfejlesztés – XHTML 1.0 W3C javaslat – 2000 januá január – HTML 5.0 kidolgozá kidolgozás alatt – XHTML 2.0 kidolgozá kidolgozás alatt

– Netscape elemek: fontok, tá táblá blázatok, appletek, appletek, stb.

HTML nyelv HyperText Markup Language – Hypertext Jelö Jelöl Nyelv célja: dokumentumok szá számára standard kód segí segítsé tségével formá formázott megjelení megjelenítést biztosí biztosítani alapeleme a cí > címke (tag) pl. nyitó >… nyitó- és zá zár ó címke pl. csak nyitó >,

---

nyitó címke pl.
,

---

nyitó nyitó címke belsejé belsejében attribú attribútumok pl. "> href="http a bö böngé ngész k intelligens mó módon értelmezik félreé lreérté rtések elkerü elkerülésére: XHTML

XHTML Extensible HyperText Markup Language a HTML szigorú szigorúbb és tisztá tisztább vá változata a HTML elemeket leí leírása XML segí segítsé tségével minden cí címké mkének van zá záró eleme egysoros cí címké mkénél a lezá lezárást jelezzü jelezzük pl.
minden cí címkené mkenév kisbet vel írandó randó minden eleme azonosí azonosítható tható a Document Object Model segí segítsé tségével, az objektumok módosí dosítható thatók

1

HTML (XHTML) dokumentum alapszerkezete html> head> body> a dokumentum tö törzs

Els weblap Haszná Használjuk a Notepad2 editort <TITLE>Els weblap fejlé fejléce Elké Elkészü szült az els weblapom.

Els weblap

A dokumentum kezdeté kezdetét és vé végét jelö jelöli.

a HTML dokumentum leí leír ására szolgá szolgál nincs attribú attribútuma tová további elemek tá tároló rolója

– > <meta http http--equiv equiv=" ="Content Content--Type Type"" content content=" ="text text//html html;; charset charset=UTF =UTF--8" /> <meta name name=" ="keywords keywords"" content content=" ="webszerkeszt webszerkeszté és, XHTML, oktatá oktatás" /> <script language language="JavaScript1.2"> ="JavaScript1.2"> function ujablak ujablak((file file,, nev nev,, parameterek parameterek)) { window.open(' window.open ('file file', ', 'nev 'nev', ', 'parameterek 'parameterek'); '); } > <style type type=" ="text text//css css"> "> body { font--family font family:: Arial Arial,, Helvetica Helvetica,, sans sans--serif serif;; font--size font size:: 10pt } > >

2

body> elem

Feladat

eredetileg a dokumentum tö törzsé rzsének hatá határoló rolója kiterjesztetté kiterjesztették a dokumentum há hátté ttér és a szö szövegszí vegszíneinek beá beállí llít ására

Módosí dosítsuk az el z lapot ú gy, hogy a há hátté ttér piros, a szö szövegszí vegszín fehé fehér legyen!

– hátté color"> "> ttérszí rszín: szövegszí vegszín: – hyperlinkek szí "> színe: – meglá "> meglátogatott link: – aktí "> aktív linkek szí színe:



oldal betö betölté ltéséhez, mint esemé eseményhez kapcsolható kapcsolható esemé események is itt helyezhet k el

Szö Szövegtagoló vegtagoló elemek

- paragrafus (bekezdé (bekezdés)

– el tte és utá utána nagyobb hely – align attributumá attributumában igazí igazítás (left (left,, right, right, center) – új sor

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

> - több bekezdé div>

<span> > - bekezdé span>

> - blokkidé blockquote>

<pre> > - eredeti formá pre> > - programkó code> - sortö sortörés

---

- vízszintes vonal

Feladat TEXT="white">

Elké

Elkészü szült az els weblapom.

A má második bekezdé é s kö ö z é pre igazí í bekezd k igaz tott.

A harmadik ALIGN="right">A jobbra igazí igazított.

Módosí dosítsuk az el bbi dokumentumot!

3

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

A má második bekezdé bekezdés kö középre igazí igazított.

---

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

Feladat Módosí dosítsuk a dokumentumot!

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

Szö Szövegformá vegformázó elemek - szö szöveg tí típusá pusának, szí színének, nagysá nagyságának beá beállí llítása n = 1..6 - címsorok – félkö lkövér – el tte és utá után üres sor

- félkö lkövér bet - d lt bet <sup> > - fels index sup> > - alsó sub> > - a kö big> > - a kö small> > - er sen hangsú strong>

A COLOR="blue">A második bekezdé bekezdés kö középre igazí igazított, 6-os mé méret .

4

Feladat Módosí dosítsuk a dokumentumot!

Feladat Módosí dosítsuk a dokumentumot!

Feladat Módosí dosítsuk a dokumentumot!

TEXT="white">

A Weblap cí címe 22-es szint

Elké

Elkészü szült az els weblapom.

A m második sodik bekezdé bekezdés k középre pre igazí igazított, tott, 66-os méret .

a<SUP>2+b<SUP>2 =c<SUP>2
2H<SUB>2+O<SUB>2=2H<SUB>2O

5

Kép elem - img> height="600"> src – forrá forrás fá fájl (gif (gif,, jpg, jpg, png, png, stb.) alt – kép rö rövid leí leírása width – kép szé szélessé lessége height – kép magassá magassága

Feladat A Paint programmal ké készí szítsü tsünk rajzot! Mentsü Mentsü k jpg formá formátumba! Jelení Jelenítsü tsük meg a weblapunkon a vízszintes vonal fö fölött!

SRC="rajz.jpg">

---

Kép ré részekre bontá bontása - <map> map> adott ké kép darabokra bontható bontható a darabokhoz linkek kapcsolható kapcsolhatók img> tagtag- ben usemap attribú attribútum src= … usemap="# usemap="#navkep <map id=" navkep"" name=" navkep"> "> id="navkep name="navkep <area shape= shape= – "rect" rect" coords= coords= : ké két sarok – "circle" circle" coords= coords= : kö középpont, sugá sugár – "poly" poly" coords= coords= : összes csú csúcspont

Táblá blázat deklará deklarálása
– távolsá volság a cella hatá határ és a tartalom kö között

cellspacing

– távolsá volság a cellá cellák kö között

height width >

6

Táblá blázat cí cím és adatsorai címsor, címsor cellá cellái thead> tr>

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

adatsorok, adatcellá adatcellák tbody> tr>

c > th>cíím cella1	c > th>cíím cella2
adat > td>adat cella1	adat > td>adat cella2

Orszá	Orsz á g	F város	Nyelv
Magyarorszá	Magyarorsz ág	Budapest	magyar
Né	N émetorsz metorszá ág	Berlin	né	n é met
Lengyelorszá	Lengyelorsz ág	Varsó	Vars ó	lengyel

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

Felsorolá > Felsorolás -

Egyszer felsorolá felsorolás Pontozott (rendezetlen) lista

type="">
• > li>…
• > li>…

Szá Számozott (rendezett) lista

type="">
1. > li>…
2. > li>…

<TITLE>A má második weblap fejlé fejléce BGCOLOR="yellow"> Szá Számozatlan lista

• Els elem
• Má
• Második elem
• Harmadik elem

Szá Számozott lista

1. Els elem
2. Má
3. Második elem
4. Harmadik elem

7

Szí Színek a weboldalon bet szí ), há szín (text (text), hátté ttérszí rszín (bgcolor (bgcolor)) linkek szí színei – normá normál (link (link)) – megtekintett (vlink (vlink)) – aktí aktív (alink (alink))

egé egész dokumentumra, valamely elemre (pl. táblá blázat, vagy annak egy cellá cellája) megadá megadása – angol né néven (pl. red, red, yellow) yellow) – hexadecimá hexadecimális kó kóddal (pl. "#FF0000", "#FFFF00") – Rgb kóddal (pl. rgb(255,0,0), 255,0)) ,0)) rgb(255,0,0), rgb(255, rgb(255,255

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

Keretek – noframes, noframes, iframe <noframes> > noframes>
Keretek – frame csak az oldal vá változó ltozó részé szét kell frissí frissíteni nehezen kö követhet k a linkek > body> elem helyett

<TITLE>Kezd lap

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

– arra az esetre ha a bö böngé ngész nem tudná tudná a kereteket kezelni

<iframe> iframe> - inline frame – ablak az ablakon belü belül – forrá á sfá á jl, mé é retek megadá forr sf m megadásával <iframe src=" iframe.htm"" width="200" src="iframe.htm width="200" height="100"> height="100">

8

Speciá Speciális karakterek & és ; jelek kö közé írva <: < lt; >: & gt; gt; nonnon-breaking space: space:   nbsp; copyright: © copy; magyar ékezetes bet k:

Adatok összekapcsolá sszekapcsolása hyperlinkkel dokumentumon belü belül Bevezet ">Bevezeté és href="#bevezetes Bevezet ">Bevezeté és name="bevezetes

dokumentumok kö között Le ">Leíírás href="./leiras.htm

vilá világhá ghálón href="http leiras.htm"> Leí Leírás

HTML szerkeszt k egyszer szö szövegszerkeszt k – jegyzettö jegyzettömb

dediká dedikált szerkeszt programok – HomeSite – DreamWeaver – FirstPage – FrontPage

Feladat A szá számozatlan lista els elemé elemét alakí alakítsuk olyan linkké linkké, amely megnyitja az els weblapot! A má második elemet alakí alakítsuk olyan linkké linkké, amely megnyitja az iskola honlapjá honlapját!

• Els elem
• Második elem
• Harmadik elem

9

1. gyakorlat

2. gyakorlat

3. gyakorlat

<TITLE>Feladat 11-1 Mié Miért kezd dik minden kö könyv els mintaprogramja azzal, hogy "Helló Helló vilá világ?!"

Ez a szö szöveg vastagon jelenik meg. Ez pedig megdö megdöntve. Ez egy alá aláhú zott szö szöveg, ez egy <STRIKE>á <STRIKE>áthú thúzott szö szöveg lesz. Ez egy nem proporcioná proporcionális, azaz fix szé széles szö szöveg. Ez a szö szöveg <SUB>subscript <SUB>subscript jelleg . Ez a szö szöveg pedig <SUP>superscript <SUP>superscript jelleg .

Szíínek! COLOR="blue">Sz Mé SIZE="5">Méret! Bet típus! FACE="Courier">Bet Tö öbb vá FACE="Arial">T változá ltozás együ együtt!

10

4. gyakorlat

5. gyakorlat

6. gyakorlat

Ez a sor egy paragrafus pé példa.

Ez pedig egy má másik paragrafus.

Itt lá látunk egy els szint fejlé fejlécet.

Itt lá látunk egy má második szint fejlé fejlécet.

Ez a mondat utá után nincs soremelé soremelés. Ez utá után viszont van.
Ez a mondat utá után sincs soremelé soremelés. Ez utá után sincs soremelé soremelés.

 Amit itt lá látunk, az egy el re megformá megformázott szö szöveg. Vegyü hogy Vegyük észre, pontosan úgy jelenik meg, ahogy begé begépeltü peltük. 

---

---

Az itt megadott mondatot a bö böngé ngész ketté kettétörheti, ha úgy jö jön ki a lé lépés, és nem fé fér ki az ablakban. Ezt a mondatot viszont semmiké semmiképpen nem törheti ketté ketté, még akkor sem, ha nem fé férne el az ablakban.

Ez a paragrafus ALIGN="left">Ez balra van igazí igazítva.

Ez a 22-es szint fejlé fejléc kö középre igazí igazított.

Ez az 5ALIGN="right">Ez 5-ös fejlé fejléc jobbra igazí igazított.

Ez egy sima kö középre igazí igazított szö szöveg.

11

7. gyakorlat

8. gyakorlat

9. gyakorlat

Itt lá látható tható egy image (ké (kép): .



ALIGN="right"> A most kö következ kép jobbra van igazí igazítva. Az igazí igazítás miatt a kép kikerü kikerül a normá normál szö szövegfolyambó vegfolyamból, és az t kö körülvev szö szöveghez viszonyí viszonyított relatí relatív elhelyezé elhelyezést nyer.
Ez itt egy hivatkozá hivatkozás az OM ">OM honlapjá HREF="http:// honlapjára.
A kö következ helyi hyperlinkhez kép és szö szöveg is tartozik.
1-4.htm"> text text

Ez az els szint.
Ez a má második szint.
Ez a má második szint.
Ez a harmadik szint.
Ez a má második szint.

---

Ez egy els szint fejlé fejléc.
• Ez az els elem az els listá listában.
• Ez a má második elem az els listá listában.
  • Ez az els elem a má második listá listában.
  • é
  • és ez a má második elem a má második listá listában.
• Ez a harmadik elem az els listá listában.

<TITLE>Feladat 11-9

1. Ez az els elem az els listá listában.
2. Ez a má második elem az els listá listában.
   1. Ez az els elem a má második szinten.
   2. É
   3. És ez a má második elem a má második szinten.
3. Ez a harmadik elem az els listá listában.

12

10. gyakorlat

11. gyakorlat

12.gyakorlat

1. Itt szá számokat haszná használunk.
   1. Itt nagybet ket.
      1. Itt pedig kisbet ket.
         1. Ró
         2. Római szá számok nagybet vel.
            1. Ró
            2. Római szá számok kisbet vel.
            3. Itt is ró római szá számok jelennek meg kisbet vel.
   • Ez is egy bajusz.

Az els cella tartalma	Els sor, Má Második oszlop
2. sor, 1. oszlop	Utolsó	Utolsó cella

Egy hosszú hosszú els sor
2. sor, 1. oszlop	2. sor, 2. oszlop

13

13. gyakorlat

BACKGROUND="back.gif">

Els cella	Má	Második cella
Harmadik BGCOLOR="white">Harmadik cella	Negyedik cella

> > < >40 >25< >30 >30< >40 >25< >30 >30

Gyü ALIGN="center">Gy ü mölcs eladá eladás
		1. üzlet	2. üzlet
Alma	1. nap		40	25
	2. nap		30	30
Narancs	1. nap		40	25
	2. nap		30	30

BGCOLOR="yellow"> BGCOLOR="white">2.

Els cella	Els sor, Má Második oszlop
2. sor, 1. oszlop	Utolsó ó BACKGROUND="back.gif">Utols cella

---

14. gyakorlat

15. gyakorlat

14

VALIGN="bottom"" ALIGN="right ALIGN="right">2

1	A B A B C D C D
E F E F G H G H	2

Tá áblá COLOR="white">T blázatokat haszná használó lap
Feladatok Feladat 22-1 Feladat 22-2 Feladat 22-3 Feladat 22-4	BGCOLOR="lightgrey"> Szervezetek Microsoft ">Microsoft HREF="http:// Microsoft ">Microsoft HREF="http:// Press Press W3C HREF="http://www.w3.org">W3C É Érdekes sitesite-ok ok SBN HREF="http:// Workshop">SBN Workshop Workshop MSDN /">MSDN HREF="http:// ">WebReference.com WebReference.com HREF="http:// ">WebReview.com WebReview.com HREF="http://

16. gyakorlat


Ez a lap a tá táblá blázatok haszná használatá latát mutatja be.
Helyi linkeket tartalmaz baloldalon, küls linkeket a jobboldalon, a tartalom pedig kö középen jelenik meg, a fejlé fejléc pedig a tetejé tetején.

17. gyakorlat

15

Tá áblá COLOR="white">T blázatokat haszná használó lap
Feladatok Feladat 22-1 Feladat 22-2 Feladat 22-3 Feladat 22-4	BGCOLOR="lightgrey"> Szervezetek Microsoft ">Microsoft HREF="http:// Microsoft ">Microsoft HREF="http:// Press Press W3C HREF="http://www.w3.org">W3C É Érdekes sitesite-ok ok SBN HREF="http:// Workshop">SBN Workshop Workshop MSDN /">MSDN HREF="http:// ">WebReference.com WebReference.com HREF="http:// ">WebReview.com WebReview.com HREF="http://

<TITLE>Feladat 11-15


Ez a lap a tá táblá blázatok haszná használatá latát mutatja be.
Helyi linkeket tartalmaz baloldalon, küls linkeket a jobboldalon, a tartalom pedig kö középen jelenik meg, a fejlé fejléc pedig a tetejé tetején.

18. gyakorlat

Elso00.html BGCOLOR="yellow"> Ez az els keret.

16

Masodik00.html BGCOLOR="gray"> Ez a má második keret.

19. gyakorlat

20. gyakorlat

Harmadik00.html BGCOLOR="white"> Ez a harmadik keret.
<IFRAME SRC="Elso00.html" WIDTH="100">

SCROLLING="yes"> SCROLLING="auto">

SCROLLING="yes"> SCROLLING="auto">

17

Navigal.html

21. gyakorlat

Els keret
Má TARGET="jobboldali">Második keret
Harmadik keret

Ebben a fieldsetfieldset-ben nincs LEGEND.

Ez a szö szöveg az 1. fieldset utá után jö jön. Ez a szö szöveg az 1. fieldset utá után jö jön. Ez a szö szöveg az 1. fieldset utá után jö jön.

Fieldset">

2. Fieldset

Fieldset Ez a 2. fieldset belsejé belsejében van.

Ez a szö szöveg az 2. fieldset utá után jö jön. Ez a szö szöveg az 2. fieldset utá után jö jön. Ez a szö szöveg az 2. fieldset utá után jö jön. Ez a szö szöveg az 2. fieldset utá után jö jön.

22. gyakorlat

ALIGN="right"" STYLE="width STYLE="width:140">

3. Fieldset

Fieldset Ez a harmadik FieldsetFieldset-ben van.

Ez a szö szöveg az 3. fieldset utá után jö jön. Ez a szö szöveg az 3. fieldset utá után jö jön. Ez a szö szöveg az 3. fieldset utá után jö jön.

4. Fieldset

Fieldset Ez a szö szöveg a negyedik fieldsetfieldset-ben talá található lható.

Ez a szö szöveg az 4. fieldset utá után jö jön. Ez a szö szöveg az 4. fieldset utá után jö jön. Ez a szö szöveg az 4. fieldset utá után jö jön.

USEMAP="#NavMap"> <MAP NAME="NavMap "> NAME="NavMap"> HREF="http://mspress.microsoft.com">
Microsoft W3C Microsoft HREF="http://mspress.microsoft.com">Microsoft Press

18

23. gyakorlat

Az itt lá látható tható <SPAN STYLE="font:bold STYLE="font:bold 14pt">szö 14pt">szöveg egy SPANSPANben van.

---

Ez itt pedig

egy DIV

ré DIV