HTML (HyperText Markup Language) tarjoaa kuusi erityistagia eritasoisten otsikoiden näyttämiseen. Kaikilla niillä on oletusparametrit (kirjasimen koko ja tyyli, edellisen ja seuraavan elementin sisennysten määrä jne.). Nämä vaihtoehdot voidaan ohittaa CSS-ohjeilla (Cascading Style Sheets) ja muuttaa siten otsikkojen ulkoasua verkkosivun tekstissä.
Ohjeet
Vaihe 1
Sijoita eritasoiset otsikot vastaavien avaus- ja sulkutunnisteiden väliin, ellei niitä ole jo tehty verkkosivun lähdekoodissa. Esimerkiksi tärkeimmän otsikon (ensimmäisen tason) tulisi olla tagien välissä
ja
:
Ensimmäisen tason otsikko
Seuraavaksi tärkein tason alaotsikko tulisi sijoittaa tunnisteiden väliin
ja
jne. Viimeinen ennakoiduista tasoista on kuudes -
ja
Vaihe 2
Lisää lähdekoodin otsikko-osaan (ja -tagien väliin) lauseke, joka kertoo kävijän selaimelle, että CSS-tyylien kuvaus on tässä paikassa:
/ * CSS-ohjeet ovat täällä * /
Vaihe 3
Lisää alku- ja lopputyyppitagien väliin tyylikuvauksia jokaisen tason otsikoille, joiden ulkoasua haluat muuttaa. Esimerkiksi, jos joudut muuttamaan vain ensimmäisen tason otsikoiden ulkonäköä, tämä koodi saattaa näyttää tältä:
h1 {
väri punainen;
fontin koko: 20px;
kirjasintyyli: kursiivi;
fontin paino: lihavoitu;
yläreuna: 30 kuvapistettä;
alareuna: 20 kuvapistettä;
}
Tässä h1 osoittaa, että kihara-aaltosulkeissa oleva kuvaus viittaa h1-tunnisteeseen ja sitä kutsutaan "valitsimeksi". Väriparametri asettaa tekstin värin, font-size-parametri on fonttikoko, kirjasintyyli kursiivilla on kursivoitu kirjasinlaji, fontin paino lihavoidulla arvolla on lihavoitu, marginaali-top on ylhäältä marginaali, ja marginaali-pohja on alimarginaali. Lisää toisen tason otsikoihin vastaava lause h2-valitsimella jne.
Vaihe 4
Käytä lyhenteen syntaksia, jos kuvauksessa on useita tasoja. Esimerkiksi kirjasinkuvaukset voidaan sijoittaa yhteen parametriin sekä sisennyskokojen kuvaukset. Näyte:
h1 {
väri punainen;
fontti: lihavoitu 20px arial;
marginaali: 30px020px0;
}
h2 {
oranssi väri;
fontti: lihavoitu 18px arial;
marginaali: 25 kuvapistettä 0 15 kuvapistettä 0;
}
Marginaaliparametrissa marginaalit on määritettävä myötäpäivään alkaen ylimmästä marginaalista välilyönnin läpi (oikea ylhäältä vasemmalta vasemmalta).
