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.
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
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ü
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ü
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ü
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ü
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ü
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ü
X Menü
X Menü
X Menü
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ü
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> Email címre: <a href=„mailto:valaki@szolgáltató.országkód"> Valaki</a> Menü
<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:arnoldpataki97@gmail.com">Pataki 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
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, 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). Menü
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 e-mail-t:<a href="mailto:arnoldpataki97@gmail.com">Pataki 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.
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ü
Melyik programmal NEM lehet weblapot írni? A Kvíz indul Melyik programmal NEM lehet weblapot írni? a) Jegyzettömb b) Internet Explorer c) FrontPage
Melyik színmegadás helyes? Jó válasz! Melyik színmegadás helyes? a) text=„kék” b) text=„NXY.56” c) text=„blue”
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
Melyik parancsnak NINCS lezáró tagja? Jó válasz! Melyik parancsnak NINCS lezáró tagja? a) br b) a href c) b
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>
Rossz válasz! Újrakezdem a kvízt Menü
Újra megcsinálom a kvíz Gratulálok, nyertél! Újra megcsinálom a kvíz Menü
Köszönöm megtisztelő figyelmüket! Források Menü http://pcsysak.uw.hu/html2.html http://progkor.inf.elte.hu/html/szinek.htm www.google.hu Órai füzet Köszönöm megtisztelő figyelmüket! Bezárás