tmkit vörösmarty tagintézmény 5900 orosháza, vörösmarty u. 4
DESCRIPTION
HTML oldal felépítése. Készítette: Pataki Arnold. Felkészítő tanár: Vargáné Gyömrei Anita. TMKIT Vörösmarty Tagintézmény 5900 Orosháza, Vörösmarty u. 4. X. Menü. Html fogalma. Hivatkozás, link. Készítése. Táblázat. Kódjai. Gyakorlat. Színei. Ellenőrzés. Kép. Kvíz. Források. - PowerPoint PPT PresentationTRANSCRIPT
1TMKIT Vörösmarty Tagintézmény
5900 Orosháza, Vörösmarty u. 4.
HTML oldal felépítése
Készítette: Pataki Arnold
Felkészítő tanár: Vargáné Gyömrei Anita
2
X
HTML fogalma
3
A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki.
X
Menü
Egy weblap készíthető egy erre szolgáló programmal (FrontPage, Nvu), vagy Jegyzettömbbel.
4
Jegyzettömbbe írjuk a parancsokat és a weblap tartalmát, és a böngészőben leellenőrizzük a munkánkat.
X
Menü
Hogyan készítsünk weblapot Jegyzettömbbel?
Alapkódok
5
• <html> A HTML dokumentum határait jelöli.• <head> Ezek a címkék a dokumentum
fejrészének határait jelölik.• <title> Ez az oldal neve• </title>• </head>• <body> A dokumentum törzsrészét határolja, az
itt található tartalmat jeleníti meg a böngésző.• </body>• </html>
Ezek a tag-ek.
Tag=parancs
A legtöbb parancsot / jellel zárjuk le.
X
Menü
Bekezdés formázás
6
• Fejléc <h1> - <h6>• left=balra, center=középre, right=jobbra, justify=sorkizárt
<p align="right"> jobbra</p>• <br> új sor• <pre>a szöveg úgy jelenik meg, ahogy legépeltük</pre>
X
Menü
• Számozott felsorolás: <ol>
<li> 1. sor
<li> 2. sor
</ol>• Pontozott felsorolás: <ul>
<li> 1. sor
<li> 2. sor
</ul>• <hr> vízszintes vonal (erre is érvényesek - mint később láthatjuk a képeknél – a paraméterek)
7
• Betűtípusok, stílusok: <b> <i> <u> <tt>• <b> félkövér</b>• <i> dőlt</i>• <u> aláhúzott</u>• <tt> írógép</tt>• <b><tt><u><i> vegyes</i></u></tt></b>
• <big> nagybetű</big>
• <small> kisbetű</small>
X
Menü
Karakter formázás
• <strike> áthúzott </strike>• <em> karcsúsított</em>
• <sub> alsó index</sub>
• <sup> felső index</sup>• <font size=12> betűméret</font>
Ezek voltak az alap parancsok. Majd következnek a Stílusok, színek; Kép beillesztése; Hivatkozás, link. Ezután gyakorlat, majd a Táblázat felépítése, paraméterei.
8
• <font face="Arial"> betűtípus</font>• <font color="blue"> betű</font>szín• <body text="yellow"> az egész szöveg betűszíne• <body bgcolor="red"> a színek nevét angolul kell
beírni• vagy kóddal: <body bgcolor="00ff22">• Színkódok a következő diákon
X
Menü
Stílusok, színekLehet az egész szó, de
lehet így is.
9
X
Menü
10
X
Menü
11
X
Menü
Kép beillesztés
12
• Ha képet szeretnénk háttérnek: <body background="fájlnév.kiterjesztés">
• <img src="fájlnév.kiterjesztés">
• Beállíthatjuk magasságát(height), szélességét(width), keretet adhatunk neki(border), és ha rávisszük a kurzort, szöveget is kiírhat(alt).
• <img src="fájlnév.kiterjesztés" height=100 width=250 border=2 alt="Ez egy kép">
X
Menü
Hivatkozás, link
13
• Parancsa: <a href> </a>• Másik fájlra: <a href="valami.html"> Valami</a>• Létező weblapra: <a href=„http://wikipedia.org">
Wikipedia</a>• Email címre: <a
href=„mailto:valaki@szolgáltató.országkód"> Valaki</a>
X
Menü
14
Lehet tetszőleges kép is, csak az a fontos, hogy egy mappában(pl. Asztal) legyen a HTML fájllal!
<html><head><h1><p align=center><blink>Üdvözöllek első weblapomon!</blink></p></h1><title>Első weblapom</title></head><body bgcolor="lightblue" text=ffff00 link=ff0000 alink=0000ff vlink=5922ff><pre><font face="Arial">Ez egy futószöveg középen. <marquee height="36" width="90%" scrolldelay="55" scrollamount="3"><Font color=59ff00><font size=36>Ez futószöveg, melynek <font color=blue>színét</font>, sebességét, betűméretét, középre, vagy oldalra helyezését a forrásban adhatod meg!</font></font></marquee></font><img src="111229_fuvos00005.jpg" width=150><font face="arial"><font size=3><p align=right>Ez egy sor jobbra igazítva.</p><p align=left>Ez egy új sor balra igazítva.</p><p align=center>Ez egy új, utolsó sor középre igazítva.</p><a href=http://ofze.hu/w><img src="111229_fuvos00002.jpg" width=300 border=3></a>
<a href="gyakorlás2.html">Kattints ide!</a>Ez egy kép, amire ha rákattintasz, megjelenik egy új oldalon eredeti méretben:<font size=12><font color="red">Menj lejjebb a kis kép után!</font></font><p align=right><a href="111229_fuvos00004.jpg"><img src="111229_fuvos00004.jpg" width="50" hight="20"></a></p>
Írj nekem e-mail-t:<a href="mailto:[email protected]">Pataki Arnold</a></font></font>
Gyakorlat
XMenü
Táblázat felépítése, paraméterei
15
•Parancsa: <table> </table> táblázat
<tr> </tr> új sor
<td> cella szövege</td> cella•Paraméterei: width szélesség, heightmagasság, bgcolorháttérszín(cella, sor, táblázat), borderkeret(táblázat), cellspacingcellák közti távolság, cellpadingszegély és a szöveg közti távolság, colspancellaegyesítés vízszintesen, rowspan cellaegyesítés függőlegesen, alignigazítás vízszintesen, valigncellaigazítás függőlegesen(top: fent, middle: közép, bottom: lent).
X
Menü
16
• <table cellpadding="0" border="1">• <tr>• <td>• I. sor 1. elem• </td>• <td>• <p>I. sor 2. elem</p>• </td>• <td>• <p>I. sor 3. elem</p>• </td>• </tr>• <tr>• <td>• <p>II. sor 1. elem</p>• </td>• <td>• <p>II. sor 2. elem</p>• </td>• <td>• <p>II. sor 3. elem</p>• </td>• </tr>• </table>• </pre>• </body>• </html>
<html><head><h1><p align=center><blink>Üdvözöllek első weblapomon!</blink></p></h1><title>Első weblapom</title></head><body bgcolor="lightblue" text=ffff00 link=ff0000 alink=0000ff vlink=5922ff><pre><font face="Arial">Ez egy futószöveg középen. <marquee height="36" width="90%" scrolldelay="55" scrollamount="3"><Font color=59ff00><font size=36>Ez futószöveg, melynek <font color=blue>színét</font>, sebességét, betűméretét, középre, vagy oldalra helyezését a forrásban adhatod meg!</font></font></marquee></font><img src="111229_fuvos00005.jpg" width=150><font face="arial"><font size=3><p align=right>Ez egy sor jobbra igazítva.</p><p align=left>Ez egy új sor balra igazítva.</p><p align=center>Ez egy új, utolsó sor középre igazítva.</p><a href=http://ofze.hu/w><img src="111229_fuvos00002.jpg" width=300 border=3></a>
<a href="gyakorlás2.html">Kattints ide!</a>Ez egy kép, amire ha rákattintasz, megjelenik egy új oldalon eredeti méretben:<font size=12><font color="red">Menj lejjebb a kis kép után!</font></font><p align=right><a href="111229_fuvos00004.jpg"><img src="111229_fuvos00004.jpg" width="50" hight="20"></a></p>
Írj nekem e-mail-t:<a href="mailto:[email protected]">Pataki Arnold</a></font></font>
Ez lesz a táblázat.
XMenü
17Következő két órán ezeket vesszük át, utána elméleti, majd gyakorlati dolgozat.
X
Menü
Itt ellenőrizheted le magadat.
18
Melyik programmal NEM lehet weblapot írni?
a) Jegyzettömb
c) FrontPage
b) Internet Explorer
19
Melyik színmegadás helyes?
a) text=„kék”
b) text=„NXY.56”
c) text=„blue”
20
Melyik paranccsal adhatjuk meg, hogy a háttér egy kép legyen?
a) img src
c) bgcolor
b) background
21
Melyik parancsnak NINCS lezáró tagja?
c) b
b) a href
a) br
22
Melyik parancs hatására lesz az alma szó ilyen?
a) <b> alma</b>
c) <b><u><i> alma</i></u></b>
b) <b><i><u> alma</b></i></u>
23
Újrakezdem a kvízt
Menü
24
Újra megcsinálom a kvíz
Menü
Források
25
http://pcsysak.uw.hu/html2.htmlhttp://progkor.inf.elte.hu/html/szinek.htmwww.google.huÓrai füzet
Bezárás
Menü