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

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

 jobbra• ú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: <tt>• félkövér• dőlt• aláhúzott• <tt> írógép</tt>• <tt> vegyes</tt>

• <big> nagybetű</big>

• kisbetű

X

Menü

Karakter formázás

• <strike> áthúzott </strike>• karcsúsított

• alsó index

• felső index• betűméret

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

• 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

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><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=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: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 e-mail-t:<a href="mailto:[email protected]">Pataki Arnold</a>

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>• I. sor 2. elem• </td>• <td>• I. sor 3. elem• </td>• </tr>• <tr>• <td>• II. sor 1. elem• </td>• <td>• II. sor 2. elem• </td>• <td>• II. sor 3. elem• </td>• </tr>• </table>• </pre>• </body>• </html>

<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=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: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 e-mail-t:<a href="mailto:[email protected]">Pataki Arnold</a>

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) alma

c) alma

b) alma

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ü

TMKIT Vörösmarty Tagintézmény 5900 Orosháza, Vörösmarty u. 4.

Documents

Transcript of TMKIT Vörösmarty Tagintézmény 5900 Orosháza, Vörösmarty u. 4.