Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a <HTML> utasítással kezdődik és a </HTML> záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a <HEAD> utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a </TITLE> utasítások közé kell zárni. A fejlécet a </HEAD> utasítás zárja.
A dokumentumtörzs a fájl <BODY> és </BODY> utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével!)
Tehát a következőkben a következő szerkezetet fogjuk használni:
<HTML>
<HEAD>
<TITLE> Ide jön az oldal címe, ezt a szöveget fogod latni a böngésző címsorában</TITLE>
</HEAD>
<BODY>
Ide jön a dokumentumtörzs.
</BODY>
</HTML>
A következőkben egyszerű formázó tag-ekre mutatok példát, amelyet a <body> és </body> tagek közé kell elhelyezni.
A táblázatban láthatjátok a kódot, és mellette a kód eredményét. Amint látni fogjátok, minden tag-et (formázó utasítást) a < jel vezet be, és a > jel zár le. Az adott tag hatását a megfelelő lezáró tag szünteti meg, amely </tag> formátumú.
(
) Ha nem ezt szeretnéd használni, akkor természetesen bármilyen szöveges szerkesztőben (pl. notepad, joe, pico) megírhatod a kódot, amit el kell mentened, majd a böngésződbe be kell olvasnod.Betűtípusok, stílusok <b> <i> <u> <tt> | ||
| Ha ezt a kódot beírod a dokumentumtörzsbe | ez lesz az eredménye | |
| <b>Kövér betűk (bold) </b> |  | Kövér betűk (bold) |
| <i>Dőlt betűk (italic)</i> | | Dőlt betűk (italic) |
| <u>Aláhúzott betűk (underlined) </u> | | Aláhúzott betűk (underlined) |
| <tt>Írógép betűk (teletype) </tt> | | Írógép betűk (teletype) |
Fejléc <h1> ... <h6> | ||
| <h1>1-es fejléc </h1> | | 1-es fejléc |
| <h2>2-es fejléc </h2> | | 2-es fejléc |
| <h3>3-as fejléc </h3> | | 3-as fejléc |
| <h4>4-es fejléc </h4> | | 4-es fejléc |
| <h5>5-ös fejléc </h5> | | 5-ös fejléc |
| <h6>6-os fejléc </h6> | | 6-os fejléc |
Ha nem az alapértelmezett (balra) igazítást szeretnénk használni, megadhatjuk az igazítás típusát az align paraméter segítségével. (left=balra, center=középre, right=jobbra) pl. <h1 align="center"> Ez egy középre igazított 1-es fejléc </h1>  Ez egy középre igazított 1-es fejléc<h3 align="right"> Ez egy jobbra igazított 3-as fejléc </h3>Ez egy jobbra igazított 3-as fejléc | ||
Betűméret <font size=" "> | ||
A betűméretet kétféleképpen állíthatjuk be: abszolút és relatív módon. Az abszolút méretmegadásban 1 és 7 között állíthatjuk be a méretet, ahol a 7-es a legnagyobb az 1-es a legkisebb... | ||
| <font size ="4"> 4-es betűméret </font> | | 4-es betűméret |
| <font size ="7"> 7-es betűméret </font> | | 7-es betűméret |
| A relatív méretbeállításnál azt adhatjuk meg, hogy az alapként beállított betűmérethez képest mennyivel nagyobb, illetve kisebb betűméretet akarunk látni. Ha pl. 2-el nagyobbat, akkor a +2, ha 1-el kisebbet, akkor a -1 méretmegadást kell alkalmaznunk. Azt, hogy mihez képest legyen nagyobb vagy kisebb az adott betűméret a <basefont size="méret"> tag segítségével állíthatjuk be. | ||
| <font size ="+2"> Kettővel nagyobb betűméret </font> | | Kettővel nagyobb betűméret |
| <font size ="-1"> Eggyel kisebb betűméret </font> | | Eggyel kisebb betűméret |
| Az alábbi ablakban módosíthatod a kódot, és kipróbálhatod a méretmegadások közti különbségeket. pl. megváltoztathatod a basefont beállításokat is... | ||
Betűtípus <font face=" ">A Face paraméter segítségével állítható be a kívánt betűtípus.
| ||||
| <font face ="Arial">Arial betűtípus. </font> | | Arial betűtipus. | ||
| <font face ="Courier">Courier betűtípus. </font> | | Courier betűtipus. | ||
Betűszín <font color=" ">A betűk színét is többféleképpen lehet beállítani. Az első esetben a szín nevét használjuk, természetesen angolul. pl. red, yellow, black, white, stb... A második esetben egy kóddal adjuk meg a színt. A 6 jegyű kódot a # jel vezeti be. | ||
| <font color=red> Piros </font> | | Piros |
| <font color=#898134> Kevert </font> | | Kevert |
| #898134 a szín úgynevezett RGB kódja. Az első két karakter a vörös (R=red) szín erősségét mutatja 16-os számrendszerben (hexadecimálisan). A leggyengébb a 00, a legerősebb az FF. A 3.és 4. karakter a zöld szín erőssége (G=green), az 5. és 6. a kéké (B=blue) | ||
 | A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az RGB picker segítségével online módon is megtudhatod a színek kódját. |
Vízszintes vonal <hr> |
| Ha a dokumentumon belül valamilyen szakaszt el szeretnénk különíteni a többitől, használhatunk vízszintes elválasztó vonalat a <hr> tag használatával. |
pl. <hr size="3" align="center" width="150">
pl. <hr size="3" align="center" width="80%">
Bekezdések <p> |
| A <p> elem segítségével a szöveget bekezdésekre tördelhetjük. Az adott bekezdést a <p> és </p> elemek közé kell tenni. A bekezdést az align paraméterrel balra, középre, jobbra igazíthatjuk. A böngészők az egyes bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak. |
Igazítás (align): left(balra), center(közép), right(jobbra)
| <P align="left"> Ez egy balra igazított bekezdés </P> |
|
| Ez egy balra igazított bekezdés |
| <P align="center"> Ez egy középre igazított bekezdés </P> |
|
Ez egy középre igazított bekezdés |
<P align="right"> Ez egy jobbra igazított bekezdés </P> |
|
Ez egy jobbra igazított bekezdés |
Sortörés <br> |
| Ha a szövegben egy sort feltétlenül új sorban akarunk kezdeni a <br> taget kell használnunk. |
| Ez az első sor<br>Ez pedig a második | | Ez az első sor Ez pedig a második |
Hiperlinkek <a href="URL"> szöveg </a> |
| A hiperlinkekkel hozhatunk létre kapcsolatot szövegrészek, illetve dokumentumok között. A böngészők a linkeket aláhúzással illetve eltérő színnel jelölik, persze ezek a beállítások megváltoztathatóak. |
Az URL (Uniform Resource Locator, egységes dokumentum meghatározó rendszer) a következő lehet:
Ha a saját gépünkön lévő dokumentumra szeretnénk hivatkozni, akkor az URL megadásánál a file:// "előtagot" kell használnunk. Ha pl. a c:\web\iskola\palyazat.html oldalra szeretnénk linket, akkor a file://C|WEB/ISKOLA/PALYAZAT.HTML URL-t kell használni. A c:\ megadás helyett használjuk a c| formát.
file://
dokumentum a kliens számítógépen
file://C|WEB/ISKOLA/PALYAZAT.HTML
| | Jól gondoljuk meg, hogy valóban erre a megadási módra van-e szükségünk. (ha ugyanezt az oldalt másik gépről néznénk, akkor a link az azon a gépen lévő web alkönyvtárban keresné az iskola alkönyvtárat és abban a palyazat.htm oldalt...) |
ftp://
file átviteli protocol
ftp://ftp.c3.hu/Utilities/winzip70.exe
Ha egy másik weboldalra akarunk linket, használjuk a következőt:
http://
hypertext transfer protocol
http://www.elte.hu/
Ha a link segítségével be szeretnék jelentkezni (telnet segítségével) egy gépre, használjuk a következőt:
telnet://
bejelentkezés egy távoli gépre
telnet://ludens.elte.hu/
Ha a mailto:email cím formát használjuk, az adott linkre kattintva betöltődik az alapértelmezett levelezőprogram, amellyel emailt küldhetünk a megadott email címre.
mailto:
email cím megadása
mailto:abonyita@freemail.hu
(A levél tárgya is megadható a ?subject=szöveg elemmel, sőt az is hogy ki kapjon másolatot (?cc=cimzett) Ha több opciót akarunk megadni, akkor az &jelet kell alkalmazni. pl. mailto:abonyita@freemail.hu?CC=gipszjakab@freemail.hu&Subject=Proba)
Példák:
<a href="http://www.elte.hu/">Ez az ELTE honlapja</a> | | Ez az ELTE honlapja |
| <a href="ftp://ftp.c3.hu/Utilities/Winzip70.exe ">A winzip letölthető erről a címről</a> | | A winzip letölthető erről a címről |
| <a href="mailto:abonyita@freemail.hu?subject=Üdvözlet">Itt írhat nekem levelet</a> | | Itt írhat nekem levelet |
Felsorolások |
| A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre. |
| Egyszerű felsorolás Egyszerű felsorolás esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl. | ||
| <ul> <li>első elem <li>második elem <li>harmadik elem </ul> | |
|
| Sorszámozott lista Sorszámozott lista esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl | ||
| <ol> <li>első elem <li>második elem <li>harmadik elem </ol> | |
|
| Meghatározás lista Meghatározás lista esetén az <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (<dt> tag vezeti be) és a magyarázatából (<dd> tag vezeti be) állnak. | ||
| <dl> <dt>1. fogalom <dd>az első fogalom magyarázata <dt>2. fogalom <dd>a második fogalom magyarázata</dd> </dl> | | 1. fogalom az első fogalom magyarázata 2. fogalom a második fogalom magyarázata |
Speciális karakterek, ékezetes betűk
Előfordulhat, hogy az oldalon speciális jeleket szeretnénk megjeleníteni. (Speciális jelnek számít már a < és a > jel is, hiszen gondoljunk bele, ha a forráskódban használjuk ezeket a jeleket, akkor a böngésző úgy értelmezi, hogy valamilyen taget akarunk megadni, és nem fogja megjeleníteni. Ebben az esetben speciális karaktereket kell használnunk.Ugyanez a helyzet az ékezetes betűkkel is. Ha ékezetes betűket szeretnénk használni akkor a következő kódokat kell "megjegyeznünk":
| á= á | Á= Á | ö= ö | Ö= Ö |
| é= é | É= É | ü= ü | Ü= Ü |
| í= í | Í= Í | õ= ő | Õ= Ő |
| ó= ó | Ó= Ó | û= ű | Û= Ű |
| ú= ú | Ú= Ú | ||
árvíztûrõ tükörfúrógép
Mielőtt teljesen elkoptatnátok a billentyűzeteteket és elmenne a kedvetek a magyar ékezetes betűk használatától, megnyugtatok mindenkit, hogy van egyszerűbb módja az ékezetes betűk megadásának. Az alternatívát a META tagek lehetőségei jelentik, amelyről egy külön fejezetben is foglalkozunk. Most elég csak annyit tudnunk, hogy a következő sorok valamelyikét be kell illesztenünk az oldal forráskódjába (mégpedig a <head> </head> tagek közé) és innentől kezdve bátran használhatjuk hagyományos módon az ékezetes betüket.
Tehát a megoldás:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
vagy
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
sor használata a <HEAD> részben.
Speciális karakterek összefoglaló táblázata
| HTML kód | Unicode | HTML kód | Unicode | ||
| |   | D | Ð | Ð | |
! | ¡ | ¡ | N | Ñ | Ñ |
c | ¢ | ¢ | O | Ò | Ò |
? | £ | £ | Ó | Ó | Ó |
¤ | ¤ | ¤ | Ô | Ô | Ô |
Y | ¥ | ¥ | O | Õ | Õ |
| | ¦ | ¦ | Ö | Ö | Ö |
§ | § | § | × | × | × |
¨ | ¨ | ¨ | O | Ø | Ø |
C | © | © | U | Ù | Ù |
a | ª | ª | Ú | Ú | Ú |
< | « | « | U | Û | Û |
? | ¬ | ¬ | Ü | Ü | Ü |
| ­ | ­ | Ý | Ý | Ý |
R | ® | ® | ? | Þ | Þ |
? | ¯ | ¯ | ß | ß | ß |
° | ° | ° | a | à | à |
? | ± | ± | á | á | á |
2 | ² | ² | â | â | â |
3 | ³ | ³ | a | ã | ã |
´ | ´ | ´ | ä | ä | ä |
? | µ | µ | a | å | å |
? | ¶ | ¶ | a | æ | æ |
. | · | · | ç | ç | ç |
¸ | ¸ | ¸ | e | è | è |
1 | ¹ | ¹ | é | é | é |
o | º | º | e | ê | ê |
> | » | » | ë | ë | ë |
? | ¼ | ¼ | i | ì | ì |
? | ½ | ½ | í | í | í |
? | ¾ | ¾ | î | î | î |
? | ¿ | ¿ | i | ï | ï |
A | À | À | ? | ð | ð |
Á | Á | Á | n | ñ | ñ |
 |  |  | o | ò | ò |
A | Ã | Ã | ó | ó | ó |
Ä | Ä | Ä | ô | ô | ô |
A | Å | Å | o | õ | õ |
A | Æ | Æ | ö | ö | ö |
Ç | Ç | Ç | ÷ | ÷ | ÷ |
E | È | È | o | ø | ø |
É | É | É | u | ù | ù |
E | Ê | Ê | ú | ú | ú |
Ë | Ë | Ë | u | û | û |
I | Ì | Ì | ü | ü | ü |
Í | Í | Í | ý | ý | ý |
Î | Î | Î | ? | þ | þ |
I | Ï | Ï | y | ÿ | ÿ |
