Linkkejä html koodin ja css tyylien käyttöön
http://www.w3schools.com/
http://www.ohjelmointiputka.net/
http://html.com/
Nämä sivustot sisältävät runsaasti resursseja html koodin ja css tyylien opetteluun (1 Suom ja 2 Eng kielisiä.)(Itse opettelen mieluummin englanniksi koska koen sen helpommaksi opetella koodausta sen alkuperäisellä kielellä.)
<h2>Spectacular Mountain</h2><img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
Esimerkki koodin pätkästä jolla saadaan kuva sivulle
src="pic_mountain.jpg" Tarkoittaa kuvaa jota ollaan hakemassa tiedostoista.
style= merkitsee kuvan kokoa ja asettelua sivulle.
Valmiiden tyylimuotojen määritys:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h1,2,3,p,hr>... määritteet määrittävät mikä tärkeysjärjestys milläkin osalla sisältöä on.
a href, käyttötarkoitus
Html syntaksi
<a href="url">link text</a>
Paikallinen linkki
<a href="html_images.asp">HTML Images</a>
a href on tarkoitettu linkkejen luomiseen sivun paikalliseen sisältöön/ muille saman sivuston sivuille.
Ulkoiselle sivulle linkkaus (target)
(target) atrribuutti määrittää minne linkki tai sisältö avataan.
- _blank - Avaa linkin uuteen ikkunaan tai tabiin.
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
- _self - Avaa linkin samaan ikkunaan tai tabiin jossa se avattiin (default)
- _parent - Avaa linkin "isäntä ruutuun"
- _top - Avaa linkin täyttäen koko ikkunan
<a href="http://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
- framename - Avaa linkin nimettyyn "ruutuun".
Linkki kuvasta: <img>
Css tyylien käyttö:
Linjassa oleva tyyli:
<h1 style="color:blue;">This is a Blue Heading</h1>
Sisäinen Css tyyli:
<!DOCTYPE html><html><head><style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
Ulkoinen Css tyyli:
<!DOCTYPE html><html><head> <link rel="stylesheet" href="styles.css"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
Css tyylit pitä aina tallentaa muotoon .css !
kappaleenvaihto <p> ja <br> erot
Määrittää aloituskohdan = <p>
Määrittää yhden linjan välin = <br>
Sivut tallennetaan aina .html muotoon !
