8.1 Perusrakenteena HTML - Aurinkoverkko

Verkkosivutekniikka

HTML-dokumentti eli verkkosivu rakentuu HTML-kielellä (Hyper Text Markup Language) merkkauskielellä kirjoitetusta sisällöstä. Merkkauskielellä merkittyjä sivun sisältöelementtejä kuten kuvia ja tekstiä voidaan muotoilla CSS- muotoiluilla (Cascading Style Sheet).

Sisällön merkkaus ja muotoilut

Sivuston yksittäinen sivu on HTML-dokumentti, jonka sisältö on merkattu HTML-merkkaus (”koodin”) avulla. HTML:llä kerrotaan selaimelle millainen elementti on kyseessä. Koska elementit on merkattu HTML-tagilla niihin voidaan kohdistaa muotoiluja CSS-määritysten avulla. HTML-tagit kertovat siis mikä elementti on kyseessä ja CSS-määrityksillä annetaan elementille ominaisuuksia, kuten fontille väri, fonttikoko tms.

HTML = Sivun sisällön merkkauskieli.

CSS = HTML-merkkauksen muotoilukieli.

HTML-sivun rakenne

HTML-dokumentin eli sivun koodaus koostuu sarjasta sisäkkäisiä elementtejä.

Sivun rakenteen peruselementtejä ovat:

<html>, jonka sisällä on koko sivun koodaus.
<head> -tagien sisällä on koko sivun metatieto. Metatieto on koodia, joka ei näy sivun selaajalle millään tavoin.
<header> on tagi, jonka sisällä ovat sivun ylätunnisteen sisältö, kuten sivuston navigaatio. WordPress-sivustolla headerin koodaus on erillisessä tiedostossa ja ladataan jokaisen sivun yläosaan.
<body> on tagi, joka kietoo sisälleen sivun sisällön. Sisältö saattaa sisältää myös <aside> -tagin, joka WordPressissa tavallisimmin sisältää vimpaimet (Widgets)
<footer> on tagi, jonka sisällä on sivun alatunnisteen sisältö.

Avaa esimerkki tyhjästä nettisivusta selaimen uuteen välilehteen.

<html>

<head>

<title>Sivun otsake, joka näkyy selaimen välilehdessä.</title>

</head>

<body>

</header>

<main>

<h1>Sisällön otsikko</h1>
<p>Tekstikappale.</p>
<p>Toinen tekstikappale.</p>

</main>

</body>

</html>

HTML-muotoilun syntaksi – Tagit

HTML-merkkauksissa noudatetaan joitain sääntöjä. Syntaksi terminä tarkoittaa kirjoitusasua eli merkinnällä on oltava jokin tietty tarkka kirjoitusasu. Elementti alkaa aloitustagilla ja se on aina päätettävä lopetustagilla. Jos tagia ei päätetä se jää voimaan ja saattaa vaikuttaa myös seuraavan elementin muotoon.

Tavallisesti tageissa käytetään ”nokka”-merkkejä molemmin puolin merkkauksen ympärillä. Lopetustagissa kirjoitetaan kauttamerkki (/) kirjaimen eteen.

Aloitustagi:

<p>

Lopetustagi:

</p>

Tämän tekstin koodissa on tässä SANASSA hyperlinkki, joka on jäänyt päättämättä.

Tekstikappale vaihtuu ja kuten huomaat hyperlinkki jatkuu tähän uuteen tekstikappaleeseen, koska sitä ei ole päätetty lopputagilla

Tässä tekstissä seuraavassa SANASSA on oikein lopputagilla päätetty hyperlinkki.

Tekstikappale vaihtuu normaalina tekstinä, eikä linkki vaikuta kappaleeseen.

HTML-merkkauksessa voidaan käyttää myös elementin sisäisiä merkkauksia. Sisäinen merkkaus tulee aina päättää ennen ympäröivän elementin päättämistä. Esimerkkinä kappale-elementin sisällä voidaan tekstin jokin osa merkata vahvennetulla tekstillä, jolloin vahvennetun tekstin merkkaus tulee päättä lopetustagilla ennen tekstikappaleen lopetustagia.

Sivun koodia voidaan ja kannattaa kommentoida. HTML-koodissa kommentointi esiintyy tagien

<!−− ja > sisään. Kommentoinnissa tulee myös muistaa kommentin päättäminen tagilla >, sillä jos se unohtuu loppu sivustosta lakkaa näkymästä.

<p>Tässä tekstikappaleessa seuraava lause on vahvennetulla tekstillä mutta se on päätetty virheellisesti vasta tekstikappaleen lopetustagin jälkeen: <strong>Lause on vahvennetulla tekstillä.</p></strong>

<!--Tämä on kommentointia koodissa, joka ei näy sivulla, vaan esiintyy pelkästään sivun lähdekoodissa.>

<p>Tässä tekstikappaleessa lause on vahvennetulla tekstillä ja se on päätetty oikeaoppisesti: <strong>Lause on vahvennetulla tekstillä.</strong></p>

Tavallisimpia HTML-tageja

HTML:ssä sivun sisältö laitetaan tagien sisään. Tageilla kerrotaan selaimelle mikä ja minkä luonteinen sisältö on kyseessä. Tagi mahdollistaa myös, että sisältöä voidaan muotoilla CSS:n avulla kohdistamalla muotoilut haluttuun tagiin.

[lvca_accordion style=”style2″][lvca_panel panel_title=”Leipäteksti (Paragraph)”]

<p>Lorem</p>

Tavallinen tekstielementti, jonka sisällä on yksi tekstikappale

<i>Lorem</i>

Tekstielementti, joka muuntaa tekstin kursivoiduksi (italic). Tekstielementti kiedotaan tavallisesti normaalin <p> elementin sisään.

<b>Lorem</b> tai <strong>Lorem</strong>

Tekstielementti, joka muuntaa tekstin lihavoiduksi (bold). Tekstielementti kiedotaan tavallisesti normaalin <p> elementin sisään.

<span>Lorem</span>

Tekstin keskellä voidaan tehdä <span style=”color=#ff0000;”>erityisiä muotoiluja</span> ja liittää elementtiin suoraan muotoiluja div-elementin tavoin.

[/lvca_panel][lvca_panel panel_title=”Listaelementit”]

<ul><li>Lorem</li></ul>

Numeroimaton lista.
Merkinnän rakenteessa ul (unordered list) ympäröi li (list) -listaelementtejä.

<ol><li>Lorem</li></ol>

Numeroitu lista.
Merkinnän rakenteessa ol (ordered list) ympäröi li (list) -listaelementtejä.

[/lvca_panel][lvca_panel panel_title=”Otsikot (Heading)”]

<h1>

Pääotsikko, jota saa jokaisella sivulla olla vain yksi kappale.

<h2> <h3> <h4> <h5> <h6>

Alaotsikot, joita voi esiintyä sivulla useita kappaleita.

Otsikoiden käyttäminen sivulla

Otsikoissa kannattaa käyttää hierarkiaa. H2-otsikon alaisena voi olla H3-elementtejä ja sen alaisuudessa H4-otsikoita jne. Mitä suurempi otsikkoelementin numero on sitä pienempi otsikko on.

[/lvca_panel][lvca_panel panel_title=”Lohkoelementit”]

<div id=”selektori”></div>

Div-elementillä voidaan merkata elementtikokonaisuuksia. ID-elementin selektori tulee olla yksilöllinen sivulla ja sitä ei tule käyttää useampaan kertaan.

<div class=”selektori”></div>

Div luokkaelementillä (class) voidaan merkata elementtikokonaisuuksia ja samalla selektorilla merkattuja div-luokkaelementtejä voi olla sivulla useampia.

<div style=”CSS-määrittelyt”></div>

Div elementtiin voidaan asettaa suoraan muotoilut, jolloin ne vaikuttavat divin sisällä oleviin elementteihin.

[/lvca_panel][lvca_panel panel_title=”Kuvat ja linkitys”]

<img src=”kuvan domain (url)” alt=”vaihtoehtoinen teksti” />

Kuva lisätään sivuille img src (Image Screen) elementillä. Kuvaelementtiin tulee lisätä myös alt (alternative) vaihtoehtoinen teksti.

<a href=”linkin verkko-osoite (url)” target=”mihin avataan”>linkitettävä kohde</a>

Linkin merkintätapa HTML:ssä on kirjain ”a”. Linkin tiedot ilmoitetaan elementillä ”href” ja linkin kohde ilmoitetaan määrittelyllä ”target”. Kohteena voivat olla esimerkiksi ”_blank”, joka avaa linkin selaimen uuteen välilehteen. Ilman target-määrittelyä linkki avataan aina samaan välilehteen. Itse käytän tavallisesti sivuston sisäisten linkkien kohdalla samaan välilehteen avautuvaa ja ulkoiset linkit asetan avautumaan uuteen välilehteen.

[/lvca_panel][lvca_panel panel_title=”Rivinvaihto ja jakoviiva”]

<br /> tai <br>

Joskus saattaa tulla tilanne, jolloin on tehtävä tekstissä pakotettu rivinvaihto ja se tehdään ”br” (break) -elementillä. Kauttaviivalla oleva elementti on tuttu xhtml-standardista, jossa kaikki elementit tulee päättää ja niin myös yksittäiset elementit kuten tämä. HTML5-standardi ei vaadi kauttaviivaa merkkauksessa, vaan se voidaan merkitä jälkimmäisellä tavalla.

<hr /> tai <hr>

Jos haluamme luoda vaakasuoran jakoviivan esimerkiksi tekstikappaleiden väliin, se tehdään ”hr” -elementillä (Horizontal). Myös tässä elementissä kauttaviivalla oleva elementti on tuttu xhtml-standardista, jossa kaikki elementit tulee päättää kauttaviivalla ja niin myös yksittäiset elementit kuten tämä. HTML5-standardi ei vaadi kauttaviivaa merkkauksessa, vaan se voidaan merkitä jälkimmäisellä tavalla.

[/lvca_panel][/lvca_accordion]