HTML (2)

HTML-KEELE �LEVAADE WWW (World Wide Web) ehk veebi poolt teenindatavad tekstid on spetsiaalses HTML -keeles (HyperText Markup Language) kirjutatud dokumendid - l�htetekstid (Source), mis sisaldavad HTML-keele koode. HTML-keele pea� lesandeks on kirjeldada teksti struktuuri nii, et spetsiaalne vaatlusprogramm e. brauser ( Netscape Navigator, Internet Explorer ) sellest aru saaks ja soovitud kujul ekraanile tooks. HTML-dokumente v�ib koostada: Kirjutada tekstiredaktori abil l�htetekst (koos HTML-koodidega). Soovitatav on kasutada Notepad-i. Tekstiredaktoritel (MS Word) on olemas HTML-konverterid, mis v�imaldavad dokumente HTML-kujul salvestada (Save As HTML ...). Veebiredaktorid (n�iteks Netscape Composer, Microsoft Frontpage) v�imaldavad HTML-tekstide tegemist ilma HTML-keele koode tundmata. HTML-koodide tundmine on ka redaktorite ja konverterite kasutamisel siiski vajalik, kuna see teeb v�imalike vigade parandamise tunduvalt lihtsamaks. HTML-keele elementideks on koodid (tag), mille alusel toimub teksti t��tlemine. Seejuures tuleb k�ik koodid kirjutada erim�rkide vahele. Osa koode on paariskoodid, millest esimene m��rab m�jupiirkonna alguse, teine aga selle l�pu. Lisaks sellele v�ib m�nedes koodides n�idata veel �he v�i mitu t�psustajat. T�psustajad eraldatakse koodis t�hikutega . �ldiselt tuleb silmas pidada j�rgmist: HTML-koodide kirjutamiseks v�ib kasutada nii suur- kui ka v�iket�hti. Ridade pikkus l�htetekstis pole oluline, sest brauser moodustab ekraanile ilmuvad read niikuinii ise. S�nu ei poolitata (read j��vad paremale rajastamata). S�nade vahele j�etakse alati �ks t�hik, ridade vahele aga �limalt �ks reavahe. Suurema hulga reavahesid saab organiseerida reavahetuskoodi ja t�hikukoodi ( ) korduva kasutamise teel. Taandridu (rea ees olevaid t�hikuid) ei arvestata. Suurema hulga t�hikuid s�nade vahele saab kasutades vaheldumisi t�hikut ja t�hikukoodi ( ). Kuna erinevad brauserid n�itavad HTML- tekste erinevalt, siis tuleks laiemaks kasutamiseks ette n�htud tekstid testida mitme erineva s�steemi abil. HTML-dokumendile saab lisada seletavaid tekste ehk kommentaare, mis algavad h��um�rgiga ja j�etakse brauseri poolt t��tlemata ning ei ilmu ka ekraanile: Viitamisel (lingid) j�lgi alati suur- ja v�iket�htede kasutamist! �ra kasuta failinimedes kunagi t�pit�hti - ����. Kasuta alati �hesugust failinime laiendit - kas htm v�i html. HTML-tekstide kirjutamisel v�ib v�tta eeskuju v�rgus leiduvatest h�stiteostatud dokumentidest. HTML-l�htekoodide uurimist v�imaldab korraldus View Source brauseri View-men��s. Kodulehek�lje avafail peab olema index.htm v�i index.html HTML-DOKUMENDI L�HTETEKSTI LOOMINE JA SALVESTAMINE Ava tekstiredaktor Notepad. Kirjuta sinna j� rgmised koodid: Siia kirjuta tiitel , mis ilmub brauseriakna sinisele �laservale Siia vahele kirjuta dokumendi sisu. Salvesta loodud dokument HTML-dokumendina. Selleks vali File-men��st korraldus Save as ... avanenud dialoogiaknas leia kaust, kuhu salvestad kirjuta reale File name faili nimi koos laiendiga .htm v�i .html real Save as type vali All files (*.*) vajuta nupule Save N��d v�id brauseriga (Internet Explorer v�i Netscape) oma faili uuesti avada. (File => Open => Browse ...) V�RVIDE KASUTAMINE V�rvi n�itamiseks kasutatakse HTML-keeles nn RGB-koodi ehk v�rvikoodi, mis koosneb m�rgist # ja sellele j�rgnevatest 16nendnumbritest (0, 1, 2, ... 9, A, B, C, D, E, F). Nimetus RGB-kood tuleneb p�hiv�rvide (punane, roheline ja sinine) ingliskeelsetest nimedest - Red, Green ja Blue. Iga p�hiv�rvi n�itamiseks kasutatakse kahekohalist 16nendarvu. Seega on v�rvikoodi �ldkuju j�rgmine: #RRGGBB. Iga konkreetse v�rvi kood on tegelikult p�hiv�rvide koodide kombinatsioon, kusjuure 00 m�rgib komponentv�rvi n�rgimat kontsentratsiooni (tegelikult selle puudumist), FF aga suurimat . Seega on komponentv�rvide endi koodid vastavalt #FF0000, #00FF00 ja #0000FF. Valge v�rvi kood on #FFFFFF, musta v�rvi kood aga #000000. Igasugused hallid toonid on v�ljendatavad �hesuguste numbritega #FFFFFF ja #000000 vahel - n�iteks #555555. Lisaks arvulisele v�rvikoodile on v� imalik kasutada ka s�nalist - vastava v�rvi ingliskeelset nimetust: white - valge, black - must, red - punane, green - roheline, blue - sinine, yellow - kollane, green - roheline jne. Mitmest s�nast koosnevad v�rvikoodid tuleb jutum�rkidesse panna. Vt. v�rvikoode HTML-DOKUMENDI STRUKTUUR Paariskood ... teatab , et tegemist on HTML-tekstiga. Kogu HTML-dokument peab asuma selle paariskoodi vahel. HTML-dokumendi p�hiosadeks on p�is (...-osa) ja dokumendi sisu ehk tekst (...-osa). P�ises (...-osa) teatatakse �ldandmed teksti kohta. Kindlasti tuleb siin j�rgmise koodi abil n�idata dokumendi �ldpealkiri ehk tiitel: .Tiitel on brauseri akna �laosas n�htav kogu teksti vaatlemise aja. P�isele j�rgneb sisu- ehk ... -osa, mis sisaldab juba teksti enda. Sisu alustavas -koodis v�ib kasutada veel j�rgmisi t�psustajaid: BACKGROUND="pilt.gif" dokumendi taustapilt. Kasutada v�ib pildifaile laiendiga .jpg v�i . gif. BGCOLOR=RGB-kood v�i s�na dokumendi taustav�rv TEXT=RGB-kood v�i s�na teksti p�hiv�rv LINK =RGB-kood v�i s�na k�lastamata viitade v�rv VLINK=RGB-kood v�i s�na k�lastataud viitade v�rv ALINK=RGB-kood v�i s�na viida v�rv hiirekl�psu hetkel N�ide: TEKSTI KUJUNDAMINE Esimese taseme pealkiri k�ige suurem Kuuenda taseme pealkiri k�ige v�iksem Pealkirjade, teksti, piltide ja tabelite tsentreerimine : ... Tekst poolpaksuna , kursiivis , allakriipsutatuna , l�bikriipsutatuna v�i . Astendajad n ja indeksid n Teksti vilkumine: (T��tab ainult Netscape'-is) Teksti kujundamine paariskoodiga ... . T�psustajad: SIZE =n n - teksti suurus vahemikus 1 kuni 7 (vaikimisi n=3) COLOR =RGB-kood v�i s�na teksti v�rv FACE =shrift kirjapilt , n�iteks " Arial ", "Times New Roman ", "Helvetica", vms. Tuleb arvestada, et brauserid on v�imelised n�itama vaid arvutisse installeeritud shrifte. HTML ei aktsepteeri tekstiredaktorite abil tehtud rea- ja l�iguvahetusi. Nende n�itamiseks on HTML-keelel oma koodid. Reavahetuskoodi
alusel toimub harilik reavahetus, l�iguvahetuskoodi () korral j�etakse aga j�rgnev rida vabaks. Pealkirja j�rel l�iguvahetust n�idata pole tarvis, sest sinna j�etakst t�hi rida niikuinii. L�iguvahetuskoodi saab kasutada ka j�rgneva l�igu rajastamiseks (vaikimisi rajastatakse l�igud vasakule), kasutades t�psustajat (v�i CENTER ). Rajastada v�ib ka koodi abil. Tabulaatorina toimib paariskood .... Tekstiosi v�ib �ksteisest eraldada horisontaaljoone n�itamise teel. T�psustamiseks v�ib -koodis kasutada j�rgmisi v�imalusi: SIZE=n n - joone j�medus pikselites WIDTH =n v�i protsent n - joone pikkus pikselites v�i protsendina dokumendi laiusest ALIGN =left|right|center joone rajastamine (vasakule, paremale, keskele ) PILDID
URL teatab pildi (enamasti GIF- v�i JPG-t��pi faili) asukoha. Piltide asukoha teksti suhtes v�ib m��rata ALIGN-t�psustajaga. ALIGN= MIDDLE toimel paigutatakse pilt tekstirea keskele. ALIGN=TOP paigutab pildi � lemise serva tekstireaga samale tasemele (vaikimisi on pildi alumine serv tekstireaga samal tasemel). ALT-t�psustaja m��rab teksti, mis ilmub hiirega pildile liikumisel. N�iteks: VIIDAD (LINGID) Tekstisiseste viitade kasutamiseks tuleb k�igepealt anda nimed nendele tekstiosadele, millele tahetakse viidata. Selleks tuleb vastava tekstiosa algusesse lisada kood �ldkujuga Selliselt m�rgistatud kohale saab n��d viidata koodiga, mille �ldkuju on viitav tekst Teistele tekstidele viitamine on lihtne siis, kui need asuvad viitava tekstiga samas kaustas. Sellisel juhul tuleb n�idata vaid vastava viidatava faili nimi: viitav tekst Teksti (faili) mingile osale saab n��d viidata j�rgmisel viisil: viitav tekst �lal�eldut silmas pidades tuleks �he koosluse HTML-tekstid v� imaluse korral s� ilitada samas kaustas. Sellisel juhul �nnestub ka tekstikogumite �lekandmine paremini, sest tekstidevahelised viidad s�ilivad. Kui aga fail asub mingis alamkataloogis, siis tuleb viitamisel n�idata veel ka alamkataloogi nimi: viitav tekst �he taseme v�rra �lespoole viitavad 2 punkti: Alati ei saa aga teistele tekstidele viidata suhtelise tee abil - n�iteks siis, kui tekst asub teises serveris. Sellisel juhul tuleb viitamiseks kasutada koodi, mis sisaldab URL-i: viitav tekst e-posti aadress: viitav tekst TABELID Tabeli kasutamine pakub v�imalusi ka tekstiveergude vormistamiseks. Tabeli p�histruktuuri kirjeldamiseks saab kasutada j�rgmisi paariskoode: (tabel), (andmelahter), (pealkirjalahter rasvases kirjas) ja (tabelirea algus). K� ikidel nendel koodidel on aga veel mitmed t�psustajad. Kolme rea ja kolme veeruga tabeli saab j�rgmise kirjelduse abil: 1. veerg 2. veerg 1. rida lahter 1.1 lahter 1.2 2. rida lahter 2.1 lahter 2.2 Tulemus on selline: 1. veerg 2. veerg 1. rida Lahter 1.1 Lahter 1.2 2. rida Lahter 2.1 Lahter 2.2 -koodi t�psustajad: ALIGN=LEFT|CENTER|RIGHT paigutab tabeli ekraanil kas vasakule (vaikimisi), keskele v�i paremale. WIDTH=n v�i WIDTH=n% n - tabeli laius kas pikselites v�i protsendina akna laiuse suhtes. BORDER=n n - tabeli raami laius pikselites. CELLSPACING=n n - lahtritevaheline kaugus pikselites. CELLPADDING=n n - lahtri raami ja teksti vahele j�etav t�hi ruum pikselites. BGCOLOR=RGB-kood v�i s�na tabeli taustav�rv -koodi t�psustajad: ALIGN=LEFT|CENTER|RIGHT lahtrite sisu rajastamine vasakule (vaikimisi), keskele v�i paremale. VALIGN=TOP|MIDDLE|BOTTOM lahtrite sisu rajastamine �les, keskele v�i alla. BGCOLOR=RGB-kood v�i s�na tabelirea taustav�rv -koodi t�psustajad: NOWRAP t�histab reavahetuse lahtri sees ALIGN ja VALIGN samad, mis TR-koodis WIDTH=n v�i n% n - lahtri laius pikselites v�i protsendina tabeli laiuse suhtes. BGCOLOR=RGB-kood v�i s�na lahtri taustav�rv -koodis kehtivad eelmistele lisaks j�rgmised t�psustajad: ROWSPAN=n mitu tabelirida peab vastav lahter �hendama (vaikimisi ROWSPAN=1) COLSPAN=n mitu veergu peab vastav lahter �hendama (vaikimisi COLSPAN=1) BGCOLOR=RGB-kood v�i s�na pealkirjalahtri taustav�rv ERIM�RGID V�ljaspool Eestit loetava HTML-teksti kirjutamisel tuleks t�pit�hed asendada j�rgmisel viisil: � = ä � = Ä � = ö � = Ö � = ü � = Ü � = õ � = Õ t�hikukood   v�i   LOENDID Nummerdamata loend

• loendi 1. objekt
• loendi 2. objekt

T�psustaja TYPE= DISC v�i CIRCLE v�i SQUARE m��rab elementide eraldajaks kas t�pi, ringi v�i ruudu Nummerdatud loend

loendi 1. objekt

loendi 2. objekt T�psustaja TYPE=A|a|I|i|1 m��rab j�rjestamise kas suurt�htede (A), v�iket�htede (a), suurte rooma numbrite (I), v�ikeste roome numbrite (i) v�i siis (ka vaikimisi) araabia numbrite (1) abil. START=n v�imaldab nummerdamise algv�� rtuse n�itamist