Atpakaļ
Mērķis: Apgūt HTML dokumentu veidošanas pamatus
Piezīme: uzdevuma laikā koncentrējiet uzmanību tikai uz dokumentu saturu. Noformējums šeit nav būtisks, jo to mēs apskatīsim nākamajā praktiskajā darbā.
Necentieties to veidot kā mājas lapu, domājiet par HTML drīzāk kā par dokumentu līdzīgi kā MS Word dokumentiem:
- vienu pēc otra ievietojiet virsrakstus, paragrāfus, tabulas;
- paragrāfos vai tabulās ievietojiet tekstu, attēlus, saites;
- vairākus paragrāfus ar virsrakstu un/vai tabulu, kas ir loģiski saistīti apvienojiet ar div tagiem (div tagi paredzēti lai veidotu informācijas blokus, vēlāk izmantojot CSS šādus blokus var salīdzinoši vienkārši noformēt un izvietot).
Prasības:
- Izveidot vismaz četrus HTML dokumentus par izvēlēto tēmu. Izveidot hipersaites (a tags) starp dokumentiem (linkus no viena uz otru, un atpakaļ). Dokumentiem jāatbilst HTML5 standartam. Dokumentu saturam un struktūrai jābūt loģiskai.
- Galvenās lapas failam jābūt nosauktam par "index.html".
- Katrai lapai jāsatur virsraksta tags h1 vai h2.
- Katra lapa head sadaļā satur - title tags ar lapas nosaukumu, meta tags ar teksta kodējumu, meta tags ar lapas atslēgas vārdiem.
- Lapās iekļaujiet šādus HTML elementus:
- Dokumentos atbilstoši to nozīmei jāizmanto p, div un span tagi, piemēram, p – rindkopai, bet div un span tagi – lapas izkārtojuma veidošanai un satura izdalīšanai.
- Vismaz vienā no dokumentiem jāievieto attēls - img tags (saglabājiet attēlus tajā pašā direktorijā, kur html dokumenti). Vismaz vienam no attēliem jābūt kā saitei (a tags).
- Vismaz vienā no dokumentiem jāizveido tabula (tagi: table, tr, td).
- Vienā no dokumentiem jāizveido vienkārša aptaujas forma ar izvēlni no saraksta (dropdown), radio pogām un apstiprināšanas pogu (tagi: form, select un option, input). (Formu pagaidām nevar nosūtīt, to apgūsim citā lekcijā.)
- Izveidot vienkāršu nenumurētu punktu uzskaitījuma sarakstu (bulleted list). Tagi - ul un li.
- Veikt validāciju izveidotajiem dokumentiem izmantojot tiešsaistes validāciju http://validator.w3.org/.
Paraugi:
Tukšs dokuments ar aizpildītu head sadaļu un virsrakstu body sadaļā:
<!DOCTYPE html>
<html>
<head>
<title>Web tehnoloģijas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Piemērs, paraugs, weblapa">
</head>
<body>
<h1>Web kursa paraugs</h1>
</body>
...
</head>
Strukturēts dokumenta teksta saturs:
<div>
<h1>Virsraksts pirmajai sadaļas</h1>
<h2>Apakšvirsraksts</h2>
<p>Paragrāfs. Sarkana lapsa pārleca pāri laiskam sunim.</p>
<p>Otrs paragrāfs. <span>Īpašs teksts paragrāfa vidū.</span> Paragrāfs turpinās.</p>
</div>
<div>
<h1>Virsraksts otrajai sadaļas</h1>
<h2>Apakšvirsraksts</h2>
<p>Vēl viens paragrāfs.</p>
</div>
Teksts kā saite, attēls un attēls kā saite:
<a href="http://www.va.lv">Vidzemes augstskola</a>
<img src="test.png" alt="Testa bilde">
<a href="lapa.html"><img src="test.png" alt="Testa bilde"></a>
Tabula (style atribūtā definēts tabulas rāmja stils):
<table style="border: 1px solid black">
<tr>
<td>Col1 Cell1</td>
<td>Col2 Cell1</td>
</tr>
<tr>
<td>Col1 Cell2</td>
<td>Col2 Cell2</td>
</tr>
</table>
Forma:
<form action="submit.php">
Teksta ievades lauks: <input type="text" name="vards">
<div>
Izkrītošā izvēlni:
<select name="vecums">
<option value="10">Desmit</option>
<option value="11">Vienpadsmit</option>
<option value="12">Divpadsmit</option>
</select>
</div>
<div>
Radio pogas:
<input type="radio" name="vecums" value="10">Desmit
<input type="radio" name="vecums" value="11">Vienpadsmit
<input type="radio" name="vecums" value="12">Divpadsmit
</div>
<div>
<button type="submit">Nosūtīt</button>
</div>
</form>
Saraksts:
<ul>
<li>Ieraksts 1</li>
<li>Ieraksts 2</li>
</ul>
Piemērs:
Skat. pilnu piemēru šeit
Darbu sagatavojiet jaunā folderī ar nosaukumu "Vārds Uzvārds Prakt1" (aiztājiet ar savu vārdu un uzvārdu).
Praktiskā darba folderi arhivējiet zip formātā.
Nosūtiet arhīvu uz e-pastu mikelis@va.lv.