Aloita ensimmäinen testi valitsemallasi editorilla luomalla uusi tiedosto. Jos käytät Windows-editoria, avaa se valitsemalla Aloitus>Kaikki ohjelmat>Tarvikkeet>Editori.
Valitse sitten Tiedosto>Tallenna nimellä. Tärkeää on kenttä Tiedostotyyppi.
Tässä vaiheessa on erittäin tärkeää valita Kaikki tiedostot. Kirjoita sitten kenttään Tiedostonimi index.htm. Nyt voit tallentaa tiedoston haluamaasi sijaintiin. Tämä tiedosto on se, jolla työskentelet, ensimmäinen HTML-tiedosto, joka kuitenkin on tällä hetkellä vielä tyhjä. Tämä muuttuu pian.
Jos käytät Dreamweaveria, on parasta määrittää heti ohjelman käynnistyksessä, että haluat luoda HTML-tiedoston.
HTML-peruskehys
Ennen kuin aloitetaan HTML-peruskehyksen kanssa, tärkeä huomautus tästä sarjasta – ja myös HTML-maailmasta – käytetystä semantiikasta. Nimittäin teille törmätään jatkuvasti termeihin Tag (tunniste) ja Element (elementti), jotka valitettavasti tulkitaan aina väärin. Esimerkki:
<a href="news.htm">Uutisiin</a>
Tämä syntaksi näyttää a-elementin, nimittäin <a href="news.htm">Uutisiin</a>. Tämä elementti muodostuu avautuvasta a-tunnisteesta, eli <a> tai täydellisesti <a href="news.htm">, elementin sisällöstä Uutisiin ja sulkevasta a-tunnisteesta </a>. Lisäksi elementillä a on attribuutti href arvolla news.htm.
Edellinen esimerkki näyttää hyperlinkin määritelmän HTML:ssä elementin a avulla. Tätä elementtiä a edustaa avautuva <a>- ja sulkeva </a>-tunniste. Näette siis, että ei ole niin vaikeaa käyttää termejä Element ja Tunniste oikein.
Nyt kuitenkin aloitetaan. Avaa aiemmin tallennettu HTML-tiedosto editorissasi. Jokaisella HTML-dokumentilla on tietty peruskehys.
Tässä on aluksi mainittu kehys täydessä loistossaan:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Mitä nyt merkitsevät yksittäiset merkinnät? Alkakaamme niin sanotulla dokumenttityyppideklaraatiolla.
<!DOCTYPE html>
Tällaisella dokumenttityyppideklaraatiolla ilmoitat selaimelle, jossa verkkosivusi myöhemmin näytetään, mitä HTML-standardia käytät. Tässä tapauksessa kyseessä on HTML5. Jos sen sijaan käyttäisit HTML 4.01:tä, DOCTYPE-ilmoitus olisi seuraavanlainen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Etenkin dokumenttityyppideklaraatio aiheuttaa hämmennystä HTML-aloittelijoille, koska niitä on monia erilaisia vaihtoehtoja. Se on kuitenkin oikeastaan hyvin yksinkertaista: Kuvittele dokumenttityyppideklaraatioaikatauluksi, jossa kuvataan, mitkä elementit saavat olla asiakirjassa.
Suosittelen yleisesti ottaen lyhyen HTML5-ilmoituksen käyttämistä.
<!DOCTYPE html>
Modernit selaimet tunnistavat sen ja näyttävät sivut oletustilassa, joissa sitä käytetään. Sinun tulisi kuitenkin todella määrittää vain niitä HTML-elementtejä, jotka ovat sallittuja HTML5:ssä. Lisätietoja siitä myöhemmin.
Jatketaan html-elementin kanssa.
<html lang="de"> … </html>
Tämä elementti ympäröi asiakirjan. Huomattavaa on attribuutti lang. Sen avulla määritetään asiakirjassa käytetty kieli. Tässä muutamia lang-lyhenteitä saksankielisille alueille.
• de – Saksa (oletus)
• de-ch – Saksa (Sveitsi)
• de-at – Saksa (Itävalta)
• de-lu – Saksa (Luxemburg)
• de-li – Saksa (Liechtenstein)
Englannin kielestä on muuten vielä enemmän erilaisia lang-lyhenteitä.
• en-us – Englanti (USA)
• en-gb – Englanti (Iso-Britannia)
• en-au – Englanti (Australia)
• en-ca – Englanti (Kanada)
• en-nz – Englanti (Uusi-Seelanti)
• en-ie – Englanti (Irlanti)
• en-z – Englanti (Etelä-Afrikka)
• en-jm – Englanti (Jamaika)
• en – Englanti (Karibian saaret)
Olipa sitten kaksimerkkinen lyhenne de, gb jne. käytössäsi vai haluatko mieluummin käyttää aiemmin esitettyjä yhdistettyjä lyhenteitä, on lopulta sinun päätettävissä. Suosin itse kaksimerkkisiä.head-elementin sisällä odotetaan asiakirjan otsikkotietoja.
<head> … </head>
Head-tiedoissa on hieman kankea nimi, mutta se selittyy nopeasti. Tänne laitetaan mm. sellaisia asioita, jotka kuvailevat dokumenttia tarkemmin. Näitä ovat esimerkiksi otsikko ja käytetty fontti. Tässä voi myös liittää skriptejä ja tyylitiedostoja sekä määrittää yleisiä metatietoja. Mutta niistä lisää myöhemmin.
Tärkeintä on etenkin title-elementti.
<title>Ohjeita kuvankäsittelyyn Photoshopilla, verkkosuunnittelu ja valokuvaus - PSD-Tutorials.de </title>
Sen avulla määritetään otsikko, jota tarvitaan monissa eri paikoissa.
• Selaimen otsikkorivillä.
• Kun selaimessa luodaan kirjanmerkki.
• Ja tietysti otsikolla on erittäin tärkeä rooli hakukoneoptimoinnissa.
Näet siis, kuinka tärkeä otsikko on. Valitkaa otsikko mahdollisimman lyhyt ja ytimekäs.
Sivun perusteellista kuvausta varten voit käyttää meta-tietoja. Lisätietoja seuraa vielä.
Jatketaan käytetyllä fontilla.
<meta charset="UTF-8" />
Tämä tieto on tärkeä selaimille. Vain tällä tavalla ne tietävät, miten merkit on koodattava, jotta ne näkyvät oikein. Vain oikean merkistökoodauksen määrittämisellä esimerkiksi ääkköset ja erikoismerkit näkyvät oikein. Yleensä tässä annetaan arvoksi UTF-8.
Nyt siirrytään itse sivun sisältöön eli siihen, mitä kävijät todella näkevät. Kaikki tämä määritellään body-elementissä.
<body> … </body>
Lisäämällä esimerkiksi seuraavaa avautuvan <body>-tagin ja sen sulkevan tagin väliin, voit havainnollistaa:
<h1>PSD-Tutorials.de</h1>
Asiakirjan tulisi sen jälkeen näyttää tältä:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Esimerkki HTML5-runkorakenteesta - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Tallenna muutokset ja avaa tiedosto selaimessa.
Kuten näet, PSD-Tutorials.de näkyy nyt todellakin. Olet siis luonut oman ensimmäisen HTML-dokumenttisi.
