Kujunduselemendid

(Ala)pealkirjad

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

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

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

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

õ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

[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]