Hätävälilyönti:
esim esim (esimerkeissä käytetty blockquotea)
Linkki validaattoriin: http://validator.w3.org/
<a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a>
Kuva
<img src="http://raita.sytes.net/logo.gif" alt="RSN-logo" width="140" height="40">
Linkki kuvassa
<a href="http://raita.sytes.net"><img border="0" src="http://raita.sytes.net/logo.gif" alt="RSN-logo" width="140" height="40"></a>
Linkki sivun toiseen osioon (samalla sivulla):
<a href="#L16">Linux 1.6 asennus</a>
<a name="L16">
Kommentit HTMLlässä: <!-- kommentti --> ja kommentit CSS-tiedostoissa: /* kommentti */ sekä kommentit PHP-tiedostoissa // tai #
XHTMLlässä pitää päättää myös imaget ja BR:än perässä on välilyönti sekä kauttamerkki!
<img src="http://raita.sytes.net/logo.gif" alt="RSN-logo" width="140" height="40"></img> <br />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> perussivu </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
kama tähän
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fi"
xml:lang="fi" >
Frameseteissä ei ole body-elementtiä.
Frameille voi antaa nimiä linkkejen targetteja varten <frame name="kehys1" src="1.html">
Muut targetit: _top (koko sivu), _self (ko. frame) , _blank (uusi ikkuna)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title> Framesetin otsikko </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="100px,*">
<frame src="lol.html">
<frameset rows="50%, 50%">
<frame src="lol2.html">
<frame src="lol3.html">
</frameset>
</frameset>
</html>
<iframe src="lol.html" width="300" height="100" frameborder="1">
<noframes>Ei toimii!</noframes>
TR=rivi , TH=otsikko , TD=normipäivä
Atribuutteja: border="1", width="100px", height="10%", align="right"
BR- ja muita atribuutteja voi tunkea myös TD:n sisälle
| otsikko | kamaa |
|---|---|
| kamaa2 | kamaa3 |
<table border="1" width="200px">
<tr><th>otsikko</th><td>kamaa</td></tr>
<tr><td>kamaa2</td><td>kamaa3</td></tr>
</table>
| td rowspan="2" | perus |
| perus2 |
<table border="1">
<tr><td rowspan="2">td rowspan="2"</td><td>perus</td></tr>
<tr> <td>perus2</td></tr>
</table>
| td colspan="2" | |
| normi | normi2 |
<table border="1">
<tr><td colspan="2">td colspan="2"</td></tr>
<tr><td>normi</td><td>normi2</td></tr>
</table>
CSS-tiedoston linkki head-elementtiin:
<link rel="stylesheet" href="tyyli.css" type="text/css">
Sisäinen style:
<style type="text/css">
kama
</style>
Tyylit rakennetaan sisäisiin ja ulkoisiin dokumentteihin samalla tavalla:
body {
font-family: verdana, arial, sans-serif;
color: red;
}
Class: stylessä esim. ".vihrea" ja sitten se attribuutiksi esim. P-elementtiin <p class="vihrea">
Vihreää tekstiä!
<style type="text/css">
.vihrea {color:green;}
</style>
*****
<p class="vihrea">Vihreää tekstiä!</p>
color, background-color, border(-top yms), margin(-top yms), padding(-top yms), text-align
Taustakuva: "background: #FFFFFF url(kuva.jpg);" , background-repeat -arvot: repeat, repeat-x , repeat-y, no-repeat
koska a (ankkuri) on linkki; a:link , a:visited
Sijoitus (position:) attribuutit: static, relative, absolute ja fixed.
Lisää attribuutteja löytyy osoitteesta http://www.w3schools.com/Css/css_reference.asp
<div style="position:absolute; left:0px; top:0px;">
kama (esim. kuva tai flash)
</div>
Tunge CSS-styleen esim. classiin atribuutti z-index. 0 on oletusarvo.
<style type="text/css">
img.alakuva {z-index: -1;} <!-- position olisi myös hyvä määrittää tässä -->
</style>
*****
<img class="alakuva" src="../logo.gif" width="140" height="40">
<p>RSN R0ckz0r!</p>