Kodulehe loomine, 2. kord

22.09.2021
 |  Kommentaare pole

Link

Lingi algusmärgend: <a>

Lingi lõpumärgend: </a>

Lingile lisatakse järgmisi enimkasutatavaid parameetreid (inglise keeles attributes):

href – aadress, kuhu leht edasi suunatakse

Link samas kataloogis paiknevale failile nimega proov.html:

<a href="proov.html">Link failile</a>

Link avalikule internetilehele:

<a href="https://www.err.ee">ERR</a>

Link e-kirja saatmiseks:

<a href="mailto:jaan.kask@eesti.ee">jaan.kask@eesti.ee</a>

Link telefoninumbrile:

<a href="tel:+3725050501">+3725050501</a>

 

target – määratleb, missuguses aknas avatakse lingile vastav dokument:

<a href="proov.html" target="_blank">Link failile</a>

_blank – avatakse uues aknas

_self – avatakse samas lehe osas, millele vajutati

_parent – avatakse lehe osa ülemise taseme aknas

_top – avatakse kõige pealmises aknas

 

Lingi parameetrite täielik nimekiri on leitav siit.

Lehe stiilide kohandamine

Põhimõtteliselt on kaks varianti, kuidas HTML-elemendi stiili kohandada:

1. elemendi enda juures:

<a href="proov.html" style="font-family: 'Arial';">Link failile</a>

2. HTML-dokumendi päises:

<head>
  <style>
  a
  {
       font-family: 'Arial';
  }
  </style>
</head>

Lehele taustapildi lisamine

Selleks tuleb body elemendile stiili alla lisada background-image:

Kas

<body style="background-image: url(pilt.jpg);">

</body>

või

<head>
  <style>
  body
  {
    background-image: url(pilt.jpg);
  }
  </style>
</head>

Kuna aga ekraanide suurused on erinevad, siis kasutatakse sama pilti niipalju kordi, kui tarvis.

Selleks aga, et ise rohkem kontrollida, kuidas taustapilti kuvatakse, on võimalik kohandada ka järgmisi taustapildi parameetreid:

Kas

<body style="background-image: url(pilt.jpg); background-repeat: no-repeat;">

</body>

või

<head>
  <style>
  body
  {
    background-image: url(pilt.jpg);
    background-repeat: no-repeat;
  }
  </style>
</head>

Selleks, et taust kataks kogu lehe, tuleb stiili kohandada selliselt:

<head>
  <style>
  body
  {
    background-image: url(pilt.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-size: cover;
  }
  </style>
</head>

Selleks, et taustapilt kohanduks vastavalt akna suurusele, saab kasutada

background-size: 100% 100%;

kus esimene 100% tähendab laiust ja teine 100% kõrgust.

Klassid ja identifikaatorid

Kuna enamasti on HTML-dokumendis mitmeid erinevaid elemente ja neid pole mõistlik ükshaaval üles lugeda, nende stiile kohandada, siis kasutatakse klasse ja identifikaatoreid, nii stiilide lisamiseks kui ka nt JavaScript’i koodi jaoks.

<p id="ERR" class="ajakirjandus">ERR</p>

<p id="postimees" class="ajakirjandus">Postimees</p>

<p id="raadio2" class="ajakirjandus">Raadio 2</p>

<p id="roblox" class="mangud">Roblox</p>

<p id="minecraft" class="mangud">Minecraft</p>

Ja nende stiili kohandamine käib siis järgmiselt:

Identifikaatori stiili määratlemisel käib identifikaatori nime ette märk #:

#ERR
{
   font-family: "Arial";
}
#roblox
{
  color: red;
}

Klassi stiili määratlemisel käib klassi nime ette märk . (punkt):

.ajakirjandus
{
   font-weight: bold;
}