HTML alapjai

Transcript HTML alapjai

A HTML alapjai
Készítette:
Havlik Barnabás
Forrás:
http://progkor.inf.elte.hu/html/alapok.htm
http://www.kovats-karcag.sulinet.hu/elokeszito/informatika_tananyagok.html
HTML
•
•
•
•
•
•
A HTML (angolul: HyperText Markup Language=hiperszöveges
jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez
fejlesztettek ki
Szöveget, képeket, nyomógombokat, hipertextes hivatkozásokat
(azaz linkeket) tartalmazhat
Jegyzettömbbel, vagy karakteres szövegszerkesztővel is
szerkeszthető
Fájlkiterjesztése: *.htm, vagy *.html
Platform független
A formázási műveleteket is szövegesen írja le
•
Felépítése viszonylag egyszerű: két részből áll-> fej, test.
•
Az egyes egységek neveit, valamint a formázási utasításokat
relációjelek közé tesszük. Ezeket TAG-eknek nevezzük.
•
A TAG-ek többségét le kell zárni, ezt a / jellel jelöljük.
<HTML>
<HEAD>
<TITLE> Fejléc! </TITLE>
</HEAD>
<BODY>
.
Ez már maga a szöveg.
.
</BODY>
</HTML>
Szövegformázás
•
•
•
•
•
•
•
•
A „BODY” részbe írjuk a szövegünket. Ezen belül formázunk a
szöveg közben.
Az adott parancsot „<” és „>” jel közé írjuk szövegen belül.
Ha nem intézkedünk arról, hol legyen új sor kezdés, akkor a
böngésző annyi szöveget tesz egy sorba, amennyit bír, és
szóhatáron kezd új sort. Ha feltétlen új sort akarunk kezdeni
azt a paranccsal tehetjük meg. paranccsal új
bekezdést kezdhetünk.
A betűket is különböző paranccsal állíthatjuk be:
félkövér: félkövér
dőlt: dőlt
aláhúzott: aláhúzott
villogó: <BLINK>villogó</BLINK>
Betűméret & szín
"FONT" paranccsal: betűméretet vagy betűszínt állíthatunk be. 1-től
indul. =)
Pl: 3as méret
27-es
betűméret
Színeket: színkóddal vagy angol elnevezéssel. Az RGB (Red=piros,
Green=zöld, Blue=kék) kód 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).
Pl: kisautó ez a piros.
fenyőfa zöld
Balaton kék.
Ezek kombinációjából jön össze az a rengeteg szín. =) (számokat is
írhatunk a parancsba, nem csak az abc első 6 betűjét!)
Link beszúrás
• Az un. „A” paranccsal ágyazhatunk linket a szövegunkbe, eképpen:
<A HREF=weboldal.htm>Saját weboldalunk</A>
Ha az éppen mutatott html lappal azonos directoryban levő, "lapok"
nevű aldirectoryban lenne az „idojaras.htm" nevű fájl, akkor
HREF=weboldal/idojaras.htm lenne a hivatkozás.
• Web-es linket eképpen tudunk beágyazni
<A HREF= http://origo.hu> Origo </A>
Ez így néz ki: Origo
A lényeg a „http://”-en van.
Kép beszúrása
Az „ALIGN=left” vagy „ALIGN=right” paranccsal eldönhetjük hogy
jobbra vagy balra kerüljön a kép.
A „HSPACE=‘’ ill ,,VSPACE=‘’ kóddal a kép alatti illetve feletti üres
részt adhatjuk meg képpontban.
A "HEIGHT=" ill. "WIDTH=„-el a kép méretét adhatjuk meg szintén
képpontban. (amennyiben nem az eredeti méretet akarjuk
alkalmazni)
Pl: <IMG SRC=„saját kép.jpg" ALIGN=left HSPACE=10
VSPACE=10> (balra igazított kép, alatta felette
10képpont távolság.)
Fontos! < > jelet nem teszünk külön külön minden parancs elé/mögé!
Felsorolás
Felsorolást az alábbi parancsokkal írhatunk:
<UL>
<LI>első
<LI>második
<LI>harmadik bekezdés.
</UL>
Ez így fog kinézni:
• első
• második
• harmadik bekezdés.
Többszintes felsorolás
Szintén különböző paranccsal tudunk többszintes felsorolást
alkalmazni. Ezt a feljebb említett <UL> után írjuk.
Pl: <UL TYPE=round>
<LI> Ázsia
<ul type=square>
<li> Japán>
</ul>
Ez így fog kinézni:
• Ázsia
 Japán
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.
Köszönöm a figyelmet!
->További html szerkesztés segédlet:
http://progkor.inf.elte.hu/html/alapok.htm