2. praktikumi materjalid

Teksti suuruse, värvi ja muude tunnuste määramine, erimärgid, materjali tsentreerimine; lehekülje tausta värvi muutmine; linkide ja piltide lisamine ja paigutamine. Fototöötlus. 

2. praktikumi ülesanded


Esimese praktikumi materjalides on lühidalt selgitatud, mis on brauserivaade ja koodvaade. Samuti on toodud valik lihtsamaid koode ja lisatud nende tähendused. Põhimõtted on sarnased ka keerukamate koodide puhul. Allpool on mõned võimalused teksti ja muu materjali esiletõstmiseks ning paigutamiseks, samuti linkide kasutamiseks.

Teksti suuruse määramine

Teksti suuruse määramine tekstiosale
<FONT SIZE="+2">tekst</FONT>
<SPAN STYLE="FONT-SIZE:14px">tekst</SPAN>

Teksti suuruse määramine lõigule
<P STYLE="FONT-SIZE:14px">tekst</P>

Teksti värvi määramine

Teksti värvi määramine tekstiosale
<FONT COLOR="GREEN">tekst</FONT>
<SPAN STYLE="COLOR:#7b68ee">tekst</SPAN>

Teksti värvi määramine lõigule
<P STYLE="COLOR:red">tekst</P>
<P STYLE="COLOR:#7b68ee">tekst</P>

Sobivate värvikoodide leidmiseks on loodud erinevaid vahendeid, näiteks HTML Color Picker ja HTML Color Mixer.

Veel võimalusi teksti tunnuste määramiseks

<FONT COLOR="#7b68ee" SIZE="+2" FACE="ARIAL">KALA</FONT>
<SPAN style="COLOR:red; FONT-STYLE:italic; FONT-WEIGHT:bold; FONT-SIZE:14px; FONT-FAMILY:arial">tekst </SPAN>

Tausta värvi määramine

<BODY BGCOLOR="#ccefff">

Kui lisada taustavärv, näeb html-dokumendi põhistruktuur välja selline:

<html>
<head>
<title>Pealkiri, mis on näha dokumendi päises</title>
</head>
<body bgcolor="#ccefff">

Lehekülje sisu, sh ka tekstide pealkirjad

</body>
</html>

Materjali tsentreerimine

Samade vahenditega saab tsentreerida teksti, pilti, tabeleid jne.
<CENTER>tekst</CENTER>
<DIV STYLE="TEXT-ALIGN:center">tekst</div>

Linkide lisamine

<A HREF="kalad.html">Lingi nimi, mis jääb veebis näha sinisena ja millele kasutaja saab vajutada</A>

Selle näite tulemusena on veebilehel link, mis viib samas kaustas asuvale lehele, mille failinimi on kalad.html.

Piltide lisamine

Pilte lisatakse koodi abil, mis sisaldab pildi aadressi serveris. Tasub tähele panna, et täpselt selle nimega ja laiendiga reaalne pilt tuleb serverisse laadida, et seda saaks kuvada. Veebi panemiseks sobivad pildiformaadid on näiteks jpg-, png- ja gif-laiendiga failid. Veebi ei sobi mahukad pildiformaadid, näiteks tif- ja bmp-failid.

Kui pildid ja html-failid on serveris samas kaustas, piisab pildi nimest.
<IMG SRC="pilt.gif">
<IMG SRC="pilt.jpg">

Kui pildid ja html-failid on serveris erinevates kaustades, tuleb lisada kausta nimi või kasutada täispikka aadressi.
<IMG SRC="../pildid/pilt.jpg">
<IMG SRC="pildid/pilt.jpg">
<IMG SRC="http://web.zone.ee/heids/html/filezilla.jpg">

Pildi paigutamine keskele
<CENTER><IMG SRC="pilt.jpg"></CENTER>

Veel pildi tunnuseid
<IMG SRC="kajakas.gif" ALT="kajakas" WIDTH="50" HEIGHT="100" BORDER="0">

Piltide lõikamine ja kroppimine



2. praktikumi ülesanded

Värvide koodid
https://www.w3schools.com/colors/colors_mixer.asp
http://www.tayloredmktg.com/rgb/
http://eies.njit.edu/~kevin/rgb.txt.html