XHTML-elementit, CSS-perusteet
Luennolla kerrataan XHTML-elementtejä (erityisesti lomakkeet).
Luentotaltiointi
XHTML-dokumentin runko
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" >
<head>
<title>Tähän sivun otsikko</title>
<link href="tahan_tyylintiedoston_nimi.css" rel="StyleSheet" type="text/css" />
</head>
<body>
<h1>Tähän pääotsikko</h1>
<p>Tähän tekstiä...</p>
</body>
</html>
Huomioitavaa syntaksista
- Elementin ominaisuudet
- tulevat aina elementin ensimmäiseen osaan,
- erotetaan välilyönneillä ja
- ovat aina muotoa
ominaisuus="arvo"
- Yksiosaiset elementit päättyvät aina
/>-merkinnällä:<link href="tahan_tyylintiedoston_nimi.css" rel="StyleSheet" type="text/css" />
- Elementtien aloitus- ja lopetustunnisteet eivät saa mennä "ristiin", vaan saman elementin tunnisteet toimivat kuin sulut:
<p>strong-elementti suljetaan <strong>ennen kappaleen loppua</strong>.</p>
- Listan sisällä ei saa olla toista listaa, vaan sisempi lista on tultava jonkin ulomman listakohdan sisälle:
<ul> <li>XHTML <ul> <li>Sisältö tekstinä</li> <li>Rakenne elementeillä</li> <li>XML-sovellus</li> </ul> </li> <li>CSS <ul> <li>Ulkoasu</li> <li>Oma syntaksi!</li> </ul> </li> </ul>
Merkkien koodaus
- Tekstissä olevat erikoismerkit on koodattava entiteeteillä kaikkialla XHTML-dokumentissa:
- & &
- < <
- > >
- Ääkkösiä ei tarvitse koodata ä ja ö -entiteeteillä, jos käytössä on
UTF-8,ISO-8859-1- taiISO-8859-1-merkistö. - URL:eissa olevat erikoismerkit on koodattava omalla tavallaan:
Merkki Koodi Välilyönti %20 ä %E4 ö %F6 å %E5 Ö %D6 Ä %C4 Å %C5 & %26 + %2b / %2f = %3d ? %3f
XHTML:n elementit
Yleisimmät elementit
Useimmiten käytettyjä peruselementtejä
Muita tekstiin liittyviä elementtejä
| Elementti | Selite | Esimerkki |
|---|---|---|
blockquote | Isot lainaukset | <blockquote cite="http://en.wikipedia.org/wiki/Xul">
<p>A XUL interface is typically defined to
consist of three discrete sets of components:</p>
<ul>
<li><em>Content</em>: The XUL document(s), whose
elements define the layout of the user interface.</li>
<li><em>Skin</em>: The CSS and image files,
which define the appearance of an application.</li>
<li><em>Locale</em>: The DTD documents,
which define <a href="/wiki/SGML_entity"
title="SGML entity">XML entities</a> for easy
<a href="/wiki/Software_localization"
title="Software localization">software localization
</a>.
</li>
</ul></blockquote> |
cite | Lähde | <p> Kuten Jukka Korpelan <cite>nyysiopas</cite> sanoo: <q cite="http://www.cs.tut.fi/~jkorpela/nyysit/4.4.html#spamspam"> Meilispämmiä vastaan ei kannata yrittää taistella ns. nospam-osoitteilla</q>. </p> |
q | Lainaus (keskellä kappaletta) | |
dl dd dt | Määritelmälista | <dl> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> <dt>XHTML</dt> <dd>eXtensible Hypertext Markup Language</dd> </dl> |
dfn | Määritelmä (keskellä kappaletta) | <p><dfn title="Dokumentin rakenneosa, esimerkiksi kappale tai otsikko.">Elementissä</dfn> on aina kaksi osaa: alku- ja lopputunniste.</p> |
abbr | Lyhenteet, jotka lausutaan kirjain kerrallaan | <abbr title="Cascading Style Sheets">CSS</abbr> |
acronym | Lyhenteet, jotka lausutaan sanana | <acronym title="North Atlantic Treaty Organisation"> NATO </acronym> |
code | Ohjelmakoodi | Esimuotoiltu teksti merkitään <code>pre</code>-elementillä. |
kbd | Syötettävä teksti | Syötä tunnus-kenttään <kbd>admin</kbd>. |
samp | Esimerkkituloste | <samp>Null pointer exception</samp> |
var | Muuttuja | Alusta <var>$found</var> arvolla <code>true</code>. |
Lomake-elementit
- Esimerkki kuvitteellisesta opiskelijavalintahakemuksesta - valitse View | Page Source
- Esimerkkejä lomake-elementeistä
HTML5
HTML5 on uusin versio HTML-merkintäkielestä ja tulee aikanaan korvaamaan XHTML 1.0/1.1:en.
- HTML5 sisältää uusia elementtejä:
- section
- article
- header
- footer
- dialog
- figure
- audio
- video
- progress
- nav
- meter
- time
- aside
- canvas
- Uusia tyyppejä input-elementille (lomakkeisiin):
- tel
- search
- url
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
- Lomakkeille PUT- ja DELETE-metodit
- Mahdollistaa SVG:n ja MathML:n upottamisen HTML-dokumenttiin (text/html)
HTML5 ei ole vielä niin hyvin tuettu, että sitä voisi vielä laajalti käyttää. canvas, video ja audio lienevät tuetuimmat elementit.
CSS-perusteet
Kirjoitetaan erilliseen tekstitiedostoon:
valitsin {
ominaisuus: arvo;
ominaisuus: arvoyksikkö;
ominaisuus: arvoyksikkö toinenarvoyksikkö;
}
toinenvalitsin {
ominaisuus: arvo;
ominaisuus: arvoyksikkö;
ominaisuus: arvoyksikkö toinenarvoyksikkö;
}
Yksiköt
| Yksikkö | Selite | Esimerkki |
|---|---|---|
| px | Kuvaruudun pikseli | border: 1px solid black; |
| em | Suhteessa lohkon oletusfontin kokoon | font-size: 1.2em; |
| % | Suhteessa toiseen arvoon, esim. pituuteen. Se mihin suhteutetaan, riippuu ominaisuudesta. | width: 80%; |
Pikseliarvoja ei tule käyttää sivun asemointiin kuin poikkeustapauksissa. Käytä mieluummin skaalautuvia arvoja (% ja em). Myöskään fonttikokoja ei tule asettaa pikseliarvoilla, vaan mieluiten em-arvoilla.
Tekstin ulkoasu CSS:llä
| CSS-ominaisuus | Selite | Esimerkki |
|---|---|---|
font | Kirjasimen asetukset | font: italic 1.5em "Trebuchet MS", Verdana, sans-serif; |
color | Tekstin väri | color: #F2BCA9; |
background-color | Taustan väri | background-color: white; |
background | Taustan kaikki ominaisuudet | background: url(kulmapala.png) no-repeat top left #FFE6BF; |
text-decoration | Viivat tekstissä | text-decoration: none; |
text-transform | Isot tai pienet kirjaimet | text-transform: uppercase; |
line-height | Rivin korkeus | line-height: 1.5; |
vertical-align | Pystykeskitys tekstirivillä (paikka riippuu tekstin korkeudesta) | vertical-align: middle; |
text-align | Tekstin keskitys | text-align: center; |
list-style | Listamerkintä | list-style: upper-roman inside; |
Valitsimet
| Valitsin | Selite | Esimerkki |
|---|---|---|
E |
Valitsee jokaisen elementin E. | h1 {
font-size: 2em;
font-style: italic;
text-align: center;
} |
E.luokka |
Valitsee elementin E, jos elementin E class-attribuutin arvo on luokka. |
.box {
background-color: white;
color: black;
} |
E#tunniste |
Valitsee elementin E, jos elementin E ID-attribuutin arvo on tunniste. |
#footer {
width: 80%;
line-height: 2;
} |
E F |
Valitsee elementin F, joka on elementin E jälkeläinen. | div.box h2 {
font-size: 0.9em;
text-transform: uppercase;
} |
E:hover |
Valitsee elementin E, jos elementti on kohdistettuna. | #header a:hover {
background-color: black;
color: #FFFF00;
} |
Käyttäjien kommentit