html
TRANSCRIPT
HTMLHTML
HyperText Markup Language
Taimi Dreier
Pärnu Ülejõe Gümnaasium
HTML
on lihtne markeerimiskeel, mida kasutatakse platformist sõltumatu hyperteksti koostamiseks;
'is saab esitada või viidata uudiseid, elektronposti, dokumente või hüpermeediat: interaktiivseid menüüsid, graafikat, animatsioone, filme, teha päringuid andmebaasidest;
on kasutuses World Wide Web (WWW) võrgus alates 1990. aastast.
HTML elemendid
HTML-keele elementideks on tagid ehk koodid (tag), mille alusel toimub teksti töötlemine
Kõik koodid asuvad < ja > vahel ja kommentaarid asuvad <!-- ja --> vahel.
Elementide kehtivuse lõpetab märge, mis asub </ ja > vahel. Näiteks elemendi <B> kehtivuse lõpetab märge </B>.
Osasid märkeid, nagu näiteks <BR>, võib ka ilma lõpetava märketa kasutada
ÜLDINE KUJU
<HTML>
<HEAD> <TITLE>Lehekülje pealkiri </TITLE> </HEAD>
<BODY > Lehekülg ise …………………………….
</BODY>
</HTML>
HEAD
<HEAD>
<TITLE>Minu kodukas</TITLE>
<META NAME="keywords" CONTENT=”hea, parim, vaimustav">
<META NAME="Author" CONTENT=”minu nimi">
</HEAD>
R
puna-ne
G
roheline
B
sinine
VÄRVIDE KASUTAMINE
16 põhivärvi sõnaga # ja kuuekohaline numbrikombinatsioon # ja numbrid -tähed segamini RGB kood
- - - - - -
RGB 16 PÕHIVÄRVI KOODIDEGA
Black=“#000000” Green=“#008000” Silver=“#C0C0C0” Lime=“#00FF00” Gray=“#808080” Olive=“#808000” White=“#FFFFFF” Yellow=“#FFFF00“
Maroon=“#800000” Navy=“#000080” Red=“#FF0000” Blue=“#0000FF” purple=“#800080” Teal=“#008080” Fuchsia=“#FF00FF” Aqua=“#00FFFF”
BODY
<BODY BGCOLOR=“grey”>
<BODY BACKGROUND=”taust.jpg”>
<BODY LINK=“Red” VLINK=“Red” ALINK=“Red” BACKGROUND=“http://ylejoe.parnu.ee/tausta.gif”>
<BGCOLOR=”yellow" TEXT=”green" LINK=”blue" VLINK=”maroon" ALINK=”red">
<BGCOLOR="#FFFF80" TEXT="#2A3944" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">
PEALKIRJAD
<H1> 1. taseme pealkiri- kõige suurem </H1> <H2> 2. taseme pealkiri- alapealkiri </H2> <H6> 6. taseme pealkiri- tavalise teksti suurusega
</H6> <H2 ALIGN=center> 2. taseme pealkiri joondatud
keskele</H2> <H6 ALIGN=Right > 6. taseme pealkiri joondatud
paremasse serva </H6>
FONT COLOR
<FONT COLOR=”aqua”>meresinine tekstivärv </FONT >
<FONT COLOR="#000000">Musta värvi tekst </FONT>
<FONT COLOR="#ff00ff">Lillat värvi lause </FONT>
<FONT COLOR="#1A4828"> Mingi roheline vist </FONT>
FONT SIZE
<FONT SIZE=6>Suurusega 6 (vaikimisi on font
suurusega 2) </FONT>
<FONT SIZE=+2>See on kahe ühiku võrra suurem
tekst! (ju siis 4) </FONT>
<FONT SIZE=-1>See on ühe ühiku võrra väiksem
tekst! (järelikult 1) </FONT>
FONT FACE
<FONT FACE="arial”>Arial fondiga tekst </FONT >
<FONT FACE="Arial, Helvetica">…….... </FONT >
<FONT FACE="Times New Roman,Times">………...
</FONT >
<FONT FACE="Arial, Geneva, sans-serif" SIZE="1">
…….. </FONT >
MUUD FONDI STIILID
<B>Rõhutatud ehk rasvane kiriRõhutatud ehk rasvane kiri- bold</B> <I>kursiiv ehk kaldkiri-italic</I> <U>allajoonitud kiri- underline </U> <small>väike kiri </small>
<strong>tugev, nagu bold </strong> <TT> nagu kirjutusmasina tekst</TT> <SUB> ülaindeks </SUB> <SUP> alaindeks </SUP>
READ JA LÕIGUD
<BR> vahetab rea, lõiku ei vaheta (nagu SHIFT+ENTER Wordis)
<P> vahetab lõigu (nagu ENTER Wordis), lõikude vahel tühi rida
<center>See tekst on joondatud lehe keskel, ridade keskosad kohakuti</center>
<P align=right>vaheta lõik ja joonda järgnev paremasse serva
<blockquote> Kommenteeritud plokk, jätab kommentaari eest ja tagant rea vabaks. Kommentaar algab taandreaga.</blockquote>
ERIMÄRGID
Märkidel < ja > on HTMLis eritähendus, mistõttu neid sellistena tekstis kasutada ei saa. Tarbe korral tuleb nad tekstis näidata järgmisel viisil
< = < > = > & = & " = " § = §
® = ® © = © Kui HTML-teksti kirjutamisel pole kasutusel 8-bitine
märgistik, siis tuleb täpitähed asendada järgistega:
ä = ä Ä = Ä ö = ö Ö = Ö ü = ü Ü = Ü õ = õ Õ = Õ
LOENDID
<UL> annab märku, et hakkab loend <LI>esimese taseme loendi esimene asi, ees
tavaliselt täpike </LI> <LI> loendi teine asi </LI> <UL> hakkab loend uuesti, st järgmine tase <LI> teise taseme loendi esimene alapunkt </LI> <LI> teise taseme loendi teine alapunkt </LI> </UL>teine tase lõpeb <LI> esimese taseme loendi kolmas asi </LI> </UL>terve loend lõpeb
PILDID
<IMG SRC=“pilt.jpg”>orig.suuruses pilt kodukaustast
<IMG SRC=“URL”> lisab tekstile pildi antud asukohast
<IMG SRC=“pilt.jpg” BORDER=“1”> pilt raamiga 1p <IMG SRC=“pilt.jpg” ALIGN =right>pilt on paremas
servas ja tekst temal kõrval <IMG HSPACE=“50” SRC=“pilt.jpg” ALIGN =left>
pilt on vasakul pool ja mõlemal pool (vasakul ja paremal) jääb teksti ja pildi vahele 50 p vaba ruumi
<IMG VSPACE =“20” SRC=“pilt.jpg” ALIGN =right> pilt paremal, ülevalt ja alt 20 p vaba ruumi
<IMG SRC=“pilt.jpg” WIDTH=“113” HEIGHT=“85”> pildi suurus 113 X 85 pikselit
<IMG SRC=“pilt.jpg” WIDTH=“75%”> pildi suurus 75% originaalsuurusest
<IMG SRC=“pilt.jpg” ALT=“See on minu pilt”> hiirega pildi peale minnes näidatakse antud teksti või kui pilti ei laadita lehele näidatakse ainult teksti
<IMG LOWSRC=“kevhpilt.jpg” SRC=“pilt.jpg”> kõigepealt laaditakse kehva resolutsiooniga pilt kiireti ära ja siis kvaliteetne sinna peale
JOONED
<HR> reljeefne (varjuga) joon üle ekraani
<HR SIZE=“6”> joon paksusega 6 pikselit
<HR WIDTH=“50%”>joon poole lehe laiuses keskel
<HR NOSHADE WIDTH=“200” ALIGN =right >
joon pikkusega 200 pikselit lehe paremas servas
tekstivärviga, mitte reljeefne
LINGID
<A HREF=“URL”> link võrku antud aadressile </A> <A HREF=“asi.html”> link teisele lehele (failile) oma
kodukaustas </A> <A HREF=“#algus”> link sama lehe algusesse, kus on
märgitud koht algus</A> <A NAME=algus”> märgistab koha, kuhu saab viidata <A HREF=“mailto:[email protected]”> link avab
meilivahetusprogrammi (kui on arvutis konfitud) ja kirjutab To reale antud aadressi </A>
<A HREF=“pilt.jpg”>lingitakse originaalpildile </A>
TABELID
<TABLE WIDTH="90%" BORDER=0> tabel algab ja on lehel 90 % ulatuses, tal ei ole raami
<TR> tabeli rida algab <TD ALIGN=CENTER VALIGN=CENTER
WIDTH="260”> lahter algab ja tekst on nii horisontaalselt kui ka vertikaalselt keskel, lahtri laius on 260 punkti</TD>
<TD ALIGN=CENTER VALIGN=CENTER WIDTH="340”> see lahter on aga laiem veidi</TD>
</TR>rida lõppes </TABLE>tabel lõppes
<html><head><title>Teach to the Future</title></head><body background="images/rbkgdt.jpg"><table border="0" width="100%" cellpadding="5"> <tr> <td width="33%"></td> <td width="33%" valign="top" align="center"> <img border="0" src="images/hommikul_8_30pr.jpg“ width="480" height="360"></td> <td width="34%"></td> </tr> <tr> <td width="33%"></td> <td width="33%" valign="top" align="center"> <img border="0" src="images/Enel_12_30pr.jpg“ width="480“ height="360"></td> <td width="34%"></td> </tr></table></body></html>
Näidis tabeli kasutamise kohta:
LEHEL on tabel, mis koosneb 2 reast, igas reas 3 lahtrit, iga
rea keskmises lahtris pilt
RAAMID- FREIMID
<html> <head> <title>Lehe pealkiri</title> </head> <frameset cols="140,*" border="0"> <frame src="sisukord.html" name="sisukord">
140 p15%
85%
* p
<frameset rows="15%,85%"> <frame src="pealkiri.html" name="pealkiri"> <frame src="esileht.html" name="pohiraam"> </frameset> </frameset> <noframes> <a href="esileht.html">Raamideta variant</a><br> </noframes> </html>
Pealehe raami linkimine
<html> <head> </head> <body text="#000000" bgcolor="#FFFFFF" link="#000099"
vlink="#551A8B" alink="#FF0000" background="taust.gif"> <img SRC="logolind.gif" height=125 width=118> <br>
<b> <a href="lingid.html" target=pohiraam>Linke</a> </b> </body> </html>
LINKE
http://www.neti.ee/HTML.html Kain Kalju http://lepo.it.da.ut.ee/~ajaeger/html-juhend.html Andres Jääger
http://my.tele2.ee/vanavares/js/colcodes.htm
http://home.delfi.ee/~marc/WEB/ M.Roosalu
http://www.hot.ee/aasaru/10soovitust.htm Juhan Aasaru
http://www.neti.ee/cgi-in/teema/ARVUTID_JA_INTERNET/WWW/