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 oldal felépítése Készítette: Pataki Arnold

Hasonló előadás


Az előadások a következő témára: "HTML oldal felépítése Készítette: Pataki Arnold"— Előadás másolata:

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

2 Html fogalma Hivatkozás, link Készítése Táblázat Kódjai Gyakorlat
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

3 HTML fogalma X A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki. Egy weblap készíthető egy erre szolgáló programmal (FrontPage, Nvu), vagy Jegyzettömbbel. Menü

4 Hogyan készítsünk weblapot Jegyzettömbbel?
X Hogyan készítsünk weblapot Jegyzettömbbel? Jegyzettömbbe írjuk a parancsokat és a weblap tartalmát, és a böngészőben leellenőrizzük a munkánkat. Menü

5 Alapkódok X <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> Tag=parancs Ezek a tag-ek. A legtöbb parancsot / jellel zárjuk le. Menü

6 Bekezdés formázás X Menü 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> Számozott felsorolás: <ol> <li> 1. sor <li> 2. sor </ol> Pontozott felsorolás: <ul> </ul> <hr> vízszintes vonal (erre is érvényesek - mint később láthatjuk a képeknél – a paraméterek) Menü

7 Karakter formázás X Menü
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> 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. <strike> áthúzott </strike> <em> karcsúsított</em> <sub> alsó index</sub> <sup> felső index</sup> <font size=12> betűméret</font> Menü

8 Lehet az egész szó, de lehet így is.
Stílusok, színek X Lehet az egész szó, de lehet így is. <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 Menü

9 X Menü

10 X Menü

11 X Menü

12 Kép beillesztés X 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"> Menü

13 Hivatkozás, link X Parancsa: <a href> </a>
Másik fájlra: <a href="valami.html"> Valami</a> Létező weblapra: <a href=„http://wikipedia.org"> Wikipedia</a> címre: <a Valaki</a> Menü

14 <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 -t:<a Arnold</a></font></font> Gyakorlat Lehet tetszőleges kép is, csak az a fontos, hogy egy mappában(pl. Asztal) legyen a HTML fájllal! Menü X

15 Táblázat felépítése, paraméterei
X Parancsa: <table> </table> táblázat <tr> </tr> új sor <td> cella szövege</td> cella Paraméterei: width szélesség, heightmagasság, bgcolorháttérszín(cella, sor, táblázat), borderkeret(táblázat), cellspacingcellák közti távolság, cellpadingszegély és a szöveg közti távolság, colspancellaegyesítés vízszintesen, rowspan cellaegyesítés függőlegesen, alignigazítás vízszintesen, valigncellaigazítás függőlegesen(top: fent, middle: közép, bottom: lent). Menü

16 X Menü Ez lesz a táblázat. <table cellpadding="0" border="1">
<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 -t:<a Arnold</a></font></font> <table cellpadding="0" border="1"> <tr> <td> I. sor 1. elem </td> <p>I. sor 2. elem</p> <p>I. sor 3. elem</p> </tr> <p>II. sor 1. elem</p> <p>II. sor 2. elem</p> <p>II. sor 3. elem</p> </table> </pre> </body> </html> Ez lesz a táblázat.

17 X Itt ellenőrizheted le magadat. Menü
Következő két órán ezeket vesszük át, utána elméleti, majd gyakorlati dolgozat. Menü

18 Melyik programmal NEM lehet weblapot írni?
A Kvíz indul Melyik programmal NEM lehet weblapot írni? a) Jegyzettömb b) Internet Explorer c) FrontPage

19 Melyik színmegadás helyes?
Jó válasz! 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?
Jó válasz! Melyik paranccsal adhatjuk meg, hogy a háttér egy kép legyen? a) img src b) background c) bgcolor

21 Melyik parancsnak NINCS lezáró tagja?
Jó válasz! Melyik parancsnak NINCS lezáró tagja? a) br b) a href c) b

22 Melyik parancs hatására lesz az alma szó ilyen?
Jó válasz! Melyik parancs hatására lesz az alma szó ilyen? a) <b> alma</b> b) <b><i><u> alma</b></i></u> c) <b><u><i> alma</i></u></b>

23 Rossz válasz! Újrakezdem a kvízt Menü

24 Újra megcsinálom a kvíz
Gratulálok, nyertél! Újra megcsinálom a kvíz Menü

25 Köszönöm megtisztelő figyelmüket!
Források Menü Órai füzet Köszönöm megtisztelő figyelmüket! Bezárás


Letölteni ppt "HTML oldal felépítése Készítette: Pataki Arnold"