XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa:
Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue), joka määrittelee dokumentissa käytettävän merkistön ja XHTML:n version. (XML - Wikipedia) Tehtävä2: Ota käyttöön skandinaavinen merkistö (ensimmäinen rivi tiedostoon): <?xml version="1.0" encoding="iso-8859-1"?> lisää seuraavaksi tiedostotyyppi. Strict - tyyppiä suositellaan käytettäväksi css:n kanssa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> tiedostotyyppi, mikä sisältää Strict tyypin lisäksi vanhentuneita tageja: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Tehtävä3: Valitse käytettäväksi jompikumpi edellisistä.
xhtml:n html-tagi Tehtävä4 lisää sivulle seuraava tagi: <html xmlns="http://www.w3.org/1999/xhtml"> Tämä poikkeaa HTML:n yksinkertaisemmasta muodosta siitä syystä, että XHTML on XML-pohjainen kieli. HTML-tagin jälkeen tulee <head>tagi. Huomaa, että edellä mainitun tagin jälkeen on pakko tulla <title>-tagi, eli siis näitten välissä ei saa olla muita tageja. Näin ollen <title> on myös XHTML-dokumentin pakollinen osa. <title> - osaan kirjoitettu teksti tulee näkyville selaimen yläpalkissa-
Tehtävä5, lisää seuraavat rivit: <head> <title>xhtml-harjoitus</title> </head> <body> <p>sivun materiaali tänne, tämä teksti on kappaletagien sisällä</p> </body> </html> XHTML:ssä kaikki tagit lukuun ottamatta DOCTYPE-määrittelyä tulee kirjoittaa pienin kirjaimin. Esimerkiksi tagi <head> voidaan kirjoittaa HTML-kielessä myös muodossa <HEAD>, mutta tämä merkintätapa on XHTML:ssä kielletty. Se kylläkin toimii kaikissa suosituimmissa selaimissa, mutta on kyllä parempi opetella koodaamaan W3:n normien mukaisesti.
Sivun koodin pitäisi näyttää nyt esimerkiksi tältä notepadissa: Tallenna tiedosto notepadissa ja avaa se selaimessa esim. kaksoisklikkaamalla tiedostonimeä resurssienhallinnassa: Näkymä selaimessa:
XHTML on, toisin kuin HTML, hyvin tarkka tagien sisäkkäistämisen (engl. nesting) suhteen. Sisäkkäistäminen on helpoin selostaa esimerkillä: <i><b>tämä on väärin.</i></b> Kuten huomaat, tagit on suljettu väärässä järjestyksessä. Tehtävä6, lisää seuraava rivi tiedostoon (tämä on oikea muoto): <i><b>tämä on oikein, lihavoitu ja kursivoitu teksti.</b></i> Tallenna xhtmlharjoitus.xhtml tiedosto ja päivitä selain. Näkymä selaimessa, kun edellinen rivi on lisätty <body> - osaan: XHTML:ssä kaikkien tagien täytyy päättyä (paitsi DOCTYPE). Esimerkiksi seuraava merkintätapa kävisi HTML:ssä, mutta XHTML:ssä se ei käy päinsä: <p>tämä on oikein HTML:ssä, mutta väärin XHTML:ssä Sen sijaan seuraava tapa on oikein myös XHTML:ssä: <p>tämä passaa molemmissa kielissä</p>
Lyhyet tagit XHTML:ssä: Tehtävä7, lisää sivulle viiva, rivinsiirto ja tekstiä: Rivinsiirto - tagi <br />rivinsiirto <br /> Viivanpiirto tagi: <hr /> Kuvan lisääminen (kuvan täytyy löytyä samasta kansiosta kuin xhtmlharjoitus.xhtml tiedoto) tallenna vaikka tämä kuva samaan kansioon harjoituksesi kanssa Tehtävä8, Lisää kuva sivullesi: <img src="esimerkki.png" /> <br />
Linkki Anchor <a>...</a> kun jokin tekstikohta halutaan linkiksi, ympäröidään linkkinä toimiva tekstikohta, merkkitasoinen elementti tai tyhjä elementti a-elementillä. href-attribuutti a-elementtiin olennaisena kuuluu sen alkutunnisteeseen lisättävä href-attribuutti, jossa kerrotaan linkitettävän kohteen sijainti. Tehtävä9, lisää sivulle linkki: <p>absoluuttinen linkki: <a href="http://www.metropolia.fi/">metropolia</a>.</p> Kun linkitetään sivuston ulkopuolelle, linkitettävä URL on annettava täydellisessä muodossaan, http://-alkuineen.
Sivuston sisällä linkki voidaan antaa suhteellisena <p>suhteellinen linkki <a href="toinen_sivu.xhtml">seuraava</a> -omaan tiedostoon </p> (jotta linkki toimisi, pitää samasta harjoituskansiosta löytyä myös tiedosto toinen_sivu.xhtml, - tee se myös notepadilla) : <?xml version="1.0" encoding="iso-8859-1"?> <!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"> <head> <title>toinen sivu</title> </head> <body> <p>toinen sivu</p> </body> </html> Tehtävä10, tee toinen sivu ja linkitä sivu aukeamaan xhtmlharjoitus.xhtml sivulta.
title-attribuutti Mikäli linkitettävä teksti tai kuva ei kerro riittävästi linkitettävästä kohteesta, kannattaa tämä kertoa a-elementtiin liitettävässä title-attribuutissa. title-attribuuttiin sisällytetty teksti tulee esille selaimessa kun hiiri viedään linkin päälle. target-attribuutti Linkin voi avata myös uuteen ikkunaan tai nykyisin uuteen välilehteen. Tämä toteutetaan target-attribuutille annettavalla arvolla _blank: <p>avaa <a title="metropolia" href="http://www.metropolia.fi/" target="_blank">koulun sivuille</a> uuteen selainikkunaan.</p> Tehtävä11: tee linkki sivullesi, missä käytät title ja target-attribuutteja.
Sivunsisäinen linkki Pitkän sivun alkuun voidaan tehdä esimerkiksi sisällysluettelo sivunsisäisellä linkityksellä. Linkeille tehdään kohteet antamalla alaotsikoille tai linkin kohteille yksilöivät id-attribuutit, joihin linkeissä viitataan: <h2 id= kakkosotsikko">väliotsikko</h2> <div id="alku"></div> (edelliset rivit tulevat siis xhtml tiedoston alkuosaan - <body> - tagin jälkeen) Linkki samalla sivulla tehdään, viittaamalla elementille annettuun id-attribuuttiin: <a href="#kakkosotsikko">linkitetty kohta</a> <a href="#alku">sivun alkuun</a> Edelliset rivit voit lisätä xhtmlharjoitus.xhtml tiedoston loppuun. Vastaavasti toisen tiedoston tiettyyn id-attribuutilla merkittyyn kohtaan: <a href="toinen_sivu.xhtml#valiotsikko">linkitetty kohta</a> Tehtävä12: tee sivunsisäinen linkki
Sähköpostiosoitteen linkittäminen Sähköpostiosoite lisätään sivulle yksinkertaisimmillaan seuraavasti: <a href="mailto:etunimi.sukunimi@esimerkki.fi">etunimi.sukunimi@esimerkki.fi</a> Ongelmana tavassa on se, että roskapostittajat keräävät webbisivuilta koneellisesti sähköpostiosoitteita listoilleen, joten tätä ei kannata käyttää. Yksi mahdollisuus sen sijaan on tehdä sähköpostiosoitteen sisältävä kuva, ja liittää se haluttuihin kohtiin sivuilla. Kuva_esim._tästä <p>postia minulle:</p> <a href="mailto:etunimi.sukunimi@esimerkki.fi"> <img src="sp.png" alt="sähköpostiin" /></a> Tehtävä13: tee sähköpostilinkki kuvasta.
Tyylitiedosto mukaan sivulle Seuraava rivi rivi ennen </head> - tagia: <link rel="stylesheet" type="text/css" media="screen" href="tyyli.css" /> tyyli.css tiedosto tehdään notepad ohjelmalla kuten aikaisemmat xhtml tiedostot. Tallennus edelleen samaan kansioon muiden sivustotiedostojen kanssa.
css tiedoston sisältöä: body {.huomautus tyylin käyttöönotto: xhtmlharjoitus.xhtml tiedostossa.
Tehtävä14: tee tyyli.css tiedosto ja linkitä se molemmille harjoitussivuille. Tee tiedostoon oma tyylimäärittely ja määrittele myös <h2> - tagille koko ja väri. Ota oma tyylimäärittely käyttöön xhtmlharjoitus.xhtml sivulla sekä tekemälläsi toisella sivulla. Palautus Moodleen: linkki etusivulle xhtmlharjoitus.xhtml, kun olet ensin siirtänyt sivut public_html kansioon z- asemalle. osoite on: users.metropolia.fi/~omatunnus/xhtmlharjoitus omatunnus on kirjautumistunnuksesi (username) koulun koneille.