Үүрлэх сайт: дэвсгэр зургийг хэрхэн хийхийг HTML

вэб олон шинэхэн дизайнерууд зөвхөн сайт бий болгох мөн чанар онгичих нь ихэвчлэн HTML арын зургийг хэрхэн хийх талаар боддог. Тэдний зарим нь энэ асуудлыг шийдвэрлэх боломжтой бол, энэ нь одоо ч дэлгэц дээр дүрс бүхэлд нь өргөн суналт үед нь асуудал юм. Үүний зэрэгцээ би сайтад бүх хөтчүүд дээр адилхан харагдана харахыг хүсэж, тиймээс энэ нь хөндлөн хөтөч шаардлагыг биелүүлэх ёстой. Та хоёр аргаар суурь тохируулж болно: ашиглан HTML хаягууд болон CSS загварыг. өөрийнхөө төлөө тус бүр хамгийн шилдэг сонголт сонгосон. Мэдээж хэрэг, CSS хэв маяг нь түүний код нь тусдаа файлд хадгалагдсан учраас бөгөөд үндсэн сайтын хаягууд нэмэлт спикер авч биш, харин эхлээд бидэнд сайтын дэвсгэр дээр дүрсийг суулгах энгийн аргыг авч үзье, илүү тохиромжтой юм.

Үндсэн HTML тэмдэглэгээнүүд суурь бий болгох

Тиймээс бид хэрхэн дэлгэц дээр HTML-д арын дүрсийг хийх асуултад явж байна. сайхан сайтыг харж тулд та нэг биш, харин чухал дэлгэрэнгүй ойлгох ёстой: энэ нь градиент суурь хийх эсвэл энэ нь хатуу өнгө будаг нь л хангалттай юм, харин та нар арын зургийг оруулах хэрэгтэй бол, энэ дэлгэц дүүрэн өргөн сунган байх болно. зураг авах, эсвэл энэ сунгах бөгөөд та сайтын хуудсыг харуулах болно нь өөрийн загварыг хийх анх шаардлагатай байсан юм. дэвсгэр зураг бэлэн байна Зөвхөн үед «Images» нэртэй фолдер руу чирж. Хэрэв бид бүх ашигласан зураг, хүүхэлдэйн кино, бусад график файлуудыг хадгална. Энэ хавтас нь таны бүх HTML файлуудыг эх сан дотор байрладаг байх ёстой. Одоо та болон код руу шилжих болно. түүгээр суурь зургийг өөрчилж болно, бичих код нь хэд хэдэн тохируулгууд байдаг.

1. хаяг шинж чанар бич.
2. HTML код CSS хэв маяг дамжуулан.
3. тусад нь файл дотор CSS загварыг бич.

HTML адил арын зургийг гаргах, та шийдвэр гаргаж, гэхдээ би энэ нь хамгийн оновчтой хэрхэн болох тухай хэдэн үг хэлмээр байна. Эхний арга нь хаяг шинж дамжуулан бичих юм урт хуучирсан байна. хоёр дахь сонголт нь маш ховор ашиглахад тэр болж, учир нь байгаа ижил код нь маш их. Гурав дахь сонголт нь хамгийн нийтлэг, хамгийн үр дүнтэй байдаг. Энд HTML хаягууд жишээ нь:

1. index.htm файлд хаяг шинж (бие) дамжуулан анхны бичлэг арга. (Биеийн цаана = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ байгууллага): Энэ хэлбэрээр хадгалагдаж байдаг. Энэ нь бид гарчиг «Зураг», нэмэлт JPG, бид «Images», дараа нь HTML-код оруулга нь иймэрхүү харагдах болно нэртэй хавтас нь зураг байгаа бол гэдэг нь: (биеийн суурь = "Images / Picture.jpg") ... (/ байгууллага) .
2. Хоёр дахь арга нь CSS загварыг бичлэг явдал, гэхдээ энэ нь нэр index.htm ижил файлд бичигдсэн байдаг. (Биеийн хэв маяг = "арын: URL (" ../ Images / Picture.jpg ') ").
3. Бичлэг гурав дахь арга нь хоёр ширхэг файлаас хийсэн байна. (Толгой) (холбоос холбоо = "загварчлах" төрөл = "текст / CSS" href = "HTTP: // сайт / нийтлэл / 193110 /% D0% 9F нэр index.htm тагийн (толгой) нь бичиг баримт ийм мөрийг бичсэн байна % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ толгой). Файл гэж нэрлэдэг style.css хэв маяг нь аль хэдийн бичих: биеийн {суурь: URL (Images / Picture.jpg ')}.

дэвсгэр зураг хийх HTML-д бид ойлгож байна. Одоо та бүхэлд нь дэлгэцэн өргөний дагуу дүр төрхийг хэрхэн сунган олохын тулд хэрэгтэй.

Арга зам цонхны өргөнтэй дэвсгэр зураг сунган

Бид хувь хэлбэрээр бидний дэлгэцийг илэрхийлнэ. Энэ нь дэлгэцэн дээр бүхэлд нь өргөн, урт нь × 100% 100% байх болно гэж болж байна. Бид энэ өргөнтэй зургийг сунгах хэрэгтэй. Зургийн файл нь бичлэг style.css мөр хянах бүхэлд нь өргөн, уртын зургийг сунгаж нэмнэ. Энэ нь CSS загвараар бичигдсэн байдаг гэж үү? Энэ нь энгийн юм!

байгууллага

{

Суурь ойлголт: URL (Images / Picture.jpg ')

суурь хэмжээ: 100%; / * Энэ бичлэг нь орчин үеийн ихэнх хөтчүүд тохиромжтой юм * /

}

Тиймээс бид дэлгэц дээр HTML-д зураг суурь хэрхэн хийх олж мэдсэн. index.htm файлд бичлэг нь арга ч бас байдаг. Энэ арга, хуучирсан боловч, харин эхлэн шаардлагатай мэдэж, ойлгох явдал юм. хаяг (толгой) (хэв маяг) DIV {суурь хэмжээ: хамгаалах; } (/ Style) (/ дарга), энэ бичлэг нь бид цаана, цонхны бүх өргөний дээр байр сууриа болно тусгай нэгжийг хуваарилах гэсэн үг юм. Бид тийм зураг нь орчин үеийн хөтчүүд аль ч дэлгэцийн нийт өргөн нь сунгасан хэрхэн нь дэвсгэр зураг HTML сайт хийх хоёр арга замыг авч үзэж байна.

тогтмол суурь болгох вэ

Та ирээдүйн вэб нөөцийн дэвсгэр зэрэг зургийг ашиглахаар шийдсэн бол та зүгээр л тогтмол хийж хэрхэн мэдэх, энэ нь урт сунгасан байна гэж тийм биш, гоо зүйн үзэмж муудах биш үү байх хэрэгтэй. Зүгээр л жижиг нэмэлт бүртгүүлэх HTML кодыг ашиглан хийж болно. Та цаана дараа өгүүлбэр нэмэх style.css гаргах хэрэгтэй: URL (Images / Picture.jpg ') тогтмол; эсвэл оронд нь цэг таслалаар тусдаа мөрийн дараа нэмэгдсэн өдөр - Албан тушаал: тогтмол. Тиймээс таны дэлгэцийн зураг нь тогтмол байж болно. газар дээр нь агуулга урсаж үед та текстийг шугам хөдөлж байгаа харж болно, гэхдээ суурь газарт хэвээр байна. Тэгэхээр та хэрхэн хэд хэдэн аргаар, HTML арын зургийг хийж сурсан юм.

HTML-д хүснэгтэд хамтран ажиллах

вэб Олон туршлагагүй хөгжүүлэгчид, ширээ, блок тулгарсан нь ихэвчлэн HTML зураг суурь хүснэгтийг хэрхэн хийх ойлгохгүй байна. Бүх адил багууд HTML болон CSS хэв маяг, вэб програмчлалын хэл их хялбар байдаг. Мөн энэ асуудлын шийдэл нь кодын мөр хос бичих явдал юм. Та аль хэдийн мөр, багана тус тус хүснэгт бичих гэсэн хаягууд (TR) ба (TD) заасан шиг, мэддэг байх ёстой. цаана = URL зураг: Зургийн хэлбэрээр хүснэгтийн суурь болгохын тулд энэ хаяг (хүснэгт), (TR) эсвэл (TD) лавлах дүр лавлагаа нь энгийн хэллэг нэмэх шаардлагатай байна. Тодруулбал, бид хэд хэдэн жишээ өгч байна.

Оронд нь цаана нь зураг Хүснэгт: HTML жишээ

нь 2х3 хүснэгтийг зурж, энэ нь хавтас "Images" -д хадгалагдаж дэвсгэр зураг хийх: (ширээний цаана = "Images / Picture.jpg") (TR) (TD) 1 (/ TD) (TD) 2 (/ TD) (TD) 3) (/ TD) (/ TR) (TR) (TD) 4 (/ TD) (TD) 5 (/ TD) (TD) 6 (/ TD) (/ TR) (/ хүснэгт). Тиймээс манай хүснэгт зургийн цаана нь зурсан байх болно.

Одоо 2х3 ижил хавтан хэмжээг зурах, харин дугаарласан 1, 4, 5, 6-(хүснэгт) баганын (TR) нь зургийг (TD суурь = "Images / Picture.jpg") 1 (/ TD) (TD) 2 оруулах (/ TD) (TD) 3 (/ TD) (/ TR) (TR) (TD суурь = "Images / Picture.jpg") 4 (/ TD) (TD суурь = "Images / Picture.jpg") 5 ( / TD) (TD суурь = "Images / Picture.jpg") 6 (/ TD) (/ TR) (/ хүснэгт). Бид суурь нь зөвхөн тухайн бид бүртгэгдсэн, болон хүснэгтийг бүхэлд нь бус, тэд эс гарч байгааг харж болно харж дараа.

Cross-хөтөч нийцтэй сайт

хөндлөн хөтөч нийцтэй вэб эх сурвалж болгон ийм зүйл байдаг. Энэ нь таны сайт адил сайн янз бүрийн төрөл, хөтчүүдийг хувилбаруудад гарч ирнэ гэсэн үг юм. Энэ нь байх ёстой HTML код нь шаардлагатай хөтчүүд өөрчлөх болон CSS загвар. Түүнээс гадна, ухаалаг гар утас, орчин үеийн эрин үед маш олон вэб хөгжүүлэгчид сайт бий болгох гэж оролдож, гар хувилбар болон компьютерийн харагдах зохицсон байна.