HTML хуудас хэрхэн үүсгэх

Хэрэв та өөрийн вэб хуудас үүсгэхийг хүсвэл, та HTML-ийн ойлголттой байх ёстой. Энэ нийтлэлд HTML хуудас хэрхэн үүсгэх талаар тайлбарласан болно. Мөн, та xml сайтын зураглалыг хэрхэн үүсгэх, зураг, холбоосыг хэрхэн нэмэх талаар сурах болно. Мөн xml сайтын зураг үүсгэх нь чухал, Энэ нь таны сайтыг зохион байгуулах, урсгалыг нэмэгдүүлэхэд тусална. Дараагийн алхам бол загвар сонгох явдал юм.

Html хуудас үүсгэх

HTML бол тэмдэглэгээний хэл юм. Вэб хуудасны элемент бүрийг шошгоор илэрхийлдэг. Шошго нь өнцгийн хаалтаар тодорхойлогддог, элемент бүр нэг буюу хэд хэдэн шошготой байдаг. Зарим элементүүд нь зөвхөн нэг шошго шаарддаг; бусад нь хоёрыг шаардаж болно. Нээх, хаах шошго нь урагшаа ташуу зураастай (/). Жишээлбэл, догол мөрний элементийг p тагаар илэрхийлнэ. Нээх ба хаах шошгуудын хоорондох текст нь догол мөрийн текст юм.

HTML документ үүсгэхийн тулд, Та текст засварлагч ашиглах хэрэгтэй болно. Ихэнх компьютерууд анхдагчаар текст засварлагчтай байдаг. Windows хэрэглэгчид Internet Explorer ашиглах болно, харин Mac хэрэглэгчид TextEdit ашиглах боломжтой. Та мэргэжлийн вэб хуудас үүсгэхийн тулд гоёмсог текст засварлагч суулгаж болно, гэхдээ таны анхны HTML хуудасны хувьд, энэ нь шаардлагагүй. Та энгийн текст засварлагч болон дурын вэб хөтчийг ашиглаж болно. Хэрэв та аль програмыг ашиглахаа мэдэхгүй байгаа бол, үнэгүй HTML засварлагчийг татаж аваад үзээрэй.

Html хуудас нь хоёр үндсэн хэсэгтэй: бие ба толгой. Үндсэн хэсэг нь вэбсайтын бодит агуулгыг агуулдаг, толгой хэсгийг гарчиг болон мета мэдээлэлд ашигладаг. Бие махбодид бусад бүх элементүүд байдаг, зураг болон бусад графикуудыг оруулаад. Толгой хэсэг нь таны навигацийн холбоосыг байрлуулах газар юм. Та биеийг бичиж дууссаны дараа, Та баримт бичгийн агуулгыг оруулахад бэлэн байна. Вэбсайтаа хүн бүрт хүртээмжтэй байлгахын тулд бие болон толгойн элементүүдийг ашиглахаа мартуузай.

xml сайтын зураг үүсгэх

Хэрэв танд HTML хуудас байгаа бол, Та хайлтын системд таны вэбсайтыг мөлхөхөд туслах XML сайтын зураг үүсгэхийг хүсч болно. Хэдийгээр энэ нь таны хайлтын зэрэглэлд нөлөөлөхгүй, Энэ нь хайлтын системд таны агуулгыг ойлгож, мөлхөх хурдаа тохируулахад тусална. Энэ замаар, Таны вэбсайт хайлтын системийн үр дүнд илүү харагдах болно. Эхлэхийн тулд хэдэн хялбар алхмуудыг энд оруулав:

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

Таны HTML хуудас ажиллаж эхэлмэгц, Google Search Console руу илгээнэ үү. Та ямар ч файлын өргөтгөлийг ашиглаж, XML сайтын газрын зургийг нэрлэж болно. Та Google-д XML сайтын зураг оруулах боломжтой, гэхдээ энэ нь шаардлагагүй. Google-ийн мөлхөгчид ерөнхийдөө шинэ агуулгыг олоход маш сайн байдаг, мөн та тэдэнд сайтын зураг оруулах шаардлагагүй. Та мөн бусад хайлтын системд оруулах боломжтой, гэхдээ энэ нь таныг Google-д таних баталгаа болохгүй.

Таны вэб хуудсанд XML sitemap нэмэх шаардлагагүй, гэхдээ энэ нь таны вэбсайтын SEO-ийг нэмэгдүүлэх болно. Сайтын газрын зургийг хайлтын системүүд вэб хуудсаар шууд холбогдоогүй хуудсыг индексжүүлэхэд ашигладаг.. Сайтын газрын зураг нь баялаг медиа контентын хүртээмжийг сайжруулахад тусалдаг. Вэбсайтдаа sitemap нэмэх нь таны сайтыг хайлтын системийн роботуудад илүү хялбар болгоход тусална.

Зураг нэмж байна

HTML дээр, Та img хаягийг ашиглан хуудсанд зураг нэмж болно. Энэ шошго нь зөвхөн зураг болон түүний шинж чанаруудыг агуулна; Энэ нь хаалтын шошго шаарддаггүй. Энэ зургийн шошгыг HTML баримт бичгийн үндсэн хэсэгт оруулах ёстой. Зургийн өргөн ба өндрөөс гадна, та зургийг дүрсэлсэн alt шинж чанарыг оруулах ёстой. Alt тагийг харахгүй байгаа хүнд тайлбар бичиж байгаа юм шиг бичих хэрэгтэй.

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

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

Холбоос нэмж байна

Та a-г ашиглан HTML хэл дээрх холбоосыг өөрийн баримт бичигт нэмж болно> href шинж чанартай шошго. Энэ нь баримт бичигт хавчуурга үүсгэж, шинэ таб дээр нээнэ. Та баримт бичигт зураг оруулахын тулд href шинж чанарыг ашиглаж болно. Та мөн HTML товчийг холбоос болгон хөрвүүлэхийн тулд JavaScript кодтой холбоосыг ашиглаж болно. Та үүнийг хийснийхээ дараа, Та холбоосоо CSS эсвэл JavaScript кодоор загварчилж болно.

Холбоос нь нэг вэб эх сурвалжаас нөгөө вэбийн холболт юм. Энэ нь хоёр төгсгөлөөс бүрдэнэ, эх сурвалжийн зангуу ба очих газрын зангуу. Холбоос нь зурагнаас текст файл хүртэл юу ч байж болно. Ихэнх нийгмийн сүлжээний сайтууд болон вэбсайтууд хэрэглэгчдийг тодорхой URL руу чиглүүлэхийн тулд холбоосыг ашигладаг. HTML-г мөн холбоосын байршлыг зааж өгөхөд ашиглаж болно. Энэ бол’ attribute нь кодын элементүүдийг URL руу холбох боломжийг танд олгоно.

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

Хүснэгт нэмж байна

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

Та хүснэгтийн толгой болон хүснэгтийн өгөгдлийг td элементээр нэмж болно, хувь хүнийг тодорхойлдог “хайрцагнууд” агуулгын хувьд. Хүснэгтийн толгой хэсгийг нэмэх нь вэб хуудсанд өгөгдлийг харуулах эхний алхам юм, Хэрэв та хүсвэл эхнийхийг нэмэх хэрэгтэй. Хүснэгт нь гурван эгнээний гарчигтай байх ёстой. Нэг толгой хоосон байх ёстой. Хэрэв таны хүснэгт баганатай бол, Та мөн багана бүрийн мөрийн толгойг үүсгэх хэрэгтэй.

Та мөн өөрийн хүснэгтэд тайлбар нэмж болно. Гарчиг нь хүснэгтийн зорилгыг тодорхойлсон нэмэлт элемент юм. Мөн хадмал нь хүртээмжтэй байх болно. Хүснэгт нь өгөгдлийн бүлгийг дүрсэлсэн нүднүүдийг агуулж болно. Эцэст нь, та мөр, баганын багцыг тодорхойлохын тулд thead элементийг нэмж болно. Та хоёр элементийг хамтад нь эсвэл тусад нь ашиглаж болно. Та тэдгээрийг хослуулан ч ашиглаж болно, гэхдээ тайлбар нь хамгийн чухал.

div нэмж байна

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

Та мөн div дотор код оруулахын тулд innerHTML шинж чанарыг ашиглаж болно. Энэ арга нь мөрөнд хавсаргасан кодыг хүлээн авдаг, мөн хэрэв энэ нь div дотор байхгүй бол, контентыг устгах болно. Та ийм байдлаар div-д код оруулахаас зайлсхийх хэрэгтэй, Энэ нь таны вэбсайтыг сайт хоорондын скриптийн эмзэг байдалд хүргэж болзошгүй юм. Хэрэв та JavaScript гэх мэт скрипт хэл ашиглаж байгаа бол, та innerHTML шинж чанарыг ашиглаж болно.

Div нь баримт бичгийн доторх кодыг бүлэглэхэд ашигладаг үндсэн HTML таг юм. Энэ нь догол мөр агуулж болно, блок ишлэл, зураг, аудио, эсвэл бүр толгой. Түүний байрлал нь хуудасны янз бүрийн хэсэгт нэг төрлийн хэв маяг, хэлийг хэрэглэх боломжийг олгодог. Дараалсан элементүүдийн бүлгүүдэд нийтлэг байдаг семантикийг тэмдэглэхэд divs-ийг хамгийн сайн ашигладаг. Хуудсыг бүхэлд нь дахин бичих шаардлагагүй хэсэгт хэв маяг нэмэхийг хүсвэл div-г ашиглах хэрэгтэй.