HTML kódok A www jelentése World Wide Web. A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki. A honlap felépítése (csak az alapok, a lista nem teljes): TAG-ek kacsacsőr közé írjuk: <beállítás> hatókörük van, ezért le kell őket zárni: </beállítás> a formázáshoz használjuk őket Fő típusok: <HTML> </HTML> <HEAD> o Ide kerül minden, ami a weblaphoz tartozik o Tartalma nem jelenik meg a böngészőben. o </HEAD> <TITLE> </TITLE> <BODY> </BODY> Head címke jelöli, a dokumentummal kapcsolatos tudnivalókat tartalmazza. o A tag-ek közé írt szöveg íródik be a böngésző címsorába. o Ide kerül minden, amit a weblapon látni szeretnénk o A BODY az a html jelölője, enélkül nincs oldal.
Kiegészítő TAG-ek Sortörés: <br /> Vízszintes vonal: <hr /> Bekezdés <div> blabla </div> - division (felosztás), blokk jellegű, lehet benne <p> elem Bekezdés <p> blabla </p> - paragrafus (bekezdés), nem lehet benne <div> elem Betűk stílusai: <b> Félkövér </b> <i> Dőlt </i> <u> Aláhúzott </u> Egyéb stílusok címsorok: o <h1>1-es címsor </h1> o egyéb: o <h6>6-os címsor </h6> o <blink> </blink> Villogó szöveg o <pre> </pre> - Előre formázott szöveg (preformatted). A szövegen belül a sortörések és a szóközök pontosan ott jelennek meg, ahol a html kódban szerepelnek Összetett formázás Amelyik belül van, azt kell először lezárni, mint a matekban a zárójelek: [(4+3)*2] Ezeket a formázásokat egyszerre is lehet alkalmazni Pl.: <b><font size=7 color=grey face= Verdana > o </font></b> Félkövér 7-es méretű szürke Verdana típusú Igazítás (bekezdések, hosszabb szövegek, képek, stb.) o <p align=left> balra igazított </p> o <p align=center> középre igazított </p> o <p align=right> jobbra igazított </p> o <p align=justify> sorkizárt </p>
Színek használata: Alapszínek (Erősségük állítása: 0-255-ig) R: Red G: Green B: Blue 16-os (hexadecimális) számrendszerbeli kóddal: 00-FF-ig Fehér: #FFFFFF Fekete: #000000 Piros: #FF0000 Névvel <font color=red> Piros szöveg</font> Kóddal <font color= #7af428 > Zöld szöveg</font> Háttérszín, szövegszín Háttérszín o <BODY bgcolor=blue> o <BODY bgcolor=#ff00ff> Alapértelmezett szövegszín o <BODY text=yellow> Háttérkép beállítása <BODY background= hatter.jpg > A képet az index.html mellé (ugyanabba a mappába) kell menteni Jogokra figyeljenek oda!!! Színek keverésével kapcsolatos honlap: http://www.rapidtables.com/web/color/rgb_color.htm
Hivatkozások, linkek: Szöveg átalakítása hivatkozássá: <a href= www.tok.elte.hu > Ugrás az ELTE TÓK honlapjára! </a> Kép legyen a hivatkozás <a href= www. tok.elte.hu > <img src= kep.jpg ></a> Hivatkozás színei: text= #000000 a szöveg színe. link= #000000 a még nem használt linkek színe. vlink= #000000 a már használt linkek színe. alink= #000000 az éppen használt (aktív) link. <body bgcolor= #CAFFB0 text= #AA3900 link= #0000FF alink= #FF2020 vlink= #800020 > Megnyitás: alapértelmezetten az adott oldalon nyitja meg a hivatkozást target= _blank : új lapra nyitja meg a hivatkozást Hivatkozás helye (egy kép példáján): A szerveren a mappán belüli helye: o a html és a kép fájl ugyanabban a mappában van: <a href= kep.jpg > Szöveg formázása Betűméret o egy mappával kijebb lévő fájlra: <a href=../kep.jpg > o egy mappával beljebb lévő fájlra: <a href= mappaneve/kep.jpg > o egy oldalon lévő képre: <a href= http://www.qygjxz.com/data/out/179/5235358-picture.jpg > <font size=7> 7-es betűméret </font> (A kódban a 7 a maximum méret) Betűtípus <font face= Arial > Arial betűtípus </font> Betűszín <font color=blue> Kék betűk </font>
Beszúrás: Kép beszúrásának paraméterei Width, Height: szélesség, magasság Border: a kép körül lévő szegély vastagsága Title: akkor jelenik meg, ha a kép fölé visszük az egeret o <IMG SRC= kep.jpg width=100 height=100 border=5 title= A kép > alt= : ha nem tölthető be a kép helyette a -ben lévő rész jelenik meg. Zenék letöltése <a href= zene.mp3 > Ez a kedvenc számom</a> E-mail cím <a href= mailto:minta@minta.elte.hu > itt tudsz nekem írni e-mailt</a> Lista létrehozása <OL> </OL> - Rendezett lista (Ordered List). o type= A, a, I, i, 1 (A) nagybetűvel, (a) kisbetűvel, (I) római és (1) arab (alapeset) számmal jelzett felsorolás. <UL> </UL> - Rendezetlen lista (Unordered List). Más néven franciabekezdés. o type=disc, round, square (ᴑ)kör, ( ) tömött kör, ill. ( ) négyzet a listaelemek előtt. <LI> </LI> - Lista (LIst). o Ezekkel a tag-ekkel kell a lista elemeit körülvenni. A </LI> elhagyható. o Például: <OL type=i> <LI>Első<LI>Második<LI>Harmadik </OL> o Kinézete: I. Első II. Második III. Harmadik Megjegyzés: a listák egymásba ágyazhatók (listán belüli lista).
Táblázat: <TABLE> <TR> (Table Row : táblázat sorának beszúrása) </TR> <TR> </TR> </TABLE> <TD> 1. sor 1. cella </TD> (Table Data: táblázat cellájának tartalma) <TD> 1. sor 2. cella </TD> <TD> 2. sor 1. cella </TD> <TD> 2. sor 2. cella </TD> egyéb beállítás: <TH> : az adott cella fejléc-szerű, kiemelt <td rowspan=n>.. </td> n számú sor összevonása. <td colspan=n>.. </td> n számú oszlop összevonása. Táblázat felépítési sorrendje: Táblázat paraméterei Width: szélesség Align: vízszintes igazítás (left, center, right) Valign: függőleges igazítás (left, minddle, right) Border: a szegély vastagsága o <table width=400 align=center border=5> o o </table> Szinek beállítása: o <table border= 1 width= 50% bgcolor= #C4FFD7 > Háttér beállítása: o <table border= 1 width= 50% background= back.gif >
Cella paraméterei Width: a cella szélessége Height: a cella magassága Align: a cellán belüli igazítás o <td width=100 height=20 align=center> Kinézete: o o </td> Színek beállítása: o <table border= 1 width= 50% bgcolor= #00FFFF > o <tr> o <td bgcolor= #008000 >1.1</td> o <td bgcolor= #00FF00 >1.2</td> o <td bgcolor= #FFFF00 >1.3</td> o </tr> Érdekességek: ACRONYM: Mozaikszó <acronym></acronym> Tulajdonság: title a mozaikszót alkotó szavak valódi jelentését tartalmazza Amikor az egér a mozaikszó felett van, kiíródik a teljes szó. Példa: <acronym title= szőlőmetsző kés >kacorral</acronym> ABBR: Rövidítés <abbr></abbr> Tulajdonság: title a rövidítés jelentését tartalmazza Amikor az egér az © (= ) felett van, kiíródik a magyarázat Példa: <abbr title= Szerzői jog szimbólum > </abbr> SUP: Felső index <sup></sup> Példa: 1<sup>st</sup> SUB: Alsó index <sub></sub> 1 st Példa: H<sub>2</sub> H2