WWW-sivustojen ja WWW-lomakkeiden luominen - Luento 2
- Luentotaltiointi
- Peruselementtien kertaus
- Hakemistorakenne
- Uusia lohkotason elementtejä
- Uusia tekstitason elementtejä
- WWW-lomakkeen tekeminen
- Hakulomake omalle sivulle Googlea hyödyntäen
- Hyödyllisiä laajennuksia ja aputyökaluja
Luennon aiheina ovat WWW-sivuston (HTML-puoli, tärkeimmät elementit) sekä WWW-lomakkeiden luominen.
Luentotaltiointi
- tiep161_s16_l2.wmv video, 152M
- tiep161_s16_l2.mp4 video, H.264-pakkaus, 96M
- tiep161_s16_l2.mp3 pelkkä ääni, 11M
Peruselementtien kertaus
Miten luon HTML-dokumentin?
HTML5-sivun pohja
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="iso-8859-1">
<link href="tyyli.css" rel="StyleSheet" type="text/css">
<title>Sivun otsikko</title>
</head>
<body>
...Sivun sisältö tänne...
</body>
</html>
HUOM! Yllä olevassa esimerkissä merkistö voisi olla vaihtoehtoisesti utf-8 (valinta riippuu mm. käytettävän editorin asetuksista). Jos taas validaattori herjaa merkistöstä, vaikka dokumentti olisi luotu käyttäen esimerkissä käytettyä iso-8859-1-merkistöä, vaihda merkistö muotoon windows-1252.
XHTML-sivun pohja
<?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>
<link href="tyyli.css" rel="StyleSheet" type="text/css" />
<title>Sivun otsikko</title>
</head>
<body>
...Sivun sisältö tänne...
</body>
</html>
Tällä hetkellä WWW-sivuja on järkevintä tehdä HTML5-kuvauskielellä, joka on tulevaisuutta ja jonka kehitystyö sai suosituksen aseman (Recommendation) syksyllä 2014. HTML5 kehitettiin korvaamaan vanhentunut HTML4 sekä XHTML. HTML5-kielessä on pyritty yhdistämään HTML:n ja XHTML:n hyvät puolet. Uusimpien selainten tuki HTML5:lle on jo hyvä.
Perusperiaatteet molemmissa kuvauskielissä (HTML5 ja XHTML) ovat samat; HTML5 toki tuo mukanaan sellaisia ominaisuuksia, joita XHTML:ssä ei ole. HTML5:sen mukanaan tuomia uusia ominaisuuksia käydään läpi seuraavalla luennolla. Jos on tottunut tekemään WWW-sivuja XHTML-kielellä, ei siitä ole pakko luopua; tällöin ei vain pysty hyödyntämään HTML5-kielen mukana tulleita uusia ominaisuuksia.
Tällä luentosivulla kaikki esimerkit ovat sekä validia HTML5:sta että XHTML:ää.
Hakemistorakenne
Miten voidaan luoda kokonainen sivusto?
- Luodaan HTML-dokumentti, josta viitataan (a-elementti) toiseen omaan dokumenttiin.
- Kun dokumentteja on paljon, on järkevää luoda sivuhierarkia (hakemistorakenne) ja toistuva navigointi dokumenttien välillä liikkumisen helpottamiseksi.
- Hakemistojen nimissä ei kannata käyttää ääkkösiä.
- Tällöin URL-osoitteessa pitäisi käyttää erikoiskoodausta, koska kaikissa maissa ei ole käytössä ääkkösiä.
- Jokaista sivua varten kannattaa luoda alihakemisto.
- Sivuun liittyvät tiedostot pysyvät yhdessä.
- Sivuun viittaaminen yksinkertaistuu.
- Sivuston käyttäjän navigointi helpottuu, osoite kertoo missä päin sivustoa mennään.
- Jokaisen dokumentin
title
kannattaa kirjoittaa ytimekkäästi.- Tärkein asia ensin.
- Voi kirjoittaa myös edellisten sivujen otsikot, jolloin title toimii navigointiapuna.
- Tallenna dokumentit index.html-nimellä.
- Tämä on Apache-palvelimen oletusasetuksissa dokumentti, joka näytetään ensimmäisenä, kun viitataan hakemistoon.
- URL-osoitteet pysyvät siistinä, ei tarvitse kirjoittaa .html-dokumentin nimeä.
- Palvelimen asetuksia voidaan muuttaa siten, että index.html-dokumentin sijaan näytetään jokin muu dokumentti. Tämä helpottaa keskitettyä ylläpitoa, sillä linkkejä ei tarvitse mennä muuttamaan.
Hyperlinkit - a
a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan. a-elementti pitää sijoittaa jonkun lohkotason elementin sisälle.
- Absoluuttisella osoitteella oleva linkki kurssin kotisivulle:
<p>Absoluuttisella osoitteella oleva linkki kurssin <a title="Opetusteknologia-kurssin kotisivu" href="http://appro.mit.jyu.fi/opetusteknologia/">kotisivulle</a></p>
- Puoliabsoluuttisella osoitteella oleva linkki kurssin ensimmäiselle luennolle:
<p>Puoliabsoluuttisella osoitteella oleva linkki kurssin <a href="/opetusteknologia/luennot/luento1/">ensimmäiselle luennolle</a></p>
- Suhteellisella osoitteella oleva linkki kurssin ensimmäisiin demoihin:
<p>Suhteellisella osoitteella oleva linkki kurssin <a href="../../demot/demo1/">ensimmäisiin demoihin</a></p>
Suhteellisella viittauksella voit viitata mihin tahansa oman hakemistorakenteen tiedostoon:
href= "muuli.html" Tämän hakemiston muuli.html-tiedosto (hakemisto, missä viittaava dokumentti sijaitsee) "testi/" Tämän hakemiston alihakemisto testi (oletuksena näytetään sivu index.html) "testi/muuli.html" Tämän hakemiston testi-alihakemiston muuli.html-tiedosto (ei kannata käyttää) "testi/kuva.png" Viite testi-alihakemiston kuva.png-tiedostoon (kuvat kannattaa säilyttää dokumentin kanssa samassa hakemistossa) "../" Isähakemisto (hakemisto, jossa nykyinen hakemisto sijaitsee) "../testi/" Isähakemiston alihakemisto testi
- Linkki tämän dokumentin hyperlinkeistä kertovaan lukuun Hyperlinkit - a
<p>Linkki tämän dokumentin hyperlinkeistä kertovaan lukuun <a href="#hyper">Hyperlinkit - a</a></p>
Otsikkoon, jonne dokumentin sisäinen linkki osoittaa, täytyy olla määriteltynä id-attribuutilla yksikäsitteinen arvo.
<h3 id="hyper">Hyperlinkit - a</h3>
Uusia lohkotason elementtejä
Lohkotason elementeillä merkitään tyypillisesti pidempiä tekstiosioita, kuten kappaleita, listoja ja taulukoita. Lohkotason elementin sisällä saa olla tai ei saa olla toisia lohkotason elementtejä riippuen elementistä.
Osoite - address
address-elementillä merkitään dokumentin tekijän yhteystiedot. Elementillä ei siis merkitä muita kuin dokumentin tekijän yhteystietoja.
Esimerkkikoodi:
<address>
<a href="http://www.ekonoja.net">Antti Ekonoja</a>
(<a href="mailto:antti.j.ekonoja@jyu.fi">antti.j.ekonoja@jyu.fi</a>)
<URL: <a href="http://www.ekonoja.net">http://www.ekonoja.net</a>>
</address>
Muotoilematon teksti - pre
pre-elementillä merkitään tekstilohkot, joissa on välttämätöntä säilyttää tekstin alkuperäinen kirjoitusasu. Elementtiä käytetään esimerkiksi ohjelmakoodilistauksissa.
Esimerkkikoodi (CSS-koodi) tietystä navigointipalkista:
<pre>
.navbar {
border-style: solid;
border-width: 1px;
background-color: yellow;
color: black;
text-align: center;
font-weight: bold;
width: 100%;
height: 2em;
padding: 0.5em;
position: fixed;
top: 0%;
left: 0%;
}
</pre>
Yleinen lohko - div
div-elementti on yleinen lohkotason elementti, jota käytetään merkitsemään erilaisia lohkoja. Esimerkiksi CSS-tyylejä käytettäessä div-elementtiä käytetään, jos ei löydetä vastaavaa kappaletason elementtiä. Seuraavassa esimerkissä on nähtävillä tällä sivulla olevan navigointipalkin lähdekoodi:
<div id="navbartop" class="navbartop"> <ul> <li><a accesskey="l" title="Luennot (ALT-l)" href="../../luennot/">Luennot</a></li> <li><a accesskey="d" title="Demot (ALT-d)" href="../../demot/">Demot</a></li> <li><a accesskey="o" title="Oppimistehtävät (ALT-o)" href="../../oppimistehtavat/">Oppimistehtävät</a></li> </ul> </div>
Määritelmälista - dl
- dl-elementti määrittelee varsinaisen listan.
- dt-elementti määrittelee määriteltävän termin.
- dd-elementti sisältää termin määrittelyn.
Esimerkki määritelmälistasta:
- CSS
- Cascading Style Sheets
- XHTML
- eXtensible Hypertext Markup Language
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>XHTML</dt>
<dd>eXtensible Hypertext Markup Language</dd>
</dl>
Uusia tekstitason elementtejä
Tekstitason elementeillä ilmaistaan lyhyiden tekstin osien rakennetta. Tekstitason elementit sijaitsevat lohkotason elementtien sisällä.
Määritelmät
- abbr - lyhenteet
Esimerkkejä: CSS HTML
<p> <abbr title="Cascading Style Sheets">CSS</abbr> <abbr title="Hypertext Markup Language">HTML</abbr> </p>
Esimerkit
- code - merkitään ohjelmakoodit
Esimerkkikoodi:
<code> <abbr title="American National Standards Institute">ANSI</abbr> <abbr title="Common Object Request Broker Architecture">CORBA</abbr> </code>
- samp - ohjelmien esimerkkitulosteet
[tjlahton@eppi syksy]$ ls -al total 30 drwxrwxr-x 4 tjlahton tt-opet 352 Oct 24 15:47 . drwxrwxr-x 6 tjlahton tt-opet 152 Aug 12 10:35 .. -rw-rw-r-- 1 tjlahton tt-opet 85 Aug 5 13:20 .wmlrc -rw-rw-r-- 1 tjlahton tt-opet 935 Oct 5 13:12 Makefile -rw-rw-r-- 1 tjlahton tt-opet 0 Aug 10 17:53 index.html -rw-rw-r-- 1 tjlahton tt-opet 3200 Oct 16 14:08 index.wmltmpl -rw-rw-r-- 1 tjlahton tt-opet 836 Sep 10 14:32 linkit.wml -rw-rw-r-- 1 tjlahton tt-opet 655 Sep 10 14:32 linkitetu.wml -rwxr-xr-x 1 tjlahton users2 63 Oct 9 13:06 mp3 drwsrwsr-x 6 tjlahton tt-opet 264 Oct 18 09:00 opiskeluymparisto -rw-rw-r-- 1 tjlahton tt-opet 2932 Oct 16 14:07 pohja.wmltmpl drwxrwxr-x 8 tjlahton tt-opet 456 Oct 22 09:32 tietoverkot
Esimerkin koodi:
<pre><samp> [tjlahton@eppi syksy]$ ls -al total 30 drwxrwxr-x 4 tjlahton tt-opet 352 Oct 24 15:47 . drwxrwxr-x 6 tjlahton tt-opet 152 Aug 12 10:35 .. -rw-rw-r-- 1 tjlahton tt-opet 85 Aug 5 13:20 .wmlrc -rw-rw-r-- 1 tjlahton tt-opet 935 Oct 5 13:12 Makefile -rw-rw-r-- 1 tjlahton tt-opet 0 Aug 10 17:53 index.html -rw-rw-r-- 1 tjlahton tt-opet 3200 Oct 16 14:08 index.wmltmpl -rw-rw-r-- 1 tjlahton tt-opet 836 Sep 10 14:32 linkit.wml -rw-rw-r-- 1 tjlahton tt-opet 655 Sep 10 14:32 linkitetu.wml -rwxr-xr-x 1 tjlahton users2 63 Oct 9 13:06 mp3 drwsrwsr-x 6 tjlahton tt-opet 264 Oct 18 09:00 opiskeluymparisto -rw-rw-r-- 1 tjlahton tt-opet 2932 Oct 16 14:07 pohja.wmltmpl drwxrwxr-x 8 tjlahton tt-opet 456 Oct 22 09:32 tietoverkot </samp></pre>
Muotoilut
- br - pakotettu rivinvaihto
Pakotettua rivinvaihtoa ei saa käyttää tyhjän tilan tekemiseen! Ei siis kahta tai useampaa br-elementtiä peräkkäin.
Esimerkkikoodi:
<address> Yliopistonopettaja, FT <a href="mailto:antti.j.ekonoja@jyu.fi">Antti Ekonoja</a><br /> Sähköposti: <strong><a href="mailto:antti.j.ekonoja@jyu.fi"> antti.j.ekonoja@jyu.fi</a></strong><br /> Kotisivu: <URL: <a class="url" href="http://www.ekonoja.net"> http://www.ekonoja.net</a>><br /> Työhuone: <abbr title="Agora C522.3">Ag C522.3</abbr><br /> Puhelin: <em>040 8053257</em> </address>
- span - yleinen merkkitason elementti, vrt.
div
.Käytetään vain paikoissa, joihin ei ole muuten sopivampaa elementtejä. Esim. vain ulkoasuun liittyvät määritykset.
Esimerkkikoodi:
<p>Tässä esimerkissä on <span class="erikois">erikoismuotoiltu osa</span>.</p>
WWW-lomakkeen tekeminen
Lomakelohko sijoitetaan body-elementin sisään form-elementillä:
<form action="http://palvelin/kasittelijaohjelma" method="post"> ... </form>
- action-attribuutti kertoo miten tai millä lomakkeelle syötetyt tiedot käsitellään.
- method-attribuutti kertoo tavan, jolla tieto lähetetään käyttäjältä käsittelijälle. Mahdollisia arvoja ovat post ja get.
- Esimerkki yksinkertaisesta lomakkeesta.
Lomakkeita tehdessä kannattaa pitäytyä pelkistetyissä, yksinkertaisissa muodoissa, eikä alkaa liikaa kikkailemaan elementeillä. Seuraavassa kuvassa on nähtävillä yleisimmät lomakkeella käytettävät elementit sekä input-elementin erilaiset tyypit. Seuraavassa käydään esimerkkien avulla tarkemmin läpi lomake-elementtejä ja niiden toimintaa.
HUOM! HTML5 tuo hyviä lisäominaisuuksia lomakkeisiin. Niitä käydään läpi seuraavalla luennolla.
Elementti | Koodi | Esimerkki |
---|---|---|
Kentän otsikko ja tekstikenttä | <label for="lempinimi" accesskey="L"> Lempinimi: </label> <input id="lempinimi" type="text" name="nick" maxlength="11" size="20" value="Kutsumanimi" title="Anna lempinimi, jota käytät palvelussa" /> | |
Salasana | <label for="salasana">Salasana: </label> <input id="salasana" type="password" name="passwd" value="" /> | |
Valintaruutu | <label for="kissa">Kissa</label> <input id="kissa" type="checkbox" name="lemmikit" value="kissa" checked="checked" /><br /> <label for="koira">Koira</label> <input id="koira" type="checkbox" name="lemmikit" value="koira" /> |
|
Valintanappi | <label for="mies">Mies</label> <input id="mies" type="radio" name="sukupuoli" value="mies" /><br /> <label for="nainen">Nainen</label> <input id="nainen" type="radio" name="sukupuoli" value="nainen" checked="checked" /> |
|
Tekstialue |
<label for="txtalue">Vapaat kommentit:</label> <textarea id="txtalue" name="kommentti" rows="5" cols="20">Sana on vapaa...</textarea> | |
Valintalista ryhmittelyillä |
<label for="ruokapaikat">Ruokailupaikkani</label> <select id="ruokapaikat" name="ruokap"> <optgroup label="Pizza"> <option value="kotipizza">Kotipizza</option> <option value="rax">Rax</option> <option value="rosso" selected="selected">Rosso</option> </optgroup> <optgroup label="Burger"> <option value="mcd">McDonald's</option> <option value="hese">Hesburger</option> </optgroup> </select> |
|
Lomake-elementtien ryhmittely | <fieldset> <legend>Valintoja</legend> <input type="text" name="testi" /> </fieldset> | |
Kuva-painike | <input type="image" src="laheta.png" name="laheta" alt="[Lähetä]" title="Lähettää lomakkeen tiedot" /> |
|
Tiedosto-painike |
<label for="filerequest">Valitse tiedosto:</label> <input type="file" id="filerequest" name="siirrettava_tiedosto" accept="application/rtf" /> |
|
Piilokenttä | <input type="hidden" name="ohjaus" value="lomake8" /> | |
Lähetä-painike | <input type="submit" name="laheta" value="Lähetä tiedot" /> | |
Tyhjennä-painike | <input type="reset" name="tyhjenna" value="Tyhjennä lomake" /> |
label - kentän otsikko
- label toimii lomake-elementtien otsikkokenttänä.
- label yhdistetään for-attribuutilla lomake-elementin id-attribuuttiin.
- Esimerkki label-elementin käytöstä
input - text, radio, checkbox, hidden ja submit
input-elementin avulla lomakkeelle saadaan toteutettua useita erilaisia lomakekenttiä. Muuttamalla elementin type-attribuutin arvoa saadaan elementistä tehtyä seuraavassa lyhyesti esiteltäviä lomakekenttiä.
- type - attribuutti voi saada seuraavia arvoja:
type = text | password | checkbox | radio | submit | reset | file | hidden | image | button
- text - Vapaamuotoinen tekstikenttä.
- password - Kuten tekstikenttä, mutta kirjaimet näkyvät "tähtinä".
- checkbox - Monivalintainen valintaruutu. Kätevä pienissä listoissa.
- radio - Yksivalintainen valintakontrolli. Kätevä pienissä listoissa.
- submit - Lomakkeen hyväksymispainike. Lähettää lomakkeen tiedot käsittelijälle.
- reset - Lomakkeen tyhjentämiseen tarkoitettu painike.
- file - Tiedoston lataamista varten.
- hidden - Piilotettua tietoa varten. Voidaan käyttää esimerkiksi lomakkeen käsittelevän ohjelman ohjaamiseen.
- image - Painike, jossa taustalla kuva.
- button - Normaali painike.
Muutamia muita input-elementin attribuutteja
- value - Yleensä oletusarvo elementille. Valintaruudussa ja -napissa välitettävä arvo.
- name - Määrittää elementille nimen.
- size - Kertoo elementin pituuden.
- maxlength - Kertoo elementin maksimipituuden (text, password).
- checked - Kertoo elementin (radio, checkbox) olevan valittu (checked="checked").
- Esimerkki yksinkertaisesta lomakkeesta
- Esimerkki valintaruudun (engl. checkbox) ja -napin (engl. radiobutton) käytöstä
select - valintalista
select-elementtiä käytetään erilaisten valintalistojen tekemiseen. Valintalistoilla saadaan määriteltyä vaihtoehtoisia valintoja tai pystytään valitsemaan useampi asia kerralla. option-elementtien sisälle määritellään valintalistaan liittyvät valinnat. Valintalistojen käytöllä saavutetaan seuraavia hyviä ja huonoja puolia:
- Säästävät tilaa esimerkiksi radio- tai checkbox-elementteihin verrattuna.
- Monivalinnan mahdollisuus, mutta monille käyttäjille hieman vaikea (CTRL-näppäin).
- Listan ryhmittelyä kannattaa käyttää selkeyttämään listaa (optgroup).
- Pitkät valintalistat ovat todella huonoja käytettävyyden kannalta.
- Esimerkki valintalistan käytöstä
Valintalistaan liittyviä attribuutteja
- select-elementin attribuutteja:
- name-attribuutilla annetaan nimi.
- multiple-attribuutilla kerrotaan, että aktiiviseksi voidaan valita useampia listan kohtia (multiple="multiple").
- size-attribuutilla voidaan määritellä valintalistassa yhtä aikaa näytettävien lomakenttien määrä. Jos size on määritelty, niin listaa ei näytetä valintalistana, vaan listaa voidaan ainoastaan vierittää.
- option-elementin attribuutteja:
- selected-attribuutilla määritellään oletusvalinta valintalistaan (selected="selected").
- value-attribuutilla määritellään valinnan antama arvo.
- optgroup-elementin attribuutteja:
- label-attribuutilla (optgroup) määritellään listassa näkyvän ryhmän nimi.
textarea - tekstialue
- Vapaamuotoinen tekstikenttä.
- Pelkästään yleisen tiedon kyselyyn.
- Tekstikentän koko voidaan määritellä tarkkaan.
- Esimerkki laajemman tekstikentän käytöstä
Seuraavassa muutamia textarea-elementin attribuutteja
- name-attribuutilla annetaan nimi.
- rows-attribuutilla määritellään kentässä näkyvien rivien lukumäärä.
- cols-attribuutilla määritellään kentässä yhdellä rivillä näkyvien merkkien lukumäärä.
button - yleispainike
Seuraavassa esimerkissä liitetään submit-painikkeen yhteyteen kuva.
<button name="laheta" type="submit"> <img src="kuva.jpg" alt="Lähetä" /> </button>
fieldset ja legend - lomakkeen rakenne
Lomakkeen rakennetta voidaan selkeyttää fieldset- ja legend-elementtien avulla.
- fieldset-elementillä määritellään lomake-elementit kuulumaan samaan ryhmään.
- Ryhmiä kannattaa miettiä esimerkiksi lomakkeen kysymyksien aihealueiden mukaisesti.
- Myös sisäkkäiset ryhmittelyt ovat mahdollisia.
- legend-elementillä määritellään lomakeryhmän (fieldset) otsikko.
- Esimerkki ryhmittelyn käytöstä. Ryhmittelyä on käytetty kaikissa esimerkin kysymyksissä.
Hakulomake omalle sivulle Googlea hyödyntäen
Sivustohaun toteuttaminen vaatii melko hyvää ohjelmointitaitoa. Voimme kuitenkin käyttää hakukoneiden tarjoamia rajapintoja hakulomakkeen tekemiseksi. Tarvitsemme hakupalvelun, joka antaa rajoittaa haun omille sivuillemme. Lähtökohtana voimme tutkia, mitä parametreja osoiteriviltä löytyy tai millainen lomake hakukoneen Advanced search -sivulta (tai muulta vastaavalta ohjesivulta) löytyy. Näiden tietojen perusteella voimme tehdä oman hakulomakkeen ja laittaa sen käsittelijän osoittamaan hakukoneen ohjelmaan.
Googlen Hakuoperaattorit-sivulta
löytyy, että jos hakutermissä on site:
, niin tällä voi rajoittaa Googlen hakua
WWW-osoitteen mukaan.
Search Protocol Reference ja
Googlen webbikäyttöliittymän ja haun kielikoodit -sivuilta
löytyy myös, että parametri q
on hakutermi. Parametrilla as_q
voidaan lisätä myös muita hakutermejä.
Referenssidokumentteja tutkimalla löytyy myös parametrit ie
(hakutermien merkistökoodaus),
oe
(hakutulosten merkistökoodaus) ja hl
(Googlen käyttöliittymän kieli).
Näiden perusteella voidaan tehdä lomake, joka rajoittuu kurssisivustolle:
<form action="http://www.google.com/search" method="get"> <fieldset> <legend>Haku</legend> <input type="hidden" name="ie" value="iso-8859-1" /> <input type="hidden" name="oe" value="iso-8859-1" /> <input type="hidden" name="hl" value="fi" /> <input type="hidden" name="as_q" value="site:appro.mit.jyu.fi/opetusteknologia" /> <p><label for="hakusana">Hae kurssisivuilta</label> <input type="text" size="20" id="hakusana" name="q" value="" /></p> <p><input type="submit" value="Hae" /></p> </fieldset> </form>
Omille sivuille tehtävissä hauissa käy joskus niin, että Google ei löydä yhtään hakutulosta millään hakusanalla. Tähän syynä on se, että Google ei ole vielä indeksoinut sivuasi tietokantaansa. Automaattinen indeksointi vaatii sen, että joltain jo indeksoidulta sivulta on linkki sivullesi. Google voi tehdä indeksoinnin esimerkiksi muutaman kerran viikossa, eli ihan heti uudet sivut eivät Googlen avulla löydy mitenkään.
Hyödyllisiä laajennuksia ja aputyökaluja
Seuraavista Firefoxin laajennuksista on huomattavasti hyötyä WWW-sivujen ylläpidossa:
- Web Developer (saatavilla myös Chromelle ja Operalle)
- FireBug
Laajennoksien lisäksi kannattaa muistaa hyödyntää seuraavia W3C:n aputyökaluja:
Käyttäjien kommentit