Valikko:

Dokumentin perusmuotoilua

Seuraavassa allamme käsittelemään body-tagin sisäisiä muotoiluja, eli siis sitä, miten haluamme sivumme näkyvän.

Dokumentin kommentointi

Kirjoitettaessa HTML-koodia käy usein niin, että koodista tulee lukukelvotonta melko nopeasti. Tämän välttämiseksi kannatta käyttää selkeää rakennetta koodia kirjoittaessa. Lisäksi koodin tulkitsemisen apuna on tapana käyttää kommentteja. Kommentit eivät näy selaimessa, vaan selain hyppää automaattisesti yli kaiken mikä on kommenttimerkkien välissä.

Kommenttimerkit ovat myös usein apuna kun halutaan väliaikaisesti peittää jotain dokumentin lukijalta. Täytyy kuitenkin huomioida, että kommentit näkyvät dokumentin lähdekoodissa.

Kommentoinnin aloittaa <!-- ja lopettaa -->.

Jutun otsikko

Body elementtien väliin kirjoitettaessa yksi tärkeimmistä tageista on otsikko. Otsikkojen hierarkia on suuruusjärjestyksessä (suurin ensin) h1,h2,h3,h4,h5,h6. Esimerkiksi yllä oleva otsikko on kirjoitettu seuraavasti:

<h3>Jutun otsikko</h3>

Kappaleen kirjoitus

Kappalejako tehdään <p> tagilla ja lopetetaa normaalisti </p> tagilla. Vaikka usein lopputagi jätetäänkin kirjoittamatta, niin hyvään html-koodiin se kuuluu silti.

Parametriksi voidaan kappalejaolle kirjoittaa align ja sen arvoksi right, center tai left, jolloin kappaleen sijainti muuttuu vastaavaksi. (Huom! Jos parametria ei kirjoita, niin selain muotoilee oletusarvojen mukaan.)

Väliviiva ja rivinvaihto

Kappaletta voi jotella väliviivoilla komennolla <hr>. Huomaa siis, että väliviivalla ei ole lopetustagia, vaan Parametreja sillä on size (viivan paksuus), width (viivan leveys sivuun nähden), align (sijainti) ja noshade (poistaa varjostuksen).

Pakotetyn rivinvaihdon saa aikaan käskyllä <br />

Elementeillä <center> ja </center> voimme keskittä kaikki näiden välillä oleva.

Esimerkki:

Huomaa, että tageja voidaan tarvittaessa kirjoitaa sisäkkäin. 

<!doctype html>
<html>

<head> 
<title>
	Dokumentin otsikko
</title>
</head>


<body>

	<center>
	<h2>Jutun otsikko</h2>

	Esimerkiksi keskitetty aloitusteksti.
	</center>

	<hr align="center" width="50%" size="3" >
	
	<p align="center">	
	Tämä kappale tulee keskitettynä.
	</p>
	<p>
	Tämä kappale tulee oletusarvoisesti<br />
	vasempaan laitaan.
	</p>

</body>

</html>

Jutun otsikko

Esimerkiksi keskitetty aloitusteksti.

Tämä kappale tulee keskitettynä.

Tämä kappale tulee oletusarvoisesti
vasempaan laitaan.

Muita hyödyllisiä muotoiluja:



Kokeiluympäristö

Tehtävä: