Sivun perusrunko (Yksi tapa)

<html lang=”fi”>
(=Koko HTML koodin alkutägi, tuo lang fi voi olla hyvä suomenkieliselle sivustolle, jotkut ovat sitä mieltä ettei sitä tarvita)

<head>
(=Head alue sisältää otsikkoalueen kuvituksen/logo ym. titlen ja tyylitiedoston linkin, mahdolliset meta-og-määrittelyt, mahdollisen favicon-ikonin tiedostolinkin)

<meta name=”viewport” content=”width=device-width, initial-scale=1″>
(=Kännyköitä varten tehdään tämä, jotta skaalaa ikkunan leveyteen. Tämä löytyy DW:n valikoista Insert/HTML/Viewport)

<title> Maija Majavan Matkamuistelmat </title> 
(Hyvä järkevä sivua kunnolla kuvaava otsikko)

<link href=”tyylit.css”rel=”stylesheet” type=”text/css”
(=CSS-TYYLITIEDOSTON LINKKI tulee tähän)

</head>
(Headin lopputägi)

<body>
(Bodyn eli varsinaisen sisällön alkutägi)

<div class= ”container”> (Containerin alkutägi)
(=Usein tehdään container, jonka sisään tehdään ainakin header, nav, main ja footer, joiden leveydeksi tulee automaattisesti containerin leveys)

<header> sisältö <header>
(=Otsikkoalue. Mahdollinen otsikkokuva, logo ym tulee näiden tägien väliin tai määritellään headerille background-kuva)

<nav> linkit </nav>
(=Linkkialue linkkeineen. Naville ja sen sisälle tuleville linkeille tehdään muotoilumäärittelyt css:ssä molemmille, sekä alueelle, että linkeille erikseen siis. Sivun muut mahdolliset linkit määritellään sitten vielä erikseen. Navin linkit voidaan tehdä html:ään myös luettelona (kuten alla esimerkki), silloin navin sisällä olevalle luettelolle ja luettelon linkeille tehdään muotoilumääritykset myös erikseen)

<div class=”content”> esim main ja aside tulevatkin silloin tähän väliin </div>
(Sivun varsinaiselle sisällölle (esim. main, aside) voidaan tehdä oma aluemääritys )

<main> sisältö </main>
(=Main on sellainen ”pää-elementtialue” jonka sisään tulee sisältöä, joskus sivulle ei tule muta kuin main, jos sivulla ei ole paljon sisältöä. Mainin sisällä voi olla vielä erilaisia elemettejä, joille tehdään omat muotoilumäärittelynsä)

<footer> sisältö </footer>
(=Alaviitealue, jossa voi olla vaikka tekstiä, logoja, ikoneja. Niille tehdään css:ssä muotoilumääritykset kullekin lajille omansa, voivat olla p-kappaleina)

</div>
(Containerin lopputägi)

</body>
(Bodyn lopputägi)

</html
(Hhtml-koodin lopputägi)

TÄSSÄ KOKO KOODI:
(Kirjoita xxx:ien tilalle omat tiedot) Tässä on vasemmalla main-alue ja oikealla aside-alue. Mainissa on yksi kaksi tekstikappaletta ja kuva.
Asidessa on kuva ja yksi tekstikappale.
Toinen kuva on määritelty DIV ID ja toinen DIV CLASS. (Tuolla alempana niistä selitys)

Suurin piirtein tätä rakennetta olen käyttänyt sivulla teija.fi . (Hieman enemmän tekstikappaleita)
Voit tutkia sieltä miltä näyttää sen html:n ja lisäksi css.
Sivun ollessa auki selaimessa, klikkaa hiiren oikealla -Näytä sivun lähdekoodi. Html-koodissa css-tiedostonimeä klikkaamalla saat se auki.

<!doctype html>
<html lang="fi">
<head>
<link rel="shortcut icon" href="http://xxxxx.xx/favicon.ico" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="description" content="xxxxxxxxxxx "> 
<meta property="og:title" content="xxxxxxxxxx" />	
<meta property="og:type" content="website" />
<meta property="og:image" content="http://xxxxx.xx/ogkuva.jpg" />
<meta property="og:image:width" content="1200px"/>
<meta property="og:image:height" content="630px"/>
<title>xxxxxxxxxxxxx - Etusivu</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
</header>
<nav>
<ul>
<li><a href="index.html">Etusivu</a></li>
<li><a href="cv.html">Ceevee</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="vinkit.html">Vinkkej&auml;</a></li>
<li><a href="linkit.html">Linkkej&auml;</a></li>
<li><a href="english.html">English</a></li>
</ul>
</nav>
<div class="content">  
<main>
<h1>oma otsikkosi</h1>
<p>eka tekstikappalexxxxxxxxxx
</p>
<br>
<p>toka tekstikappalexxxxxxxx</p>
<br>
<div class="kuvaxxxx"><img src="xxx.xxx" alt="kuvaselitys"></div> 
</main>  
<aside>
<div id="aside img"><img src="pienikuva.jpg" width="170" height="170" alt="Teijan naamakuva"/></div>
<p>Tekstikappalexxxxx</p> 
</aside>  
</div>
<footer
</footer>
</div>
</body>
</html>

Sivulla on siis erilaisia elementtejä;

otsikoita, linkkejä, kuvia, luetteloita, taulukoita, tekstikappaleita ym. jotka sijoittuvat(”juoksevat sivulle”) ”peräkkäin” siinä järjestyksessä kun ovat html:ssä.

Kaikille tehdään tarvittavat muotoilumäärittelyt css-tiedostossa (myös bodylle ja containerille)

Muotoilumäärittelyjä ovat esimerkiksi fontit, fonttikoko, linkkien ulkonäkö/käyttäytyminen, fontin värit, kirjainvälistykset, rivinvälistykset, taustavärit, kuvan koot, reunaviivat, reuna-marginaali ja -padding, elementille varatun alueen korkeus- ja leveysmääriyksiä.

Elementeillä voi olla myös oletusarvoja, joita muutetaan esim. linkeistä pois oletusalleviivaus ja erilaisia oletusreunuksia halutaan usein pois.

Erilaisia alue-elementtejä bodyn sisällä

  • <main> </main> (”Pääkappale” joka on melkein aina sivulla)
  • <aside>sisältö </aside>  (Mainin viereinen kappale)
  • <article>sisältö </article> (Itsenäinen tekstikappale)
  • <section>sisältö </section> (Alue)
  • div-elementtejä, joista tuolla alempana lisää
  • <footer>sisältö </footer> Alaviitealue

Div ID ja Div CLASS on kaksi eri asiaa,
mitä ne ovat ja mitä eroa?

Div on jokin elementti nettisivulla, johon halutaan tehdä muotoilut css:n avulla.

Jos on vaikeaa näiden kahden erilaisen divin kanssa niin käytä pelkkiä classeja. Olen itsekin vähän pihalla näiden kanssa. Siis, että milloin pitäisi käyttää juuri nimenomaan Div ID:tä? No ehkä sekin joskus selviää

Div voi olla kahdenlainen: (ID tai CLASS)

  • Div ID
    • CSS-muotoilu viittaa YHTEEN elementtiin HTML-sivulla
    • näitä kutakin voi käyttää vain kerran html sivulla
      • HTML> <div id”container”>
      • CSS-> #container
  • Div CLASS
    • CSS-Muotoilu voi viitata yhteen tai MONEEN elementtiin html-sivulla
    • CLASS-viittaus pisteellä .
    • esim. halutaan sana:aan muotoiluja
      • HTML-> <div class=”sana”>sana</div>
      • CSS-> .sana}
    • Container voi olla myös Div CLASS
      • HTML-> <div class=”container”>
      • CSS-> .container

Huom!
body, header, main, aside, nav, footer; css:ssä ei tule koskaan mitään merkkiä eteen (ei siis risuaitaa eikä pistettä) ja html:ssä tulee esim. tägit <body> </body>

Muistisääntönä:
Itsekeksittyihin” CLASSEIHIN tulee siis aina PISTE; esim    .logo   .otsikko   .some

Huom!
ID-selectori voittaa aina vaikka CLASS olisi myöhemmin, vaikka yleensä jälkimmäinen voittaa css:ssä