Demo 1 - HTML-perusteita

Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin HTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa. Työvälineenä käytetään HTML-kit-editoria, jonka perusominaisuudet käydään läpi. Tutustutaan myös paikallisiin WWW-järjestelyihin ja omien WWW-sivujen julkaisemiseen. Kokeillaan myös HTML-validaattorien toimintaa. Esimerkkejä XHTML-elementtien käyttämisestä voit katsoa luentosivulta. Englanninkielisiä kuvauksia elementeistä ja esimerkkejä niiden käytöstä voi katsella Web Design Groupin HTML 4.0 Referencestä.

HTML-kit

Kirjaudu sisään AGORANET:iin omalla tunnuksellasi.
Käynnistä HTML-kit (Start|Programs|HTML-kit|HTML-kit)
Valitse Create a new file ja paina OK. HTML-kit aukaisee eteesi uuden HTML-dokumentin jossa on valmiina peruselementit dokumentillesi.
Siirrytään muuttamaan HTML-kitin asetukset järkeviksi. Valitse Edit|Preferences.
Valitse välilehti Proofing. Poista ruksit kolmesta ylimmäisestä valinnasta niin HTML-kit ei turhaan kiusaa automaattisella oikuluvulla, joka ymmärtää vain englantia.

Valitse välilehti Auto Complete. Poista ruksi kohdasta Enable Auto Complete. Tämä poistaa käytöstä automaattisen elementtien nimien täydennyksen.

Valitse välilehti TIDY. Valitse Output: kohtaan vaihtoehto XHTML.

Paina OK.

Poista kaikki HTML-kitin valmis pohjakoodi. Kopioi leikepöydälle alta uusi pohjakoodi ja liitä se HTML-kitin dokumenttiin.


<?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" lang="fi">
<head>
<title>Kuvaava otsikko</title>
<meta name="description" content="Tässä lukee yleinen kuvaus dokumentista " />
<meta name="keywords" content="dokumentti, avainsana, luettelo" />
<meta name="author" content="Oma nimi" />
<link rev="Made" href="mailto:tunnus@st.jyu.fi" />
</head>
<body>
<h1>Tärkein otsikko</h1>
</body>
</html>

Tätä pohjakoodia sinun kannattaa jatkossa käyttää kaikissa HTML-dokumenteissasi.

Kuvittele, että olisit tekemässä omaa kotisivuasi. Täydennä tämän ajatuksen perusteella mallipohjassa oleviin elementteihin sopivat tiedot. Aukaise myös uusi selainikkuna johon voit ottaa avuksesi luennolla esitetyt esimerkit. Helpoiten saat uuden ikkunan painamalla linkin päällä hiiren oikeaa nappia ja valitsemalla esiin ponnahtavasta valikosta Open in New Window.
- xml-elementti kertoo käytetyn XML-standardin version.
- DOCTYPE-elementti kertoo käytetyn dokumenttityypin.
- Kirjoita title-elementin sisään jokin hyvin dokumenttia kuvaava otsikko. Otsikon pitää olla järkevä vaikka se otettaisi erikseen koko dokumentista.
- meta-elementeillä määritellään dokumenttiin liittyvää metatietoa.
  - description sisältää yleisen kuvauksen dokumentin luonteesta ja sisällöstä
  - keywords sisältää dokumenttiin liittyvät avainsanat. Nämä ovat tärkeitä joillekin hakukoneilla
  - author sisältää dokumentin tekijän nimen
- Link-elementeillä voidaan määritellä dokumentin suhde muihin dokumentteihin.
  - Made sisältää yleensä mailto-linkin dokumentin tekijän sähköpostiosoitteeseen.
- body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
- h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla yksi ja vain yksi h1-elementti, joka kertoo dokumentin pääotsikon.
- Dokumentin pohjatiedot voisivat näyttää seuraavilta:
```
<?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" lang="fi">
<head>
<title>Tommi Lahtonen - kotisivu - homepage</title>
<meta name="description" 
 content="Kuvaus Tommi Lahtosesta ja hänen elämästään ja harrastuksistaan" />
<meta name="keywords" 
 content="Tommi Lahtonen, tietotekniikka, opetus, urheilu, liikunta, vaellus, sähly, koripallo, pyöräily, kestävyysurheilu, sulkapallo" />
<meta name="author" content="Tommi Lahtonen" />
<link rev="Made" href="mailto:tommi.j.lahtonen@jyu.fi" />
</head>
<body>
<h1>Tommi Lahtonen</h1>
</body>
</html>
```
Talleta dokumenttisi U:\tietoverkot\-hakemistoon. Talleta jatkossa kaikki muutkin dokumenttisi tähän samaan hakemistoon.
Paina F9 niin HTML-kit tarkistaa XHTML-koodisi oikeellisuuden. Tarkistuksen jälkeen ruutu jakautuu kahteen osaan. Vasemmalla puolella on alkuperäinen dokumenttisi ja oikealla puolella HTML-kitin korjaama versio. Aivan ruudun alareunassa on lista mahdollisista virheilmoituksista. Klikkaamalla virheilmoitusta HTML-kit näyttää rivin josta virhe löytyi. Voit joskus kopioida korjatun version oikeanpuoleisesta ruudusta mutta useimmiten joudut korjaamaan virheen omin käsin. Editoriosan vasemmassa alanurkassa olevasta välilehtivalikosta voit valita kohdan editor niin alkuperäinen dokumenttisi valtaa taas koko ikkunan.
Käynnistä Netscape ja kokeile miltä dokumenttisi näyttää File|Open Page.
Tarkista sivusi vielä oikealla HTML-validaattorilla. Kokeile Lehtoria osoitteessa <URL: http://www.snowman.sgic.fi/lehtori/>. Syötä kohtaan Osoita tarkistettava tiedosto dokumenttisi polku kiintolevyllä (U:\tietoverkot\dokumentinnimi) ja paina Tarkista niin Lehtori tutkii dokumenttisi ja ilmoittaa mahdollisista virheistä. Jos Lehtori antaa virheilmoituksena:
```
Dokumentti loppui jo prologissa.(48)
```
Niin varmista, että annoit tiedoston nimen oikein. Myös .htm-pääte pitää muistaa kirjoittaa. Kannattaa käyttää Browse-toimintoa niin ei tule kirjoitusvihreitä. Muutamia syitä validaattorien käyttämiseen voi lukea WDG:n artikkelista 4 Reasons to Validate your HTML tai Jori Mäntysalon dokumentista HTML-validaattori - mikä se on.
Siirry takaisin HTML-kitiin. Jos sait Lehtorilta virheilmoituksia niin korjaa virheet.
Tutustu nyt yleisimpiin XHTML-elementteihin. Lisää dokumenttiisi seuraavat asiat vaihe kerrallaan. Kokeile vähintään jokaisen vaiheen jälkeen selaimella miltä dokumenttisi vaikuttaa. Reload-nappula päivittää Netscapessa sivun ajantasalle. Jos jotakin tuntuu olevan pielessä niin kokeile löytääkö HTML-kit virheesi (F9) tai tarkista dokumenttisi Lehtorilla.
1. Kirjoita muutama tekstikappale ja jokaiselle kappaleelle oma otsikko. Kirjoita kappaleet esimerkiksi kotiseudustasi, harrastuksistasi ja tulevaisuuden suunnitelmistasi. Jos haluat voit korostaa tärkeitä sanoja em- tai strong-elementeillä. Pari riviä tekstiä per kappale riittää :) Merkitse kappaleet p-elementeillä ja otsikot h2-elementeillä. Talleta ja kokeile selaimella miltä sivusi näyttää (reload).
2. Kirjoita dokumenttiisi järjestetyn listan (ol- ja li-elementit) avulla lista viidestä pitämästäsi asiasta. Anna listalle myös järkevä otsikko.
3. Lisää seuraavaksi ankkurit (a-elementti) jokaisen kirjoittamasi otsikon kohdalle. Keksi jokaiselle ankkurille kuvaava ja yhdestä sanasta muodostuva nimi.
4. Kirjoita aivan dokumenttisi alkuun sisällysluettelo. Listaa tekemiesi kappaleiden otsikot järjestämättömässä listassa (ul. Tee jokaisesta listan alkiosta dokumentin sisäinen linkki vastaavaan otsikkoon (a-elementti).
5. Muodosta seuraavaksi kaksisarakkeinen taulukko. Kirjoita ensimmäiseen sarakkeeseen niiden kurssien nimiä joita aiot tänä lukuvuonna suorittaa. Kirjoita toiseen sarakkeeseen kyseisten kurssien opintoviikkomäärät. Taulukkoa tehdessäsi tarvitset table-,tr-, th- ja td-elementtejä.
```
Kurssi                          OV
Tietoverkot työvälineenä        2 ov
Mikrotietokonelaitteistot       2 ov
Mikrotietokoneiden ohjelmistot  2 ov
Tietokannat                     2 ov
```
6. Lisää dokumenttiisi kuva. Voit tallentaa alla näkyvän kuvan klikkaamalla kuvan päällä hiiren oikeaa nappia ja valitsemalla Save image as. Talleta kuva samaan hakemistoon mihin talletit dokumenttisikin.
  
  Kuvan liittämiseen tarvitset img-elementtiä.
7. Tarkista dokumenttisi Lehtorilla
Aukaise SSH-yhteys johonkin atk-keskuksen unix-koneeseen (silmu. itu, verso, kanto, tukki).
1. Luodaan paikka omalle kotisivulle. Anna komento makewww, se luo sinulle hakemiston www (itse asiassa linkin www-koneen www-hakemistoon).
2. Siirry www-hakemistoon ja luo sinne uusi hakemisto nimeltään tietoverkot.
3. Kopioi FTP:llä äsken tekemäsi HTML-dokumentit äsken luomaasi www-hakemistoon.
4. Mene selaimella osoitteeseen <URL: http://www.jyu.fi/%7Ekäyttäjätunnus/>. Sinulle pitäisi näkyä listaus www-hakemistossasi olevista tiedostoista. Kokeile klikata tiedostojen nimiä.
5. Jos sivusi ei näy, niin tarkasta seuraavat asiat:
  - Tiedostojen luku pitää olla kaikille sallittu. Tiedoston luku sallitaan kaikille komennolla chmod ugo+r file.html. Myös hakemistojen luku ja toteutus pitää olla sallittu kaikille, tämä sallitaan komennolla chmod ugo+rx hakemisto (komennolla ls -l näkee suojaukset. Suojausten pitää olla -rwxr--r-- tiedostoille ja drwxr-xr-x hakemistoille, yleensä suojaukset ovat automaattisesti oikein). Varmista, että myös kotihakemistostasi pääsee "läpi":
```
cd 
chmod ugo+rx . 
```
    Huomaa välilyönti ja piste komennon lopussa.
Yritä saada kotihakemistosi näkymään Windowsissa tavallisena levyasemana atk-keskuksen ohjeen mukaan. Jos onnistuit niin talleta jatkossa kaikki dokumenttisi suoraan www-hakemistosi alla olevaan tietoverkot-hakemistoon.

Lisätehtävä

Aloita HTML-kitillä uusi dokumentti. Kopioi seuraava Jakob Nielseniltä lainattu The Top Ten New Mistakes of Web Design artikkeli HTML-kitiin:

The Top Ten New Mistakes of Web Design

The "top ten" design mistakes I identified in 1996 are still bad for Web
usability and are still found on many websites. So in that sense, not much
has changed over the last three years.

But unfortunately new Web technology and new applications for the Web have
introduced an entirely new class of mistakes. Here are the ten worst.

1. Breaking or Slowing Down the Back Button

The Back button is the lifeline of the Web user and the second-most used
navigation feature (after following hypertext links). Users happily know
that they can try anything on the Web and always be saved by a click or
two on Back to return them to familiar territory.

Except, of course, for those sites that break Back by committing one of these design sins:

* opening a new browser window (see mistake #2)

* using an immediate redirect: every time the user clicks Back, the
browser returns to a page that bounces the user forward to the undesired location

* prevents caching such that the Back navigation requires a fresh trip to the server; all hypertext
navigation should be sub-second and this goes double for backtracking

2. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who
starts a visit by emptying an ash tray on the customer's carpet. Don't
pollute my screen with any more windows, thanks (particularly since
current operating systems have miserable window management). If I want a
new window, I will open it myself!

Designers open new browser windows on the theory that it keeps users on
their site. But even disregarding the user-hostile message implied in
taking over the user's machine, the strategy is self-defeating since it
disables the Back button which is the normal way users return to previous
sites. Users often don't notice that a new window has opened, especially
if they are using a small monitor where the windows are maximized to fill
up the screen. So a user who tries to return to the origin will be
confused by a grayed out Back button.

3. Non-Standard Use of GUI Widgets

Consistency is one of the most powerful usability principles: when things
always behave the same, users don't have to worry about what will happen.
Instead, they know what will happen based on earlier experience. Every
time you release an apple over Sir Isaac Newton, it will drop on his head.
That's good.

The more users' expectations prove right, the more they will feel in
control of the system and the more they will like it. And the more the
system breaks users' expectations, the more they will feel insecure. Oops,
maybe if I let go of this apple, it will turn into a tomato and jump a
mile into the sky.

Interaction consistency is an additional reason it's wrong to open new
browser windows: the standard result of clicking a link is that the
destination page replaces the origination page in the same browser window.
Anything else is a violation of the users' expectations and makes them
feel insecure in their mastery of the Web.

Currently, the worst consistency violations on the Web are found in the
use of GUI widgets such as radio buttons and checkboxes. The appropriate
behavior of these design elements is defined in the Windows UI standard,
the Macintosh UI standard, and the Java UI standard. Which of these
standards to follow depends on the platform used by the majority of your
users (good bet: Windows), but it hardly matters for the most basic
widgets since all the standards have close-to-identical rules.

For example, the rules for radio buttons state that they are used to
select one among a set of options but that the choice of options does not
take effect until the user has confirmed the choice by clicking an OK
button. Unfortunately, I have seen many websites where radio buttons are
used as action buttons that have an immediate result when clicked. Such
wanton deviations from accepted interface standards make the Web harder to
use.

4. Lack of Biographies

My first Web studies in 1994 showed that users want to know the people
behind information on the Web. In particular, biographies and photographs
of the authors help make the Web a less impersonal place and increase
trust. Personality and point-of-view often wins over anonymous bits coming
over the wire.

Yet many sites still don't use columnists and avoid by-lines on their
articles. Even sites with by-lines often forget the link to the author's
biography and a way for the user to find other articles by the same
author.

It is particularly bad when a by-line is made into a mailto: link instead
of a link to the author's biography. Two reasons:

* it is much more common for a reader to want to know more about an author (including finding the
writer's other articles) than it is for the reader to want to contact the author - sure, contact info is
often a good part of the biography, but it should not be the primary or only piece of data about the
author
* it breaks the conventions of the Web when clicking on blue underlined text spawns an email message
instead of activating a hypertext link to a new page; such inconsistency reduces usability by making
the Web less predictable

5. Lack of Archives

Old information is often good information and can be useful to readers.
Even when new information is more valuable than old information, there is
almost always some value to the old stuff, and it is very cheap to keep it
online. I estimate that having archives may add about 10% to the cost of
running a site but increase its usefulness by about 50%.

Archives are also necessary as the only way to eliminate linkrot and thus
encourage other sites to link to you.

6. Moving Pages to New URLs

Anytime a page moves, you break any incoming links from other sites. Why
hurt the people who send you free customer referrals?

7. Headlines That Make No Sense Out of Context

Headlines and other microcontent must be written very differently for the
Web than for old media: they are actionable items that serve as UI
elements and should help users navigate.

Headlines are often removed from the context of the full page and used in
tables of content (e.g., home pages or category pages) and in search
engine results. In either case the writing needs to be very plain and meet
two goals:

* tell users what's at the other end of the link with no guesswork required
* protect users from following the link if they would not be interested
in the destination page (so no teasers - they may work once or twice to drive up traffic, but in the
long run they will make users abandon the site and reduce its credibility)

8. Jumping at the Latest Internet Buzzword

The web is awash in money and people who proclaim to have found the way to
salvation for all the sites that continue to lose money.

Push, community, chat, free email, 3D sitemaps, auctions - you know the
drill.

But there is no magic bullet. Most Internet buzzwords have some substance
and might bring small benefits to those few websites that can use them
appropriately. Most of the time, most websites will be hurt by
implementing the latest buzzword. The opportunity cost is high from
focusing attention on a fad instead of spending the time, money, and
management bandwidth on improving basic customer service and usability.

There will be a new buzzword next month. Count on it. But don't jump at it
just because Jupiter writes a report about it.

9. Slow Server Response Times

Slow response times are the worst offender against Web usability: in my
survey of the original "top-ten" mistakes, major sites had a truly
horrifying 84% violation score with respect to the response time rule.

Bloated graphic design was the original offender in the response time
area. Some sites still have too many graphics or too big graphics; or they
use applets where plain or Dynamic HTML would have done the trick. So I am
not giving up my crusade to minimize download times.

The growth in web-based applications, e-commerce, and personalization
often means that each page view must be computed on the fly. As a result,
the experienced delay in loading the page is determined not simply by the
download delay (bad as it is) but also by the server performance.
Sometimes building a page also involves connections to back-end mainframes
or database servers, slowing down the process even further.

Users don't care why response times are slow. All they know is that the
site doesn't offer good service: slow response times often translate
directly into a reduced level of trust and they always cause a loss of
traffic as users take their business elsewhere. So invest in a fast server
and get a performance expert to review your system architecture and code
quality to optimize response times.

10. Anything That Looks Like Advertising

Selective attention is very powerful, and Web users have learned to stop
paying attention to any ads that get in the way of their goal-driven
navigation. That's why click-through rates are being cut in half every
year and why Web advertisements don't work.

Unfortunately, users also ignore legitimate design elements that look like
prevalent forms of advertising. After all, when you ignore something, you
don't study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements.
The exact implications of this guideline will vary with new forms of ads;
currently follow these rules:

* banner blindness means that users never fixate their eyes on anything that looks like a banner ad
due to shape or position on the page
* animation avoidance makes users ignore areas with blinking or flashing text or other aggressive
animations
* pop-up purges mean that users close pop-up windoids before they have even fully rendered;
sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph). I don't want to ban
pop-ups completely since they can sometimes be a productive part of an interface, but I advise making
sure that there is an alternative way of using the site for users who never see the pop-ups.

Tee dokumentista rakenteellisesti järkevä HTML-dokumentti. Älä yritä merkitä kaikkea kerralla vaan toimi vaiheittain ja välillä tarkista selaimella miltä dokumenttisi näyttää. Käytä avuksesi HTML-kitin Tags-valikosta löytyviä ominaisuuksia.
- Merkitse ensimmäisenä otsikot otsikkoelementeillä (h1 ... h6)
- Merkitse kappaleet p-elementeillä
- Merkitse järjestetyt (numeroidut) listat ol- ja li-elementeillä. Huomaa, että otsikoiden numerointi pitää tehdä laittamalla ne kaikki järjestetyn listan sisään. Merkitse järjestämättömät listat ul- ja li-elementeillä.
- Tarkista dokumenttisi Lehtorilla

http://appro.mit.jyu.fi/2000/syksy/tietoverkot/demot/demo1/index.html