Készítette: Nagy-Szakál Zoltán 2007. HTML alapok Készítette: Nagy-Szakál Zoltán 2007.
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
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Ó>
HTML oldalak alapszerkezete <HTML> <HEAD> <TITLE> … </TITLE> </HEAD> <BODY> … </BODY> </HTML>
<HTML> tag HTML szabvány szerint készült Nincs paramétere Mindig le kell zárni!
<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!
<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)
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)
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!
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=”http://valami.hu”>Link szövege</A>
Elválasztó vonal Vízszintes vonal beszúrása: <HR color=”blue” size=”10” width=”50%” align=”right”> Nincs lezárás!
Szabvány méretű fejlécek <Hx>Címsor x</Hx> x=1…6 align=”…”
Listák Rendezett lista <ol type=”1” (A, a, I, i)> </ol> <li> listaelem </ol>
Listák Rendezetlen lista (unordered list) <ul> <li> listaelem </ul>
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
Táblázatok <TR> (új sor) height=”25%” (magasság) bgcolor=”lightyellow” (háttérszín) LEZÁRÁS
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
Keretes szerkezetű oldalak Táblázattal
Keretes szerkezetű oldalak Hagyományos keretek alkalmazásával
Könyvjelzők használata <a href=”#azonosíto1”>1. könyvjelző</a> … <p id=”azonosíto1”> </p>
Új oldal betöltése megadott idő múlva <head> <meta http-equiv=refresh content=”10; url=http://www.ujoldal.hu”> </head>
Karakterkészlet beállítása <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2”> </head>
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)
Definiciós lista <DL> <DT>meghatározás <DD>leírás </DL>