HTML Alapok

HTML alapok
Írta: orosznyet Dátum: 2007. jan 21. 16:11:39
Most megtanulhatod a HTML alapjait, lépj a következő oldalra.

Mi is az a HTML?
-HTML, azaz Hyper-Text Markup Language,ez a programozási nyelv a weblapok ősanyja.
-A szerkesztéséhez elegendő a legegyszerűbb program, a Jegyzettömb is és nincs szükségünk

semmilyen fordítóprogramra.
-A HTML-t böngészőktől (Fire Fox, Internet Explorer, Opera) és operációs rendszerektől

(Windows, Linux, FreeBSD, Mac OS) szinte teljesen függetlenül is futathatjuk (bár nem
minden böngésző jeleníti meg ugyanúgy a dolgokat).
A HTML Szintaktikája
-A HTML oldal szintaktikája nagyon egyszerű. Szokták WYSIWYG ( What You See Is What
You Get ) típusú nyelvnek is nevezni.
-Egy HTML oldal úgynevezett tag-okból áll, amik két befelé nyíló kacsacsőr közözz
helyezkednek el ( <tagneve>) .
-A tag-ok általában rendelkeznek egy záró tag-gal is amely a formázott szöveg után
helyezkedik el. ( pl.: <b> záró tag-ja </b> míg a <br> nem rendelkezik ezzel )
-A tag-ok többsége rendelkezik tulajdonságokkal, opciókkal (ezeket az opciókat a

későbbiekben leírom, kb a második oldaltól kezdve).
-Egy tag kinézete pl.: <TAGNÉV OPCIÓ="ÉRTÉK" OPCIÓ2="ÉRTÉK">
Hogyan is néz ki egy ilyen oldal?
Egy weblap, W3C kompatibilitásának érdekében minden beírás előtt az első sorba írjuk be ezt
a sort:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Miután az előző sort beszútuk áttérhetünk a weblapok (oldalak) lényegére. A <HTML>
taggal kell megnyitnunk az egész oldalt, hiszen ezzel jelezzük a böngészőnek hogy hogyan is
fordítsa le nekünk az oldalt. A <HTML> tag rendelkezik lezáró tag-gal, tehát az oldalunk
végére be kell helyeznünk a </HTML> kódot.
A két HTML tag közé kell helyet szorítanunk a <HEAD> majd lezáró tagja </HEAD> azután
pedig a <BODY> és lezárótagja a </BODY>. A <HEAD> tagban tároljuk azokat a tagokat
amelyek fontosak az oldal számára (pl.: javasrcipt, stíluslap, meta tagok, címke).
A <HEAD> tagot után bevihetjük az alábbiakat:
<TITLE> Ez az oldal címkéje ami a böngésző címkéjében is látható </TITLE>
<SRIPT> A javascrit ami alkalmazni szeretnél </SRIPT>
<META> - ennek a tagnak van jó néhány opciója (és nincs lezáró tagja)
<LINK> - ennek a tagnak van néhány opciója ami merőben megváltoztathatja az oldalt (és
nincs lezáró tag)
<STYLE> ide jönnek az oldal megjelenítését merőben megváltoztató értékek </STYLE>
Majd lezárjuk a fel részt </HEAD>.
Ezután következik a <BODY> tag, ezután helyezkedik el a konkrét, látható oldal. (azok a
tagok, amik ide kerülhetnek a taglistában, szerepelnek.)
Az oldal tartalmának befejezése után </BODY> majd rögtön utána </HTML> taggal zárjuk
le az oldalt.
Kezdjük talán a <HEAD></HEAD> részben általában helyet kapó tagok listáját.
<TITLE>Cimke</TITLE> (van lezáró tag)

-Leírás: A címke helyére bevitt szöveg olvasható a böngésző címkéjében.
<META> (nincs lezáró tag)

-Opciói:
http-equiv="Content-Type" content="text/html; charset=iso-8859-2"
-A iso-8859-2 utáni részt módosítsuk a karakterkódolás megváltoztatásához.
name="description" content="Az oldal leírása"

- Az oldal leírása helyére bevitt adat lesz az oldal leírása.
name="keywords" content="Kulcs, szavak, elválasztva"

- A Kulcs, szavak, elválasztva cserélhetjük le azokra a szavakra, amik az oldalunkra
jellemzőek, ezeket a szavakat vesszővel válasszuk el. (ezeket a kulcsszavakat gyakran nézik a
keresőrobotok.)
name="Author" content="Orosznyet"
- Az Orosznyet helyére írhatjuk az oldal tulajdonosának nevét.
name="Reply-To" content="orosznyet@gmail.com"
- Az orosznyet@gmail.com helyére írjuk azt az e-mail címet, ahova levelet lehet küldeni az
oldallal kapcsolatban.
http-equiv="Refresh" content="10;http:orosznyet.extra.hu"
- A 10;http:orosznyet.extra.hu szövegben a 10-es számot cseréljük le arra az
időtartamra(másodpercben mérve), aminek leteltével betöltődődik a pontosvessző utáni cím.
<SCRIPT> (van lezáró tag)

-Leírás:
- A <SCRIPT></SCRIPT> tagok közt bármilyen javascript elhelyezhető
(ez viszont már nem HTML hanem java programozás, tehát ilyen kódokat főként javascript
gyűjtő oldalakról szerezhetünk be)
-Opciói:
type="text/javascript"
- A javascript típusa, ezt jobb a helyén hagyni (általában text/javascript értékű)
src="Elérési út"
- Az Elérési út, annak a javascript fájlnak az elérési útvonala, amit szeretnénk használni az
oldalunkon.(csak akkor kell megadni, ha a <SCRIPT></SCRIPT> tagok között nem adtunk
meg javascriptet)
language="Javascript"
- Ez a javascript verziója. A Javascript szöveget helyettesítsük a megfelelővel.
<LINK> (nincs lezáró tagja)

-Opciói:
rel="stylesheet" href="Elérési út" type="text/css"
- Az Elérési út helyére írjuk be annak a fájlnak az elérési útvonat, ami tartalmazza az oldal
stílusát meghatározó kódsort.
rel="shortcut icon" href="Elérési út"

- Az Elérési út helyére írjuk be annak a 16x16 ico kiterjesztésű fájlnak az elérési útvonalát
ami majd az oldal kis ikonja lesz(ezen az oldalon az kék F betű).
rel="alternate" type="application/rss+xml" href="Elérési út"

- Az Elérési út helyére írjuk be annak a fájlnak az elérési útvonalát ami szeretnénk RSS Feed-
ként alkalmazni.
<STYLE> (van lezáró tag)

-Leírás:
Hát ez nagyon, de nagyon hosszú lenne, de hamarosan lesz css cikk is a portálon.
És most következik a leghosszabb, a <BODY></BODY> tagok közt használatos tagok,
ezt most 3 részre osztjuk(opciós tag, opció nélküli tag ill. al-tagos tagok) és ennek az első
részét most láthatod is.
<BODY> (van lezárótag)

-Leírás:
- Igen jól látod, ennek is vannak opciói :D
-Opciói:
background="háttér"
- A háttér helyére írjuk be a háttékép elérési útvonalát.
bgcolor="háttérszín"
- A háttérszín helyére írjuk be az HEXA kódot vagy a szín nevét angolul.
bgproperties="háttérhelyzete"
- A háttérhelyzete helyére írjuk be a fixed szót, ha azt szeretnénk, hogy a háttér ne mozogjon,
ha a gördítősávval fel-le mozgunk, és a scrolling szót ha azt szeretnénk hogy mozogjon a
háttér…
onload="script"
- A script szó helyére írjuk be azt az eseményt, ami akkor fut le, amikor az oldal betöltődött.
onunload="script"
- A script helyére írjuk be azt az eseményt, ami akkor fut le, amikor kilépünk az oldalról.
text="szöveg szine"
- Ha stíluslapunkon nincs megadva a szöveg színe, akkor használhatjuk.
link="link szine"
- Ha stíluslapunkon nincs megadva a link színe, akkor használhatjuk.
alink="aktívlink színe"
- Ha stíluslapunkon nincs megadva az aktív link színe, akkor akkor használhatjuk.
vlink="használt link színe"

- Ha stíluslapunkon nincs megadva a használt link színe, akkor használhatjuk.
<SCRIPT> (van lezáró tag)

-Leírás:
- Itt ugyanaz használatos, mint a <HEAD> tagban, szóval csak kicsit előrébb mész és máris
olvashatod.
<A> (van lezáró tag)

-Leírás:
- Ez a link, tag a sokat használt link:D
<A></A> tagok közötti tartalom linkként fog szolgálni.
-opciók:
href="url"
- Az url helyére írjuk be megnyitni kívánt fájl elérési útvonalát.
name="név"
- Ez csak akkor használatos, ha horgonyként használjuk a linket. Ha horgonyként használjuk,
akkor a név helyére írjuk be a horgony nevét.
target="cél"
- A cél helyére írhatjuk hogy link milyen farmeben/ablakban nyíljon meg (új és üres ablakban
_blank)
onmouseover="egérérintés"
- Az egérérintés helyére írhatjuk be azt az eseményt, ami akkor fut le, amikor ráhúzzuk az
egeret a linkre.
onmouseout="egérelhagyás"
- Az egérgérelhagyás helyére írhatjuk azt az eseményt ami akkor fut le amikor lehúzzuk az
egeret a linkről.
<IMG> (nincs lezáró tag)

-Leírás:
Ezzel a taggal szúrhatjuk be képeinket oldalunkra.
-Opciók:
src="elérési út"
- Az elérési útat cseréljük le annak a képnek az elérési útjára, amit szeretnénk az oldalon
látni.
width="szélesség"
- A szélesség helyére egy számot ill. százalékot is írhatunk így meghatározva a kép méretét.
height="magasság"
- A magasság helyére egy számot ill. százalékot is írhatunk így meghatározva a kép méretét.
border="vastagság"
- Ezzel a taggal határozhatjuk meg a keret vastagságát egy képnél.
align="hely"
- Ez az opció lehetőséget ad, hogy a képünk helyhez igazítsuk (jobb - right, bal - left, középre
- center)
alt="szöveg"
- Ha esetleg a képet nem lehetne betölteni akkor ez a szöveg jelenik meg helyette.
vspace="hely"
- Üres hely a kép felett illetve az alatt.
hspace="hely"
- Üres hely a képe mellett.
<MARQUEE> (van lezáró tag)

-Leírás:
Ez a méltánhíres scrollozódó szöveg/kép doboz.
-Opciók:
behavior="scroll"
- Ez általában így kell hagynunk, hiszen ehhez szükség van a scrollozódás eléréséhez.
align="hely"
- A doboz vízszintes elhelyezkedését határozza meg (right, center, left)
valign="hely"
- Ez a doboz függőleges elhelyezkedését határozza meg (top - fent, center - középen, bottom -
lent)
direction="irány"
- Ezzel határozhatjuk meg a gördülés irányát.(right - jobb, left - bal, up - fel, dawn - le)
width="szélesség"
- A doboz szélessége.
height="magasság"
- A doboz magassága.
Scrollamount="sebesség"
- A gördítés sebessége.
+Plusz:
onmouseover="this.stop()" onmouseout="this.start()"
- Ez a kis extra lehetővé teszi hogy ha rázúzzuk az egeret a dobozra akkor megáll és ha
lehúzzuk akkor folytatja a gördülést.(ne módosítsunk semmit rajta a használathoz.)
<IFRAME> (van lezáró tag)

-Leírás:
Ez a kis tag segít minket, abban hogy más oldalak ágyazhassunk be a szövegbe.
-Opciók:
src="url"
- Annak a fájlnak az elérési útvonala, ami szeretnénk beágyazni az oldalunkba.
title="cimke"
- Ide az a szöveg kerüljön, amit akkor olvashatunk, ha az egeret az objektum fölé húzzuk.
frameborder="szám"
- A keret vastagsága.
align="hely"
- A beágyazott oldal helye (right, center, left).
width="szélesség"
- A beágyazott oldal szélessége
height="magasság"
- A beágyazott oldal magassága
<FONT> (van lezáró tag)

-Leírás:
Ezzel a kis taggal változtathatjuk a szöveg megjelenítését ami a <FONT></FONT> között
helyezkedik el.(Ez a tag felülírja az alapértelmezett szöveg megjelenítést, persze csak a
<FONT></FONT> tag közötti szöveget)
-Opciók:
color="szín"
- A betűszín megváltoztatása.
face="típus"
- A betűtípus meghatározására szolgál, bár arra ügyelni kell, hogy olyan betűtípusokat írjunk
bele, amik alapértelmezetten benne vannak az operációsrendszerben. (pl.: Times new Roman)
size="méret"
- A betű mérete számokban.
<DIV> (van lezáró tag)

-Leírás:
A <DIV></DIV> tagok között elhelyezkedő speciális tartalomterület.
-Opciók:
align="Hely"
- A speciális tartalomterület vízszintes elhelyezkedése (right, center, left).
class="osztály"
- A <DIV> tagot leggyakrabban tartalomterületek elrejtéséhez/mutatásához használják, de a
tartalom átalakításhoz is nagyszerű.(ehhez a művelethez azonban szükségeltetik egy
javascript)
name="név"
- A tartalomterület neve.
<SPAN> (van lezáró tag)
-Leírás:
Ez a tag afféle <FONT> és <DIV> keverék, ezzel ötvözve a szövegformázást <DIV>
speciális opcióit.
-Opciók:
color="szín"
- A betűszín megváltoztatása.
style="stílus"
- A szövegterület stílusa.
align="Hely"
- A speciális tartalomterület vízszintes elhelyezkedése (right, center, left).
class="osztály"
- A <DIV> tagot leggyakrabban tartalomterületek elrejtéséhez/mutatásához használják, de a
tartalom átalakításhoz is nagyszerű.(ehhez a művelethez azonban szükségeltetik egy
javascript)
<INPUT> (nincs lezáró tag)

-Leírás:
Ez az egyik legnagyobb körben használt tag, így jó pár altípusa van, de mindig adat bevitelre
szolgál.
Opciók:
align="hely"
- Vízszintes helyzet (right, center, left)
alt="gyorstipp"
- Ha fölé húzzuk az egeret ennek a tagnak ezt a szöveget, olvashatjuk (gyorstipp).
checked
- Bejelölt, ennek a tagnak nincs saját értéke, hanem ő maga az érték. (Akkor jó, ha egy ilyen
tagot szeretnénk alapértelmezetten bejelölni)
disabled
- Letiltott, ennek a tagnak nincs saját értéke, hanem ő maga az érték. (Akkor jó, ha le
szeretnénk tiltani vmien választási lehetőséget.)
maxlenght="hossz"
- Maximálisan bevihető karakterhossz az adott <INPUT> tagba.
readonly
- Csak olvasható, ennek a tagnak nincs saját értéke, hanem ő maga az érték. (Akkor hasznos,
ha nem szeretnénk, hogy módosítani lehessen egy adott <INPUT> értékét.)
size="méret"
- A beviteli terület mérete (pixelben és százalékban)
src="hivatkozás"
- Általános URL hivatkozás, egy másik lapra, fájlra.
type="tipus"
- Az <INPUT> alapértelmezett típusa, ezzel választhatjuk, meg hogy milyen formája legyen
a bevitelnek.
value="érték"
- A lentebbi rész megmagyarázza mikor, és hogyan lehet hasznosítani az előbbieket.
És mivel ez egy spéci kis tag itt van a részletes használhatósága (típus szerint, csak példával):
Ez egy gomb:
<INPUT TYPE="BUTTON" VALUE="GOMB FELIRAT" SIZE="100"
ALIGN="CENTER">
Ez egy rádiós gombsorozat:

<INPUT TYPE="RADIO" NAME="valasztogomb_1" CHECKED>Szöveg 1
<INPUT TYPE="RADIO" NAME="valasztogomb_1" DISABLED>Szöveg 2
Egy jelölőnégyzetes gomb:

<INPUT TYPE="CHECKBOX" NAME="jelolonegyzet" CHECKED>Szöveg 1
Egy szövegmező (amit a READONLY miatt nem lehet szerkeszteni):

<INPUT TYPE="TEXT" NAME="szovegmezo" VALUE="Ez láccik a
szövegmezőben" SIZE="13" READONLY>
Egy jelszó beviteli mező:

<INPUT TYPE="PASSWORD" NAME="jelszomezo" VALUE="" SIZE="13"
MAXLENGHT="30">
Űrlapokhoz (küldés, és törlésgomb):

<INPUT TYPE="SUBMIT" VALUE="Küldés">
<INPUT TYPE="RESET" VALUE="Törlés">
<TEXTAREA> (van lezáró tag)

-Leírás:
Ez egy többsoros szövegbeviteli mező, az <INPUT> taghoz hasonló opciókkal, ezért itt csak
röviden leírtam.
-Opciók:
cols="oszlop"
- A szövegmező szélessége, az oszlopok mennyisége (pixelben vagy százalékban)
disabled
- Letiltott, önállóan értéket képez.
name="név"
- A szövegmező neve.(űrlap vagy javascripthez)
readonly
- Csak olvasható, önmagában érték.
rows="sorok"
- A szövegmező magassága, a sorok száma. (pixelben vagy százalékban)
Természetesn még vannak ilyesfajta tagok még de most csak ennyit, hiszen ezek csak az
alapok, de következő oldalon folytatódik az altagos tagokkal(olyan tagok amik működése
elengedhetetlen altagjaik nélkül.)
Most pedig következzék a <BODY></BODY> azon tagjai amik más tagok nélkül nem
életképesek.
<TABLE> (van lezáró tag)

-Leírás:
Ez a tag a legtöbbet használt tagok listáján van, ennélkül minden oldal darabokra hullana,
ezetűk a táblázatok, aminek 2 altagja van, de előbb következzenek az ő opciói.
-Opciók:
align="hely"
- A táblázat vízszintes helyzete (right, center, left)
bgcolor="szín"
- A táblázat háttérszíne (a celláknak külön színt is adhatunk)
- Itt adhatjuk meg a háttér elérhetőségének útvonalát.
border="vastag"
- A táblá keretének vastagsága (általában már kidolgozzák annyira az oldalakat, hogy nem
szoktak keretvastagságot 0-án kívül másra állítani.)
bordercolor="szín"
- A keret színe.
cellpadding="táv"
- Cellák tartalma és kerete közötti távolság.
cellspacing="táv"
- Cellák egymástól való távolsága
width="szélesség"
- A táblázat szélessége(érdemes megadni, mert a táblázat eléggé eldeformálódott lehet ha
üresen hagyjuk.)
height="magasság"
- A táblázat magassága.
És most jönnek az altagok:
<TR> (van lezáró tag)

-Leírás:
Ez a <TABLE> tag sorainak tagja.
-Opciók:
align="hely"
- A sor vízszintes elhelyezkedése (right, center, left)
bgcolor="szín"
- A sor háttérszine.
bordercolor="szín"
- A sor keretének szine.
valign="hely"
- A sor függőleges elhelyezkedése (top - fenn, center - közében, bottom - legalul)
<TD> (van lezáró tag)

-Leírás:
Ez a <TABLE> tag oszlopainak száma.
-Opciók:
align="hely"
- A sor vízszintes elhelyezkedése (right, center, left)
valign="hely"
- A sor függőleges elhelyezkedése (top - fenn, center - közében, bottom - legalul)
bgcolor="szín"
- A sor háttérszine.
- A cella hátterének elérési útvonala.
bordercolor="szín"
- A keret szine.
colspan="szám"
- Összevont oszlopok száma.
width="szélesség"
- A cella szélessége (vigyázzunk, ha már szerepel egy ilyen opció a <TABLE> tagban.)
height="magasság"
- A cella magassága (vigyázzunk, ha már szerepel egy ilyen opció a <TABLE> tagban.)
nowrap
- Nincs sortörés, ez az opció nem rendelkezik külön értékkel.
rowspan="szám"
- Összevont sorok száma.
+Plusz:
Itt van egy kis tábla:
<TABLE BORDER="0" WIDTH="200" HEIGHT="200">

<TR>
<TD COLSPAN="2">Ez itt 2 oszlopos szöveg</TD></TR>
<TR>
<TD>Sor:2 Oszlop:1</TD><TD ROWSPAN="2">Ez itt egy 2 soros</TD></TR>
<TR>
<TD>Sor:3 Oszlop:1</TD></TR>
</TABLE>
<FORM> (van lezáró tag)

-Leírás:
Ez a tag az űrlapok küldéséhez szükséges.
-Opciók:
action="url"
- Az űrlapot feldolgozó oldal címe.
name="név"
- Az űrlap neve, az űrlapot feldolgozó oldal számára elengedhetetlen.
mehod="tipus"
- Mien tipusú legyen az adatátvitel (lehet: post - külés, get - kérés)
target="cél"
- Az objektum célja.
onSubmit="parancs"
- Az űrlap elküldésénél lefutó parancs.
onReset="parancs"
- Az űrlap visszaállításánál lefutó parancs.
És most jönnek az altagok:
Ennek az elemnek általában az <INPUT> és <TEXTAREA> tagok kellenek a

működtetéséhez, amiket az előző oldalon meg is nézhetsz.
<SELECT> (van lezáró tag)
-Leírás:
Az a jó kis legördülő menü
-Opciók:
disabled
- Letiltott, önmagában értéket alkot.
multiple
- Több eleme is kiválasztható a listának, önmagában értéket alkot.
name="név"
- Az objektum neve.
size="méret"
- Az objektum mérete.
onchange="esemény"
- Esemény lefuttatása akkor ha megváltozik a beállítás.
És most jön az altag:
<OPTION> (nincs lezáró tag)

-Leírás:
A <SELECT> tagnak ez az egyedüli altagja van, és ennél kivételesen nincs lezáró tag ám
mégsem a tagon belül helyezkedik el a kiírandó érték, csak írjuk utána majd jöhet a következő
<OPTION> tagg, viszont a végén ugye szükségeltetik a </SELECT> tag.
-Opciók:
disabled
- Letiltott, önálóan értéket jelent.
selected
- Alapértelmezettel kiválasztott.
value="érték"
- Az objektum értéke.
+Plusz:
Ez egy 4 tagú legördülő menü aminek ha megváltoztatjuk az értékét egy alert ablak nyílik
meg.
<SELECT NAME="valasztomenu_1" ONCHANGE="alert('Megváltozott a
kijelölés!')">
<OPTION NAME="menupont_1" VALUE="1">1. menüpont
<OPTION NAME="menupont_2" VALUE="2" selected>2. menüpont
</select>
<OL> (van lezáró tag)

-Leírás:
Ez a rendezett lista.
Opciók:
type="tipus"
- A lista tipusa (lehet.: 1 - számozott lista, A - betüvel jelölt lista)
continue
- A legutolsó befejezett lista folytatása.
start="karakter"
- A lista kezdése a megadott karaktertől (szám esetén egyértelű, betű esetén pedig az hogy
hanyadik helyen van az adott betű az abc-ben).
És most az altagok vagyis altag:D
<LI> (nincs lezáró tag)

-Leírás:
Ennek a tagnak nincs opciója (listaelemek).
<LH> (nincs lezáró tag)

-Leírás:
Ennek a tagnak nincs opciója (Lista fejléc).
+Plusz:
És itt is van egy kis minta lista:
<OL TYPE="1" START="34">
<LH>Rendezett lista fejléce</lh>
<LI>Számozott listaelem
<OL TYPE="A" start="5">
</OL>
</OL>
<UL> (van lezáró tag)

-Leírás:
Ez a rendezetlen lista.
-Opciók:
type="tipus"
- A lista elemeinek tipusa (square - kocka, disc - kör)
warp="rendezés"
- Mien legyen az elrendezés (horizontal - vízszintes, vectrical - függőleges)
És most az altagok vagyis altag:
Ennek az <OL> taggal megeggyezőek az altagjai.
<MENU> és <DIR> (van lezáró tag)

-Leírás:
Egyéb listarendezési tagok, amik nem rendelkeznek opciókkal, azonban az <OL> tag
altagjaival megegyezőket használnak.
<FAMESET> (van lezáró tag)

-Leírás:
Ez egy olyan egyedülálló oldal amiben 2 vagy akár több különböző oldalt is egy oldalra
helyezhetünk el.(ha a <FRAME> tagot használjuk akkor a <BODY></BODY> tag helyére
írjuk ezt a kódot hiszen ez az egész oldal tartalmát meghatározó tag)
-Ociók:
cols="oszlop"
- Az oszlopok száma ami szétosztja az oldalt.(pixel vagy százalék)
rows="sor"
- Sorok száma ami szétosztja az oldalt.(pixel vagy százalék)
frameborder="vastag"
- A keretek vastagsága.(ha itt viszont ki szeretnénk kapcsaolni a keretvastagságot a no
szavacskát adjuk meg a 0 érték helyett)
framespacink="táv"
- A frame-k közötti távolság.
border="vastag"
- A keretet határoló vonal vastagsága ami független a frameborder opciótól.
bordercolor="szín"
- A keret szine.
És most az altag:
<FRAME>
-Leírás:
Ez a tag vezeti be az egyes frameket.
-Opciói:
scrollink="gördül"
- Azt állíthatjuk be vele hogy az adott framet hogyan lehessen gördíteni (yes - igen, no - nem,
auto - automatikusan állítja be a böngésző)
resizable
- A keretet át lehet méretezni, önmagában érték.
noresize
- Az előző ellentéte.
bordercolor="szín"
- A frame-t körülhatároló keret szine.
+Plusz:
Itt van egy kis minta:
<FRAMESET ROWS="20%,40%,*" FRAMEBORDER="2"
FRAMESPACING="10">
<FRAME NAME="FRAME_1" SRC="URL" SCROLLING="NO" NORESIZE>
<FRAME NAME="FRAME_2" SRC="URL" SCROLLING="AUTO">
<FRAMESET COLS="35%,*" FRAMEBORDER="6" FRAMESPACING="5">
<FRAME NAME="FRAME_3" SRC="URL" SCROLLING="NO">
<FRAME NAME="FRAME_4" SRC="URL" SCROLLING="AUTO">
</FRAMESET>
</FRAMESET>
<OBJECT> (van lezáró tag)

-Leírás:
Flash és Windows Media Player fájlok beépítése a szövegkörnyezetbe(legalábbis most ezek
láthatóak itt).
Adobe Flash fájlok beépítése:
-Opciók:
width="széles"
- Annak a területnek a szélessége, amit a beépítéshez használsz.
height="magas"
- Annak a területnek a magassága, ami a beépítéshez használsz.
<PARAM> (nincs lezáró tag)

name="név"
- A beépített terület neve.
value="url"
- A flash fájl elérési útvonala.
<EMBED> (van lezáró tag)

src="url"
- A flash fájl elérési útvonala.
width="széles"
height="magas"
+Plusz:
És itt a legegyszerűbb minta a Flash fájlok beépítésére:
<OBJECT WIDTH="550" HEIGHT="400">
<PARAM NAME="MOVIE" VALUE="URL">
<EMBED SRC="URL" WIDTH="550" HEIGHT="400">
</EMBED>
</OBJECT>
Windows Media Player beépítés:
-Opciók:
width="széles"
height="magas"
classid="id"
- Ez feltétlenül szükséges hiszen a böngésző ez alapján dönti el hogy milyen programot
használ a lejátszásához.(Media Player id-je: CLSID:6BF52A52-394A-11d3-B153-
00C04F79FAA6")
type="tipus"
- A beépített anyag tipusa (ebben az esetben: application/x-oleobject)
<PARAM> (nincs lezáró tag)

name="név"
- A paraméter neve
value="érték"
- Az előzőhöz elengedhetetlen az érték (url - a fájl elérési útvonala, autostart -automatikus
indítás, PlayCount - lejátszás számláló, a többit elhagyhatjuk de nem minden esetben
működik, ezt értem a következő példára)
+Plusz:
És itt a minta a Windows Media Player fájlok beépítésre:
<OBJECT width="320" height="240" CLASSID="CLSID:6BF52A52-394A-11d3-
B153-00C04F79FAA6" type="application/x-oleobject">
<PARAM NAME="URL" VALUE="url">
<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
<PARAM NAME="AutoStart" VALUE="True">
<PARAM NAME="uiMode" value="none">
<PARAM NAME="PlayCount" value="9999">
</OBJECT>
És végül azok a tagok, amik igazából nem igényelnek altagokat, és általában nem is
rendelkeznek opciókkal, értékekkel (ezek a tagok a <BODY></BODY> tagok közt
helyezkedhetnek el).
<B></B> - A köztes szöveg félkövér lesz.
<U></U> - A köztes szöveg aláhúzott lesz.
<I></I> - A köztes szöveg dőltbetűs lesz.
<S></S> - A köztes szöveg áthúzott lesz.
<SUB></SUB> - A köztes szöveg alsóindexes lesz.
<SUP></SUP> - A köztes szöveg felsőindexes lesz.
<BR> - Sortörés.
<CENTER></CENTER> - A köztes szöveg középre lesz igazítva.
<H1></H1> - Ez a header vagyis a fejléc, ez egy erősített szöveg (lehet: H1-től H6-ig)
<P></P> - A köztes szöveg egy bekezdést képez
-Opciói:
align="hely"
- A bekezdés helyzete (right, center, left, justify - sorkizárt)
<HR> - Egy vízszintes vonalat szúrhatunk be a szövegkörnyezetbe.
-Opciói:
align="hely"
- A vízszintes egyenes helyzete (right, left, center)
color="szín"
- A vízszintes egyenes szine.
Ezek azok az opciók amik általában használatosak lehetnek a tagoknál (megjegyztem nem
minden opció működik minden taggal az alábbiak közül)
class="osztály"
- A stíluslapban megadott osztály nevét írjuk az osztály helyére.
style="stílus"
- Az előző tagtól annyiban tér el hogy itt nem kell az osztály nevére hivatkozni elegendő, ha
itt megadjuk és máris saját stílusa van a tagnak.
onmouseover="egérérintés"
- Az egérérintés helyére írhatjuk be azt az eseményt, ami akkor fut le, amikor ráhúzzuk az
egeret a linkre.
onmouseout="egérelhagyás"
- Az egérelhagyás helyére írhatjuk azt az eseményt, ami akkor fut le amikor lehúzzuk az
egeret a linkről.
name="név"
- Egy tag neve, főleg űrlapoknál és javascripteknél alkalmazzák.
PHP-Fusion és a HTML!
A PHP-Fusion rendszer a HTML nélkül nem is létezne és más weboldal sem, ám a PHP-
Fusion egy más programozási nyelv, a PHP. A PHP programozás cikk nemsokára megjelenik,
addigis azonban felvázolnám, hogy a HTML miként is illeszkedik bele PHP-Fusion
rendszerbe.
A HTML eléggé hasznos lehet, ha egyedi oldalakat vagy infusiokat, modokat, themeket
készítünk azonban legtöbbször csak a <BODY></BODY> tagok közt használatos tagok
működnek megfelelően hiszen a PHP-Fusion rendelkezik már <HTML> és <HEAD>
tagokkal. De kivételt képez a theme, hiszen abban ezen a téren van kis szabadságunk, itt már a
<BODY> tagot is használhatunk.
És ügyeljünk arra hogy a PHP kódunk meghibásodását okozhatja az ha " jeleket rakunk a
kódunkba, tehát az értékeket közrefogó idézőjeleket cseréljük le ' jelekre, azaz aposztrófokra.
Ez a cikk 123 órába és 100000 karakterbe került (amiből csak 51880 karakter került be ide),
remélem hasznotokra lesz, és ha kérdésed lenne nyugodtan tedd fel, és majd megpróbálok
intézkedni az ügyben.
Jó programozást kívánok, és ne feledd, ha építesz valami mindig kell az alap hozzá.

HTML Alapok

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Alapok

Cargado por

Copyright:

Formatos disponibles

HTML alapok

Írta: orosznyet Dátum: 2007. jan 21. 16:11:39

Most megtanulhatod a HTML alapjait, lépj a következő oldalra.

-HTML, azaz Hyper-Text Markup Language,ez a programozási nyelv a weblapok ősanyja.

-A szerkesztéséhez elegendő a legegyszerűbb program, a Jegyzettömb is és nincs szükségünk

-A HTML-t böngészőktől (Fire Fox, Internet Explorer, Opera) és operációs rendszerektől

-A tag-ok többsége rendelkezik tulajdonságokkal, opciókkal (ezeket az opciókat a

-Egy tag kinézete pl.: <TAGNÉV OPCIÓ="ÉRTÉK" OPCIÓ2="ÉRTÉK">

Hogyan is néz ki egy ilyen oldal?

<TITLE>Cimke</TITLE> (van lezáró tag)

<META> (nincs lezáró tag)

name="description" content="Az oldal leírása"

name="keywords" content="Kulcs, szavak, elválasztva"

<SCRIPT> (van lezáró tag)

<LINK> (nincs lezáró tagja)

rel="shortcut icon" href="Elérési út"

rel="alternate" type="application/rss+xml" href="Elérési út"

<STYLE> (van lezáró tag)

<BODY> (van lezárótag)

vlink="használt link színe"

<SCRIPT> (van lezáró tag)

<A> (van lezáró tag)

<IMG> (nincs lezáró tag)

<MARQUEE> (van lezáró tag)

<IFRAME> (van lezáró tag)

<FONT> (van lezáró tag)

<DIV> (van lezáró tag)

<INPUT> (nincs lezáró tag)

Ez egy rádiós gombsorozat:

Egy jelölőnégyzetes gomb:

Egy szövegmező (amit a READONLY miatt nem lehet szerkeszteni):

Egy jelszó beviteli mező:

Űrlapokhoz (küldés, és törlésgomb):

<TEXTAREA> (van lezáró tag)

<TABLE> (van lezáró tag)

És most jönnek az altagok:

<TR> (van lezáró tag)

<TD> (van lezáró tag)

<TABLE BORDER="0" WIDTH="200" HEIGHT="200">

<FORM> (van lezáró tag)

És most jönnek az altagok:

Ennek az elemnek általában az <INPUT> és <TEXTAREA> tagok kellenek a

És most jön az altag:

<OPTION> (nincs lezáró tag)

<OL> (van lezáró tag)

És most az altagok vagyis altag:D

<LI> (nincs lezáró tag)

<LH> (nincs lezáró tag)

<UL> (van lezáró tag)

És most az altagok vagyis altag:

Ennek az <OL> taggal megeggyezőek az altagjai.

<MENU> és <DIR> (van lezáró tag)

<FAMESET> (van lezáró tag)

<OBJECT> (van lezáró tag)

Adobe Flash fájlok beépítése:

<PARAM> (nincs lezáró tag)

<EMBED> (van lezáró tag)

Windows Media Player beépítés:

<PARAM> (nincs lezáró tag)

<B></B> - A köztes szöveg félkövér lesz.

<U></U> - A köztes szöveg aláhúzott lesz.

<I></I> - A köztes szöveg dőltbetűs lesz.

<S></S> - A köztes szöveg áthúzott lesz.

<SUB></SUB> - A köztes szöveg alsóindexes lesz.