1.03. Internetsivun osat

HTML koodin avulla kerrotaan internetselaimelle mitä näytetään ja miten teksti ja kuvat asettuvat sivulle.

Olen käyttänyt koodin kirjoittamiseen bluefish editoria. Kyseinen editori lisää rivinumerot itse, joten niitä ei ole tarvetta kirjoittaa. Voit kirjoittaa koodin millä editorilla haluat.

Kun olet kirjoittanut koodit, tallenna tiedosto nimellä tiedosto_1.html.

Avaa sen jälkeen oma tietokone ja selaa hakemistoon, jonne tallensit tiedoston. Kaksoisnapsauta tiedostoa, jolloin sen pitäisi avautua internetselaimeen.

Internetsivussa on muutama osa.

  1. Standardin määrittäminen
  2. Käytettävän merkkikoodin määrittäminen
  3. runko eli body
  4. tiedoston lopetus

Alla olevassa kuvassa on näkyvillä HTML koodit.

tiedosto_1_koodi

Alla oleva kuva on internetselaimesta otettu kuvaruutukaappaus eli print screen.

tiedosto_1_selain

Olen peittänyt ylläolevasta kuvasta hakemistopolun koska olet tallentanut omat tiedostosi eri paikkaan. Kaikki tämän oppaan tehtävät tallennan harjoituksia kansioon ja annan tiedostolle nimeksi tiedosto_x.
X tarkoittaa tehtävän numeroa.

Rivinumero Selitys
1

Standardin määrittäminen 
<!DOCTYPE html>

2

Käytettävän merkkikoodin määrittäminen 
<meta charset="utf-8">

3

runko eli body 
<body>

4

Internetsivulla näkyvä sisältö

5

rungon lopetustagi 
</body>

6

html tiedoston lopetustagi 
</html>

HTML koodissa eli tagissa on pääsääntöisesti neljä osaa

  1. tagin aloitusmerkki ”<
  2. komento
  3. attribuutti
  4. tagin lopetusmerkki ”>

Oikein muotoiltu HTML tag on esimerkiksi

<img src="kuva.jpg" alt="Kuvan malli">

Ylläolevassa koodissa kerrotaan selaimelle, että näytetään tässä kohdassa kuva, nimeltään kuva.jpg.

Vanhemmassa HTML-standardeissa attribuutti oli lähes jokaisessa tagissa, mutta HTML5 muutoksen myötä attribuutteja on siirretty tyylimäärittelyksi, mutta siitä lisää toisen sivun selityksissä.

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