HAKATEMIA
04HTML-perusteet

HTML ja Tekstin Muotoilu

Helppo20MIN

HTML-dokumentin ulkoasu muotoillaan pääasiallisesti CSS-tyyleillä, joihin syvennymme kurssin seuraavassa osiossa. HTML:ssä on kuitenkin erilaisia elementtejä joilla on oletusarvoisesti tietynlainen ulkoasu, ja niitä voidaan myös käyttää tekstin muotoiluun.

Näillä elementeillä voidaan luoda esimerkiksi otsikkoja (<h1>, <h2>, <h3>), kappaleita (<p>), lihavoitua (<b>), kursivoitua (<i>), alleviivattua (<u>), pienempää (<small>) ja suurempaa (<big>) fonttikokoa, alaindeksissä (<sub>) ja yläindeksissä (<sup>) olevaa tekstiä, rivinvaihtoja (<br>), erottelijoita (<hr>), esiasetettua tekstiä (<pre>), koodiesimerkkiä (<code>) ja lainausmerkkejä (<blockquote>).

Esimerkki

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Esimerkki tekstin muotoilusta</title>
5  </head>
6  <body>
7    <h1>Otsikko 1</h1>
8    <h2>Otsikko 2</h2>
9    <h3>Otsikko 3</h3>
10    <p>Tämä on kappaleen tekstiä.</p>
11    <b>Tämä teksti on lihavoitu.</b>
12    <i>Tämä teksti on kursivoitu.</i>
13    <u>Tämä teksti on alleviivattu.</u>
14    <small>Tämä teksti on pienemmässä koossa.</small>
15    <big>Tämä teksti on suuremmassa koossa.</big>
16    <sub>Tämä teksti on alaindeksissä.</sub>
17    <sup>Tämä teksti on yläindeksissä.</sup>
18    <br>
19    <hr>
20    <pre>Tämä teksti säilyttää välilyönnit ja rivinvaihdot.</pre>
21    <code>Tämä teksti on koodiesimerkki.</code>
22    <blockquote>Tämä teksti on lainausmerkkien sisällä.</blockquote>
23  </body>
24</html>
1 / 3
Hakatemia Pro

Hakkeroinnin oppiminen alkaa tästä

Sadat interaktiiviset kurssit, virtuaalilabrat ja CTF-haasteet selaimessasi. Aloita ilmainen kokeilu ilman korttitietoja.