Kujunduselemendid[edit]

(Ala)pealkirjad[edit]

HTML siltide (HTML tag) tunnis sai muuhulgas mainitud, et

<h1> Kõige suurem pealkiri </h1> ütleb prauserile, et nende märgiste vahele kirjutatud juttu tuleb näidata eraldi real ja ülisuurte tähtedega.
<h2> pealkiri </h2> ütleb prauserile, et nende märgiste vahele kirjutatud juttu tuleb näidata eraldi real, aga pisut väiksemate tähtedega.
<h3> pealkiri </h3> ütleb prauserile, et nende märgiste vahele kirjutatud juttu tuleb näidata eraldi real, aga veel väiksemate tähtedega.

Ja nõnda edasi kuni h6'ni, mis tähistab kõige väiksemat alapealkirja (header).

Loetelu[edit]

HTML elemendid võimaldavad esitada tekstilõike ka loetelu kujul. Näiteks taoline kood:

      <ul>
        <li>
Esiteks väidame seda.
        </li>

        <li>
Teiseks väidame seda.
        </li>

        <li>
Kolmandaks väidame seda.
        </li>

      </ul>

annab taolise tulemuse:

Esiteks väidame seda.
Teiseks väidame seda.
Kolmandaks väidame seda.

Kui asendame <ul sildi (unordered list) <ol sildiga (ordered list) ^[1] :

      <ol>
        <li>
Esiteks väidame seda.
        </li>

        <li>
Teiseks väidame seda.
        </li>

        <li>
Kolmandaks väidame seda.
        </li>

      </ol>

siis saame nummerdatud loetelu:

Esiteks väidame seda.
Teiseks väidame seda.
Kolmandaks väidame seda.

<ul ning <ol silt tähistab nummerdamata või nummerdatud loetelu. Vahetult <ul> </ul> ega <ol> </ol> siltide (HTML tag) vahel ei või olla muud kui rea lõpetus, tühikud või -
- <li sildipaarid, mis tähistavad loetletud üksusi (list item) ^[2]. <li> </li> siltide (HTML tag) vahel võib olla juba tekst või mõni teine HTML element - isegi teine loetelu.

Tabel[edit]

Lihtsa tabeli kood on selline :

      <table>
        <tr>
        	<td>
Esiteks väidame seda
        	</td>

        	<td>
ja seda
        	</td>

        	<td>
ja seda.
        	</td>

        </tr>

        <tr>
        	<td>
Teiseks väidame seda
        	</td>

        	<td>
ja seda
        	</td>

        	<td>
ja seda.
        	</td>

        </tr>

      </table>

See annab taolise tulemuse:

Esiteks väidame seda	ja seda	ja seda.
Teiseks väidame seda	ja seda	ja seda.

<table silt piirab ühe tabeli. Vahetult <table> </table> siltide (HTML tag) vahel võib olla ainult rea lõpetus, tühikud või <tr sildipaarid.
- <tr sildipaarid tähistavad tabeli ridu (table row) ^[3]. Vahetult <tr> </tr> siltide (HTML tag) vahel võib olla ainult rea lõpetus, tühikud, <td või <th sildipaarid.
  - <td sildipaarid tähistavad tabeli lahtreid (table data cell) ^[4]. <td> </td> siltide (HTML tag) vahel võib olla juba tekst või mõni teine HTML element - isegi teine tabel. Tavalahtrite sisu kuvatakse tavakirjas ja vasakule joondatuna, aga saab ka teisiti kujundada.
  - <th sildipaarid tähistavad tabeli päise lahtreid (table header cell) ^[5], sest need võivad olla tavalahtreist erineva kujundusega. <th> </th> siltide (HTML tag) vahel võib olla juba tekst või mõni teine HTML element - isegi teine tabel. Päise lahtrite sisu kuvatakse jämedas kirjas ja keskele joondatuna, aga saab ka teisiti kujundada.

Ülesanne[edit]

1. Salvesta oma kodulehe kausta ".html" laiendiga ^[6] fail, milles oleks kasutatud kõiki selles tunnis käsitletud HTML elemente (silte).
- - Kas tabelit saab panna pealkirja siltide vahele?
  - Kas loetelu saab panna tabelisse?
  - Milliseid neist elementidest ei saa panna teiste sisse? Leia seaduspära!
  - Paranda alati vead (, kui neid on), et failid valideeruksid ^[7] ! Kasuta sellist standardit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html lang="et" xml:lang="et" xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="content-type" content="text/html;charset=utf-8" />
			<title> Kujunduselemendid </title>

		</head>
		<body>
Oma kood kirjuta siia!
		</body>
	</html>

Vastused[edit]

õpilane : " Kuidas Teie saavutasite sellised ilusad ääred oma tabelitele - et tabelil üldiselt on laiem must äär ja veergude ümber on peenem äär? Minul õnnestub teha ühtlane äär kõigile veergudele ja kogu tabelile. :( "

- õpetaja : "

<table border="3px"> aga ääri jm peaks kujundama CSS'iga ja sellest räägime hiljem. "

õpilane : " Mina ei leia küll vastust Teie küsimusele: Milliseid neist elementidest ei saa panna teiste sisse? Leia seaduspära! Ma katsetasin mitut moodi ja kõike lubas teha - st hakkas tööle. "

- õpetaja : "

Vaata sõbra lahendusi!
Valideeri!

"

Viited[edit]

[1] HTML Tags

[2] HTML Tags

[3] HTML Tags

[4] HTML element

[5] HTML Tags

[6] Failinime laiend Allikas: Vikipeedia

[7] Markup Validation Service

[1]

[2]

[3]

[4]

[5]

[6]

[7]