Ryhmä Elina & Noora
Linkki sivullemme: http://users.metropolia.fi/~noorakaa/Drinkkivinkit/drinkkivinkit.html
YKSINKERTAISEN HTML-SIVUN LUOMINEN
Html-koodin voi kirjoittaa Dreamweaverilla tai Macilla esimerkiksi TextWranglerilla ja PC:llä Notepadilla.
Sivun voi julkaista esim. Macillä Cyberduck.app-ohjelmalla tai PC:llä Winscp-ohjelmalla siirtämällä tiedostot yhdessä kansiossa palvelimelle.
<!DOCTYPE HTML> Tässä määritellään käytettävä koodi.
<html> Tämä aloittaa html-koodin.
<head> Tähän osuuteen tulee sellaista tietoa, joka ei näy sivun katsojalle. Tähän tulee esimerkiksi scriptit, ohjeet, linkki css-tyyleihin ja metatietoja.
<meta charset="UTF-8"> Tässä määritellään merkistö.
<link type="text/css" rel="stylesheet" href="style.css"/> Linkki css-tyylitiedostoon, jonka tulee sijaita samassa kansiossa kun muutkin tiedostot. CSS-tyyleistä lisää alhaalla.
<title>
Tähän väliin tulee teksti, joka näkyy selaimen yläreunassa (ei siis varsinaisesti sivulla).
</title>
</head> Tämä lopettaa head-osuuden.
<body> Body-osuuteen tulee sivulla näkyvä sisältö, eli tekstit ja kuvat.
<h1> Otsikko </h1> <hr/> Tässä on sivulla oleva otsikko.
<p> <a href="http://www.linkki.com">Linkkiteksti</a> </p> Tässä on teksti, josta on linkki toiselle sivulle.
<img src="kuva.jpg" alt="Kuva"> Kuva (kuvatiedosto sijaitsee samassa kansiossa, jossa koodi)
<b>Bold</b> Rivinvaihto <br> </p> Tekstin boldaamiseen käytä komentoa <b> ja rivinvaihtoon <br>.
<p>Kappaleteksti Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel bibendum turpis. Curabitur nec mauris id nulla aliquet scelerisque. Integer tincidunt adipiscing est, ac euismod est vehicula a.</p> Kappale määritellään näin <p>.
</body> Tämä lopettaa body-osuuden.
</html> Tämä lopettaa html-koodin.
CSS-TYYLIT
Näin määrittelet body-osioon taustavärin:
body {
background:#fff1cd;
}
Näin määrittelet <h1>-otsikon tyylit (esim. väri, sijainti, taustaväri ja kirjainperhe):
h1 {
background-color:#727272;
font-family:"Arial";
}
Näin määrittelet <p> eli kappaleen (paragraph) tyylit (esim. kirjasinperhe, koko, sijainti):
p {
font-family:"Arial";
text-align: center;
}
Näin määrittelet kuvien sijainnin, eli tässä tapauksessa kuvat ovat keskellä:
img {
display: block;
margin-left: auto;
margin-right: auto;
}