Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Készítette: Nagy-Szakál Zoltán 2007.
HTML alapok Készítette: Nagy-Szakál Zoltán 2007.
2
Mi az a HTML dokumentum? Egy standard szövegfájl .html vagy .htm kiterjesztéssel, mely speciális formázó utasításokat tartalmaz. Szerkesztése: Notepad (Jegyzettömb) Web szerkesztő programok Megjelenítése: Böngésző programmal
3
Mi az a „TAG”? A HTML dokumentumok formázó utasítása. Felépítése: <AZONOSÍTÓ paraméter=”érték” paraméter=”érték”> Szöveg </AZONOSÍTÓ>
4
HTML oldalak alapszerkezete
<HTML> <HEAD> <TITLE> … </TITLE> </HEAD> <BODY> … </BODY> </HTML>
5
<HTML> tag HTML szabvány szerint készült Nincs paramétere
Mindig le kell zárni!
6
<HEAD> tag HTML oldal fej-része Információk elhelyezése
<TITLE> A HTML oldal címe (fejléce) – a böngésző címsorában jelenik meg Paramétere nincs Mindig le kell zárni!
7
<BODY> tag A HTML oldal törzse
A nyitó és a záró tag közé írt szöveget értelmezi és megjeleníti a böngésző. Mindig le kell zárni! Paraméterei: bgcolor=”red” (oldal háttérszíne) background=”hatterkep.jpg” (háttérkép)
8
Bekezdés, sortörés, szóköz
<P> (új bekezdés nyitása) Mindig le kell zárni! align=”center” (”left”; ”right”; ”justify”) <BR> (sortörés) Nem kell lezárni (szóköz)
9
Betűtípus, -jelleg <FONT> size=”5” (méret) color=”yellow” (szín)
face=”arial” (betűtípus) vagy style=”font-size:36; color:yellow; font-family:arial” <B> (vastag) <I> (dőlt) <U> aláhúzott Lezárás!
10
Képek, linkek Kép beszúrása (méret megadással, kerettel):
<IMG src=”kepneve.jpg” border=”10” width=”100” height=”50” style=”border-color:white”> Nincs lezárás Link beszúrása: <A href=” szövege</A>
11
Elválasztó vonal Vízszintes vonal beszúrása:
<HR color=”blue” size=”10” width=”50%” align=”right”> Nincs lezárás!
12
Szabvány méretű fejlécek
<Hx>Címsor x</Hx> x=1…6 align=”…”
13
Listák Rendezett lista <ol type=”1” (A, a, I, i)> </ol>
<li> listaelem </ol>
14
Listák Rendezetlen lista (unordered list) <ul>
<li> listaelem </ul>
15
Táblázatok <TABLE> (táblázat beillesztése)
align=”…” (táblázat igazítása) border=”1” (keretvonal) height=”80%” (magasság) width=”60%” (szélesség) cellspacing=”0” (cellatávolság) cellpadding=”0” (cellamargó) LEZÁRÁS
16
Táblázatok <TR> (új sor) height=”25%” (magasság)
bgcolor=”lightyellow” (háttérszín) LEZÁRÁS
17
Táblázatok <TD> (új oszlop – cella – beillesztése)
align=”…” (tartalom vízszintes igazítása) valign=”…” (tartalom függőleges igazítása: top, center, bottom) width=”20%” (cellaszélesség) bgcolor=”blue” (cella háttérszíne) colspan=”4” (cellaegyesítés vízszintesen) rowspan=”2” (cellaegyesítés függőlegesen) LEZÁRÁS
18
Keretes szerkezetű oldalak
Táblázattal
19
Keretes szerkezetű oldalak
Hagyományos keretek alkalmazásával
20
Könyvjelzők használata
<a href=”#azonosíto1”>1. könyvjelző</a> … <p id=”azonosíto1”> </p>
21
Új oldal betöltése megadott idő múlva
<head> <meta http-equiv=refresh content=”10; url= </head>
22
Karakterkészlet beállítása
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso ”> </head>
23
Vízszintesen mozgó feliratok
<MARQUEE> … </MARQUEE> width (szélesség) height (magasság) direction (mozgás iránya – left, right) scrolldelay (mozgás sebessége) scrollamount (mozgás léptéke) loop (mozgás ismétlődés száma) bgcolor (háttérszín) hspace, vspace (vízszintes, függőleges margó) Behavior: ALTERNATE (ide-oda mozgás)
24
Definiciós lista <DL> <DT>meghatározás <DD>leírás </DL>
Hasonló előadás
