| Kuvaus: | Voit edetä seuraavien harjoitusten mukaan. Alussa lähdetään XHTML-sivupohjasta, ja tekstin peruselementeistä, kuten otsikoista ja perustekstistä. Myöhemmin edetään väreistä ja yksinkertaisista fonttimuotoilusta monimutkaisempiin asetteluihin. Lue harjoitusten edetessä tarvittavia sivuja XHTML- ja CSS-osioista.
1. Merkkaa sivu XHTML-koodilla
Tarvittavat ohjeet Työskentely, Kirjoitussäännöt, sekä Perusteksti.
Alla on sivupohja johon on valmiiksi merkitty XHTML-tiedoston perusrakenne.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head><title>Sivun otsikko</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
Sivun sisältö.
</body>
</html>
- Maalaa koodi, ja valitse valikkoriviltä Muokkaa | Kopioi (Edit | Copy).
- Siirry editoriin, ja liitä valitsemalla Muokkaa | Liitä (Edit | Paste).
- Tallenna heti ensimmäiseksi tiedosto HTML-muodossa, esimerkiksi nimellä harjoitus.html, ja muista myös jatkossa tehdä välitallennuksia.
- Etsi sopiva yksinkertainen teksti, vaikkapa jokin kiinnostava uutinen, ja lisää se body-elementtiin väliin. Voit myös kirjoittaa itsestäsi lyhyen esittelyn.
- Merkitse tekstiin pääotsikko, alaotsikoita, ja tietenkin leipätekstikappaleet.
2. Lisää XHTML-elementtejä
Jatka edellisen tehtävän pohjalta. Lisää sivulle linkkejä, kuva, listoja, korostuksia, erikoismerkkejä, sekä muutama kommentti.
3. CSS: Kirjasimen laji, koko ja väri
Tarvittavat ohjeet Kirjoitussäännöt, Lisääminen, Fontti, ja Väri.
- Aloita CSS-tyylitiedosto, ja tallenna se vaikkapa nimellä tyyli_harjoitus.css. Liitä tyylitiedosto XHTML-dokumenttiin.
- Määritä koko sivulle uusi oletusfontti, pääteviivallinen Georgia, fonttikooksi 12 kuvapistettä. Etsi myös sopiva rivikorkeus.
- Määritä kaikille otsikoille sivun oletusfontista poikkeava fontti, pääteviivaton Verdana. Määritä jokaisen otsikkotason fonttikoko suhteessa sivun oletusfonttiin.
- Muuta linkkien väritystä.
4. Taustavärit ja ulottuvuudet
- Määritä sivulle taustaväri.
- Tee XHTML-dokumenttiin div-elementti siten, että se sijoittuu aivan body-elementin sisäpuolelle ja kattaa koko sivun sisällön. Anna elementille id:ksi "kokosivu".
- Anna elementille div#kokosivu sivun taustaväristä poikkeava taustaväri, ja kapea reunus.
- Lisää elementin div#kokosivu sisäreunoille täyttöä ettei teksti ole kiinni reunoissa.
- Anna elementille div#kokosivu vakioleveys, ja asettele se niin että se sijoittuu keskelle selaimen näyttöä selaimen koosta riippumatta.
5. Kuvien asettelu kelluttamalla
- Anna XHTML-sivulla kuvia ympäröiville div-elementeille id- tai class-attribuutti. Jos sivulla on useampia sekä oikealle että vasemmalle kellutettavia kuvia, kannattaa merkitä molemmat tyypit omilla class-attribuuteilla.
- Asettele CSS-tiedostossa kuvat sivulle float-ominaisuudella.
- Lisää kuvan ja tekstin väliin marginaalia määrittämällä se kuvaa ympäröivälle div-elementille. Huom! Lisää marginaalia vain niille sivuille joilla sitä tarvitaan.
6. Navigointilista
- Navigointilistan asettelemiseksi tee koko sivun kattavan div-elementin sisälle kaksi uuttaa div:iä: toinen sisällölle, toinen navigoinnille.
- Tee navigointilista ul-elementtinä, jonka li-elementeissä on linkit sivuston muille sivuille tai pääosioihin.
- Lisää koko sivun kattavalle div-elementille leveyttä esim. 200px.
- Määritä sisältöä ympäröivälle div-elementille navigointia varten 200px marginaalia vasempaan reunaan.
- Sijoita navigointilista vasempaan reunaan absoluuttisella sijoittelulla.
- Tarvittaessa osan koko sivun kattavan div-elementin CSS-määrityksistä voi siirtää sisältöä ympäröivälle div-elementille: esimerkiksi reunus, taustaväri ja täyttö.
|