1.04. Otsikot, taustan väri, fontin väri, linkki

Toisessa internetsivussa lisätään sivulle sisältöä.

Tällä kertaa ensin selaimessa näkyvä lopullinen tavoite ja sen jälkeen sivuston koodi sekä selitykset.

tiedosto_2_selain

tiedosto_2_koodi

Rivin numero Selitys
1, 2, 10, 19 ja 20 Samat koodit kuin ensimmäisessä internetsivustossa.
Käytännössä siis jokaisen HTML -sivun peruskoodit.
3 ja 8 Tyylien määrittely osan aloitus ja lopetustag.
Aloitustag: <style>
Lopetustag: </style>
4 ja 7 CSS -standardin mukainen HTML tagin tyylien määrittely.
Huomaa aaltosulku auki ja aaltosulku kiinni.

Rivillä neljä aloitetaan body tagin tyylien määrittely.
Rivillä seitsemän lopetetaan body tagin tyylien määrittely.

5 CSS-standardin mukainen taustavärin määrittely
Huom: muokattavan tyylin nimen jälkeen tulee kaksoispiste(:) ja rivin lopussa tulee puolipiste(;)

Väreistä ja värien määrittelystä löytyy tietoa täältä

6 CSS -standardin mukainen fontin värin määritys
9 internetselaimen välilehdessä näytettävä sivun nimi
11, 12, 13, 14, 15 ja 16 Otsikkotasot 1 – 6.
Otsikkotaso 1 on tärkein otsikko, ja otsikkotaso 6 on vähiten tärkein otsikkotaso

Aloitustag: <h1>
Lopetustag: </h1>

18 linkki iltalehden internetsivuille.
Jos linkki ohjaa samassa kovalevytilassa olevaan tiedostoon
<a href="sivu.html">sivulla näkyvä teksti</a>
Jos linkki ohjaa muualla internetsissä olevaan tiedostoon
<a href="www.iltalehti.fi">Tästä napsautetaan kun halutaan iltalehteen</a>

Tehtävä:

Jos olet opiskelemassa Länsirannikon Koulutus Oy eli WinNovassa, niin ota kuvaruutukaappaukset koodista ja internetselaimen ikkunasta tekemiesi muutosten jälkeen. Tallenna ottamasi kuvaruutukaappaukset pdf tiedostoon. Pyydä opettaja tarkistamaan tehtäväsi omalta tietokoneeltasi.

  1. Muuta taustanväriksi haluamasi väri
  2. Muuta tekstinväriksi haluamasi väri
  3. Muuta internetselaimen välilehdessä näkyvä teksti ”Omanimesi – Toka sivu” tekstiksi. Kirjoita omanimesi kohtaan etu- ja sukunimesi
  4. Lisää toinen internetlinkki ja ohjaa se avaamaan duckduckgo hakukone

Comments are closed.

By continuing to use the site, you agree to the use of cookies. - - - - - - Jatkamalla sivuston käyttöä hyväksyt evästeet.
more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.
- - - - - -
Tällä sivulla käytetään evästeitä sivuston paremman toiminnan takaamiseksi. Jatkamalla sivuston käyttöä tai napsauttamalla "Accept" hyväksyt sivuston evästeet.

Close