Előszó
Jelen segédlet a HTML-mankó weboldal készítő programhoz készült, nem célja a HTML nyelv teljes, részrehajló bemutatása.Magyarázat a tananyaghoz:
| Jelmagyarázat | Színek jelentése | |
| $ | Példa megtekintése | Ilyen színnel láthatóak a témaköröket bevezető címek |
| 1 | Visszaugrás a tartalomjegyzékre | Sima szöveg, ez az alapszín |
| Ů | Visszaugrás a hivatkozott helyre | TAG elemek |
| ? | Megjegyzés az adott témához | Megjegyzés az adott témához |
| Ez egy hivatkozás, ami a dokumentum egy másik, témába illő helyére visz | ||
| Magyarázat | ||
| Figyelmeztetés! Fontos megjegyzés | ||
Alapfogalmak:
A HTML dokumentum| White | Silver | Gray | Black | Aqua | Blue | Teal | Navy | Red | Orange | Lime | Green | Brown | Magenta | Yellow | Olive | Maroon | Purple |
| Fehér | Ezüst | Szürke | Fekete | V.kék | Kék | Kékes | S .kék | Piros | Narancs | V.zöld | Zöld | Barna | Rózsaszín | Sárga | Oliva | Bordó | Lila |
| Decimális érték | (10es alapú): | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ... | 25 | 26 | 27 | ... | 253 | 254 | 255 |
| Hexa. érték | (16os alapú): | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | 11 | 12 | ... | 19 | 1A | 1B | ... | FD | FE | FF |
Egy HTML oldal felépítése: | |
| <HTML> | Egy webfájlt HTML TAG-el kell kezdeni, így tudatjuk a böngészővel, hogy a fájl webfájl |
| <HEAD> | Fejléc nyitó TAG |
| Ebbe a részbe a webfájl egészére vonatkozó tulajdonságokat állíthatjuk be | |
| </HEAD> | Fejléc záró TAG |
| <BODY> | Dokumentum törzsének nyitó TAG-je, ahol néhány dokumentumra vonatkozó beállításokat is megadhatunk. |
| Ide kerül minden egyéb HTML elem | |
| </BODY> | Dokumentum törzsének záró TAG-je |
| </HTML> | A webdokumentum végének jelzésére szolgáló záró TAG |
1 | |
A fejlécben megadható főbb tulajdonságok: | |
| <TITLE>"Az oldal címe"</TITLE> | Az a szöveg, ami a böngésző ablakának címsorában megjelenik |
| <STYLE>Stílusok meghatározása"</STYLE> | A dokumentumban használható stílusok létrehozása |
| <META Http-Equiv="webfájlnyelv" Content="nyelv"> | A webfájl nyelvének megadása a böngésző számára |
| 1 Ů | |
A BODY TAG beállítási lehetőségei: | |
| BgColor="színérték" | A webfájl háttérszínét határozza meg |
| BackGround="képfájl" | A webfájl háttere nem egy színérték lesz, hanem a megadott képfájl |
| Text="színérték" | A dokumentum alap szövegszíne. (? A <FONT>-</FONT> TAG-el átmenetileg felülírhatjuk) |
| Link="színérték" | A hivatkozások szövegszíne. (De pl. - II -) |
| VLink="színérték" | A meglátogatott (már rákattintottunk) hivatkozások szövegszíne. (De pl. -II-) |
| Link="színérték" | Az éppen kiválasztott hivatkozás szövegszíne. (De pl. - II -) |
| $ 1 Ů | |
| Megjelenést befolyásoló elemek | |
| Mindre jellemző, hogy a begépelt szövegekre fejtik ki hatásukat. | |
| <BR> | Sortörés elhelyezésre. A <BR> elem után a szöveg a következő sor elején folytatódik |
| <PRE>"szöveg"</PRE> | A "szöveg" a böngészőben ugyan úgy jelenik meg,mint a HTML kódban (pl.soremelések,szóközök) |
| | Törhetetlen szóköz, egymás mellett több szóköz is látszódni fog böngészőnkben |
| <NOBR>"abc"</NOBR> | Törhetetlen sorok. A közrezárt sorokat a böngésző nem törheti meg sortörésekkel (ha túl hosszú) |
| $ 1 | |
| Elemek igazítása | |
| Nyitó- és záró elemmel is rendekeznek, hatásuk nem csak a írott szövegre, hanem számos egyéb HTML elemre is kiterjed, addíg amíg azt egy másik igazítási mód felül nem írja, vagy a lezáró TAG (</P>) nem hatástalanítja. | |
| <P Align="Left">HTML elemek | A HTML elemeket balra igazítja |
| <P Align="Right">HTML elemek | A HTML elemeket jobbre igazítja |
| <P Align="Center">HTML elemek | A HTML elemeket középre igazítja |
| Ezen kívűl létezik egy soremelés nélküli középre igazítási mód is: | |
| <CENTER>"szöveg"</CENTER> | Középre igazítja az elemeket a <BR> TAG hatása nélkül |
| $ 1 | |
| Szöveg stílusok | |
| Közös jellemzőjük, hogy nyitó és záró elemekkel is rendekeznek, valamint egymásra épűlően is használhatjuk őket. | |
| <B>"szöveg"</B> | (B - Bold) E TAG között a szöveg félkövér stílusú lesz. |
| <I>"szöveg"</I> | (I - Italic) A közrezárt szöveg dőlt lesz. |
| <U>"szöveg"</U> | (U - Underline) A közrezárt szöveg aláhúzott lesz. |
| A közrezárt szöveg áthúzott lesz. | |
| $ 1 | |
| Egyszerű szöveg formázó eszközök | |
| Először vizsgáljuk meg az egyszerűbb elemeket: | |
| <SUb>"szöveg"</SUb> | Alsó index lesz a közrezárt szöveg.(Hasznos például képleteknél az indexek jelölésére) |
| <SUp>"szöveg"</SUp> | A szöveg felső indexként fog látszani( - II - ) |
| (? A TAG-ek utolsó betűjének "hasa" jellemzi az index helyét. P-Felső index; b-alsó index) | |
| <BIG>"szöveg"</BIG> | Megnagyobbított betűket eredményez |
| <SMALL>"szöveg"</SMALL> | Összenyomott betűket eredményez |
| <H'szam'>"szöveg"</H'szam'> | Fejléc. A 'szam' értéke 1-6ig lehet, ahol 1-a legnagyobb, 6-a legkisebb betűnagyság |
| <BLINK>"szöveg"</BLINK> | Villogó szöveg. Figyelem! Csak Netscape böngészőben működik ! |
| $ 1 | |
A Marquee TAG | ||
| <MARQUEE 'tulajdonságok'>elem</MARQUEE> | Elemmozgatás. Figyelem!Csak Internet Explorerben működik jól! | |
| (A tulajdonságokat nem közelező megadni. Csak akkor kell, ha a szabványos beállításoktól eltérő értékeket szeretnénk.) | ||
| A mozgatást a következő tulajdonsággal szabályozhatjuk: | ||
| Direction | A mozgás irányát határozza meg. |
| Direction="Left" | Jobbrólŕbalra mozogás |
| Direction="Right" | Balrólŕjobbra mozogás |
| Behavior | Itt adhatjuk meg, hogy mi történjen akkor, amikor elértük a mozgási tartomány szélét |
| Behavior="Slide" | Amint elérte a mozgó szöveg a szélesség értéket, megáll (Beúszás) |
| Behavior="Scroll" | Amint elérte a mozgó szöveg a szélesség értéket, újra kezdi a mozgást (Fényújság) |
| Behavior="Alternate" | Amint elérte a mozgó szöveg a szélesség értéket, irányt vált (Ide-oda mozgás) |
| ScrollDelay | A mozgási sebességet határozza meg |
| ScrollDelay="számérték" | A számérték egy konkrét szám |
| ScrollMount | Lépésszám megadása. Azt jelenti, hogy mekkora egységgel mozgatunk |
| ScrollMount="számérték" | A számérték egy konkrét szám |
| Width | Azt határozza meg, hogy a mozgás milyen széles tartományban történjék |
| Width="számérték" | Az számérték lehet konkrét szám, vagy a gazdaterület egy százalékértéke |
| Height | Megadja, hogy a mozgatás milyen magas tartományban történjék |
| Height="számérték" | Az számérték lehet konkrét szám, vagy a gazdaterület egy százalékértéke |
| $ 1 | |
A Font TAG | |
| <Font 'tulajdonságok'>szöveg</Font> | Formázott szöveg készítése |
| A szöveg kinézetét az alábbi tulajdonsággal állíthatjuk be: | |
| Face | A betűtípus megadása. Ajánlatos, hogy ellenőrizzük több böngészőben is, a kinézetét! |
| Face="betűtípus" | A betűtípus egy, a böngésző által támogatott típus (Például: 'Arial') |
| Color | A szöveg színe. Lehet egy szín angol megfelelője, vagy általunk kikevert érték (A színek) |
| Color="szín" | A szín 18 alapszín lehet, angolul. A kód pedig egy hexadecimális érték |
| Size | A betűk mérete. Ha nem adjuk meg, akkor a böngésző az alap betűnagyságot használja |
| Size="számérték" | Ahol a számérték 1-7 közötti tartományban lehet, ahol 1 a legkisebb, 7 a legnagyobb méret |
| $ 1 | |
Stílusok használata |
| A stílusokat a webfájl HEAD részében kell megadni. |
| <STYLE Type="text/css"> 'nev' {'tulajdonságok'}</STYLE> |
| A 'nev' a stílus neve, amely kétféle típusú lehet: Egy HTML elemre vonatkozó. például: <STYLE Type="text/css"> H1 {tulajdonság1:"érték"; tulajdonság2:"érték";..} </STYLE> |
| Látható, hogy a beállítandó stílus-tulajdonságokat pontosvesszővel(;) kell elválasztani egymástól Az első esetben egy HTML TAG stílusát változtattuk meg úgy, hogy a 'nev'-hez egy TAGnevet írtunk. A második esetben egy saját, általános célű stílust készítünk, amit bármely olyan HTML elem nyitó TAG-jában elhelyezhetünk, ahol ennek hatása érvényesülhet. (Pl. <Table...Class="stilusnev">... , <Font...Class="stilusnev">...) Általános stílus megadása esetén, a stílusnév elé pontot kell elhelyeznünk. (Példánkban: .stilusnev) |
| Szöveg megadása | ||
| text-align | A szöveg víszintes igazítása | |
| text-align:left | Balra igazítás | |
| text-align:center | Középre igazítás | |
| text-align:right | Jobbra igazítás | |
| text-align:justify | Sorkizárás Csak Netscape 6, Internet Explorer 6, vagy újjabb böngészőkben! | |
| vertical-align | A szöveg függőleges igazítása | |
| vertical-align:baseline | Alapvonal (Normál magasság) | |
| vertical-align:sub | Alapvonal alá | |
| vertical-align:super | Alapvonal fölé | |
| vertical-align:top | Felüre | |
| vertical-align:middle | Középre | |
| vertical-align:bottom | Alura | |
| vertical-align:text-top | A szöveg tetejéhez | |
| vertical-align:text-bottom | A szöveg aljához | |
| text-decoration | Vízszintes vonalak elhelyezése a szövegben, illetve villogó szöveg készítése | |
| text-decoration:none | Nincs semmi sem. Ez az alapértelmezés | |
| text-decoration:underline | Aláhúzott szöveg | |
| text-decoration:overline | A szöveg fölé húzott | |
| text-decoration:line-through | Áthúzott szöveg | |
| text-decoration:blink | Villogó szöveg Csak Netscape 4-es böngészőben használható! | |
| text-transform | Kis-, és nagybetűk használatát teszi lehetővé | |
| text-transform:capitalize | Az összes szó kezdőbetűjét nagybetűre cseréli | |
| text-transform:uppercase | Az összes betűt nagybetűsre alakítja | |
| text-transform:lowercase | Az összes betűt kisbetűsre alakítja | |
| text-indent | A bekezdések és más elemek behúzásának mértékét szabályozhatjuk | |
| text-indent:"számérték" | A számérték egy konkét szám | |
| letter-spacing | A betűk közötti távolságot állíthatjuk | |
| letter-spacing:"számérték" | A számérték egy konkét szám | |
| line-height | A sor eleje és a következő sor teteje közti távolság megadása | |
| line-height:"számérték" | A számérték egy konkét szám | |
| $ 1 Ů | ||
Betűkészletek megadása | ||
| font-family | A betűtípus megadása. Ajánlatos, hogy ellenőrizzük több böngészőben is, a kinézetét! | |
| font-family:"betűtípus" | Biztosan elérhető betűtípusok: 'Serif', 'Sans-serif', 'Cursive', 'Fantasy', 'Monospace' | |
| font-size | A betűk méretét határozza meg | |
| font-size:"szám+mértékegység" | Lásd a Stílusok mértékegysége résznél | |
| font-style | A betűstílus megadása | |
| font-style:normal | Normál kinézetű | |
| font-style:italic | Dőlt | |
| font-style:oblique | Ferde | |
| font-variant | Kiskapitális betűk használata | |
| font-variant:normal | A kisbetűk a hagyományos módon jelennek meg | |
| font-variant:small-caps | A kisbetűk, kisméretű nagybetűkként jelennek meg (kiskapitálisság) | |
| font-weight | A szöveg vastagságát határozza meg | |
| font-weight:normal | Hagyományos megjelenés | |
| font-weight:bold | Félkövér beállítás | |
| $ 1 | ||
Színek és háttérképek megadása | ||
| color | A szövegszín beállítása | |
| color:"szín" | Lehet egy szín angol megfelelője, vagy általunk kikevert érték (A színek) | |
| background-color | Az elem hátterének színét határozza meg | |
| background-color:"szín" | Lehet egy szín angol megfelelője, vagy általunk kikevert érték (A színek) | |
| background-image | Az elem hátterének kívánt kép megadása | |
| background-image:"elérési út" | Az elérési út mutatja meg, hogy hol található a kép a számítógépen | |
| background-repeat | Itt adható meg, hogy a háttérkép ismétlődjön-e (mozaik) vagy sem | |
| background-repeat:"repeat" | Ismétlődik, ha a kép kisebb, mint az elem hátterének felülete | |
| background-repeat:"repeat-x" | Csak vízszintesen ismétlődik | |
| background-repeat:"repeat-y" | Csak függőlegesen ismétlődik | |
| background-repeat:"no-repeat" | Csak egy példányban mutatja a háttérképet, nem ismétli | |
| background-attachment | Itt állíthatjuk be, hogy a dokumentum görgetésekor a háttérképet is görgessük-e | |
| background-attachment:fixed | A háttérkép mozdulatlan marad, miközben a webdokumentumot görgetjük | |
| background-attachment:scroll | A háttérkép a webdokumentummal együtt mozog görgetéskor | |
| background-position | A háttérkép helyzetét állíthatjuk be | |
| $ 1 | ||
Margók és keretek Ezen tulajdonságok a margók, keretek, valamint a dokumentumban szereplő elemek magasságát és szélességét állítják be | ||
| margin | Az dokumentum mind a négy oldalán található margó egyszerre állíthatjuk be | |
| margin:"számérték" | A számérték egy konkrét szám | |
| margin-left | Az dokumentum bal oldali margóját állítja be | |
| margin-left:"számérték" | A számérték egy konkrét szám | |
| margin-right | A jobb oldali margót állítja be | |
| margin-right:"számérték" | A számérték egy konkrét szám | |
| margin-top | A felső margót állítja be | |
| margin-top:"számérték" | A számérték egy konkrét szám | |
| margin-bottom | Az alsó margót állítja be | |
| margin-bottom:"számérték" | A számérték egy konkrét szám | |
| width | Egy HTML elem (például egy kép) szélességét adja meg | |
| width:"számérték" | A számérték egy konkrét szám | |
| float | Egy HTML elem szöveggel történő körbefuttatásának lehetősége (például egy képnél) | |
| clear | Egy HTML elem szöveggel történő körbefuttatását ezzel tudjuk lezárni | |
| $ 1 | ||
Stílusok mértékegysége | ||
| pt | Pont. A betűkészletek szabványos mértékegysége, mely a monitorral van összhangban (például: 12pt) |
| px | Képpontnyi méretezést tesz lehetővé. Hasznos pl. számológépeknél, ahol ez a legkisebb egység (például: 20px) |
| % | A gazdterület egy százalékértéke (például: 200%) |
| $ 1 Ů | |
| Megjegyzések elhelyezése a kódban | |
| <!- - Elrejtendő HTML elemek - -> | A "zárójelek" közötti kódot a böngésző figyelmek kívűl hagyja |
| A böngészők a <!- - és a - -> elemek közötti rész nem veszik figyelembe. Ez jól jöhet magyarázó szövegként, vagy éppen hibakeresésnél, ahol a problémát úgy is megtalálhatjuk, hogy egy-egy kódrészt átmenetileg "kiszedünk". | |
| $ 1 | |
| Hivatkozások használata | |
| <A 'tulajdonságok'>HTML elemek</A> | A HTML elemre kattintva egy megadott helyre illetve fájlra ugrunk |
| A hivatkozás viselkedését befolyásoló tulajdonságok: | |
| Href | Megadja, hogy a hivatkozás hova mutat, hova lépünk ha rákattintunk |
| Href="webcím" | A webcím "http://"-el kezdődik, és egy Internetes oldalra, vagy fájlra hivatkozik |
| Href="horgonynév" | Egy megadott horgonyra ugrik. (Ha az az aktuális webfájlban van, akkor "#" jellel kezdődik) |
| Target | Megadja, hogy a böngésző melyik ablakban nyissa meg a hivatkozott címen található állományt |
| Target="_self" | Abban az ablakban, ahonnan hivatkoztak az állományra |
| Target="_blank" | Egy új ablakban nyitja meg |
| Target="_parent" | A szülőablakban nyitja meg |
| $ 1 Ů | |
| Képek használata | |
| <IMG "tulajdonságok"> | Kép elhelyezése a webfájlban, megadott tulajdonságok szerint |
| A képet az alábbi tulajdonságok határozzák meg: | |
| Src | Megadja, hogy hol található a megjelenített kép a merevlemezen |
| Src="elérési út" | Az elérési út lehet abszolút, vagy a befogadó webfájlhoz képest relatív (Az állományokról) |
| Width | A kép szélességét határozza meg |
| Width="számérték" | A számérték egy konkrét szám |
| Height | A kép magasságát határozza meg |
| Height="számérték" | A számérték egy konkrét szám |
| Border | A kép körül keretet lehet kialakítani |
| Border="számérték" | A számérték egy konkrét szám, mely megadja a keret vastagságát |
| Alt | Itt adhatjuk meg, hogy milyen szöveg jelenjen meg az egér mellett, amikor azt a kép fölé húzzuk |
| Alt="szöveg" | Ahol a szöveg a megjelenő megjegyzés |
| Usemap | Ha a képet képtérképként kívánjuk használni, akkor itt lehet megadni a tulajdonos térkép nevét |
| Usemap="térképnév" | A térképnév a MAP Tag által meghatározott térkép neve |
| Longdesc | Az Src-ben megadott kép letöltéséig egy kisebb méretű (felbontású) képet jeleníthetünk meg |
| Longdesc="elérési út" | Az a kép helye, amit a böngésző csak ideinglenesen (amíg az Srcben megadott töltődik) mutat |
| $ 1 | |
| Táblázatok használata | |
|
<Table "táblázattulajdonságok"><tr "sortulajdonságok"><td "cellatulajdonságok>HTML elem</td></tr></Table> A HTML elemek elhelyezésére a legjobb, legbiztosabb eszköz a táblázatok használata. Segítségével az összes böngésző programban közel azonos módon jeleníthetőek meg a webfájlunkban elhelyezett HTML elemek. A táblázat sorokból és oszlopokból áll, melyek metszéspontjában a legkisebb egység, a cella áll, ide tesszük a HTML elemeket. Új sort a <tr> elemmel kezdhetünk (a záró TAG (</tr>) használata nem kötelező) a sorokban új cellát pedig a <td> elemmel szúrhatunk be (a záró TAG (</td>) használata szintén nem kötelező). | |
Az egész táblázat kinézetét a táblázattulajdonságok határozzák meg: | |
| BgColor | Az egész táblázat háttérszínét adja meg |
| BgColor="színérték" | A színérték 18 alapszín lehet, angolul, vagy egy hexadecimális érték |
| BackGround | Vagy a táblázat hátterének egy képállományt is megadhatunk |
| BackGround="elérési út" | Az állomány elérési útja |
| Width | A táblázat szélességét határozza meg |
| Width="számérték" | A számérték lehet konkrét, vagy a gazdaterület egy százalékértéke |
| Height | A táblázat magasságát határozza meg |
| Height="számérték" | A számérték lehet konkrét, vagy a gazdaterület egy százalékértéke |
| Border | A táblázat celláinak keretvastagságát határozza meg |
| Border="számérték" | A számérték egy konkrét szám (Pl.: Ha Border="0", akkor nincsenek rácsvonalak) |
| NoWrap | Ez a kapcsoló a a cellák szövegének tördelését tiltja le |
| CellPadding | Meghatározza a cellák tartalma és a cellák kerete közötti távolságot |
| CellPadding="számérték" | A számérték egy konkrét szám |
| CellSpacing | Segítségével a cellák egymástól való távolságát állíthatjuk be |
| CellSpacing="számérték" | A számérték egy konkrét szám |
| 1 | |
A táblázat sorai: | |
| <tr "sortulajdonságok">cellák</tr> Új sort a <tr> elem beírásával tudunk kezdeni | |
| Nézzük a táblázat sorait meghatározó tulajdonságokat: | |
| Align | A sort tartalmazó cellák vízszintes igazítását állíthatjuk be ezzel |
| Align="Left" | A cellaelemeket balra igazítja |
| Align="Center" | A cellaelemeket középre igazítja |
| Align="Right" | A cellaelemeket jobbra igazítja |
| vAlign | A sort tartalmazó cellák függőleges igazítását állíthatjuk be ezzel |
| vAlign="Top" | A cellaelemeket a cella tetejéhez igazítja |
| vAlign="Center" | A cellaelemeket függőlegesen középre igazítja |
| vAlign="Bottom" | A cellaelemeket a cella aljához igazítja |
| 1 | |
A táblázat cellái: | |
| <td "sortulajdonságok">HTML elem</td> Új cellát a <td> elem beírásával nyithatunk | |
| Következzenek a cella tulajdonságok: | |
| Align , vAlign | Az igazítási módok ugyanazok, mint a sornál megismertek |
| Rowspan | Sorok egyesítése |
| Rowspan="számérték" | Az aktuális sortól a számértékben megadott sort nyit egybe |
| Colspan | Cellák egyesítése |
| Colspan="számérték" | Az aktuális cellától a számértékben megadott cellát nyit egybe |
| $ 1 | |