Bir şəkil ətrafında mətni necə saraşdırmaq olar

Hər hansı bir web səhifəsinə baxın və mətn məzmunu və görüntülərin birləşməsini görəcəksiniz. Bu elementlərin hər ikisi bir veb saytın uğurunda əsas komponentlərdir. Mətn məzmunu, sayt baxışlarının oxumaqları və axtarış motorlarının sıralama alqoritmlərinin bir hissəsi kimi istifadə edəcəyidir. Şəkillər saytınıza vizual maraq əlavə ediləcək və mətnin məzmununu vurğulamağa kömək edəcəkdir.

Veb saytlara mətn və şəkillər əlavə etmək asandır. Resim, paraqraflar, başlıqlar və siyahılar kimi standart HTML etiketləri ilə əlavə olunur, şəkillər isə elementi olan bir səhifəyə yerləşdirilir. Veb səhifəmizə bir şəkil əlavə etdikdən sonra, aşağıda hizalanmaq deyil, (html kodu əlavə edilən bir görünüş brauzerdə göstəriləcək) şəklin yanında mətn axınına sahib olmaq istəyə bilərsiniz. Texniki baxımdan, CSS-ni istifadə edərək, bu görünüşə nail olmaq üçün iki yol var və ya görsel təlimatları birbaşa HTML- də əlavə etməklə (tövsiyə olunmur, çünki veb saytınız üçün stil və strukturun ayrılmasını təmin etmək istəyirik).

CSS istifadə

Bir səhifənin mətn və şəkillər düzeni və onların görsel üslublarının brauzerdə necə göründüyünü dəyişdirmək üçün düzgün yol CSS- dir. Yalnız bir xatırlayırıq ki, səhifədə görsel bir dəyişiklik (bir resmin ətrafında mətn axını edilməsi) haqqında danışdığımızdan bu, Cascading Style Sheets-in domainidir.

1. Birincisi, şəkilinizi veb səhifəyə əlavə edin. Həmin HTML-dən istənilən vizual xüsusiyyətləri (genişlik və hündürlüklər kimi) istisna et. Bu xüsusilə, şəkil ölçüsünün brauzer əsasında dəyişəcəyi bir cavab verən veb sayt üçün vacibdir. Adobe Dreamweaver kimi müəyyən proqram, həmin vasitəyə daxil edilmiş şəkilləri üçün genişlik və yüksəklik məlumatlarını əlavə edəcək, buna görə də bu məlumatı HTML kodundan çıxarın! Bununla belə, müvafiq alt mətni daxil etmək üçün əmin olun. HTML kodunuzun necə göründüyünə bir nümunə:
2. Üslub məqsədləri üçün, bir təsvirə bir sinif əlavə edə bilərsiniz. Bu sinif dəyəri CSS faylımızda istifadə edəcəyimiz şeydir. Burada istifadə etdiyimiz dəyər özbaşına deyil, baxmayaraq ki, bu stil üçün, bizim şəkildən hansı şəkildə uyğunlaşmaq istədiyimizə görə, "sol" və ya "hüququ" dəyərlərindən istifadə etmək məcburiyyətindəyik. Biz bu sadə sözdizmin yaxşı işləməsi və gələcəkdə bir saytın idarə olunması üçün idarə oluna biləcək başqalar üçün asan olmağı tapırıq, ancaq istədiyiniz hər hansı bir sinif dəyəri verə bilərsiniz.
   2. Özü də bu sinif dəyəri bir şey etməyəcək. Görünüş avtomatik olaraq mətnin solunda hizalanmaz. Bunun üçün artıq CSS faylına müraciət etməmiz lazımdır.

1. Şablonunuzda aşağıdakı stil əlavə edə bilərsiniz:
   1. .left {
   2. float: sol;
   3. padding: 0 20px 20px 0;
   4. }
   5. Burda etdiyiniz şey, normal sənəd dövriyyəsindən (görünüşün normal şəkildə göründüyü şəkildə, mətnin altından hizalanması şəklində) çəkəcəyini və konteynerin sol tərəfinə uyğunlaşdıracaq CSS "float" xüsusiyyətini istifadə edir . İndi HTML etiketlemesinden sonra gələn mətn onu ətrafında sarın. Biz də bəzi mətn dəyərlərini əlavə etdik ki, bu mətn birbaşa imicə qarşı deyil. Bunun əvəzinə, səhifənin dizaynında vizual cazibədar olacaq gözəl bir boşluq olacaq. Padding üçün CSS stenografiyasında, görüntünün üst və sol hissələrinə 0 dəyər, sol və altına 20 piksel əlavə etdik. Unutmayın, sol hizalı təsvirin sağ hissəsini bir neçə əlavə etmək lazımdır. Düz bir hizalı təsvir (bir anda baxdığımız) sol tərəfinə tətbiq olunan padding olacaqdı.
2. Veb səhifənizi brauzerinizdə görürsünüzsə, artıq görünüşünüzün səhifənin sol tərəfinə uyğun olduğunu görə bilərsiniz və mətn ətrafını gözəl bir şəkildə sarar. Bunu söyləmək üçün başqa bir yoldur ki, şəkil "sola süzülür".

1. Bu görüntüyü sağa uyğunlaşdırmaq üçün dəyişdirmək istəyirsinizsə (bu məqalə ilə birlikdə şəkil nümunəsində olduğu kimi), sadə olardı. Birincisi, əmin olduğunuz ki, CSS-yə yalnız "sol" sinfi dəyərinə əlavə etdiyimiz üsluba əlavə olaraq, biz də sağ tərəfə birləşmə üçün birimiz var. Bu belə görünür:
   1. Təxminən
   2. float: sağ;
   3. padding: 0 0 20px 20px;
   4. }
   5. Bunu yazdığımız ilk CSS-yə görə demək olar ki, eyni olduğunu görə bilərsiniz. Yalnız fərq, "float" əmlakı və istifadə etdiyimiz padding dəyərləri üçün istifadə etdiyimiz dəyərdir (bəzən, sağımızın surətinin sol tərəfinə əlavə olunur).
2. Nəhayət, HTML-də image sinifinin dəyərini "soldan" "sağa" dəyişə bilərsiniz:
3. İndi brauzerinizdə səhifənizə baxın və şəkilləniz ətrafında səliqəli bir şəkildə sarıldığınız üçün sağa uyğun olmalıdır. Biz bu üslubların hər ikisini, "bütün" üslublarımıza "sol" və "hüququ" əlavə etmək məcburiyyətindəyik ki, veb səhifələr yaratdıqda bu vizual üslublardan istifadə edə bilərik. Bu iki üslub, şəkillərə ətrafında mətn sarılması ilə lazım olduğumuz zaman dönə biləcəyimiz gözəl, təkrar istifadə xüsusiyyətləri olur.

HTML əvəzinə CSS-ni istifadə etməli (və bunun səbəbi nədir?)

HTML ilə bir şəkil ətrafında yazı yazmaq mümkün olsa da, veb standartları CSS (və yuxarıda göstərilən addımlar) strukturun (HTML) və üslubun (CSS) ayrılmasını təmin edə bilmək üçün getmək yoludur. Hesab edirəm ki, bu, xüsusilə vacibdir ki, bəzi qurğular və düzəltmələr üçün, mətnin surətdə axın etməsi lazım ola bilməz . Kiçik ekranlar üçün məsuliyyətli veb-saytın düzəldilməsi mətn həqiqətin altındakı çərçivəyə uyğunlaşmasını və görüntünün ekranın tam genişliyini tələb etməsini tələb edə bilər. Sizin üslublarınız HTML formatından ayrıdırsa, bu asanlıqla media sorguları ilə həyata keçirilir. Görünüş və mətn müxtəlif ziyarətçilər və müxtəlif ekranlar üçün fərqli olaraq görünəcək günümüzün çox cihazlı dünyasında, bu ayrılma uzunmüddətli müvəffəqiyyət və veb səhifənin idarə olunması üçün vacibdir.