Html

572 views
442 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
572
On SlideShare
0
From Embeds
0
Number of Embeds
142
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

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

×