Artifakt

Belépési pont

Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 
Menü
 
Társoldalam

Kata oldala

 
Ahonnan mindez elindúlt

Az alapkövem

 

Vélemények

 

Idő

 

Artifakt help

 

Scriptek



 
Dalok és Zenék

 

Inusyaha dalok



 

Florencia-s dalok

 
Gondolatok az oldalról


 

Horoszkóp

 



Kínai Horoszkóp



 

Még több játék:)

 

Intim szféra

 

Látogatások

Indulás: 2005-08-19
 

Háát-ha gondolod...

 
A html-ről


Segédlet a HTML nyelv megismeréséhez

Alapfogalmak:

A HTML dokumentum
Egy egyszerû szövegfájl,
amit bármilyen szövegszerkesztõ programmal meg tudunk nyitni.
Tartalmazhat szöveget, képeket,
hivatkozásokat táblázatokat és sok egyéb összetevõt.
A fájlban található utasításokat a böngészõprogram hajtja végre,
nincs szükség -általában- semmiféle külsõ programra se.

1

Az állományokról
A HTML dokumentumban számos olyan elemet használhatunk,
melyeknél egy másik állományra hivatkozunk
(pl.: Képek, letölthetõ fájlok, stb.), vagyis használjuk azt.
Ilyen esetben mindig meg kell határozni a böngészõ számára,
hogy az adott elem hol található a számítógépen, hiszen
azzal csak így képes dolgozni.
Ezt a mûveletet nevezzük útvonal megadásnak.
Kétfajta útvonal megadásról beszélhetünk:
- Abszolút (Teljes megadás) ;
- Relatív (A merevlemez valamely helyéhez képest adjuk meg)

Abszolút útvonal megadás: A használandó állomány helyét pontosan meghatározzuk úgy,
hogy az adott merevlemez gyökérkönyvtárából indulunk ki
(pl.: "C:\Dokumentumok\Kepek\nyitokep.jpg" , "D:\Web\Letoltesek\jatek.rar" , stb.).
Ezt a megadási módot merevsége miatt inkább kerüljük, ha lehet.

Relatív útvonal megadás: Ennél a megadási módnál ahhoz a webfájlhoz képest
adjuk meg az állomány helyét, amibõl
arra hivatkozunk (pl.: "nyitokep.jpg" ,"Letoltesek\jatek.rar" , stb.).

1

A TAG-ek fogalma
A HTML nyelv úgynevezett TAG-ekbõl (ejtsd:teg) épül fel,
amely a HTML nyelv egy-egy elemére utal.
(Ezek felfoghatók tulajdonképpen utasításoknak is)

-Egyszerû TAG elem: "<"TAG">", vagyis:
"<"+"TAG elem neve"+">" (Például: ,
, stb.)
-Beállítható TAG elem:"<"TAG"+tulajdonságok+">",
ahol a tulajdonságok az adott TAG elemre vonatkozó beállítási lehetõségeket
jelentik.(Például: A TAG,
amivel formázott szöveget készíthetünk.)

Többségében olyan TAG elemekkel találkozhatunk,
amik rendelkeznek nyitó és záró elemmel is,
és a közrefogott szövegen
érvényesül az adott TAG hatása.
Ilyen például a -páros,
ami az egész webfájlunkat fogja közre.
(?: Látható, hogy a záró TAG elem abban különbözik nyitó párjától,
hogy "/" jellel kezdõdik.)
Emellett léteznek olyan elemek is,
melyek nem rendelkeznek záró elemmel.(Ilyen például a
soremelõ TAG)

1

Színek használata
A HTML nyelvben a színértéket kétféleképpen adhatjuk meg:
- Angol megfelelõjével, a Color="szín" formában, ahol a szín értékei a következõk lehetnek:


- Egy hexadecimális (16-os számrendszer-beli) érték segítségével,
melynél saját színeket keverhetünk ki.
Egy szín három alapszínbõl,
a Red- piros, a Green- zöld és a Blue- kék színbõl épül fel.
Mindhárom összetevõ értéke 0-255
között lehet, attól függõen,
hogy az adott színrész milyen mértékben befolyásolja a kikeverendõ színt.
(Pl. Ha Red=255; Green=0, Blue=0 értékeket vesz fel,
akkor a színtiszta piros színt kapjuk értékül.)
A HTML nyelvben az egyes színek értéket
(pl. Red) nem 0-255 alakban kell megadni, hanem e tartomány 16-os számrendszerbeli
megfelelõjét kell venni,
tehát a 00-FF tartományt
(ahol 00- a 0 ,az FF pedig a 255 hexadecimális megfelelõje), így a kapott színérték
egy 6 számjegyû színkód lesz, hiszen három alapszínünk van.


Aranyszabályok, jótanácsok
- A böngészõk nem mutatnak egynél több,
egymás mellett lévõ szóközt (Megoldás)
- Ajánlatos a webdokumentumjaikat mindig ".html" kiterjesztéssel menteni.
(A másik, ".htm" kiterjesztést a régebbi operációs rendszerek
(pl. Microsoft Windows 3.1) használták.)
- Amennnyiben olyan TAG-ot használunk,
amelynél több tulajdonságot állíthatunk be,
akkor az egyes tulajdonságokat szóköz
billentyûvel (SPACE) kell elválasztanunk.(például: Font, Img elemek)
- A HTML nyelvben mindig az a formázási beállítás érvényesül,
ami a legközelebb van a formázandó elemhez.
Tételezzük fel egy példa kedvéért,
hogy egy táblázatnak meghatároztuk a szövegszínét stílus segítségével.
Átmenetileg azonban ezt felülírhatjuk,
ha például egy cellában található szöveget
TAG közé teszünk, vagy
a cella nyitó tagjában (td) hivatkozunk egy másik stílusra
(például: ).

1

Egy HTML oldal felépítése:

Egy webfájlt HTML TAG-el kell kezdeni, így tudatjuk a böngészõvel, hogy a fájl webfájl

Fejléc nyitó TAG

Fejléc záró TAG
Dokumentum törzsének nyitó TAG-je,
ahol néhány dokumentumra vonatkozó beállításokat is megadhatunk.
Dokumentum törzsének záró TAG-je

A webdokumentum végének jelzésére szolgáló záró TAG

A fejlécben megadható fõbb tulajdonságok:

Az a szöveg,
ami a böngészõ ablakának címsorában megjelenik


A dokumentumban használható stílusok létrehozása


A webfájl nyelvének megadása a böngészõ számára

A BODY TAG beállítási lehetõségei

BgColor="színérték" A webfájl háttérszínét határozza meg

BackGround="képfájl" A webfájl háttere nem egy színérték lesz,
hanem a megadott képfájl

Text="színérték" A dokumentum alap szövegszíne.
(? A - TAG-el átmenetileg felülírhatjuk)

Link="színérték" A hivatkozások szövegszíne. (De pl. - II -)

VLink="színérték"
A meglátogatott (már rákattintottunk) hivatkozások szövegszíne. (De pl. -II-)

Link="színérték"
Az éppen kiválasztott hivatkozás szövegszíne. (De pl. - II -)

Megjelenést befolyásoló elemek

Mindre jellemzõ, hogy a begépelt szövegekre fejtik ki hatásukat


Sortörés elhelyezésre.
A
elem után a szöveg a következõ sor elején folytatódik


"szöveg"
A "szöveg" a böngészõben ugyan úgy jelenik meg,
mint a HTML kódban (pl.soremelések,szóközök)

  Törhetetlen szóköz,
egymás mellett több szóköz is látszódni fog böngészõnkben

"abc" Törhetetlen sorok.
A közrezárt sorokat a böngészõ nem törheti meg sortörésekkel (ha túl hosszú)

Elemek igazítása

Nyitó- és záró elemmel is rendekeznek, hatásuk nem csak a írott szövegre,
hanem számos egyéb HTML elemre is kiterjed,
addíg amíg azt egy másik igazítási mód felül nem írja,
vagy a lezáró TAG (

) nem hatástalanítja


HTML elemek: A HTML elemeket balra igazítja


HTML elemek: A HTML elemeket jobbre igazítja


HTML elemek: A HTML elemeket középre igazítja

Ezen kívûl létezik egy soremelés nélküli középre igazítási mód is:


"szöveg"
:
Középre igazítja az elemeket a
TAG hatása nélkül

Szöveg stílusok

Közös jellemzõjük, hogy nyitó és záró elemekkel is rendekeznek,
valamint egymásra épûlõen is használhatjuk õket

"szöveg" : B - Bold) E TAG között a szöveg félkövér stílusú lesz.

"szöveg" : I - Italic) A közrezárt szöveg dõlt lesz.

"szöveg" : U - Underline) A közrezárt szöveg aláhúzott lesz.

"szöveg" : A közrezárt szöveg áthúzott lesz.

Egyszerû szöveg formázó eszközök

"szöveg" Alsó index lesz a közrezárt szöveg.
(Hasznos például képleteknél az indexek jelölésére)

"szöveg" A szöveg felsõ indexként fog látszani( - II - )

(? A TAG-ek utolsó betûjének "hasa" jellemzi az index helyét.
P-Felsõ index; b-alsó index)

"szöveg" Megnagyobbított betûket eredményez

"szöveg" Összenyomott betûket eredményez

"szöveg" Fejléc. A 'szam' értéke 1-6ig lehet,
ahol 1-a legnagyobb, 6-a legkisebb betûnagyság

"szöveg" Villogó szöveg.
Figyelem! Csak Netscape böngészõben mûködik !

A Marquee TAG

elem

Elemmozgatás. Figyelem!Csak Internet Explorerben mûködik jól!

A tulajdonságokat nem közelezõ megadni.
Csak akkor kell, ha a szabványos beállításoktól eltérõ értékeket szeretnénk.)

A mozgatást a következõ tulajdonsággal szabályozhatjuk

Direction : A mozgás irányát határozza meg.

Direction="Left" Jobbról balra mozgás

Direction="Right" Balról jobbra mozgás

Behavior : Itt adhatjuk meg, hogy mi történjen akkor,
amikor elértük a mozgási tartomány szélét

Behavior="Slide" Amint elérte a mozgó szöveg a szélesség értéket,
megáll (Beúszás)

Behavior="Scroll" Amint elérte a mozgó szöveg a szélesség értéket,
újra kezdi a mozgást (Fényújság)

Behavior="Alternate" Amint elérte a mozgó szöveg a szélesség értéket,
irányt vált (Ide-oda mozgás)

ScrollDelay : A mozgási sebességet határozza meg

ScrollDelay="számérték" A számérték egy konkrét szám

ScrollMount : Lépésszám megadása. Azt jelenti,
hogy mekkora egységgel mozgatunk

ScrollMount="számérték" A számérték egy konkrét szám

Width : Azt határozza meg, hogy a mozgás milyen széles tartományban történjék

Width="számérték" Az számérték lehet konkrét szám,
vagy a gazdaterület egy százalékértéke

Height : Megadja, hogy a mozgatás milyen magas tartományban történjék

Height="számérték" Az számérték lehet konkrét szám,
vagy a gazdaterület egy százalékértéke

(?: Az utóbbi két értékbõl kiderül,
hogy a mozgás egy téglalapnak megfelelõ területen megy végbe)

A Font TAG

szöveg Formázott szöveg készítése

A szöveg kinézetét az alábbi tulajdonsággal állíthatjuk be

Face : A betûtípus megadása. Ajánlatos,
hogy ellenõrizzük több böngészõben is, a kinézetét!

Face="betûtípus" A betûtípus egy,
a böngészõ által támogatott típus (Például: 'Arial')

Color : A szöveg színe. Lehet egy szín angol megfelelõje, vagy általunk kikevert érték

Color="szín" A szín 18 alapszín lehet, angolul. A kód pedig egy hexadecimális érték

Size : A betûk mérete. Ha nem adjuk meg, akkor a böngészõ az alap betûnagyságot használja

Size="számérték" Ahol a számérték 1-7 közötti tartományban lehet,
ahol 1 a legkisebb, 7 a legnagyobb méret

Stílusok használata

A stílusokat a webfájl HEAD részében kell megadni.


A 'nev' a stílus neve, amely kétféle típusú lehet:
Egy HTML elemre vonatkozó. például:


(?: Itt a H1-es méretû fejlécre vonatkozó stíluselemeket adhatjuk meg)

Általános. például:


(?: Itt egy olyan stílust adtuk meg,
amire a Class='stilusnev' módon hivatkozhatunk, bármely stílust támogató HTML elemben)

Látható, hogy a beállítandó stílus-tulajdonságokat pontosvesszõvel(;) kell elválasztani egymástól
Az elsõ esetben egy HTML TAG stílusát változtattuk meg úgy, hogy a 'nev'-hez egy TAGnevet írtunk.
A második esetben egy saját, általános célû stílust készítünk, amit bármely olyan HTML elem nyitó TAG-jában elhelyezhetünk,
ahol ennek hatása érvényesülhet. (Pl. ... , ...)
Általános stílus megadása esetén, a stílusnév elé pontot kell elhelyeznünk. (Példánkban: .stilusnev)

Nézzük a megadható stíluselemeket kategóriájuk szerint csoportosítva

Szöveg megadása

text-align : A szöveg víszintes igazítása

text-align:left Balra igazítás

text-align:center Középre igazítás

text-align:right Jobbra igazítás

text-align:justify Sorkizárás Csak Netscape 6, Internet Explorer 6, vagy újjabb böngészõkben

vertical-align A szöveg függõleges igazítása

vertical-align:baseline Alapvonal (Normál magasság)

vertical-align:sub Alapvonal alá

vertical-align:super Alapvonal fölé

vertical-align:top Felüre

vertical-align:middle Középre

vertical-align:bottom Alura

vertical-align:text-top A szöveg tetejéhez

vertical-align:text-bottom A szöveg aljához

text-decoration Vízszintes vonalak elhelyezése a szövegben, illetve villogó szöveg készítése

text-decoration:none Nincs semmi sem. Ez az alapértelmezés

text-decoration:underline Aláhúzott szöveg

text-decoration:overline A szöveg fölé húzott

text-decoration:line-through Áthúzott szöveg

text-decoration:blink Villogó szöveg Csak Netscape 4-es böngészõben használható

text-transform Kis-, és nagybetûk használatát teszi lehetõvé

text-transform:capitalize Az összes szó kezdõbetûjét nagybetûre cseréli

text-transform:uppercase Az összes betût nagybetûsre alakítja

text-transform:lowercase Az összes betût kisbetûsre alakítja

text-indent A bekezdések és más elemek behúzásának mértékét szabályozhatjuk

text-indent:"számérték" A számérték egy konkét szám

letter-spacing A betûk közötti távolságot állíthatjuk

letter-spacing:"számérték" A számérték egy konkét szám

line-height A sor eleje és a következõ sor teteje közti távolság megadása

line-height:"számérték" A számérték egy konkét szám

Betûkészletek megadása

font-family A betûtípus megadása. Ajánlatos, hogy ellenõrizzük több böngészõben is, a kinézetét!

font-family:"betûtípus" Biztosan elérhetõ betûtípusok: 'Serif', 'Sans-serif', 'Cursive', 'Fantasy', 'Monospace'

font-size A betûk méretét határozza meg

font-size:"szám+mértékegység" Lásd a Stílusok mértékegysége résznél

font-style A betûstílus megadása

font-style:normal Normál kinézetû

font-style:italic Dõlt

font-style:oblique Ferde

font-variant Kiskapitális betûk használata

font-variant:normal A kisbetûk a hagyományos módon jelennek meg

font-variant:small-caps A kisbetûk, kisméretû nagybetûkként jelennek meg (kiskapitálisság

font-weight A szöveg vastagságát határozza meg

font-weight:normal Hagyományos megjelenés

font-weight:bold Félkövér beállítás

Színek és háttérképek megadása

color A szövegszín beállítása

color:"szín" Lehet egy szín angol megfelelõje, vagy általunk kikevert érték (A színek)

background-color Az elem hátterének színét határozza meg

background-color:"szín" Lehet egy szín angol megfelelõje, vagy általunk kikevert érték (A színek)

background-image Az elem hátterének kívánt kép megadása

background-image:"elérési út" Az elérési út mutatja meg, hogy hol található a kép a számítógépen

background-repeat Itt adható meg, hogy a háttérkép ismétlõdjön-e (mozaik) vagy sem

background-repeat:"repeat" Ismétlõdik, ha a kép kisebb,
mint az elem hátterének felülete

background-repeat:"repeat-x" Csak vízszintesen ismétlõdik

background-repeat:"repeat-y" Csak függõlegesen ismétlõdik

background-repeat:"no-repeat" Csak egy példányban mutatja a háttérképet,
nem ismétli

background-attachment Itt állíthatjuk be,
hogy a dokumentum görgetésekor a háttérképet is görgessük-e

background-attachment:fixed A háttérkép mozdulatlan marad,
miközben a webdokumentumot görgetjük

background-attachment:scroll A háttérkép a webdokumentummal együtt mozog görgetéskor

background-position A háttérkép helyzetét állíthatjuk be

Margók és keretek
Ezen tulajdonságok a margók, keretek,
valamint a dokumentumban szereplõ elemek magasságát és szélességét állítják be

margin Az dokumentum mind a négy oldalán található margó egyszerre állíthatjuk be

margin:"számérték" A számérték egy konkrét szám

margin-left Az dokumentum bal oldali margóját állítja be

margin-left:"számérték" A számérték egy konkrét szám

margin-right A jobb oldali margót állítja be

margin-right:"számérték" A számérték egy konkrét szám

margin-top A felsõ margót állítja be

margin-top:"számérték" A számérték egy konkrét szám

margin-bottom Az alsó margót állítja be

margin-bottom:"számérték" A számérték egy konkrét szám

width Egy HTML elem (például egy kép) szélességét adja meg

width:"számérték" A számérték egy konkrét szám

float Egy HTML elem szöveggel történõ körbefuttatásának lehetõsége
(például egy képnél)

clear Egy HTML elem szöveggel történõ körbefuttatását
ezzel tudjuk lezárni

Stílusok mértékegysége

pt Pont. A betûkészletek szabványos mértékegysége,
mely a monitorral van összhangban (például: 12pt)

px Képpontnyi méretezést tesz lehetõvé. Hasznos pl. számológépeknél,
ahol ez a legkisebb egység (például: 20px)

% A gazdterület egy százalékértéke (például: 200%)

Megjegyzések elhelyezése a kódban

A "zárójelek" közötti kódot,
a böngészõ figyelmen kívûl hagyja

A böngészõk a elemek közötti rész nem veszik figyelembe.
Ez jól jöhet magyarázó szövegként, vagy éppen
hibakeresésnél, ahol a problémát úgy is megtalálhatjuk,
hogy egy-egy kódrészt átmenetileg "kiszedünk

Hivatkozások használata

HTML elemek A HTML elemre kattintva
egy megadott helyre illetve fájlra ugrunk

A hivatkozás viselkedését befolyásoló tulajdonságok:

Href Megadja, hogy a hivatkozás hova mutat, hova lépünk ha rákattintunk

Href="webcím" A webcím "http://"-el kezdõdik, és egy Internetes oldalra,
vagy fájlra hivatkozik

(Ha a webcím nem egy webdokumentum állomány (pl. jatek.rar),
akkor ez a hivatkozás annak a fájlnak a letöltését eredményezi)

Href="horgonynév" Egy megadott horgonyra ugrik.
(Ha az az aktuális webfájlban van, akkor "#" jellel kezdõdik)

Target Megadja, hogy a böngészõ melyik ablakban nyissa meg ,
a hivatkozott címen található állományt

Target="_self" Abban az ablakban, ahonnan hivatkoztak az állományra

Target="_blank" Egy új ablakban nyitja meg

Target="_parent" A szülõablakban nyitja meg

Képek használata

 Kép elhelyezése a webfájlban, megadott tulajdonságok szerint

A képet az alábbi tulajdonságok határozzák meg:

Src Megadja, hogy hol található a megjelenített kép a merevlemezen

Src="elérési út" Az elérési út lehet abszolút, vagy a befogadó webfájlhoz képest relatív (Az állományokról)

Width A kép szélességét határozza meg

Width="számérték" A számérték egy konkrét szám

Height A kép magasságát határozza meg

Height="számérték" A számérték egy konkrét szám

Border A kép körül keretet lehet kialakítani

Border="számérték" A számérték egy konkrét szám, mely megadja a keret vastagságát

Alt Itt adhatjuk meg, hogy milyen szöveg jelenjen meg az egér mellett, amikor azt a kép fölé húzzuk

Alt="szöveg" Ahol a szöveg a megjelenõ megjegyzés

Usemap Ha a képet képtérképként kívánjuk használni, akkor itt lehet megadni a tulajdonos térkép nevét

Usemap="térképnév" A térképnév a MAP Tag által meghatározott térkép neve

Longdesc Az Src-ben megadott kép letöltéséig egy kisebb méretû (felbontású) képet jeleníthetünk meg

Longdesc="elérési út" Az a kép helye, amit a böngészõ csak ideinglenesen (amíg az Srcben megadott töltõdik) mutat

Táblázatok használata

BackGround Vagy a táblázat hátterének egy képállományt is megadhatunk

BackGround="elérési út" Az állomány elérési útja

(?: Egy táblázatnak vagy csak háttérszínt vagy csak háttérként megadott képállományt adhatunk meg,
mindkettõt nem lehet)


Width A táblázat szélességét határozza meg

Width="számérték" A számérték lehet konkrét, vagy a gazdaterület egy százalékértéke

Height A táblázat magasságát határozza meg

Height="számérték" A számérték lehet konkrét, vagy a gazdaterület egy százalékértéke

Border A táblázat celláinak keretvastagságát határozza meg

Border="számérték" A számérték egy konkrét szám (Pl.: Ha Border="0", akkor nincsenek rácsvonalak)

NoWrap Ez a kapcsoló a a cellák szövegének tördelését tiltja le

CellPadding Meghatározza a cellák tartalma és a cellák kerete közötti távolságot

CellPadding="számérték" A számérték egy konkrét szám

CellSpacing Segítségével a cellák egymástól való távolságát állíthatjuk be

CellSpacing="számérték" A számérték egy konkrét szám

A táblázat sorai:

 
cellák
Új sort a  elem beírásával tudunk kezdeni

Nézzük a táblázat sorait meghatározó tulajdonságokat

Align A sort tartalmazó cellák vízszintes igazítását állíthatjuk be ezzel

Align="Left" A cellaelemeket balra igazítja

Align="Center" A cellaelemeket középre igazítja

Align="Right" A cellaelemeket jobbra igazítja

vAlign A sort tartalmazó cellák függõleges igazítását állíthatjuk be ezzel

vAlign="Top" A cellaelemeket a cella tetejéhez igazítja

vAlign="Center" A cellaelemeket függõlegesen középre igazítja

vAlign="Bottom" A cellaelemeket a cella aljához igazítja

(?: Mindkét igazítási módot együttesen is használhatjuk)

A táblázat cellái:

 HTML elem Új cellát a  elem beírásával nyithatunk

Következzenek a cella tulajdonságok:

Align , vAlign Az igazítási módok ugyanazok, mint a sornál megismertek

Rowspan Sorok egyesítése

Rowspan="számérték" Az aktuális sortól a számértékben megadott sort nyit egybe

Colspan Cellák egyesítése

Colspan="számérték" Az aktuális cellától a számértékben megadott cellát nyit egybe

 


 
Linkek

Másik oldalam
Ibolya oldala
Pivi
Zrokky
Niki
Esty oldala
Colourstudio Planett
Egy ismim oldala

Társkereső portal
Portalszépítés felsőfokon!
Judít 51 portaldíszítős oldala

 

Társ linkek



 

Rólam



 

Letöltések




 

Apróságok

Untitled Document








 

Naptár

 

Poénok



 

Itt is játék van:)



 

 

Olvasmányok

 

Html suli

 

Jelszó védelem flashben




 

Igaz történetek








 

Stest


FlashButtons

 

Nyaa, mi van itt:)



 

Megítélés

Előítélet
Szerintetek elítélendő-e valaki csupán a zenei ízlése alapján?

Hát persze
Dehogy is
Részben
Nem tudom
Szavazás állása
Lezárt szavazások
 
Dumcsi:)



 
Méég dumcsi:)
 

Reklám