Ensimmäinen sivu

Tee kansioosi uusi kansio nimeltään kotisivu harjoitus.

Html:ää voi ohjelmoida pelkällä apuohjelmia löytyvällä muistiolla, eli ei ole välttämättä tarpeellista ladata mitään ohjelmaa. Komennot aloitetaan aina ns. alkutägillä joko tulee merkkien < > väliin ja lopetetaan yleensä lopputägiin, joka tulee merkkien </ > väliin. Komennot voi kirjoittaa isolla tai pienillä kirjaimilla.

Harjoittele html-kielen alkeita kirjoittamalla koodi muistioon. Lisää koodiin uusi osa sitä mukaan kun niitä harjoituksessa tulee. Lisättävä osa on aina kursivoitu.

Tekstin kirjoittaminen ja tallennetaminen.

Alkuun laitetaan aina

<html>

<body>

ja loppuun komentojen lopetukset

</body>

</html>

Otsikot tehdään käskyllä <h1> Tähän otsikko </h1> tai <h5>tekstiä</h5> voit käyttää myös kaikkea numeroita h1:n ja h5:n väliltä.

Käskyllä <p> voidaan aloittaa uusi kappale (tämä tagilla ei tarvitse lopetusmerkkiä) eli tässä on esimerkki alusta:

<html>

<body>

<h1> Minnan sivut </h1>

<p> Hello world!

</body>

</html>

Tallenna työsi Kotisivu harjoitus-kansioon nimellä index.html (pääsivun nimi)

Avaa työsi selaimeen.

2. Lihavoinnit, rivinvaihdot ja otsikon keskittäminen

Jos haluat lihavoida tekstiä, niin lihavoitava teksti laitetaan komennolla

<b> lihavoitava </b>.

Rivinvaihdot komennolla <br>. Tämä komento ei tarvitse lopputägiä.

Otsikon keskittämiseksi laitetaan otsikko-tägiin (h1) määritys align=center

Taas esimerkki:

<html>

<body>

<h1 align=center>Minnan sivut</h1>

<p> Hello world! <br>

<b> olen paras</b>

</body>

</html>

Tallenna työsi. Katso selaimessa, muista päivittää selain!

3. Taustaväri ja kuvat

Taustaväri laitetaan käskyllä bgcolor, joka laitetaan bodyn jälkeen.

Kuva pitää olla ensin tallennettuna samaan hakemistoon kuin itse sivu. Etsi netistä koulumme kuva ja tallenna se kotisivu harjoitus-kansioosi nimellä koulu.jpg.

Kuvat lisätään tai oikeastaan linkitetään koodilla <img src=”kuva.muoto”>

<html>

<body bgcolor=”yellow”>

<h1> Minnan sivut </h1>

<p> Hello world!
<br>

<b> OLEN PARAS </b>
<br>

<img src="koulu.jpg">

</body>

</html>

4. Linkit

Linkit ovat taas hiukan monimutkaisempi esim.<a href=”avattavatiedosto.muoto”> klikkaa </a>

Lisää kuvan lisäyksen jälkeen rivi:

<a href=" https://peda.net/laukaa/sk " > Kouluni kotisivu </a>

Ensimmäinen sivu alkaa olla jo valmis, mutta näyttää ehkä vähän tylsältä. Keskitetään kaikki osat sivun keskellä ja lisätään viiva otsikon alle. Lihavoidaan vielä OLEN PARAS- teksti.

5. Keskittäminen ja viivan lisääminen

Lisää otsikon alle koodi. (Huomaa, että olen kirjoittanut osan komennoista isolla. Sillä ei ole mitään merkitystä, komennot erottuvat vaan peremmin tekstistä.)

<hr> tekee viivan Ei tarvitse lopputagia!

Määreet WIDTH=60% määrää viivan pituuden prosentteina sivusta

ALIGN=center keskittää viivan

COLOR=”green” määrää viivan värin.

6. Keskittäminen ja lihovointi

Lisää OLEN PARAS-tekstiin

<b align=center>OLEN PARAS!</b>

<b> </b> lihavoi välissä olevan tekstin. Huomaa, että teksti on tagien ulkopuolella.

Määre ALIGN=center keskittää tekstin.
Keskittäminen:

Linkki ja kuva keskitetään <center> </center> tageilla.

7. Ulkoinen otsikko

Ulkoinen otsikko näkyy selaimen yläreunassa. Se lisätään heti <HTML> tagin jälkeen ns. <HEAD> osioon <TITLE> tagilla.

<HEAD>
<TITLE>Ulkoinen otsikko</TITLE>

</HEAD>

Koodisi pitäisi näyttää nyt tältä:

<HTML>

<HEAD>
<TITLE>Ulkoinen otsikko</TITLE>

</HEAD>

<H1 ALIGN=center>Minnan sivu</H1>

<p ALIGN=center>Hello world!<br>

<b ALIGN=center>OLEN PARAS!</b>

<p>

<center><a href=" https://peda.net/laukaa/sk " > Kouluni kotisivu</a></center>

</BODY>

</HTML>

Koodissa sisennykset ja tyhjät rivit ovat vain selkeyttämässä koodia. Komennot soi kirjoittaa isoilla tai pienillä kirjaimilla.