XHTML-elementit, CSS-perusteet ja kurssin järjestelyt - Luento 1
- Luentotaltiointi
- Kurssin käytännön järjestelyt
- XHTML-dokumentin runko
- XHTML:n elementit
- CSS-perusteet
- Lisätietoa
Luennolla käydään läpi kurssin järjestelyihin liittyvät asiat ja kerrataan XHTML-elementtejä (erityisesti lomakkeet).
Luentotaltiointi
- sovellukset01.avi 198M
- sovellukset01.mp3 37M
- sovellukset01.wmv 47M
Kurssin käytännön järjestelyt
Kts. etenkin WWW-sovellukset-kurssin etusivu sekä viikkotehtäväohjeistus.
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
ISO-8859-1
- taiUTF-8
-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