Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Koko: px

Aloita esitys sivulta:

Download "Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit"

Asta Laaksonen
7 vuotta sitten
Katselukertoja:

1 Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit

2 Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan sivun sisältö elementit, joista sivu muodostuu selainohjelma tulkitsee html-tiedoston ja esittää sen sisällön käyttäjälle jotkin sivuelementeistä edellyttävät webpalvelimen toimiakseen tiedosto tallennetaan tekstimuodossa htm- tai html-päätteiseksi Html-dokumentti sisältää tekstiä sivun rakenteen kertovan koodauksen mm. kappaleet, otsikot, kuvat, hyperlinkit, listat skriptejä (ohjelmointia), multimediaelementtejä

3 Html-dokumentin runko <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>html-dokumentin runko</title> </head> <body> <h1>elementit eli tagien käyttö</h1> <p>html-dokumentti muodostuu elementeistä, jotka merkitään tageille. Esimerkiksi uuden kappaleen alku merkitään p-tagilla. Kappaleen päättyminen merkitään /p tagilla.</p> </body> </html> Html-dokumentti alkaa ja päättyy Dokumentin otsikkoalue alkaa/päättyy Sivun varsinainen sisältöosio

4 Elementtien määrittäminen Elementit määritetään tageilla <tagin nimi> Yleensä elementti päätetään </tagin nimi> Esim. alla on body-, otsikko- ja kappaleelementit <body> <h1>elementit eli tagien käyttö</h1> <p>html-dokumentti muodostuu elementeistä, jotka merkitään tageille. Esimerkiksi uuden kappaleen alku merkitään p-tagilla. Kappaleen päättyminen merkitään /p tagilla.</p> </body>

5 Attribuuttien lisääminen elementteihin <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>html-dokumentin runko</title> </head> <body bgcolor= green > <h1>elementit eli tagien käyttö</h1> Body-elementin attribuuteilla voidaan mm. muuttaa taustaväri <p>html-dokumentti muodostuu elementeistä, jotka merkitään tageille. Esimerkiksi uuden kappaleen alku merkitään p-tagilla. Kappaleen päättyminen merkitään /p tagilla.</p> </body> </html> Lista yleisimmistä elementeistä (tageista) ja attribuuteista liitteenä Myös esim. osoitteessa

6 Tekstin muotoileminen Tekstin muotoillaan <font></font>-tageilla Keskeiset attribuutit size=1-8 -> tekstin koko numerona color= red -> tekstin väri Huom. br -> pakotettu rivinvaihto <p><h1>websivun tekstin ulkoasu</h1> <font size=1 color="red">tekstikoko 1</font><br> <font size=2>tekstikoko 2</font><br> <b><i><u>teksti voidaan lihavoida, kursivoida ja alleviivata haluttaessa.</b></i></u><br> Kun muotoilutagit on päätetty, tekstin muoto palaa oletukseksi.

7 Kuvan lisääminen Kuva lisätään <img>(</img>)-tageilla Keskeiset attribuutit src -> kuvan osoite / sijainti ja nimi alt -> kuvan sijaan näytettävä teksti <body bgcolor= green > <p><img src= alt= Kirja ></p> </body>

8 Hyperlinkin määrittäminen Hyperlinkki määritetään<a></a> -tageilla hyperlinkkinä toimiva alue (teksti, kuva) on em. tagien välissä Keskeiset attribuutit href= internet-osoite, johon siirrytään"> target="_blank -> avaa linkin uuteen ikkunaan <body bgcolor= green > <p>lentokoneiden kuvia voit katsella esim. <a href= target= _blank >Boeing n</a> sivuilla, mistä löytyy yhtiön tarjolla oleva tuotevalikoima.</p> </body>

9 Luettelon määrittäminen Tekstiin voidaan lisätä luettelo<ul></ul> -tageilla luettelon rivit lisätään <li> -tageilla Keskeiset attribuutit type=disc/square/circle -> määrittää luettelomerkin <p><ul type="circle"> <li>html 1.0 <li>html 2.0 <li>html 3.0 <li>html 4.0 <li>html 4.1 </ul></p>

10 Taulukot Websivulle voidaan määrittää taulukko luetteloa varten, tai taulukko voi toimia sivun asettelun apuna Taulukko määritetään<table></table> -tageilla taulukon rivi: <tr></tr> rivillä oleva solu: <td></td> esimerkki määrittelystä: <table > <tr> </tr> <tr> </tr> </table> <td</td><td></td> <td></td><td></td>

11 Taulukot Keskeiset attribuutit Taulukko: align=(center/right/left) - tasaus border=0-x -> reuna width=esim. 1200px cellspacing=luku solujen väli cellpadding=luku (solun reunus) Rivi Solu align, valign=vaaka-/pystytasaus nowrap=ei rivitystä align, valign <table width="1200" border="2" align="center"> <tr> <td width="30%">asiakkaan nimi</td><td width= 40%">Jäsenyys alkoi</td><td width= 30% >Kuva</td> </tr> <tr> <td>eki Aho</td><td> </td><td><img src= /kuvat/eki.jpg ></td> </tr> </table>

Samankaltaiset tiedostot

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006

H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin