Jump to content

Programmeerimise algõpe: HTML Kujunduselemendid

From Wikiversity


< Programmeerimise algõpe


Kujunduselemendid

[edit]

(Ala)pealkirjad

[edit]

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

  1. <h1> Kõige suurem pealkiri </h1> ütleb prauserile, et nende märgiste vahele kirjutatud juttu tuleb näidata eraldi real ja ülisuurte tähtedega.
  2. <h2> pealkiri </h2> ütleb prauserile, et nende märgiste vahele kirjutatud juttu tuleb näidata eraldi real, aga pisut väiksemate tähtedega.
  3. <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:

  1. Esiteks väidame seda.
  2. Teiseks väidame seda.
  3. 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 : "
  1. Vaata sõbra lahendusi!
    1. http://beta.wikiversity.org/wiki/Programmeerimise_algõpe:_osalejad
    2. http://metroo.planet.ee/kujunduselemendid.html
    3. http://beta.wikiversity.org/wiki/User_talk:Metroo
  2. Valideeri!

"


Viited

[edit]