ÁttekintésA weboldalak HTML (Hyper Text Markup Language / Hiper Szöveg Leíró Nyelv) nyelven írt állományok. A HTML főleg formázási információkat tartalmaz. A "Hiper" jelentése: az oldalakon lehetnek más oldalakra mutató hivatkozások ("linkek").
A HTML lapok legegyszerűbb esetben statikusak (tartalmuk nem változik),
és egy szerveren tárolódnak. A felhasználók egy böngészőprogram
segítségével töltik le és jelenítik meg a lapokat. Tehát a böngésző
végzi a formázott megjelenítést, ő értelmezi a HTML kódot. ![]() URL (Uniform Resource Locator / Egységes Erőforrás Leíró)A weblapokon található hivatkozások más lapokra, képekre, filmekre, dokumentumokra mutathatnak. A hivatkozások megadásának szabványos módját URL-nek nevezzük.Az URL szerkezeteprotokoll://szerver-url/könyvtár/alkönyvtár/állomány Példa URL-rehttp://www.berzsenyi.hu/erben/www/C05/jegyzet0809/c05_1_20081114_permutacio.pdf A HTML nyelv jelölői
A HTML nyelvű dokumentum egyszerű ("ASCII") szövegből és jelölőkből (tag)
áll.
A tag-ek határozzák meg, hogyan kell formázni a letöltött weboldalt,
illetve a tag-ek segítségével lehet vezérelni az oldal működését
(hivatkozások, űrlapok,...).
Jelölők ("tag"-ek)<tag> a szöveg, amire a "tag" vonatkozik </tag> <tag paraméter="érték"> a szöveg, amire a "tag" vonatkozik </tag> Lezáró nélküli tag-ek
Bizonyos tag-ek (például a sortörés (BR), kép beszúrás (IMG)) lezáró pár nélkül működnek.
sor <br> sor <br> sor A szigorúbb (XHTML) szabvány szerint ezeket is "illik" "lezárni", ennek rövid formája a következő: sor <br/> sor <br/> sor <img src="kép.png" /> Egy HTML állomány szerkezete<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Cím</title> </head> <body> dokumentum tartalma... </body> </html> HTML 4 szerkezet, ha a W3C ellenőrzőnek ("validator") is meg akarunk felelni<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Szabványos HTML</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <h1 align="center">Szabványos HTML</h1> <p> Hibátlan... </p> </body> </html> HTML 5 sablon
</html> Fejléc és dokumentum törzsFejléc
A fejlécben adhatjuk meg a lap (böngészőablak felső szegélyén megjelenő) címét és a karakterkódolást.
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Cím</title> </head> Ékezet teszt karakterláncok magyarulÁRVÍZTŰRŐ TÜKÖRFÚRÓGÉP ÖT SZÉP SZŰZ LÁNY ŐRÜLT ÍRÓT NYÚZ Dokumentum törzs
Karakter formázások
Bekezdés formázások, listákHivatkozások
|
Tag | Eredmény |
<a href="http://..." target="_blank">Szöveg</a> | A hivatkozás új lapon vagy ablakban nyílik meg. |
<a href="http://..." target="_top">Szöveg</a> | A hivatkozás az adott ablakban nyílik meg. |
<a href="http://..." target="_self">Szöveg</a> | A hivatkozás abban a keretben nyílik meg, ahol rákattintottunk. |
<a href="http://..." target="keretnév">Szöveg</a> | A hivatkozás a megnevezett keretben nyílik meg. |
Képek
Tag | Eredmény |
<img src="link"> | kép beszúrás |
width="50%" vagy width="250" | kép szélessége |
heigth="35% vagy height="200" | kép magassága |
border="1" | keret mérete |
align="left" | igazítás balra, körbefolyatás jobbról |
align="right" |
igazítás jobbra, körbefolyatás balról |
<img src="tux.png" alt="Tux"> |
![]() |
Táblázatok
Tag | Eredmény | |||||
<table></table> | Tábla | |||||
<tr></tr> | Sor(Cellák nélkül ne írj bele szöveget!) | |||||
<td></td> | Cella | |||||
cellspacing="x" | Cellák közti távolság | |||||
cellpadding="x" | Szöveg távolsága a cella keretétől | |||||
bgcolor="szin" | Táblázat, sor vagy cella háttérszíne. | |||||
background="kép" | Táblázat, sor vagy cella háttér képe. (Nem W3C szabvány!) | |||||
align="left/center/right" | Táblázat igazítása. | |||||
valign="top/middle/bottom" | Cellatartalom függőleges igazítása. | |||||
width="50%" vagy width="200" | Hosszbeállítás (table és td után is írhatod) | |||||
height="60%" vagy height="300" | Magasságbeállítás (table, tr és td után egyaránt használható) | |||||
<table border="1"> <tr> <td>1.cella</td> <td>2.cella</td> <td rowspan="2">Oszlopban összevont cella</td></tr> <tr> <td colspan="2">Sorban összevont cella</td> </tr></table> |
|
Űrlapok
Az eddig felsorolt elem segítségével olyan (statikus) weboldalakat tudunk készíteni, amelyek egyirányú adatáramlást tesznek lehetővé: a szerveren tárolt információt a felhasználó (kliens-program) le tudja kérdezni és meg tudja jeleníteni. Az űrlap (FORM) lehetővé teszi, hogy a böngészőt futtató felhasználó is küldhessen adatokat a szerver felé, illetve azt, hogy valamilyen aktivitást kezdeményezhessen kliens oldalon.