Əgər biz sətrin uzunluğunu nümunədəki kimi 30 faiz təyin etmişiksə, onda cədvəlin qalan sətrinin uzunluğu 70 faizi keçməməlidir. Niyə? "Niyə"si çox sadə bir riyazi usulla aydındır, belə ki, cədvəlin ümumi uzunluğu 100 faiz olmalıdır və əgər biz bir tərəfə 30 faiz təyin etmişiksə onda 100-30=70 :)

İndi nümunəmizə qayıdaq, biz öz istəyimizə demək olar ki, çatmışıq:)

İndi bizə cədvəlin daxilindəkiləri uyğunlaşdırmaq qalıb:



Html dərsliyi Əsas anlayışlar



Yüklə 378,78 Kb.
tarix17.04.2018
ölçüsü378,78 Kb.
#38881
növüDərs
teqində "bgcolor" xassəsini işlədin:

Əgər siz butun cədvəldə fonun rəngini dəyişmək istəyirsinizsə, onda "bgcolor" xassəsini


Magistratura

HTML Dərsliyi - Əsas anlayışlar


Əsas alətlər. Əl ilə işləməyi öyrənirik.

Başlanğıcda gələcək səhifə üçün ayrıca direktoriya (qovluq) yaradın.

C:\Ilk addimlar\

İndi bloknotu (notepad) açın və ora növbəti mətni köçürün:





Menim <a href="/mavzu-ilk-ospirinlik-va-yoshlik-davrida-psixik-rivojlanish-xus.html">ilk addimim</a>


Salam, bu menim ilk sehifemdir.

Xosh gelmisiniz :)



Salam, bu menim ilk sehifemdir.


Xosh gelmisiniz :)

Salam, bu menim ilk sehifemdir.

Xosh gelmisiniz :)



Salam, bu menim ilk sehifemdir.

Xosh gelmisiniz :)


teqini yada salaq:

Bu onu göstərir ki, bütün sənədin mətnlərinin rəngləri göy rəngdə olacaq, teqinin arasında yazılanlardan başqa (əgər teqində rəng verilməyibsə, onda susmaya görə sənədin mətni qara rəngdə olacaq).





Menim ilk addimim


Salam, bu menim ilk sehifemdir.

Xosh gelmisiniz :)


teqində verilir:

Görünməsi üçün mən qara rəng seçdim, siz isə öz sənədinizi başqa rənglə də rəngləyə bilərsiniz (Əgər teqində rəng yazılmayıbsa, onda standarta görə ağ rəng qəbul edilir. Lakin bəzən ağdan başqa digər rənglər də ola bilər, ona görə də "body" teqində fonun rəngini versəniz yaxşı olar.





Menim ilk addimim

text="#336699" bgcolor="#000000">
Salam, bu menim ilk sehifemdir.

Xosh gelmisiniz :)


teqində həm fonun rəngini, həm də mətnin rəngini verə bilərik.

Bü hissə ilə biz demək olar ki, qurtarmışıq, indi isə bir az rənglər haqqında danışaq.

Hörmətli dostum, mən səndən fonun rənglərini açıq rəngdə verməməyi xahiş edirəm (sarı, qırmızı, narıncı və həmçinin qara fonda açıq mətnlə). Nə üçün? Bəli, sadəcə olaraq öz dostlarının və tanışlarının gözlərinə hayifin gəlsin. Həmçinin öz səhifəndə ayrı-ayrı fonların rənglərindən də istifadə etmə, bu da açıq rəng kimi diqqəti yayındırır və sənin məqaləni oxumağa mane olur.

Fonun rəngi haqqında bu qədər, indi növbəti addıma keçək.


Paraqraflar və "DIV". Mətni düzləndirməyi öyrənirik.

Bu bölmədə biz paraqraflar haqqında danışacağıq. Paraqraf aşağıdakı teq vasitəsi ilə verilir:

Paraqraf vasitəsi ilə biz mətni mərkəzləşdirə bilərik:

mətn

Paraqraf vasitəsi ilə biz mətni sol tərəf üzrə düzləndirə bilərik:

mətn

Və ya mətni sağ tərəf üzrə düzləndirə bilərik:

mətn

Hər iki tərəf üzrə nizamlaya bilərik:

mətn

İndi paraqrafı bizim sənədə daxil edək və görək nə alınacaq (Bizim nümunədə mən paraqrafı mətnin mərkəzləşdirilməsi ilə istifadə etdim (align="center"), siz isə paraqrafın digər xassələrini də yoxlayın (left, right və justify).

- Cədvəlin sətirləri.
- Cədvəlin sütunları.

Deməli sizin nəzərinizdə 2 sətir və 3 sütundan ibarət cədvəl təsvir olunub. Yaxşı görunməsi üçün mən cədvəlin xanalarını ayrı rənglərdə rəngləmişəm. Cədvəlin sərhəddi verilməyib, ona görə də siz onu görməyəcəksiniz. Bu gözəllik necə yarandı? Beləliklə mənim əlimin hərəkətini izləyin.




 

 

 



Menim ilk addimim




Salam, bu menim ilk sehifemdir.

Xosh gelmisiniz :)





Salam, bu menim ilk sehifemdir.

Xosh gelmisiniz :)




Salam, bu menim ilk sehifemdir.

Xoş gəlmisiniz :)




Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)




Salam, bu menim ilk sehifemdir.


Xosh gelmisiniz :)


Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)


336699" bgcolor="#000000">



Salam, bu menim ilk sehifemdir.


Xosh gelmisiniz :)


Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)




Salam, bu menim ilk sehifemdir.


Xosh gelmisiniz :)


Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)




Salam, bu menim ilk sehifemdir.


Xosh gelmisiniz :)




Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)


Salam, bu menim ilk addimimdir.


Xosh gelmisiniz :)




menim sheklimMen hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)

Shekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam.

Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir, belke biz real heyatda dost olduq:)

Sənəddə bütün mətnin rəngini dəyişdiyimiz kimi, bağlantının da rəngini dəyişmək üçün xassələri teqində yazırıq. Bizim nümunədə sadə, aktiv və baxılmış linklərin rəngləri eynidir, lakin siz öz istəyinizə uyğun olaraq onları müxtəlif edə bilərsiniz.

Demək bağlantını və onun rənglərini bizim nümunədə yazaq:


 

 

 



Menim ilk addimim

text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

Salam, bu menim ilk sehifemdir.


Xosh gelmisiniz :)




menim sheklim Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve daha bir virtual dostum artsin. :)

Shekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam.

Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir belke biz real heyatda dost olduq:)

link="#339999" vlink="#339999">



Salam, bu menim ilk sehifemdir.


Xosh gelmisiniz :)




menim sheklim Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaqve menim haqqimda oxumaq uchun bura baxa bilerler ve oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)

Sekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam.

Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir belke biz real heyatda dost olduq:)



(nümunə)

İndi isə brouzerdə baxıb görək bizdə nə alınıb. "primtocodephoto.gif" şəkli bağlantı oldu. Əgər hiss etmisinizsə, (etməmisinizsə, fikir verin): şəklin ətrafında çərçivə əmələ gəlib. Əgər bu çərçivənin olmasını istəmirsinizsə, onda onu şəklin daxilində border="0" (bunun haqqında biz artıq danışmışıq) yazmaqla dəyişmək olar.



mənim şəklimborder="0">

Fikir verdiyiniz kimi dərsliyin yeni variantında oxucuların maraqlı sualları yerləşdirilib. Bu başlıqda 2 belə suala baxılacaq.

Sual 1: "Şəklin ətrafınfakı çərçivəyə necə rəng vermək olar?"

Şəklin ətrafındakı çərçivəyə rəng vermək üçün "bordercolor" atributundan istifadə edilir, məsələn:



Bizim nümunədə şəklin çərçivəsini qırmızı verdim və təbii ki, burada əgər siz şəklin ətrafında çərçivəni görmək istəyirsinizsə, onda "border" (çərçivənin qalınlığı) atributu sıfıra bərabər olmamalıdır.

Lakin əgər sizin şəkil bağlantıdırsa, onda onun ətrafındakı çərçivənin rəngi "bordercolor" atributu ilə deyil, "body" teqindəki "link", "vlink", "alink" atributlarındakı rənglərlə olacaq.

İkinci sual: "Peşəkarlar çərçivələrdən istifadə edirmi?"

Nə vaxt, necə, bütün bunlar vəziyyətdən asılıdır. Ola bilər ki, bu cür çərçivəli şəkil sizin saytin dizaynına uyğundur və bu sayta daha da səliqə verir. Həmçinin ola bilər ki, əksinə - bütün bu çərçivələr lazım deyil və sizin saytın görünüşünə təsir edir, onda onları yığmaq lazımdır. Şəklin ətrafında çərçivənin lazım olub olmamasını özünüz fikirləşib, özünüz qərar verin.

Əgər siz fikirləşirsinizsə, bununla sizin bağlantılarla əlaqədar olan əzablarınız qurtarıb, onda səhv edirsiniz:) - Bizim irəlidə bir neçə gözəl addımımız qalıb.



Hara getməli, necə bağlanmalı? Bağlantıya sıxdıqda yeni pəncərə.

Əgər siz internetdə çox gəzmisinizsə, onda bilirsiniz ki, bağlantı təkcə *.html faylı ola bilməz, digər fayllar da ola bilər (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe və s.). Bunu necə edirlər? Bəli, bunlar hamısı eyni prinsiplə edilir:

mahnı yükləməli

Bu cür bağlantıya sıxanda bilirsiniz nə olacaq? İstifadəçidə musiqi faylını onun komputerində yaddaşa vermək üçün pəncərə çıxacaq. Yəni əgər fayl mətn (*.doc, *.txt) və ya *.html faylı deyilsə, onda brouzer sizə avtomatik olaraq həmin faylı kompüterinizdə saxlamağı təklif edəcək. Bu nə üçündür? Təbi ki, çoxsaylı oxucuların suallarına cavab olaraq musiqi faylları və ya proqramları yükləmək üçün onları öz saytlarında yerləşdirə bilərlər.

Yeri gəlmişkən, siz ola bilər ki, bu cür ünvan gördükdə təəccüblənəsiniz:

musiqi saytı

Bu onu göstərir ki, qeyd olunmuş kataloqda index.html kimi fayl var, bu fayl istifadəçi saytda daxil olarkən ilk olaraq yüklənir. Bax belə-belə işlər.

Amma gəlin şəkillər haqqında danışaq. Yəqin ki, bəziləriniz belə hallarla rastlaşmısıniz: Nə vaxt kiçik şəklə sıxırsan, onda həmin və ya ayrı pəncərədə böyük şəkil çıxır. Bunu necə edirlər? Burada heç bir hiylə yoxdur: Şəkil bağlantı düzəldirik (məsələn, small.jpg) və böyük şəklə bağlanırıq (məsələn, big.jpg):

Bu halda böyük şəkil elə həmin pəncərədə açılacaq. Necə etməli ki, şəkil (və ya ayrı fayl) ayrı pəncərədə açılsın? İş ondadır ki, teqində "target" atributu var:

Deməli target="_blank" - onu göstərir ki, bağlantı olan sənəd (bizim nümunədə şəkil) brouzerin başqa pəncərəsində açılacaq. Bizim böyük nümunəyə mən bunu salmayacağam. Yəni böyük şəkilləri sənədə salmayacağam. Həm də siz bunların hamısını artıq özünüz yoxlamalısıniz:)

Məni düzgün başa düşün, əgər siz özünüz sərbəst təcrübə aparmasanız, onda heç kim sizin yerinizə bunu edə bilməz, bilikləri möhkəmlətmək lazımdır.
Nişan. Sənədin daxilinə necə bağlantı etməli.

Bu fəsildə biz bağlantılar haqqında söhbətimizi davam edəcəyik. Bəzən belə bir vəziyyət yaranır: bizə digər sənədə deyil, elə cari sənədin daxilində müəyyən sətirdəki sözə bağlantı lazım olur (nümunəyə bax, orda linklərə basın). Sənədin daxilində bu cür naviqasiyanın olması çox rahatdır. Bu iki üsulla yaradıla bilər.



Birinci üsul - "a" teqinin "name" (qoşmanın adı) atributu ilə:


 

 

 

Qriqoriy Oster, "Zərərli məsləhətlər.

Sözə baxmayan uşaqlar və onların valideynləri üçün kitab".


#stih1">Şerlərə olan 1-ci bağlantı

#stih2">Şerlərə olan 2-ci bağlantı

#stih3">Şerlərə olan 3-cü bağlantı
Bu yaxınlarda alimlərə məlum oldu ki, sözə baxmayan və deyilən sözləri tərsinə edən uşaqlar var. Onlara xeyirli məsləhət verirlər: "Səhərlər yuyun" - onlar isə yuyunmurlar. Onlara deyirlər "Bir-birinizlə salamlaşın" - onlar ise salamlaşmırlar. Alimlər belə nəticəyə gəldilər ki, onlara xeyirli məsləhət yox, zərərli məsləhət vermək lazımdır. Onlar hər şeyi əksinə edir və nəticədə xeyirli nə isə alınır.


Birinci şer


... tra-lya-lya 1...




İkinci şer


... tra-lya-lya 2...




Üçüncü şer


... tra-lya-lya 3...

(nümunə)

Bizim nümunədə biz "a" teqinin "name" artibutundan istifadə etməklə (Birinci şer, İkinci şer, Üçüncü şer) qoşmalarla düzəltdik:

Üçüncü şer

Sonra çəkinmədən biz onlara bağlantı qoyduq:

#stih3">Şerlərə olan üçüncü bağlantı

Yadda saxlayın ki, bağlanacağımız hissədə #stih3"> bağlantının qarşısındakı "dies" işarəsi (#) vacibdir. Siz digər səhifələrdən də bu qoşmaya müxtəlif fayllardan bağlana bilərsiniz, bu, aşağıda təsvir edilən kimi olacaq:

ancorpri.html#stih3"> Digər sənəddən Üçüncü şerə bağlantı

və ya


http://www.firststeps.az/ancorpri.html#stih1"> Digər sənəddən Üçüncü şerə bağlantı

(şaytın ünvanı, sənədin adı, + bağlanacağımız qoşmanın adı)




İkinci üsul - "id" adlı atribut var, onun köməkliyi ilə sənədin daxilində istənilən teqə (base, head, html, meta, script, style, title teqlərindən başqa) unikal ad təyin etmək mümkündür. Məs H3 teqinə "id" təyin etməkdə bizə heç bir şey mane olmur.


 

 

 

Qriqoriy Oster, "Zərərli məsləhətlər

Sözə baxmayan uşaqlar və onların valideynləri üçün kitab".


#stih1">Şerlərə olan 1-ci bağlantı

#stih2">Şerlərə olan 2-ci bağlantı

#stih3">Şerlərə olan 3-cü bağlantı
Bu yaxınlarda alimlərə məlum oldu ki, sözə baxmayan və deyilən sözləri tərsinə edən uşaqlar var. Onlara xeyirli məsləhət verirlər: "Səhərlər yuyun" - onlar isə yuyunmurlar. Onlara deyirlər "Bir-birinizlə salamlaşın" - onlar ise salamlaşmırlar. Alimlər belə nəticəyə gəldilər ki, onlara xeyirli məsləhət yox, zərərli məsləhət vermək lazımdır. Onlar hər şeyi əksinə edir və nəticədə xeyirli nə isə alınır.


Birinci şer


... tra-lya-lya 1...




İkinci şer


... tra-lya-lya 2...




Üçüncü şer


... tra-lya-lya 3...

(nümunə)



Baxın, görünüşcə heç nə dəyişməyib, hər ikisi eyni cür işləyir, ona görə də siz bunlardan istədiyinizi seçə bilərsiniz (hansı daha çox xoşunuza gəlirsə :).

Həmçinin sizi xəbərdar etmək istəyirəm ki, bu cür istifadə etməyin:




 

 

 

#stih">Bağlantı...

...
STIH">Qoşma


Əgər siz qoşmanın adını iri hərflə təyin edib, ona bağlanarkən kiçik hərflərdən istifadə edirsinizsə, ola bilər ki, brouzer onu dəstəkləməsin və düzgün işləməsin. Ona görə də həmişə qoşmalara ad qoyarkən kiçik və boyük hərflərə fikir verin, hamısını eyni registrdə edin.

Bununla da bizim bağlantılarla olan əzablarımız bitdi. Növbəti dərslərdə biz cədvəllərlə tanış olacağıq. Bunun üçün biz xüsusi simvollar, xətlər, siyahılar, qaçan sətir kimi mövzuları buraxmalı olacağıq. Amma kədərlənməyin, bu mövzulara sonra qayıdacağıq.

İrəli, cədvəllərə doğru addımlayırıq.


Cədvəl yaratmağı öyrənirik.

Gec və ya tez biz gəlib cədvəllərə çatdıq. Saytları yaradarkən cədvəllərdən çox istifadə edilir. Məsələn, firststeps.az saytını yığarkən cədvəllərsiz keçinə bilmədik. Belə ki, şəkillər, məlumatlar, hamısının səliqə ilə yerləşməsi üçün bir-birinin içində cədvəllər yaratdıq. Həmçinin sadə bir sayt nümunəsinə baxın, onun tərtibatında da cədvəllərdən istifadə edilib.

Cədvəl aşağıdakı teq vasitəsi ilə verilir:

Bu hələ hamısı deyil. Cədvəllər sətir və sütunlardan ibarətdir, ona görə də onları təsvir etmək lazımdır.




 

 

 





Əvvəlcə sətirlər verilir. Bizim nümunədə onlar 2 dənədir. Sonra hər sətirdə 3 sütun düzəldək:




 

 

 













Məndən sizə məsləhət, görunməsi üçün əvvəlcə vərəqdə cədvəli çəkin. Belədə nəticənin necə olduğunu rahat görəcəksiniz və probleminiz az olacaq.

Demək bizə alınmış karkası doldurmaq qalıb:


 

 

 












1x1 1x2 1x3
2x1 2x2 2x3

Mənə elə gəlir ki, siz yuxarıdakı yazılışda 1-ci rəqəmin sətrin nömrəsi, 2-cinin isə sütunun nömrəsi olduğunu başa düşdünüz. Bu yenə də yaxşı görünməsi üçündür. Baxaq görək bizdə nə alınıb:



1x1

1x2

1x3

2x1

2x2

2x3

Təəssüf ki, hələlik fon görünmür. Fon bgcolor="rəngin kodu" xassəsi ilə verilir. Fonu cədvəldə bütöv sətir üçün və ya ayrıca xana üçün də vermək olar.




 

 

 












bgcolor="#FFCC33">1x1 bgcolor="#336699">1x2 bgcolor="#FFCC33">1x3
bgcolor="#336699">2x1 bgcolor="#FFCC33">2x2 bgcolor="#336699">2x3

Baxın bizdə nə alındı.

Əgər siz bir sətirdə bütün fonu dəyişmək istəyirsinizsə, onda

teqinə tətbiq edin:



Həmçinin əgər siz bundan başqa hər hansı sətir və ya sütunda özünüzün təyin etdiyiniz rəngi istifadə edirsinizsə, onda burada fonun rəngi təyin etdiyiniz kimi olacaq.

Fonun rəngini cədvəl üçün və ayrıca yazmağa çalışın. Hamısını başa düşdükdən sonra cədvəllərə həsr olunmuş növbəti addıma keçmək olar.
Cədvəl yaratmağı öyrənirik (ardı).

Demək yadınızdadırsa, biz sizinlə belə bir cədvəl yaratmalı idik:

Amma bizdə hələlik belə cədvəl alınıb:

Bəs problem nədədir? İş ondadır ki, biz cədvəlin sətir və sütunlarının ölçüsünü verməmişik. "height" və "width" xassələrini yada salaq. Siz bunları bütöv cədvəl üçün və həmçinin ayrıca xanalar üçün də verə bilərsiniz. Yada salaq ki, hündürlük və en piksel və ya faizlərlə də verilə bilər. Bizim nümunədə biz xanalar üçün hündürlüyü piksellə verəcəyik.




 

 

 












height="35" width="50" bgcolor="#FFCC33"> 1x1 width="50" bgcolor="#336699"> 1x2 width="50" bgcolor="#FFCC33"> 1x3
height="35" width="50" bgcolor="#336699"> 2x1 width="50" bgcolor="#FFCC33"> 2x2 width="50" bgcolor="#336699"> 2x3

O dəqiqə ilk sualı özüm verəcəyəm: "Nə üçün hündürlük yalnüz 2 xana üçün verilib, lakin en hamısı üçün verilib?" Sadəcə olaraq: Çünki cədvəllərdə xanalardan hansı ən böyük olarsa, onda həmin xana üzrə yerdə qalan xanalar da o hundurlukdə olacaq:) Həmçinin sətirlər üçün də ən uzun olan sütunun ölçüsü üzrə digər sütunlar da o uzunluqda olacaqlar.

Həmçinin siz bütöv cədvələ ölçü verə bilərsiniz, bu halda sətir və sütunlar öz aralarında eyni ölçüdə bölünəcəklər.

Yeri gəlmişkən, "height" və "width" atributlarını faizlə də təyin etmək olar:



Sətrin içindəki mətn

 

 

 












1x1
1x2
1x3
2x1
2x2
2x3

Və... Hazır!:)

Hər bir xananın daxili xüsusi otaq kimi olduğu üçün, biz hər bir xananın daxilində mətni mərkəzləşdirmək üçün hər dəfə yeni teqlər yazdıq.

Siz həmçinin mətni mərkəzləşdirmək üçün

teqindən başqa, "align" atributunu da xatırlamalısıniz. Bu atributla cədvəlin xanalarına uyğunlaşma vermək olar:



align="center">2x2

Həmçinin "align" atributuna "right" və "left" qiymətləri təyin etmək olar. teqinin "align" atributunda "justify" qiymətini istifadə etmək mümkün deyil. Bizim halda "align" atributu xananın içindəki məlumatları uyğunlaşdırır (əgər siz başa düşməmisinizsə:).

Hər bir xanada şəkil, mətn və hətta cədvəl də ola bilər. Həmçinin bizim mətnləri formatlaşdırmaq üçün istifadə etdiyimiz teqlər də istifadə oluna bilər.

Gəlin növbəti addıma keçək və cədvəllər haqqında söhbətimizi davam edək.


Cədvəllər. Şaquli uyğunlaşma (valign).

Əvvəlki dərslərdə biz cədvəlləri konkret məsələ üzərində öyrənmişdik. Lakin bu dərsdə mən cədvəllərə aid olan bütün imkan və xassələri bir dəfəlik başa salmaq istədim, amma birdən yadıma düşdü ki, dərslik yazıramsa axıracan, hər tərəfli yazmalıyam:).

Əvvəlki nümunəmizə qayıdaq və cədvəlimizin şaquli üyğünlaşması haqda danışaq. Yəni ki, cədvəlin xanaları aşağı və yuxarı hissələrdə eyni məsafədə (mərkəzdə) olacaqlar. Şaquli üyğünlaşma aşağıdakı atribut vasitəsi ilə verilir. valign="middle" (tob, bottom), uyğun sətrin tutumu mərkəzdə (yüxarı və ya aşağı) yerləşəcək:
Bax bu da sizə nümunə, indi isə bunları yazaq:


 

 

 












valign="top">
1x1
1x2
valign="bottom">
1x3
valign="bottom">
2x1
2x2
valign="top">
2x3

Mən "valign" xassəsini bütün xanalarda yazmadım, lakin mənə lazım olan yuxarı və aşağı hissələrdə istifadə etmişəm. "valign" xassəsi bizim sizinlə "həyatımızı qısaldır". Təsəvvür edirəm, əgər bu xassə olmasaydı, biz nə əzab çəkərdik:)

İndi bizim "həyatımızı qısaldan" xassələri öyrənmək üçün növbəti addıma keçək.
Cədvəllər. Xanaları bölməyi öyrənirik (rowspan, colspan).

Bu bölmədə biz "rowspan" və "colspan" xassələrindən danışacağıq. "colspan" verilmiş xananın sütunlarının sayını təyin edir, "rowspan" isə sətirlərin sayını təyin edir (Bu xassələr 2 və daha artıq qiymətlər ala bilər. Yəni ki, bizim xana 2-dən çox hissəyə bölünə bilər). İndi hər şeyi yaxşı başa düşmək üçün nümunələrə müraciət edək.

Bu nümunədə biz 1x1 xanası üçün colspan="2" yazdıq. Kod növbəti şəkildə olacaq:


 

 

 











colspan="2">
1x1
1x2
2x1
2x2
2x3

Fikir versəniz görərsiniz ki, biz nümünədə 1x1 xanası üçün "width" xassəsini verməmişik, əgər vermək lazım gəlsəydi onu 100 piksel vermək lazım idi, çünki 1x1 xanası o biri xanalardan 2 dəfə böyükdür.

Bizim nümunədə 1x3 xanasının olmamasına fikir verməyi xahiş edirəm, yəni ki, 1-ci sıradakı 1x1 xanasının uzunluq ölçüsü 2 xananın ölçüsünə bərabərdir (bunu biz "colspan" xassəsində vermişik. Əgər biz 1x3 xanasını yazsaydıq, onda bizdə belə bir mənasız şey alınardı.

"colspan" və "rowspan" xassələri ilə ehtiyatla davranın. Səhv etsəniz, ola bilər ki, sizin sayt qaçsın, səhv göstərsin. "colspan" xassəsi ilə tanış olduqdan sonra indi də "rowspan" xassəsi ilə tanış olaq, burada da prinsip eynidir:

Bu cür cədvəl üçün özünüz yazmağa çalışın (Qeyd edim ki, burada 2x3 xanası itməlidir). Bütöv mənimsənilməsi üçün bu cür cədvəl üçün də kod yazmağa çalışın:

Əgər heç nə alınmayıbsa, növbəti addımda nümunəyə baxa bilərsiniz. Hər şey uğurlu alınıbsa, deməli siz qoçaqsıniz və artıq növbəti addıma keçə bilərsiniz.


Cədvəllərin çərçivələri.

Cədvəllərə həsr olunmuş bu axırıncı dərsdə biz çərçivələrdən danışacağıq. Çərçivə "border" xassəsi vasitəsi ilə verilir. 3 pikselə bərabər çərçivə yaradaq:



border="3">

Cədvəlin qalan hissəsini özünüz yazarsıniz. Bu aşağıdakı kimi görsənəcək:



Çərçivəli cədvəl

Bizim çərçivəyə rəng də verə bilərik. Qoy bizim nümunədə o qara olsun:



bordercolor="#000000">

Çərçivəli cədvəl.

Hər şey çox sadədir.

Əgər siz bir rəngli çərçivə yaratmaq istəyirsinizsə (məsələn, qara rəngdə olan), onda biz "cellpadding" atributu ilə qara cədvəli istifadə edəcəyik, hansı ki, yadınızdadırsa, biz onu xananın olçüsünü təyin etmək üçün istifadə edirdik. Əsas cədvəlimizi digər bir cədvəlin içinə qoymaqla biz qalınlığı "cellpadding" atributu ilə təyin etdyimiz qədər piksel olan rəngli cədvəlin içində yerləşmişdir (Bizim nümunədə bgcolor="#000000").

Baxmaq üçün nümunə kodu:




 

 

 

cellpadding="5" bgcolor="#000000">




...


Digər variant da var, lakin yenə də daxili cədvəllərin köməkliyi ilə. 3 sətirdən ibarət əsas cədvəli yaradaq, ilk və son xanalar bizim çərçivənin yuxari və aşağısı olacaq. 2-ci sütunu 3 xanaya bölürük: Burada da 1-ci və 2-cü xana bizim çərçivərin tini olacaq (Bununla biz lazımi eni və rəngi yazacağıq). 2-ci sütunun, orta xanasına isə bizə lazım olan daxili cədvəli yerləşdiririk.

2-ci üsul çətindir, lakin o sizə punktirli çərçivə yaratmaq üçün lazım ola bilər, bu halda biz punktir xətləri olan şəkil düzəldir, sonra isə əsas cədvəlin 1-ci, 3-cü sütun və 2-ci sütunda 1-ci, 3-cü xanalarda yerləşdiririk. Beləliklə də istədiyimizi əldə edirik.

Söz düşmüşkən, incəliklərdən danışdıq. Bəzən mənə sual verirlər ki, cədvəllərdə necə edirlər ki, küncləri girdələnmiş cədvəllər yaradırlar - Çox sadə, əgər siz bu cür cədvəl yaratmaq istəyirsinizsə, bunun üçün 4 şəkil yaratmaq lazımdır. Sonra isə onları cədvəlin künclərində yerləşdirmək və illüziya yaratmaq lazımdır ki, guya cədvəlin girdəvari küncləri var. Şəkilsiz bu mümkün deyil :)

Əslində cədvəl yaratmaq heç də çətin deyil, hətta bütün bunlar heç də incəlik sayılmır. Sizin hər biriniz buna öz ağlınız ilə nail ola bilərsiniz. Bunun üçün HTML-in mexanizmini anlamaq və öz fikir və fantaziyanızı işlətmək kifayətdir.

Amma ən çətini odur ki, bu yaratdıqlarımızın hamısının müxtəlif brouzerlərdə eyni görünməsidir. Həmin cədvəllərin eyni çərçivələrini götürək:





IE-də müxtəlif cədvəllər

 

NN-də müxtəlif cədvəllər



 



Mənə elə gəlir ki, bu daha yaxşı nümunədir. Peşəkar koderlər öz yaratdıqları səhifələri müxtəlif tip brouzerlərdə nəzərdən keçirirlər ki, onlar hər yerdə eyni cür görsənsin. Hər bir brouzerin öz şıltaqlığı var, ona görə də saytın müxtəlif brouzerlərdə eyni cür görsənməsi çətin tapşırıqlardan sayılır.

Mən məsləhət görürəm ki, imkan daxilində sizin sənədin müxtəlif brouzerlərdə, ekran ölçülərində necə görsənməsini yoxlayasınız, belə ki, sonra elə qüsur araya çıxa bilər ki, sizə indiyə kimi məlum olmasın.

Əgər siz Internet Explorer-dən başqa digər brouzer işlədənlərə məhəl vermirsinizsə, müxtəlif tip ekran ölçüsü işlədənlərə məhəl qoymamaq olmaz, bu tamam başqa işdir. Bilməyənlər üçün qeyd: İki ən çox istifadə edilər ölçü var: 800x600 və 1024x768

Heç vaxt yaddan çıxarmaq lazım deyil ki, sizin səhifəyə böyük və ya balaca ekran ölçüsündə baxa bilərlər və heç bir zəmanət yoxdur ki, siz peşəkar koder ola-ola sizin cədvəllər harasa qaçmayacaq, məsələn nənəsigilə (Bəli bəli, bu haqda nə qədər danışmışıq, nə qədər yazmışıq, lakin heç bir faydası yoxdur. Maraqlıdır, niyə bəziləri bunu anlamaq istəmirlər).

Yenə də yada salmaq istəyirəm (başa düşməyənlər üçün): biz cədvəlləri saytımızın elementlərinin formaya salınması üçün istifadə edirik. Cədvəllərin köməkliyi ilə biz çox şey edə bilərik: 3 sadə mətnin yanakı sütunlarda yerləşməsindən çətin tərtibata qədər, harda ki, sizin gözəl şəkillər cədvəlin müxtəlif xanalarında yerləşəcəklər, nəticədə gözəl və qarışıq naxış alınacaq.

Beləliklə mənim əziz oxucularım, sizin mətnin hər iki tərəfində şəkil yerləşdirmək və digər bu tip sualları mən təhqir və ya qəzəbli zarafat kimi qəbul edəcəyəm :)

Növbəti addımda biz sizinlə indiyədək öyrəndiklərimizin köməkliyi ilə cədvəllərdən ibarət olan və çox da çətin olmayan bir sayt düzəldəcəyik.



Cədvəllərlə olan sadə sayt düzəldirik.

Demək, beləliklə bizim baxdığımız nümunələrdən birini götürək:





 

 

 










1x1
1x2
2x1
2x2

Gəlin bunun əsasında mükəmməl səhifə düzəldək. İlk olaraq bunun üçün vacib teqləri daxil edək:




 

 

 



Menim cedvellerle olan ilk saytim












1x1
1x2
2x1
2x2




width="700">








width="400" bgcolor="#FFCC33" colspan="2">
1x1
width="300" bgcolor="#336699" rowspan="2">
1x2
2x1
2x2














Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler ve oz urek sozlerini qonaq kitabima yaza bilerler.

Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)

Shekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam.

Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir belke biz real heyatda dost olduq:)



1x2
2x1
2x2




cellpadding="20">








valign="top">

Sehifeme xosh gelmisiniz


Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqda oxumaq uchun bura baxa bilerler ve oz urek sozlerini qonaq kitabima yaza bilerler.

Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)

Shekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam.

Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir belke biz real heyatda dost olduq:)



valign="top">

menim sheklim

menim sheklim


2x1
2x2















Sehifeme xosh gelmisiniz


Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqda oxumaq uchun bura baxa bilerler ve oz urek sozlerini qonaq kitabima yaza bilerler.

Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. :)

Shekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam.

Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir belke biz real heyatda dost olduq:)





menim sheklim

menim sheklim



Mene mektub yaz


Shekillerime bax





Yüklə 378,78 Kb.

Dostları ilə paylaş:




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©genderi.org 2024
rəhbərliyinə müraciət

    Ana səhifə
Psixologiya