Ensin määritetään selaimelle, että kyseessä on HTML-dokumentti.
Dokumentti näyttää tältä:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
tähän tulee sisältö
</html>
Sitten määritetään head-alue, jonne tulee css-määrittelyt, sivun otsikko, ja mahdolliset metatiedot.
Dokumentti näyttää tältä:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tähän tulee sivuston otsikko</title>
<link href="tyyli.css" rel="stylesheet" type="text/css" media="screen" />
</head>
</html>
Määritimme äsken sivuston otsikon, ja linkin css-tyylitiedostoon, jonka käsittelemme myöhemmin.
Sitten pitäisi vielä lisätä sisältöä sivulle, dokumentti näyttää silloin tältä:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tähän tulee sivuston otsikko</title>
<link href="tyyli.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
Tähän tulee sisältö
</body>
</html>
Sitten pitää vielä rakentaa sivupohja, sen teemme esimerkissä diveillä.
Ensiksi määrittelemme logodivin:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tähän tulee sivuston otsikko</title>
<link href="tyyli.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="logo">
<img src="tähän/tulee/logon/osoite" alt="" />
</div>
</body>
</html>
Esimerkissä lisäsimme div-tagin, ja määrittelimme id-atribuutilla divin nimen.
Huomaa, että päätimme divin </div>-tagilla.
Logon lisäsimme img-tagilla, ja määrittelimme src-atribuutilla kuvan osoitteen, ja
alt-atribuutilla näytettävän tekstin, jos selain ei tue kuvia.
Sitten määritämme valikko ja sisältö-kohdan samalla tavalla:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tähän tulee sivuston otsikko</title>
<link href="tyyli.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="logo">
<img src="tähän/tulee/logon/osoite" alt="" />
<div id="valikko">
<a href="linkin/osoite/tähän">linkin teksti tähän</a>
</div>
<div id="sisalto">
Tähän tulee sisältö, tähän voit laittaa mitä tahansa.
</div>
</body>
</html>
Nyt lisäsimme valikon ja sisältö-kohdan.
HTML:ssä pelkkä enterin painaminen ei riitä rivinvaihtoon,
rivinvaihto tehdään <br />-tagilla.
Mutta sivupohja ei ole vielä valmis, tarvitsemme vielä css-tyylimäärittelyt.
CSS-tiedosto näyttää tältä:
- Koodi: Valitse kaikki
body {
background: #C0C0C0;
}
div#logo
{
background: #00FF00;
}
div#valikko
{
background: #FFFF00;
}
div#sisalto
{
background: #FF0000;
}
CSS-tiedoston body-osio vaikuttaa koko sivuun, joten määritimme body-osiossa taustan värin
värikoodeilla harmaaksi. Viittaamme diveihin div#divinnimi-koodilla, ja määritämme logon taustan
vihreäksi, valikon taustan taas keltaiseksi, ja sisällön taustan punaiseksi.
Nyt meillä on yksinkertainen sivusto, ja värejä saa muokata sopivaksi itselleen.
Sivujen koodit:
index.html:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tähän tulee sivuston otsikko</title>
<link href="tyyli.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="logo">
<img src="tähän/tulee/logon/osoite" alt="" />
<div id="valikko">
<a href="linkin/osoite/tähän">linkin teksti tähän</a>
</div>
<div id="sisalto">
Tähän tulee sisältö, tähän voit laittaa mitä tahansa.
</div>
</body>
</html>
tyyli.css:
- Koodi: Valitse kaikki
body {
background-colour: #C0C0C0;
}
div#logo
{
background-colour: #00FF00;
}
div#valikko
{
background-colour: #FFFF00;
}
div#sisalto
{
background-colour: #FF0000;
}
Lopuksi
Lopuksi kerron vielä eri tageja, esim tekstin lihavointi, kuvan lisääminen yms.
Kuvan lisääminen
- Koodi: Valitse kaikki
<img src="tähän/tulee/kuvan/osoite" alt="vaihtoehtoinen teksti, jos selain ei tue kuvia" />
Tekstin lihavointi
- Koodi: Valitse kaikki
<b>lihavoitu teksti</b>
Tekstin alleviivaus
- Koodi: Valitse kaikki
<u>alleviivattu teksti</u>
Tekstin kursivointi
- Koodi: Valitse kaikki
<i>kursivoitu teksti</i>
Tekstin värin muuttaminen
- Koodi: Valitse kaikki
<font color="#värikoodi">teksti</font>
Otsikot
- Koodi: Valitse kaikki
<h1>Osikko</h1>
- Koodi: Valitse kaikki
<h2>Otsikko</h2>
- Koodi: Valitse kaikki
<h3>Otsikko</h3>
- Koodi: Valitse kaikki
<h4>Otsikko</h4>
- Koodi: Valitse kaikki
<h5>Otsikko</h5>
- Koodi: Valitse kaikki
<h6>Otsikko</h6>
Yläindeksi
- Koodi: Valitse kaikki
<sup>teksti</sup>
Alaindeksi
- Koodi: Valitse kaikki
<sub>teskti</sub>
Rivinvaihto
- Koodi: Valitse kaikki
<br />
Kappale
- Koodi: Valitse kaikki
<p>teksti</p>
Lisään näitä lisää myöhemmin.
-----------------------© theRockCoder_-------------------------------------
En nyt tuossa opettanut hirveästi itse HTML:lää/CSS:sää, mutta opetin tekemään yksinkertaisen sivupohjan.
