Do zdaj smo pisali samo posamezne dele kode HTML ali kode CSS. Zdaj pa si poglejmo, kako zapišemo programsko kodo celotne spletne strani.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "UTF-8">
<title>Prva spletna stran</title>
<style type = "text/css">
p {
font-family: Georgia, Helvetica, serif;
}
</style>
</head>
<body>
<h1>Naslov</h1>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
</body>
</html>
V zgornji programski kodi je veliko novega. Oglejmo si jo po korakih.
1. <!DOCTYPE HTML>: ta vrstica pove brskalniku, da dokument vsebuje kodo HTML.
2. Ukaz <html> začne, ukaz </html> pa konča spletno stran. Znotraj teh dveh ukazov je koda za celotno spletno stran.
3. Ukaz <head> označuje poseben del spletne strani, ki se imenuje head. To je glava dokumenta, kjer so tehnična navodila za izdelavo spletne strani. Kar napišemo v glavi, prikazovalnik ne prikaže v svojem oknu. Ukaz <head> moramo zapisati za ukazom <html>.
4. <meta charset = "UTF-8">: ta vrstica brskalniku pove, kateri nabor znakov naj uporablja. Nabor znakov, ki ga uporabljamo, se imenuje UTF-8. To je vse, kar moramo vedeti o naboru znakov.
5. Glava mora vsebovati ukaz <title>. Med ukaza <title> in </title> zapišemo naslov spletne strani, ki je v večini brskalnikov prikazan kot besedilo v naslovni vrstici brskalnika.
6. Z ukazom <style type = "text/css"> določimo stil, ki je zmeraj "text/css". Med ukaza <style type = "text/css"> in </style> vnesemo kodo CSS.
7. Zaključni ukaz </head> moramo zapisati pred začetni ukaz <body>.
8. Med ukazoma <body> in </body> zapišemo dejansko vsebino spletne strani.
Zgornjo kodo spletne strani lahko pretipkamo v urejevalnik besedil, ki zapiše kodo v čisti obliki. Poimenovanje datoteke moramo zaključiti s .html. To datoteko nato odpremo s poljubnim brskalnikom.
Če nato v Raziskovalcu kliknemo na to datoteko, jo bo brskalnik odprl in videli bomo svojo spletno stran.
Slovarček:
head: glava
body: telo
title: naslov
style type: tip stila