HTML-esimerkit
HTML-kehyserakenne-esimerkki
- Vertikaalinen kehykserakenne
- Tämä esimerkki näyttää, kuinka tehdään vertikaalinen kehykserakenne kolmella eri dokumentilla.
- Horisontaalinen kehykserakenne
- Tämä esimerkki näyttää, kuinka tehdään horisontaalinen kehykserakenne kolmella eri dokumentilla.
- Kuinka käyttää <noframes>-tagia
- Tämä esimerkki näyttää, kuinka käytetään <noframes>-tagia.
- Sekaisin kehyserakenne
- Tämä esimerkki näyttää, kuinka tehdään kehykserakenne, joka sisältää kolme dokumenttia ja asettaa ne sekaisin riveihin ja sarakkeisiin.
- Noresize="noresize" ominaisuudella varustettu kehyksen rakenne
- Tämä esimerkki näyttää noresize-ominaisuuden. Tässä esimerkissä kehykset ovat muuntumattomia. Kun vetää hiirtä kehyksen reunasta, huomaat, että reunat eivät liiku.
- Navigointirakenne
- Tämä esimerkki näyttää, kuinka navigointirakenne tehdään. Navigointirakenne sisältää linkkilistan, jonka kohde on toinen kehyksekset. "contents.htm"-nimisessä tiedostossa on kolme linkkiä.
- Sisäinen kehys
- Tämä esimerkki näyttää, kuinka sisäinen kehys luodaan (kehys HTML-sivulla).
- Navigoi kehykseen määritettyyn kohteeseen
- Tämä esimerkki näyttää, kuinka kahdella kehyksellä voidaan navigoida. Yksi kehyksestä on asetettu linkittymään toiseen tiedostoon määritettyyn kohteeseen. Tämä "link.htm"-tiedosto määrittää kohde-elementin <a name="C10"> avulla.
- Navigoi kehykseen määritettyyn kohteeseen
-
Tämä esimerkki näyttää, kuinka kahdella kehyksellä voidaan navigoida. Vasen navigaatiokehys sisältää linkkilistan, joiden linkit kohdistavat toiseen kehykseen. Toinen kehys näyttää linkitetyn dokumentin. Navigaatiokehyksen linkit kohdistavat tavoitteeseen, joka määritetään kohdefilen tiedostossa.
Esimerkki selityksellä
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äiset tagit
- Tämä esimerkki näyttää, kuinka elementtejä näytetään eri elementtien sisällä.
- Solun reunan tyhjyys (Cell padding)
- Tämä esimerkki näyttää, kuinka Cell padding -ominaisuutta käytetään solun sisällön ja reunaviivan välisen tyhjyyden luomiseen.
- Solujen välinen etäisyys (Cell spacing)
- Tämä esimerkki näyttää, kuinka Cell spacing -ominaisuutta käytetään solujen välisen etäisyyden lisäämiseen.
- Lisää taustaväri tai taustakuva taulukkoon
- Lisää taustaväri tai taustakuva taulukkoon
- Lisää taustaväri tai taustakuva taulukkoon
- Lisää taustaväri tai taustakuva 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 selityksellä
HTML-lomakkeet ja syöttöesimerkki
- Tekstikenttä (Tekstikentät)
- Tämä esimerkki näyttää, miten tekstikenttää voidaan luoda HTML-sivulle. Käyttäjä voi kirjoittaa tekstiä tekstikenttään.
- Salasanakenttä
- Tämä esimerkki näyttää, miten HTML:ää voidaan käyttää salasanojen kenttään.
- Valintaruutu
- Tämä esimerkki näyttää, miten valintaruutuja voidaan luoda HTML:ssä. Käyttäjä voi valita tai poistaa valinnan ruudusta.
- Valintapainike
- Tämä esimerkki näyttää, miten valintapainikkeita voidaan luoda HTML:ssä.
- Yksinkertainen pudotusvalikko
- Tämä esimerkki näyttää, miten yksinkertaista pudotusvalikkoa voidaan luoda HTML-sivulle. Pudotusvalikko on valinnainen luettelo.
- Toinen pudotusvalikko
- Toinen pudotusvalikko (käännöksen huomautus: ennakkovalaus tarkoittaa etukäteen määriteltyä ensisijaista vaihtoehtoa).
- Tekstikenttä (Textarea)
- Tämä esimerkki näyttää, miten luodaan tekstikenttä (monirivinen tekstisyöttökontrolli). Käyttäjä voi kirjoittaa tekstiä tekstikenttään. Tekstikentässä kirjoitettavien merkkien määrää ei ole rajoitettu.
- Painikkeen luominen
- Tämä esimerkki näyttää, miten painikkeita voidaan luoda. Voit mukauttaa painikkeen tekstiä.
- Dataa ympäröivä fieldset
- Tämä esimerkki näyttää, miten dataa ympärille voidaan piirtää otsikoitu kehys.
Lomakkeen esimerkki
- Syöttökenttiä ja vahvistuspainiketta sisältävä lomake
- Tämä esimerkki näyttää, miten lomaketta voidaan lisätä sivulle. Tämä lomake sisältää kaksi syöttökenttää ja vahvistuspainikkeen.
- Valintaruutujen kanssa varustettu lomake
- Tämä lomake sisältää kaksi valintaruutua ja vahvistuspainikkeen.
- Valintaruutujen kanssa varustettu lomake
- Tämä lomake sisältää kaksi valintaruutua ja vahvistuspainikkeen.
- Sähköpostin lähettäminen lomakkeesta
- Tämä esimerkki näyttää, miten sähköpostia voidaan lähettää lomakkeesta.
Esimerkki selityksellä
HTML:n kuvan esimerkki
- Kuvan lisääminen
- Tämä esimerkki näyttää, miten kuvaa voidaan näyttää verkkosivulla.
- Kuvan lisääminen eri paikasta
- Tämä esimerkki näyttää, miten kuvia toisista kansioista tai palvelimilta voidaan näyttää verkkosivulla.
- Taustakuva
- Tämä esimerkki näyttää, miten taustakuvaa voidaan lisätä HTML-sivulle.
- Kuvien järjestäminen
- Tämä esimerkki näyttää, miten kuvia voidaan järjestää tekstissä.
- Liukuvat kuvat
- Tämä esimerkki näyttää, miten kuvaa voidaan tehdä liikkuvaksi sivun vasemmalle tai oikealle.
- Kuvan kokon muuttaminen
- Tämä esimerkki näyttää, miten kuvan kokoa voidaan muuttaa.
- Kuvan korvaavien tekstien näyttäminen
- Tämä esimerkki näyttää, miten kuvaa voidaan muuttaa eri koossa. Jos selain ei voi ladata kuvaa, korvaavat teksti-ominaisuudet kertovat lukijoille menetetyn tiedon. On hyvä tapa lisätä korvaavat teksti-ominaisuudet kaikille sivun kuville.
- Kuvalinkin tekeminen
- Tämä esimerkki näyttää, miten kuvaa voidaan käyttää linkkinä.
- Kuvakartan luominen
- Tämä esimerkki näyttää, miten luodaan kuvakartta, jossa on klikattavia alueita. Jokainen alue on hyperlinkki.
- Kuva kuvakartaksi muuntaminen
- Tämä esimerkki näyttää, miten tavallinen kuva voidaan asettaa kuvakartaksi.
Esimerkki selityksellä
