Az oldal tetejére
HTML alapok weblap készítéséhez

Tartalom

  1. Bevezető - hogyan kezdjünk hozzá?
  2. Alapok - HTML felépítése
  3. Alapok - az oldalkeret egységei
  4. Fájlok, színek, commentek avagy néhány fontosabb apróság
  5. Tartalom formázása, képek használata
  6. Oldaltagolás
  7. Táblázatok
  8. Hivatkozások
  9. Űrlapok
  10. Hasznos tippek
  11. Publikálás
  12. Példák
  13. Linkek, kimaradt részek

0. Bevezető - hogyan kezdjünk hozzá?

Mi is az a HTML?

HyperText Markup Language = hiperszöveges leírónyelv, amit arra fejlesztettek ki, hogy honlapokat készíthessünk vele, formázó utasításokat tartalmaz
Szabvány: http://www.w3.org
Validátor: http://validator.w3.org/ - itt tesztelhetőek is az általunk készített honlapok, hogy megfelelnek-e a nyelv előírásainak

Nyissunk meg egy tetszőleges weboldalt a böngészőnkben, és nézzük meg az oldal forrását. Ezt az oldalon jobb kattintással vagy valamelyik menüben érhetjük el (böngészőként eltérő). Látható, hogy egy leíró nyelven fogalmazzuk meg mindazt, ami az oldal megjelenítéséhez és működéséhez szükséges. Attól függően, hogy milyen oldal forrását néztük meg, ez lehet egyszerűbb vagy bonyolultabb, de maga a HTML nyelv könnyű. Csak egymás után illetve egymásba ágyazva kell pakolgatnunk meghatározott parancsokat.

Amikor a böngészőben egy oldal forrását nézzük meg, HTML alapú kimenetet kapunk. A HTML egy statikus nyelv, így amit egyszer elkészítünk, az úgy is marad, önmagában ez a nyelv nem biztosít interakciós lehetőségeket egy honlapon (pl. szavazás, fórum, vásárlás... stb.). Ehhez szükséges más nyelv elsajátítása is (pl. JavaScript, PHP).

Milyen programot használjunk?

Egyszerűbb, hogy mit ne: Microsoft Frontpage illetve az Office beépített html-konvertere, továbbá régi böngészők szerkesztőprogramjai (pl Netscape Composer). Az előbb említetteknél még egy Jegyzettömb is jobb, mivel a fenti programok hajlamosak arra, hogy telerakják fölösleges dolgokkal a forráskódot illetve elég bénán kezelik a stíluslapokat.
Ha mégis ilyen programban kezdünk el dolgozni akkor készüljünk fel arra, hogy:

Amit viszont nagyon jó pl.: Adobe Dreamweaver

Hogyan kezdjük el?

Elsőre sokaknak megtetszhet, hogy egyes szerkesztőkkel lehet grafikusan, a kinézetet változtatva készíteni honlapokat. Az ilyen szerkesztők az ún. WYSIWYG (What You See Is What You Get) editorok. Ezt nem ajánlanám azoknak, akik most kezdik el - arra viszont nagyon jó, hogyha megírtunk egy rövid kódot, lássuk hogyan változik az oldal kinézete. Tehát kezdetben mindenképpen KÓDÍRÁS!

1. Alapok - HTML felépítése

HTML oldalkeret

Ez a rövid kódváz szükséges ahhoz, hogy el tudjunk indulni. Az oldalkeret minden esetben ugyanaz, azt kell kibővítenünk.

Az alábbiakban is az oldalkeret látható egyszerűsített formában (de ezt így ne használjuk!):

<html>
<head>
    <title>Ide írd be a honlapod nevét/címét...</title>
    .....Ide kerülhet még megjelenítést/működést segítő kiegészítő kód....
</head>
<body>
    .....Ide jön mindaz, ami megjelenik az oldalon....
</body>
</html>

HTML elemei

<valami>
kacsacsőrök közt lévő elem, melyet tag-nek (angol szó, ejtsd: teg, vagy magyarul tag) nevezünk
<tagnév tulajdonság1="érték1" tulajdonság2="érték2">
A tag-ekhez tartozhatnak tulajdonságok, akár több is, és minden tulajdonságnak van értéke, melyet idézőjelek között adunk meg.

Példa egy tag-re:

<font size="5">5-ös méretű szöveg</font> - ez már nem 5-ös méretű
<font> vagyis betűformázó tag, melynek lehet egy olyan tulajdonsága, hogy méret (jelen esetben ez 5-ös), a fenti kód ezt eredményezi:
5-ös méretű szöveg - ez már nem 5-ös méretű

A legtöbb tag-et le kell zárni. Ezt láthatjuk az előző sorban is a </font> esetében. A lezárás szabja meg, hogy meddig lesz érvényes, amit megadtunk. Kivételek vannak, amiket nem kell lezárni, ezeket ún. "önlezáró" tag-eknek hívjuk, a leggyakoribb ilyen tag a sortörtés: <br>. Azért önlezáró, mert egyben saját magát le is zárja. Jelölhetjük is benne a lezárást, ekkor ugyanott tesszük meg, mint ahol megnyitottuk: <br/>.

Érdemes megjegyeznünk, hogy a HTML leírás gyakorlatilag tag-ek egymás utániságából, egymásba ágyazásából épül fel. Ennek következtében beszélünk gyermek és szülőelemekről is, például:

<p><font size"="5>Szöveg</font></p>
Ebben az esetben a font tag szülője a p tag.

2. Alapok - az oldalkeret egységei

Dokumentum típus

A HTML oldalak elején egy úgynevezett dokumentum típust ajánlott definiálni. A HTML nyelvnek különböző szintaxisai (szabályszerűség) terjedek el, így például a "sima" HTML szabvány szerint helyes az is, ha mindent kicsi, ha mindent nagy betűvel írunk, de az is, ha felváltva, vegyesen használjuk. Léteznek szigorúbb szabványok is (pl. az ún. XHTML), ahol csak az egységes kisbetű fogadott el. Mi is törekedjünk a szigorúbb verziók szabályainak betartására. Ha nem követjük ezeket a szabályokat, akkor előfordulhat, hogy az egyes böngészők másképp jelenítik meg az oldalt. Emiatt érdemes az elkészült weblapokat több böngészőben is kipróbálni, illetve ellenőrizni a szabályoknak való megfelelést a már említett validátorral (http://validator.w3.org/).

A dokumentum típus tehát azt adja meg, hogy melyik szabvány szerint készítjük a HTML leírásunkat. Például:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
dokumentum típus példa (XHTML 1.0 Transitional)

XHTML szabvány

Szó volt róla, hogy többféle HTML szabvány létezik, azt, hogy melyiket használjuk, a dokumentum típusban definiálhatjuk. A következőkben ismertetjük az XHTML szabvány fontosabb szabályait, ezeket ajánlott követni HTML oldalak készítésénél. Az XHTML egy újabb szabvány, mely több megkötést tartalmaz a HTML kód formázására annak érdekében, hogy a leírás megfeleljen az XML szabványnak is. Az XML-t adatok szabványos leírásához használhatjuk, feldolgozását sok programnyelv támogatja. Az XHTML szabályok:

HEAD rész

Head, vagyis fejléc. Ide kerülnek a böngészőnek szóló információk, illetve további script-ek, melyek az oldal működését befolyásolhatják. Egyetlen elem van, az itt lévőek közül, melynek hatását a felhasználók közvetlenül láthatják, ez a "<title>", vagyis az oldal címe, ami a böngésző tetején / a tabfülön helyezkedik el.

Kezdőknek szóló HEAD elemek

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
ún. meta tag kiegészítő információ közlésére
jelen esetben a karakterkódolás beállítása, ezt ajánlott mindig használni
utf-8 (univerzális) kódolást használunk, régebben gyakori volt az iso-8859-2 (latin2 kódolás) használata is, mely lefedte a magyar ABC-t is
<title>Első honlapom</title>
cím megadása

Haladóknak

<link href="../stilus.css" rel="stylesheet" type="text/css">
stíluslap hivatkozása (importálása)
<style type="text/css">............</style>
stíluslap HEAD-ben megírva
<script type="text/javascript" src="valami.js"></script>
JavaScript hivatkozása (importálása)
<script language="JavaScript" type="text/javascript">............</script>
JavaScript HEAD-ben megírva

A stíluslapokról a honlapszerkesztés főoldal, CSS alapok pontjában olvashatsz. A script-ek segítségével pedig az oldal letöltődése után végezhetünk el különféle műveleteket, amik akár megváltoztathatják az oldal kinézetét annak újratöltése nélkül, vagy bizonyos szolgáltatást hajtanak végre (pl. nyomtatás).

BODY rész

A BODY egységbe kerül minden, amit megjelenítünk a böngészőben a felhasználónak. Így például táblázatok, szövegek, képek... stb.

Említettük, hogy az egyes tag-eknek (pl. body) lehetnek tulajdonságai, melyek adott értékkel rendelkezhetnek. Először csak a BODY tag lehetséges tulajdonságait tekintsük át:

<body bgcolor="#eaeada">
háttérszín (színkóddal)
<body bgcolor="black">
háttérszín (fekete)
<body background="../hatter1.jpg">
háttérkép hivatkozás
<body link="#000000">
<body alink="#ffffff">
<body vlink="#cc0000">
link színe (link) | használatban lévő link színe (alink) | már meglátogatott link színe (vlink)
<body text="#000000">
szöveg színe
<body leftmargin="2">
<body topmargin="5">
<body marginwidth="5">
<body marginheight="2">
oldal szélétől a szöveg kezdése (leftmargin VAGY marginwidth) | oldal tetejétől a szöveg kezdése (topmargin VAGY marginheight)
egyszerre a kétféle megadást ne használjuk

Sokszor a body-ban egyáltalán nem használunk semmilyen beállítást, mert vagy jó az alapértelmezett, vagy stíluslapokkal (CSS) oldjuk meg ugyanezt. Természetesen ha több tulajdonságot szeretnénk egyszerre használni, akkor azt egymás után adjuk meg (csak 1 body tag-ot használunk egy HTML oldalon):

<body bgcolor="#cb9763" link="#cc0000" leftmargin="3" topmargin="6">
több tulajdonság használata

A következőkben felsoroljuk és bemutatjuk a fontosabb HTML-ben megvalósítható dolgokat, mint például szövegek, linkek, képek, táblázatok, űrlapok készítése. Ezek közül tetszőlegesen válogathatunk, nem kell az összeset felhasználni.

3. Fájlok, színek, commentek avagy néhány fontosabb apróság

Fájl elérési útvonalak

http://patrik.what.hu/web/index.html
abszolút (teljes) útvonal
../konyvtar1/fajlnev.html
./mappa/fajlnev.html
relatív útvonal (az adott oldalhoz képest)
. (egy db pont) - az aktuális könyvtárat jelenti
.. (két db pont) - egy szinttel feljebb lévő könyvtárat jelenti

Példák fájl útvonalakra

Színek megadása

#000000
számjegy/betű hexadecimálisan, vagyis 16-os számrendszerben
6 darab 0-9 számot illetve A-F betűket tartalmazhat
black
szín nevével (színkódok, színek listája)

Példák színek használatára

Kommentek

<!-- Ez a szöveg lesz a megjegyzés, ami nem íródik ki az oldalra, de neked, a fejleszőnek segíthet eligazodni a kódban, ha értelmes -->
komment (megjegyzés), többsoros is lehet
azt adjuk meg benne, hogy az adott kódrészlet mit csinál, így későbbi módosításnál segíthet a fejlesztőnek

4. Tartalom formázása, képek használata

Szövegformázás

FIGYELEM! A szaggatott vonallal körbevett dobozokra nem az alapértelmezett betűtípus van beállítva, így előfordulhat, hogy nem szerepel a példakódban a betűtípus átállítása, pedig nem az alapértelmezett betűtípust használja. Ezt külön CSS-el valósítottam meg.
<font size="2">Szöveg</font>
betűméret (1-7)
<font face="Courier New, Courier, monospace">Szöveg</font>
betűtipus beállítása
lehetséges betűtípus példák:
  • Times New Roman, Times, serif
  • Arial, Helvetica, sans-serif
  • Courier New, Courier, monospace
  • Georgia, Times New Roman, Times, serif
  • Verdana, Arial, Helvetica, sans-serif
  • Geneva, Arial, Helvetica, sans-serif
<font color="#339933">Szöveg</font>
betűszín
<u>Szöveg</u>
aláhúzás
<i>Szöveg</i>
<em>Szöveg</em>
dőlt betű kétféle módon (i VAGY em)
<b>Szöveg</b> | <strong>Szöveg</strong>
vastag betű kétféle módon (b VAGY strong)

Természetesen itt is egybe írhatjuk a szükséges tulajdonságokat:

<font size="3"><u><i><b>Szöveg</b></i></u></font>
szövegformázás példa (3-as méretű szöveg aláhúzással (u), dőlt (i), vastag(b))

További szövegformázást segítő tag-ek: áthúzás (<strike>), alsó index (<sub>), felső index (<sup>)

Címsorok

Előre definiált formázási lehetőség (betűméret, térköz van rá beállítva). Érdemes használni, így elkerülhető a rengeteg <font> HTML tag használata. Létező címsorok h1-től h6-ig (h6 a legkisebb méretű):

h1-es címsor

h2-es címsor

h3-as címsor

h4-es címsor

h5-ös címsor
h6-os címsor
<h2><font color="red">

Szöveg

</font></h2>
2-es szintű címsor, piros színnel

Listák

Egyszerű listák

<ol>
    <li>Lista első eleme</li>
    <li>Lista második eleme</li>
</ol>
számozott lista (ol = Ordered List, li = List Item)
  1. Lista első eleme
  2. Lista második eleme
<ul>
    <li>első elem</li>
</ul>
felsoroló lista (ul = Unordered List, li = List Item)
  • Lista első eleme

Többszintű listák

<ul>
    <li>első elem</li>
    <ol>
        <li>Lista első eleme</li>
        <li>Lista második eleme</li>
    </ol>
</ul>
többszintű lista
  • Lista első eleme
    1. Lista első eleme
    2. Lista második eleme

Egyéb listatípusok

Érdemes még megemlíteni az ún. definíciós listákat, pl.:

<dl>
    <dt>1. tipp</dt><dd>légy kreatív</dd>
    <dt>2. tipp</dt><dd>gondolkozz a felhasználó fejével</dd>
</dl>
definíciós lista
1. tipp
légy kreatív
2. tipp
gondolkozz a felhasználó fejével

Képek

<img src="kep1.jpg">
kép
<img src="../Honlap/kep1.jpg" width="400" height="273" alt=" Ha a kép fölé viszed az egeret ezt írja ki">
400 széles, 273 magas kép hivatkozással, szöveggel
Ha a képnek csak a szélességét v. csak a magasságát írod be, akkor a másik adatot hozzá igazítja, tehát nem torzul a kép.
Amennyiben ismert egy kép szélessége és magassága is, akkor a legoptimálisabb az, ha megadjuk mindkét tulajdonságot.
Az "alt" parancs jelenti azt a szöveget, ami akkor jelenik meg, ha az egeret a kép fölé viszed.

5. Oldaltagolás

Sortörés, szóköz

<br/>
új sor (önlezáró tag - végén perjel)
&nbsp;
szóköz

Bekezdés, vízszintes igazítás

<p>A bekezdés tartalma</p>
bekezdés
<p align="center">A bekezdés tartalma középre igazítva</p>
bekezdés tartalma középre igazítva
Igazítások: align="center" / "left" / "right" / "justify"
középre / balra (alapértelmezett) / jobbra / sorkizárt

Szakasz

<div align="center"><font size="5">Szöveg</font></div>
szakasz, oldalegység - téglalap alakú terület, mely olyan széles, mint a szülőelem / maga az oldal, és olyan magas, mint a tartalma
leggyakrabban a div és span tagokat CSS-el együtt alkalmazzuk az oldal elrendezésének kialakítására
CSS nélkül az elrendezés táblázatokkal hozható létre
jelen esetben a szakasz egy középre igazított 5-ös méretű szöveget tartalmaz

Szövegszintű logikai egység

<span>Szöveg</span>
szövegszintű logikai egység, önmagában semmit nem csinál
többnyire akkor használjuk, ha egy adott szövegrészre valamilyen tulajdonság beállítása szükséges (pl. azonosítóval ellátjuk, más CSS stílus kell)

Vízszintes vonal

<hr color="#990033" width="400px" size="5">
szines, 400px széles, 5 magas vonal


nem túl gyakori a használata, általában képekkel vagy CSS-ben (border) oldják meg ugyanezt

6. Táblázatok

Egyszerű táblázat (2 sor, 2 oszlop)

Név Életkor
Gipsz Jakab 35
<table>
    <tr>
        <td>Név</td>
        <td>Életkor</td>
    </tr>
    <tr>
        <td>Gipsz Jakab</td>
        <td>35</td>
    </tr>
</table>
táblázat - <table>
1. sor kezdete - <tr>
1. sor első cella - <td></td>
1. sor második cella - <td></td>
1. sor vége - </tr>
2. sor - <tr>
2. sor első cella - <td></td>
2. sor második cella - <td></td>
2. sor vége - </tr>
táblázat vége - </table>

Bonyolítsuk annyival, hogy a táblázat első sora kiemeléssel szerepeljen, vagyis legyen fejléc. Ehhez annyit kell tennünk, hogy az első sorban a <td> helyett <th>-t írunk. Ezt a cserét bármely cella esetén megtehetjük, így pl. lehet kiemelt az első sor mellett még az első oszlop is akár.

Név Életkor
Gipsz Jakab 35
<table>
    <tr>
        <th>Név</th>
        <th>Életkor</th>
    </tr>
    <tr>
        <td>Gipsz Jakab</td>
        <td>35</td>
    </tr>
</table>
táblázat - <table>
1. sor kezdete - <tr>
1. sor első cella, fejléc- <th></th>
1. sor második cella, fejléc- <th></th>
1. sor vége - </tr>
2. sor - <tr>
2. sor első cella - <td></td>
2. sor második cella - <td></td>
2. sor vége - </tr>
táblázat vége - </table>

Cellaösszevonás

Oszlopok összevonása

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr><td colspan="3"></td></tr>
</table>
oszlopok összevonása: colspan tulajdonság, értéke az összevonandó oszlopok darabszáma
abba a sorba írjuk, ahol nincs felosztva a sor, mert ez azt jelenti, hogy 3 oszlopon át tartó sorra van szükség (mivel 3 oszlopra osztottad a felső sort)
     
Ez a sor 3 oszlopon át tart, ezért ide kell colspan-t írni.

Sorok összevonása

Ugyanígy ha van két oszlopod, és oszlopot akarsz felosztani pl. két felé, míg a másik oszlopot békén hagyod, akkor a békén hagyott oszlophoz beírod, hogy rowspan="2". Ez két soron át tartó oszlopot jelent. Mert egy oszlopot osztottál két sorra Pl.:

  Ez az oszlop két soron át tart, ezért rowspan tulajdonság kell.
A "row" szó sort, míg a "col(umn)" oszlopot jelent.
 

Táblázat tulajdonságok

<table cellspacing="0" cellpadding="1">
cellspacing: cellák közti hely mérete
cellpadding: cellában lévő szöveg távolsága a cella szélétől
valign="top" / "middle" / "bottom"
align minden táblázat taghoz beírható (<table><tr><td>)
valign <table>-ben nem használható, ez a függöleges igazítás
pl. <table width="200"> VAGY <table width="50%">
szélesség, minden táblázat tagnál használható
mértékegységei: % VAGY pixel, a %-ot ki kell írni, ha nem írunk semmit, csak számot, akkor pixel lesz
ne használjuk a % mértékegységet, mindig px-ben adjuk meg a méretet, hogy ne csúszhasson szét az oldal
<table frame="void" rules="rows">
frame: táblázat külső kerete,
--> értékei: void (nincs) / above (fent) / below (lent) / hsides (fent & lent) / lhs (bal) / rhs (jobb) / vsides (bal & jobb) / box (körbe)
rules: belső elválasztó vonalak,
--> értékei: none (nincs) / rows (sorok, vízszintes) / cols (oszlopok, függőleges) / all (sor & oszlop) / groups (oszlopcsoportonként - lásd ehhez colgroup tag)
border="2"
bordercolor="red"
táblázat tetszőleges elemére használható, a szegély méretét (border), illetve színét (bordercolor) adhatjuk meg
fentebb piros, 1-es méretű szegéllyel ellátott táblázatot láthattunk
bgcolor="blue"
background="image.jpg"
háttérszín illetve háttérkép beállítása

Ha a táblázat egyik celláját üresen hagyod, rakj bele egy szóközt (pl. <td>&nbsp;</td>);. Ha az egész sor üres és nem teszed ezt meg, akkor nem marad meg az üres sor 1 sornyi magassága megjelenítéskor.

Mire jók a táblázatok?

Elsődlegesen arra használjuk, hogy olyan adatokat jelenítsünk meg, melyeket célszerű táblázatos formában vizualizálni (pl. statisztika).

Továbbá használható arra is, hogy egy oldal teljes elrendezését elkészítsük vele. Ezt akkor ajánlott használni, ha még nem ismerjük a CSS-t, vagy ismerjük, de nem nem szeretnénk <div>-ekkel megtenni ugyanezt. Nézzünk meg pár hírportált. Láthatunk tipikus elrendezéseket, mint például a felül fejléc, alatta menü, alatta tartalom, majd legalul lábléc. Vagy például felül fejléc, alatta bal oldalt menü, jobbra a tartalom és legalaul lábléc. Ezeket az elrendezéseket elkészíthetjük táblázattal. Példák kis méretben:

Fejléc
Menü
Tartalom
Lábléc

 

Fejléc
MenüTartalom
Lábléc

Táblázat fejléc és törzs

Van lehetőség arra, hogy a táblázatok sorait logikailag csoportosíthassuk, így elkülönítsük a fejlécet, a táblázat törzsét illetve a láblécet. Ez nyomtatásnál előnyös lehet, ha a táblázat több oldalra férne csak ki, és minden oldalon szerepelnie kéne a fej és láblécnek (ha a böngésző is támogatja). Mindegyik résznek legalább egy sort kell tartalmaznia (egyébként nem is érdemes kiírni az adott részt). Ehhez az adott sorokat be kell tennünk egy-egy újabb tag-be:

Név Fizetés
Gipsz Jakab 350.000 Ft
Hit Elek 110.000 Ft
Átlagfizetés: 230.000 Ft
<table>
    <thead>
        <tr>
            <th>Név</th>
            <th>Fizetés</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Gipsz Jakab</td>
            <td>350.000 Ft</td>
        </tr>
        <tr>
            <td>Hit Elek</td>
            <td>110.000 Ft</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Átlagfizetés:</td>
            <td>230.000 Ft</td>
        </tr>
    </tfoot>
</table>
fejléc-törzs-lábléc egységekre tagolt táblázat

7. Hivatkozások

<a href="http://www.xxxxxx.hu">Ez a szöveg lesz az oldalon linkként</a>
abszolút hivatkozás ("http://" kell!)
<a href="../menu/index.html">Ez a szöveg lesz az oldalon linkként</a>
relatív hivatkozás
<a href="mailto:xxxx@xxxxxx.hu">Ez a szöveg lesz az oldalon linkként</a>
e-mail hivatkozás
Ma már így nem tesznek be e-mail hivatkozást egy oldalba.
Ha egy rosszindulatú keresőrobot megtalálja, akkor utána az adott e-mail címet rengeteg spam üzenettel áraszthatják el.
Helyette ajánlott képként betenni VAGY pl. a @ helyett [at]-et használni VAGY egy e-mail küldő űrlapot készíteni (nehezebb)
.
<a href="http://www.xxxxxx.hu" target="_top">Ez a szöveg lesz az oldalon linkként</a>
abszolút hivatkozás + cél megadása
target="_top" / "_blank"
ugyanoda, teljes ablakban / új ablakba nyíljon meg a link
ezen kívül ha frame-eket használsz, akkor a frame neve is lehet itt (pl. target="nagyframe") - frame-eket ne használj!
<a href="#lapteteje">Vissza a lap tetejére</a>
oldalon belüli hivatkozás
oda hivatkozik, ahol az oldalon belül beírod a következőt:
<p id="lapteteje">Szöveg</p>
lehet más tagba is beírni (pl.: div, table, tr, span...), az a lényeg, hogy egy egyedi nevet kell megadni (az adott oldalon egyetlen ilyen név lehet)
<a href="http://www.google.hu"><img src="logo.png" /></a>
hivatkozás elhelyezése képre (képre kattintva továbbirányít)
tipp: a képnek ilyenkor érdemes még egy border="0" tulajdonságot is adni, különben kap egy ronda kék keretet a link miatt

Képek esetén van lehetőség arra, hogy a kép különböző részeihez más-más hivatkozást rendeljünk. Ehhez járjunk utána a <map> és <area> tag-ok használatának!

8. Űrlapok

Űrlap jelölése

<form name="form1" method="post" action="">
    IDE JÖNNEK AZ ŰRLAP ELEMEI (és bármi egyéb kód, például táblázat is)
</form>
űrlap kezdete - form tag
name: az űrlap neve, tetszőleges lehet (nem is feltétlenül szükséges)
action: az az URL, ahova küldjük az űrlap adatokat (ha nem töltjük ki, akkor ua. az oldal, ahol az űrlap is van)
method="post" vagy "get" - küldés típusa
--> post esetén a háttérben küldi az adatokat (általában ezt használjuk)
--> get-nél az elküldött adatok az URL címbe beíródnak, pl.: index.html?adat1=ok&adat2=838&adat3=sikeres (lásd pl. Google keresésnél)

Űrlap elemek (ami a form tagon belül lehet)

Az alábbi kódpéldákban tesztelhetjük is az adott űrlapelem működését!

<input type="text" name="textfield">
szövegmező
<input type="password" name="textfield">
szövegmező, írás esetén rejtett karakterekkel
<textarea name="textarea"></textarea>
szövegdoboz
<input type="checkbox" name="people" value="0">Ádám
<input type="checkbox" name="people" value="1">Éva
jelölőnégyzet (többszörös választás)
Ádám Éva
<label><input type="radio" name="RadioGroup1" value="radio">1. válasz</label><br/>
<label><input type="radio" name="RadioGroup1" value="radio">2. válasz </label>
rádiógomb csoport (egyszeres választás)

<select name="select">
    <option selected="selected">kék</option>
    <option>zöld</option>
    <option>piros</option>
</select>
legördülő listás választómező (kék az alapértelmezetten kiválasztott - selected tulajdonság)
<input type="submit" name="elkuld" value="Mehet">
gomb, Mehet felirattal
<input type="reset" name="torol" value="Töröl">
speciális törlőgomb, az adott űrlap összes elemének tartalmát alaphelyzetbe állítja illetve törli (példát lásd alább)

Cimke és űrlapcsoport - példa űrlap

Űrlapjaink esetében alapvető igény, hogy egy űrlapmezőhöz tartozzon segédszöveg, hogy mit várunk az adott mezőnél. Ebben segít a <label> tag, melynek "for" tulajdonságának annak az űrlapelemnek az azonosítóját adjuk meg, amelyikhez tartozik a címke.

Továbbá hasznos lehet, ha egy űrlapot egyértelműen be tudunk határolni, vagy csak néhány összetartozó mező kapcsolatát erősíthetnénk, erre a <fieldset> tag használható. A fieldset-en belül egy <legend> tag-ban adhatjuk meg a csoport címkéjét, mely kiemelten jelenik meg a csoport keretében.

<form name="form1" method="get" action="">
<fieldset>
    <legend>Űrlapcsoport címke</legend>
    <label for="textfield">Írj ide:</label>
    <input type="text" name="textfield2" id="textfield">
    <input type="reset" name="torol" id="button" value="Töröl">
    <input type="submit" name="elkuld" value="Mehet">
</fieldset>
</form>
Teszteld az alábbi űrlapot. Mivel a method="get", így a szövegmezőbe beírt érték az adott szövegmező nevével az URL-ben jelenik meg az ürlap elküldése után. A label tagban pedig az adott űrlapelemhez tartozó címkét adhatunk meg.
Űrlapcsoport címke

9. Hasznos tippek

Kódformázás

A szabály nagyon egyszerű, minden újabb beágyazott tag-et beljebb kezdünk. A beljebb kezdés a szövegszerkesztőben egy TAB gomb lenyomásnyi helyet jelent. Egy példa jól formázott HTML kódra:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr><td colspan="3"></td></tr>
</table>
Helyesen formázott kódrészlet.
Látható, hogy a második táblázatsort egybe írtuk. Ezt azért tettük meg, mert a sor rövid volt, és nem rontotta az olvashatóságot. Ilyen esetben logikailag arra érdemes figyelni, hogy a sor elején lévő nyitótag (<tr>) záró párja (</tr>) legyen a sor végén.

A fenti formázási szabály alól van kivétel, a HTML oldalkeret főbb elemei: a <!DOCTYPE>, <html>,<head> illetve <body> elemeket nem szoktuk behúzni, ezek mind a forráskód sorainak szélétől kezdődnek, a bennük lévő elemekre alkalmazzuk csak a behúzást!

Gyors oldalbetöltés

Mit tehetünk ennek érdekében? Példák:

További tippek

10. Publikálás

Fájlok elnevezése

Elnevezés terén egyetlen megkötésre kell figyelnünk. A website-ok kezdőlapját tipikusan index.html-nek kell elneveznünk, mivel a szerverek a könyvtáraikban az "index" nevű fájlokat keresik. Ha nem találnak ilyet, akkor hibaüzenetet dobnak a felhasználónak.

A fájlok neve egységesen kisbetűs legyen, és ne használjunk ékezeteket vagy szóközt benne.

Irány a WEB!

Ahhoz, hogy egy weboldalt ne csak mi láthassunk, hanem interneten bárki számára hozzáférhetővé tehessük, szükség van egy szerverre, ahol tároljuk az elkészített oldalakat. A legegyszerűbb, ha egy ingyenes szolgáltatónál helyezzük el a weblapjainkat (pl. uw.hu, fw.hu, atw.hu... stb.). Regisztráció után kapunk egy tárhelyet és adatbázis elérést is. A feltöltés egy FTP vagy SCP programmal történhet a szolgáltató által megadott kapcsolódási beállításokkal. A használathoz, feltöltéshez általában az adott szolgáltató ad leírást.

11. Példák

Példakód

Példakód - proba1.html

Feladatok

Feladat 1 | Megoldás
Feladat 2 | Megoldás

12. Linkek, kimaradt részek

Kimaradt részek

Bizonyos részeket (van, amit szándékosan) kihagytam a fenti ismertetésekből. Ilyen a keretek (frame) használata, mely rossz elvekre tanít, így nem érdemes ezzel próbálkozni. Néhány további dolog viszont csak azért nem került elő, mert nem tartottam az alapokhoz fontosnak. A kimaradt főbb elemek:

Linkek