HTML
HTML(tulee sanoista Hypertext Markup Language) on kuvauskieli, jonka avulla voidaan mm. luoda webbisivuja ja tähän sivujen tekoon keskityn tässä oppaassa. Aluksi tarvitset jonkun tekstieditorin ja väliä ei ole millä kirjoitat HTML:llää. HTML:ssä erotellaan koodi sisällöstä <>-merkeillä esim. <p>tekstiä</p> tässä esimerkissä luodaan kappale(paragraph), joka sisältää sanan "tekstiä". <p>-tagi aloittaa kappaleen ja kaikki teksti <p>:n ja sulkutagin </p> välissä kuuluu kappaleeseen. Sulkutagi on siis aina sama kuin aloitus tagi + kenoviiva(/). HTML-dokumentin alussa pitäisi aina muistaa mainita dokumentin sisältö. <!DOCTYPE>:llä esim. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> tällä kerrotaan, että kyseessä on HTML 4.01 dokumentti ja että kyseessä on tiukka(strict) merkintätapa. Huomaa, että <!DOCTYPE>:llä ei ole sulkutagia.
Nyt, kun tiedämme jo hieman tagien merkaamisesta ja dokumentin aloituksesta niin voisimme tehdä pienen esimerkki dokumentin. Aloitetaan doctypellä ja dokumentti on HTML 4.01 strict eli <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ja tämän jälkeen alkaa itse dokumentti <html>-tagilla. Dokumentin pitäisi näyttää nyt tältä
- Koodi: Valitse kaikki
<!DOCTYPE HTML PUBLiC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<html>-tagin jälkeen tulee <head>-tagi, jonka sisään määrittelemme tietoja kuten sivun otsikon ja metatietoja(tekijä, hakusanoja...). Kirjoita <head>:in alle <title>Otsikkosi</title> ja sen jälkeen suljetaan sulkutagilla </head>. Tämän jälkeen alkaa itse sisältö eli se osa, joka näkyy käyttäjälle. <body> kertoo, mistä kohtaa sisältö alkaa ja sen jälkeen voisimme luoda kappaleen, jossa lukee "HTML on kivaa!" eli koodina <p>HTML on kivaa!</p>. Koodin pitäisi näyttää tällä hetkellä suurinpiirtein tältä.
- Koodi: Valitse kaikki
<!DOCTYPE HTML PUBLiC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Otsikkosi</title>
</head>
<body>
<p>HTML on kivaa!</p>
Nyt meidän pitää enää avoinna olevat <html> ja <body>-tagit. Huomaa, että tagit suljetaan sisimmäisestä uloimpaan ja nyt dokumentti näyttää tälläiseltä.
- Koodi: Valitse kaikki
<!DOCTYPE HTML PUBLiC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Otsikkosi</title>
</head>
<body>
<p>HTML on kivaa!</p>
</body>
</html>
Olet juuri tehnyt ensimmäisen HTML-dokumenttisi ja nyt se pitäisi vielä tallentaa. Tallentaessa laita tallennusmuodoksi kaikki tiedostot ja päätteeksi .html esim. testisivu.html. Nyt voisimme vielä lisätä tuon tekemämme tekstin alle linkin, joka vie meidät googlen etusivulle eli <a href="http://www.google.fi">Google</a> ja tuo sitten lisätään vain tuohon html on kivaa! alle.
HTML 4.01 jakautuu kolmeen dokumenttityyppiin, jotka ovat strict, transitional ja frameset. Strictiä tulisi käyttää CSS-tiedostojen kanssa, Transitional taas on vaihtoehto sillon, kun lukijoillasi ei ole selainta joka tukisi CSS:ssää. Frameset on muuten sama kuin transitional, mutta tällöin frameset elementti korvaa bodyn.Headereihin(<head>-tagi) voit laittaa myös muita tietoja kuin sivun otsikon eli ns. metatietoja. Näitä ovat mm. keywords, description ja author. Nimiensä mukaisesti hakusanat(helpottaa hakukoneita ja sivujesi näkyvyyttä niissä), kuvaus ja tekijä. Nämä metatiedot merkataan seuraavanlaisesti <meta name="keywords" content="auto, kala, kissa, koira"> ja kun haluat descriptionin niin kirjoitat vaan keywordsin tilalle description.
Ensimmäinen sivu
Sivuston ulkoasun tekoon ovat divit ja css oikeat aseet. Diveillä voit jakaa sivun eri osiin, joillekka voit antaa erilaisia määrityksiä css:ssän avulla. Diveille voi antaa erilaisia attribuutteja: id, class, title, style, dir, lang, xml:lang. ID:tä tulisi käyttää silloin, kun tarvitset vain yhden tälläisen divin ja classia taas silloin kun sinulla on esimerkiksi monta samanlaista nappulaa. Tässä näin pieni esimerkki divien käytöstä.
- Koodi: Valitse kaikki
<!DOCTYPE HTML PUBLiC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Otsikkosi</title>
</head>
<body>
<div id="sisältö">
<p>HTML on kivaa!</p>
</div>
</body>
</html>
Tässä siis luomme simppelin html-dokumentin ja lisäämme divin, jonka nimi on sisältö ja attribuuttina id. Voimme käyttää tätä
tietoa hyödyksi sitten CSS:ssän kanssa tyylimäärittelyjä tehdessä.
CSS
Olet nyt varmaan ihmetellyt hieman, mikä ihme tuo CSS on, josta olen höpöttänyt. CSS(Cascading Style Sheets) on erityisesti WWW-dokumenteille tehty tyyliohjeiden laji. Strictiä tehdessä siis, mitään tyylimäärittelyjä ei tulisi jättää HTML:lle vaan ne tulisi tehdä CSS:llä. Tehdäänpäs nyt pieni sivu, joka kenties avaa lisää www-sivujen tekoa.
- Koodi: Valitse kaikki
<!DOCTYPE HTML PUBLiC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Otsikkosi</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="sisältö">
<p>HTML on kivaa!</p>
</div>
</body>
</html>
Seuraavaksi luomme style.css nimisen tiedoston tiedoston sisältö on seuraavanlainen #sisältö { background-color: #F0F0F0; } Tarkista, että style.css ja sivu.html ovat samassa kansiossa ja avaa sivu.html selaimessa.
Linkkejä:
http://www.w3schools.com/
http://www.sivut.org/
EDIT: ihanasti kusas, kun kirjotin aluksi muistioon. Anything else my lord?
1 2 3
