Бид WEB хуудсанд зураг, түүнчлэн видео болон аудио нэмнэ! HTML график зургийн формат дахь зургууд

Асуултанд хариулахаасаа өмнө " HTML дээр хэрхэн зураг оруулах вэ?"Асар их хэмжээний график материал бүхий вэб хуудсыг хэт ачаалах нь үнэ цэнэтэй зүйл биш гэдгийг тэмдэглэх нь зүйтэй, учир нь энэ нь хэрэглэгчийн нөөцийн талаарх ойлголтыг сайжруулахаас гадна хуудас ачаалах хугацааг нэмэгдүүлэх болно.

Вэбсайт хийхдээ хамгийн түгээмэл хэрэглэгддэг график форматууд нь PNG, GIF, JPEG, зурагтай дизайн хийхэд зориулагдсан. график засварлагч Adobe Photoshop, энэ нь зургийн чанарыг алдалгүйгээр шахаж, хэмжээг нь өөрчлөх баялаг чадвартай бөгөөд энэ нь вэб хөгжүүлэхэд маш чухал юм.

HTML дээр хэрхэн зураг оруулах вэ?

HTML хуудсанд зураг оруулахын тулд нэг энгийн шошгыг ашиглана уу:

,

Энд xxx нь зургийн хаяг юм. Хэрэв зураг нь хуудастай ижил директорт байгаа бол шошго нь дараах байдалтай харагдана.

Гэсэн хэдий ч өндөр хурдтай, тогтвортой интернет нь дэлхийн өнцөг булан бүрт хараахан хүрээгүй байгаа бөгөөд вэбсайт дээрх зураг зүгээр л ачаалахгүй байх тохиолдол гардаг. Ийм тохиолдлын хувьд өөр текст гэсэн ойлголт байдаг.

Энэ нь боломжгүй, ачаалах эсвэл хөтчийн "зураггүй" горимд байгаа үед зургийн оронд харагдана. Үүнийг alt tag атрибут ашиглан нэмдэг .

График файлд өөр текст нэмэх жишээ:

HTML дээр зургийн хэмжээг оноож байна

График файлын дэлгэцийн хэмжээсийг өөрчлөхийн тулд өндөр нь өндөр, өргөн нь пикселээр хэмжигддэг өргөн, өндөр нь өргөн юм.

Эдгээр шинж чанаруудыг ашиглах үед хөтөч нь эхлээд график агуулгын зайг хуваарилж, хуудасны ерөнхий бүтцийг бэлтгэж, текстийг үзүүлж, дараа нь зургийг өөрөө ачаална.

Зургийг тэгш өнцөгт хэлбэрээр байрлуулна өгөгдсөн хэмжээсүүд, хэрэв параметрүүд нь анхныхаас бага эсвэл том бол зургийг сунгасан эсвэл шахдаг.

Хэрэв өндөр ба өргөний шинж чанаруудыг ашиглаагүй бол хөтөч нь зургийг нэн даруй ачаалж, текст болон бусад хуудасны элементүүдийг харуулахыг хойшлуулдаг.

Эдгээр параметрүүдийг пикселээр (зургийн хэмжээ тогтмол бөгөөд хэрэглэгчийн дэлгэцийн нягтралаас хамаардаггүй) болон хувиар (зургийн хэмжээ нь дэлгэцийн нягтралаас хамаарна) хоёуланг нь зааж өгч болно.

Жишээлбэл:

Зургийн анхны хэмжээг өөрчлөх үед түүний пропорцийг хадгалах шаардлагатай гэдгийг санах нь зүйтэй.

Үүнийг хийхийн тулд зөвхөн нэг параметрийн утгыг зааж өгөхөд хангалттай ( өргөн эсвэл өндөр), хөтөч нь хоёр дахь утгыг автоматаар тооцоолох болно.

HTML дээрх зургийн байршил

Олон HTML шошготой адил, Зургийг зэрэгцүүлдэг align шинж чанарыг ашиглана уу:

- зураг нь текстийн дээр байрладаг;

- зураг нь текстийн доор байрладаг;

- зураг нь текстийн зүүн талд байрладаг;

- зураг нь текстийн баруун талд байрладаг.

Зургийн холбоос

Үүнийг дараах байдлаар хийнэ.

Таны харж байгаагаар график оруулга нь холбоос байж болох бөгөөд товшсон үед бүрэн эсвэл товчилсон хэлбэрээр бичсэн дурын хаяг руу чиглүүлэх боломжтой.

Хэрхэн зургийг HTML дээр дэвсгэр болгох вэ?

Зургийг хуудсан дээр харагдахуйц объект болгон оруулахаас гадна арын дэвсгэр дээр хийж болно. Зургийг дэвсгэр гэж тодорхойлохын тулд та дээрх жишээнүүдийн нэгэн адил заасан зургийн хаяг болох background=”xxx” шинж чанарыг зааж өгөх хэрэгтэй.

Жишээлбэл, дараах бүтэцтэй зургийг дэвсгэр зураг болгон тохируулъя.

Зургийг бэлтгэсэн хуудас бүхий хавтсанд хадгалж, дараах мөрүүдийг бичнэ үү.

Тексттэй дэвсгэр.

Хуудасны дэвсгэр зургийг тохируулсан.

Сайн байна уу эрхэм блог уншигчид! Энэ нийтлэлээс та бүх зүйлийг сурах болно html хуудсанд хэрхэн зураг оруулах. Танд хуудсан дээрээ тавихыг хүссэн хэд хэдэн зураг байна уу эсвэл сайт дээрээ лого тавих уу? Энэ бүхэн амархан. Энэ нийтлэлийг уншсаны дараа та html хуудсандаа ямар ч хүндрэлгүйгээр зураг оруулах боломжтой болно. Үүнийг хийхийн тулд бид дэлгэрэнгүй ярих болно img шошгоболон түүний шинж чанаруудын талаар бид форматуудыг товчхон авч үзэх болно график файлууд gif, jpeg, png гэх мэт файлуудыг ашиглахаас гадна таны сайтад видео болон аудио оруулахад хялбар болгох HTML5-ийн шинэ функцуудыг хараарай.

Үүний улмаас график өгөгдөл болон html текстнэг файлд нэгтгэх боломжгүй тул тэдгээрийг сайт дээр харуулахын тулд html хуудасны бусад элементүүдээс өөр аргыг ашигладаг. Юуны өмнө график дүрс болон бусад мультимедиа өгөгдлийг тусдаа файлд хадгалдаг. Тэдгээрийг вэб хуудсанд хэрэгжүүлэхийн тулд тэдгээрт холбоос агуулсан тусгай шошго ашигладаг тусдаа файлууд. Ялангуяа ийм шошго юм img шошго. Ийм хаягтай шошготой тулгарсны дараа хөтөч эхлээд вэб серверээс зураг, аудио эсвэл видео бүхий харгалзах файлыг хүсч, дараа нь вэб хуудсан дээр харуулна.

Бүх график дүрс, ерөнхийдөө вэб хуудаснаас тусдаа файлд хадгалагдсан аливаа өгөгдлийг дууддаг хэрэгжүүлсэнхуудасны элементүүд.

Зураг оруулах, "img" шошгыг нарийвчлан үзэхийн өмнө график форматын талаар бага зэрэг суралцах нь зүйтэй.

График зургийн форматууд.

Олон янзын график форматууд байдаг ч хөтөч нь цөөхөн хэдэн програмыг дэмждэг. Тэдгээрийн гурвыг нь харцгаая.

1. JPEG формат(Гэрэл зургийн мэргэжилтнүүдийн хамтарсан групп). Зургийг хадгалахад ашигладаг нэлээд алдартай формат. 24 битийн өнгийг дэмждэг бөгөөд зураг дээрх бүх хагас өнгийг өөрчлөхгүй. Гэхдээ jpeg нь ил тод байдлыг дэмждэггүй бөгөөд зураг дээрх жижиг нарийн ширийн зүйлс, текстийг гажуудуулдаг. JPEG нь ихэвчлэн гэрэл зураг хадгалахад ашиглагддаг. Энэ форматтай файлууд нь jpg, jpe, jpeg өргөтгөлтэй байна.

2. GIF формат(График солилцох формат). Энэ форматын гол давуу тал нь нэг файлд хэд хэдэн зургийг нэг дор хадгалах чадвар юм. Энэ нь танд хөдөлгөөнт видеог бүхэлд нь үүсгэх боломжийг олгоно. Хоёрдугаарт, ил тод байдлыг дэмждэг. Гол дутагдал нь зөвхөн 256 өнгийг дэмждэг бөгөөд энэ нь зураг хадгалахад тохиромжгүй юм. GIF нь ихэвчлэн лого, баннер, тунгалаг хэсэгтэй, текст агуулсан зургийг хадгалахад ашиглагддаг. Энэ форматтай файлууд gif өргөтгөлтэй байна.

3. PNG формат(Зөөврийн сүлжээний график). Энэ форматыг хуучин GIF болон зарим талаараа JPEG-ийг орлох хэлбэрээр боловсруулсан. Ил тод байдлыг дэмждэг боловч хөдөлгөөнт дүрсийг зөвшөөрдөггүй. Энэ формат нь png өргөтгөлтэй.

Вэбсайт үүсгэхдээ тэд ихэвчлэн JPEG эсвэл GIF форматтай зургуудыг ашигладаг боловч заримдаа PNG ашигладаг. Хамгийн гол нь аль форматыг ашиглах нь илүү дээр болохыг ойлгох явдал юм. Товчхондоо:

JPEG нь текст агуулаагүй гэрэл зураг эсвэл саарал өнгийн зургийг хадгалахад хамгийн тохиромжтой;

• GIF нь үндсэндээ хөдөлгөөнт дүрслэлд ашиглагддаг;
• PNG нь бусад бүх зүйлийн формат юм (дүрс, товчлуур гэх мэт).

HTML хуудсанд зураг оруулах

Тэгэхээр вэб хуудсанд хэрхэн зураг оруулах вэ? Та нэг зургийг ашиглан зураг оруулах боломжтой img шошго. Хөтөч нь зургийг вэб хуудасны img шошготой таарсан газарт байрлуулна.

HTML-д зураг оруулах кодхуудас иймэрхүү харагдаж байна:

Энэхүү html код нь вэб хуудастай нэг хавтсанд байрлах image.jpg файлд хадгалагдсан зургийг вэб хуудсан дээр байрлуулах болно. Зургийн хаягийг та анзаарсан байх src шинж чанар. Энэ юу болохыг би аль хэдийн хэлсэн. Тиймээс src шинж чанар нь зурагтай файлын хаягийг зааж өгөх шаардлагатай шинж чанар юм. src шинж чанаргүй бол img таг нь утгагүй болно.

Зурагтай файлын хаягийг зааж өгөх хэд хэдэн жишээ энд байна:

Энэ html код нь вэб сайтын үндсэн хэсэгт байрлах зургийн хавтсанд хадгалагдсан image.jpg нэртэй хуудсанд зураг оруулах болно.

src атрибут нь зурагтай харьцах холбоосоос илүүг агуулж болно. Зургууд нь html хуудасны хамт онлайнаар хадгалагддаг тул зургийн файл бүр өөрийн гэсэн URL-тэй байдаг. Тиймээс та зургийн url-г src шинж чанарт оруулж болно. Жишээлбэл:

Энэ код нь mysite.ru сайтаас зураг оруулах болно. Таныг өөр сайт дээрх зураг руу чиглүүлэх үед URL-г ихэвчлэн ашигладаг. Таны сайт дээр хадгалагдсан зургуудын хувьд харьцангуй холбоосыг ашиглах нь дээр.

img шошго нь доторлогооны элемент тул блок элемент дотор, жишээлбэл "P" шошго дотор байрлуулах нь дээр.

Дадлага хийцгээж, html-ийн тухай өмнөх нийтлэлүүдийн зургийг хуудсандаа оруулцгаая. Би өөрийн хуудасны html файлын хажууд "images" хавтас үүсгээд "bmw.jpg" зургийн файлыг байрлуулах бөгөөд энэ нь дараах байдалтай байна.

Дараа нь оруулсан зурагтай хуудасны html код дараах байдалтай байна.

Хөтөч дээрх дэлгэцийн үр дүнг харна уу:

Бидний харж байгаагаар вэб хуудсан дээр зураг байрлуулахад төвөгтэй зүйл байхгүй. Дараа нь "img" шошгоны бусад чухал шинж чанаруудыг харцгаая.

Alt шинж чанар нь нөөц сонголт юм

Зургийн файлууд нь вэб хуудаснаас тусад нь хадгалагддаг тул хөтөч нь тэдгээрийг татаж авахын тулд тусдаа хүсэлт гаргах шаардлагатай болдог. Хэрэв хуудсан дээр олон зураг байгаа бол сүлжээний холболтын хурд бага байвал ачаалж байна уу нэмэлт файлуудэнэ нь нэлээд хугацаа шаардагдах болно. Хэрэв таны мэдэгдэлгүйгээр зургийг серверээс устгасан бол бүр ч муу юм.

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

Энэ нь ойролцоогоор иймэрхүү харагдаж байна:

Зургийн хэмжээсийг тохируулна уу

Таны мэдэх ёстой хэд хэдэн img хаягийн шинж чанарууд байсаар байна. Энэ бол хэд хэдэн шинж чанар юм өргөнТэгээд өндөр. Зургийн хэмжээг тодорхойлохын тулд та эдгээрийг ашиглаж болно:

Хоёр шинж чанар нь хэмжээг заана пиксел. Өргөн атрибут нь хөтчид зураг хэр өргөн, өндөр байх ёстойг зааж өгдөг. Эдгээр хоёр шинж чанарыг хамтад нь эсвэл тусад нь ашиглаж болно. Жишээлбэл, хэрэв та зөвхөн өргөний атрибутыг зааж өгсөн бол хөтөч нь заасан өргөнтэй пропорциональ өндрийг автоматаар сонгох бөгөөд зөвхөн өндрийн шинж чанарыг ашиглах тохиолдолд автоматаар сонгоно. Хэрэв та эдгээр шинж чанаруудыг огт заагаагүй бол хөтөч дэлгэцэн дээр харуулахын өмнө зургийн хэмжээг автоматаар тодорхойлох болно. Зургийн хэмжээг зааж өгөх нь хуудсыг харуулах үед хөтчийг бага зэрэг хурдасгах болно гэдгийг тэмдэглэх нь зүйтэй.

Энэ нь одоохондоо хуудсан дээр зураг оруулах тухай юм, дараа нь бид вэб сайт руу хэрхэн аудио эсвэл видео оруулах талаар авч үзэх болно...

HTML 5 ашиглан видео болон аудио оруулах

Шинэ html5 тодорхойлолт нь медиа файлуудыг оруулахад маш хялбар болгодог хэд хэдэн шинэ шошготой. Энэ нь юуны түрүүнд видео болон аудионд хамаарна.

Оруулах аудио HTML5 нь хосолсон хаягаар хангадаг АУДИО. Аудио клипийг хадгалсан файлын хаягийг бидэнд аль хэдийн танил болсон src шинж чанарыг ашиглан зааж өгсөн болно.

"Аудио" шошго нь хуудсан дээр үүсдэг блок элемент. Анхдагч байдлаар, хөтөч аудио клипийг тоглуулахгүй. Үүнийг хийхийн тулд та аудио шошгон дээр тусгай шинж чанарыг зааж өгөх хэрэгтэй автоматаар тоглох. Энэ нь хамаагүй учраас онцгой. Энэ шинж чанар нь шошгонд байгаа нь хүчин төгөлдөр болоход хангалттай.

Анхдагч байдлаар, аудио клип вэб хуудсан дээр харагдахгүй. Гэхдээ хэрэв та "аудио" шошгонд утгагүй атрибут оруулбал хяналтууд, хөтөч нь аудио шошго байрлуулсан вэб хуудсан дээрх аудио клипийг тоглуулах удирдлагыг харуулах болно. Эдгээрт тоглуулах/түр зогсоох товчлуур, тоглуулах самбар, дууны хэмжээг хянах зэрэг багтана.

Оруулах HTML дээрх зургуудАшигласан хоёр үндсэн формат нь GIF болон JPEG юм. GIF форматыг хадгалах боломжтой энгийн хөдөлгөөнт дүрс(динамик баннерууд), JPEG нь гэрэл зураг гэх мэт олон өнгийн зурагт тохиромжтой. Вэб графикийн гуравдахь формат нь PNG боловч вэб дизайнд өргөн хэрэглэгддэггүй. GIF эсвэл JPEG форматтай дурын зургийг шошгыг ашиглан вэб хуудсанд оруулна < img > , хаалтын шошго байхгүй.

SRC шинж чанар

Атрибутаар дамжуулан srcзургийн файлын хаягийг (URL) зааж өгсөн, i.e. хөтөч нь энэ шинж чанарт заасан замыг (URL) ашиглан сайтын лавлахаас хүссэн зургийг олдог. Тохиромжтой болгох үүднээс сайтын бүх зургийг ихэвчлэн нэрлэсэн тусдаа хавтсанд байрлуулдаг зураг. Жишээлбэл, жижиг форматтай дурын зургийг авч, үүсгэсэн хавтас дүрсэнд нэрээр нь хадгална primer.jpg. Дараа нь бид үүнийг сургалтанд ашиглах болно.

За ингээд хуудсан дээр зураг оруулах гээд үзье? Бид кодыг бичдэг (зам - URL, зураг бүхий хавтасны байршлаас хамааран бичсэн):

< img src="image/primer.jpg">

Альтернатив текст. ALT шинж чанар

Яагаад өөр текстийг зааж өгсөн бэ? За тэгээд дарааллаар нь явцгаая. Хөтөч бүр зургийг идэвхгүй болгох функцтэй байдаг тул энэ функцийг ашигладаг хэрэглэгч шошгонд заасан тайлбарыг харах боломжтой өөрдүрсийг илэрхийлдэг. Энэ нь өнөөдөр хамааралгүй байж магадгүй, учир нь давуу эрх олгодог хязгааргүй тариф, гэхдээ энэ нь сайн зан үйлийн дүрэм гэж тооцогддог. Кодын жишээг харцгаая:

Та үүнийг зөвхөн хөтөч дээрх зургийн дэлгэцийг унтрааснаар л харж болно.

Хэмжээг нь тохируулна уу. WIDTH болон HEIGHT шинж чанарууд

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

Зургийн хэмжээг шошго ашиглан тохируулдаг өргөн- өргөн ба өндөр- өндөр, утгуудыг пикселээр болон дэлгэцийн өргөний хувиар (хувьтай, маш болгоомжтой) тохируулсан болно. Кодыг харцгаая:

Дүгнэлт

Зураг нь сайтын зочдыг татдаг, олон тооны харааны мэдээллийг агуулдаг, хэрэглэхэд хялбар боловч сайн, алдартай сайт үүсгэхийг хүсч байвал зарим зөвлөмжийг дагаж мөрдөх шаардлагатай хэвээр байна.

Та хэт том зургийн файлыг ашиглах ёсгүй, учир нь энэ нь хуудас ачаалах хурдад нөлөөлнө. Надад итгээрэй, энэ нь сүүлчийн үзүүлэлтээс хол байна.

ALT шинж чанар нь маш чухал бөгөөд IMG шошго бүрт нэмж оруулах ёстой. Агуулга Текст зурвасдүрсийг маш нарийн, товч дүрслэх ёстой.

Вэб хуудсан дээрх зургууд нь текстийн агуулгатай тохирч байх ёстой.

Энэ хэсгийг судалсны дараа та өөрийгөө вэбмастераар оролдож, бүрэн хэмжээний HTML хуудас үүсгэж болно. Дараа нь мультимедиа оруулах руу шилжье.

Хуулбар зохиогч бүрийн амьдралд html шошготой танилцах үе шат ирдэг. Ихэнхдээ энэ нь аяндаа тохиолддог бөгөөд үйлчлүүлэгчээс "текстийг хэвлүүлэхэд бэлтгэх" хүсэлт шиг харагддаг. Энэ нь нийтлэлд гарчиг, догол мөрийг тодруулах хэрэгтэй гэсэн үг юм. чухал газруудболон жагсаалт, гэхдээ Word боломжуудтай биш, харин тусгай код html хэл. Үүнд туслах болно copywriter-д зориулсан шошго. Ажилд шаардагдах жагсаалт нь ихэвчлэн бага байдаг боловч стандарт шаардлага бүхий текстийг форматлахад хангалттай. Зохиогчийн ажилд шаардлагатай html хаягуудад юу багтсан бэ? (Хэрэв та уншихаас залхуу байгаа бол доош гүйлгээд үзээрэй - html хаягуудын тухай энгийн бөгөөд ойлгомжтой сэдэвчилсэн инфографик байна!)

Хуулбар зохиогч уламжлалт асуултуудыг асуудаг. Мөн тэд бүгд үг хэллэгээр эхэлдэг "Ямар шошгыг тодорхойлоход ашигладаг ...":

• гарчиг;
• догол мөр;
• өнгөц зураг;
• налуу;
• жагсаалт тэмдэглэгдсэн/шошгогүй/

Энэ бүхэн нь техникийн даалгаварт халуун ногоо нэмж, шинэ мэдлэг олж авахад түлхэц өгдөг. PS дахь түлхүүрийн сэтгэл татам байдлыг нэмэгдүүлэхийн тулд тод бичвэрийн шошгыг ашиглах даалгавар бол нөхцөл байдал улам дордох болно. Гэхдээ энэ бүгдийг маш энгийнээр шийдэж болох бөгөөд үүнийг бид одоо шийдэх болно.

Гарчиг үүсгэх шошго

Гарчиг үүсгэх шошго нь h1-h6 элементүүдээр илэрхийлэгдэнэ. Тэд захидалдаа англи толгойноос (гарчиг) авсан. Шаардлагатай төрлийн толгойг тохируулах, PS-ийн ач холбогдлыг онцлохын тулд дараах кодыг ашиглана уу.

Гарчиг h1

Гарчиг h2

Гарчиг h3

Гарчиг h4

Гарчиг h5

Гарчиг h6

Вэбсайт дээр энэ нь иймэрхүү харагдах болно.

Гарчиг h1

Гарчиг h2

Гарчиг h3

Гарчиг h4

Гарчиг h5

Гарчиг h6

h1 гарчиг нь хамгийн их ач холбогдолтой бөгөөд харагдацтай. Үүнийг нийтлэлийн гарчиг болгон ашигладаг бөгөөд зөвхөн нэг удаа ашигладаг. Текст дэх дэд гарчгийн хувьд h2 ба h3-ыг санал болгож байна. Эдгээр нь авч үзэж буй материалын ач холбогдлыг онцолж, нийтлэлийг мэдээллийн түвшинд хуваахад тусалдаг.

h4-h6 толгойг бараг ашигладаггүй боловч логик блокууд болон чухал хэсгүүдийг тодруулахад эрэлт хэрэгцээтэй байдаг.

Том нийтлэлийн хувьд h1-h3 гарчиг, жижиг нийтлэлийн хувьд h1 ба h2 гарчгийг ашиглах нь дээр.

Жагсаалт: сумтай, шошгогүй

Сайн бүтэцтэй текст нь үргэлж нэг эсвэл бүр хэд хэдэн жагсаалттай байдаг. Өөрийнхөөрөө Гадаад төрхжагсаалтууд нь:

1. тэмдэглэгдсэн - тэд дугаарлалттай;
2. тэмдэглэгээгүй - элементүүдийг тэмдэглэгээгээр тодруулсан.

Гэхдээ бүх Word загвар нь сайт дээрх нийтлэлд тохиромжгүй тул HTML шошгон дээрх жагсаалтыг хэрхэн зөв форматлах талаар сурах нь зүйтэй.
Tag тэмдэглэгдсэн жагсаалт иймэрхүү харагдаж байна:

Unbulted жагсаалтын шошгоТэгэхээр:

Нэмж дурдахад жагсаалтын элемент бүр өөрийн HTML хүрээтэй байдаг:

html кодыг ашиглан текст дэх сумтай жагсаалтыг тодруулахын тулд ашигласан хоёр төрлийн элементийг нэгтгэх шаардлагатай болж байна. Энэ нь дараах байдлаар харагдах болно.

1. Жагсаалтын зүйл
2. Жагсаалтын зүйл
3. Жагсаалтын зүйл
4. Жагсаалтын зүйл

Тэмдэглэгдээгүй жагсаалтын хувьд энэ нь адилхан:

• Жагсаалтын зүйл
• Жагсаалтын зүйл
• Жагсаалтын зүйл
• Жагсаалтын зүйл

Бид жагсаалтуудыг эрэмбэлсэн. Бид цаашаа явж болно.

Текстийн онцлох шошго: тод ба налуу

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

Бүх зүйл маш энгийн! Шошго нь физик болон логик форматлах сонголтыг санал болгодог. Эхнийх нь хэрэглэгчдэд, хоёр дахь нь хайлтын системд хэрэгтэй. "Хайлтын системүүд" өөрсөддөө тохирсон html кодыг хараад сонгосон хэсгийг харгалзан үзэж, эрэмблэхдээ хүлээн авсан мэдээллийг ашигладаг тул логик форматыг ашиглан текстийг тодруулах нь алдаа болохгүй.

HTML шошго ашиглах нь хайлтын системд таалагдах, текстийг хэрэглэгчдэд нүдээр харуулах боломжийг олгодог. Юу илүү чухал вэ, өөрөө шийдээрэй:

PS болон хэрэглэгчдэд зориулж тод үсгээр бичсэн хэллэгийг тодруулж байна Хэрэглэгчдэд зориулсан тод хэллэг PS болон хэрэглэгчдэд зориулсан налуу үсгээр бичсэн хэллэгүүд Хэрэглэгчдэд зориулсан хэллэгийг налуу болго

Би тод хаягуудын сэдвээр том, маш их маргаантай нийтлэл байна, гэж нэрлэдэг.

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

Нээлтийн шошгыг догол мөрийн эхнээс өмнө, хаалтын шошгыг төгсгөлд нь байрлуулна. Хэрэв догол мөр нь жагсаалтаар төгссөн бол
Жагсаалтад ашигласан бүх шошгоны дараа байрлуулна.

За, төгсгөлд нь энгийн сэдэвчилсэн инфографикууд:

Сэдвийн хэлэлцүүлэг коммент хэсэгт эхлэхэд Амжилттай зохиолчдын клуб инфографик болон нийтлэлийн талаар сонирхолтой санал хүсэлтийг өгсөн. Хэлэлцүүлэгт оролцож буй эрх бүхий оролцогчийн санал бодлыг харуулсан дэлгэцийн агшинг энд оруулав.

Уншсан: 6,687

Шошго бүр бий болгодог шинэ шугам. Цаашид үүрэнд баганууд үүсдэг. Та олон багана үүсгэж болно. Энэ тохиолдолд та мөр бүрийн баганын тоог хянах хэрэгтэй. Жишээлбэл, эхний мөрөнд 5 багана байсан бол дараагийн мөрүүд мөн 5 баганатай байх ёстой. Үгүй бол хүснэгт хөвөх болно. Энэ нь нүдийг нэгтгэх боломжтой.

Хэрхэн html дээр хүснэгт хийх вэ

Жишээ хэлье, html код:

Жишээ хүснэгт

1-р багана

2-р багана

Эсийг анхаарч үзээрэй . Бид эсүүдийг хэвтээ байдлаар хуваахын тулд тусгай colspan шинж чанарыг ашигладаг. Түүний тоон утга нь нэгтгэх баганын тоог заана. Энэ шинж чанарын аналог бас байдаг: tag (хүснэгтийн толгой), энд та мөн colspan оруулах хэрэгтэй. Үр дүн нь адилхан байх болно. Гэхдээ ихэвчлэн тэд ердийн td ашигладаг.

Одоо тагийн бүх шинж чанаруудыг нарийвчлан авч үзье

Тагийн шинж чанарууд ба шинж чанарууд

Нээлтийн шошго руу

1. Property align="parameter" - хүснэгтийн зэрэгцүүлэлтийг тохируулна. Дараах утгыг авч болно.

Дээрх жишээн дээр бид хүснэгтийг төв рүү нь зэрэгцүүлсэн "төв".

Энэ шинж чанарыг зөвхөн хүснэгтэд төдийгүй хүснэгтийн тусдаа нүдэнд хэрэглэж болно

Жишээлбэл

12. Property width="number" - хүснэгтийн өргөнийг тохируулна: пикселээр эсвэл хувиар.

13. Property class="class_name" - хүснэгтэд хамаарах ангийн нэрийг зааж өгч болно.

14. Property style="styles" - хэв маягийг хүснэгт бүрт тус тусад нь тохируулж болно.

Одоо хүснэгтийн дотор шумбаж, хүснэгтийн нүднүүдийн шинж чанаруудыг харах цаг болжээ. Эдгээр шинж чанаруудыг нээлтийн шошгон дээр бичсэн байх ёстой