Hei.
Tämä on opetusteksti, jonka päämääränä on opettaa lukijaansa merkkaamaan HTML-kielellä vastaavanlainen sivu:
Tiedoston luominen
Ohjelmistoksi käy esimerkiksi notepad++, notepad tai Adobe Dreamweaver.
Avattuasi valitsemasi ohjelman, aloita tiedosto kirjoittamalla vastaavanlainen rivi: <!Doctype html>
Tämä rivi näyttää minkä tyyppinen HTML-tiedosto on kyseessä.
Seuraavalle riville kirjoita <head>. Tiedoston mahdolliset CSS-elementit tulevat tälle alueelle. Sulje seuraavaksi alue kirjoittamalla </head>.
Tämän tehtyäsi tulee sinun avata tiedoston varsinainen html-alue. Avaa alue kirjoittamalla <body> ja sulje se kirjoittamalla </body>. Näiden väliin voit kirjoittaa yksinkertaista tekstiä ja se tulee sivulle esiin sellaisenaan. Esimerkiksi:
<body>
Hei, tämä tässä on pätkä tekstiä.
</body>
Lopuksi, sulje html-pätkä kirjoittamalla </html>. Nyt sinulla on valmiina html-tiedoston perusrakenne ja seuraavaksi pääset täyttämään tulevaa sivuasi sisällöllä. Suosittelemme, että tallennat tiedostosi jo tässä vaiheessa, varmistaen, että tallennat sen .html-muotoon. Kannattaa myös säännöllisin väliajoin tehdä välitallennuksia.
Faviconin, CSS-elementtien ja scriptin lisäys
Muistatko alueen, jonka alun ja lopun merkitsit <head> ja </head> merkinnöillä? Sivullesi haluamat CSS-elementit kirjoitetaan tähän väliin. CSS-elementit luovat sivuston ulkoasun. Esittelemällämme sivulla on myös käytössä favicon, eli pieni ikoni, joka näkyy esimerkiksi osoiterivillä. Tämä favicon lisätään kirjoittamalla seuraava pätkä:
<link REL="SHORTCUT ICON" HREF=" favicon.ico">
jossa korvaat "favicon.ico" -osan faviconisi tiedostonimellä. Tiedoston tulee olla samassa parent directoryssä kuin kirjoitettava sivu. Sama pätee mahdollisiin "alasivuihin".
Sivullamme käyttämä CSS näyttää seuraavanlaiselta:
<style type="text/css">
body
div.rectangle1 {
width: 1400px;
height: 800px;
background: #1A1A1A;
padding:5px;
margin-left:auto;
margin-right:auto;
box-shadow:0pt 0pt 300px rgba(255,255,255,0.5);
border-style:solid;
border-width:1px;
}
div.rectangle2 {
width: 1400px;
height: 800px;
background: #2D2D2D;
padding:5px;
border-style:solid;
border-width:1px;
}
Unknown macro: { font-family} ">Otsikko1Unknown macro: { font-family}
h2
p
p.Date
a:link
/* unvisited link */
a:hover
/* mouse over link */
a:active
/* selected link */
a
a
a
</style>