HTML nyelv kifejezések

Általánosan használt jelekről van szó. De hogy férre értés ne essék, itt leírom ezeket.
Tag
HTML nyelv alap alkotóeleme, beírt kúpos zárójelekben. <>
Jel
Tag értelmezése HTML beírásban. Így megkülönböztetem kezdő és végső jeleket.
Elem
Taggal képviselt alkotóelem. A tagról és tartamáról is van szó (ami a kezdő és végső jelek közt van)
Attribútum
Tag paramétere, beírt még kúpos zárójelek belűl. Beállít elemnek valamilyen tulajdonságokt.
Tag tartalma
Az, ami a kezdő és a végső jelek közt van.
Tag szimbolikus beírása
<tag attribútum="attribútum értéke" egymásikattribútum=érték>Tag tartalma</tag>
HTML
Hyper Text Markup Language. Nyelv, melyel írunk web oldalakat.
HTML verzió
HTML nyelv fejlődöt és fejlődik. Manapság 4.0 az aktuális HTML verzió, de web oldalak töbsége még mindig HTML 3.2-ben van írva.
Kód
HTML nyelv beírása, valamikor forrás kódnak hívják.
Böngésző
Program, mely lehetővé teszi internetes oldal megjelenítését.
Mappa & könyvtár
Mindkettő ugyanaz.

HTML entitás karakterek

Ha egy szöveget akartok megjeleníteni böngészőben, egyszerűen beírtok oldal kódjába. De valamelyik jeleket HTML nyelvként értelmezik, úgyhogy normálisan nem jelennének meg. Például < és > a szövegben nem jelennének meg. Ennek okán létrehozták entitásokat. Azóta száma folyamatosan bővült sok új jelekkel.
Jel entitásokat jelek szekvenciával írnak be a kódba. Szekvencia egy & jellel kezdődik és egy ; jellel végződik. Közöttük van egy rövid betűkből álló bejegyzés.
Nem törhető szóköz talán az egyik legfontosabb entitás. Ez az egyetlen mególdás, hogyan megjeleníteni több szóközt egymás után (hagyjuk figyelmen kívül azt a tényt, hogy két szóköz egymás mellet tipográfiai hiba). Kódba az &nbsp; -ként írunk be. (angol non-breaking space szóból)

Jel	Entitások
nem törhető szóköz	 
&lt;	<
&gt;	>
&	&amp;
"	&quot;
­	&shy;
±	&plusmn;
×	&times;
©	&copy;
€	&euro;
®	&reg;
»	&raquo;
«	&laquo;

---

Általános diakritikus jelek Latin 1-hez

Szimbolikus beírás	Mi lesz betű felet?	Példa	Példa megjelenítése
&?tilde;	hullámvonal	ñ	ñ
&?circ;	tető	ê	ê
&?uml;	két pont	ä	ä
&?acute;	hosszú vonal	í	í
&?grave;	fordított vonal	à	à
&?ring;	karika, körvonal	å	å
&?slash	áthúzott betű	ø	ø

Magyar jelek helyettesítés entitásokkal nem praktikus és hibákat okozza. Magyar jeleket sokkal jobb normálisan beírni HTML kódba.

Entitások beírása számként

Jelölt kódolási formában lehetséges HTML forrásba beilleszteni jeleket szám szerint ASCI táblázatban. Ezt &#szám; beírással szabad csinálni.
Például az &#0190; egy ¾.

Általános attribútumok

Léteznek olyan attribútumok, amelyeket minden HTML tag tartalmazhat. Én általános attribútumoknak nevezem őket.

Általános attribútumok áttekintése

Attribútum	Jelentés	Érvényes
class	CSS osztály szelekcióhoz	összes elem
id	identifikátor CSS-hez és skriptekhez	összes elem
style	CSS stílus beírás	megjelenített elemek
title	elem címe, kiegészítő infó buborékban	osszes elem
lang	elem nyelve	összes elem
name	név más elemek együttműködéséhez	külömböző használtság
accesskey	funkciós billentyű	aktív elemek
tabindex	tabulátor aktválás sorrendje	aktív elemek
language	skript nyelve	összes elem
dir	szöveg íránya	legfőkép <bdo>
események	felhasználói események amelyek skriptet indítanak	megjelenített elemek

---

class

CSS-hez használt elem osztályozás. Lehetővé teszi egyszerű elem megjelölését és így megváltoztathatjuk a megjelenését. Stílus beírásban stílusna elősorolnak egy pontot. Példa:

<style>
.voros {color: red}
</style>
...
<p class="voros">Bekezdés piros színnel</p>

---

id

Identifikátor, amelynek egyértelműnek kéne lennie. CSS és skriptekhez használják. CSS-ben identifikátor neve előtt besorolunk egy duplakeresztet #. Példa:

<style>
#pici {font-size: 5px}
</style>
...
<p id="pici">Bekezdés hihetetlenűl pici betü mérettel.</p>

---

style

Stílus beírás CSS nyelvben. Példa:

<p style="line-height: 200%">Bekezdés dupla sor magassággal.</p>

---

title

Elem cimkéje, kiegészitő infó. Mai böngészőben megjelenik sárga buborékban egér huzigálással (korábban ez csak képeknél volt lehetséges alt attribútummal). Ez főleg linkeknél szép.

<a href="http://webiras.travick.net/" title="internetes weboldalak szerkesztésről, karbantartásról és fejlesztésről">Webírás</a>

Ha szükség van Title-ben (tehát főleg a sárga buborékban) egy sortörésre, Internet Explorer böngészőben ez lehetséges &#10; entitással, más bőngészőkben ezt nem tudom. Manapság legismertebb böngészők automatikusan törik a sorokat.
Az a megállapítás terjedt, hogy title-t figyelik a keresők. Véleményem szerint túlbecsülik title attribútum jelentőségét (title tag ellentétben, amelyet alá szokták becsülni)

---

lang

Az elem nyelve. Manapság nem nagyon hasznos dolog. Számítanak rá jövőben nemzeti környezetben jobb dokumentum megjelenítés miatt. Alapvető érték magyar nyelvnél a "hu". Több angol nyelv verzió is létezik, pl. "en-uk" brit és "en-us" amerikai angol nyelvhez.
Jelenleg van jelentősége wysiwyg Frontpage szerkesztő számára, amely lang attribútum szerint választja ki szótárt helyesírás ellenőrzéshez.
Lang segítségével lehet bár nem túl megbízhatóán megkülömböztetni CSS támogatás Firefoxban és Operában.

---

name

Név. Ez nem annyira általános attribútum, hasznosan csak valamelyik tagoknál lehet használni, főkép adatlapoknál. De mindig ugyan az a lényege: egyértelműen megnevezni (identifikálni) elemet alkotó elemek együtműködésükhez. Dinamikus HTML-ben funkcióját átvette id attribútum.

---

accesskey

Funnkciós billentyű. Ez az attribútum megengedi minden elemhez hozzárendelni billentyűt, amely lenyomás után (Windows-ban ráadássul ALT-al) elem aktiválni fogja magát. Csak azok az elemeknél lehet használni, amelyek aktiválhatóak. Ez azt jelenti, hogy csak linkeknél és adatlap alkotó elemeknél.
Egy link példa funkciós billentyűvel:

<a href="tweek.gportal.hu" accesskey="w">Szeretitek <b>W</b<indows-s?</a>

---

tabindex

Elem sorrendje tabulátor funkcióhoz. Böngészőben a tabulátor arra szolgál, hogy aktív elemeken tudjunk lépkedni. Tabindex attribútum megengedi alap elemek sorrendjét, úgyhogy más sorrendben aktiválódhatnak, mint ahogy HTML kódban vannak jelen. A tabindex attribútum értéke egy természetes szám. Ha valamelyiknek az értéke nulla, tabulátorral nem lehet aktiválni.

---

language

Skript nyelve. Nagyon ritkán használják, azaz legtöbb esetben JavaScriptben skriptelnek, és azt nem kell így beállítani. De programozóknak szükségük van VBScriptben language attribútumra in-line skriptek beíráshoz. Vigyázzatok, nekeverjétek össze language attribútumot lang attribútummal (dokumentum nyelve)

---

dir

Szöveg iránya. Értékek dir="ltr" és a dir="rtl". Az rtl jobbról balra jelent, jól jönn héber nyelvhez. Részben van támogatása más nyelvekben is, de nincs túl jó tapasztalatom vele, kissé zavarosan viselkedik.
Modern böngészőkben (Mozilla, IE6) már támogatják dir="rtl" attribútumot blokkos taggeknél -- jobbra rendezik ezeket. Gördítő sávot így esetleg bal oldalra lehet áthelyezni, de ezek mind olyan nem fontos játszadozásnak számít, amelyet itt magyarországon nem nagyon lehet hasznosítani.
Ahoz, hogy nem csak szöveg igazolás, forduljon szöveg is betű egymás után, ahoz szükséges használni dir attribútumot <bdo> tag-ben. (ez a tag különben teljessen haszontalan, úgyhogy máshól nem is írok róla)

---

események

Dinamikus HTML-be lehet hozzáadni esemény attribútumot, amely rendezi valamilyen skript elindítását. Létezik 20 esemény, klaszikus példa onmouseover -- áthúzás egérrel vagy onclick -- klikk egy elemre. Összes elem listázás már nem HTML-be tartozik, hanem skript nyelvek kifejezéshez. Eseményeket angol nyelven úgy hívják hogy "events". Példa:

<p onclick="alert('Talalat')">Klikkelhető bekezdés</p>

Fej

Tagok, melyek dokumentum fejbe tartoznak ( <head> és </head> jelek közt). Elméletileg ide tartozik még <bgsound> és !doctype.

Tag	Jelentése	Páros	Tartózkodás
title	oldal címe	igen	<head>
base	linkek alap helye	nem	<head>
link	nem megjelenített hivatkozások	nem	<head>
meta	információk dokumentumról	nem	<head>

---

title

Oldal címe. Páros tag. <title> és </title> jelek közt címként értelmezik. Címnek vannak kevésbé ismert funkciói:

• megjelenik a fejécben és a főpanelben mint alkalmazás címe
• megjelenik mint cím a keresőkben
• prioritása van oldal indexálás kereső robotokkal
• sok software natív hivatkozásként használja

Az elem tartalma lehet egyszerű szöveg tagok nélkül.
<title> tagnak nincsen semmi köze a title attribútumhoz.

---

base

Alap elhelyezés vagy megcélzás. Nem páros tag. Csak fejben tartózkodik.

<base> tag attribútumai

Attribútum	Jelentés	Értékek
href	alap elhelyezés, ahonnan következik minden relatív hivatkozás (link)	URL mappák
target	keret neve, melyben megjelennek a hivatkozások (ha náluk másképp nincs meghatározva)	keret neve, _blank , _top , _parent vagy _self

<base> tagot keveset használják, főleg munka egyszerűsítésként lehet használni. Általában csak az egyik attribútummal dolgozunk.
Internet Explorer 6 verzióig engedélyezi többszörös <base> tag használatát. egy oldalon (<base> tag belűl). Base bevezetett dokumentumban később, süketíti előző base-t. Ha például van oldalon link osztály, melyeket új ablakba kívánod nyitni, előre bedobunk <base target="_blank">. Utána, ha oldalnak újra normálisan kell folytatnia, elég újra <base target="_self"> használni. Ezt az egész szerkezetet nem javaslom használni, mert nem alapértelmes (más szóval kiszámíthatatlan). Kizárólag Explorer-ben működik, és Explorer 7-ben állitólag már nem fog működni.
Személyesen base tagot oldal hangolás időszakban használom, amikor letöltök webről valamilyen oldalt viszonylagos hivatkozásokkal, hogy hangolás közben működjenek, és nincs kedvem mindegyiket átirogatni.
A forrásban minden viszonylagos hivatkozás előtt szükséges beírni base tagot, melyet befolyásolni kell (tehát akár stílus vagy script hivatkozás előtt).

---

link

Kapcsolódás egy másik fájlal, láthatatlan kapcsolat. Leggyakoribb használat a külső CSS stílus kapcsolódás. Nem páros tag, csak fejben tartózkodik.

<base> tag attribútumai

Attribútum	Jelenetés	Értékek
rel	kapcsolat linkelt fájlhoz	stylesheet, elméletileg más is
rev	visszamutató kapcsolat, gyakorlatilag nem működik
href	út a linkelt fájlhoz	URL
type	MIME fálj típus (nem kötelező)	MIME előírás (pl. "text/css")
media	korlátozás hozam típusra	all, screen, print, és más
disabled	érvényesség visszavonása (skriptek miatt)	nincs értéke

Link elég drámai változásokon ment át, manapság csak egy pár esetben használják:
Példa egy stílus csatlakozásra:
<link rel="stylesheet" type="text/css" href="falj.css">
Példa egy kedvenc ikon csatlakozásra:
<link rel="shortcut icon" href="favicon.ico">
Példa egy RSS csatorna információról:
<link rel="alternate" type="application/rss+xml" href="http://www.valamilyenblog.hu/falj_nev.xml"<.
Példa egy sztatikus kanonikus dokumentum címről keresőknek:
<link rel="canonical" href="http://webiras.travick.net/">

rel

Rel attribútum kifejezi kapcsolat típusát. Gyakorlatban csak rel="stylesheet" használnak. Ismerem még rel="shortcut icon"-t egy ikon csatlakozáshoz dokumentumhoz (nem alaptermészetes, de működő funkciós érték).
Minden más kikiált használás (next, prev, content, rev attribútum) nagyon korláltozva működnek. Navigációs kapcsolatokat fejeznének ki további oldalakhoz weben. Probléma az, hogy például Internet Explorerben ebből nem működik semmi. Opera tud oldalaknál megadott navigációs linkekkel (tag linkek) ábrázolni panelt hivatkozásokkal megadott oldalakra.
HTML tag <link rel="prefetch" href="oldal.html"> Gecko típusú oldalakon (Mozilla, Firefox, stb.) okozz megadott fálj előtöltését (leggyakrabban oldal). Az oldalt láthatatlanul tölti. Abban az esetben használják amikor már majdnem biztos mire fog klikkelni a felhasználó, hogy már cache memóriába legyenek az adatok. Hasonló előtöltést okozza <link rel="next"...>, amely normálisan kifejezi sorrendben következő oldalt (és normálisan nem csinál semmit).

---

meta

Információk a dokumentumról. A fejben tartózkodó nem páros tag. Információt nyújt például a kulcs szavakról vagy használt kódólásról. Az átlagos internet oldalnak fejben van körül négy különböző <meta> tag. Gyakorlatban csak a programok (keresők, praserek és szerkesztők) olvasnak és használnak ezeket.

Meta tag attribútumai

Attribútum	Jelentés	Érték
name	a felhasználó információ fajtája	author, description, generator, keywords, és sok más
http-equiv	a http fej ekvivalense	conent-type, refresh, és sok más (bármilyen http adat)
content	tartalom, maga az információ	információ típus szerint

Minden meta tag tartalmazza vagy a name attribútumt vagy a http-equiv. Mind a kettő egyszerre nem lehet.

A <meta> tag, name attribútum

name=	Jelentés	content=
keywords	múltban a kulcs szavak keresőknek, manapság értéktelen	szó, szó, szó
description	Az oldal leírása, leggyakrabban kereső gépeknek	rövid leíráss az oldal tartalmáról
author	információ a szerzőröl, leggyakrabban egy név	bármi
generator	egy program identifikáció, mely létrehozta oldalt	programmal adott szólánc
robots	tiltás robotoknak követni egy oldalt vagy figyelni a linkjeit	[index, noindex], [follow, nofolow]
és sok más, amit a program hozzáad vagy valami titokzatos dolgokra jó

<meta> tag, http-equiv attribútum

http-equiv=	Jelentés	content=
content-type	A MiME szpecifikáció + információ kódolásról	text/html; charset=utf-8, text/html; charset=windows-1250 és más kódolások
content-language	Infó dokumentum nyelvről	hu, sk, de, en-us, en-gb és sok más nyelv
refresh	a megadott idő után átírányítás más oldalra	másodpercek;URL=link pl. "5;URL=http://www.valahova.hu/barmi"
cache-control	a cache használata / módja (mentés kliensen)	cache, no-cache
És sok más HTTP fej ekvivalens. Valamelyiket csak valamelyik kliens veszi használatba, úgyhogy nem tűnik nekem bölcsnek írni róluk.

---

HTML Fej példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Oldal címe</title>
<link rel="stylesheet" href="stilusok/en-stilusom.css" type="text/css">
</head>
<body>
... itt folytatódik a dokumentum

HTML Dokumentum szerkezete

Alap jelek meghatározzák HTML fájl területeket.

Elem	Jelentése	Páros	Tartózkodás
html	HTML dokumentum kezdete	igen	fájl elején
head	oldal feje	igen	fálj elején
body	oldal törzse + háttér definíciója	igen	<head> után
<!-- -->	megjegyzés	igen	bárhol
!doctype	DTD definíció	nem	teljesen elején

---

html

Egész dokumentumnak a kezdése és vége. Minden tartalomnak benne kell lennie. Ez a jel nem kötelező, legtöbb böngésző kitalálja. De ha azt akarod, hogy fáljok szabványosak legyenek, használj <HTML> elemet.
HTML taghoz nincsenek attribútumok.

---

head

Dokumentumnak a feje, amely nem jelenik meg. Itt találhatunk további nem kötelező elemeket (title, meta, link, script, style stb.). Ha fejbe egyszerű szöveget írsz, valamelyik böngészőben megjelenik a dokumentum elején.
Fej taghoz nincsenek attribútumok.

---

body

Dokumentum törzse. Tartalmazza összes megjelenített oldal tartalmát.
Lent feltünt attribútumok régiesek (kivéve alap attribútúmokat) és helyettesítik CSS body beállított tulajdonságokkal. Ajánlott CSS tulajdonságokat jobb oszlopban találhatod.

Body törzselem attribútuma	Jelentés	Értékek	CSS helyettesítés Body elem számára
bgcolor	háttér szín	szín	background-color
background	kép a háttérben	kép URL	background-image
szöveg	előtér (szöveg) szín	szín	color
link	nem látogatott link színe	szín	a:link {color: ...}
vlink	meglátogatott link színe	szín	a:visited {color: ...}
alink	klikkelt linkek színe	szín	a:active {color: ...}
bgproperties	kép háttér mozgása	scroll / fixed	background-attachment
scroll	törzs görgetés (inkább nehasználjátok)	yes/no	overflow
leftmargin	bal szegély	képpontok	margin-left
topmargin	felső szegély	képpontok	margin-top
rightmargin	jobb szegély (NN kivéve)	képpontok	margin-right
bottommargin	alsó szegély (NN kivéve)	képpontok	margin-bottom
marginwidth	bal és jobb (csak NN)	képpontok	margin-left, margin-right
marginheight	felső és alsó (csak NN)	képpontok	margin-top, margin-bottom

Példa: <body background="kep.gif" bgcolor="red" text="white" link="yellow" vlink="brown" alink="#BBB">
Szín attribútumok megadása törzselemben régies, HTML dokumentumot javaslom színezni CSS stílusok segítségével, például:
<body style="color: white; background-image: URL('kep.gif') red">
vagy még jobban dokumentum fejében style elem segítségével:
<style> body {color: black; background-color: green; background-image: URL('kep.gif')}
a:link {color: blue;}
a:active {color: #FFF}
a:visited {color: red;}
</style>

---

!--< megjegyzés -->

Minden, ami HTML fáljban <!-- és --> jelekkel van becsomagolva megjegyzésként veszi a böngésző és sose jelenik meg. Tehát <!-- megjegyzés eleje és --> megjegyzés vége.
Négy cseles helyzet:

• Nem működnek többszörös megjegyzések: <!-- ez megjegyzés, <!-- ez is --> de ez már nem! -->
• <style> és <script> elemek belűl tartalmat megjegyzésekbe csomagolják, hogy régi böngészők figyelmen kívül hadják és jól fogalmazzák tartalmat mint stílust vagy skriptként és nem pedig mint HTML kódot. Csomagolás megjegyzésekbe manapság már teljesen felesleges (publikált 2009-ben)
• Valamelyik programok és skriptek használják megjegyzéseket dolgok beillesztéshez. Megjegyzés elem mögöt adnak valamilyen kódot. Pl.: <!--# egy SSI beillesztés -->, <!--webbot egy Frontpage beillesztés -->
• Előírás azt mondja, hogy megjegyzés befejezésben lehet szóköz vagy akár más jel. Tehát ez: -- > is megjegyzés befejezése. Vigyázni kell, hogy a megjegyzésben ne legyen két kötőjel: -- egymás után, mert utána elég egy > és ez itt így már nem megjegyzés.

---

!doctype

DTD szabvány. Dokumentum elején kell írni, még a <HTML> jel előtt. Nem muszáj csinálni ezt, de SGML és XML nyelv szabvány jelzés szerint jó, ha strukturált formában elmondjuk, hogy ez a dokumentum egy HTML dokumentum; méghozzá azt is kellene jelezni , hogy HTML dokumentum melyik verziónak megfelel. Ennek a lényege csak a jövőben rejlik, amikor dokumentumok jobban automatikusan lesznek feldolgozva. Ennek a szintaktisa elég fura. Csak egy pár példát mutatok:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
"Strict" lánc helyett valamikor használunk "draft" vagy "final" láncot. Amennyiben nincsen ellenőrízve fálj szintaktisa parserel hozzákötődő DTD szerint, <!doctype>-t inkább nehasználjatok.
Manapság !doctype fő funkciója megjelenített CSS modulok átkapcsolás. Másszóval doctype határozza meg melyik böngészőben hogyan lesznek kiszámolva a szélességek és szöveg mérete. Ez egy elég kényelmetlen helyzet, amely történelmi folyamatból alakult ki.

---

Példa

Klasszikus HTML fálj így nézhet ki:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
fej tartalma
</head>

<body>
törzs tartalma
</body>
</html>

Hogyan szerkeszteni egy weboldalt

Mire van szükség - Mire nincs szükség - Két lépés - Fájlok - Szerkesztők - Forrás beírás - Útmutató kezdőknek - Arany közép út

---

Mire van szükség

• Agy, elsősorban
• Szüksége lesz egy számítógépre, amelyen megy legalább valamilyen egyszerű szöveg szerkeztő program. (Windowsban Notepad - jegyzettömb)
• Szüksége van egy webböngészőre. Újjabb számítógépeken mindig fel van telepítve - Internet Explorer (kék E betű), Firefox (róka), Opera (piros O betű), ez mind ingyen van.
• Jól jön csatlakozás internethez. Akinek nincs csatlakozás internethez, muszáj lesz hogy legalább egyszer kis időre menjen internetre és legyen lehetősége másolni valamiről, amin oda hozza a weboldalakat (floppy, CD).
• Muszáj lesz hogy miről írjon.
• Nevágjanak bele ha nem tudjátok hogyan kell másolni vagy mi az a mappa.

---

Mire nincs szükség

• Nincs szükség internet kapcsolatra.
• Kimélhetnek drága vagy bonyolult programokat.
• Nem kell tudnotok programozni.
• Első próbákért nem kell fizetni, fizetni csak domain igényléskor kell.

---

Két lépés

1. Oldal megírás = html fálj létrehozás (vagy több összecsatoltt fálj)
2. Ennek a fáljnak kiállítása interneten

Ebben a szövegben első lépéssel fogok foglalkozni, web oldal szerkesztéssel. Először saját lemezen.

---

Fájlok

Web oldal egy fálj amelynek a kiterjesztése html vagy htm. Ez majdnem egyszerű szöveges fálj amely tartalmazz HTML nyelvnek a jeleket. Fálj .html kiterjesztésének van lemezen ikonja, amely mutat, hogy html fáljról van szó. Például így nézhet ki:

Oldal kinyitható két módon:

1. Úgy nézitek meg mint egy oldalt (böngészőben), olyankor nem lehet szerkeszteni.
2. Vagy kinyitjátok mint szöveget (például jegyzettömbben), ezt úgy nevezik hogy forrás vagy kód vagy forrás kód, azt lehet módosítani. Úgy szerkesztenek oldalakat, mint kódot.

HTML fájlokat létrehozhattok

1. HTML szerkesztőben (kezdőknek jó),
2. vagy írhattok rögtön forrást HTML nyelvben (igényel több munkát, de biztosabb, szórakoztatóbb és nem is olyan nehéz)

---

HTML szerkesztők

HTML szerkesztő programok web oldal szerkesztésre fejlesztették ki. Kezdőknek használhatóak legfejebb wysiwyg szerkesztő programok, amelyben írtok rögtön szöveget és HTML kóddal nem foglalkoztok.
Wysiwyg szerkesztőben normálisan megírtok szöveget, beillesztenek a képek és elmenti egy HTML fáljban. Ennyi az egész, szerkesztő program kitölti összes HTML jeleket egyedül.
Wysiwyg szerkesztőkből ismerem Dreamweaver, Frontpage 2000 (2002 és 2003 verzió magyarul is van), NVU és még egy pár, de nem túl jó programokat. Wysiwyg programoknak természetesen vannak hátrányaji, fő hátránya a létrehozott kódnak vitás minősége. Ez kezdettre mindegy.

• Wysiwyg szerkesztő gyártók azt mondják: Mi programunkkal szerkeszthetnek oldalakat HTML tudás nélkül!
• Én mondom: HTML nyelvben szerkeszthetnek oldalakat valamilyen komplikált program haasználat nélkül.

Wysiwyg szerkesztők mellet még vannak kódszerkesztő programok, amelyekben csak kódot írtok, de a program sokat segít azzal (tölt, súg stb.) Kódszerkesztő programok: HomeSite, EasyPad, UltraEdit, PSPad, jEdit, stb., szükség esetben jegyzettömb is. Egyszerűen szöveg szerkesztő programok. De itt már a második lehetőség web oldal készítésnél vagyok, forrás beírásnál.
Web oldal készítéshez nem lehet használni Wordot.

---

Forrás beírás

Aki ura akar lenni körülményeknek, az beírja forrást elejétől egyedűl szöveg szerkesztőben. Meg kell tanulnia HTML nyelv alapjait, amit idővel úgyse lehet kikerülni, mert bonyolultabb dolgok wysiwyg programban rosszabb megcsinálni. Most következik egy kód bemutatás:

<html>
<head>
<title>Az első weboldalom</title>
</head>

<body>
  Az első HTML oldalom.
  És valamilyen további szöveg.
</body>
</html>

Ha például használtok jegyzettömbet (Notepad), beírtok előző szöveget (vagy kikopiztok), és elmentitek valahová lemezre mint fáljt például pelda1.php, elkészített az első web oldalad. Példát megjelenítheted a böngészőben.

---

Útmutató kezdőknek

1. Hozzátok létre lemezen egy új könyvtárat (mappát), például C:\proba és menjetek rá.
2. Hozzátok létre egy új fáljt (például jobb egérgomb > Új)
3. Nevezzétek át a fáljt oldal.html-re (igazoljátok kiterjesztés változtatását), ikon fáljnál meg fog változni.
4. Nyissátok ki dupla-klikkel. Böngészőben megjelenítt üres oldal.
5. Klikkelj Nézet - Forrás. Elundul szöveg szerkesztő, jelenleg üres lesz.
6. Ide írjatok valamilyen szöveget, kívánság szerint töltsétek ki bármilyen HTML jelekkel.
7. Fálj - Mentés.
8. Kapcsoljatok át megint a böngészőbe és nyomjatok le frissítés gombot (F5).
9. Tekintsetek át változásokat.
10. Esetleg menjetek vissza szöveg szerkesztőbe és újra változtássátok meg a forrást. Mentés és frissítés után megjelennek a változások.

405. Így végtelenűl tudtok kisérletezni.

Most még a web oldal lemezen van, később fogjátok fogjátok server-re.
Web oldalra szánt fálj nevekben soha nehasználjatok se mellékjeleket se szóközeket! Ajánlom minden kis betűkkel írni (így később nem tudtok hibázni).

---

Arany közép út

Érdekes mód, hogyan megtanulni HTML és jó oldalakat csinálni:

• csinálni fáljokat valamilyen wysiwyg szerkesztőben
• nézni forrás kódot, amelyet program létrehozz
• esetleg kicsit módosítanirajtuk és nézni, mi fog történni

Például én úgy csináltam az elején.

HTML alapok

Forrás kód megjelenítése - HTML nulladik példa - Tagok = Jelek - Első példa, HTML szerkezet - Második példa, kinézet módosítása - Harmadik példa, hátterek, hivatkozások -

Ez a szöveg csak kitűzi a HTML alapokat. Egyenlőre nagyon egyszerűsítek.
Ha használsz valamelyik grafikus (wysiwyg) szerkesztőt mint például FrontPage-t, nem kell foglalkoznotok HTML-el. De csak amíg nem jelennek meg a problémák. Úgyhogy jobb rögtön megtanulni HTML nyelvet.

---

Forrás kód megjelenítése

Minden oldal egy lemezen vagy egy szerveren el van mentve forrás kód formában. Ez a kód HTML nyelvel van írva.
Ha meg akartok tekinteni forrás kódot vagy módosítani rajta, lépjetek be a böngésző menüben: Nézet > Forrás kód (vagy View > Source, de lehet más neve is). Kinyílik egy program és lesz benne forrás kód. Ez a program leggyakoribb esetben jegyzettömb (Notepad), de lehet az teljesen más program. Próbáljatok megnézni a forrás kódot, mondjuk most rögtön.

kettő nézet egy fáljra

Ahogy látjátok, egy fáljt két külömböző típusú programal lehet megtekinteni.

• böngészőben - ez megjelenítés
• editorban - ez szerkesztés

Gyakorlatban a dolog úgy nézz ki, hogy az oldalt kinyitom két programban - böngészőben és szerkesztő editorban.

Átírással módosul az oldal.

Ha kód forrás kinyílt a jegyzettömbben, átírással módosíthattok az oldalt. Természetesen az oldalnak lemezen kell lennie.
Ha nem tudjátok, hogy milyen módon létrehozni lemezen oldalt, olvassátok meg Haladás kezdőknek

---

HTML nulladik példa

Darab HTML kód:

<b>Fett szöveg</b>, <i>szöveg kurzívval</i>. Szép, nemde?

Megjelenik böngészőben így:
Fett szöveg, szöveg kurzívval. Szép, nemde?
Jelek hegyes zárójelekben "tag"-nak hívunk és dokumentum jelentését vagy kinézetét szabályoznak.
Tip: hegyes zárójeleket a magyar billentyűzeten jobb ALT + < (í gomb) és > (y gomb) írunk.

---

Tagok = jelek

A HTML fájl egy szokásos szöveg borított HTML tagokkal.

• Tagok megállapítják, hogyan fog szöveg kinézni, azaz milyen lesz a formája.
• Minden tagot hegyes zárójelek zárják el.

Ami nincs hegyes zárójelekkel jelölve, az szöveg, amelyik megjelenik. Szimbolikusan leírva:

<tag> szöveg </tag>, <tag> és megint szöveg és <tag> és megint szöveg

---

Az első példa - HTML szerkezet

<html>
  <head>
    <title>Az első weboldalam </title>
  </head>

  <body>
    Az első HTML oldalam.
    És valamilyen további szöveg.
  </body>
</html>

Ezt a példát megjelenítheted a böngészőben. A színek csak jobb megértéshez vannak ott, nem fontosak. A tagok jelentése:
<html>
a dokumentum kezdete
</html>
a dokumentum befejezése
<head> és </head>
elkezdi és befejezi a fejet, amely nem jelenik meg, de tartalmazza néhány fontos paramétert, például
<title> és </title>
megadja dokumentum nevet (eltérhet a fájl névtől).
<body>
Ami <body> és a </body> között van, meg fog jelenni böngészőben. <body> egy tag, melyel kezdődik a dokumentum saját törzse (angol. body = törzs).
Ezzel a példával leírtam dokumentum alap szerkezetét. Fent említett tagoknak minden HTML dokumentumban van helye.
Ha játszani szeretnétek HTML oldallal, jó ötlet átmásolni fent megadott kódot valamilyen fájlba saját lemezre (hardiszk) és kisérletezni vele.

---

Páros tagok

Példából nem nehéz bekövetkezni, hogy a tagok párban szoktak lenni <valami> és </valami>.

• A <head> fej kezdete és </head> a befejezése
• A <body> oldal törzse kezdete és a </body> az oldal törzs befejezése
• A <b> fett szöveg kezdete és </b> a fett szöveg befejezése

És így tovább.
Páros tagok mellet még vannak nem páros tagok, melyeknek nincsenek záró befejező tagok. De ezekből nincs olyan sok. Példák nem páros tagokról:

• <img> egy kép tag és olyan mint </img> HTML-ben nem létezik.
• <br> egy sortörés tag, de </br> nem létezik.

Némi leírás nem páros tagokról lejjebb van.

---

Második példa - megjelenése változtatása

<html>
<head>
  <title>A második weboldalom</title>
</head>
<body>
  <h1>Cím</h1>
  <p>Bekezdés <b>fett szöveggel </b>, s <i>kurzív</i>.
  <span style="color: red;">Piros szöveg.</span></p>
  <h2>Másodrangú cím</h2>
  <p>Bekezdés <i><b>fett kurzív szöveggel. </b></i><br>
  A szöveg sortörés után is ugyan abba a bekezdésbe tartozik.</p>
</body>
</html>

Ezt a példát is lehet megjeleníteni böngészőben. Ez itt már egy kicsit bonyolultabb de ehez agyatok van.
<h1></h1>
Elsődleges cím meghatározása.
<h2></h2>
Második szintű cím (fejezet cím, közcím). Lehet használni hat cím szintet (<h6>-ig). Megjeleníti különböző méretekben fontosság szerint.
<p></p>
Bekezdés meghatározása. Talán leghasználtabb tag. Vége mögé böngésző csinál egy törést és kihagy vertikálisan helyet.
<b></b>
Fett szöveg lesz tagok közt.
<i></i>
Kurzív.
<span></span>
Tag pár amely meghatározza különböző szöveget.
<span style="color: red;"> , </span>
Ebben az esetben a becsomagolt szövegnek a színe piros lesz. Ez az első tag, amelynek van úgynevezett attribútuma. Attribútum egy "style" és az értéke "color: red" (angol. szín: piros). Ezzel az attribútum segítségével style= lehet meghatározni szöveg megjelenítését, becsomagolt bármilyen taggal. Gyakorlatban legtöbb tagnak van valamilyen attribútuma, eddig próbáltam kímélni ezeket.
<br>
Sor törés, úgynevezett puha enter. Ez a tag után szöveg mindig következő sorban fog kezdődni, de ez nem bekezdés. Figyelem, ez a tag nem páros, ez azt jelenti, hogy nem létezik semmilyen </br>.
Most már ismeritek minden szükséges taggot szöveg szerkesztéshez.

---

Harmadik példa - hátterek és hivatkozások

Ebben a példában próbálom leírni két össze nem függő dolgot, már egy kicsit nehezebb.

<html>
<head>
<title>Harmadik példa, háttérszín és a hivatkozások</title>
</head>

<body style="background-color: green; color: yellow;">
<h1>Háttér és hivatkozások</h1>
<p>Egyszerű szöveg.</p>
<p>Hivatkozás a <a href="http://www.google.hu">Google-re</a>. </p>
<p><a href="pelda2.php">Hivatkozás a 2, példára.</a></p>
</body>
</html>

Jelenítsetek meg a példát böngészőben és próbáljátok ki a hivatkozás működését. Van itt nekünk egy új tag <a> és egy pár új attribútum.
<a href="cím"> </a>
Ezek a taggok közt szöveg (vagy kép) meg fog jelenni mint hivatkozásnak a szövege ("a" mint angol Anchor = hivatkozás).
href
Az "a" tag attribútum egyenlő úttal hivatkozott fájlhoz. Itt használják vagy relatív vagy abszolút címet.
abszolút cím
http://www.satöbbi.hu formában használunk. Példában Google címét használtam.
relatív cím
ha hivatkozni akarok saját fájlomra, felesleges odaírni azt a http:// és az egész utat. Legjobb az, hogyha fájl ugyanabban a könyvtárban van mint az aktuális weboldal. Ilyenkor relatívan lehet hivatkozni rá. Elég beírni csak fájl nevét és a böngésző ezt megérti (Példában ilyen módon van hivatkozva a másik fájlra pelda.php). Amennyiben a célzott fájl egy másik közeli könyvtárban tartózkodik, elég beírni href="könyvtár/fajl.html". Ha a könyvtár egyel magasabb van aktuális könyvtártól, használunk szokásszerűen két pontot.
<body style="background-color: green; color: yellow;">
egy módszer, hogyan megadni színeket a dokumentum egész törzsének.
style
<body> tag attribútuma, mely meghatározza az egész dokumentum kinézetét. Ebben az esetbe beállítja az oldal hátterét (background-color) zöld színre és a szöveg színét (color) sárga színre. Style attribútumot már az előző példában használtam fel. Lényegében már a kaszkád stílusról van szó (CSS). Kaszkád stílusok alap eszköz az oldal kinézetének a megváltoztatásához. Style attribútummal lehet megváltozni a kinézetet.

---

HTML általános Szintaktika

HTML nyelvnek van egy pár alapelve, melyet jó megemlíteni:

• Betűk mérete nem lényeges, <body> ugyanaz mint a <BODY>
• Címekben és fájlnevekben lényeges a betű mérete, nem lehet itt se betűköz se magyar ékezetek
• Tagokat, melyeket böngésző nem ismeri fel, mintha nem léteznének
• Tag elején nem lehet betűköz, például <br> rosszul van.
• két betűköz egymás után (vagy több) ugyanolyan mintha csak egy lenne
• sor vége a kódba úgy értelmezhető mint egy betűközt
• Az attribútum neveket mindig jó idéző jelekbe rakni, de nem teljesen szükséges, ha belűl nincs betűköz
• © típusú szimbólumokat forráskódba &valami; szólánccal írunk
• Megjegyzés a forráskódba <!-- és --> jelek közt beillesztjük <!-- Ez itt egy megjegyzés, mely nem fog megjelenni. -->

HTML alapok 1.

HTML alapok

Kód tördelése és a megjelenés

Bekezdések <p>

Sortörés <br>

Címsorok <h1> ..<h6>

Szövegformázás

Fizikai formázás

Logikai formázás

Szöveg betűtípusának, méretének, színének megadása <font>

A paraméterek kombinálása

Vissza

Kód tördelése és a megjelenés

A HTML oldalak készítésénél meg kell szoknunk azt, hogy a HTML kód tördelése (mennyi üres helyet teszünk, hol nyomunk entert) nem befolyásolja az oldal megjelenését. Ez alól kivételt jelent, ha a <pre> taget használjuk.

Interaktív példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Példa</title> </head> <body> <p> Attól, hogy rengeteg üres helyet használok és össze vissza tördelem a sorokat a kódban, azzal az oldal megjelenését nem befolyásolom. </p> <pre> Kivéve ha a pre taget használom, mert ekkor bizony számít, hogymi szerepel új sorban, és mennyi üres helyet hagyok ki. </pre> </body> </html>

A <pre> tag tartalmaként megadott szöveget a böngésző azonos szélességű betűkkel jeleníti meg. Hagyományos szöveg írásához ne használjuk, de például programkód megjelenítésére jó lehet.
Ha tehát a szöveget bekezdésekre kívánjuk tagolni, ahhoz egy újabb taget kell megtanulnunk.

Vissza

Bekezdések <p>

A <p> tag segítségével a szöveget bekezdésekre oszthatjuk. Az adott bekezdés tartalmát a <p> és </p> elemek közé kell tenni. A záró </p> tag elvileg nem kötelező, de mi azt ajánljuk, hogy mindig szerepeltessük azt.
A böngészőprogramok a bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak, ennek mértékét is a stíluslapok segítségével adhatjuk meg.

A <p> tag fontosabb paraméterei

Paraméter	Érték	Leírás	Megj.
align	left | center | right | justify	A bekezdés igazítását állíthatjuk be. left: balra center: középre right: jobbra justify: sorkizárt
CSS alternatíva text-align	left | center | right | justify	A bekezdés igazítását állíthatjuk be. left: balra center: középre right: jobbra justify: sorkizárt

A táblázatban láthatjuk, hogy a HTML 4.01 szabványban már nem javasolják a bekezdés igazítására szolgáló align paraméter használatát, az igazítást ezért inkább stílusokkal adjuk meg. Ehhez a text-align paramétert kell használnunk.
Ügyeljünk arra, hogy a HTML paraméter esetén a HTML tagben kell szerepeltetni a paramétert és az értéket, ahol a paraméter után egyenlőségjelet kell tennünk, a paraméter értékét pedig idézőjelek közé kell tennünk. Például: <p align="left">   Amennyiben több paramétert is megadunk, azokat üres hellyel kell elválasztani.
Például: <p align="left" title="Üdvözlő szöveg">
A stíluslapos megoldás esetén a kívánt stílust a tag style paraméterében kell megadni. A CSS paraméter megadása után egy kettőspontot kell tennünk, majd meg kell adnunk a paraméter értékét. Például: <p style="text-align: left"> Amennyiben több paramétert is megadunk, azokat pontosvesszővel kell elválasztani.
Például: <p style="text-align: left; color:red">

Bekezdések igazítása HTML paraméterekkel

Kód	<p align="left"> Balra igazított bekezdés</p>
Eredmény	Balra igazított bekezdés
Kód	<p align="center"> Középre igazított bekezdés</p>
Eredmény	Középre igazított bekezdés
Kód	<p align="right"> Balra igazított bekezdés</p>
Eredmény	Jobbra igazított bekezdés
Kód	<p align="justify"> Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés.</p>
Eredmény	Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés. Sorkizárt bekezdés.

Bekezdések igazítása Stíluslapokkal

Kód	<p style="text-align: left"> Balra igazított bekezdés</p>
Eredmény	Balra igazított bekezdés
Kód	<p style="text-align: center"> Középre igazított bekezdés</p>
Eredmény	Középre igazított bekezdés
Kód	<p style="text-align: right"> Jobbra igazított bekezdés</p>
Eredmény	Jobbra igazított bekezdés
Kód	<p style="text-align: justify"> Sorkizárt bekezdés</p>
Eredmény	Sorkizárt bekezdés

Vissza

Sortörés <br>

Amennyiben a szövegen belül egy sortörést szeretnénk elhelyezni, a <br> taget kell használnunk. Ez is egy olyan tag, amelynek nincs záró párja.

Sortörés

Kód	Eredmény
Ez az első sor<br> Ez pedig a második	Ez az első sor Ez pedig a második

A <br> tagnek is vannak paraméterei, de azokkal kicsit később, a képek témakörben fogunk megismerkedni. Hogy miért pont a képeknél? Majd kiderül...

Interaktív példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Példa</title> </head> <body> <p align="right"> Ez egy olyan bekezdés, amelyet HTML paraméter használatával igazítunk. </p> <p style="text-align:right"> Ez egy olyan bekezdés, amelyet stíluslap segítségével igazítunk. </p> </body> </html>

Feladat

Próbáld ki az összes igazítási módot, HTML paraméterrel és stílusmegadással is! Próbáld ki a <br> tag hatását is!

Vissza

Címsorok <h1> ..<h6>

A címsorok (heading) - mint ahogy a szövegszerkesztésnél is megszokhattuk - az oldalak logikai felosztását teszik lehetővé. A HTML nyelvben ezeket a <h1> <h2> <h3> <h4> <h5> <h6> tagekkel adhatjuk meg. Például h1 az oldal címe, h2 egy alcím, h3 egy mélyebb szintű alcím és így tovább. A HTML oldalak esetén 6 címsort használhatunk.

Címsorok

Kód	Eredmény
<h1> 1-es címsor </h1>	1-es címsor
<h2> 2-es címsor </h2>	2-es címsor
<h3> 3-as címsor </h3>	3-as címsor
<h4> 4-es címsor </h4>	4-es címsor
<h5> 5-ös címsor </h5>	5-ös címsor
<h6> 6-os címsor </h6>	6-os címsor

A címsorokat a bekezdéseknél bemutatott módszerrel igazíthatjuk balra, középre, jobbra, illetve sorkizárttá is tehetjük.

Interaktív példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Példa</title> </head> <body> <h1 align="center"> Ez egy olyan címsor, amelyet HTML paraméter használatával igazítunk. </h1> <h1 style="text-align:center"> Ez egy olyan címsor, amelyet stíluslap segítségével igazítunk. </h1> </body> </html>

Vissza

Szövegformázás

Nézzük, hogy a szöveg formázására milyen lehetőségeink vannak. Itt találunk fizikai és logikai formázást lehetővé tévő tageket is. Nem ismertetünk minden taget, csak a gyakrabban használtakat.

Vissza

Fizikai formázás

Az itt található tagek a szövegek fizikai formázását teszik lehetővé.

Szövegformázás (fizikai)

Tag	Leírás	példa	Megj.
b	félkövér szöveg	félkövér szöveg
big	nagyobb szöveg	nagyobb szöveg
i	dőlt szöveg	dőlt szöveg
pre	előre formázott szöveg	előre formázott szöveg
small	kisebb szöveg	kisebb szöveg
strike	áthúzott szöveg	áthúzott szöveg
alternatíva:		text-decoration: line-through;
sub	alsó index	alsó index a szövegben
sup	felső index	felső index a szövegben
u	aláhúzott szöveg	aláhúzott szöveg
alternatíva:		text-decoration: underline;

Vissza

Logikai formázás

A logikai formázás esetén a szöveget tartalmi szempontok szerint csoportosítjuk. Vagyis itt nem kifejezetten a szöveg kinézetét állítjuk be, az ilyen jellegű formázás eredménye böngészőfüggő.

Szövegformázás (logikai)

Tag	Leírás	példa	Megj.
cite	idézet	idézet
code	programkód	programkód
em	kiemelt szöveg	kiemelt szöveg
strong	erősen kiemelt szöveg	erősen kiemelt szöveg

Interaktív példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Példa</title> </head> <body> <p> A víz (H₂ O) a hidrogén és az oxigén <i> vegyülete</i> .</p> </body> </html>

Vissza

Szöveg betűtípusának, méretének, színének megadása <font>

Láttuk, hogy alap formázásokat el tudunk végezni különböző tagekkel. De mi van, ha mi szeretnénk meghatározni, hogy a megjelenő szöveg betűtípusa milyen legyen? Erre használhatnánk a <font> taget, de ezt már nem javasolják a szabvány készítői, inkább a stíluslapokkal történő megadás a követendő.

Betűméret megadása

Paraméter	Érték	Leírás	Megj.
size	abszolút: 1..7 relatív: +szám -szám	a betű méretének megadása. Ez történhet abszolút módon, amikor egy konkrét betűméretet állítunk be, 1-től 7-ig 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. Megjegyzés: Az alap betűméret beállítására a <basefont> tag szolgál. Ennek a tagnek nincs záró párja. Példa <basefont size="2">
CSS alternatíva font-size	abszolút: xx-small x-small small medium large x-large xx-large érték [pt,pc, in,cm,mm] relatív: larger smaller érték [em,ex, px] érték %	Az abszolút megadásánál választhatunk a 7 fokozat közül (nagyság szerinti sorrendben: xx-small, x-small, small, medium, large, x-large, xx-large ), vagy különböző mértékegységek szerint adhatjuk meg a méretet. A használható mértékegységek: pt: pont (1/72 inch) pc: pica (12 pont) in: inch (hüvelyk) cm: centiméter mm: milliméter A relatív megadásnál használhathatjuk a larger (nagyobb) és smaller (kisebb) betűtípust is, valamint a következő relatív mértékegységeket: em: valahányszoros magasság ex: x-magasság (az x-betű magasságának valahányszorosa) px: pixel (képpont) Ezen felül pedig %-os formában is megadhatjuk a méretet. A relatív méretmegadásnál az elem (az őt tartalmazó elemétől) örökölt értékéhez képest kerül megállapításra a méret. Ha az lap teljes egészére vonatkozóan akarjuk megadni az alapméretet, akkor a body tagnél meg kell adnunk a font-size paramétert. Például: <body style="font-size:12pt">

Példák

Kód	<font> Alapértelmezett méret </font> <br> <font size="2"> 2-es méret </font> <br> <font size="4"> 4-es méret </font> <br> <font size="+2"> 2-el növelt méret </font> <br> <font size="-1"> 1-el csökkentett méret </font> <br> <font size="-2"> 2-vel csökkentett méret /font>
Eredmény	Alapértelmezett méret 2-es méret 4-es méret 2-el növelt méret 1-el csökkentett méret 2-vel csökkentett méret
Kód	<p style="font-size:xx-small"> Szöveg 1</p> <p style="font-size:x-small"> Szöveg 2</p> <p style="font-size:small"> Szöveg 3</p> <p style="font-size:medium"> Szöveg 4</p> <p style="font-size:large"> Szöveg 5</p> <p style="font-size:x-large"> Szöveg 6</p> <p style="font-size:xx-large"> Szöveg 7</p>
Eredmény	Szöveg 1 Szöveg 2 Szöveg 3 Szöveg 4 Szöveg 5 Szöveg 6 Szöveg 7
Kód	<p style="font-size:12pt"> Példa (12pt)</p> <p style="font-size:2pc"> Példa (1pc)</p> <p style="font-size:2em"> Példa (2em)</p> <p style="font-size:0.75em"> Példa (0.75em)</p> <p style="font-size:3ex"> Példa (3ex)</p> <p style="font-size:14px"> Példa (14px)</p> <p style="font-size:75%"> Példa (75%)</p> <p style="font-size:100%"> Példa (100%)</p> <p style="font-size:150%"> Példa (150%)</p>
Eredmény	Példa (12pt) Példa (1pc) Példa (2em) Példa (0.75em) Példa (3ex) Példa (14px) Példa (75%) Példa (100%) Példa (150%)

Interaktív példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Példa</title> </head> <body> <p style="font-size:12pt"> Példa (12pt)</p> <p style="font-size:2pc"> Példa (2pc)</p> <p style="font-size:3em"> Példa (3em)</p> <p style="font-size:150%"> Példa (150%)</p> <p> <font size="2"> 2-es méret </font> <font size="4"> 4-es méret </font> <font size="+2"> 2-el növelt méret </font> </p> </body> </html>

Figyelem!

Ne használj különleges, egyedi betűtípusokat, mert azon betűtípusok, amelyek nincsenek az adott gépre felinstallálva, nem fognak megjelenni. Ezeket a szöveget a böngésző egy másik (alap) betűtípussal jeleníti meg.

Betűtípus megadása

Paraméter	Érték	Leírás	Megj.
face	betűtípus | betűcsalád betűtípus1 (betűcsalád1), betűtípus2 (betűcsalád2), ...	A szöveg betűtípusát állíthatjuk be. Ha a megadott betűtípus telepítve van a számítógépen (kliensen), akkor a böngésző aszerint jeleníti meg a szöveget, különben pedig egy alapértelmezett betűtípust használ. Vesszővel elválasztva több betűtípust is felsorolhatunk. Ha egyik betűtípus sincs telepítve a gépen, akkor a böngészőben beállított alapértelmezett betűtípus szerint történik a megjelenítés. A beállítható általános betűcsaládok, amelybe tartozó betűtípust fog választani a böngésző. serif (pl: Times) sans-serif (pl: Helvetica) cursive (pl: Zapf-Chancery) fantasy (pl: Western) monospace (pl: Courier)
CSS alternatíva font-family	betűtípus |  betűcsalád betűtípus1 (betűcsalád1), betűtípus2 (betűcsalád2), ...	Itt is betűtípust és betűcsaládot adhatunk meg. Ha a betűtípus neve üres helyet tartalmaz, akkor idézőjelek közé kell tenni. pl. font-family: "Times New Roman"

Példák

Kód	<font face="Times New Roman, Times, serif"> Serif (talpas) betűtípus használata </font>
Eredmény	Serif (talpas) betűtípus használata
Kód	<p style="font-family: Arial, Helvetica, sans-serif"> Sans-serif (talpnélküli) betűtípus használata</p>
Eredmény	Sans-serif (talpnélküli) betűtípus használata

Interaktív példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Példa</title> </head> <body> <p style="font-family: Arial, Helvetica, sans-serif"> Betűtípus beállítása stíluslappal</p> <p> <font face="Times New Roman, Times, serif"> Betűtípus beállítása HTML paraméterrel </font> </p> </body> </html>

Szín megadása

Paraméter	Érték	Leírás	Megj.
color	szín színkód [#RRGGBB]	A betűk színét is többféleképpen be lehet á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. Például #898134. A #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 (hexadecimális) számrendszerben. A leggyengébb fokozat a 00, a legerősebb az FF. A harmadik és negyedik karakter a zöld szín (G=green) erőssége, az ötödik és hatodik pedig a kéké (B=blue). A #898134 kód eredménye pedig ez a szín lesz.
CSS alternatíva color	szín színkód [#RRGGBB, rgb(0-255,0-255,0-255), rgb(%,%,%)]	Itt is használhatóak a fenti színnevek és színkódok. Ezen kívül lehetőségünk van arra, hogy tízes számrendszerben adjuk meg a színkódot, az rgb(szám,szám,szám) formában, ahol a számok 1 és 255 közöttiek lehetnek. Például az rgb(137,129,52) színkód eredménye ugyanaz a szín, amit az imént 16-os számrendszerben adtunk meg. Ezen kívül a színkódot megadhatjuk százalékos formában is, például az rgb(50%,50%,50%) szín eredménye egy szürke árnyalat lesz. Amíg a HTML kód esetén a szöveg színét a font tag paramétereként állíthattuk be, a stíluslapoknál számos tag esetén beállíthatjuk a színt, akár egy teljes bekezdésre vonatkozóan is (<p> ) . Ha csak néhány karakter tulajdonságát akarjuk megváltoztatni, akkor használhatjuk a <span> taget, lásd a példákat. Ha pedig egy szakasz tulajdonságait akarjuk beállítani, amelyben több bekezdés, táblázat, kép, stb. is lehet, használhatjuk a div taget. Ekkor a kívánt tartalmat <div> és </div> elemek közé kell zárni, majd meg kell adni a szakaszra vonatkozó stílusdefiníciót.

Tipp!

A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az Color Schemer segítségével on-line módon is megtudhatod a színek kódját.

Példák

Kód	<font color="red"> Piros szöveg</font> <br> <font color="#FF0000"> Ez is piros szöveg</font> <br> <font color="#0000FF"> Ez már kék</font> <br> <font color="#FF00FF"> Ez pedig lila</font> <br> <font color="#800080"> Ez pedig sötétlila</font>
Eredmény	Piros szöveg Ez is piros szöveg Ez már kék Ez pedig lila Ez pedig sötétlila
Kód	<p style="color:red"> A teljes bekezdés piros</p> <p style="color:#0000FF"> A teljes bekezdés kék</p> <p style="color:rgb(40%,40%,40%)"> A teljes bekezdés szürke</p> <p style="color:rgb(40%,40%,40%)"> A kedvenc színeim: <span style="color:#FF0000"> vörös</span> és <span style="color:#008000"> zöld</span> .
Eredmény	A teljes bekezdés piros A teljes bekezdés kék A teljes bekezdés szürke A kedvenc színeim: vörös és zöld.

Interaktív példa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Színek</title> </head> <body> <p> <font color="#0000FF"> Itt HTML paraméterrel állítjuk be a színt.</font> </p> <p style="color:#0000FF"> Itt pedig stílussal.</p> </body> </html>

Vissza

A paraméterek kombinálása

Most, hogy már több paraméterrel is megismerkedtünk, nézzünk példát arra is, hogy a fenti tulajdonságokat hogyan állíthatjuk be egyszerre egy adott szövegre vonatkozóan. Korábban már szóltunk arról, hogy a HTML paraméterek esetén üres hellyel kell elválasztani egymástól a paramétereket, stíluslapok esetén pedig pontosvesszőt kell tennünk az egyes paraméterek közé, most nézzük meg ezt a gyakorlatban is.

Példák

Kód	<p> <font size="3" color="#FF0000" face="Arial, Verdana, sans-serif"> HTML paraméterekkel formázott szöveg</font> </p>
Eredmény	HTML paraméterekkel formázott szöveg
Kód	<p style="font-size:large; font-family: Arial, Helvetica, sans-serif; color: rgb(50,20,80);"> Stílussal formázott bekezdés </p>
Eredmény	Stílussal formázott bekezdés

Vissza

Így is html :-)

Ezt írjuk a html lapra.	Ezt látjuk a böngészővel.
<HTML> <HEAD> <TITLE>HTML alapok</TITLE> </HEAD> <BODY> Ez itt a lényeg, ez kerül a lapra. A html lapon a helyköz (egy vagy több) és a sorvége jel(ek) egyenértékűek, mindegyik egy helyközt ér. Ha nem intézkedünk arról, hol legyen újsor kezdés, akkor a böngésző (idegen szóval "browser") annyi szöveget tesz egy sorba, amennyit bír, és szóhatáron kezd új sort. Azt ami két kacsacsőr ("kisebbjel" és "nagyobbjel") között van, "vezérlésre" használja a böngésző, a többi szöveget megjeleníti. A vezérlés valami parancsot jelent a browsernek, ami pl. mondhatja azt, hogyan jelenítse meg a szöveget, vagy hogy mit jelenítsen még meg. (pl. képet). Tekintse meg az itt következő, csak a bal oldalon látható kommentár sorokat. <!-- Ilyen "zárójelek" közé tegyük --> <!-- a HTML kommentár sorokat. --> </BODY> </HTML>	Ez itt a lényeg, ez kerül a lapra. A html lapon a helyköz (egy vagy több) és a sorvége jel(ek) egyenértékűek, mindegyik egy helyközt ér. Ha nem intézkedünk arról, hol legyen újsor kezdés, akkor a böngésző (idegen szóval "browser") annyi szöveget tesz egy sorba, amennyit bír, és szóhatáron kezd új sort. Azt ami két kacsacsőr ("kisebbjel" és "nagyobbjel") között van, "vezérlésre" használja a böngésző, a többi szöveget megjeleníti. A vezérlés valami parancsot jelent a browsernek, ami pl. mondhatja azt, hogyan jelenítse meg a szöveget, vagy hogy mit jelenítsen még meg. (pl. képet). Tekintse meg az itt következő, csak a bal oldalon látható kommentár sorokat. Megjegyzések: A csak a bal oldalon látható, nagyobbrészt vezérlőjeleket tartalmazó keretsorok (első 5 és utolsó sor) minden html lapon kellenek. A "TITLE" utáni szöveg a böngésző fejlécsorába kerül. Lehetőleg ne legyen benne ékezetes betű! Ezek a megjegyzések viszont csak itt a jobb oldalon látszanak. A továbbiakban már mindig "egyezni" fog a bal- és jobboldal.
Így lehet megmondani, <BR>hogy hol akarunk feltétlen<BR>új sort kezdeni. <P>Így pedig új bekezdést. További tagolási lehetőségekről később lesz majd szó.<P>Az persze nem árt, ha az itteninél jobban hasonlít a html forrásszöveg tagolása a megjelenítendő tagolásra.	Így lehet megmondani, hogy hol akarunk feltétlen új sort kezdeni. Így pedig új bekezdést. További tagolási lehetőségekről később lesz majd szó. Az persze nem árt, ha az itteninél jobban hasonlít a html forrásszöveg tagolása a megjelenítendő tagolásra.
Így lehet <B>kétféle</B>, nem mindig azonos <STRONG>kövér</STRONG>, <I>kétféle</I> <EM>dőlt</EM>, <U>aláhúzott</U>, <BLINK>villogó</BLINK> ill. <KBD>FIX jelszélességű</KBD> szövegrészt írni. <P><B><U>Kombinálhatjuk is.</B></U> <P>Így pedig <SUP>felső</SUP>, ill. <SUB>alsó</SUB> indexet írhatunk. <P>Lehetőség van a <TT>TT=teletype</TT>, <BIG>BIG</BIG>, <SMALL>SMALL</SMALL> és <STRIKE>STRIKE</STRIKE> jeltipusok használatára. (Nem minden böngésző érti mindegyiket. Ha nem érti, figyelmen kívül hagyja.) <P>Láthatjuk, hogy egy parancs hatása olyan másikkal zárható le, ami a "parancs"-szó ismétléséből és egy az elé tett "/" jelből áll.	Így lehet kétféle, nem mindig azonos kövér, kétféle dőlt, aláhúzott, villogó ill. FIX jelszélességű szövegrészt írni. Kombinálhatjuk is. Így pedig felső, ill. alsó indexet írhatunk. Lehetőség van a TT=teletype, BIG, SMALL és STRIKE jeltipusok használatára. (Nem minden böngésző érti mindegyiket. Ha nem érti, figyelmen kívül hagyja.) Láthatjuk, hogy egy parancs hatása olyan másikkal zárható le, ami a "parancs"-szó ismétléséből és egy az elé tett "/" jelből áll.
A "FONT" paranccsal betűméretet vagy betűszínt állíthatunk be. A méret 1-től kezdve növekszik, a szín vagy angol elnevezés (140 lehetőségből), vagy RGB kód #RRGGBB formában. Az RGB (Red=piros, Green=zöld, Blue=kék) kód hexadecimálisan (16-os számrendszerben) írandó, és így a piros-zöld-kék arányt több, mint 16 millió módon adhatjuk meg (#000000 és #FFFFFF között). Más kérdés, hogy a szemünk (és a képernyőnk) hány színt tud megkülönböztetni. (Bölcsészeknek: A színkód egy # jelet követő olyan 6 jel, amiben számjegyek és az ABCDEF betűk állhatnak.) <CENTER> <P><B>Néhány példa:</B> <P> <FONT SIZE=1>1-es méret</FONT> <BR><FONT SIZE=2>2-es méret</FONT> <BR><FONT SIZE=3>3-as méret</FONT> <BR><FONT SIZE=4>4-es méret</FONT> <BR><FONT SIZE=5>5-ös méret</FONT> <BR><FONT SIZE=6>6-os méret</FONT> <BR><B><FONT COLOR=red>red</FONT> <FONT COLOR=#FF0000>= #FF0000</FONT> <BR><FONT COLOR=green>green</FONT> <FONT COLOR=#008000>= #008000</FONT> <BR><FONT COLOR=lime>lime</FONT> <FONT COLOR=#00FF00>= #00FF00</FONT> <BR><FONT COLOR=blue>blue</FONT> <FONT COLOR=#0000FF>= #0000FF</FONT> <BR><FONT COLOR=#ABCDEF SIZE=5>#ABCDEF (nincs neve)</FONT></B> <BR><FONT COLOR=#123456 SIZE=5>#123456 (meg ennek sincs)</FONT></B> <P>A példa a "CENTER" hatását is mutatja. </CENTER>	A "FONT" paranccsal betűméretet vagy betűszínt állíthatunk be. A méret 1-től kezdve növekszik, a szín vagy angol elnevezés (140 lehetőségből), vagy RGB kód #RRGGBB formában. Az RGB (Red=piros, Green=zöld, Blue=kék) kód hexadecimálisan (16-os számrendszerben) írandó, és így a piros-zöld-kék arányt több, mint 16 millió módon adhatjuk meg (#000000 és #FFFFFF között). Más kérdés, hogy a szemünk (és a képernyőnk) hány színt tud megkülönböztetni. (Bölcsészeknek: A színkód egy # jelet követő olyan 6 jel, amiben számjegyek és az ABCDEF betűk állhatnak.) Néhány példa: 1-es méret 2-es méret 3-as méret 4-es méret 5-ös méret 6-os méret red = #FF0000 green = #008000 lime = #00FF00 blue = #0000FF #ABCDEF (nincs neve) #123456 (meg ennek sincs) A példa a "CENTER" hatását is mutatja.
A FONT parancs SIZE lehetőségével beállítható betűméret géptől és böngészőbeállítástól függ. Ez igaz az alábbi <B>címsorokra</B> is: <H1>Ez H1-es címsor</H1> <H2>Ez H2-es címsor</H2> <H3>Ez H3-as címsor</H3> <H4>Ez H4-es címsor</H4> <H5>Ez H5-ös címsor</H5> <H6>Ez H6-os címsor</H6>	A FONT parancs SIZE lehetőségével beállítható betűméret géptől és böngészőbeállítástól függ. Ez igaz az alábbi címsorokra is: Ez H1-es címsor Ez H2-es címsor Ez H3-as címsor Ez H4-es címsor Ez H5-ös címsor Ez H6-os címsor
Itt az eredeti sorkezdet. <DL><DD>Így lehet beljebb kezdeni a sort, amihez az alatta levő sorok is igazodnak. </DL> <DL><DD>Ezt a beljebb kezdést akár <DL><DD>több szinten is lehet <DL><DD>folytatni. </DL>majd akár újra </DL>egyre inkább balra kezdeni. </DL> <P>Egy másik lehetőség a beljebb kezdésre: <BLOCKQUOTE> <P>Akinek jobban tetszik az, ha egyetlen paranccsal tudja beljebb kezdeni a szöveget, az választhatja az itt is használt "BLOCKQUOTE" lehetőséget. </BLOCKQUOTE>	Itt az eredeti sorkezdet. Így lehet beljebb kezdeni a sort, amihez az alatta levő sorok is igazodnak. Ezt a beljebb kezdést akár több szinten is lehet folytatni. majd akár újra egyre inkább balra kezdeni. Egy másik lehetőség a beljebb kezdésre: Akinek jobban tetszik az, ha egyetlen paranccsal tudja beljebb kezdeni a szöveget, az választhatja az itt is használt "BLOCKQUOTE" lehetőséget.
<PRE> A <B>PRE</B> kulcsszó után álló szöveg úgy lesz tagolva, ahogy az editáláskor. Fix szélességűek a jelek ehhez. xxxxxxxxxxxxxxxxxxx x x x x x x x x xxxxxxxxxxxxxxxxxxx A PRE belseje is lehet pl. <B>bold</B>, vagy <FONT COLOR=red>piros</FONT>, vagy <FONT SIZE=6>nagy</FONT>, vagy akár<FONT COLOR=red SIZE=6><B> nagy piros bold</FONT></B> is, de itt számítanak a beírt helyközök és sorkezdések is. </PRE>	A PRE kulcsszó után álló szöveg úgy lesz tagolva, ahogy az editáláskor. Fix szélességűek a jelek ehhez. xxxxxxxxxxxxxxxxxxx x x x x x x x x xxxxxxxxxxxxxxxxxxx A PRE belseje is lehet pl. bold, vagy piros, vagy nagy, vagy akár nagy piros bold is, de itt számítanak a beírt helyközök és sorkezdések is.
Ha egy "&lt;" jelet akarunk a szövegben megjeleníteni, akkor gond lehet, hogy ezt a böngésző vezérlőjelnek, nem pedig megmutatatandó jelnek tekinti. Ilyen esetekre találták ki azt a szabályt, hogy egy "&amp;" jel és azt követő pontosvessző közé írt bizonyos jelsorozatok egyetlen megjelenítendő jelet képviselnek. <PRE> <B>Jel Hogy írjuk? Jel neve</B> &lt; &amp;lt; kisebb &gt; &amp;gt; nagyobb &amp; &amp;amp; "at"-jel &amp;nbsp; helyköz &aacute; &amp;aacute; a' &Aacute; &amp;Aacute; A' &iacute; &amp;iacute; i' &uacute; &amp;uacute; u' &otilde; &amp;otilde; o" &ocirc; &amp;ocirc; o^ &ucirc; &amp;ucirc; u^ &Ouml; &amp;Ouml; O<SUP>..</SUP> &#223; &amp;#223; scharfes s &#251; &amp;#251; u" &#134; &amp;#134; kereszt &#137; &amp;#137; ezrelék &#167; &amp;#167; paragrafus &#169; &amp;#169; copyright &#176; &amp;#176; fok &#187; &amp;#187; kettős nagyobb &#171; &amp;#171; kettős kisebb &#177; &amp;#177; +-</PRE> (Nem biztos, hogy minden böngésző minden platformon jól mutatja őket!) <P>Látható, hogy maga a &amp; jel is megjeleníthető így. <P>A &amp;nbsp; helyközök mindegyike meg lesz jelenítve,<BR> &nbsp; &nbsp; &nbsp; ahogy az itt a sor elején látszik. <BR><KBD> &nbsp; &nbsp; &nbsp;</KBD> Fix szélességű (KBD) betűtipussal nagyobb ez a helyköz is. Ez ráadásul olyan helyköz, amit nem tekint (szó)elválasztónak a böngésző. <P>A &amp;#223; írásmódban a "#" jel mögött egy tetszőleges UNICODE jel kódja állhat. Decimálisan, mint itt, vagy egy "x" jellel megelőzve hexadecimálisan. <P>Az ékezetes betűk közül nem mindet soroltuk fel, de azok a fentiek alapján már leírhatók. (Vigyázat: nincs &amp;utilde; !) <P>Az ilyen ékezetekkel írt magyar szöveget minden böngésző jól mutatja, de a html szöveg önmagában eléggé olvashatatlanná válik. <P>Ha MS-Windows ékezeteket használunk, az a legtöbb magyarországi gépen jól jelenik meg. Azt is tehetjük, hogy az így szerkesztett szövegből programmal előállítjuk a fenti szabályok szerinti html ékezetes szöveget. A legvakmerőbbek pedig html ékezetes betűket írnak, pláne ha az editoruk ezt egy-egy billentyű leütésével lehetővé teszi.	Ha egy "<" jelet akarunk a szövegben megjeleníteni, akkor gond lehet, hogy ezt a böngésző vezérlőjelnek, nem pedig megmutatatandó jelnek tekinti. Ilyen esetekre találták ki azt a szabályt, hogy egy "&" jel és azt követő pontosvessző közé írt bizonyos jelsorozatok egyetlen megjelenítendő jelet képviselnek. Jel Hogy írjuk? Jel neve < &lt; kisebb > &gt; nagyobb & &amp; "at"-jel &nbsp; helyköz á &aacute; a' Á &Aacute; A' í &iacute; i' ú &uacute; u' õ &otilde; o" ô &ocirc; o^ û &ucirc; u^ Ö &Ouml; O.. ß &#223; scharfes s û &#251; u" † &#134; kereszt ‰ &#137; ezrelék § &#167; paragrafus © &#169; copyright ° &#176; fok » &#187; kettős nagyobb « &#171; kettős kisebb ± &#177; +- (Nem biztos, hogy minden böngésző minden platformon jól mutatja őket!) Látható, hogy maga a & jel is megjeleníthető így. A &nbsp; helyközök mindegyike meg lesz jelenítve,       ahogy az itt a sor elején látszik.       Fix szélességű (KBD) betűtipussal nagyobb ez a helyköz is. Ez ráadásul olyan helyköz, amit nem tekint (szó)elválasztónak a böngésző. A &#223; írásmódban a "#" jel mögött egy tetszőleges UNICODE jel kódja állhat. Decimálisan, mint itt, vagy egy "x" jellel megelőzve hexadecimálisan. Az ékezetes betűk közül nem mindet soroltuk fel, de azok a fentiek alapján már leírhatók. (Vigyázat: nincs &utilde; !) Az ilyen ékezetekkel írt magyar szöveget minden böngésző jól mutatja, de a html szöveg önmagában eléggé olvashatatlanná válik. Ha MS-Windows ékezeteket használunk, az a legtöbb magyarországi gépen jól jelenik meg. Azt is tehetjük, hogy az így szerkesztett szövegből programmal előállítjuk a fenti szabályok szerinti html ékezetes szöveget. A legvakmerőbbek pedig html ékezetes betűket írnak, pláne ha az editoruk ezt egy-egy billentyű leütésével lehetővé teszi.
Az "A" parancs egy másik html lapra irányítja a vezérlést. ("Link"-nek is hívják.) <P>Például arra a lapra, ahol megtaláljuk az összes elnevezett szín nevét, a következő hivatkozással juthatunk:<BR> <A HREF=szinek.htm>Ide kattintson</A>, ha a színeket akarja látni. <P>Ezen a módon az éppen mutatott html lappal azonos directoryban levő másik ("szinek.htm" nevű) fájlra hivatkozunk. <P>Ha az éppen mutatott html lappal azonos directoryban levő, "lapok" nevű aldirectoryban lenne a "szinek.htm" nevű fájl, akkor <B>HREF=lapok/szinek.htm</B> lenne a hivatkozás. <P>Ha az éppen mutatott html lapot tartalmazó directoryt tartalmazó directoryban lenne a "szinek.htm", akkor <B>HREF=../szinek.htm</B> lenne a hivatkozás. <P>Ha viszont egy másik gépen van a hivatkozott lap, akkor a hivatkozás kezdete <B>HREF=http://</B>, ezt a gép neve követi, aztán a lap neve (az elválasztójel mindig - PC esetén is - "/" jel). Pl. Így jutunk az ELTE <A HREF= http://caesar.elte.hu/progmat> progmat</A> lapjára.	Az "A" parancs egy másik html lapra irányítja a vezérlést. ("Link"-nek is hívják.) Például arra a lapra, ahol megtaláljuk az összes elnevezett szín nevét, a következő hivatkozással juthatunk: Ide kattintson, ha a színeket akarja látni. Ezen a módon az éppen mutatott html lappal azonos directoryban levő másik ("szinek.htm" nevű) fájlra hivatkozunk. Ha az éppen mutatott html lappal azonos directoryban levő, "lapok" nevű aldirectoryban lenne a "szinek.htm" nevű fájl, akkor HREF=lapok/szinek.htm lenne a hivatkozás. Ha az éppen mutatott html lapot tartalmazó directoryt tartalmazó directoryban lenne a "szinek.htm", akkor HREF=../szinek.htm lenne a hivatkozás. Ha viszont egy másik gépen van a hivatkozott lap, akkor a hivatkozás kezdete HREF=http://, ezt a gép neve követi, aztán a lap neve (az elválasztójel mindig - PC esetén is - "/" jel). Pl. Így jutunk az ELTE progmat lapjára.
Az "A HREF=" mögött nem csak "htm" vagy "html" végződésű html lapra hivatkozhatunk, hanem képfájlra is. <P>(Leginkább a .jpg és .gif végződésű képfájl formátumokat ismerik a böngészőprogramok.) <P>Pl. <A HREF=deli.jpg>Ide kattintson</A>, ha az ELTE-TTK Déli épületét látni akarja.	Az "A HREF=" mögött nem csak "htm" vagy "html" végződésű html lapra hivatkozhatunk, hanem képfájlra is. (Leginkább a .jpg és .gif végződésű képfájl formátumokat ismerik a böngészőprogramok.) Pl. Ide kattintson, ha az ELTE-TTK Déli épületét látni akarja.
<FONT COLOR=yellow> <IMG SRC="kdelihid.jpg" ALIGN=left HSPACE=10 VSPACE=10 BORDER=1> </FONT> Gyakoribb az, hogy nem külön lapként, hanem az aktuális lapra akarunk képeket behozni. Az "IMG" kulcsszóval tehetjük ezt. Bekeretezhetjük a képet, és a szöveg mögé (ALIGN=right) vagy elé (ALIGN=left) tehetjük, úgy, hogy a szöveg a képet "körülfollya". (ALIGN=top és ALIGN=middle is lehetséges, de nem minden böngésző tudja.) <FONT COLOR=blue> <IMG SRC="kdelihid.jpg" ALIGN=right HSPACE=10 VSPACE=10 BORDER=2 WIDTH=120 HEIGHT=80> </FONT> A "BORDER" mögött a keret méretét, a HSPACE ill. VSPACE mögött a kép mellett ill. az alatta-fölötte levő üres rész méretét (képernyő pontokban) adhatjuk meg. A keret színe az aktuális betűszín, amit minden képre külön beállíthatunk. Ha nem az eredeti méretében akarjuk a képet mutatni, akkor a "HEIGHT=" ill. "WIDTH=" paraméter is szóba jöhet. (Ezt is képpontokban mérve.) Ilyenkor torzulhat a kép, ha rossz arányban méretezzük át.	Gyakoribb az, hogy nem külön lapként, hanem az aktuális lapra akarunk képeket behozni. Az "IMG" kulcsszóval tehetjük ezt. Bekeretezhetjük a képet, és a szöveg mögé (ALIGN=right) vagy elé (ALIGN=left) tehetjük, úgy, hogy a szöveg a képet "körülfollya". (ALIGN=top és ALIGN=middle is lehetséges, de nem minden böngésző tudja.) A "BORDER" mögött a keret méretét, a HSPACE ill. VSPACE mögött a kép mellett ill. az alatta-fölötte levő üres rész méretét (képernyő pontokban) adhatjuk meg. A keret színe az aktuális betűszín, amit minden képre külön beállíthatunk. Ha nem az eredeti méretében akarjuk a képet mutatni, akkor a "HEIGHT=" ill. "WIDTH=" paraméter is szóba jöhet. (Ezt is képpontokban mérve.) Ilyenkor torzulhat a kép, ha rossz arányban méretezzük át.
<A HREF=deli.jpg> <IMG SRC="kdeli.jpg" ALIGN=left ALT="ELTE, Déli épület"> </A> Gyakran a HREF-ben nem szövegre, hanem képre kell kattintani ahhoz, hogy a HREF által mutatott másik lapra jussunk. <P>Ilyenkor célszerű az "ALT=szöveg" paraméter használata. Ez lehetővé teszi, hogy aki pl. nem grafikus böngészővel (pl. lynx-el) nézi a lapot, az is tovább tudjon menni a másik lapra. Neki ilyenkor az <B>ALT=</B> mögötti szöveg jelenik meg. (Tegyük idézőjelbe a szöveget, ha tartalmaz helyközt is.)	Gyakran a HREF-ben nem szövegre, hanem képre kell kattintani ahhoz, hogy a HREF által mutatott másik lapra jussunk. Ilyenkor célszerű az "ALT=szöveg" paraméter használata. Ez lehetővé teszi, hogy aki pl. nem grafikus böngészővel (pl. lynx-el) nézi a lapot, az is tovább tudjon menni a másik lapra. Neki ilyenkor az ALT= mögötti szöveg jelenik meg. (Tegyük idézőjelbe a szöveget, ha tartalmaz helyközt is.)
<IMG SRC=elte12.jpg USEMAP=#eltemap BORDER=2 ALIGN=right HSPACE=10> <MAP NAME=eltemap> <AREA SHAPE="rect" COORDS="27,141,40,179" HREF=eltei.jpg ALT="Informatikai épület"> <AREA SHAPE="circle" COORDS="87,58,5" HREF=eltef.jpg ALT="Központi épület"> <AREA SHAPE="default" HREF=xy.htm ALT="Javascriptes koordináták"> </MAP> Azt is megtehetjük, hogy egy képfájl egyes részeit más-más linkre tesszük érzékennyé egy "USEMAP" segítségével. <P>Az USEMAP-nak nem muszáj közvetlenül a képdefiníció után állnia. <P>Az AREA-ban megadott képrészlet lehet "rect=téglalap" (a bal felső és a jobb alsó sarok koordinátáit kell megadni), "circle=kör" (a középpont koordinátáit és a sugár hosszát kell megadni) vagy "poly=sokszög" (a csúcspontok koordinátáit kell megadni). <P>Itt a régi Inf. épület két oszlopa közötti téglalapra kattintva ezt az épületet láthatjuk "nagyban", a központi épületet pedig a tetején levő világos, kör alakú részén keresztül érhetjük el. <P>A "SHAPE=default"-ban adjuk meg a kép további részeire vonatkozó linket. Ez most egy olyan, Javascriptet tartalmazó lap, ami mutatja, hogyan olvashatunk le egy képről koordinátákat. <P>Ha az "AREA SHAPE=default"-ban az itteni további paraméterek helyett csak <B>NOHREF</B> állna, akkor a kép nagy része nem reagálna az egér lenyomására. <P>Ha az egeret mozgatjuk ezen a képen, akkor alul a státusz sorban láthatjuk is az ALT-ba írt szövegeket. Csak ezek a szövegek lesznek nem grafikus böngésző esetén megjelenítve (a kép helyett). <P>A "BORDER=2" helyett "BORDER=0"-t kellene írni ahhoz, hogy ne legyen kerete a képnek.	Azt is megtehetjük, hogy egy képfájl egyes részeit más-más linkre tesszük érzékennyé egy "USEMAP" segítségével. Az USEMAP-nak nem muszáj közvetlenül a képdefiníció után állnia. Az AREA-ban megadott képrészlet lehet "rect=téglalap" (a bal felső és a jobb alsó sarok koordinátáit kell megadni), "circle=kör" (a középpont koordinátáit és a sugár hosszát kell megadni) vagy "poly=sokszög" (a csúcspontok koordinátáit kell megadni). Itt a régi Inf. épület két oszlopa közötti téglalapra kattintva ezt az épületet láthatjuk "nagyban", a központi épületet pedig a tetején levő világos, kör alakú részén keresztül érhetjük el. A "SHAPE=default"-ban adjuk meg a kép további részeire vonatkozó linket. Ez most egy olyan, Javascriptet tartalmazó lap, ami mutatja, hogyan olvashatunk le egy képről koordinátákat. Ha az "AREA SHAPE=default"-ban az itteni további paraméterek helyett csak NOHREF állna, akkor a kép nagy része nem reagálna az egér lenyomására. Ha az egeret mozgatjuk ezen a képen, akkor alul a státusz sorban láthatjuk is az ALT-ba írt szövegeket. Csak ezek a szövegek lesznek nem grafikus böngésző esetén megjelenítve (a kép helyett). A "BORDER=2" helyett "BORDER=0"-t kellene írni ahhoz, hogy ne legyen kerete a képnek.
<A NAME=eleje> <A HREF=#vege>Ha ide kattint</A>, akkor ennek a cellának a <FONT COLOR=blue> kékkel írt</FONT> sorára pozícinálhat. <P>Ha egy html lapról egy másik lapnak a belsejébe akarunk pozícionálni, akkor a "HREF"-be a fájlnév után közvetlenül egy "#pozíciónév" toldalékot írjunk. Ahová pozícionálni akarunk, oda tegyünk egy "&lt;A NAME=pozíciónév&gt;" alakú pozíciómegjelölést. <P>Amint az itteni példa is mutatja, a dolog működik egy html lapon belül is. <P>Ezzel a módszerrel pl. egy nagyobb lap elejére odatehetjük a lap olyan tartalomjegyzékét, amiből a lap egyes részei közvetlenül elérhetők. <P><A NAME=vege> <FONT COLOR=blue> <H3>Ez itt a kékkel írt sor.</H3></FONT> <P>Innen a <B>Back</B> nyomógommbal, vagy <A HREF=#eleje>ide kattintva</A> vissza is juthat a cella elejére. (A "Back" gombbal csak akkor, ha onnan jött.)	Ha ide kattint, akkor ennek a cellának a kékkel írt sorára pozícinálhat. Ha egy html lapról egy másik lapnak a belsejébe akarunk pozícionálni, akkor a "HREF"-be a fájlnév után közvetlenül egy "#pozíciónév" toldalékot írjunk. Ahová pozícionálni akarunk, oda tegyünk egy "<A NAME=pozíciónév>" alakú pozíciómegjelölést. Amint az itteni példa is mutatja, a dolog működik egy html lapon belül is. Ezzel a módszerrel pl. egy nagyobb lap elejére odatehetjük a lap olyan tartalomjegyzékét, amiből a lap egyes részei közvetlenül elérhetők. Ez itt a kékkel írt sor. Innen a Back nyomógommbal, vagy ide kattintva vissza is juthat a cella elejére. (A "Back" gombbal csak akkor, ha onnan jött.)
Ha az email címünket fel akarjuk tenni a html lapra, akkor is az "A HREF="-t kell használni: <A HREF=mailto:csa@inf.elte.hu> <P>Ide kattints</A>, ha levelet akarsz nekem írni.	Ha az email címünket fel akarjuk tenni a html lapra, akkor is az "A HREF="-t kell használni: Ide kattints, ha levelet akarsz nekem írni.
Így lehet megjeleníteni felsorolást <UL><LI>első <LI>második <LI>harmadik bekezdéssel, amik közül ez a harmadik jóval hosszabb az előző kettőnél, ezért csak több sorban fér el. </UL>	Így lehet megjeleníteni felsorolást első második harmadik bekezdéssel, amik közül ez a harmadik jóval hosszabb az előző kettőnél, ezért csak több sorban fér el.
Itt azt lehet látni, hogy a felsorolás többszintes is lehet, többféle kezdőjellel. <UL TYPE=round> <LI>Európa <P><LI>Ázsia <P><LI>Amerika <ul type=square> <li>Észak-Amerika <UL TYPE=disc> <LI>Kanada <LI>USA </UL> <li>Közép-Amerika <li>Dél-Amerika </ul> <P><LI>Afrika </UL> <P>Természetesen nem attól függ a listaelemek beljebb kezdése, hogy a html szövegben hol kezdjük őket. <P>Azt is láthatjuk, hogy a html vezérlő jelek kis- és nagybetűkkel is írhatók.	Itt azt lehet látni, hogy a felsorolás többszintes is lehet, többféle kezdőjellel. Európa Ázsia Amerika Észak-Amerika Kanada USA Közép-Amerika Dél-Amerika Afrika Természetesen nem attól függ a listaelemek beljebb kezdése, hogy a html szövegben hol kezdjük őket. Azt is láthatjuk, hogy a html vezérlő jelek kis- és nagybetűkkel is írhatók.
Ha "UL" helyett "OL"-t írunk, akkor a felsorolás tagjai a tipustól (type) függően <OL TYPE=i> <LI>számozva (TYPE=1, elhagyható) <LI>római számozva (TYPE=I) <LI>kis római számozva (TYPE=i) <LI>kisbetűzve (TYPE=a) <LI>vagy nagybetűzve (TYPE=A) </OL> lesznek. <P><UL> <LH>(Beljebb kezdett) listafejlécet <LI>is <LI>megadhatunk <LI>"OL" és "UL" lista <LI>esetén is. </UL>	Ha "UL" helyett "OL"-t írunk, akkor a felsorolás tagjai a tipustól (type) függően számozva (TYPE=1, elhagyható) római számozva (TYPE=I) kis római számozva (TYPE=i) kisbetűzve (TYPE=a) vagy nagybetűzve (TYPE=A) lesznek. (Beljebb kezdett) listafejlécet is megadhatunk "OL" és "UL" lista esetén is.
<DL COMPACT> <DT><P><B>egy </B><DD>Itt arra láthatunk példát, hogyan lehet egyéb html elemekből "fogalom magyarázat" jellegű, ún. "definíciós" listát felépíteni, <DT><P><B>kettő </B><DD>és, hogy milyen ennek a megjelenési formája. <DT><P><B>három a magyar igazság</B> <DD>Természetesen nem kötelező a "fogalom" kövérítése és a listaelemek közötti (a "P" hatására keletkezett) üres sorok használata. <DT><P><B>négy </B><DD>A "DL"-be írt "COMPACT" hatására kerül egy sorba a rövid "fogalom" a "magyarázattal", <DT><P><B>öt </B><DD>ahogy itt is. </DL>	egy Itt arra láthatunk példát, hogyan lehet egyéb html elemekből "fogalom magyarázat" jellegű, ún. "definíciós" listát felépíteni, kettő és, hogy milyen ennek a megjelenési formája. három a magyar igazság Természetesen nem kötelező a "fogalom" kövérítése és a listaelemek közötti (a "P" hatására keletkezett) üres sorok használata. négy A "DL"-be írt "COMPACT" hatására kerül egy sorba a rövid "fogalom" a "magyarázattal", öt ahogy itt is.
Néhány egyéb effektus: <P><HR><HR noshade> Itt húztunk egy árnyékolt, és egy nem árnyékolt vonalat. <SPACER TYPE=VERTICAL SIZE=15> Aztán függőlegesen kihagytunk 15 képpontnyi helyet. <HR ALIGN=center SIZE=10 WIDTH=200> Aztán húztunk még egy vonalat, ami 10 képpont vastagságú, 200 képpont hosszúságú, és középre van téve. <BR>(Megadható pl. "WIDTH=50%" is, ami azt jelenti, hogy amikor keskenyedik a böngésző ablaka, akkor vele együtt a vonal hossza is csökken.)	Néhány egyéb effektus: Itt húztunk egy árnyékolt, és egy nem árnyékolt vonalat. Aztán függőlegesen kihagytunk 15 képpontnyi helyet. Aztán húztunk még egy vonalat, ami 10 képpont vastagságú, 200 képpont hosszúságú, és középre van téve. (Megadható pl. "WIDTH=50%" is, ami azt jelenti, hogy amikor keskenyedik a böngésző ablaka, akkor vele együtt a vonal hossza is csökken.)
Most <B>táblázat</B>-ot készítünk. <P>A "TABLE" kulcsszó mellett adjuk meg a táblázat fő jellemzőit. <P>A "CAPTION" kulcsszó vezeti be a - nem kötelező - táblázat feliratot. <P>A táblázat minden sorát a "TR" kulcsszó, azon belül minden oszlopát a "TD" kulcsszó kezdi. <P>Ha a "TD" helyett "TH"-t használunk, akkor kövér betűkkel, középre illesztve jelenik meg a cellában a szöveg. <P> <CENTER> <TABLE BORDER=3 BGCOLOR=silver CELLPADDING=4> <CAPTION>Színes táblázat</CAPTION> <TR><TH>Cella háttérszíne</TH> <TH>Szín neve</TH> <TH>RGB kódja</TH></TR> <TR><TD BGCOLOR=black>&nbsp;</TD> <TD>black</TD><TD>#000000</TD></TR> <TR><TD BGCOLOR=blue>&nbsp;</TD> <TD>blue</TD><TD>#0000FF</TD></TR> <TR><TD BGCOLOR=cyan>&nbsp;</TD> <TD>cyan</TD><TD>#00FFFF</TD></TR> <TR><TD BGCOLOR=green>&nbsp;</TD> <TD>green</TD><TD>#008000</TD></TR> <TR><TD BGCOLOR=magenta>&nbsp;</TD> <TD>magenta</TD><TD>#FF00FF</TD></TR> <TR><TD BGCOLOR=red>&nbsp;</TD> <TD>red</TD><TD>#FF0000</TD></TR> <TR><TD BGCOLOR=white>&nbsp;</TD> <TD>white</TD><TD>#FFFFFF</TD></TR> </TABLE> </CENTER> <P>Látható, hogy a táblázat egészének is lehet háttérszíne (itt "silver") de akár külön az egyes celláinak is. <P>Megadhatjuk a tábla keretének szélességét (BORDER=3), ha ez elmarad, nem lesz kerete a táblázatnak. <P>A "CELLPADDING=4" azt jelenti, hogy a cellákba írt szövegek és a cellafalak között 4 képpont üresen marad. <P>Egy cella csak akkor jelenik meg rendesen, ha van benne valami, legalább egy "látható" helyköz. Ezért van a táblánk színes celláiban &amp;nbsp;. <P>Az oszlopokat ill. sorokat lezáró &lt;/TD&gt; és &lt;/TR&gt; megadása nem kötelező, de meg szokták adni. <P><HR><FONT COLOR=blue><B> <P>Ez az egész lap is egy nagy táblázat, amiben azt a szabályt nehéz betartanom, hogy csak félsorokat írhatok a baloldali oszlopok megjeleníthetősége érdekében. </FONT></B>	Most táblázat-ot készítünk. A "TABLE" kulcsszó mellett adjuk meg a táblázat fő jellemzőit. A "CAPTION" kulcsszó vezeti be a - nem kötelező - táblázat feliratot. A táblázat minden sorát a "TR" kulcsszó, azon belül minden oszlopát a "TD" kulcsszó kezdi. Ha a "TD" helyett "TH"-t használunk, akkor kövér betűkkel, középre illesztve jelenik meg a cellában a szöveg. Színes táblázat Cella háttérszíne Szín neve RGB kódja black #000000 blue #0000FF cyan #00FFFF green #008000 magenta #FF00FF red #FF0000 white #FFFFFF Látható, hogy a táblázat egészének is lehet háttérszíne (itt "silver") de akár külön az egyes celláinak is. Megadhatjuk a tábla keretének szélességét (BORDER=3), ha ez elmarad, nem lesz kerete a táblázatnak. A "CELLPADDING=4" azt jelenti, hogy a cellákba írt szövegek és a cellafalak között 4 képpont üresen marad. Egy cella csak akkor jelenik meg rendesen, ha van benne valami, legalább egy "látható" helyköz. Ezért van a táblánk színes celláiban &nbsp;. Az oszlopokat ill. sorokat lezáró </TD> és </TR> megadása nem kötelező, de meg szokták adni. Ez az egész lap is egy nagy táblázat, amiben azt a szabályt nehéz betartanom, hogy csak félsorokat írhatok a baloldali oszlopok megjeleníthetősége érdekében.
Mintákat láthatunk táblázat méretezésre, és szöveg illesztésére a cellákban. <P><TABLE BGCOLOR=orangered WIDTH=100% BORDER=1> <TR><TD WIDTH=30% ALIGN=center> középre</TD> <TD ALIGN=right WIDTH=20%>Ez<BR> jobbra<BR>lesz<BR>illesztve</TD> <TD>balra</TD></TR> </TABLE> <P>"WIDTH=" mögött megadható a táblázat vagy egy cella szélessége képpontokban. "WIDTH=100%" viszont azt jelenti, hogy a tábla töltse ki a html-lap teljes rendelkezésére álló szélességét. Az egyes oszlopokra adott %-os hossz a teljes táblázatszélességre, mint 100%-ra vonatkozik. Ezzel a módszerrel igen rugalmasan adhatók meg "gumi"-táblázatok. <P>Abszolút magasság is megadható a cellákra(TD), "HEIGHT=" mögötti számmal. <TABLE BGCOLOR=orangered WIDTH=100% BORDER=1 CELLPADDING=5> <TR><TD HEIGHT=60 VALIGN=top ALIGN=center>fent középre</TD></TR> <TR><TD HEIGHT=100 ALIGN=right> <FONT COLOR=cyan><B> Ez középen<BR>jobbra<BR>lesz illesztve</FONT></B></TD></TR> <TR><TD HEIGHT=50 VALIGN=bottom> lent balra</TD></TR> </TABLE> <TABLE WIDTH=100% CELLPADDING=5> <TR><TD ALIGN=right>Ha<BR>elhagyjuk<BR> a<BR>táblázat<BR>keretét<BR>és<BR> színét<BR>is</TD> <TD>akkor<BR>észre<BR>se<BR>nagyon <BR>vesszük,<BR>hogy<BR>táblázatot <BR>látunk</TD> </TR> </TABLE> <CENTER><TABLE WIDTH=98% BORDER=0 CELLPADDING=0 CELLSPACING=0 <TR><TD BGCOLOR=yellow> <TABLE CELLPADDING=16 CELLSPACING=1 WIDTH=100% BORDER=0> <TR><TD BGCOLOR=deepskyblue> Sokan kedvelik azt a keretet, amit nem a BORDER-rel lehet megadni, hanem azzal, amit egy színes (itt sárga) táblázatcellának a nála 1-el kisebb méretű (CELLSPACING=1) táblázat által le nem takart része eredményez. </TD></TR><TR><TD BGCOLOR=deepskyblue> Ennek a keretnek a színe független a betűszíntől, a formája is más, mint a BORDER-el kapott kereté. </TD></TR></TABLE> </TD></TR></TABLE>	Mintákat láthatunk táblázat méretezésre, és szöveg illesztésére a cellákban. középre Ez jobbra lesz illesztve balra "WIDTH=" mögött megadható a táblázat vagy egy cella szélessége képpontokban. "WIDTH=100%" viszont azt jelenti, hogy a tábla töltse ki a html-lap teljes rendelkezésére álló szélességét. Az egyes oszlopokra adott %-os hossz a teljes táblázatszélességre, mint 100%-ra vonatkozik. Ezzel a módszerrel igen rugalmasan adhatók meg "gumi"-táblázatok. Abszolút magasság is megadható a cellákra(TD), "HEIGHT=" mögötti számmal. fent középre Ez középen jobbra lesz illesztve lent balra Ha elhagyjuk a táblázat keretét és színét is akkor észre se nagyon vesszük, hogy táblázatot látunk Sokan kedvelik azt a keretet, amit nem a BORDER-rel lehet megadni, hanem azzal, amit egy színes (itt sárga) táblázatcellának a nála 1-el kisebb méretű (CELLSPACING=1) táblázat által le nem takart része eredményez. Ennek a keretnek a színe független a betűszíntől, a formája is más, mint a BORDER-el kapott kereté.
Amint látható, az egymás melletti vagy alatti táblázatcellák összevonhatók. <P><TABLE WIDTH=100% BORDER=1 BGCOLOR=limegreen CELLPADDING=15> <TR><TD WIDTH=25%> Első sor</TD><TD COLSPAN=3> három összevont oszloppal</TD></TR> <TR><TD ROWSPAN=2>2. és 3. sor 1. oszlopa összevonva</TD> <TD WIDTH=25%>Ez a</TD> <TD WIDTH=25%>2.</TD> <TD WIDTH=25%>sor</TD></TR> <TR><TD>Ez a</TD><TD>3.</TD><TD>sor</TD> </TR> </TABLE> <P>Az is látszik, hogy az oszlopok (itt azonos) hosszát oszloponként egyszer, ott adjuk meg, ahol akarjuk (és tudjuk).	Amint látható, az egymás melletti vagy alatti táblázatcellák összevonhatók. Első sor három összevont oszloppal 2. és 3. sor 1. oszlopa összevonva Ez a 2. sor Ez a 3. sor Az is látszik, hogy az oszlopok (itt azonos) hosszát oszloponként egyszer, ott adjuk meg, ahol akarjuk (és tudjuk).
<FONT COLOR=white><B> A cellákba nemcsak szöveg kerülhet, hanem pl. kép vagy másik táblázat is. Utóbbira ez az anyag maga a példa, előbbire pedig a következő táblázat, amiben a képek ráadásul link-ek is. </FONT></B> <CENTER><TABLE BORDER=1 CELLPADDING=5> <TR><TD><A HREF=kemia.jpg> <IMG SRC=kkemia.jpg ALT="Kémia épület"></A></TD> <TD><A HREF=fizika.jpg> <IMG SRC=kfizika.jpg ALT="Fizikus épület"></A></TD></TR> <TR><TD><A HREF=infoep.jpg> <IMG SRC=kinfoep.jpg ALT="Az új és a régi Inf. épület"> </A></TD> <TD><A HREF=ujitcs.jpg> <IMG SRC=kujitcs.jpg ALT="Déli épület, 1999. szept."> </A></TD> </TR> </TABLE>	A cellákba nemcsak szöveg kerülhet, hanem pl. kép vagy másik táblázat is. Utóbbira ez az anyag maga a példa, előbbire pedig a következő táblázat, amiben a képek ráadásul link-ek is.
Néhány szó: színekről, háttérről, szöveg illesztésről. <P ALIGN=right>A html lap "BODY" sorában "BACKGROUND=képfájlnév" formában háttérképet adhatunk meg. Ha emellett még a "BGPROPERTIES=fixed" paramétert is beírjuk a sorba, akkor egyes böngészők a html lap scrollozása közben nem mozgatják a hátteret. <P ALIGN=justify> Ha háttérkép helyett háttérszínt akarunk megadni, akkor ezt a "BODY" sorába írt "BGCOLOR=szín" paraméterrel tehetjük. A "szín" vagy a szín angol neve, vagy #RGB-kód lehet, ahogy erről korábban már volt szó. Szintén a "BODY" sorába írt "TEXT=szín" paraméterrel az egész html lap betűszínét adhatjuk meg, amitől aztán &lt;FONT COLOR=szín&gt; és &lt;/FONT&gt; közötti szövegrészekben eltérhetünk. <DIV ALIGN=justify> <P>Ahogy az előző két paragrafust kezdő <B>P</B> parancsban látható, megadhatunk egy paragrafusra nem balra történő szöveg illesztést is. <P>Ha egy html lapon sok egymás utáni paragrafust (pl. a teljes lapot) akarjuk (pl. balra és jobbra is) illeszteni, akkor célszerű az illesztendő részt egy nagyobb egységgé (ún. "DIV" blokká) kiemelni, és a <B>DIV</B>-be írni az illesztést, ahogy azt itt tettük. A DIV-nek illik megjelölni a végét. </DIV>	Néhány szó: színekről, háttérről, szöveg illesztésről. A html lap "BODY" sorában "BACKGROUND=képfájlnév" formában háttérképet adhatunk meg. Ha emellett még a "BGPROPERTIES=fixed" paramétert is beírjuk a sorba, akkor egyes böngészők a html lap scrollozása közben nem mozgatják a hátteret. Ha háttérkép helyett háttérszínt akarunk megadni, akkor ezt a "BODY" sorába írt "BGCOLOR=szín" paraméterrel tehetjük. A "szín" vagy a szín angol neve, vagy #RGB-kód lehet, ahogy erről korábban már volt szó. Szintén a "BODY" sorába írt "TEXT=szín" paraméterrel az egész html lap betűszínét adhatjuk meg, amitől aztán <FONT COLOR=szín> és </FONT> közötti szövegrészekben eltérhetünk. Ahogy az előző két paragrafust kezdő P parancsban látható, megadhatunk egy paragrafusra nem balra történő szöveg illesztést is. Ha egy html lapon sok egymás utáni paragrafust (pl. a teljes lapot) akarjuk (pl. balra és jobbra is) illeszteni, akkor célszerű az illesztendő részt egy nagyobb egységgé (ún. "DIV" blokká) kiemelni, és a DIV-be írni az illesztést, ahogy azt itt tettük. A DIV-nek illik megjelölni a végét.

---