HTML – Sivun perusrakenne
Jotta ymmärretään paremmin internetsivua ja sen sisällön rakennetta, on hyvä ymmärtää perusteet html-merkkauskielestä ja sen periaatteista. Seuraavassa tutustumme sivun eri osiin ja millä tavalla osat voidaan erottaa koodissa. Katsaus on todella pintapuolinen ja tarkoituksena on lähinnä vain oppia ymmärtämään sivun lähdekoodia ja kuinka sitä luetaan. Tämän sivun ohella kannattaa ehdottomasti tutustua w3school-sivuston tarjontaan, joka on mammuttimainen tietosivusto aiheesta.
Mitä HTML on?
HTML (HyperText Markup Language) on merkkauskieli, jolla määritellään internetsivun rakenne ja sisältö. Se ei ole ohjelmointikieli, vaan tapa kertoa selaimelle, mitä elementtejä sivulla on ja miten ne liittyvät toisiinsa.
- HTML koostuu elementeistä, jotka merkitään avaus- ja sulkutageilla:
<tagi>Jotain sisältöä</tagi> - Elementit voivat sisältää tekstiä, kuvia, linkkejä tai muita elementtejä.
- Selaimet tulkitsevat nämä merkinnät ja esittävät sisällön käyttäjälle.
Kaytetyimpiä HTML-tageja
perus tekstitagit
<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. Edellisessä on asetettu tekstin väri punaiseksi keskellä tekstikappaletta.
Listaelementit
<ul><li>Lorem</li></ul>
- Numeroimaton lista.
- Merkinnän rakenteessa
ul(unordered list) ympäröili(list) -listaelementtejä.
<ol><li>Lorem</li></ol>
- Numeroitu lista.
- Merkinnän rakenteessa
ol(ordered list) ympäröili(list) -listaelementtejä.
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.
Lohkomerkinnät – selektorit
<div id="selektori"></div>
Div-elementti on käytännössä lohkoeditorien perusta, sillä se kietoo sisäänsä kokonaisuuksia. Selektorina ID tulee aina olla yksilöllinen sivulla ja sitä ei tule käyttää useampaan kertaan.
<div class="selektori"></div>
Div luokkaselektorilla (class) voidaan merkata elementtikokonaisuuksia ja samalla selektorilla merkattuja div-luokkaelementtejä voi olla sivulla useampia. Sama div-elementti voi myös sisältää useita class-selektoreita.
<div style="CSS-määrittelyt"></div>
Div elementtiin voidaan asettaa suoraan muotoilut style-määrittelyllä, jolloin ne vaikuttavat vain divin sisällä oleviin elementteihin.
Kuvien html-merkkaus
<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>
Hyperlinkki
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.
Yksittäisiä merkintöjä
<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.
Elementtien sisäkkäisyys HTML:ssä
HTML-koodissa elementit asettuvat aina sisäkkäin. Helpoin tapa hahmottaa sisäkkäisyys on ajatella HTML-tunnisteita laatikoina, jotka ympäröivät sisältöä. Laatikot voivat sisältää tekstiä, kuvia tai muuta mediaa, ja joskus laatikko sijoitetaan toisen laatikon sisään. Näin syntyy sisäkkäinen rakenne.
Oheisessa esimerkissä näet, kuinka eri div-elementit muodostavat kerroksia. Sisimmässä laatikossa on otsikko ”Vaella kanssamme” sekä teksti ”Tarinat kuljettavat myös reiteille, jotka…”
HTML-merkkausta kirjoittaessa on tärkeää muistaa:
- Jokaisella elementillä tulee olla lopetustagi.
- Elementit asetetaan symmetrisesti sisäkkäin.
- Lopetustagi ei saa koskaan ulottua ympäröivän elementin lopetustagin ulkopuolelle.
<div class="range">
<div class="cell-lg-6 cell-md-7 cell-sm-8" data-caption-animate="fadeInUp" data-caption-delay="100"></div>
<div class="swiper__overlay swiper-overlay-end box-skew box-skew-var-2"></div>
<div class="swiper-overlay-item-1"></div>
<h2 class="yellow-text">Vaella kanssamme</h2></div>
<p class="yellow-text">Tarinat kuljettavat myös reiteille, jotka puuttuvat perinteisistä vaellusoppaista.</p>
HTML-dokumentin perusrakenne
Tietty perusrakenne toistuu kaikissa html-dokumenteissa. Miltei kaikilta sivustoilta löytyy header (ylätunniste), jossa tavallisesti ilmenee sivun navigointivalikko (menu). Footer eli alatunniste on lohko sivun alalaidassa , jonka alapuolella saattaa joskus sijaita subfooter-osa, jossa monesti esitetään sivuston copywrite-teksti. Header– ja Footer-osan välissä on sivun varsinainen sisältö-osa. WordPressissa juuri sisältö on osa, johon kaikilla sisältöeditoreilla luodaan sisältöä. Headerin ja footerin sisältöön vaikutetaan muualla WordPressin asetuksissa.
Sisältöosassa saattaa olla myös sivupalkki (aside) tavallisesti sivun oikeassa laidassa. Syy miksi sivupalkin paikka on oikeassa laidassa on se, että sivupalkki on tarkoitettu sivuhuomautustyyppiselle tiedolle, kuten sivustolta löydät myös tms. Sivupalkissa esitetään usein erilaisia vimpaimia (Widgets) WordPress-sivuilla. Lisäksi sivupalkin käyttö on ehkä yleisintä artikkelisivuilla. Oheisessa videossa pyritään havainnollistamaan html-dokumentin rakennetta tarkasteltaessa sivun lähdekoodia.
Avaa esimerkki tyhjästä sivusta ja tarkastele sivun rakennetta lähdekoodista selaimen kehittäjäntyökalulla.
Tyhjän sivun lähdekoodista voit huomata, että sivustolla käytettävä lohkoeditori generoi automaattisesti sivun alkuun div-elementin ja asetta sille luokkaselektorin content-wrapper. Selektori voi olla myös luokalla wrapper. Tällä tavoin merkattu div kietoo tavallisesti koko sisältöosan sisälleen.
<!DOCTYPE html>
<html lang="fi">
<head>
(Sisältää sivun metatiedot, kuten linkit CSS-tiedostoihin, muut meta-tagit, linkitykset yms.)
</head>
<body>
(Sivun näkyvä sisältö alkaa)
<header></body>(Sivun näkyvä sisältö päättyy)
(Sivun header ylätunniste, joka toistuu tavallisesti samanlaisena joka sivulla. Header osa sisältää yleensä päänavigoinnin ja logon yms.)
</header>
<main>
(Sivun pääsisältö kiedotaan usein main-tagien sisään. Main tagin sisällä voi olla myös aside. Main-tagi on sivun vaihtuvaa sisältöä. Se on myös sivun pääsisältö)<aside></main>
(Aside on sisällön toissijaista sisältöä. WordPressissä aside-elementtiä edustavat esim. widgetit (vimpaimet))
</aside>
<footer>
(Aside on sisällön toissijaista sisältöä. WordPressissä aside-elementtiä edustavat esim. widgetit (vimpaimet))
</footer>
</html>
Sivun metatiedot (head)
Sivun, toisin sanoen html-dokumentin, meta-tiedot sijaitsevat dokumentin <head> => </head>-tagien välissä. Metatiedot eivät tavallisesti näy selaajalle sivulla millään tavoin vaan ne ovat ikäänkuin sivuston aivot.
Metatiedot on merkattuna meta-tagilla seuraavaan tapaan:
<!DOCTYPE html>
<html>
<head></html>
<meta charset="utf-8"></head>
<meta name="description" content="Pituudeltaan max.160 merkkiä pitkä (155-160) kuvausteksti sivun sisällöstä.">
<meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34=">
<title>Sivun otsake (max.70 merkkiä, pyritään 55-60 merkkiä)</title>
<meta name="robots" content="noindex,nofollow">
Sivun metatiedot head-osassa tarjoavat esimerkiksi hakukoneille tietoa sivusta ja sen sisällöstä ja hakukoneet ja sosiaalisen median alustat käyttävät tietoja sivun esittelemiseen hakutuloksissa tai jaettaessa sivu sosiaalisessa mediassa.
Metatiedot voidaan asettaa manuaalisesti mutta WordPress sisältää lisäosia, joilla voidaan metatiedot hoitaa ilman koodaamista. Lisäksi WordPress itsessään asettaa tiettyjä metatietoja, kuten sivun otsakkeen (<title>).
Sivun head-osiossa voidaan asettaa myös linkittää sivulle ulkoisia tiedostoja (esim. CSS-muotoilutiedostot ja Javascript jne). Head-osioon voidaan myös asettaa suoraan sivun sisäistä CSS-muotoilukoodia ja ladata sivuston ulkoisista lähteistä toimintoja käyttöön (esim. fontteja).
Lisätietoa HTML:stä
w3schools-sivustolla on erittäin laajasti tietoa html-merkkauksesta ja muista webteknologioista. Sivustolta löydät paljon myös harjoituksia html-merkkaukseen liittyen ja sivuston kautta voit suorittaa myös testejä omasta html-osaamisesta.
MDN Webdocs on toinen hyödyllinen verkkosivusto webteknologioihin liittyen.