beta

← Geri

İnformatika, Veb-proqramlaşdırma

HTML cədvəlləri, rənglər və şəkilli istinadlar: sətir, sütun, keçid

HTML kodundan cədvəlin istənilən xanasını oxumağı, qalın xanaları saymağı və şəkildən keçidi düzgün qurmağı öyrənəcəksən.

Oxumaq üçün 5 dəqiqə

Süni intellektlə hazırlanmış şəkil: masanın üstündə noutbuk, ekranda rəngli xanalardan ibarət cədvəl və kiçik şəkillər olan veb-səhifə.

Dərs cədvəlinə bax: sətirlər, sütunlar və onların kəsişdiyi xanalar. Dərs cədvəlində lazım olan dərsi sətir və sütuna görə tapmaq olur: əvvəl lazım olan sətir, sonra həmin sətirdə lazım olan xana.

Brauzer də eyni cədvəli göstərir, amma onu bir neçə qısa teqdən qurur. İmtahanda sənə hazır cədvəl yox, məhz bu kod verilir və ondan xananı “görmək” lazım gəlir.

Bir də internet mağazasında məhsulun şəklinə klikləməklə onun səhifəsinə keçmək olar. Bu da sadə bir qaydadır: şəkil bir yerdən gəlir, klik isə başqa yerə aparır.

Niyə lazımdır

Kodu oxuyub nəticəni gözündə canlandıra bilsən, sadə veb-səhifəni özün də yığarsan: dərs cədvəli, sinif siyahısı, şəkilli menyu. Elə bu bacarıqla başqasının səhifəsindəki səhvi də taparsan.

İmtahanda bu tapşırıqlar uzun hesab istəmir, amma diqqətsizliyi bağışlamır. Bir sətri və ya bir boş xananı ötürsən, cavab tamamilə dəyişir. Ona görə də burada saymaq qaydası düsturdan daha vacibdir.

İmtahan bu mövzuda nə soruşur?

İmtahanda HTML kodundan cədvəlin müəyyən sütununu və ya sətirlə sütunun kəsişməsindəki məzmunu tapırsan. Boş xanaları nəzərə almaq, mətnin görünüşünü müəyyənləşdirmək və qalın yazılı xanaları saymaq lazım gəlir. Şəklə kliklədikdə başqa səhifəyə keçid yaradan düzgün fraqmenti də seçə bilərsən.

Qayda

  • Cədvəl <table> elementi ilə qurulur. Onun daxilində <tr> sətir, sətrin içində isə <td> adi xana və <th> başlıq xanası yaradır.
  • Sıra kodun ardıcıllığına görə müəyyənləşir. Başlıqlar ayrıca sətirdədirsə, həmin sətir də sayılır. Birləşdirilmiş xanalar olmayan cədvəldə ikinci sütunu hər sətrin ikinci xanasından oxu. Boş <td></td> də yer tutur.
  • Görünüş üçün standart brauzer üslubunda <th> mətni qalın və mərkəzdə göstərilir. <b> və <strong> qalınlıq, <i> və <em> kursiv, <u> altcizgi verir. İç-içə teqlərin təsirləri birlikdə nəzərə alınır.
  • Dərslikdəki yazılışda border cədvəlin çərçivə və xana sərhədlərini göstərir; align xananın məzmununu üfüqi istiqamətdə düzləndirir. Məsələn, align="right" sağa düzləndirmədir.
  • Rəng sxemi səhifənin fon, mətn və istinad rənglərinin seçimidir. Köhnə HTML yazılışında <body> daxilində bgcolor fonu, text mətni, link açılmamış, vlink ziyarət edilmiş, alink aktiv istinadı rəngləndirir. Rəng adla və ya #RRGGBB şəklində verilə bilər; #FFFFFF ağdır.
  • Şəkil <img> ilə yerləşdirilir: src faylın ünvanını, width enini, height hündürlüyünü bildirir. Bu teqin qapadan cütü yoxdur.
  • İstinad <a href="ünvan">göstərici</a> şəklində qurulur. href keçiləcək yeri göstərir. Göstərici mətn və ya <a> daxilindəki şəkil ola bilər.
  • Nisbi ünvan cari sənədə nəzərən yazılır; eyni qovluqdakı səhifə üçün fayl adı kifayətdir. İnternetdə mütləq ünvan protokol və sayt adını da ehtiva edir.

Tapşırıqlarda istifadə olunan qaydalar

Öyrənilməli qayda

HTML cədvəlində <tr> sətri, <th> başlıq xanasını, <td> isə adi xananı bildirir. Xanalar birləşdirilməyibsə, sütunu müəyyənləşdirmək üçün hər sətirdə eyni mövqedə duran xananı götür; məzmunu boş olan xana da yer tutur.

Öyrənilməli qayda

HTML cədvəlində hər <tr> ayrıca sətir yaradır; başlıq xanalarını saxlayan sətir də sıra hesabına daxildir. Xanalar birləşdirilməyibsə, tələb olunan kəsişməni tapmaq üçün sətirləri yuxarıdan aşağıya, həmin sətrin xanalarını isə soldan sağa say.

Öyrənilməli qayda

Şəkildən keçid yaratmaq üçün <img> elementini <a> ilə </a> arasında yerləşdir. Keçidin ünvanını <a> elementinin href atributunda, şəkil faylının yolunu isə <img> elementinin src atributunda göstər.

Öyrənilməli qayda

Brauzerin standart üslubunda <th> xanasındakı yazı qalın olur; <b> qalınlıq, <i> kursiv, <u> isə altından xətt çəkilməsini təmin edir. Xananın görünüşünü müəyyənləşdirərkən daxildəki teqlərin təsirini də nəzərə al: məsələn, başlıq daxilindəki kursiv yazı qalınlığını saxlayır.

Öyrənilməli qayda

Standart brauzer üslubunda <th> başlıqları, həmçinin <b> və <strong> daxilindəki mətn qalın görünür; <i>, <em> və <u> özləri qalınlıq yaratmır. Qalın yazılı xanaları sayarkən əlavə kursiv və ya altxəttin qalınlığı aradan qaldırmadığını nəzərə al, hər xananı yalnız bir dəfə say.

Kodu oxu, cavabı seç

Hər sualda kiçik bir HTML parçası var. Brauzerin nə göstərəcəyini təsəvvür et və düzgün variantı seç.

Nümunələr

1

İkinci sütunu oxu:
<table>
<tr><th>Otaq</th><th>Yer</th></tr>
<tr><td>A</td><td></td></tr>
<tr><td>B</td><td>16</td></tr>
</table>

Həllə bax

Həll: Yer, boş xana, 16. İkinci sətirlə ikinci sütunun kəsişməsi boşdur; 16 üçüncü sətirdədir.

2

Sətirdə neçə xananın mətni qalındır?
<tr><th><i>Ay</i></th><td><b>İyun</b></td><td><u>30</u></td></tr>

Həllə bax

Həll: 2 xana. “Ay” başlıq olduğundan qalındır, daxili teq onu həm də kursiv edir. “İyun” qalın, 30 isə yalnız altcizgilidir.

3

Şəklə kliklədikdə nə açılar?
<a href="muzey.html"><img src="bina.jpg" width="80" height="60"></a>

Həllə bax

Həll: Səhifədə bina.jpg görünür, klik isə muzey.html sənədinə aparır. Şəklin eni 80, hündürlüyü 60 pikseldir.

Tipik səhv

Başlıq sətrini saymadım, boş xananı da ötürdüm: 1-ci nümunədə ikinci sətirlə ikinci sütunun kəsişməsi 16-dır.

Başlıq sətri birincidir, A ilə boş xana ikinci, B ilə 16 üçüncü sətirdədir: ikinci sətirlə ikinci sütunun kəsişməsi boşdur.

Başlıq sətrini və boş xananı ötürəndə mövqelər sürüşür. Əvvəl sətirləri, sonra seçdiyin sətirdə xanaları say.

Şəkilli istinadda da belə ayırma lazımdır: src ilə href atributlarını qarışdırmamaq üçün görünən şəklin faylını və klikdən sonra açılan ünvanı ayrı müəyyənləşdir.

Özünü yoxla

Kodda ikinci sətirlə ikinci sütunun kəsişməsində nə var? <table><tr><th>A</th><th>B</th><th>C</th></tr><tr><td></td><td>7</td><td>12</td></tr><tr><td>4</td><td>9</td><td>15</td></tr></table>

Bu kodda hansılar eyni rəngdə göstərilir? <body bgcolor="#FFFFFF" text="blue" link="green" vlink="blue" alink="red">

Kod belədir: <a href="bolme.html"><img src="nisan.png"></a>. Şəkil eyni qalsın, amma ona kliklədikdə siyahi.html açılsın. Hansı dəyişikliyi etməlisən?

Bu mövzunun sınağı

Bu mövzunun tapşırıqlarını həll et və hər birinin izahını oxu.

Mövzu üzrə sınaq, I qrup (Rİ)

Digər mövzular

Bütün İnformatika mövzuları

Dərslikdə bu mövzu

  • Dərslik: İnformatika, 10-cu sinif, «Cədvəllər və istinadlar», səh. 174