Oma WordPress teema

HTML-merkkauskieli

Tagged with

Tarkastellaan hieman millaisia html-elementtejä tavallisimmin käytetään. Tärkeimpiä tageja HTML:ssä ovat tekstin lisämiseen liittyvät tagit, kuvat ja linkit. Tavallisia ovat myös sisältökokonaisuuksia ympäröivät div-elementit, joiden avulla CSS-muotoiluja voidaan kohdistaa kokonaisiin sisältölohkoihin.

Kehittäjän työkalut selaimessa.

Tekstitagit

Hallintapaneelissa muotoilemisessa tarvittavat osat ovat seuraavat:

  • <p>, <i>, <b>, <strong> Tekstin peruselementit, joilla määritellään kappaletekstin tyyppejä. (p = Paragraph, i = Italic, b = Bold)
  • <h1> – <h6> Otsikkoelementit
  • <span> Tekstin sisäinen merkkauselementti, jonka avulla voidaan asettaa tekstin sisällä erityisiä muotoiluja tekstin osalle. Span-elementille voidaan määrittää CSS-luokkamääritys (class) tai asettaa muotoilut style-määritteen avulla.
  • <ul><li>, <ol><li> Listaelementit, joista ul on numeroimaton lista (ul = Unordered list) ja ol on numeroitu lista (ol = Ordered list). Listan elementti merkataan tagilla li (li = List Item).
  • <br />, <hr /> Pakotettu rivinvaihto (br = Break) ja vaakasuora jakoviiva (hr = Horizontal line)

Kuvat ja linkitys

  • <img src="kuvan url" alt="kuvan vaihtoehtoinen teksti" /> Kuva asetetaan HTML-kielessä img-tagilla. Kuvassa teksti src tarkoittaa kuvan lähdetiedostoa (source) ja lainausmerkkien sisään tulee kuvatiedoston url-osoite. Kuvan muotoilu tehdään tavallisesti CSS:n avulla lisäämällä kuvaan joko luokka (class) tai määritetään muotoilut style-määritteellä.
  • <a href="linkin url-osoite">Linkin teksti tai kuvaelementti</a> Linkki voidaan asettaa tekstiin tai kuvaan. Merkinnässä kirjain a on linkki ja href on linkin osoite. Linkkiin voidaan määrittää target="_blank" -määritteellä linkki aukeamaan selaimessa omaan välilehteen.
  • <a href="linkin url-osoite"><img src="kuvan url" alt="kuvan vaihtoehtoinen teksti" /></a> Jos asetamme linkin kuvaan, kuvan merkkaus asetetaan linkkielementin sisään.

Linkin osoite voidaan määritellä:

  • Suhteellisella osoitteella, jolloin linkin kohdetiedosto on osoitteessa suhteessa linkin sijaintiin.
    "../tiedosto.jpg" (tiedosto.jpg on yhden kansion ylempänä kansiorakenteessa)
  • Absoluuttisella osoitteella, jolloin kuvan url-osoite asetetaan linkkiin kokonaisuudessaan.
    "https://www.aurinkoverkko.com/tiedosto.jpg"