HTML PERUSRAKENNE
<html>
<head>
Tänne sijoitetaan sivujen ohjauselementit
</head>
<body>
Tänne tulee sivujen näkyvä sisältö
</body>
</html>
-----------------------------------------------------
HTML ja CSS
HTML5 on nykyisin yleisesti käytettävä verkkosivujen koodaustapa. Siinä kaikki muotoilut tehdään CSS tyylitiedostoon ja itse html koodiin ei kirjoiteta mitään muotoiluja. Muotoiluihin viitataan koodissa html-tageilla, luokilla ja div-elementeillä.
HTML5 koodi kirjoitetaan pienillä kirjaimilla
--------------index.html-------------
<html>
<head><title>Keskitetty sisältö</title>
<link href="ktyyli.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="ksisalto">
<h1>Keskitetty sisältö</h1>
<p>Keskittäminen tapahtuu määrittämällä lohkolle tietty leveys, sekä asettamalla sivumarginaalit yhtä suuriksi. Tekstin tasaukseen liittyvät määrittelyt ovat mukana, jotta myös vanhemmat selaimet osaisivat lukea sivun oikein</p>
<p>Liquid layoutilla tarkoitetaan sitä, että kaikki elementit on pyritty määrittelemään suhteellisesti selainikkunan kokoon.</p>
<img src="http://img.avatv.fi/mn_kuvat/mtv3/helmi/minisaitit/kapalakerho/kissat/2012/03/1356545.jpg" />
</div>
</body>
</html>
--------------ktyyli.css-------------
body {
text-align:center;
}
#ksisalto {
width:35em;
margin-left:auto;
margin-right:auto;
text-align:left;
}
Tee vastaavat harjoitukset esim muistiolla/notepadilla ja palauta blogiisi. Huomaa, että html sivu tulee tallentaa .html tiedostopäätteellä ja css-tyylitiedosto .css, jotta ne toimisivat selaimella oikein
https://drive.google.com/file/d/1ogu0YWlrKKD5aQBWQoPDAdkJ2YJoyH_3/view?usp=sharing
Ei kommentteja:
Lähetä kommentti