HTML oldal felépítése Készítette: Pataki Arnold

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 jobbra ú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: <tt> félkövér dőlt aláhúzott <tt> írógép</tt> <tt> vegyes</tt> <big> nagybetű</big> kisbetű 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> karcsúsított alsó index felső index betűméret Menü

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

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=„ Wikipedia</a> címre: <a Valaki</a> Menü

<html> <head><h1><blink>Üdvözöllek első weblapomon!</blink></h1> <title>Első weblapom</title> </head> <body bgcolor="lightblue" text=ffff00 link=ff0000 alink=0000ff vlink=5922ff> <pre> Ez egy futószöveg középen. <marquee height="36" width="90%" scrolldelay="55" scrollamount="3">Ez futószöveg, melynek színét, sebességét, betűméretét, középre, vagy oldalra helyezését a forrásban adhatod meg!</marquee> <img src="111229_fuvos00005.jpg" width=150> Ez egy sor jobbra igazítva. Ez egy új sor balra igazítva. Ez egy új, utolsó sor középre igazítva. <a href= 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: Menj lejjebb a kis kép után!<a href="111229_fuvos00004.jpg"><img src="111229_fuvos00004.jpg" width="50" hight="20"></a> Írj nekem -t:<a Arnold</a> 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, 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ü

X Menü Ez lesz a táblázat. <table cellpadding="0" border="1">
<html> <head><h1><blink>Üdvözöllek első weblapomon!</blink></h1> <title>Első weblapom</title> </head> <body bgcolor="lightblue" text=ffff00 link=ff0000 alink=0000ff vlink=5922ff> <pre> Ez egy futószöveg középen. <marquee height="36" width="90%" scrolldelay="55" scrollamount="3">Ez futószöveg, melynek színét, sebességét, betűméretét, középre, vagy oldalra helyezését a forrásban adhatod meg!</marquee> <img src="111229_fuvos00005.jpg" width=150> Ez egy sor jobbra igazítva. Ez egy új sor balra igazítva. Ez egy új, utolsó sor középre igazítva. <a href= 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: Menj lejjebb a kis kép után!<a href="111229_fuvos00004.jpg"><img src="111229_fuvos00004.jpg" width="50" hight="20"></a> Írj nekem -t:<a Arnold</a> <table cellpadding="0" border="1"> <tr> <td> I. sor 1. elem </td> I. sor 2. elem I. sor 3. elem </tr> II. sor 1. elem II. sor 2. elem II. sor 3. elem </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) alma b) alma c) alma

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ü Órai füzet Köszönöm megtisztelő figyelmüket! Bezárás

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:

Hasonló előadás

Projectumról

Visszajelzés

Bejelentkezés

A társadalmi hálózaton keresztül belépni:

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:

Hasonló előadás

Projectumról

Visszajelzés