Webin mother language

WWW-sivut tehdään sivunkuvauskielellä, jota kutsutaan HTML (Hyper Text Markup Language) -kieleksi.

Sen merkinnät vaikuttavat siihen, miten teksti, kuvat ja muut elementit sijoittuvat www-sivulla sekä miten www-selainohjelma pystyy tulkitsemaan kokonaisuutta.

Kaikki selaimet eivät näytä sivuja samalla tavalla, joten hyvään lopputulokseen pääseminen edellyttää web-standardien mukaisen sisällön luomista sekä sivujen oikeellisuuden testaamista .

- WWW-dokumentti tallennetaan html-formaattiin, jolloin tiedoston nimen loppuosa on .html
- WWW-dokumentin ulkoasu muotoillaan Cascadin Style Sheeteillä eli lyhyemmin CSS-tyylitiedostoilla.
- HTML-dokumentteja voi kirjoittaa millä tahansa tekstieditorilla (notepad, brackets...), yleensä käytetään erityisiä HTML-editoreja esim. Dreamweaveriä

W3school-html intro


WWW-sivut ovat HTML5:sta

HTML5 dokumentin tunnistaa heti koodin alussa dokumenttityypin määrittelystä ja se on yksinkertaisesti <!DOCTYPE html>.

Sen jälkeen tulee <html>-tagi

ja sitten head-osa,

jota seuraa body-osa.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Graafinen suunnittelu</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
      <body>        
 <h1>HTML-dokumentin tekeminen</h1>        
 <p>Tämä on kappaletekstiä, jonka jälkreen tulee linkki wikipediaan</p>  
 <a href="http://fi.wikipedia.org/ target=_blank">Linkki Wikipediaan</a>
</body> 
</html>

Yleisimmät html-tagit

Tagit w3schoolissa

- html

- head

- body

- Otsikot: h1 ... h6   

 <h2> tämä on väliotsikko</h2>

- Leipäteksti: p     

<p>TekstiäTekstiäTekstiäTekstiäTekstiäTekstiä</p>

- linkit: a      

<a href="http://fi.wikipedia.org/">Wikipedia</a>

- kuvat: img   

<img src="kuva.gif" alt="Kuvassa puimuri pellolla" />

- divit (eli laatikot): div

<div >tähän laatikon sisältöä</div>

- listat: ul , ol

<ul>
<li>Kynä</li>
<li>Kumi</li>
<li>Vuolukone</li>
</ul>

- taulukot: table

<table>
<tr>
<td>1</td>
<td>Maanantai</td>
<td>Ilta</td>
</tr>
<tr>
<td>2</td>
<td>Tiistai</td>
<td>Aamu</td>
</tr>
<tr>
<td>3</td>
<td>Keskiviikko</td>
<td>Ilta</td>
</tr>
</table>

HTML-tagien attribuutit ja syntaksi

Tagit

HTML-dokumentissa rakenne merkitään käyttämällä elementtejä eli tageja. Ne kirjoitetaan pienillä kirjaimilla.

Esim. <a href="yhteystiedot.html" >Yhteystiedot</a>

Elementtejä ovat mm. kappaleet, otsikot, taulukot, linkit, kuvat jne.

Attribuutti

HTML-elementit voivat sisältää attribuutteja (parametreja), jotka tarkentavat miten elementti esitetään. Attribuutin jälkeen tulee yhtäsuuruusmerkki ja lainausmerkeissä attribuutin arvo. Eri attribuuteilla on erityyppisiä arvoja kuten:.
- numeroita, esim kuvan leveys
- prosenttiarvoja, kuten taulukon solun leveys
- tekstiä, kuten linkeissä lähdetiedostot tai alt-tekstit

ss

Taas kerran w3school


Ja vielä ista yleisimmistä tageista

!DOCTYPE 	 	Defines the document type
a	        	Defines a hyperlink
article	   	Defines an article
audio	   	Defines sound content
body	    	Defines the document's body
br	      	Defines a single line break
code	    	Defines a piece of computer code
div	     	Defines a section in a document
em	      	Defines emphasized text 
figcaption	   Defines a caption for a figure element
figure	 	Specifies self-contained content
footer	 	Defines a footer for a document or section
h1 to h6	 	Defines HTML headings
head	   	Defines information about the document
header	 	Defines a header for a document or section
html	   	Defines the root of an HTML document
img	     	Defines an image
li	      	Defines a list item
main	   	Specifies the main content of a document
meta	 	Defines metadata about an HTML document
meter	 	Defines a scalar measurement within a known range (a gauge)
nav	     	Defines navigation links
object	 	Defines an embedded object
ol	     	Defines an ordered list
p	     	Defines a paragraph
pre   	 	Defines preformatted text
section	 	Defines a section in a document
strong	 	Defines important text
table	 	Defines a table
td	    	Defines a cell in a table
title	 	Defines a title for the document
tr	   	   Defines a row in a table
ul	        Defines an unordered list
video	 	Defines a video or movie
    
    

Perussivuston koodaus

Seuraavassa kuvassa on hyvin perus www-sivu. Sivu koostuus 3:sta osasta:
- ylhäällä on NAVI
- sitten tulee HEADERI
- sen jälkeen varsinainen sisältö
- ja loppuun pannaan yleensä FOOTERI

Esimerkki 1.

Sivun html-koodi

Sivun css-koodi


Perussivustosta kehitetty seuraava versio

Esimerkki 2. Sivun main-osaan on nyt lisätty 3 korttia. Kuinkahan ne koodaillaan??

Wrapperit, kortit ja kuinka ne koodaillaan tähän esimerkkiin

Ja sitten koodataan yksi kortti, joka sen jälkeen kopioidaan kolmeksi. Tietysti tämän jälkeen muutetaan kortin muuttuvat sisällöt kopioituihin kortteihin.

Ja kortin html-koodi kuvana:

Ja sitten kortin Css-koodi kuvana:

Sitten pitää tehdä "Lue lisää" linkeille sisäsivut. Sisäsivun ulkoasu voi olla seuraavanlainen:

Koodataan vielä galleria-sivu (nimeksi galleria.html) ja muutetaan keskimäinen ylänavi Galleriaksi. Sivu on seuraavan näköinen:

galleria

 

 

 


CSS ja mitä sillä voi tehdä?

Tekstin tyylimääritteet

Yleisimmät tekstin muotoiluun käytettävät CSS-ominaisuudet

    ●font-family
    ●font-size
    ●color
    ●text-align
    ●text-decoration
    

Taustan tyylimääritteet

Taustan ulkoasun ominaisuuksia voidaan määritellä kaikille sivun elementeille (koko sivulle, diveille, muille laatikoille, otsikoille, linkeille, taulukoille, tekstikappaleelle ym. ...)

Esimerkki:

    body {	
		background-image:url('kuvat/taustakuva.jpg');	
		background-repeat:no-repeat;
		background-position:top center;	
		}
        

Asemointi

Sivujen sisältöä ei tuoda CSS:llä vaan html:llä (!!!!poikkeus: kuvia voi tuoda elementin taustakuvana)

 

Sivuelementtien hierarkia ja CSS-sääntöjen periytynyt

Css-ominaisuuksista osa periytyy, osa ei.

Periaate: Tekstin ominaisuudet periytyvät, taustavärit, taustakuvat, paddingit , marginaalit, borderit eivät periydy.

Hierarkia "sukupuussa"

'Emoelementti' eli 'vanhempi' (Parent Element). Dokumenttipuussa emoelementillä on vähintään yksi lapsielementti, jonka se sulkee sisäänsä, niin ettei vanhemman- ja lapsielementin väliin jää muita elementtejä.

'Lapsielementti' (Child Element). Lapsielementti on emoelementin jälkeen ensimmäinen alatason elementti niin, ettei emo- ja lapsielementin välissä on muita elementtitasoja.

'Sisarelementti' tai 'viereissisarelementti' (Adjacent sibling Element). Sisarelementeillä tarkoitetaan emoelementin jälkeläisiä, jotka ovat kaikki keskenään samalla tasolla, eivätkä ne koskaan ole sisäkkäin.

'Jälkeläiselementti' eli 'perillinen' (Descendants Element). Emoelementin sulkemat kaikki alemmantason elementit, kuten lapsielementit sekä myös lapsenlapsielementit, ovat aina perillisiä emoelementtiin nähden. Tasoja voi olla useita.

ss


CSS3:n uusimpia ominaisuuksia (advanced)

  1. Reunaviivan kulman pyöristys - border-radius
  2. Teksti- ja laatikkovarjot - box-shadow + text-shadow
  3. Läpinäkyvyys RGBA:n avulla - box_opacity
  4. Kuvareunukset - border-image
  5. Gradientit ilman kuvia
  6. Animaatiota CSS:n avulla
  7. Media Queryt
  8. Taustakuvan koko - background-size

 

W3Scool advanced css

Esim.

.textbox1 {width: 150px;
border: 3px solid #03C;
background-color: #9F0;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
-webkit-box-shadow: 5px 5px 11px 2px #999;
-moz-box-shadow: 5px 5px 11px 2px #999;
box-shadow: 5px 5px 11px 2px #999;
}

Nämä ovat melko kryptisiä ulkoa opittaviksi ja niitä voi koodailla webissä olevilla monilla generaattoreilla esim.

css3generator.com/

CSS-valitsimet ja säännöt

CSS:llä voit muuttaa HTML-elementtien ulkoasua. Tämän tekemiseksi tyylitiedostossa on valittavamuokattava sivun osa ja sovellettava niihin tyylisääntöjä.

  1. CSS voi valita HTML-elementit tagin, luokan, ID:n tai näiden yhdistelmien mukaan.

1. Elementtivalitsin

Elementtityyppivalitsimissa tunnisteena toimii tietyn html-elementin nimi.

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	color: #003399;
	margin-top: 1.2em;
	margin-bottom: 0.9em;
	margin-right: 10px;
	margin-left: 15px;
	line-height: 1em;
}

 

2. Luokka-valitsin (class)

Luokka on itse määritelty tyylisääntö, joka ei kohdistu suoraan mihinkään html-elementtiin, vaan se kohdistuu sille elementille, jolle on lisätty tämä luokka , joka siis antaa elementille nimen.

Luokan määritys alkaa aina pisteellä ( . ), jonka jälkeen tulee luokan nimi.

.nosto {
	text-decoration: none;
	font-size: 0.95em;
	font-family: Impact;
	display: block;
	color: #333399;
	padding-top: 9px;
	background-image: url(pics/navi_valittu.gif);
	background-repeat: repeat-x;
}

3. ID-valitsin

Id-valitsin on elementin yksilöllinen tunniste ( voi olla samalla sivulla vain 1 sama id-nimi). Id-valitsin alkaa aina 'risuaita-merkillä' ( # ), esim.

#aikajana{
	height: 400px;
	width: 680px;
	border: 1px solid #CCC;
	}

4. Pseudo-valisimet

Linkkejä varten on olemassa pseudoluokat

a:hover linkki, joka on valittuna

a:hover {color: #0ff;}

a.visited katsottu linkki

a:visited {color: #0f0;}

 

5. Jälkeläisvalitsin

Jälkeläisvalitsimella tarkoitetaan html-elementtiä, joka on toisen elementin sisässä ja saa vain silloin tietyn muotoilun.

#navi a{
font-family: Tahoma, Arial;
font-size: 11px;
background-color:#ccc;
}

td .kursivoitu {
font-family: Tahoma, Arial;
font-size: 12px;
font-style: italic;
}


CSS-laatikkomalli

CSS-tyylimäärittelylle keskeisen “laatikkomalli”-käsitteen avulla kaikkia HTML-elementtejä voidaan ajatella laatikoina, jotka koostuvat neljästä toisiaan ympäröivästä osasta.

laatikkomalli


WEB-TAITON HISTORIA

1. Taulukot (! ei käytetä enää taitossa, kylläkin datan esittämisessä)

Aluksi taulukot olivat ainoa tapa taittaa sivujen leiskaa. Css:ää ei vielä ollutkaan. Taulukoiden kanssa tuli kyllä toimeen, mutta oli se aika sekavaa koodia.

2. Kellutus (! korvataan nykyään flexboxilla)

Vuoden 2004 paikkeilla alettiin käyttää CSS:ää ja sen mukana kellutusta (float). Kellutetun elementin isäntäelementti ei normaalisti huomioi kellutusta omassa korkeudessaan. Toisin sanoen kelluttamisen käyttö taittoon on aikamoista nysväämistä ja vaatii kikkailua..

3. Flexbox

(suositellaan nykyään, kun halutaan rinnakkaisia elementtejä)

Flexboxin avulla pystytään ratkaisemaan paljon aiempien web-taittojen ongelmia. Näihin lukeutuvat muun muassa sisältöelementtien järjestäminen, elementtien keskittäminen, keskinäisten suhteiden ja sijainnin määrittäminen sekä sisällön rivittäminen responsiivisesti.

CSS-tricksin kaikenkattava ja paras flexbox-sivu:

4. Positionti

Elementtejä saatiin omiin tasoihinsa eli kerroksittain. Käytetään yleensä absoluuttusta positiointi ja fixed positiointia.

Absoluuttinen positiointi: absolute-määrittää elementin sijoittumisen pikselin tai prosenttien avulla sivulle muun sisällön päälle. Sijoittuminen lasketaan asemoidun emo-elementin suhteen (emoelementti täytyy olla joko suhteellisesti-, absoluuttisesti- tai kiinteästi asemoitu).


   #video {  
position: absolute;   
top: 400px;   
right: 40px;   
width: 240px;   
height: 180px;
z-index:20;
 } 

W3school opas

5. Grid (Ei kuulu tähän kurssiin)

2-ulotteinen sarake- ja rivitaitto järjestelmä.

Gridi-opas css-tricseiltä

Google Fonttien lisääminen

1.Mene osoitteeseen :

http://www.google.com/fonts

2. Valitse sieltä fontti ja lisää collectioniin painamalla plus-painiketta

3. Avattavasta ikkunasta voit kopioida linkin google fonttiin; liitä se html-sivun headeriin

	
       

4. Samasta löydät myös fontin tiedot css-tiedostoon