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

HTML HTML Hyper Text Markup Language. HTML HTML tag-ek közbülső rész, amire vonatkozik közbülső rész, amire vonatkozik közbülső rész,

Hasonló előadás


Az előadások a következő témára: "HTML HTML Hyper Text Markup Language. HTML HTML tag-ek közbülső rész, amire vonatkozik közbülső rész, amire vonatkozik közbülső rész,"— Előadás másolata:

1 HTML HTML Hyper Text Markup Language

2 HTML HTML tag-ek közbülső rész, amire vonatkozik közbülső rész, amire vonatkozik közbülső rész, amire vonatkozik közbülső rész, amire vonatkozik

3 HTML A HTML struktúra Ide kerül minden, ami a weblaphoz tartozikIde kerül minden, ami a weblaphoz tartozik Ide kerül minden, amit a weblapon látni szeretnénkIde kerül minden, amit a weblapon látni szeretnénk

4 HTML Első html oldal kódja Az első oldal címe Az első oldal címe Az első oldal tartalma Az első oldal tartalma

5 HTML Stílusok, címsorok, stb. Kövér betűk (bold) Kövér betűk (bold) Dőlt betűk (italic) Dőlt betűk (italic) Aláhúzott betűk (underlined) Aláhúzott betűk (underlined) 1-es címsor … 1-es címsor … 6-os címsor 6-os címsor Sortörés: Sortörés: Vízszintes vonal: Vízszintes vonal:

6 HTML Betűméret, betűtípus, betűszín 4-es betűméret 4-es betűméret Kettővel nagyobb Kettővel nagyobb Arial betűtípus. Arial betűtípus. Ajánlott betűtípusok: Arial, Verdana, Tahoma, Courier Piros szöveg Piros szöveg

7 HTML Hiperlinkek, hiperhivatkozások szöveg szöveg Példa: Példa: Iskolám honlapja Iskolám honlapja Megnyitás új ablakban: Megnyitás új ablakban:

8 HTML Képek elhelyezése az oldalon Fontos paraméterek: Fontos paraméterek: border: a kép köré rajzolandó szegély vastagságának megadásaborder: a kép köré rajzolandó szegély vastagságának megadása title: akkor jelenik meg ez a szöveg, ha a kép fölé visszük az egerettitle: akkor jelenik meg ez a szöveg, ha a kép fölé visszük az egeret

9 HTML Háttérszín és háttérkép (Csak egy lehet egy html fileban!) (Csak egy lehet egy html fileban!)

10 HTML Kevert színek 3 alapszín: (R=red [piros]; G=green [zöld]; B=blue [kék]) 3 alapszín: (R=red [piros]; G=green [zöld]; B=blue [kék]) A 3 szín erőssége 0-tól 255-ig állítható A 3 szín erőssége 0-tól 255-ig állítható hexadecimális kóddal: 00-tól FF-ig hexadecimális kóddal: 00-tól FF-ig Példa: Példa: Fehér:#FFFFFF Fekete:# Piros:#FF0000 zöldeskék zöldeskék

11 HTML Táblázatok 1. sor 1. cella 1. sor 2. cella 1. sor 1. cella 1. sor 2. cella 1. sor 1. cella 1. sor 2. cella

12 HTML A tag paraméterei width: szélesség megadása képpontokban width: szélesség megadása képpontokban align: balra - left, középre - center, jobbra - right align: balra - left, középre - center, jobbra - right border: a szegély vastagsága border: a szegély vastagsága cellspacing: cellák közti távolság cellspacing: cellák közti távolság cellpadding: cellamargó cellpadding: cellamargó

13 HTML A tag paraméterei width: szélesség megadása képpontokban width: szélesség megadása képpontokban height: magasság megadása képpontokban height: magasság megadása képpontokban align: cellán belüli igazítás align: cellán belüli igazítás colspan: az adott cella ennyi oszlop széles lesz colspan: az adott cella ennyi oszlop széles lesz rowspan: az adott cella ennyi sor magas lesz rowspan: az adott cella ennyi sor magas lesz

14 HTML CSS A CSS angol mozaikszó: Cascading Style Sheet. Magyarul egyszerűen legyen stíluslap. A CSS angol mozaikszó: Cascading Style Sheet. Magyarul egyszerűen legyen stíluslap. Stíluslap elhelyezése a kódban: Stíluslap elhelyezése a kódban: Az oldal címe Az oldal címe [a stíluslap] [a stíluslap] Az oldal tartalma Az oldal tartalma

15 HTML Stíluslap részei szelektor { tulajdonság_1: érték; tulajdonság_1: érték; tulajdonság_2: érték; tulajdonság_2: érték; … }

16 HTML Szelektorok Szelektor lehet a tag-eg neve: Peldául: body (lap), p (bekezdés), b (félkövér), i (dőlt), u (aláhúzott), a (hiperhivatkozás) stb... De lehet: az a (hiperhivatkozás)-hoz tartozó látszólagos elemek: a:link az olyan linkekre vonatkozó szelektor, amiket még nem látogattunk meg a:visited a már meglátogatott linkek szelektora a:hover azon linkek szelektora, amelyik felett éppen az egérkurzor áll a p (bekezdés)-hez tartozó látszólagos elemek: p:first-line a bekezdéshez tartozó első sor szelektora p:first-letter a bekezdés első betűjére vonatkozó szelektor, ezáltal lehet iniciálékat rendelni a bekezdésekhez.

17 HTML Néhány szöveg tulajdonság color: szín; a szöveg színét befolyásolja, az értékét a TAG-eknél tárgyalthoz hasonlóan lehet megadni color: szín; a szöveg színét befolyásolja, az értékét a TAG-eknél tárgyalthoz hasonlóan lehet megadni text-align: igazítás; igazítás lehetséges értékei: left; center; right; justify; text-align: igazítás; igazítás lehetséges értékei: left; center; right; justify; font-family: "betűcsalád"; az egyszerűség kedvéért használjunk alap betűcsaládokat, ezek nevét például: "Arial" "Times New Roman" "Courier New" stb... font-family: "betűcsalád"; az egyszerűség kedvéért használjunk alap betűcsaládokat, ezek nevét például: "Arial" "Times New Roman" "Courier New" stb... font-size: méret mértékegységgel; mértékegység lehet: em, 1em az alap betűméretet adja meg, 1.5em ennél másfélszer nagyobb. Mértékegység lehet még px (pixel) is. 12px általában 1em. A CSS a számszerű értékek többségéhez kér mértékegységet, anélkül csúnya dolgokat művel !!! font-size: méret mértékegységgel; mértékegység lehet: em, 1em az alap betűméretet adja meg, 1.5em ennél másfélszer nagyobb. Mértékegység lehet még px (pixel) is. 12px általában 1em. A CSS a számszerű értékek többségéhez kér mértékegységet, anélkül csúnya dolgokat művel !!! text-decoration: dekoráció; dekoráció lehet: underline (aláhúzás) overline (felülhúzás) line-through (áthúzás) blink (villogtatás) ezeket a dekorációkat kombinálni is lehet úgy, hogy szóközzel elválasztva egymás mögé írjuk őket text-decoration: dekoráció; dekoráció lehet: underline (aláhúzás) overline (felülhúzás) line-through (áthúzás) blink (villogtatás) ezeket a dekorációkat kombinálni is lehet úgy, hogy szóközzel elválasztva egymás mögé írjuk őket font-weight: kövérség; ha normál félkövér betűt akarunk akkor itt adhatjuk meg a bold értéket, de a CSS ismer bolder (kövérebb), és lighter (vékonyabb) értéket is. font-weight: kövérség; ha normál félkövér betűt akarunk akkor itt adhatjuk meg a bold értéket, de a CSS ismer bolder (kövérebb), és lighter (vékonyabb) értéket is. font-stlye: stílusjegy; ha dölt betűt akarunk itt adhatjuk meg az italic értéket. font-stlye: stílusjegy; ha dölt betűt akarunk itt adhatjuk meg az italic értéket. letter-spacing: méret mértékegységgel; a betűk közötti távolságot adhatjuk adhatjuk meg. letter-spacing: méret mértékegységgel; a betűk közötti távolságot adhatjuk adhatjuk meg. word-spacing: méret mértékegységgel; a szavak közötti távolságot adhatjuk meg. word-spacing: méret mértékegységgel; a szavak közötti távolságot adhatjuk meg.


Letölteni ppt "HTML HTML Hyper Text Markup Language. HTML HTML tag-ek közbülső rész, amire vonatkozik közbülső rész, amire vonatkozik közbülső rész,"
Google Hirdetések