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

Hasonló előadás


Az előadások a következő témára: "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."— 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.  alapeleme a címke (tag) pl.  nyitó- és záró címke pl. …  nyitó- és záró címke pl. …  csak nyitó címke pl.,  csak nyitó címke pl.,  nyitó címke belsejében attribútumok pl.  nyitó címke belsejében attribútumok pl.  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.  egysoros címkénél a lezárást jelezzük pl.  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 címsor szövege címsor szövege a dokumentum törzs a dokumentum törzs

8 Első weblap  Használjuk a Notepad2 editort Első weblap fejléce Első weblap fejléce Elkészült az első weblapom.

9 Első weblap

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

11  a HTML dokumentum leírására szolgál  nincs attribútuma  további elemek tárolója – a címsorban megjelenő szöveg – a dokumentum alapértelmezett helye – kapcsolat más dokumentumokkal – információ a dokumentumról  kulcsszavak  leírás  stb. – JavaScript vagy VBScript kód helye – beágyazott stíluslap

12 elem - példa elem - példa A webprogramozás alapjai A webprogramozás alapjai function ujablak(file, nev, parameterek) { window.open('file', 'nev', 'parameterek'); } body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt }

13 elem 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: –háttérszín: –szövegszín: –szövegszín: –hyperlinkek színe: –hyperlinkek színe: –meglátogatott link: –meglátogatott link: –aktív linkek színe: –aktív linkek színe:  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!  

15 Szövegtagoló elemek  - paragrafus (bekezdés) –előtte és utána nagyobb hely –align attributumában igazítás (left, right, center) –új sor  - több bekezdést magába foglaló egység –nincs sortávolság növekedés  - bekezdésnél kisebb egység –erre alkalmazható speciális formázás  - blokkidézetek –behúzás a kijelölt részre  - eredeti formázás megőrzése  - programkód megjelenítése  - sortörés  - vízszintes vonal

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

17 Elkészült az első weblapom. Elkészült az első weblapom. A második bekezdés középre igazított. A második bekezdés középre igazított. A harmadik jobbra igazított. A harmadik jobbra igazított.

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

19 A harmadik jobbra igazított. A harmadik jobbra igazított. Ez nem új bekezdés, csak új sor Ez nem új bekezdés, csak új sor Ez az utolsó sor. Ez az utolsó sor.

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

21 A második bekezdés középre igazított. A második bekezdés középre igazított. A harmadik jobbra igazított. A harmadik jobbra igazított. Ez nem új bekezdés, csak új sor Ez nem új bekezdés, csak új sor Ez az utolsó sor. Ez az utolsó sor.

22 Szövegformázó elemek  - szöveg típusának, színének, nagyságának beállítása  n = címsorok –félkövér –előtte és után üres sor  - félkövér betű  - dőlt betű  - felső index  - alsó index  - a környezeténél nagyobb betű  - a környezeténél kisebb betű  - erősen hangsúlyozott (félkövér)

23 Feladat  Módosítsuk a dokumentumot!

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

25 Feladat  Módosítsuk a dokumentumot!

26 A Weblap címe 2-es szintű A Weblap címe 2-es szintű Elkészült az első weblapom. Elkészült az első weblapom.

27 Feladat  Módosítsuk a dokumentumot!

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

29 Feladat  Módosítsuk a dokumentumot!

30 a 2 +b 2 =c 2 a 2 +b 2 =c 2 2H 2 +O 2 =2H 2 O 2H 2 +O 2 =2H 2 O

31 Kép elem - Kép elem -  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  

35 Kép részekre bontása - Kép részekre bontása -  adott kép darabokra bontható  a darabokhoz linkek kapcsolhatók  tag-ben usemap attribútum   

36 Táblázat deklarálása 


37 Táblázat cím és adatsorai  címsor, címsor cellái

cím cella1 cím cella1 cím cella2 cím cella2  adatsorok, adatcellák adat cella1 adat cella1 adat cella2 adat cella2

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

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

40 Felsorolás - Felsorolás -  Egyszerű felsorolás  Pontozott (rendezetlen) lista

  • …  Számozott (rendezett) lista

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

    42 A második weblap fejléce A második weblap fejléce Számozatlan lista Számozatlan lista Első elem Első elem Második elem Második elem Harmadik elem Harmadik elem Számozott lista Számozott lista Első elem Első elem Második elem Második elem Harmadik elem Harmadik elem

    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  elem helyett  elem helyett

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

    46 Kezdőlap

    47 Keretek – noframes, iframe   –arra az esetre ha a böngésző nem tudná a kereteket kezelni  - inline frame –ablak az ablakon belül –forrásfájl, méretek megadásával

    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 Bevezetés Bevezetés  dokumentumok között Leírás Leírás  világhálón Leírás Leírás

    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 Első elem Első elem Második elem Második elem Harmadik elem Harmadik elem

    55 1. gyakorlat

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

    57 2. gyakorlat

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

    59 3. gyakorlat

    60 Színek! Színek! Méret! Méret! Betűtípus! Betűtípus! Több változás együtt! Több változás együtt!

    61 4. gyakorlat

    62 Ez a sor egy paragrafus példa. Ez a sor egy paragrafus példa. Ez pedig egy másik paragrafus. Ez pedig egy másik paragrafus. Itt látunk egy első szintű fejlécet. Itt látunk egy első szintű fejlécet. Itt látunk egy második szintű fejlécet. Itt látunk egy második szintű fejlécet. Ez a mondat után nincs soremelés. Ez után viszont van.
    Ez a mondat után sincs soremelés. Ez után sincs soremelés.

    63 5. gyakorlat

    64

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

    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. Ezt a mondatot viszont semmiképpen nem törheti ketté, Ezt a mondatot viszont semmiképpen nem törheti ketté, még akkor sem, ha nem férne el az ablakban. még akkor sem, ha nem férne el az ablakban.

    65 6. gyakorlat

    66 Ez a paragrafus balra van igazítva. Ez a paragrafus balra van igazítva. Ez a 2-es szintű fejléc középre igazított. Ez a 2-es szintű fejléc középre igazított. Ez az 5-ös fejléc jobbra igazított. Ez az 5-ös fejléc jobbra igazított. Ez egy sima középre igazított szöveg. Ez egy sima középre igazított szöveg.

    67 7. gyakorlat

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

    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.
    Ez itt egy hivatkozás az OM honlapjára.
    A következő helyi hyperlinkhez kép és szöveg is tartozik.
    text text

    69 8. gyakorlat

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


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

    71 9. gyakorlat

    72 Feladat 1-9 Feladat 1-9

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

    73 10. gyakorlat

    74 Itt számokat használunk. Itt számokat használunk. Itt nagybetűket. Itt nagybetűket. Itt pedig kisbetűket. Itt pedig kisbetűket. Római számok nagybetűvel. Római számok nagybetűvel. Római számok kisbetűvel. Római számok kisbetűvel. Itt is római számok jelennek meg kisbetűvel. Itt is római számok jelennek meg kisbetűvel. Ez is egy bajusz. Ez is egy bajusz.

    75 11. gyakorlat

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


  • 77 12.gyakorlat

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

    79 13. gyakorlat

    80 Első cella Első cella Első sor, Második oszlop Első sor, Második oszlop 2. sor, 1. oszlop 2. sor, 1. oszlop Utolsó cella Utolsó cella



    81 Első cella Első cella Második cella Második cella Harmadik cella Harmadik cella Negyedik cella Negyedik cella

    82 14. gyakorlat

    83 Gyümölcs eladás Gyümölcs eladás 1. üzlet 1. üzlet 2. üzlet 2. üzlet Alma Alma 1. nap nap nap nap Narancs Narancs 1. nap nap nap nap

    84 15. gyakorlat

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

    86 16. gyakorlat

    87 Táblázatokat használó lap Táblázatokat használó lap Feladatok Feladatok Feladat 2-1 Feladat 2-1 Feladat 2-2 Feladat 2-2 Feladat 2-3 Feladat 2-3 Feladat 2-4 Feladat 2-4

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

    89 Szervezetek Szervezetek Microsoft Microsoft Microsoft Press Microsoft Press W3C W3C Érdekes site-ok Érdekes site-ok SBN Workshop SBN Workshop MSDN MSDN WebReference.com WebReference.com WebReview.com WebReview.com

    90 17. gyakorlat

    91 Táblázatokat használó lap Táblázatokat használó lap Feladatok Feladatok Feladat 2-1 Feladat 2-1 Feladat 2-2 Feladat 2-2 Feladat 2-3 Feladat 2-3 Feladat 2-4 Feladat 2-4

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

    93 Szervezetek Szervezetek Microsoft Microsoft Microsoft Press Microsoft Press W3C W3C Érdekes site-ok Érdekes site-ok SBN Workshop SBN Workshop MSDN MSDN WebReference.com WebReference.com WebReview.com WebReview.com

    94 18. gyakorlat

    95 Feladat 1-15 Feladat 1-15

    96 Elso00.html Ez az első keret. Ez az első keret.

    97 Masodik00.html Ez a második keret. Ez a második keret.

    98 Harmadik00.html Ez a harmadik keret. Ez a harmadik keret.

    99 19. gyakorlat

    100

    101 20. gyakorlat

    102

    103 Navigal.html Első keret Első keret Második keret Második keret Harmadik keret Harmadik keret

    104 21. gyakorlat

    105

    Ebben a fieldset-ben nincs LEGEND.
    Ez a szöveg az 1. fieldset után jön. 2. Fieldset 2. Fieldset Ez a 2. fieldset belsejében van. Ez a szöveg az 2. fieldset után jön.

    106 3. Fieldset 3. Fieldset Ez a harmadik Fieldset-ben van. Ez a szöveg az 3. fieldset után jön.

    4. Fieldset 4. Fieldset 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
    Microsoft Microsoft W3C W3C Microsoft Press Microsoft Press

    109 23. gyakorlat

    110 Az itt látható szöveg egy SPAN- ben van.


    Ez itt pedig egy 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

    Ez a paragrafus vastag, dőlt betűs, és aláhúzott tagokat tartalmaz. dőlt betűs, és aláhúzott tagokat tartalmaz.

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

    113 25. gyakorlat

    114 Vastag betűkkel kiírjuk, hogy az X kisebb, mint az Y: X<Y. Ez a paragrafus karakter egyedet használ.


    Vastag betűkkel kiírjuk, hogy az X kisebb, mint az Y: X. Ez a paragrafus nem használ karakter egyedet.

    115 VÉGE


    Letölteni ppt "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."

    Hasonló előadás


    Google Hirdetések