Joitain yleisimpiä HTML-elementtejä

Tässä annetaan pikayhteenveto yleisimmistä (X)HTML-merkkauskielen elementeistä. Elementeistä ja XHTML-kielestä löytyy kattavampaa tietoa esim. HTML-Dogin HTML Beginner -oppaasta. Kattava kuvaus kaikista XHTML:n elementeistä löytyy saman sivuston HTML tags -osiosta.

Peruselementit ja HTML-dokumentin rakenne

<html>
<head>
  <title>Sivun nimi</title>
</head>
<body>
  Sivun sisältö
</body>
</html>
  • HTML-dokumentti on aina kokonaisuudessaaan suljettu html -elementin sisään.
  • head-elementi sisään tulee erilaisia dokumentin määrittely- ja taustatietoja, minimissään sivuston nimi (title).
  • body-elementin sisään tulee sivun varsinainen sisältö.

Otsikot

<h1>Pääotsikko</h1>
<h2>Väliotsikko</h2>
<h3>Pienempi väliotsikko</h3>

Otsikkotasoja on olemassa kuutta eri tasoa. h1 tarkoittaa ensimmäisen, h2 toisen, h3 kolmannen tason otsikkoa jne.

Kappale

<p>Leipätekstiä.</p>

Suurin osa dokumentin tekstistä on yleensä suljettu kappale-elementtien sisään. Kapplae-elemntit yulee muistaa aina myös sulkea lopputunnisteella.

Rivinvaihto

<br />

Rivinvaihtoelementin avulla voi halutessa katkaista otsikon tai kappaleen tekstin toiselle riville ilman väliin jäävää riviväliä. br-elementillä ei ole sisältöä, eikä siksi loppuelementtiäkään.

Huom! Kappalejaon tekemiseen tulisi aina käyttää p-elementtiä rivinvaihtoelementin sijaan.

Listat

Järjestämätön lista:

<ul>
  <li>kissa</li>
  <li>koira</li>
  <li>kameli</li>
</ul>

Järjestetty lista:

<ol>
  <li>kulta</li>
  <li>hopea</li>
  <li>pronssi</li>
</ol>

Muotoiluelementtejä

<stong>Painotus</strong>
<em>Korostus</em>

Muotoiluelemnttejä käytetään kappaletekstin sisällä olevan tekstin muotoilemiseen. Selaimet esittävät yleensä strong-elemtin sisällön lihavoituna ja em-elemntin kursivoituna.

Linkki

<a href="osoite">Linkkiteksti</a>

Linkit merkataan a-elementillä, jonka href-attribuutti saa arvokseen linkitettävän osoitteen.

Sähköpostilinkissä osoitteen eteen tuleen mailto:-etliite:

<a href="mailto:sahköposti@osoite">Linkkiteksti</a>

Kuva

<img src="logo.gif" />

Kuvat liitetään HTML-dokumenttiin viittaamalla erilliseen kuvatiedostoon. Tämä tapahtuu img-elemntin avulla, joka saa src-attribuutin arvoksi kuvatiedoston tiedostonimen tai osoitteen. HTML-dokumentissa voi käyttää GIF, JPG tai PNG-formaatimn mukaisia kuvia.

Lisää elementtejä

Kategoriat

Kommentoi

Erota kappaleet kahdella rivinvaihdolla. Ei HTML-merkkausta.

Viesti

Nimi

Kotisivu

Sähköposti

Edit