Wikiversity

Programmeerimise algõpe: HTML Atribuudid


< Programmeerimise algõpe


HTML Atribuudid

edit

HTML silte ("HTML tag") tutvustavas tunnis andsin muuhulgas sellise koodinäite: 

      <html 
	xmlns="http://www.w3.org/1999/xhtml" 
	lang="en" 
	xml:lang="en"
	>

Selles jupis on sildinimele "html" lisaks kolm koodiüksust, mida nimetame HTML atribuutideks:

  1. xmlns="http://www.w3.org/1999/xhtml"
  2. lang="en"
  3. xml:lang="en"

HTML atribuudid tähistavad selle ühe HTML elemendi iseärasusi. Näiteks selline kood: 

<table width="600px"  border="3px">
        <tr>
        	<td>
Esiteks tahame 
        	</td>

        	<td>
tabeli laiuseks
        	</td>

        	<td>
600 pikslit.
        	</td>

        </tr>

      </table>
<br/>

      <table width="300px"  border="3px">
        <tr>
        	<td>
Nüüd tahame 
        	</td>

        	<td>
tabeli laiuseks
        	</td>

        	<td>
300 pikslit.
        	</td>

        </tr>

      </table>

annab sellise tulemuse:

Esiteks tahame

tabeli laiuseks

600 pikslit.


Nüüd tahame

tabeli laiuseks

300 pikslit.

Ehk siis - esimese tabeli laius peaks olema 600 pikslit ( width="600px" ) ja teisel 300 pikslit. Kui lõpuni aus olla, siis ma lisasin ka tabeli piirjooni kujundava atribuudi border="3px" , aga sellest räägime hiljem.

Niisiis HTML atribuut koosneb tühikust, atribuudi nimest, võrdusmärgist ja jutumärkide või ülakomade vahele kirjutatud atribuudi väärtusest.

Näiteks : width="300px" ehk width='300px' ütleb veebilehitsejale (prauserile ehk browserile), et selle HTML elemendi laius peaks olema 300 pikslit [1].

Ühendatud lahtrid tabelites [2]

edit
  • colspan atribuut määrab, mitu järgnevat lahtrit see <td element peaks ühendama [3].
  • rowspan atribuut määrab, mitu teineteise all asetsevat lahtrit see <td element peaks ühendama [4]. Näiteks selline kood:
<table>
        <tr>
        	<td>
See peaks olema vasem ülemine nurk.
        	</td>

        	<td colspan="2">
See peaks ikka tõesti olema kahe veeru laiune lahter.
        	</td>

        </tr>
        <tr>
        	<td>
See peaks olema vasem äär.
        	</td>

        	<td rowspan="2">
See peaks olema kahe rea kõrgune lahter.
        	</td>

        	<td>
See peaks olema parem äär.
        	</td>

        </tr>
        <tr>
        	<td>
See peaks olema vasem alumine nurk.
        	</td>

        	<td>
See peaks olema parem alumine nurk.
        	</td>

        </tr>

      </table>

annab sellise tulemuse. (Lisasin ka tabeli piirjooni kujundava atribuudi border="3px" .):

See peaks olema vasem ülemine nurk.

See peaks ikka tõesti olema kahe veeru laiune lahter.

See peaks olema vasem äär.

See peaks olema kahe rea kõrgune lahter.

See peaks olema parem äär.

See peaks olema vasem alumine nurk.

See peaks olema parem alumine nurk.


Ülesanne

edit
  • 1. Salvesta oma kodulehe kausta ".html" laiendiga [5] fail, milles oleks kasutatud mõnd valideeruvat <td, <th, <tr ja <table elemendi atribuuti.

Igale HTML elemendile lubatud atribuudid leiad, kui vajutad W3schools'i HTML siltide tabelis (http://www.w3schools.com/tags/default.asp) sildi nimega linki vasakpoolses (Tag pealkirjaga) veerus.

  • 2. Leia vähemalt üks atribuut, mille lisamine ega muutmine kodulehe kujunduses välja ei paista!
  • 3. Leia vähemalt üks atribuut, mida eirab nii Internet Explorer kui Firefox prauser!
      • Paranda alati vead (, kui neid on), et failid valideeruksid [6] ! 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> HTML Atribuudid </title>

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


Vastused

edit
  • õpilane : " Ning ka järgmisele küsimusele vastamisega tekkis mul raskusi: Leia vähemalt üks atribuut, mida eirab nii Internet Explorer kui Firefox prauser!:( "


    • õpetaja : "
  1. Mine näiteks sellele lehele: http://www.w3schools.com/tags/tag_td.asp !
  2. Leia Attribute tabel!
  3. Leia Optional Attributes veerg!
  4. Klõpsi selle veeru linke, kuni jõuad leheni, millel on kirjas, et attribute is not supported by any of the major browsers.!

"


Viited

edit
  1. ↑ Pixel From Wikipedia, the free encyclopedia
  2. ↑ [ http://www.w3schools.com/tags/tag_td.asp HTML <td> Tag W3schools]
  3. ↑ [ http://www.w3schools.com/tags/att_td_colspan.asp HTML <td> colspan Attribute W3schools]
  4. ↑ [ http://www.w3schools.com/tags/att_td_rowspan.asp HTML <td> rowspan Attribute W3schools]
  5. ↑ Failinime laiend Allikas: Vikipeedia
  6. ↑ Markup Validation Service
Retrieved from "https://beta.wikiversity.org/w/index.php?title=Programmeerimise_algõpe:_HTML_Atribuudid&oldid=101192"