Yliopiston etusivulle In English
Helsingin yliopisto
clt132: Verkkosivujen käsittely - kevät 2008

Yhteystiedot

Yleisen kielitieteen laitos
PL 9 (Siltavuorenpenger 20 A)
00014 HELSINGIN YLIOPISTO

Puhelin +358 (09) 1911 (vaihde)
Faksi +358 (09) 191 29307

Yleistä kurssimateriaalia

Tänne tulevat kaikki yleiset kurssimateriaalit.

Kurssin PowerPoint-luentokalvot ja muu materiaali

Yleiset kurssiasiat

Yleistä kurssista


Viikko 1

Viikko 1, luentokalvot


Viikko 2

Viikko 2, luentokalvot

Viikko 2, pätevä apusivu HTML-perusteiden opiskeluun

Viikko 2, dokumentin määrittelyt ja otsikkotiedot (oikeastaan myöhempää asiaa, mutta tuli tunnilla olleiden kysymyksissä esille)


Viikko 3

Viikko 3, luentokalvot

Viikko 3, HTML-attribuutit listana

Viikko 3, attribuutien käyttö XHTML:ssä

Viikko 3, värikalkulaattori

Viikko 3, "RGB to hex" visuaalinen työkalu

Viikko 3, HTML-kommentointi


Viikko 4

Viikko 4, luentokalvot

Viikko 4, dokumentin määrittelyt ja otsikkotiedot (sama kuin viikko 2)

Viikko 4, HTML Validation: Choosing a DOCTYPE

Viikko 4, HTML DOCTYPE TAG

Viikko 4, Recommended DTDs to use in your Web document

Viikko 4, luennon taulukkoesimerkki

Viikko 4, HTML Tables

Viikko 4, Tables in HTML documents

Viikko 4, luennon listaesimerkki

Viikko 4, Interaktiivinen määritelmälistan tutoriaali

Viikko 4, HTML <li> tag


Viikko 5

Viikko 5, luentokalvot

Viikko 5, Wireless Developer Network - WML Tutorial

Viikko 5, WAP Tutorial

Viikko 5, WAP Forum Releases

Viikko 5, WAP Software Development Kits

Viikko 5, Compact HTML for Small Information Appliances

Viikko 5, i-mode Resource Center

Viikko 5, Overview of i-mode Compatible HTML


Viikko 6

Viikko 6, luentokalvot

Viikko 6, Laajennetun merkistön käyttö HTML:ssä

Viikko 6, HTML Document Representation

Viikko 6, Using Character Encodings

Viikko 6, ASCII Table

Viikko 6, HTML Escape Characters: Complete List

Viikko 6, Unicode Entity Codes for Phonetic Symbols
(HUOM! Varmasti hyödyllinen linkki tulevia opintoja ajatellen.)

Viikko 6, OBJECT - Embedded Object

Viikko 6, EMBED - Embedded Object

Viikko 6, FORMS in HTML documents

Viikko 6, HTML Forms and Input

Viikko 6, OPTGROUP - Option Group

Viikko 6, Methods GET and POST in HTML forms - what's the difference?

Viikko 6, luennon lomake-esimerkki


Viikko 7

Viikko 7, luentokalvot

Viikko 7, What is the difference between JPEG, GIF and PNG?

Viikko 7, Digitaalinen kuvankäsittely (1)

Viikko 7, Digitaalinen kuvankäsittely (2)

Viikko 7, Helsingin yliopiston ohjelmistojakelu (esim. Corelin kuvankäsittelyohjelmia)

Viikko 7, CSS Tutorial

Viikko 7, CSS - Tyylimäärittely

Viikko 7, Johdanto CSS-tyyliehdotuksien käyttöön Web-sivuilla

Viikko 7, luennon esimerkki + rivin sisennys CSS:llä

Viikko 7, luennon esimerkki + rivin sisennys non-breaking spacellä

Viikko 7, CSS Properties

Viikko 7, All CSS Properties Listed Alphabetically


Viikko 8

Viikko 8, luentokalvot

Viikko 8, Colorblind Web Page Filter

Viikko 8, WebbIE, web browser for blind

Viikko 8, Thunder screenreader

Viikko 8, Saavutettava.fi

Viikko 8, High accessibility, high design

Viikko 8, Web Accessibility

Viikko 8, Acid-selaintesti (HUOM! voi kaataa selaimen!)

Viikko 8, luennon esimerkki 1

Viikko 8, luennon esimerkki 2


Viikko 9

Viikko 9, luentokalvot

Viikko 9, Features of External Style Sheet

Viikko 9, Linking Style Sheets to HTML

Viikko 9, CSS (Cascading Style Sheets) - Luento 3

Viikko 9, luennon esimerkki Celine Dion

Viikko 9, luennon esimerkki Mariah Carey

Viikko 9, luennon esimerkki edellisten css

Viikko 9, edelliset esimerkit + navigointimalli zipattuna
HUOM! Pura tiedoston sisältämä hakemistorakenne muuttumattomana, älä siis laita kaikkia tiedostoja samaan hakemistoon.


Viikko 10

Viikko 10, luentokalvot

Viikko 10, What's the Difference Between @import and link for CSS? - CSS FAQ

Viikko 10, Tricking Browsers and Hiding Styles

Viikko 10, Hide CSS from browsers :: @import

Viikko 10, HTML Frames

Viikko 10, Frames in HTML documents

Viikko 10, Kehykset (frames)

Viikko 10, luennon esimerkki a
IMG:n attribuuttina ALT, ei NAME.

Viikko 10, luennon esimerkki b
IMG:n attribuuttina ALT ja NAME.

Viikko 10, luennon esimerkki 1
Taulukon keskitys merkinnällä text-align:center;.

Viikko 10, luennon esimerkki 2
Taulukon keskitys merkinnällä text-align:-moz-center;.

Viikko 10, luennon esimerkki 3
Taulukon keskitys merkinnällä margin: 0 auto;.

Viikko 10, luennon kehysesimerkki zipattuna


Viikko 11

Viikko 11, luentokalvot

Viikko 11, JavaScript Tutorial

Viikko 11, JavaScript-opas

Viikko 11, JavaScript-opas (2)

Viikko 11, Unobtrusive Javascript

Viikko 11, JavaScript (ja vastaavat)

Viikko 11, Tullilaskuri-esimerkki

Viikko 11, luennon esimerkki (Kieliteknologin apuväline!)

Viikko 11, luennon esimerkki (Kuka kukin on...)

Viikko 11, luennon esimerkki (Vähennyslaskin)

Viikko 11, edellisestä jatkokehitelty HTML-laskin

Viikko 11, JavaScript + kommenttimerkit
eräitä harvinaisia, mutta hauskoja ongelmia


Viikko 12

Viikko 12, luentokalvot

Viikko 12, clt236: XML - syksy 2007

Viikko 12, 581290 Rakenteisten dokumenttien käsittely

Viikko 12, Introduction to XML by Doug Tidwell (IBM)

Viikko 12, XML Tutorial

Viikko 12, DTD Tutorial

Esseetehtävät

Tietoa kurssin esseetehtävistä (PDF-dokumentti).

Lopputyö

Tietoa kurssin lopputyöstä (PDF-dokumentti).

Muuta

HTML-apumoniste

Tämä apumoniste sisältää HTML-kielen perusperiaatteet ja yleisimmät tagit tiiviissä muodossa. Se on kuitenkin laadittu yläasteen opetusta varten, joten yliopistoympäristössä se on vain viitteellinen eikä välttämättä edes täysin oikeaoppinen. Siitä voi silti olla hyötyä myös tämän kurssin kanssa.

Yleistä ohjelmointikoodin kommentoimisesta

Lainaus linkitetyn sivun alusta: "Commenting your code is like cleaning your bathroom - you never want to do it, but it really does create a more pleasant experience for you and your guests." Do we really need to say more...?

The fine Art of Commenting

Malliesimerkkejä sisältävä laaja esitys koodin kommentoimisen tärkeydestä (PDF-formaatissa).

HTML-validaattoreita

W3C HTML Validation Service

Hyvä validaattori.

WDG HTML Validator

Toinen hyvä validaattori. (Open mielestä parempi, mutta makuasioista voidaan tietenkin kiistellä...)
HUOM! Ei validoi XHTML:ää.

HTML / XHTML / XML / WML Validator

Vielä kolmaskin validaattori. Monipuolisin näistä, tukee myös WML:ää.

Työkaluja

EditPad Lite

Luennolla esille tulleen työvälinekysymyksen johdosta, tässä on linkki kurssin opettajan käyttämään tekstieditoriin. EditPad Lite on pieni, mutta tehokas väline tekstipohjaiseen editointiin. Kurssin sisältöä ajatellen editorissa on hyödyllisiä ominaisuuksia, kuten vaikkapa merkkijonojen konvertointi isojen ja pienten kirjainten välillä (ei löydy esim. NotePadistä).

HTTRack

Jos kiinnostusta riittää, voi testata HTTrack-ohjelmaa. Se on WWW-sivujen kopiointiohjelma, jolla voi ladata olemassaolevia nettisivustoja omalle koneelle. Siitä voi olla apua WWW-sivujen rakennetta ja toteutusta tutkiessa. Vältä kuitenkin liiallista palvelinten kuormittamista (älä esimerkiksi yritä kopioida koko www.helsinki.fi-sivustoa) ja muista myös tekijänoikeudet.