TMKIT Vörösmarty Tagintézmény 5900 Orosháza, Vörösmarty u. 4.
description
Transcript of TMKIT Vörösmarty Tagintézmény 5900 Orosháza, Vörösmarty u. 4.
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ü