Horisontaalsete eraldusjoonte lisamine interneti lehekülgedele.

Horisontaaljooni kasutatakse tihti interneti lehekülgedel teksti osadeks jaotamisel.

Ülesanne 1. Avame dokumendi ja salvestame selle uue nimega.

1. Käivitage programm Microsoft Word 97.
2. Avage töölaual olevast kaustast "word97html" dokument "uus.htm".
3. Salvestage dokument kausta "word97html" uue nimega: "tund-2.htm".
4. Avage dokument ka lehitseja abil.

Selleks, et lisada tekstile horisontaalse joone tuleb punktist Insert valida korraldus Horizontal Line… ilmub dialoogiaken Horizontal Line, milles on horisontaaljoonte võimalikud variandid. Kui toodud loend tundub ebapiisavana, siis võib valida veel horisontaaljooni klõpsates korraldusnupul More.

Ülesanne 2. Lisame oma dokumendile pealkirja ja eraldusjoone.

1. Trükkige dokumendi pealkirjaks: teksti vormindamine.
   
   
2. Vajutage sõrmisele "Enter" järgmisele reale üleminekuks.
   
   
3. Valige punktist Insert korraldus Horizontal Line….
   
   
4. Valige sobiv horisontaalriba ja klõpsake sellel hiirega.
   
   
5. Klõpsake korraldusnupul OK dialoogiakna Horizontal Line sulgemiseks.
   
   
6. Salvestage muudatused dokumendis "tund-2.htm" ja värskendage lehitseja kuva.

Kõik jooned dialoogiaknas Horizontal Line peale kõige ülemise on sisuliselt tavalised graafilised failid. Need jooned paigutatakse interneti dokumenti nagu tavalised sisestatud kujutised.

Ülesanne 3. HTML kood.

1. Valige punktist View korraldus HTML Source.
   
   
2. Kui te valisite kõige alumise joone dialoogiaknast Horizontal Line, siis on lisatud teie HTML koodi järgmine teek:
   
   <P ALIGN="CENTER"><IMG SRC="line9.gif" WIDTH=623 HEIGHT=11></P>
   
   
3. Samuti on teie töölaual olevasse kausta automaatselt kopeeritud graafiline fail "line9.gif". (veenduge selles)
   
   
4. Kui te aga valisite dialoogiaknast kõige ülemise joone, siis on teie HTML koodi lisatud juba tuttav horisontaalse eraldusjoone teek:
   
   <P ALIGN="CENTER"><HR></P>
   
   
5. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Horisontaalse eraldusjoone parameetreid võib muuta kui klõpsata sellel hiire parempoolset klahvi ja valida avanenud kontekstmenüüst korraldus Format Autoshape. Võimalik on muuta eraldusjoone pikkus, laiust, joondamisparameetrit horisontaalsuunas jne.

Ülesanne 4. Eraldusjoone parameetrite seadmine.

1. Lisage dokumenti dialoogiakna Horizontal Line kõige ülemine eraldusjoon.
   
   
2. Klõpsake oma dokumendis asuval eraldusjoonel hiire parempoolset klahvi.
   
   
3. Valige avanenud kontekstmenüüst korraldus Format AutoShape.
   
   
4. Avage dialoogiaknas Format AutoShape lipik Colors and Lines.
   
   Alajaotuses Line saab valida eraldusjoone värvi (Color:), joone laiust (Style:), katkendjoont (Dashed:) ja joone laiust punktides (Weight:).
   
   
5. Valige joone värviks punane ja laiuseks punktides valige 6 pt ja klõpsake korraldusnupul OK dialoogiakna sulgemiseks.
   
   
6. Salvestage muudatus ja värskendage lehitseja kuva.
   
   
7. Valige punktist View korraldus HTML Source.
   
   
8. Teie HTML koodis peaks olema lisatud teegile <HR> järgmised parameetrid:
   
   COLOR="#FF0000" SIZE="6".
   
   
9. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.
   
   
10. Avage dialoogiaken Format AutoShape.
    
    
11. Avage dialoogiaknas Format AutoShape lipik Size.
    
    Siit huvitab meid ainult alajaotuse Scale parameeter Width. Siin saab määrata horisontaalse eraldusjoone laiuse protsentides kogu kuva laiusest. Vaikimisi on see väärtus 100%.
    
    
12. Sisestage alajaotuse parameetri Width väärtuseks 50% ja klõpsake korraldusnupul OK dialoogiakna sulgemiseks.
    
    
13. Salvestage muudatus ja värskendage lehitseja kuva.
    
    
14. Valige punktist View korraldus HTML Source.
    
    
15. Teie HTML koodis peaks olema lisatud teegile <HR> parameeter: WIDTH="50%".
    
    
16. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Märkus: Selleks, et kiiresti lisada dokumenti eelneva joonega sarnane joon tuleb klõpsata tööriistaribal Formatting asuval nupul Horizontal Line.

Loodava dokumendi fooni (tausta) valik.

Selleks, et teha interneti lehekülgi meeldivamaks kasutatakse tihti mitmesuguseid taustamustreid, sealhulgas ka tekstuurtausta. Selleks, et määratleda interneti lehekülje tausta värvi või mustri tuleb valida punktist Format korraldus Background. Peale selle korralduse valikut ilmub kuvale alammenüü, mille abil võib valida dokumendile sobiva taustavärvi või -mustri.

Ülesanne 5. Määratleme dokumendile "tund-2.htm" taustavärvi.

1. Valige punktist Format korraldus Background.
2. Valige korralduse alammenüüst sobiv taustavärv.
3. Salvestage muudatus ja värskendage lehitseja kuva.
4. Valige punktist View korraldus HTML Source.
   
   
5. Teie HTML koodis peaks teegi <BODY> parameetril BGCOLOR olema uus väärtus.
   
   
6. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Ülesanne 6. Määratleme dokumendile "tund-2.htm" taustamustri.

1. Valige punktist Format korraldus Background.
2. Klõpsake korraldusega Background avanevas alammenüüs korraldusele Fill Effects..
3. Avatakse dialoogiaken Fill Effects, milles on ainult üks lipik Texture.
4. Valige meelepärane taustamuster ja klõpsake korraldusnupule OK.
5. Salvestage muudatus ja värskendage lehitseja kuva.
6. Valige punktist View korraldus HTML Source.
   
   
7. Teie HTML koodis peaks teeki <BODY> olema lisatud parameeter BACKGROUND="Image128.jpg". (parameetri väärtus võib olla teil erinev, kuna valisite teise taustamustri)
   
   
8. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Peale standardsete tekstuuride võib valida taustamustrina kasutada ka suvalist teist kujutist. Selleks on vaja klõpsata dialoogiakna Fill Effects korraldusel Other Texture … ja leida arvutist üles fail, mida te kavatsete kasutada taustamustrina.

Märkus: Foonikujutised täidavad alati kogu kuva tervikuna, seejuures kordub kujutis nii mitu korda kui on vajalik lehekülje täitmiseks. Foonimustri valikul salvestatakse automaatselt interneti dokumendiga samasse kausta ka foonimustri fail. Viimases ülesandes seega fail: "Image128.jpg".

Teksti vormindamine interneti lehekülgedel.

Interneti lehekülje loomisel võib tekstile ja viidetele määratleda vaikimisi kasutatavad värvid. Selleks kasutatakse punkti Format korraldust Text Colors. Ilmub joonisel kujutatud dialoogiaken Text Colors.

Ülesanne 7. Määratleme vaikimisi kasutatavad värvid.

1. Valige punktist Format korraldus Text Colors.
2. Määrake põhiteksti (Body text color) värviks: sinine.
3. Määrake hüpetekstiviidete (Hyperlink) värviks: punane.
4. Määrake külastatud viidete (Followed hyperlink) värviks: tumelilla.
5. Salvestage muudatus ja värskendage lehitseja kuva.
6. Valige punktist View korraldus HTML Source.
   
   
7. Teie HTML koodis peaks teegis <BODY> olevate parameetrite väärtused peavad olema järgmised:
   
   TEXT="#0000ff" LINK="#ff0000" VLINK="#800080"
   
   
8. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Need parameetrid määratlevad värvid vaikimisi kogu dokumendi jaoks. Kui on aga vajalik valida värvi mingile tekstifragmendile, siis on mugavaimaks viisiks tööriistariba Formatting nupuga Font Color avaneva menüü kasutamine.

Ülesanne 8. Vormindame tekstifragmendi värvi.

1. Märgistage dokumendi pealkirjas esimene sõna: Teksti.
2. Klõpsake nupust Font Color paremal asuval kolmnurgal menüü avamiseks.
3. Valige tekstifragmendi värviks punane värv.
4. Salvestage muudatus dokumendis ja värskendage lehitseja kuva.
   
   Nüüd peaks lehitseja kuval olema kaks sõna, millest esimene on punane. HTML dokumendis on selle valiku tulemus järgmine.
   
   
5. Valige punktist View korraldus HTML Source.
   
   
6. Teie HTML koodi lisatakse teek FONT parameetriga COLOR:
   
   <FONT COLOR="#ff0000"><P ALIGN="CENTER">Teksti</FONT> vormindamine.</P>
   
   
7. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Interneti lehekülje lugeja võib aga ise seada lehitsejas vaikimisi kuvatavad värvid. Selleks, et tekst ja viited oleksid kuval kasutaja poolt valitud värvidega tuleb dialoogiaknas Text Colors kõigi kolme värvi väärtuseks valida väärtus Auto.

Interneti lehekülgede loomisel Microsoft Wordis võib kasutada paljusid vormindamise vahendeid, mis on ette nähtud Wordi dokumentide vormindamiseks. Näiteks võib vormindada teksti rasvaseks valides vastava nupu Bold tööriistaribalt Formatting või valida esimese taseme pealkirja Heading 1 vormindus jms.

Interneti lehekülgedel tähendab mingi teksti vormindamise viisi valimine, et dokumendi HTML koodi genereeritakse vastav teek. Punkti Format korraldusega Font avanev dialoogiaken Font on ette nähtud teksti šrifti, suuruse ja laadi valikuks.

Ülesanne 9. Vormindame teksti dialoogiakna abil.

1. Trükkige dokumenti uuelt realt järgmine loend (iga rea lõpus vajutage Enter sõrmisele):
   
   Rasvane kiri
   Kaldkiri
   Allajoonitud kiri
   Läbijoonitud kiri
   Ülemine indeks
   Alumine indeks
   
   
2. Valige punktist Format korraldus Font.
   
   
3. Märgistage loendi esimene rida (Rasvane kiri) ja lülitage sisse laad (linnuke ruudu sisse) Bold.
   
   
4. Klõpsake korraldusnupul OK.
   
   
5. Tegutsedes sarnase skeemi järgi vormindage ka loendi teised elemendid:
   
   Vormindage loendi teine rida laadiga Italic.
   Vormindage loendi kolmas rida laadiga Underline.
   Vormindage loendi neljas rida laadiga Strikethrough.
   Vormindage loendi viies rida laadiga Superscript.
   Vormindage loendi kuues rida laadiga Subscript.
   
   
6. Valige punktist View korraldus HTML Source.
   
   
7. Teie HTML koodis peaks olema lisatud järgmised teegid:
   
   <B><P>Rasvane kiri</P></B>
   <I><P>Kaldkiri</P></I>
   <U><P>Allajoonitud kiri</P></U>
   <STRIKE><P>Läbijoonitud kiri</P></STRIKE>
   <SUP><P>Ülemine indeks</P></SUP>
   <SUB><P>Alumine indeks</P></SUB>
   
   Nagu näete on meie loendi kõik elemendid piiratud kahe konteiner teegi sisse. Lõigu konteiner teeki <P></P> ja vastavasse vormidamise konteiner teeki:
   
   <B></B> - rasvane kirjalaad
   <I></I> - kaldkirja laad
   <U></U> - allajoonitud kirja laad
   <STRIKE></STRIKE> - läbijoonitud kirja laad
   <SUP></SUP> - ülemise indeksi kirja laad
   <SUB></SUB> - alumise indeksi kirja laad
   
   Märkus: Nagu te juba teate ei ole lõigu teegi <P> puhul vastav sulgev teek </P> HTML koodi käsitsi sisestamise puhul kohustuslik.
   
   
8. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Samas võib nende teekide puhul kasutada suvalist teekide omavahelist kombinatsiooni (välja arvatud kaks viimast - kuna nad on teineteist välistavateks teekideks).

Näiteks on võimalikud kombinatsioonid:

1. <U><I><B>Rasvane allajoonitud kaldkiri.<B/></I></U>
2. <STRIKE><I>Kaldkirjas läbijoonitud kiri.</I></STRIKE>
3. <U><I><B><SUP>Rasvane allajoonitud kaldkiri alumise indeksina</SUP></B></I></U> ja muud sellist.

Rasvase laadi, kaldkirja laadi ja allajoonitud laadi teksti vormindamiseks on tööriistaribal olemas ka vastavad nupud:.

Selleks, et kiiresti muuta šrifti suurust kasutatakse tööriistariba Formatting nuppe Increase Font Size ja Decrease Font Size.

Selleks, et sisestada taanet tuleb kasutada tööriistariba Formatting nuppe Decrease Indent ja Increase Indent .

Ülesanne 10. Muudame šrifti suurust ja taanet.

1. Märgistage loendi esimene rida.
2. Klõpsake nupul Increase Font Size kaks korda.
3. Klõpsake nupul Increase Indent.
4. Märgistage loendi kolmas rida.
5. Klõpsake nupul Decrease Font Size üks kord.
6. Klõpsake nupul Increase Indent.
7. Salvestage muudatus ja värskendage lehitseja kuva.
   
   
8. Valige punktist View korraldus HTML Source.
   
   HTML keele seisukohalt piiratakse iga tekstiosa, millele on rakendatud taanet teek konteineriga <DIR></DIR>. Teineteise sisse sisestatud teegid DIR võimaldavad luua mitmetasemelisi taandeid. Meie näite puhul sisestati dokumenti järgmised teegid:
   
   <DIR>
   <DIR>
   
   <B><FONT SIZE=5><P>Rasvane kiri</P></DIR>
   </DIR>
   
   </B></FONT><I><P>Kaldkiri</P><DIR>
   <DIR>
   
   </I><U><FONT SIZE=4><P>Allajoonitud kiri</P></DIR>
   </DIR>
   
   </U></FONT>
9. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Selleks, et muuta teksti joondamist tuleb klõpsata tööriistaribal Formatting asuvatel vastavatel nuppudel: vasakule Align Left , keskele Center ja paremale Align Right .

Märkus: Kuigi Microsoft Wordi tööriistaribal Formatting puudub nupp teksti joondamiseks plokina on see võimalus HTML spetsifikatsioonis 4.0 siiski olemas.

Ülesanne 11. Joondame teksti.

1. Märgistage loendi eelviimane rida ja klõpsake tööriistariba Formatting nupul Center.
   
   
2. Märgistage loendi viimane rida ja klõpsake tööriistariba Formatting nupul Align Right.
   
   
3. Valige punktist View korraldus HTML Source.
   
   
4. Dokumendi HTML koodis on toimunud järgmised muudatused:
   
   <SUP><P ALIGN="CENTER">Ülemine indeks</P></SUP>
   <SUB><P ALIGN="RIGHT">Alumine indeks</P></SUB>
   
   Nagu näete on lõigu teegile lisatud joondamise parameeter ALIGN vastava joondamisväärtusega. Selleks, et interneti leheküljel oleks tekst joondatud plokina tuleb vastava ploki teegi <P> parameetri ALIGN väärtuseks sisestada justify: ALIGN="JUSTIFY".
   
   
5. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.