| Wiki Markup |
|---|
Hei.
Tämä on opetusteksti, jonka päämääränä on opettaa lukijaansa merkkaamaan HTML-kielellä vastaavanlainen sivu:
h5. 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.
h5. 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\|view-source:http:/users.metropolia.fi/%7Epetterek/Viikkotehtava/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 {
background-color:#000000;
}
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;
}
h1. Otsikko1{
font-family:"verdana";
color:white;
box-shadow:0pt 0pt 10px rgba(0,0,0,0.5);
}
h2{
font-family:"trebuchet ms";
color:grey;
}
p{
font-family:"courier new";
color:orange;
}
p.Date{
font-family:"trebuchet ms";
color:red;}
a:link
/\* unvisited link \*/
a:hover
/\* mouse over link \*/
a:active
/\* selected link \*/
a {background-color:orange}
a {font-family:"trebuchet ms"}
a {text-decoration:none}
</style>
CSS avataan kirjoitamalla <style type="text/css">. Mustan taustan saat aikaan tällä tekstipätkällä: body {
background-color:#000000;
}
Voit myös korvata numeraaliarvon sanalla black.
Seuraava tekstipätkä määrittelee taustan tummuuden, sekä kaksi taustaan jäävää neliötä, josta toinen on toisen sisällä: 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;
}Arvoilla leikkimällä voit saada aikaan erilaisia tuloksia, mutta me käytimme näitä tarkkoja arvoja saadaksemme aikaan haluamamme efektin sivun taustassamme.
Kaikkien väliotsikoidemme, tekstimme ja linkkiemme värit ja fontit määritellään seuraavassa tekstipätkässä:h1.Otsikko1{
font-family:"verdana";
color:white;
box-shadow:0pt 0pt 10px rgba(0,0,0,0.5);
}
h2{
font-family:"trebuchet ms";
color:grey;
}
p{
font-family:"courier new";
color:orange;
}
p.Date{
font-family:"trebuchet ms";
color:red;}
a:link
/\* unvisited link \*/
a:hover
/\* mouse over link \*/
a:active
/\* selected link \*/
a {background-color:orange}
a {font-family:"trebuchet ms"}
a {text-decoration:none}Tekstipätkässä määritellään osa, jota fontti\- ja värimuutokset koskevat. Esimerkiksi h1, eli ensimmäistä otsikkoamme, muuttavat |
Page History
Overview
Content Tools
Activity