Programmeerimise algõpe: HTML Atribuudid
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:
- xmlns="http://www.w3.org/1999/xhtml"
- lang="en"
- 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].
- 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 : "
- Mine näiteks sellele lehele: http://www.w3schools.com/tags/tag_td.asp !
- Leia Attribute tabel!
- Leia Optional Attributes veerg!
- 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]- ↑ Pixel From Wikipedia, the free encyclopedia
- ↑ [ http://www.w3schools.com/tags/tag_td.asp HTML <td> Tag W3schools]
- ↑ [ http://www.w3schools.com/tags/att_td_colspan.asp HTML <td> colspan Attribute W3schools]
- ↑ [ http://www.w3schools.com/tags/att_td_rowspan.asp HTML <td> rowspan Attribute W3schools]
- ↑ Failinime laiend Allikas: Vikipeedia
- ↑ Markup Validation Service