Вэбсайт, блог, вэб хуудас - бидний цаг үед аль хэдийн танил болсон ойлголтууд. Интернет хөгжихийн хэрээр вэб хуудсуудыг байршуулах сайтууд гайхалтай алдартай болсон бөгөөд энэ нь гайхмаар зүйл биш юм: зарим хүмүүсийн хувьд өөрийн гэсэн вэбсайттай байх нь зайлшгүй шаардлагатай байдаг бол зарим хүмүүсийн хувьд энэ нь тааламжтай зугаа цэнгэл юм. Эхний тохиолдолд бид ихэвчлэн пүүс, корпорацууд, хувийн бизнес эрхлэгчид эрэлт хэрэгцээтэй бүтээгдэхүүн, үйлчилгээг сурталчлахдаа ихэвчлэн ярьдаг. Хоёр дахь нь блогчдын тухай.
Үүнээс гадна зүгээр л мэдээлэл хайх, блог унших, видео үзэх гэх мэт интернэт хэрэглэгчид байдаг.
Чанартай вэб сайт үүсгэхийн тулд олон сонголт бий. Бид HTML-ээр дамжуулан вэб програмчлалд анхаарлаа хандуулах болно.
HTML гэж юу вэ
HTML нь Hyper Text Mark-Up Language гэсэн үг. Англи хэлнээс орчуулбал "Hypertext Markup Language" гэсэн утгатай.
Өөрөөр хэлбэл, HTML нь сайтын үндсэн элементүүд, түүний хүрээ гэх мэтийг үүсгэж болох кодуудын багц юм.үгс хэрхэн өгүүлбэрээс бүтдэг.
HTML кодууд нь зөвхөн латин үсгээр бичигдсэн бөгөөд тэдгээрийг шошго гэж нэрлэдэг бөгөөд код бүрийг өнцгийн хаалтанд оруулсан болно. Зарим шошгыг хослуулсан, заримыг нь салгасан.
Хосолсон нь тэдгээрийг заавал хосоор нь ашиглах ёстой гэсэн үг юм. Жишээлбэл, нээлтийн таг нь вэб хуудасны хаанаас эхэлж байгааг, хаах тэмдэг нь хаана зогсохыг заадаг. Сүүлийнх нь нээлтийн өнцгийн хаалтны дараа ташуу зураастай байдгаараа эхнийхээс ялгаатай. Жишээлбэл, нь нээлтийн шошго,нь хаалтын шошго юм.
Хослоогүй шошгонд хамтрагч хэрэггүй.
Олон шошго нь атрибуттай байж болно - нэмэлт элементүүд нь илүү тодорхой утгыг өгдөг. Жишээлбэл,. шошго
HTML-г хаана ашигладаг
HTML хаана хэрэгтэй вэ гэсэн сонгодог ойлголт бол вэб сайт бүтээх явдал юм.
Практикт энэ нь хангалттай байж болох юм, учир нь HTML нь сайтын үндсэн элементүүд, цэсүүдийг (олон түвшнийг оруулаад), арын дэвсгэрийг тохируулах, текст, зураг, аудио, видео оруулах, фонтыг засах боломжийг олгодог. болон бусад олон.
Гэсэн хэдий ч вэб хуудсанд илүү сонирхолтой, ихэвчлэн шаардлагатай элементүүдийг нэмэх боломжийг олгодог өөр хэлүүд байдаг:
- CSS нь бичвэрийн өнгө, үсгийн фонт гэх мэт хаягуудыг ашиглан бие даасан элементүүдийн хэв маягийг байнга зааж өгөх шаардлагагүйгээр сайтын хэв маягийг бүхэлд нь тохируулдаг.
- Скрипт хэл нь сайт дээр мини программ (скрипт) боловсруулж, оруулах боломжийг олгодог. Улиг болсон гоо зүйн зүйлс (хулганаар гүйлгэхэд холбоосын өнгийг өөрчлөх) болон функциональ зүйлсээр төгсөх (үйлчлүүлэгчийн имэйл хаяг, утасны дугаар цуглуулах).
- PHP ашиглан та өөрийн зочны дэвтэр эсвэл сэтгэгдлийн системийг хөгжүүлэх боломжтой.
Мөн HTML-г түгээх имэйл үүсгэхэд ашигладаг.
Холбоос гэж юу вэ
Тэдгээр нь танд сайт доторх болон гаднах өөр вэб хуудас руу шилжих боломжийг олгоно.
HTML холбоосыг ихэвчлэн ашигладаг:
- Гадаад вэб нөөц рүү очихын тулд.
- Сайт доторх хуудсууд руу шилжих.
- Google маягт руу очихын тулд.
HTML хэл дээрх эх сурвалжийн холбоосыг ихэвчлэн зааж өгдөг, ялангуяа өөр сайтаас материалыг хуулахдаа зохиогчийг зааж өгөх ёстой. Үгүй бол нэршилгүйгээр хуулбарлах нь зохиогчийн эрхийн зөрчил, агуулгын хулгай, сөрөг үр дагавар гэсэн тодорхойлолтод багтаж болно. Түүнчлэн, зээлсэн, өвөрмөц бус материал ашиглах нь SEO-ийн гүйцэтгэлийг бууруулж, эх сурвалжтай холбоосыг зааж өгөх нь эрсдлийг бууруулдаг.
Холбоосын төрөл
Сонгодог утгаараа холбоос нь вэб нөөцийн хаяг бөгөөд түүн дээр дарснаар хандах боломжтой.
Үүнээс гадна текст болон зураг зэрэг гипер холбоосууд байдаг. Эдгээр тохиолдолд HTML холбоос нь зарим өгүүлбэр (үг) эсвэл зургийн доор "далд" байх бөгөөд үүнийг дагахын тулд та текст эсвэл зураг дээр дарах хэрэгтэй.
Бусад төрлийн холбоосууд:
- Зочлоогүй - тодорхой сессийн үеэр хараахан товшоогүй холбоос. Жишээлбэл, хэрэв та өчигдөр энэ холбоосыг дагаж, компьютерээ унтраагаад өнөөдөр дахин асаасан бол шинэ сесс эхэлсэн тул одоо энэ холбоосыг дахин үзэх боломжгүй болно.
- Идэвхтэй - энэ төлөвт холбоос маш богино хугацаанд хадгалагдана: холбоос дээр товших болон дагах хоорондох хугацаа.
- Очсон - нэг сессийн үеэр дор хаяж нэг удаа зочилсон холбоос.
Энгийн текстийн холбоосын хувьд өөрөөр заагаагүй бол зочилсон холбоосын өнгө өөрчлөгддөг.
Холбоос холбосон зураг нь зочилсон ч бай, ороогүй ч бай төрхөө өөрчилдөггүй.
Хэрхэн энгийн холбоос оруулах вэ
Олон вэб эх сурвалжууд сайтын хаягийг холбоос гэж ойлгож, нэн даруй товших боломжтой болгож, өнгөөр тодруулдаг. Жишээлбэл, хэрэв хаягийг мессенжерээр эсвэл цахим шуудангаар илгээсэн бол түүн дээр дарснаар та сайт руу орох боломжтой.
HTML ашиглан өөрөө сайт үүсгэх тохиолдолд тусгай шошго ашиглан холбоос оруулах ёстой. Энэ нь иймэрхүү харагдах болно: вэбсайтын хаяг. HTML дээрх холбоос текстийг протоколын хамт бүрэн эхээр нь зааж өгөх ёстой.
Текстийн холбоосыг хэрхэн оруулах вэ
Текстийн гипер линк нь ердийн холбоостой ижил үүрэг гүйцэтгэдэг боловч илүү гоо зүйн хувьд тааламжтай харагддаг гэж өмнө нь хэлсэн: сайтын хаягийн оронд ихэвчлэн шаардлагагүй урт үг, хэллэгийг зааж өгдөг. Жишээлбэл, "Мэдээллийг эндээс хай" гэсэн өгүүлбэрт та холбоосыг нууж болно"энд" гэсэн үг. Үүнийг тодруулж, түүн дээр дарснаар хэрэглэгч хүссэн сайт руу шилжих болно.
Хэрхэн HTML холбоос хийх талаар өмнө нь хэлэлцсэн. Та ижил шошгыг ашиглан текстийн холбоос оруулах боломжтой. Ганц ялгаа нь та шошгуудын хооронд холбоосыг нуух текстийг зааж өгөх хэрэгтэй: харагдах текст.
Зургийн холбоосыг хэрхэн оруулах вэ
Энд арай илүү төвөгтэй байна. Бид ижил шошго ашигладаг, гэхдээ та текстийн оронд зураг руу очих замыг зааж өгөх хэрэгтэй.
Зам нь зургийн байршил юм. Хэрэв зураг (зураг) нь файл хуваалцах үйлчилгээнд байрладаг бол та зураасаар зурганд хүрэх замын дагуух бүх хавтсыг зааж өгөх хэрэгтэй. Та мөн боломжтой бол зургийн холбоосыг оруулж болно.
Таглах
src-ээс гадна бусад шинж чанаруудыг ашиглах боломжтой бөгөөд энэ нь зургийн өндөр, өргөн, байршлыг тохируулах болон бусад олон зүйлийг хийх боломжийг танд олгоно. Тэдгээрийн зарим нь:
- Src - зураг руу хүрэх замыг заана.
- Lowsrc - өмнөх атрибуттай адилхан боловч чанар муутай зургуудад зориулагдсан.
- Өндөр - зургийн өндөр.
- Өргөн - түүний өргөн.
- Alt - зургийн тайлбар. Та зураг эсвэл зураг дээр хулганаа аваачихад энэ шинж чанарт заасан текст гарч ирнэ.
- Border - зургийн эргэн тойрон дахь хүрээний зузааныг тодорхойлно.
Атрибутуудыг шошгоны дараа зааж өгсөн бөгөөд үүнд багтсан болнотүүний найрлага. Атрибут нь түүний утгыг дагаж мөрдөх ёстой. Жишээлбэл, "өндөр" эсвэл "өргөн" (өндөр, өргөн) шинж чанаруудын хувьд вэб хуудсан дээрх зургийн өндрийг зааж өгдөг. Өөрөөр заагаагүй бол хэмжих нэгж нь пиксел юм.
Энэ нь иймэрхүү харагдах болно: <a href="веб хуудасны хаяг"
. Эдгээр шинж чанарууд нь зургийн тохирох хэмжээг тохируулахад тусална. Хүрээ нь зургийн эргэн тойронд үл үзэгдэх хүрээ үүсгэхэд тусална.
Дээрх шинж чанарууд нь зураг оруулах шошгонд тусад нь хамаарна. Жишээ нь:.
Зангуу холбоос гэж юу вэ
Зангуу холбоос үүсгэх нь маш хэрэгтэй ур чадвар юм. Ихэнхдээ нэг хуудсан дээр урт текст блок эсвэл хэд хэдэн дэд хэсгүүд бүхий вэб хуудсыг байрлуулах шаардлагатай байдаг. Энэ тохиолдолд та текст эсвэл вэб хуудасны дэд хэсгүүдийн линкүүдийн жагсаалтыг нэн даруй эхлүүлэх боломжтой бөгөөд тэдгээрийг дарахад хэрэглэгч хүссэн хэсэг рүү шууд очно.
Зангуу холбоос үүсгэхийн тулд бусад төрлийн холбоосыг бодвол атрибут шошгыг илүү ашиглах шаардлагатай болно.
Эхлээд та дээд шинж чанарыг ашиглан мэдээллийн блок эсвэл текстийн дэд хэсэг бүрийн ерөнхий утгыг тохируулж, дараа нь харгалзах холбоостой холбох хэрэгтэй.
Тэдний онцлог нь илүү өргөн цар хүрээтэй тул эхлээд энгийн холбоос үүсгэхийг эзэмшиж, дараа нь зангуу холбоос үүсгэхийг зөвлөж байна.
Зөвлөгөө
Туршлагатай хүмүүсийн тусламжпрограммистууд:
- Холбоосын талаарх мэдээллийг HTML дээр хулганы дээр харуулахын тулд та үүнийг хийж болно. Үүний тулд бидний график элементүүдэд ашигладаг alt шинж чанар хэрэг болно.
- HTML ашиглан холбоосын жагсаалтыг гаргах боломжтой. Ялангуяа энэ нь зангуу холбоосууд болон одоогийн вэб хуудаснаас шууд дагах линкээр вэб нөөцийн жагсаалтыг гаргах шаардлагатай үед хэрэг болно.
- CSS болон JavaScript, түүнчлэн зарим HTML функцуудын тусламжтайгаар та ердийнхөөс өөр текст холбоос болон гипер холбоосын дизайн үүсгэж болно. Жишээлбэл, та холбоос дээр хулганаа аваачихад өнгөө өөрчилж, курсор түүнээс хол байх үед өмнөх рүү буцах боломжтой. Үүнийг захиалгат JavaScript скриптээр хийж болно. Нэмж дурдахад, холбоосын өнгийг зочлоогүй бол цэнхэр эсвэл зочилсон бол нил ягаанаас өөр зүйлээр тохируулж болно. Энэ бол CSS-ийн ажил.
- Холбоосыг буруугаар бүү ашиглаарай. Олон тооны зохисгүй холбоос бүхий вэб хуудас нь замбараагүй, замбараагүй харагдаж байна.
- Зурагтай холбоос нь зөвхөн зураг биш харин үнэхээр зураг гэдгийг хэрэглэгч ойлгож байгаа эсэхийг шалгаарай.
Дүгнэлт
Хуудсыг HTML хэлээр холбоход маш амархан. Энэ хэлний бүх гол санааг дагах нь чухал, учир нь жижиг алдаа ч үр дүн гарахгүй бөгөөд код ажиллахгүй болно.
