Өнөөдөр интернетэд байгаа вэб хуудсыг хараад тэд нийтлэг зүйлүүдийг хуваалцах болно. Эдгээр хуваалцсан шинж чанаруудын нэг нь зургууд юм. Зөв зурагнууд вэбсайтын танилцуулгад маш их нэмдэг. Компанийн лого шиг эдгээр зургуудын зарим нь сайтыг таних, уг тоон аж ахуйн нэгжийг өөрийн физик компанид холбоход тусална.
Таны веб хуудсанд зураг, дүрс, эсвэл график нэмэхийн тулд та текстийн HTML кодыг ашиглах хэрэгтэй. Та IMG шошгыг өөрийн HTML-д яг хаана график үзүүлэхийг хүсч байгаа газраа байрлуул. Хуудасны харагдах хуудсыг үзүүлж буй вэб хөтөч нь энэ хуудсыг хуудсыг үзсэний дараа тохирох графикаар солино. Манай компаний логоны жишээ рүү буцаж очвол, тэрхүү зургийг таны сайт руу хэрхэн нэмэх вэ:
Зургийн шинж чанар
Дээрх HTML кодыг харвал элемент нь хоёр шинж чанарыг агуулж байгааг харж болно. Тэдний зураг бүрт шаардлагатай.
Эхний шинж чанар нь "src" юм. Энэ нь яг үнэндээ хуудсанд харагдахыг хүссэн зургийн файл юм. Бидний жишээн дээр бид "logo.png" нэртэй файл ашиглаж байна. Энэ бол вэб хөтөч вэбсайтыг өгөх үед харуулах график юм.
Та мөн энэ файлын нэрний өмнө бид зарим нэг нэмэлт мэдээллийг "/ images /" нэмэв. Энэ бол файлын зам юм. Эхний уртын зүсмэлийг сервер нь санг root гэж харахыг хэлдэг. Дараа нь "зураг" нэртэй фолдер хайж дараа нь "logo.png" нэртэй файлыг хайж олох болно. Сайтын бүх зургийг хадгалдаг "дүрсийг" гэж нэрлэдэг фолдерыг ашиглах нь маш түгээмэл практик боловч таны файлын зам таны сайтанд тохирсон бүх зүйл өөрчлөгдөх болно.
Шаардлагатай хоёр дахь шинж чанар бол "alt" текст. Энэ нь ямар нэг шалтгааны улмаас дүрсийг бүтээдэггүй бол харуулсан "өөр текст" юм. Манай жишээн дээр "Компаний лого" -ийг уншиж байгаа энэ текст нь зураг нь ачаалал өгөгдөөгүй бол харагдана. Яагаад ингэж болох вэ? Олон шалтгаан:
- Файл буруу зам
- Буруу файлын нэр буюу буруу зар сурталчилгаа
- Дамжуулах алдаа
- Файл серверээс устгагдсан байна
Эдгээр нь бидний тодорхойлсон дүрсийг алдаагүй байж болох хэд хэдэн боломж юм. Энэ тохиолдолд бидний текстийг харуулах болно.
Алт текстийг дэлгэцийн уншигч программаар дүрсийг "уншиж" харааны бэрхшээлтэй зочдод үзүүлдэг. Тэд бидний хийдэг дүр төрхийг хардаггүй тул энэ текст өөрсдийгөө ямар дүр төрхөө мэдэхийг мэддэг. Ийм учраас alt текст шаардлагатай юу, яагаад зураг гэж юу болохыг тодорхой хэлэх ёстой юм!
Alt текстийн нийтлэг үл ойлголцол нь хайлтын системд зориулагдсан. Энэ нь үнэн биш юм. Google болон бусад хайлтын системүүд нь энэ текстийг ямар дүр төрхтэй болохыг тодорхойлохын тулд (таны зургийг "харах" боломжгүй гэдгийг санаарай), зөвхөн хайлтын системд зөвхөн текст бичих боломжгүй. Зохиогч нь хүн төрөлхтөнд зориулан тодорхой бичсэн текст. Хэрвээ та хайлтын системд давуу талтай байгаа зарим түлхүүр үгсийг оруулж болно, энэ нь зүгээр л текст файлыг харж чадахгүй байгаа хэн бүхэнд зориулж дүр төрхийг нь зааж өгснөөр alt текст үндсэн зорилгоо биелүүлэхийг үргэлжлүүлээрэй.
Бусад Аттрибутууд
IMG шошго нь таны вэб хуудсан дээр өргөн, өндрийг графикаар байрлуулахад хоёр өөр шинж чанарыг ашигладаг. Жишээлбэл, Dreamweaver шиг WYSIWYG засварлагч ашигладаг бол энэ мэдээллийг автоматаар нэмнэ. Жишээ нь:
WIDTH болон HEIGHT шинж чанарууд нь браузерын зургийн хэмжээг харуулна. Хөтөч нь байршлын хэмжээг хэр их зайтай болохыг мэддэг бөгөөд зураг татагдах үед хуудасны дараагийн элемент рүү шилжиж болно. Таны HTML-д энэ мэдээллийг ашиглахад тулгардаг асуудал бол таны зургийг яг тэр хэмжээгээрээ харуулахыг хүсэхгүй байж магадгүй юм. Жишээлбэл, хэрэв танд тохирсон вэбсайттай зочдын дэлгэц, төхөөрөмжийн хэмжээн дээр үндэслэсэн өөрчлөлт орсон бол, та зургуудыг уян хатан болгохыг хүсэх болно. Хэрвээ та өөрийн HTML-тэй хэр хэмжээг зааж өгсөн бол танд хариу өгөх CSS медиа асуулгад дарагдан маш хэцүү болно. Энэ шалтгааны улмаас хэв маягийг (CSS) болон бүтэц (HTML) тусгаарлахыг хадгалахын тулд та HTML кодын өргөн, өндөр шинж чанаруудыг нэмэхгүй байхыг зөвлөж байна.
Нэг тэмдэглэл: Хэрэв та эдгээр хэмжих зааврыг арилгаж CSS-ийн хэмжээг зааж өгөөгүй бол хөтөч нь өөрийн үндсэн төрөлдөө зургийг харуулах болно.
Жереми Герард засварт хийсэн