XHTML-elementit ja kurssin järjestelyt - Luento 1
Luennolla käydään läpi kurssin järjestelyihin liittyvät asiat ja kerrataan XHTML-elementtejä (erityisesti lomakkeet).
Luentotaltiointi
Ongelmia videon katselussa?Kurssin käytännön järjestelyt
Kts. WWW-sovellukset-kurssin etusivu.
Huom! Etäopiskeluohjeistuksessa on tapahtunut pieniä muutoksia luentovideoon verrattuna. Etäopiskelijoiden on palautettava työnsä lähiopetuksen tahdissa, koska keskiviikkoisin tehtävät käydään läpi luennolla. 1.6. alkaen viikkotehtäviä voi palauttaa omaan tahtiin.
Huom! Kurssin esitietoina vaaditaan myös ITKY202 WWW-julkaiseminen tai vastaavat tiedot. XHTML- ja CSS-asioita kerrataan ensimmäisen viikon aikana.
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/2000/REC-xhtml1-20000126/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
- Luentoesimerkki kuvitteellisesta opiskelijavalintahakemuksesta. - valitse View | Page Source
- Esimerkkejä lomake-elementeistä.
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%; |
Tekstin ulkoasu CSS:llä
| CSS-ominaisuus | Selite | Esimerkki |
|---|---|---|
font | Kirjaisimen 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