Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Hyper Text Markup Language
HTML Hyper Text Markup Language HTML
2
HTML tag-ek <TagNeve> közbülső rész, amire vonatkozik
<TagNeve paraméter_1="érték_1" paraméter_2="érték_2" …> HTML
3
A HTML struktúra </HTML> <BODY> </BODY> <HTML>
Ide kerül minden, ami a weblaphoz tartozik </HTML> <BODY> Ide kerül minden, amit a weblapon látni szeretnénk </BODY> HTML
4
Első html oldal kódja <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Az első oldal címe </title> </head> <body> Az első oldal tartalma </body> </html> HTML
5
Stílusok, címsorok, stb. <b>Kövér betűk (bold) </b>
<i>Dőlt betűk (italic)</i> <u>Aláhúzott betűk (underlined) </u> <h1>1-es címsor </h1> … <h6>6-os címsor </h6> Sortörés: <br> Vízszintes vonal: <hr> HTML
6
Betűméret, betűtípus, betűszín
<font size ="4"> 4-es betűméret </font> <font size ="+2"> Kettővel nagyobb </font> <font face ="Arial">Arial betűtípus. </font> Ajánlott betűtípusok: Arial, Verdana, Tahoma, Courier <font color=red> Piros szöveg</font> HTML
7
Hiperlinkek, hiperhivatkozások
<a href="oldal címe"> szöveg </a> Példa: <a href=" Iskolám honlapja </a> Megnyitás új ablakban: <a target="_blank" href =" HTML
8
Képek elhelyezése az oldalon
<img src="apaczai_cimer.gif"> Fontos paraméterek: border: 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 egeret HTML
9
Háttérszín és háttérkép
<body bgcolor=red> <body bgcolor=#7af428> <body background="Naplemente.jpg"> (Csak egy <body …> lehet egy html fileban!) HTML
10
Kevert színek 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ó hexadecimális kóddal: 00-tól FF-ig Példa: Fehér: #FFFFFF Fekete: #000000 Piros: #FF0000 <font color=”#32F8A7”>zöldeskék</font> HTML
![Kevert színek 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ó.](http://slideplayer.hu/slide/2237390/8/images/10/Kevert+sz%C3%ADnek+3+alapsz%C3%ADn%3A+%28R%3Dred+%5Bpiros%5D%3B+G%3Dgreen+%5Bz%C3%B6ld%5D%3B+B%3Dblue+%5Bk%C3%A9k%5D%29+A+3+sz%C3%ADn+er%C5%91ss%C3%A9ge+0-t%C3%B3l+255-ig+%C3%A1ll%C3%ADthat%C3%B3..jpg "hexadecimális kóddal: 00-tól FF-ig. Példa: Fehér: #FFFFFF. Fekete: # Piros: #FF0000. <font color= #32F8A7 >zöldeskék</font> HTML.")
11
Táblázatok <table> <tr> <td>1. sor 1. cella </td> <td>1. sor 2. cella </td> </tr> </table> 1. sor 1. cella 1. sor 2. cella HTML
12
A <table> tag paraméterei
width: szélesség megadása képpontokban align: balra - left, középre - center, jobbra - right border: a szegély vastagsága cellspacing: cellák közti távolság cellpadding: cellamargó HTML
13
A <td> tag paraméterei
width: szélesség megadása képpontokban height: magasság megadása képpontokban align: cellán belüli igazítás colspan: az adott cella ennyi oszlop széles lesz rowspan: az adott cella ennyi sor magas lesz HTML
14
CSS A CSS angol mozaikszó: Cascading Style Sheet. Magyarul egyszerűen legyen stíluslap. Stíluslap elhelyezése a kódban: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Az oldal címe</title> <STYLE TYPE="text/css"> [a stíluslap] </STYLE> </head> <body>Az oldal tartalma</body> </html> HTML
15
Stíluslap részei szelektor { tulajdonság_1: érték;
… } HTML
16
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. HTML
17
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 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-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 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. 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. HTML
Hasonló előadás
