Şəkilləri HTML-də necə yerləşdirmək olar
HTML Bu işarələmə dilidir istifadə olunur veb səhifənin məzmununu yaratmaq və strukturlaşdırmaq. Veb səhifədə ən çox yayılmış elementlərdən biri istifadəçinin diqqətini cəlb etmək və vizual məlumatı ötürmək üçün istifadə edilə bilən şəkillərdir. effektiv şəkildəBu məqalədə öyrənəcəyik ki, addım-addım kimi HTML-də şəkillər yerləşdirin düzgün və optimallaşdırılmışdır.
Addım 1: Şəkli hazırlayın
İlk addım yer HTML-də bir şəkil təsvirin olduğundan əmin olmaqdır hazırlanmış və optimallaşdırılmışdır istifadə üçün internetdəBu o deməkdir ki, ölçüsünü dəyiş şəkil istədiyiniz ölçüdə, sıxışdırmaq daha sürətli yükləmək və JPEG və ya PNG kimi uyğun formatda saxlamaq üçün onun çəkisi. Bundan əlavə, axtarış sistemlərində onun reytinqini yaxşılaşdırmaq üçün təsvirə təsviri ad vermək vacibdir.
Addım 2: Etiketi daxil edin
Üçün HTML-də bir şəkil yerləşdirin, etiketindən istifadə edirik . Bu teq boş teqdir, yəni onun bağlama teqi yoxdur. Etiketin içərisində biz qeyd etməliyik URL "src" atributuna daxil etmək istədiyimiz şəklin. Şəklin düzgün yüklənməməsi halında alternativ mətn təmin etmək üçün "alt" və istifadəçi şəklin üzərinə getdikdə popup mesajı göstərmək üçün "başlıq" kimi əlavə atributlar da əlavə edə bilərik.
Addım 3: Şəklin ölçüsünü və yerini təyin edin
Etiketi daxil etdikdən sonra image URL ilə biz edə bilərik ölçüsünü və yerini təyin edin “en” və “hündürlük” atributlarından istifadə edərək təsvirin. Bu atributlar dəyərləri piksel və ya faizlə qəbul edir və ehtiyaclarımıza uyğun olaraq şəkil ölçüsünü tənzimləməyə imkan verir. Əlavə olaraq, təsviri mətnlə uyğunlaşdırmaq üçün "align" və ya şəkilə haşiyə əlavə etmək üçün "sərhəd" kimi atributlardan istifadə edə bilərik.
Bu sadə addımlarla indi siz lazım olan biliyə sahibsiniz HTML-də şəkillər yerləşdirin və veb səhifələrinizin vizual görünüşünü yaxşılaşdırın. Yaxşı yükləmə performansını qorumaq üçün şəkillərin ölçüsünü və optimallaşdırılmasını tənzimləməyi unutmayın və veb saytınızın əlçatanlığını və istifadəsini yaxşılaşdırmaq üçün əlavə atributlardan istifadə etməyi unutmayın. Təcrübə edin və məzmununuzu heyrətamiz şəkillərlə canlandırın!
HTML-də şəkilləri necə əlavə etmək olar
Bu dərslikdə biz HTML sənədində şəkilləri necə yerləşdirməyi öyrənəcəyik. Şəkillərin əlavə edilməsi a effektiv şəkildə veb saytınızın vizual görünüşünü yaxşılaşdırmaq və onu ziyarətçilər üçün daha cəlbedici etmək. Xoşbəxtlikdən, HTML səhifənizə şəkillər daxil etmək üçün xüsusi etiketlər təqdim edir.
1. img teqindən istifadə etməklə
HTML-də şəkillər əlavə etməyin ən çox yayılmış yolu etiketdən istifadə etməkdir . Bunun üçün siz göstərmək istədiyiniz şəklin URL-ni təyin edən src atributunu təyin etməlisiniz. Misal üçün,
. İstifadə etməyin məqsədəuyğun olduğunu unutmayın şəkil faylları JPEG və ya PNG kimi brauzerlərə uyğun formatlarda.
Əlavə olaraq, şəklin ölçüsünü təyin etmək üçün hündürlüyü və eni, şəklin yüklənməməsi halında alternativ mətn təmin etmək üçün alt və göstərildiyi mətni əlavə etmək üçün başlıq kimi digər atributlardan istifadə edərək, şəklin görünüşünü daha da fərdiləşdirə bilərsiniz. şəklin üzərinə gətirdiyiniz zaman.
2. Fayl yolları və URL yolları
Şəkil yolunu göstərməyə gəldikdə, iki variantı nəzərdən keçirməlisiniz: yerli fayl yolu və ya URL yolu. Şəkil kompüterinizdə yerləşirsə və onu oradan yükləmək istəyirsinizsə, "C:imagefolder.jpg" kimi tam fayl yolunu təmin etməlisiniz. Digər tərəfdən, əgər şəkil veb-serverdə yerləşdirilibsə, siz şəklin tam URL-sini göstərməlisiniz, məsələn, "http://www.example.com/image.jpg".
Unutmayın ki, URL yolları daha çox yayılmışdır, çünki onlar vebsaytınıza xarici serverdən şəkillər yükləməyə imkan verir və ziyarətçinin maşınında saxlanılan fayllara etibar etmir.
3. Təsvirin optimallaşdırılması
Şəkillərinizi optimallaşdırmaq vacibdir veb üçün HTML səhifənizə əlavə etməzdən əvvəl. Bu, vizual keyfiyyətinə zərər vermədən şəkillərin fayl ölçüsünü azaltmaq deməkdir. Buna nail olmaq üçün şəkil redaktə alətlərindən və ya onlayn kompressorlardan istifadə edə bilərsiniz. Şəkilləri optimallaşdırmaqla, səhifəniz daha sürətli yüklənəcək və ziyarətçilərin uzun yükləmə müddətləri ilə məyus olmasının qarşısını alacaq.
Nəticə olaraq, HTML-də şəkillər əlavə etmək sadə bir işdir, lakin yaxşı istifadəçi təcrübəsini təmin etmək üçün düzgün etiket, fayl yolu və ya URL və şəkillərin optimallaşdırılması kimi bəzi vacib aspektlərin nəzərə alınmasını tələb edir. Bu təlimatlara əməl edin və siz vizual olaraq cəlbedici veb səhifələr yaratmağa hazırlaşacaqsınız.
Etiketlərin əhəmiyyəti ![]()
HTML-də
1. Vizual əlçatanlığı artırın: Etiketlər HTML-də şəkillərin vebsaytda təqdim edilməsində əsas rol oynayır. Səhifəyə şəkil əlavə edərkən onu düzgün göstərmək üçün bu etiketdən istifadə olunur. Bununla belə, onun əhəmiyyəti sadə vizual təqdimatdan kənara çıxır. Etiketlər
Onlar axtarış motorlarına və ekran oxucularına təsvirin məzmununu şərh etməyə imkan verir, görmə məhdudiyyəti olan və ya köməkçi texnologiyalardan istifadə edən insanlar üçün əlçatanlığı asanlaşdırır.
2. Performans optimallaşdırılması: Etiketlərdən istifadə etməklə HTML-də düzgün işləsəniz, performansı əhəmiyyətli dərəcədə artıra bilərsiniz bir saytdan Veb. Bu teqlər sizə şəklin ölçüsünü təyin etməyə, onun həllini azaltmağa və hətta sıxışdırmağa imkan verir, nəticədə səhifə daha sürətli yüklənir. Bundan əlavə, tənbəl yükləmə kimi texnikalar tətbiq oluna bilər ki, bu da şəkilləri istifadəçinin ehtiyacı olduğu kimi yükləyir, səhifənin ilkin yükləmə müddətini azaldır.
3. Təkmilləşdirilmiş istifadəçi təcrübəsi: Şəkillər vebsaytda istifadəçi təcrübəsində mühüm rol oynayır. Etiketlərdən düzgün istifadə etməklə HTML-də siz vizual olaraq cəlbedici və ardıcıl təcrübə təmin edə bilərsiniz. Əlavə olaraq, onu görə bilməyənlər üçün təsvirin mətn təsvirini təmin edən alt mətn kimi atributlar əlavə edə bilərsiniz. Bu, məzmunun başa düşülməsini yaxşılaşdırır və bütün istifadəçilər üçün çaşqınlığın qarşısını alır.
HTML-də şəkillər daxil etmək üçün düzgün sintaksis
1. Etiketdən istifadə
HTML-ə şəkillər daxil etməyin əsas və ümumi yolu etiketdən istifadə etməkdir . Bu teq şəklin yerini, ölçüsünü və digər xüsusiyyətlərini təyin etməyə imkan verir. The
etiket aşağıdakı tələb olunan və əlavə atributlara malikdir:
– src: bu atribut təsvirin yolunu müəyyən edir. Bu URL və ya şəkil faylının nisbi yolu ola bilər.
– alternativ: Bu atribut, şəkil düzgün yüklənə bilmədikdə, göstərmək üçün alternativ mətn təqdim edir.
– en: Bu atribut təsvirin enini piksellə müəyyən edir.
– hündürlük: Bu atribut təsvirin hündürlüyünü piksellə müəyyən edir.
Budur, teqdən istifadə edərək şəkil daxil etmək üçün sintaksisin necə görünəcəyinə dair bir nümunə :
«`
«`
2. Etiketdən istifadə etməklə
HTML-də şəkillər daxil etməyin başqa bir yolu etiketdən istifadə etməkdir
Etiketdən istifadə etmək üçün
"`html
«`
3. Şəkilləri stilləşdirmək üçün CSS-dən istifadə
Yuxarıda qeyd olunan HTML teqlərinə əlavə olaraq, şəkillərimizi stilizasiya etmək üçün CSS-dən də istifadə edə bilərik. Haşiyələr, kölgələr, qeyri-şəffaflıq və s. kimi üslubları tətbiq edə bilərik.
Əmlakdan istifadə edə bilərik sərhəd Şəkilə haşiyə əlavə etmək üçün xassə qutu kölgəsi kölgə və xüsusiyyət əlavə etmək qeyri-şəffaflıq təsvirin qeyri-şəffaflığını tənzimləmək üçün. Şəkili tərtib etmək üçün CSS sintaksisinin necə görünəcəyinə dair bir nümunə:
"`css
şəkil {
haşiyə: 1px bərk qara;
qutu-kölgə: 2px 2px 4px rgba(0, 0, 0, 0.8);
qeyri-şəffaflıq: 0.8;
}
«`
Bu üsullarla siz HTML səhifələrinizə şəkilləri düzgün və səmərəli şəkildə daxil edə və fərdiləşdirə biləcəksiniz. Həmişə gözdən əlillər üçün əlçatanlıq üçün vacib olan alternativ mətn təqdim etmək üçün alt atributundan istifadə etməyi unutmayın.
Şəkil yollarını idarə etmək üçün tövsiyələr
Şəkilləri HTML-də yerləşdirərkən, fayl yolunu yadda saxlamaq vacibdir. Səhv yol şəkillərin veb-səhifədə düzgün göstərilməməsinə səbəb ola bilər. Bu problemin qarşısını almaq üçün Nisbi yollardan istifadə etmək məsləhətdir mütləq yollar əvəzinə.
Nisbi yol təsvirin yerləşdiyi HTML faylına münasibətdə yerini bildirir. Əgər həm HTML, həm də şəkil eyni qovluqdadırsa, sadəcə olaraq şəkil etiketində şəklin adını qeyd edin. Şəkil başqa qovluqdadırsa, şəkilə çatmaq üçün müvafiq qovluqlardan istifadə edilməlidir.
Qovluqlar və ya qovluqlarla işləyərkən, ardıcıl olan nisbi yollardan istifadə edilməlidir. Məsələn, bir qovluqdakı HTML faylından şəkilə daxil olmaq üçün "../../../images/image1.jpg" nisbi yolundan istifadə edirsinizsə, bütün digər HTML-lərdə eyni nisbi yoldan istifadə etməyə davam etməlisiniz. həmin qovluqdakı fayllar. Bu, şəklin həmin kataloqdakı bütün veb səhifələrdə düzgün göstərilməsini təmin edəcək. Veb saytı dərc etməzdən əvvəl həmişə yolları yoxlamağı və şəkillərin düzgün yüklənməsini yoxlamağı unutmayın.
HTML-də şəkillərin ölçüsünü dəyişdirin
HTML-də, şəkil ölçüsünü tənzimləyin Optimal istifadəçi təcrübəsini təmin etmək vacib vəzifədir. Xoşbəxtlikdən, bu məqsədə çatmaq üçün bir neçə sadə və təsirli yol var. HTML-də şəkillərin ölçüsünü idarə etməyin ümumi yolu şəkil etiketində "genişlik" atributundan istifadə etməkdir. Məsələn, eni təyin etmək istəyirsinizsə bir şəkildən 300 pikseldə siz sadəcə olaraq şəkil etiketinizə aşağıdakı kod sətirini əlavə edə bilərsiniz: en="300".
Şəkillərin ölçüsünü tənzimləməyin başqa bir yolu "en" əvəzinə "hündürlük" atributundan istifadə etməkdir. Əvvəlki nümunəyə bənzər şəkildə, şəkil etiketinə aşağıdakı kod sətirini əlavə etməklə şəklin hündürlüyünü 200 pikselə təyin edə bilərsiniz: hündürlük = »200 ″. Qeyd edək ki, bu atributlardan yalnız birinin göstərilməsi görüntünün təhrif edilməsinə səbəb ola bilər, ona görə də düzgün aspekt nisbətini qorumaq üçün hər iki atributdan istifadə etmək məsləhətdir.
Şəkillərin ölçüsünə və düzülməsinə daha çox nəzarət etmək istəyirsinizsə, HTML ilə birlikdə CSS-dən də istifadə edə bilərsiniz. Məsələn, siz şəkillər üçün istədiyiniz ölçüləri təyin edən ayrıca CSS üslubu yarada və sonra onu müvafiq şəkil etiketlərinə tətbiq edə bilərsiniz. Bu, hər bir şəkil teqində "en" və ya "hündürlük" atributunu ayrıca qeyd etmədən veb səhifənizdə şəkillərin ölçüsünü asanlıqla tənzimləməyə imkan verəcək. Bölmənizə aşağıdakı kod sətirini əlavə edin