HTML ilə veb səhifələr yaratmağa başlamazdan sonra siz ölçmə ilə işə başlayacaqsınız. Sitenizi, istədiyiniz və ya başqa bir dizayner yaratdığınız bir tasarıma uyğun olaraq görünmesini istediğiniz şekilde görünmesi üçün, həmin saytdakı mətnin ölçüsünü və səhifənin digər elementlərini dəyişdirmək istəyə bilərsiniz. Bunu etmək üçün bir HTML "ölçüsü" etiketi axtarmağa başlaya bilərsiniz, ancaq onu tez bir şəkildə itirməyəcəksiniz.
HTML ölçüsü etiketi HTML-də yoxdur. Bunun əvəzinə, şriftlərinizin, şəkillərinizin və ya düzənlinizin ölçüsünü təyin etmək üçün Cascading Style Sheets istifadə etməlisiniz. Əslində, sayt mətninə və ya başqa elementə ehtiyacınız olan hər hansı bir görmə dəyişikliyi CSS tərəfindən idarə olunmalıdır! HTML yalnız struktur üçün.
Bir HTML ölçüsü etiketinə ən yaxın etiket, həqiqətən, bir ölçülü öznitelik içərisində olan köhnə font etiketi. Bu etiketin mövcud HTML versiyalarında qaldırıldığı və gələcəkdə brauzerlər tərəfindən dəstəklənməməsi xəbərdar olun! HTML-də yazı tipini istifadə etmək istəmirsiniz! Bunun əvəzinə HTML elementlərinizi ölçmək və müvafiq olaraq web səhifənizi tərtib etmək üçün CSS öyrənməlisiniz.
Font ölçüsü
Şriftlər, CSS ilə ölçülə biləcək ən asan şeydir. Moreso, mətni ölçəndən çox, CSS ilə veb saytınızın tipoqrafiyası haqqında daha dəqiq məlumat verə bilərsiniz. Şriftin ölçüsünü, rəngini, qapağını, çəkisini, aparıcı və daha çoxunu təyin edə bilərsiniz. Yazı tipi etiketi ilə, yalnız ölçüsü və sonra yalnız hər bir müştəri üçün fərqlənən brauzerin default font ölçüsünə nisbi bir rəqəm kimi təyin edə bilərsiniz.
Paragrafı 12pt yazı tipi ölçüsünə malik etmək üçün font ölçüsü üslubu xüsusiyyətini istifadə edin:
h3 {font-size = 24px; }Bu stil headiing3 elementlərinin font ölçüsünü 24 piksel təşkil edəcək. Bunu bir xarici stil səhifəsinə əlavə edə bilərsiniz və bütün saytınızın H3-ləri bu üslubu istifadə edəcəkdir.
Mətninizə əlavə mətn üslubları əlavə etmək istəyirsinizsə, bu CSS qaydasına əlavə edə bilərsiniz:
h3 {font-size: 24px; rəng: # 000; font-çəki: normal; }Bu, H3-lər üçün yazı tipinin ölçüsünü təyin etmir, eyni zamanda qara rəngə (bu # 000 hex kodunun nə deməkdir) təyin edəcəyini və ağırlığı "normal" halına gətirəcəyini söylədi. Varsayılan olaraq, brauzerlər 1-6 başlıqlarını qalın mətn kimi təqdim edirlər, buna görə də bu stil həmin default və əsasən mətni "cəsarətsiz" sayırdı.
Şəkil Ölçüləri
Şəkillər ölçüləri müəyyən etmək üçün çətin ola bilər, çünki əslində resmin ölçüsünü ölçmək üçün brauzerdən istifadə edə bilərsiniz. Əlbəttə ki, brauzer ilə şəkilləri yenidən ölçmək pis bir fikirdir, çünki səhifələr daha yavaş yüklənməyə səbəb olur və brauzerlər tez-tez şəkillərin pis görünməsini təmin etmək üçün yenidən ölçülməmiş bir iş görürlər. Bunun əvəzinə, şəkilləri yenidən ölçmək üçün qrafik proqramından istifadə etməlisiniz və sonra onların HTML ölçüsündə HTML ölçüsünə müvafiq ölçüləri yazmalısınız.
Şriftlərdən fərqli olaraq, şəkillər ölçüsü müəyyən etmək üçün ya HTML və ya CSS istifadə edə bilər. Görünüşün genişliyini və hündürlüyünü müəyyənləşdirirsiniz. HTML istifadə etdiyiniz zaman, şəkil ölçüsünü yalnız piksel olaraq təyin edə bilərsiniz. CSS istifadə etsəniz, düym, santimetr və faizlər daxil olmaqla digər ölçmələrdən istifadə edə bilərsiniz. Bu son dəyər, faizlər, şəkilləriniz həssas bir veb saytında olduğu kimi maye olması lazım olduqca faydalıdır.
HTML istifadə edərək, şəkil ölçüsünü müəyyən etmək üçün img etiketinin hündürlüyü və genişlik xüsusiyyətlərini istifadə edin. Məsələn, bu şəkil 400x400 piksel kvadrat olardı:
height = "400" width = "400" alt = "image" />CSS istifadə edərək, şəkil ölçüsünü təyin etmək üçün hündürlüyü və genişlik stilinin xassələrini istifadə edin. Burada ölçüsü müəyyən etmək üçün CSS-dən istifadə edərək eyni şəkil var:
style = "height: 400px; genişlik: 400px;" alt = "image" />Layout Ölçüləri
Sifarişdə müəyyənləşdirdiyiniz ən geniş ölçülü genişlikdir və qərar vermək üçün lazım olan ilk şey sabit bir genişlik düzeni və ya həssas bir veb saytın istifadə olunmağından ibarətdir . Başqa bir sözlə, eni piksel, düym və ya nöqtə sayını müəyyən edəcəksiniz? Yoxsa ems və ya faizlərdən istifadə edərək, layout genişliyini çevik olsun? Sifətinizin ölçüsünü müəyyən etmək üçün, bir şəkildə olduğu kimi, genişlik və yüksəklik CSS xüsusiyyətlərini istifadə edirsiniz.
Sabit genişlik:
style = "width: 600px;">Maye genişliyi:
style = "width: 80%;">Layout üçün genişliklərə qərar verdiyiniz zaman, oxucularınızın istifadə edə biləcəyi müxtəlif brauzer genişliklərini və onlar da istifadə edəcəyi müxtəlif cihazları nəzərə almalıyıq. Buna görə fərqli cihazlar və ekran ölçüləri əsasında yerləşdirmələri və ölçülərini dəyişə biləcək həssas saytlar bu gün ən yaxşı təcrübə standartıdır.