Verkkotyökalut, SSI ja vaativaa CSS:ää - Demo 7
Seuraavaan on koottu kurssin eri osa-alueisiin liittyviä tehtäviä. Tehtävät voit tehdä haluamassasi järjestyksessä,
joten tee ensin tehtävät, joista koet olevan eniten hyötyä. Voit myös tehdä demo4:n tehtäviä, jos niitä jäi edellä tekemättä.
Taulukon muotoileminen CSS:llä
Seuraavissa kohdissa on tarkoituksena muokata XHTML-taulukkoa CSS:n avulla. Katso seuraavien tehtävien tuloksia useammalla selaimella, niin näet muutamia selainkohtaisia eroja taulujen muotoilussa.
- Kopioi esimerkkitaulukon lähdekoodi HTML-kittiin ja tallenna se haluamallasi nimellä U-levyasemalle.
- Avaa uusi tiedosto, tyhjennä se HTML-koodeista ja tallenna nimelle demo7.css.
- Tee CSS-tiedostoon tyylilohkot valmiiksi taulukolle (table), taulukon riville (tr), taulukon otsikkosoluille (th) ja taulukon muille soluille (td).
Seuraavissa tehtävissä lisätään tyylilohkojen sisään tyylien ominaisuuksia.
- Lisää koko taulukkoon taustaväri ja tekstin väri sekä selkeät kirjasimen määritykset.
- Lisää taulukon otsikkosoluille hieman erottuva taustaväri ja lisää kirjasimeen lihavointi (font-weight).
- Lisää taulukon muihin soluihin edellisistä erottuva taustaväri.
- Onko taulukon taustaväriä vielä näkyvillä?
- Määrittele jokaiselle taulukon ja solun rajalla ominaisuudet siten, että taulukosta ja sen soluista tulee kolmiulotteiset. Seuraavassa lyhyt esimerkki määrityksistä:
border-right: 2px solid #666666;
border-bottom: 2px solid #666666;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
- Muuta taulukon leveys 80 prosenttiin selainikkunan leveydestä ja korkeus 50 prosenttiin selainikkunan koosta.
Kokeile pituuden muuttumista, kun muutat selainikkunan kokoa. Korkeusasetus ei välttämättä toimi selaimessasi.
- Lisää taulukon sisältämät tekstit keskelle solua (text-align).
- Lisää taulukon otsikkotietojen tekstit solun alareunaan (vertical-align).
- Määrittele taulukolle hieman rajojen välistystä (border-spacing).
- Kokeile mitä vaikuttaa välistyksen (padding) lisääminen taulukon soluun.
- Keskitä taulukko sivulle lisäämällä taulukolle vasemman ja oikean reunan marginaaleiksi arvo auto.
- Aja css-tiedostosi läpi validaattorista ja korjaa mahdolliset virheet.
Lopuksi voit tutkia css-määrityksiä, joiden avulla esimerkkitaulukko on muotoiltu.
Verkkotyökalut
Siirry Command Promptiin (Start|Programs|Accessories|Command Prompt ja kokeile
seuraavia verkkotyökaluja.
Nslookup
Tutki nslookup-komennolla mikä on seuraavien koneiden oikea nimi ja ip-osoite. Tutkiminen onnistuu kirjoittamalla komentoriville
komennon jälkeen välilyönnillä erotettuna koneen nimi.
- www.jyu.fi
- appro.mit.jyu.fi
- www.funet.fi
- www.aussie.net.au
Traceroute
Tutki tracert-komennolla mitä reittiä pitkin verkkopaketit kulkevat käyttämäsi
koneen ja www.w3.org-koneen välillä.
tracert www.w3.org
Tutki vastaavalla tavalla mitä reittiä bitti kulkee seuraaviin koneisiin:
- www.jyu.fi
- appro.mit.jyu.fi
- www.funet.fi
- www.aussie.net.au
Ping
Kokeile Ping-komennolla kuinka hidas yhteys edellisessä tehtävässä tutkimiisi koneisiin
on.
ping www.w3.org
ipconfig
Tutki ipconfig-ohjelmalla käyttämäsi koneen verkkoasetuksia:
ipconfig /all
Server Side Includes (SSI)
Tutustu SSI:n käyttämiseen Luento 10:n esimerkkien avulla.
- Kopioi itsellesi html-kitiin seuraava mallikoodi:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<title>SSI-malli</title>
</head>
<body>
<h1>SSI-malli</h1>
<!--#config timefmt="%Y-%m-%e %T"-->
<p><strong><!--#echo var="LAST_MODIFIED"--></strong></p>
<!--#include virtual="linkit.ssi"-->
</body>
</html>
- Tallenna tiedosto ssi.shtml-nimelle. Huomaa, että tiedoston pääte on oltava
.shtml!
- Aloita html-kitissä uusi dokumentti johon kopioit seuraavan tekstin:
<p>
<a accesskey="A" href="/">Appro</a> |
<a accesskey="K" href="../../">Tietoverkot työvälineenä</a> |
<a accesskey="L" href="../../luennot/">Luennot</a> |
<a accesskey="D" href="../../demot/">Demot</a> |
<a accesskey="H" href="../../harkka/">Harjoitustyö</a> |
<a accesskey="M" href="/doc/">Moniste</a> |
<a accesskey="I" href="../../faq/">FAQ</a> |
<a accesskey="T" href="../../linkit/">Linkit</a> |
<a accesskey="S" href="..././tentit/">Suoritukset</a> |
<a accesskey="E" href="/palaute.html">Palaute</a>
</p>
- Tallenna tämä tiedosto linkit.ssi-nimelle.
- Kopioi kumpikin äsken tekemäsi tiedosto omaan atk-keskuksen www-hakemistoosi. Varmista, että kaikilla on tiedostoihin lukuoikeus.
- Kokeile selaimella miltä ssi.shtml-dokumentti näyttää, kun haet sen oman www-sivusi kautta.
Jos kaikki toimii oikein niin dokumentissa näkyy aika jolloin sen tallensit www-palvelimelle sekä
linkit.ssi-tiedostossa olevat linkit. WWW-palvelin päivittää nämä tiedot SSI-komentojen
tilalle aina, kun siltä pyydetään ssi.shtml-tiedostoa.
CSS ja lomakkeet
- Muotoile edelliskerralla tekemäsi lomakkeen ulkoasu siistiksi CSS:n avulla.
Voit katsoa vinkkejä luentoesimerkistä
(form.htm form.css).
CSS ja Asemointi (vaativa)
- Kirjoita xhtml-dokumentti, jonka sisällön asemoit CSS:llä samalla tavalla, kuin seuraavassa
kuvassa oleva esimerkkisivusto on asemoitu:
Voit käyttää myös esimerkkisivun sisältöä apunasi. Apua saat luento 9:n esimerkeistä.
Sivun testaamiseen kannattaa käyttää Mozillaa.
Varmista, että tekemäsi sivu skaalautuu kauniisti selaimen kokoa muutettaessa.
Voit käyttää apunasi sivun rakenteen hahmottamisessa mozillan dom inspectoria (Tools|Web Development|Dom Inspector. Avaa Dom Inspectorilla tekemäsi sivu niin voit selailla
sivun rakennetta DOM-puun muodossa ja Mozilla havainnollistaa Dom Inspectorin alaosassa mikä
kohta dokumentista on tutkinnan alla. Dom Inspectorin oikeasta laidasta voit valita mitä
ominaisuuksia haluat tutkia. Voit selata mm. CSS-sääntöjä (CSS Style Rules) tai laatikkomallia (Box Model). CSS-ominaisuuksien arvoja voi jopa muuttaa suoraan Dom Inspectorilla jos haluaa kokeilla miten
jonkin vaikuttaa sivun ulkoasuun.
Palkinto ahkerille
Palkkioksi ahkerasta demojen tekemisestä voit nyt käydä etsimässä
vanhoja koulukavereitasi koulukaverit-palvelusta :)