NÄIN TEET INTERNETSIVUT
TARVITAAN
Tekstieditori
FTP-ohjelma (esim. WinSCP)
Palvelin, johon ladata sivut
RAKENNE
Avaa tekstieditori ja tallenna tiedosto .html -muotoisena. (Esim. index.html)
Kopioi editoriin sitten peruspohja:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sivuston nimi tai otsikko</title>
<style>
</style>
</head>
<body>
Tähän sitten kirjoitellaan kaikkea, mitä sivuilla haluaa näkyvän.
</body>
</html>
ULKOASU
<style> -osion sisään kirjoitetaan erilaisia tyylimääreitä osioille, joita voisi haluta käyttää sivulla.
Koko sivun tyylin yleislinjat voidaan määritellä seuraavasti:
body {
background:#a7bae8;
text-align: center;
font: 16px/1.25 Helvetica,sans-serif;
}
Lisäksi erilaisia pienempiä osioita voidaan määritellä erikseen. Näitä ovat esimerkiksi otsikot <h1> <h2> <h3> jne, tekstikappaleet <p>, sekä erilaiset lohko/kappale-elementit <div> .
Esimerkki:
h1 {
font:Arial 24px italic;
color:#0349fc;
}
Osioissa voidaan vaikkapa määritellä, mitä fonttia haluaa käyttää, minkä kokoisia tai värisiä ne ovat tai miten ne muotoutuvat. Isompia kokonaisuuksia varten voidaan määritellä eräänlainen tyyliosio (id), jota voi myöhemmin käyttää <div> -tagin määritteenä.
#tiettytyyli {
background:#eee;
margin:10px auto;
padding:20px;
width:40%;
border:5px solid #e22;
border-radius:10px;
box-shadow: 1px 1px #333;
}
Myöhemmin <body> -osiossa tekstiä ympäröidään tagein siltä osin, kun halutaan jonkun tietyn tyylin vaikuttavan. Esimerkiksi:
<div id="tiettytyyli">
<h1>Tekstin otsikko!</h1>
<p>Ja sitten tässä on jonkunlainen kappale tekstiä, ja kaikki tämä on laatikon sisällä, jonka väri ja reunukset on määritelty ylempänä ja tämä on nimetty "tiettytyyli" -nimiseksi. Ja sitten tämä teksti loppuu. </p>
</div>
Kuvia lisätään tagilla <img src="jonkunniminenkuva.jpg"> (ja tämännimisen kuvan pitää sijaita samassa kansiossa palvelimella).
NAVIGOINTI
Sivuja saa linkitettyä toisiinsa <a href="http://linkki.com">Tässä oleva teksti näkyy itse sivulla linkkinä</a> -tagilla. Linkkien avulla voi luoda valikon sivuston sivujen välillä tai linkata ulos sivustolta.
FAVICON
Osoiterivin vieressä näkyvä favicon lisätään samaan tapaan kuin kuva, tämän tagin avulla:
<link rel="icon" href="ikoni.gif" type="image/gif" sizes="16x16"> , joka sijoitetaan <head> -osion sisään.
JA TÄMÄ KAIKKI INTERNETTIIN
Otetaan yhteys palvelimeen ftp-ohjelmalla ja siirretään tiedostot palvelimelle. Tadaa!
FINAL:
http://users.metropolia.fi/~hannujaa/viikko1/