HTML kódolás Web-lap felépítése <HTML> web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól <HEAD> fejléc kezdő utasítás: a böngészőnek és a kereső robotoknak szóló elemek Fejléc elemek, <META> -val kezdődnek, több is lehet <TITLE> A dokumentum neve </TITLE> a böngészőnek a címsorán jelenik meg (ha nincs, akkor a fájl neve jelenik meg) </HEAD> fejléc záró utasítás <BODY> törzs kezdő utasítás: ez alatt adjuk meg a megjeleníteni kívánt tartalmat Html utasítások, szöveg, kép, táblázat, stb. </BODY> törzs záró utasítás </HTML> web-lap záró utasítás Az utasítások (<TAG>, ejtsd: teg) néhány kivételtől eltekintve párból állnak. Van egy nyitó (<HTML>) és egy lezáró (</HTML>) utasítás. Az utóbbi mindig per-jellel (/) kezdődik! A nyitó és a záró teg-hez képest kicsit beljebb kezdjük a benne lévő utasítást, szöveget Ez az elrendezés egyfajta tagolást ad, megkönnyítve az utólagos eligazodást a kódban, így előbb megtalálhatjuk a módosítandó részt. HEAD fejléc TITLE cím, (az oldal elnevezése) BODY törzs Az egész törzsre érvényes utasítás <BODY BACKGROUND="elérési_út/fájlnév.kit" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" VLINK="színkód" ALINK="színkód"> BACKGROUND="elérési_út/fájlnév.kit": a dokumentum hátteréül szolgáló képfájlt jelölhetjük ki BGCOLOR="színkód": a dokumentum háttérszínét a színkóddal jelölhetjük ki (Amennyiben háttérfájlt is megadunk, akkor a háttérszín csak. a keretek szegélyében látszik.) TEXT="színkód": a dokumentumban a szöveg alapértelmezett színét jelölhetjük ki LINK="színkód": a hivatkozás színét határozza meg, mielőtt még rákattintunk ALINK="színkód": a hivatkozás színét határozza meg, amikor rákattintunk VLINK="színkód": a már bejárt hivatkozások színét határozza meg, miután visszatértünk 1
Színkód megadása történhet: szín neve (< text= red > hexadecimális RGB-kód (< text= #ff0000 > decimális RGB-kód(< color: rgb(255,0,0) > stílus utasításban) BACKGROUND háttér LINK összekapcsol, összefűz BGCOLOR háttérszín (BG BackGround) ALINK aktív LINK (A Aktív) TEXT szöveg VLINK látogatott LINK (V Visitor) Bekezdés és egyéb <P> a bekezdés kezdetét jelzi, egyúttal új sorban is jeleníti azt meg A bekezdés igazítható: <P ALIGN="hely"> a hely: left balra, center középre, right jobbra, justify - sorkizárt <NOBR> vagy <NOWRAP>: tiltja az automatikus sortörést, az egész szöveg egy sorban jelenik meg (görgetősáv alul) </NOBR> vagy </NOWRAP>: ismét engedi az automatikus sortörést <BR>: sortörés, az utána következő rész új sorba kerül nem törhető szóköz (vagy kötelező szóköz), nincs <> jelben <FONT COLOR= színkód SIZE= méret FACE= betűtípus > szöveg </FONT> beállítja a szöveg színét, méretét, típusát <HR>: vízszintes vonal (</HR> elhagyható) P bekezdés (Paragraph) NOBR nem törhető sor (NOBReak) BR újsor (BR BReak) &NBSP; kötelező szóköz (NoBreakSPace) FONT betű SIZE méret FACE betűtípus HR vízszintes vonal (Horizontal Ruler) Hivatkozások Külső web-címre: <A HREF="protokoll://URL cím"> hivatkozás (LINK) szövege </A> Saját web-lapon belül, adott helyre: <A HREF="#jelző"> szöveg </A> innen fog ugrani <A NAME="jelző"> szöveg </A> ide fog ugrani (a szöveg elhagyható, akkor semmi nem látható a lapon, de oda ugrik) A jelző -nek a két helyen meg kell egyezni! 2
Külső web-címre, de a lapon belül megadott helyre (saját lapjaink esetén készíthetünk ilyent): <A HREF="protokoll://URL cím#jelző"> hivatkozás </A> innen fog ugrani a megadott lapra az ott megadott helyre (másik szerverere) <A NAME="jelző"> szöveg </A> a külső lapon ide fog ugrani Külső web-lapra (saját fálra), de a lapon belül megadott helyre (saját lapjaink esetén, azonos mappán belül): <A HREF="protokoll://elérési_út/fájlnév.kit#jelző"> hivatkozás </A> innen fog ugrani a megadott lapra az ott megadott helyre <A NAME="jelző"> szöveg </A> a külső weblapon (fájl) ide fog ugrani A horgony (Anchor) HREF hiperkapcsolat referencia (Hyperlink REFerence) NAME név protokoll kapcsolódási szabály Képek elhelyezése <IMG ALIGN="hely" SRC="elérési_út/fájlnév.kit" HSPACE="vszám" VSPACE="fszám" WIDTH="szélesség" HEIGHT="magasság" ALT="szöveg" TITLE="szöveg"> ALIGN=="hely": a hely: left balra, right jobbra, top - felül, middle közép, bottom alul (a képhez képest a szöveg helyzete) SRC ="elérési_út/fájlnév.kit": a kép helye a lemezen és neve, kiterjesztése HSPACE="vszám": a kép melletti vízszintes távolságot (margó) határozza meg VSPACE="vszám": a kép melletti a függőleges távolságot (margó) határozza meg WIDTH="szélesség": a kép szélességét határozza meg pixelben (ezzel az eredeti mérettől eltérhetünk a megjelenítésben) HEIGHT="magasság": a kép magasságát határozza meg (pixelben (ezzel az eredeti mérettől eltérhetünk a megjelenítésben) ALT="szöveg": ha nem tudja betölteni a képet, ez a szöveg jelenik meg a kép helyét jelző négyszögben TITLE="szöveg": ez a szöveg jelenik meg, ha a kép fölé visszük az egeret IMG kép (IMaGe) SRC adatforrás (SouRCe) NAME név HSPACE vízszintes helyköz (H Horizontal) VSPACE függőleges helyköz (V Vertical) WIDTH szélesség HEIGHT magasság ALT választható (ALT alternatív) 3
Lista Számozott lista <OL> nyitó utasítás <LH> listafejlécet jelzi, elhagyható </LH> (a záró utasítás elhagyható) további listaelemek </OL> záró utasítás Számozatlan lista <UL> nyitó utasítás <LH> listafejlécet jelzi, elhagyható </LH> (a záró utasítás elhagyható) további listaelemek </UL> záró utasítás OL számozott (rendezett) lista (Ordered List) LH lista fejléc (Lista Header) LI lista elem (List Item) UL felsorolás (nem rendezett lista) (Unordered List) Táblázat <TABLE BORDER="szám" ALIGN="hely" CELLPADDING="pszám" CELLSPACING="kszám" BGCOLOR="színkód" BACKGROUND="elérési_út/fájlnév.kit"> BORDER="szám": a táblázatszegély vastagsága pixelben ALIGN="hely": a táblázat igazítása az oldalon belül, hely: left balra, center középre, right jobbra CELLPADDING="pszám" : a tartalom ilyen távolságra lesz a cella szélétől pixelben (belső margó) CELLSPACING="kszám" : a cellák távolsága pixelben (a cellák közti keret) BGCOLOR="színkód": a táblázat hátterének színe BACKGROUND="elérési_út/fájlnév.kit": a táblázatnak a háttérképe (a táblázat háttérszíne nem látszik) 4
A egyes cellákra vonatkozó utasítások COLSPAN="szám": több egymással szomszédos cellát egyesít vízszintesen ROWSPAN="szám": több egymás alatti cellát egyesít függőlegesen ALIGN="hely": a cellák tartalmát igazítja vízszintesen. A hely: left, center, right, justify, decimal VALIGN="hely": a cellák tartalmát függőlegesen igazítja. A hely: top, middle, bottom BGCOLOR="színkód": a cella hátterének színe BACKGROUND="elérési_út/fájlnév.kit": a táblázat cellának a háttérképe (a háttér színe nem látszik) A tábla szerkezeti felépítése: <TABLE > a tábla nyitó utasítása <CAPTION>A táblázat címe </CAPTION> a táblázat fölött jeleníti meg <TR> első sor nyitó utasítása <TH> 1. oszlop fejléce </TH> (a záró utasítás elhagyható, félkövér szöveg lesz) <TH> további oszlopok fejléce </TR> (első sor záró utasítása, elhagyható, a következő sor automatikusan lezárja) <TR> következő sor nyitó utasítása <TD> 1. oszlop adata </TD> (a záró utasítás elhagyható) <TD> további oszlopok adata </TR> sor záró utasítása további sorok és oszlopok </TABLE> a tábla záró utasítása TABLE táblázat CAPTION cím, felírat BORDER keret, cellakeret TR tábla sora (Table Row) TH fejléc (táblázat oszlop sor) (Table Header) TD tábla (cella) adata (Table Data) CELLPADDING cellaszegély és szöveg távolság (CELLa PADDING helykitöltés) CELLSPACING cellatávolság (CELLa SPACING ritkítás) COLSPAN oszlop összevonás (COLumn SPAN) ROWSPAN sor összevonás (ROWs SPAN) 5
Színek neve és kódja A linken a színek elnevezése, kódja található: http://hu.wikipedia.org/wiki/html-színkódok A VGA 16 színe (név és hexakódja: 6