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-dokumentin ulkoasu muotoillaan Cascadin Style Sheeteillä eli lyhyemmin CSS-tyylitiedostoilla.
- WWW-dokumentti tallennetaan html-formaattiin, jolloin tiedoston nimen loppuosa on .html
- HTML-dokumentteja voi kirjoittaa millä tahansa tekstieditorilla, yleensä käytetään erityisiä HTML-editoreja esim. Dreamweaveriä

HTML5

Uutta html 5 -versiota on työstetty usean vuoden ajan ja sitä on alettu jo laajalti käyttää.S elaimet tukevat HTML5:tä hyvin.HTML 5 dokumentin tunnistaa heti koodin alussa dokumenttityypin määrittelystä ja se on yksinkertaisesti <!DOCTYPE html>

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

html5:n uusia ominaisuuksia

1. Uudet taitolliset elementit:
-header
-article
-nav
-section
-aside
-footer
-figcaption
2. Canvas elementti

3. Videon upottaminen
4. Lomake-elementit:
-kalenteri
-värivalinta
-liukusäädin
5. Geolocation paikannustoiminto
6. ym...

Yleisimmät (vanhat) html-elementit

- 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" />

- sivun osat: div

<div id="Content">Content for  id "Content" Goes Here</div>

- listat: ul , ol

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

- taulukko: 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

Elementit

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

Sivuelementtien hierarkia

ss

 

CSS ja mitä sillä voi tehdä?

Tekstin ja muiden elementtien muotoilu

Asemointi

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


CSS-valitsimet ja säännöt

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;
}

CSS-säännöissä ja dokumentissa olevat html-elementit muodostavat toisiaan vastaavan parin.

2. ID-valitsin

Id-valitsin on elementin yksilöllinen tunniste. Id-valitsin alkaa aina 'risuaita-merkillä' ( # ), esim.

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

 

3. Luokka-valitsin (class)

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

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

.valittu {
	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;
}

 

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;}

a:link katsomaton linkki

a:link {color: #f00;}

(sama kuin pelkka a )

a:active linkki, jonkä päällä on hiiri

a:active {color: #00f;}

5. Jälkeläisvalitsin

Jälkeläisvalitsimella tarkoitetaan html-elementtiä, joka on toisen elementin sisässä ja saa vain silloin tietyn muotoilun. Tätä valitsinta kutsutaan myös kontekstin (contextual selector) mukaiseksi valitsimeksi.

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

 

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

Luokka kursivoitu saa määrityksen vain kun se esiintyy <td> -elementin sisällä.

<td class="kursivoitu">tekstiä , tekstiä</td>

Jos luokka kursivoitu esiintyy muualla kuin <td> -elementin yhteydessä se ei ole kursivoitu.

Lyhyesti Valitsimista

CSS:llä voit muuttaa HTML-elementtien ulkoasua. Tämän tekemiseksi CSS:n on valittava HTML-elementit ja sovellettava niihin tyylisääntöjä.

  1. HTML-elementit voidaan valita tagin, luokan, ID:n tai näiden yhdistelmien mukaan.
  2. Useita CSS-luokka-sääntöjä voidaan kohdistaa yhteen HTML-elementtiin.
  3. Luokat ovat uudelleenkäytettäviä, kun taas samaa ID:tä voidaan käyttää vain kerran samassa www-dokumentissa.
  4. ID-tunnukset ovat tarkempia kuin luokat, ja luokat ovat tarkempia kuin tagit. Tämä tarkoittaa sitä, että ID:t ohittavat luokat, ja luokat ohittavat tagit.
  5. Useita valitsimet voidaan ketjuttaa yhteen tietyn elementin valitsemiseksi. Tämä kasvattaa valitsimen spesifisyyttä.
  6. !Important ohittaa kaikki muut säännöt
  7. Jos samalla säännöllä on useita valitsimia, niin ne erotetaan pilkuilla.

HTML-elementit layoutin rakentamisessa:

aa

Muutamia taittopohjia

ss

CSS-laatikkomalli

ss

WWW-kuvankäsittely

Kuvan koko ja resoluutio

Periaate:Jokainen kuvan pikseli vie yhden näytön pikselin.

Tee kuvasta kuvankäsittelyohjelmassa oikeankokoinen. Resoluutiosta ei tarvitse välitttää, vain kuvan mitoilla on merkitystä. Kuvan väriavaruus on oltava RGB ei CMYK.

Formaatit

Jokaisella kuvatiedostolla on oma formaatti. Formaatti välitetään tietokoneelle jokaisen tiedostonimen perässä olevalla kolmekirjaimisella tai neljäkirjaimisella lyhenteellä. Formaatteja ei voi myöskään muutella ihan vain yksinkertaisesti kirjoittamalla .jpg-formaatin paikalle .gif tai vastaavaa, jos yrität tätä niin käyttöjärjestelmä ei pysty avaamaan tiedostoa. Formaattien muuntaminen toiseksi onnistuu ainoastaan avaamalla kuva kuvankäsittelyohjelmassa ja tallentamalla se toisessa formaatissa.

Lyhyt muistisääntö www-formaateista

Export / Save for web Photoshopissa

Tee kuvan pakkaus ja formaatti-asetukset Photariss kohdasta File / Export / Save for web Photoshopissa

 

Kuvan koon muuttaminen

Kun rajaat (croppaat) kuvaa, varo muuttamasta mittasuhteita. Anna crop-työkalulle kuvan mitat ja sitten croppaa.