HTML-esimerkit

HTML-perusmerkinnät esimerkkinä

Yksinkertainen HTML-tiedosto
Tämä esimerkki on erittäin yksinkertainen HTML-tiedosto, joka käyttää mahdollisimman vähän HTML-merkkejä. Se näyttää, miten selain näyttää body-elementin sisällön.
Yksinkertainen kappale
Tämä esimerkki näyttää, miten selain näyttää kappaleelementin tekstiä.
Lisää kappaleita
Tämä esimerkki näyttää joitakin oletus käyttäytymisiä kappaleelementissä.
Runousongelma
Tämä esimerkki näyttää joitakin HTML-formaattioon liittyviä ongelmia.
Riveittäminen
Tämä esimerkki näyttää HTML-dokumentissa riveittämisestä.
Otsikko
Tämä esimerkki näyttää, miten otsikoita näytetään HTML-dokumentissa.
Keskelle sijoitettu otsikko
Tämä esimerkki näyttää keskelle sijoitetun otsikon.
Horisontaalinen viiva
Tämä esimerkki näyttää, miten horisontaalista viivaa lisätään.
Piilotetut huomautukset
Tämä esimerkki näyttää, miten piilotettuja huomautuksia lisätään HTML-lähdekoodiin.
Taustaväri
Tämä esimerkki näyttää, miten taustaväriä lisätään HTML-sivulle.

Esimerkki selitys

HTML-tekstimuotoiluesimerkki

Tekstimuotoilu
Tämä esimerkki näyttää, miten tekstiä muotoillaan HTML-tiedostossa.
Ennalta muotoiltu teksti
Tämä esimerkki näyttää, miten pre-tagia käytetään tyhjiöihin rivit ja välilyönnit hallitsemaan.
"Tietokoneen ulostulon"-tagit
Tämä esimerkki näyttää eri "tietokoneen ulostulon"-tagien näyttötilan.
Osoite
Tämä esimerkki näyttää, miten osoitteita kirjoitetaan HTML-tiedostoon.
Lyhenteet ja alkukirjaimet
Tämä esimerkki näyttää, miten lyhenteitä tai alkukirjaimisia käytetään.
Tekstin suunta
Tämä esimerkki näyttää, miten tekstin suuntaa voidaan muuttaa.
Lainauslause
Tämä esimerkki näyttää, miten erikokoisia lainauslauseita voidaan toteuttaa.
Poistettu teksti ja lisätty teksti
Tämä esimerkki näyttää, miten poistettua tekstiä ja lisättyä tekstiä merkitään.

Esimerkki selitys

HTML-linkkiesimerkki

Luo hypertextlinkki
Tämä esimerkki näyttää, miten linkkiä luodaan HTML-dokumenttiin.
Käytä kuvaa linkkinä
Tämä esimerkki näyttää, miten kuvaa käytetään linkkinä.
Avaa linkki uudessa selaimen ikkunassa
Tämä esimerkki näyttää, miten avataan sivu uudessa selaimen ikkunassa, jotta kävijä ei tarvitse poistua sivustoltasi.
Linkitä samaan sivuun eri paikkaan
Tämä esimerkki näyttää, miten linkitetään dokumentin toiseen osaan.
Hypähdä kehystä ulos
Tämä esimerkki näyttää, miten hypätään kehystä ulos, jos sivusi on sijoitettu kehysten sisälle.
Luo sähköpostilinkki
Tämä esimerkki näyttää, miten linkitetään sähköpostiin. (Tämä esimerkki toimii vain, kun sähköpostiasennusohjelma on asennettu.)
Luo sähköpostilinkki 2
Tämä esimerkki näyttää monimutkaisempia sähköpostilinkkejä.

Esimerkki selitys

HTML-kehysesimerkki

Vertikaalinen kehys
Tämä esimerkki näyttää, miten kolmea eri dokumenttia käytetään tekemään vertikaalinen kehys.
Horisontaalinen kehys
Tämä esimerkki näyttää, miten kolmea eri dokumenttia käytetään tekemään horisontaalinen kehys.
Kuinka käyttää <noframes>-tagia
Tämä esimerkki näyttää, miten <noframes>-tagia käytetään.
Sekavalta kehysrakenne
Tämä esimerkki näyttää, miten kolmea dokumenttia sisältävää kehysrakennetta tehdään ja miten ne asetetaan sekavalta riveihin ja sarakkeisiin.
noresize="noresize" -ominaisuuden omaava kehysrakenne
Tämä esimerkki näyttää noresize-ominaisuuden. Tässä esimerkissä kehykset ovat mitattomia. Kun vetää hiirtä kehysten reunalla, huomaat, että reunat eivät voi siirtyä.
Navigointirakenne
Tämä esimerkki näyttää, miten navigointirakenne tehdään. Navigointirakenne sisältää linkkilistan, jonka kohde on toinen kehyksi. "contents.htm"-nimisessä tiedostossa on kolme linkkiä.
Sisäänrakennettu ruutu
Tämä esimerkki näyttää, kuinka sisäänrakennettu ruutu luodaan (HTML-sivun ruutu).
Navigoi määritettyyn kohtaan toisen ruudun sisällä
Navigoi määritettyyn kohtaan toisen ruudun sisällä
Navigoi määritettyyn kohtaan käyttämällä ruutuja
Tämä esimerkki näyttää, kuinka kaksi ruutua käytetään. Vasen navigaatioruutu sisältää linkkilistan, jotka kohdistavat toisen ruudun. Toinen ruutu näyttää linkitetyn dokumentin.

Esimerkki selitys

HTML-taulukoesimerkki

Taulukko
Tämä esimerkki näyttää, kuinka taulukko luodaan HTML-dokumentissa.
Taulukkoruudut
Tämä esimerkki näyttää, kuinka erilaisia taulukkoruutuja käytetään.
Reunaviivoittomat taulukot
Reunaviivoittomat taulukot
Taulukon otsikko (Heading)
Tämä esimerkki näyttää, kuinka taulukon otsikko näytetään.
Tyhjät solut
Tämä esimerkki näyttää, kuinka " " käytetään tyhjien solujen käsittelyyn.
Otsikollinen taulukko
Tämä esimerkki näyttää, kuinka taulukkoon lisätään otsikko (caption).
Rivejä tai sarakkeita ylittävät taulukon solut
Tämä esimerkki näyttää, kuinka määritellään rivejä tai sarakkeita ylittäviä taulukon soluja.
Taulukon sisällä olevat tagit
Tämä esimerkki näyttää, kuinka elementtejä näytetään eri elementtien sisällä.
Solun reunaviivan tyhjiö (Cell padding)
Tämä esimerkki näyttää, kuinka Cell padding -ominaisuutta käytetään solun sisällön ja reunaviivan välisen tyhjiön luomiseen.
Solujen välinen etäisyys (Cell spacing)
Lisää solujen välistä etäisyyttä Cell spacing -ominaisuudella
Lisää taustaväri tai taustakuvan taulukkoon
Lisää taustaväri tai taustakuvan taulukkoon
Lisää taustaväri tai taustakuvan taulukkoon
Lisää taustaväri tai taustakuvan taulukon soluun
Sisällön sijoittelu taulukon soluissa
Tämä esimerkki näyttää, kuinka "align"-ominaisuutta käytetään solujen sisällön sijoitteluun, jotta voidaan luoda kaunis taulukko.
Runko(frame)-ominaisuus
Tämä esimerkki näyttää, kuinka "frame"-ominaisuutta käytetään reunaviivojen hallintaan taulukon ympärillä.

Esimerkki selitys

HTML-listaesimerkki

Luettelo
Tämä esimerkki näyttää, kuinka luettelo käytetään.
Järjestetty luettelo
Tämä esimerkki näyttää, kuinka järjestetty luettelo käytetään.
Eri tyyppiset luettelot
Tämä esimerkki näyttää, kuinka luettelo käytetään.
Eri tyyppiset järjestetyt luettelot
Tämä esimerkki näyttää, kuinka erilaisia järjestettyjä luetteloita käytetään.
Sisäänrakennettu luettelo
Tämä esimerkki näyttää, kuinka sisäänrakennettuja luetteloja käytetään.
Sisäänrakennettu luettelo 2
Tämä esimerkki näyttää, kuinka monitasoisia sisäänrakennettuja luetteloja voidaan käyttää.
Määritellään luettelo
Tämä esimerkki näyttää, kuinka määritellään luettelo.

Esimerkki selitys

HTML-lomakkeet ja syöttöesimerkki

Tekstikenttä (Tekstikentät)
Tekstikenttä
Tämä esimerkki näyttää, miten tekstikenttää voidaan luoda HTML-sivulle. Käyttäjä voi kirjoittaa tekstiä tekstikenttään.
Salasanojen syöttökenttä
Tämä esimerkki näyttää, miten HTML:ssä voidaan luoda salasanojen syöttökenttää.
Valintaruutu
Tämä esimerkki näyttää, miten valintaruutua voidaan luoda HTML:ssä. Käyttäjä voi valita tai poistaa valinnan.
Valintapykkinäytin
Tämä esimerkki näyttää, miten valintapykkinäytintä voidaan luoda HTML:ssä.
Yksinkertainen pudotusvalikko
Tämä esimerkki näyttää, miten yksinkertaista pudotusvalikkoa voidaan luoda HTML-sivulla. Pudotusvalikko on valinnainen luettelo.
Toinen pudotusvalikko
Tekstialue
Tekstialue (monirivinen tekstisyöttökenttä). Käyttäjä voi kirjoittaa tekstiä tekstialueeseen. Tekstialueessa kirjoitettavien merkkien määrää ei ole rajoitettu.
Luo painike
Tämä esimerkki näyttää, miten painiketta voidaan luoda. Voit mukauttaa painikkeen tekstiä.
Data kehä
Tämä esimerkki näyttää, miten dataa voidaan piirtää otsikon kanssa varustetussa kehässä.

Lomakkeen esimerkki

Lomake syöttökenttä ja vahvistuspainike
Tämä esimerkki näyttää, miten lomaketta voidaan lisätä sivulle. Tämä lomake sisältää kaksi syöttökenttää ja vahvistuspainikkeen.
Lomake valintaruutu
Tämä lomake sisältää kaksi valintaruutua ja vahvistuspainikkeen.
Lomake valintapykkinäytin
Tämä lomake sisältää kaksi valintapykkinäytintä ja vahvistuspainikkeen.
Lähetä sähköposti lomakkeella
Tämä esimerkki näyttää, miten sähköpostia voidaan lähettää lomakkeella.

Esimerkki selitys

HTML-kuvan esimerkki

Lisää kuva
Tämä esimerkki näyttää, miten kuvaa voidaan näyttää verkkosivulla.
Lisää kuva eri sijainnista
Tämä esimerkki näyttää, miten kuvia voidaan näyttää verkkosivulla toisesta sijainnista tai palvelimelta.
Taustakuvan lisääminen
Tämä esimerkki näyttää, miten taustakuvaa voidaan lisätä HTML-sivulle.
Sijoita kuva
Tämä esimerkki näyttää, miten kuvaa voidaan sijoittaa tekstiin.
Liu'uta kuva
Tämä esimerkki näyttää, miten kuvaa voidaan liu'uttaa tekstin vasemmalle tai oikealle.
Muuta kuvan kokoa
Tämä esimerkki näyttää, miten kuvan kokoa voidaan muuttaa.
Näytä kuvan korvaava teksti
Tämä esimerkki näyttää, miten kuvaa voidaan korvata vaihtoehtoisella tekstillä. Jos selain ei voi ladata kuvaa, korvaavat tekstiavustajat kertovat lukijoille menetetyn tiedon. On hyvä tapa lisätä korvaava teksti kaikille sivun kuville.
Luo kuvalinkki
Tämä esimerkki näyttää, miten kuvaa voidaan käyttää linkkinä.
Luo kuvakartta
Tämä esimerkki näyttää, miten luodaan kuvakartta, jossa on klikattavia alueita. Jokainen alue on hyperlinkki.
Muunna kuva kuvakartaksi
Tämä esimerkki näyttää, miten tavallinen kuva voidaan asettaa kuvakartaksi.

Esimerkki selitys

HTML-työkalu taustalle

Hyvä taustan ja värejen yhdistäminen
Esimerkki hyvästä taustan ja tekstin värien yhdistämisestä, joka tekee sivun tekstistä helppoa lukea.
Epäasianmukainen taustan ja värien yhdistäminen
一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。
Yksi taustaväri ja tekstin väri, jotka eivät sovi hyvin yhteen, tekevät sivun tekstistä vaikeasti luettavaa.
Käyttökelpoinen taustakuva
Taustakuva ja tekstin väri tekevät sivun tekstistä helposti luettavaa.
Käyttökelpoinen taustakuva 2
Toinen taustakuva ja tekstin väri tekevät sivun tekstistä helposti luettavaa.
Käyttökelvoton taustakuva

Esimerkki selitys

Taustakuvat ja tekstin väri tekevät sivun tekstistä vaikeasti luettavaa.

HTML-tyylit (style) esimerkki
HTML:ssä olevat tyylit
Tämä esimerkki näyttää, miten tyylejä lisätään <head>-osioon HTML:ää muotoiltavaksi.
Linkki ilman alaviivoja
Linkitetään ulkoiseen tyyliarkistoon
Tämä esimerkki näyttää, miten <link>-merkin avulla linkitetään ulkoiseen tyyliarkistoon.

Esimerkki selitys

HTML-otsikko (head) esimerkki

Dokumentin otsikko
Otsikko tiedot sisällä olevassa head-elementissä ei näy selaimen ikkunassa.
Yksi target, kaikki linkit
Tämä esimerkki näyttää, miten base-merkin avulla kaikki sivun merkit avataan uudessa ikkunassa.

Esimerkki selitys

HTML meta-tiedot (meta) esimerkki

Dokumentin kuvaus
Meta-elementin tiedot voivat kuvata HTML-dokumenttia.
Dokumentin avainsanat
Meta-elementin tiedot voivat kuvata dokumentin avainsanoja.
Uudelleenohjaus
Tämä esimerkki näyttää, miten käyttäjä ohjataan toiseen osoitteeseen, kun URL-osoite on muuttunut.

Esimerkki selitys

HTML-skripti (Script) esimerkki

Lisää skripti
Tämä esimerkki näyttää, miten skripti lisätään HTML-dokumenttiin.
Suoritetaan selaimissa, jotka eivät tue skriptejä
Tämä esimerkki näyttää, miten käsitellään selaimia, jotka eivät tue skriptejä.

Esimerkki selitys