Вэб хуудас гэж юу вэ? Энэ нь хөтөч ашиглан үзэх боломжтой Hypertext Markup Language (HTML) дээр бичигдсэн баримт бичиг юм. Вэб хуудас руу URL хаягийг оруулснаар хандана.

Вэб хуудас нь текст, график, бусад хуудас болон файлуудын холбоосыг агуулж болно.

Вэб хуудсыг хэрхэн нээх вэ

Вэб хуудсыг үзэхийн тулд хөтөч шаардлагатай (жишээлбэл, Internet Explorer, Edge, Safari, Firefox эсвэл Chrome). Хөтөч дээрээ вэб хуудсыг бичих замаар нээж болно хаягийн мөр URL. Жишээлбэл, "https://www.computerhope.com/esd.htm" гэж бичвэл ESD Computer Hope хуудас гарч ирнэ.

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

Анхны вэб хуудас хэзээ үүссэн бэ?

Анхны вэб хуудсыг 1991 оны 8-р сарын 6-нд Тим Бернерс-Ли CERN-д бүтээжээ. Үүнээс өмнө та http://info.cern.ch/ хаягаар орж эхний сайт болон анхны вэб хуудсыг үзэх боломжтой.

Сайт болон вэб хуудас хоёрын ялгаа юу вэ?

Вэб сайт нь нэгээс олон вэб хуудас агуулсан газар юм. Жишээлбэл, манай эх сурвалж бол таны уншиж буй олон мянган вэб хуудсуудыг багтаасан сайт юм.

Дээрх URL жишээн дээр "url.htm" нь вэб хуудас бөгөөд энэ нь үргэлж URL-ийн сүүлчийн хэсэг юм. .htm, .html, .php, .cgi, .pl болон бусад файлын өргөтгөлөөр төгсдөггүй URL-уудын хувьд сервер нь анхдагчаар index.htm вэб хуудсыг ачаалдаг. Жишээлбэл, холбоо барих хуудасны URL-д зориулсан вэб хуудас байхгүй байна. Энэ тохиолдолд анхдагч индекс файлыг /contact лавлахаас ачаална.

Вэб хуудасны жишээнүүд

Вэб хуудсуудыг үзэхийн тулд хөтчүүдийг ашигладаг талаар бид өмнө нь дурдсан. Вэб хуудас нь CSS, зураг, JavaScript зэрэг хэд хэдэн элементээс бүрдэнэ. Вэб хуудасны үндсэн хэсгийг үүсгэсэн HTML ашиглан. Энэ кодыг HTML засварлагч ашиглан үүсгэж, хүн бичсэн эсвэл сервер талын скрипт ашиглан үүсгэж болно. Ер нь хүний ​​бүтээсэн вэб хуудас .htm эсвэл .html өргөтгөлөөр төгсдөг. Жишээлбэл, энэ хуудас нь "webpage.htm" гэсэн файлын нэртэй байна. Скриптээр үүсгэсэн хуудсууд .cgi, .php, .pl гэх мэтээр төгсөж болно.

Вэб хуудас ямар элементүүдийг агуулдаг вэ?

Вэб дизайнерууд юу болохыг ойлгохын тулд үндсэн элементүүдийн задаргааг доор харуулав логик бүтэцвэб хуудсууд:

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

Хайлтын талбар нь зочдод вэб хуудсыг хурдан олох боломжийг олгодог. Энэ нь хуудас бүр дээр байх ёстой;

Навигацийн талбар эсвэл цэс нь ихэвчлэн вэб хуудас бүрийн дээд эсвэл зүүн талд байдаг. Энэ нь сайтын үндсэн хэсэг бүрийн холбоосыг агуулсан байх ёстой;

Баннер сурталчилгаа нь вэб хуудасны өөр өөр газар гарч болно. Тэдгээр нь ихэвчлэн вэб хуудасны дээд, зүүн, баруун, доод хэсэгт харагдах эсвэл үндсэн агуулгад багтдаг;

Нийгмийн товчлуурууд нь зочдод нийгмийн сүлжээн дэх вэб хуудасны холбоосыг хуваалцах боломжийг олгодог;

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

Гарчиг нь вэб хуудас бүрийн дээд талд байх ёстой. Энэ нь HTML таг ашиглан бүтээгдсэн.

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

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

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

Хуудсыг хэвлэх товчлуур гэх мэт нэмэлт мэдээлэл, хэрэгслүүд нь хэрэглэгчдэд хэрэгтэй байж болох юм;

Хөл хэсэгт оруулах ёстой Нэмэлт мэдээлэл, энэ нь компани эсвэл сайтад чухал ач холбогдолтой. Мөн бусад вэб хуудасны холбоосууд;

Зохиогчийн эрх болон аливаа хууль ёсны болон нууц мэдэгдлийг бүх вэб хуудсанд нийтэлсэн байх ёстой. Вэб хуудасны дизайны үндэс дээр энэ элемент нь зөвхөн холбогдох хууль эрх зүйн мэдээлэлтэй холбогдож чаддаггүй. Энэ нь мөн зочдод вэб хуудасны төгсгөлд хүрсэн болохыг харуулж байна;

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

Хэрэглэгчид вэб хуудсан дээр юу хийж чадах вэ?

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

Бид HTML болон CSS вэбсайт бүтээх хичээлүүдээр аялж эхлэхээсээ өмнө хоёр хэлний ялгаа, хэл бүрийн синтакс болон зарим үндсэн нэр томъёог ойлгох нь чухал юм.

HTML болон CSS гэж юу вэ?

HTML (HyperText Markup Language) нь агуулгын бүтэц, түүний утгыг тодорхойлж, гарчиг, догол мөр, зураг гэх мэт агуулгыг тодорхойлдог. CSS (Cascading Style Sheets) эсвэл каскадын загварын хуудас нь дизайн хийхэд зориулагдсан танилцуулгын хэл юм. Гадаад төрхжишээ нь фонт эсвэл өнгө ашиглан контент.

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

HTML болон CSS хоёрын ялгааг ойлгосноор HTML-д илүү дэлгэрэнгүй орцгооё.

HTML үндсэн нөхцөлүүд

Та HTML-тэй ажиллаж эхлэхээсээ өмнө шинэ бөгөөд ихэвчлэн хачирхалтай нэр томъёотой танилцах болно. Цаг хугацаа өнгөрөхөд та эдгээрийг бүгдийг нь илүү сайн мэддэг болох болно, гэхдээ одоо та HTML-ийн үндсэн гурван нэр томъёо болох элементүүд, шошго, шинж чанаруудаас эхлэх хэрэгтэй.

Элементүүд

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

); Та жагсаалтад элементүүдийг оруулж болно ... болон бусад олон.

Элементүүдийг элементийн нэрийг тойрсон өнцгийн хаалтаар тодорхойлно. Тиймээс элемент дараах байдлаар харагдах болно.

Шошго

Өнцгийн хаалт нэмж байна< и >элементийн эргэн тойронд хаяг гэж нэрлэгддэг зүйлийг үүсгэдэг. Шошго нь ихэвчлэн нээх, хаах хос шошгонд байдаг.

Нээлтийн шошго нь элементийн эхлэлийг тэмдэглэнэ. Энэ нь тэмдэгтээс бүрдэнэ; Жишээлбэл, .

Хаалтын шошго нь элементийн төгсгөлийг тэмдэглэнэ. Энэ нь тэмдэгтээс бүрдэнэ< с последующей косой чертой и именем элемента и завершается символом >; Жишээлбэл, .

Нээх болон хаах шошгуудын хооронд гарч ирэх контент нь тухайн элементийн агуулга юм. Жишээлбэл, холбоос нь нээх шошготой байх болно болон хаалтын шошго. Эдгээр хоёр шошгын хооронд байгаа зүйл нь холбоосын агуулга байх болно.

Тиймээс, холбоосын шошго нь иймэрхүү харагдах болно.

...

Атрибутууд

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

Шинж чанарууд нь элементийн нэрний дараа нээгдэх шошгонд тодорхойлогддог. Ерөнхийдөө шинж чанарууд нь нэр, утгыг агуулдаг. Эдгээр шинж чанаруудын формат нь атрибутын нэр, дараа нь тэнцүү гэсэн тэмдэг, хашилт доторх шинж чанарын утгаас бүрдэнэ. Жишээлбэл, элемент href шинж чанар нь дараах байдлаар харагдах болно.

Шэй Хоу

HTML үндсэн нэр томъёоны үзүүлэн

Энэ код нь вэб хуудсан дээр "Shay Howe" гэсэн бичвэрийг харуулах бөгөөд энэ текст дээр дарахад хэрэглэгч http://shayhowe.com руу шилжих болно. Холбоосын элементийг нээх таг ашиглан зарласан болон хаалтын шошготекстийг хамарсан, түүнчлэн нээлтийн шошгон дээр href="http://shayhowe.com"-оор зарласан холбоосын хаягийн шинж чанар, утга.

Цагаан будаа. 1.01. Тойм хэлбэрийн HTML синтакс нь элемент, шинж чанар, шошго агуулдаг

Одоо та HTML элемент, шошго, шинж чанарууд гэж юу болохыг мэддэг болсон тул анхны вэб хуудсыг харцгаая. Хэрэв энд ямар нэг зүйл шинэ мэт санагдах юм бол санаа зовох хэрэггүй - бид явахдаа үүнийг задлах болно.

HTML баримт бичгийн бүтцийг өөрчлөх

HTML баримтууд нь .txt биш .html өргөтгөлөөр хадгалагдсан энгийн текст баримт бичиг юм. HTML бичиж эхлэхийн тулд эхлээд ашиглахад тохиромжтой текст засварлагч хэрэгтэй. Харамсалтай нь үүнд ороогүй болно Microsoft Wordэсвэл Pages, учир нь эдгээр нь нарийн төвөгтэй засварлагч юм. HTML болон CSS бичих хамгийн алдартай хоёр текст засварлагч нь Dreamweaver болон Гайхамшигтай текст. Үнэгүй хувилбарууд нь Windows-д зориулсан Notepad++, Mac-д зориулсан TextWrangler-г агуулдаг.

Бүх HTML баримтууд нь дараах мэдэгдлүүд болон элементүүдийг агуулсан шаардлагатай бүтцийг агуулдаг: , , болон .

Баримт бичгийн төрлийн мэдэгдэл буюу HTML баримт бичгийн хамгийн эхэнд байдаг бөгөөд HTML-ийн аль хувилбарыг ашиглаж байгааг хөтчүүдэд хэлж өгдөг. Бид HTML-ийн хамгийн сүүлийн хувилбарыг ашиглаж байгаа тул баримт бичгийн төрөл нь энгийн байх болно. Үүний дараа баримт бичгийн эхлэлийг харуулсан элемент гарч ирнэ.

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

Вэб хуудасны бүх харагдах контент нь элементэд агуулагдах болно. Ердийн HTML баримт бичгийн бүтэц дараах байдалтай байна.

Сайн уу Дэлхий! Сайн уу Дэлхий!

Энэ бол вэб хуудас юм.

HTML баримт бичгийн бүтцийг харуулах

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

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

Өөрөө хаагддаг элементүүд

Өмнөх жишээнд энэ элемент нь хаалтын шошгыг агуулаагүй цорын ганц шошго байсан. Санаа зоволтгүй, үүнийг санаатайгаар хийсэн. Бүх элементүүд нь нээх, хаах шошгуудаас бүрддэггүй. Зарим элементүүд нь нэг шошгон доторх шинж чанаруудаар дамжуулан контент эсвэл зан төлөвийг хүлээн авдаг. эдгээр элементүүдийн нэг юм. Жишээн дээрх элементийн агуулгыг charset шинж чанар болон утгыг ашиглан оноодог. Бусад ердийн өөрөө хаагддаг элементүүд нь:

• 
  

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

Кодын баталгаажуулалт

Бид кодоо хичнээн болгоомжтой бичсэн ч алдаа гарах нь гарцаагүй. Аз болоход, HTML болон CSS бичихдээ бид өөрсдийн ажлыг шалгах баталгаажуулагчтай байдаг. W3C нь HTML болон CSS баталгаажуулагчийг санал болгодог бөгөөд кодыг алдааг шалгадаг. Манай кодыг хянаж үзэх нь түүнийг бүх хөтөч дээр зөв гаргахад тусалдаг төдийгүй код бичих шилдэг туршлагыг заахад тусалдаг.

Практик дээр

Вэб дизайнерууд болон урд талын хөгжүүлэгчдийн хувьд бид өөрсдийн гар урлалд зориулсан хэд хэдэн гайхалтай чуулганд оролцох тансаг юм. Бид дараагийн хичээлүүдийн үеэр өөрсдийн хэв маягийн бага хурлыг зохион байгуулж, вэбсайтыг бий болгох гэж байна. Үүн шиг!

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

CSS-ийн үндсэн нөхцлүүд

HTML-ийн нэр томъёоноос гадна CSS-ийн үндсэн нэр томъёонууд байдаг. Эдгээр нэр томьёо нь сонгогч, шинж чанар, утгыг агуулдаг. HTML нэр томьёоны нэгэн адил та CSS-тэй ажиллах тусам эдгээр нэр томъёо хоёрдогч шинж чанартай болдог.

Сонгогчид

Вэб хуудсанд элемент нэмэх үед тэдгээрийг загварчилж болно CSS ашиглан. Сонгогч нь HTML-ийн аль элемент эсвэл элементүүдийг чиглүүлэх, хэв маягийг (өнгө, хэмжээ, байрлал гэх мэт) хэрэглэхийг тодорхойлдог. Сонгогчид нь бидний хэр тодорхой байхыг хүсч байгаагаас хамааран өвөрмөц элементүүдийг сонгохын тулд өөр өөр хэмжүүрүүдийн хослолыг багтааж болно. Жишээлбэл, бид хуудасны догол мөр бүрийг сонгох эсвэл зөвхөн нэг тодорхой догол мөрийг сонгохыг хүсч байна.

Сонгогчид нь ихэвчлэн id эсвэл ангийн утга гэх мэт атрибутын утгатай эсвэл эсвэл гэх мэт элементийн нэртэй холбоотой байдаг.

CSS-д сонгогчдыг буржгар хаалт ()-тай хослуулсан байдаг бөгөөд энэ нь сонгосон элементэд хэрэглэгдэх хэв маягийг хавсаргадаг. Энэ сонгогч нь бүх элементүүдэд чиглэгддэг

P(...)

Үл хөдлөх хөрөнгө

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

P (өнгө: ...; үсгийн хэмжээ: ...; )

Үнэ цэнэ

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

Мөн өнгөний шинж чанарын утгыг улбар шар болгож, үсгийн хэмжээг 16 пиксел болгож тохируулна уу.

P (өнгө: улбар шар; үсгийн хэмжээ: 16px; )

Үүнийг шалгахын тулд CSS дээр бидний дүрмийн багц нь сонгогчоор эхэлж, дараа нь буржгар хаалтаар эхэлдэг. Эдгээр буржгар хаалт нь хос шинж чанар, утгуудаас бүрдсэн мэдэгдлүүдийг агуулдаг. Мэдэгдэл бүр өмчөөр эхэлж, дараа нь хоёр цэг, хөрөнгийн үнэ цэнэ, төгсгөлд нь цэг таслал тавина.

Нийтлэг практик бол буржгар хаалт дотор хос шинж чанар, утгыг шилжүүлэх явдал юм. HTML-ийн нэгэн адил догол нь бидний кодыг эмх цэгцтэй, ойлгомжтой байлгахад тусалдаг.

Цагаан будаа. 1.03. CSS синтакс бүтэц нь сонгогч, шинж чанар, утгыг агуулдаг

Цөөн хэдэн үндсэн нэр томьёо болон ерөнхий CSS синтаксийг мэдэх нь маш сайн эхлэл боловч гүн рүү шумбахаас өмнө бидэнд нэмж хэлэх хэд хэдэн зүйл байна. Ялангуяа CSS дээр сонгогчид хэрхэн ажилладаг талаар нарийвчлан судлах хэрэгтэй.

Сонгогчидтой ажиллах

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

Төрөл сонгогчид

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

Див(...)

... ...

Ангиуд

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

Ангиуд нь олон элементэд ижил ангиллын атрибутын утгыг ашиглан өөр өөр элементүүдэд нэгэн зэрэг хэрэглэх боломжийг олгодог.

CSS-д ангиудыг ангиллын атрибутын утгын араас толгойн цэгээр төлөөлдөг. Доорх анги сонгогч нь гайхалтай ангиллын шинж чанарын утгыг агуулсан бүх элементүүдийг сонгоно, үүнд элементүүд болон

Гайхалтай(...)

...

Тодорхойлогч

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

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

CSS-д танигчийг урд талын хэш тэмдгээр, дараа нь id атрибутын утгыг илэрхийлдэг. Энд id нь зөвхөн shayhowe утгатай id шинж чанарыг агуулсан элементийг сонгоно.

#shayhowe ( ... )

...

Нэмэлт сонгогчид

Сонгогч нь маш хүчтэй зүйл бөгөөд дээр дурдсан нь бидний хамгийн түгээмэл сонгогчдийн нэг юм. Эдгээр сонгогчид нь зөвхөн эхлэл юм. Олон тооны дэвшилтэт сонгогчид байдаг бөгөөд тэдгээр нь бэлэн байдаг. Тэдэнтэй эвтэйхэн болсны дараа илүү дэвшилтэт заримыг нь шалгахаас бүү ай.

За, бүгдийг нэгтгэж эхэлцгээе. Бид HTML доторх хуудсанд элементүүдийг нэмээд CSS ашиглан тэдгээр элементүүдийг сонгож, загварчлах боломжтой. Одоо хоёр хэлийг хамтран ажиллахын тулд HTML болон CSS-ийн хоорондох цэгүүдийг холбож үзье.

CSS-г холбож байна

Бидний CSS-ийг HTML-тэй ярихын тулд бид HTML-ээс CSS файл руу чиглүүлэх ёстой. Бидний бүх хэв маягийг HTML баримт бичгийн элемент дотор заасан нэг гадаад файлд оруулах нь сайн туршлага юм. Нэг гадаад CSS ашиглах нь сайтад ижил хэв маягийг ашиглах, түүнд хурдан өөрчлөлт оруулах боломжийг олгодог.

CSS нэмэх бусад сонголтууд

CSS-г оруулах бусад сонголтууд нь дотоод болон шугаман хэв маягийг ашиглах явдал юм. Бодит байдал дээр та эдгээр сонголтуудтай тулгарч магадгүй, гэхдээ тэдгээр нь сайтуудыг шинэчлэхэд төвөгтэй, төвөгтэй болгодог тул ерөнхийдөө дургүйцдэг.

Гадаад загварын хүснэгтээ үүсгэхийн тулд бид сонгосон текст засварлагчаа дахин ашиглан шинээр үүсгэхийг хүсч байна текст файл.css өргөтгөлтэй. Манай CSS файлыг HTML файлтай ижил хавтас эсвэл дэд хавтасанд хадгалах ёстой.

Элемент дотор HTML болон CSS файлуудын хоорондын харилцааг тодорхойлдог элементийг ашигладаг. Бид CSS-тэй холбогдож байгаа тул тэдгээрийн хамаарлыг харуулахын тулд загварын хуудасны утга бүхий rel шинж чанарыг ашигладаг. Нэмж дурдахад href шинж чанарыг CSS файлын байршил эсвэл замыг зааж өгөхөд ашигладаг.

Дараах жишээн дээр HTML баримт бичигт элемент нь гадаад загварын хуудас руу чиглэнэ.

CSS-г зөв үзүүлэхийн тулд href атрибутын замын утга нь CSS файл хаана хадгалагдаж байгаатай шууд таарч байх ёстой. Өмнөх жишээнд main.css файл нь HTML файлтай ижил байршилд хадгалагдсан бөгөөд үүнийг эх хавтас гэж нэрлэдэг.

Хэрэв CSS файл нь дэд хавтсанд байгаа бол href атрибутын утга нь тухайн замтай тохирч байх ёстой. Жишээлбэл, хэрэв манай main.css файлыг stylesheets нэртэй дэд хавтсанд хадгалсан бол href атрибутын утга нь stylesheets/main.css байх болно. Энэ нь дэд хавтас руу шилжихийг харуулахын тулд налуу зураасыг (эсвэл ташуу зураас) ашигладаг.

Асаалттай Энэ мөчМанай хуудсууд аажмаар, гэхдээ гарцаагүй амьдралд орж эхэлж байна. Бид CSS-ийг хараахан гүнзгийрүүлж амжаагүй байгаа ч зарим элементэд бидний CSS-д мэдэгдээгүй хэв маяг байгааг та анзаарсан байх. Энэ нь эдгээр элементүүдэд өөрийн сонгосон хэв маягийг ногдуулдаг хөтөч юм. Аз болоход, бид эдгээр хэв маягийг маш амархан дахин бичиж чаддаг бөгөөд үүнийг бид дараа нь CSS-ийн дахин тохируулгыг ашиглан хийх болно.

CSS-г дахин тохируулахыг ашиглаж байна

Хөтөч бүр янз бүрийн элементүүдийн өөрийн гэсэн үндсэн загвартай байдаг. Хэрхэн Гүүгл Кромгарчиг, догол мөр, жагсаалт гэх мэтийг харуулах нь Internet Explorer-ээс ялгаатай байж болно. Хөтөч хоорондын нийцтэй байдлыг хангахын тулд CSS дахин тохируулах нь өргөн хэрэглэгдэх болсон.

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

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

Хэрэв та адал явдалд дуртай байгаа бол Николас Галлахерын бүтээсэн Normalize.css бас бий. Normalize.css нь бүх үндсэн элементүүдийн хатуу тохиргоог ашиглахад чиглэдэггүй, харин эдгээр элементүүдийн нийтлэг хэв маягийг тохируулахад анхаардаг. Энэ нь CSS-ийн талаар илүү гүнзгий ойлголттой байхаас гадна хэв маягаас юунд хүрэхийг хүсч байгаагаа мэдэхийг шаарддаг.

Хөтөч хоорондын нийцтэй байдал ба туршилт

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

CSS бичихдээ анхаарах хэд хэдэн зүйл бий. Сайн мэдээ гэвэл та бүгдийг хийж чадна, үүнийг эзэмшихийн тулд бага зэрэг тэвчээр шаардагдана.

Практик дээр

Бага хурлынхаа сайт дээр хамгийн сүүлд орхисон газар руугаа буцаж очоод CSS-ийг хэрхэн нэмэх талаар харцгаая.

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

Текст засварлагч ашиглан main.css нэртэй шинэ файл үүсгээд саяхан үүсгэсэн stylesheets хавтсандаа хадгалъя.

Хөтөч дээр index.html файлыг үзсэнээр бид элементүүд болон

Өгөгдмөл хэв маягийг аль хэдийн агуулж байна. Ялангуяа тэдгээр нь өвөрмөц үсгийн хэмжээ, эргэн тойрон дахь зайтай байдаг. Эрик Майерын дахин тохируулгыг ашигласнаар бид эдгээр хэв маягийг зөөлрүүлж, тус бүрийг нэг баазаас эхлүүлэх боломжийг олгоно. Үүнийг хийхийн тулд түүний вэб сайтыг үзэж, кодыг хуулж аваад манай main.css файлын дээд талд буулгана уу.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Лиценз: байхгүй (нийтийн домэйн) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, товчлол, хаяг, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, талбарын багц, хэлбэр, шошго, домог, хүснэгт, гарчиг, tbody, tfoot, thead, tr, th, td, нийтлэл, хажуугийн, зотон, дэлгэрэнгүй, оруулах, зураг, figcaption, хөл, толгой, hgroup, цэс, nav, гаралт, бадмаараг, хэсэг, хураангуй, цаг, тэмдэг, аудио, видео (хаваас: 0; дэвсгэр: 0; хүрээ: 0; үсгийн хэмжээ: 100%; фонт: өвлөх; босоогоор зэрэгцүүлэх: үндсэн шугам ; ) /* Хуучин хөтчүүдэд зориулсан HTML5 дэлгэцийн дүрийг дахин тохируулах */ нийтлэл, хажуу тийш, дэлгэрэнгүй, тайлбар, зураг, хөл, толгой, hgroup, цэс, навигац, хэсэг (дэлгэц: блок; ) их бие ( мөрийн өндөр: 1; ) ol, ul ( жагсаалтын хэв маяг: аль нь ч биш; ) блок ишлэл, q ( ишлэл: аль нь ч биш; ) блок ишлэл: өмнө, блок ишлэл: дараа, q: өмнө, q: дараа ( агуулга: ""; агуулга: аль нь ч биш; ) хүснэгт ( хилийн- нурах: нурах; хил хоорондын зай: 0; )

Манай main.css файл хэлбэржиж эхэлж байгаа тул index.html файлтай холбоно. index.html-г нээнэ үү текст засварлагчмөн элементийн дараа шууд элементийг нэмнэ.

Бид элементээр хэв маягийг зааж байгаа тул утгын загварын хүснэгттэй rel шинж чанарыг нэмнэ үү.

Бид мөн href атрибутыг ашиглан main.css файлынхаа холбоосыг оруулах болно. Манай main.css файл нь хөрөнгийн хавтас дотор байрлах загварын хуудасны хавтсанд хадгалагддаг гэдгийг санаарай. Тиймээс манай main.css файлд хүрэх зам болох href атрибутын утга нь assets/stylesheets/main.css байх ёстой.

Загварын бага хурал

Бидний ажлыг шалгаж, манай HTML болон CSS хэрхэн хамтран ажиллаж байгааг харах цаг боллоо. Хөтөч дээр index.html файлыг нээх (эсвэл аль хэдийн нээгдсэн бол хуудсыг сэргээх) нь өмнөхөөсөө арай өөр үр дүнг харуулах ёстой.

Цагаан будаа. 1.04. CSS тохиргоотой манай Styles Conference сайт

Жагсаал ба эх сурвалж

Доор та Styles Conference вэбсайтыг одоогийн байдлаар нь үзэх, мөн сайтын одоогийн эх кодыг татаж авах боломжтой.

Дүгнэлт

Тиймээс, бүх зүйл сайхан байна! Энэ зааварт бид томоохон алхам хийсэн.

Бодоод үз дээ, одоо та HTML болон CSS-ийн үндсийг мэддэг болсон. Биднийг үргэлжлүүлж, та HTML болон CSS бичихэд илүү их цаг зарцуулснаар та эдгээр хоёр хэлтэй ажиллахад илүү таатай байх болно.

Дахин дүгнэхийн тулд бид дараахь зүйлийг авч үзсэн.

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

Одоо HTML-г нарийвчлан авч үзээд семантиктай бага зэрэг танилцъя.

Нөөц ба холбоосууд

• Скрипт мастераар дамжуулан нийтлэг HTML нэр томъёо
• CSS-ийн нэр томъёо, тодорхойлолтууд нь гайхалтай вэбээр дамжуулан
• CSS хэрэгслүүд: Эрик Мейерээр дамжуулан CSS-ийг дахин тохируулна уу

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

Лабораторийн хичээл дээр бид Notepad текст засварлагчийг HTML файлуудыг бэлтгэх, харин Internet Explorer хөтчийг юу хийснийг хянах хэрэгсэл болгон ашиглах болно.

Онолын мэдээлэл

Үндсэн ойлголтууд

Гипертекст- нэг элементээс нөгөө элемент рүү амархан шилжих байдлаар компьютерийн дэлгэц дээрх текстийн элементүүдийн хооронд семантик холбоо тогтоох боломжийг олгодог мэдээллийн бүтэц. Практикт гипертекстэнд зарим үгийг доогуур нь зурж, эсвэл өөр өнгөөр ​​(гипер холбоос) өнгөөр ​​тодруулдаг. Үгийг тодруулах нь энэ үг болон онцолсон үгтэй холбоотой сэдвийг илүү нарийвчлан авч үзсэн зарим баримт бичгийн хоорондын холбоог илтгэнэ. HTML форматаар бичигдсэн тусдаа баримт бичгийг:

HTML баримт бичиг;

Вэб баримт бичиг;

Вэб хуудас.

Ийм хуудсууд нь ихэвчлэн NTM эсвэл HTML форматтай байдаг.

Нэг зохиогч эсвэл нэг IEDV биед хамаарах вэб хуудсуудын бүлэг нь нийтлэг гипер холбоосоор холбогдож, вэб зангилаа эсвэл вэб сайт гэж нэрлэгддэг бүтцийг бүрдүүлдэг. HTML хуудас бүр өөрийн гэсэн өвөрмөц URL-тэй байдаг - агхдвИнтернет дээр.

Хүрээ (Хүрээ) - хоёр утгатай нэр томъёо. Эхний утга нь өөрийн гүйлгэх самбар бүхий баримт бичгийн хэсэг юм. Хоёр дахь нь хөдөлгөөнт график файл (фрэйм) дэх 0DNN0H дүрс юм.

Апплет (Апплет) - маягтаар үйлчлүүлэгчийн компьютерт шилжүүлсэн програм тусдаа файлвэб хуудсыг үзэх үед эхлүүлсэн.

Скрипт (Скрипт) , эсвэл скрипт нь вэб хуудсанд өөрийн боломжуудыг өргөжүүлэх зорилготой программ юм. Зарим тохиолдолд Internet Explorer хөтөч нь "Хуудас дээр скрипт ажиллуулахыг зөвшөөрөх үү?" гэсэн мессежийг харуулдаг. Энэ тохиолдолд бид скриптийг хэлнэ.

CGI (Нийтлэг Гарц Интерфэйс) - сервер дээр ажилладаг программуудын ерөнхий нэр нь вэб хуудасны чадавхийг өргөжүүлэх боломжийг олгодог. Ийм програмгүйгээр интерактив вэб хуудас үүсгэх боломжгүй юм.

Хөтөч (Хөтөч) - вэб хуудас үзэх програм.

Бүрэлдэхүүн- HTML хэлний дизайн. Та үүнийг өгөгдөл хадгалах, тодорхой хэлбэрээр форматлах боломжийг олгодог сав гэж ойлгож болно. Аливаа вэб хуудас нь элементүүдийн багц юм. Гипертекстийн гол санаануудын нэг бол элементүүдийг үүрлэх боломж юм. Жишээлбэл:

Элементийн агуулга, элементийн форматлаж буй өгөгдөл

Tag(Англи хэлээр хаяг - шошго, тодорхойлогч, шошго) - элементийн эхлэл эсвэл төгсгөлийн тэмдэг. Шошго нь элементүүдийн үйл ажиллагааны хил хязгаарыг тодорхойлж, элементүүдийг бие биенээсээ тусгаарладаг. Вэб хуудасны текстэнд шошгуудыг өнцгийн хаалтанд бичдэг< >, мөн төгсгөлийн тагийн араас үргэлж ташуу зураастай байдаг. Эдгээр хаалтны хооронд бичвэр байхгүй (< >), хөтөч дээр үзэхэд бүрэн харагдана. Жишээлбэл:

Элементийн агуулга, өгөгдөл нь тэр

элементийг форматлана

Энэ текстийг тусдаа догол мөрөнд байрлуулах болно

Аливаа вэб хуудас нь элементүүдийн багц юм. HTML-ийн үндсэн зарчмуудын нэг бол нэг элементийг нөгөөд нь оруулах чадвар юм.

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

Энэ текстийг дэлгэцийн төв хэсэгт байрлуулна

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

Жич:

Ямар ч хэрэгтэй мэдээлэлэхлэл ба төгсгөлийн тэмдэглэгээний хооронд байх ёстой бөгөөд энэ нь түүний форматыг харуулсан байх ёстой;

Бүх шинж чанарууд нь эхлэх шошгонд байрладаг;

Ашиглахад хялбар болгохын тулд та эхлэх шошгыг том (том) үсгээр (P), төгсгөлийн шошгыг жижиг (жижиг) үсгээр (/p) бичиж болно, гэхдээ энэ нь шаардлагагүй;

Бүх элементүүд төгсгөлийн (хаалтын) шошго шаарддаггүй;

Шинэ элемент бүрийг дараахаар бичиж эхлээрэй шинэ мөр. Оруулсан элементүүдийг догол хийх (таб). Энэ нь дахин шаардлагагүй, гэхдээ энэ нь таны ажлыг ихээхэн хөнгөвчлөх болно.

Та WWW-ээс аливаа баримт бичгийг татаж авах үед таны хөтөчийн цонхон дээрх текст нь төгс форматтай, харахад хялбар хэлбэрээр харагдана. Энэ нь WEB хуудсууд нь энгийн текст биш бөгөөд таны хөтөчийн цонхон дээрх баримт бичгийн танилцуулгыг удирдахад туслах зарим мэдээллийг агуулна гэсэн үг юм. Баримт бичгийг боловсруулахдаа хэрэглэгч ямар төрлийн компьютер дээр үзэх нь тодорхойгүй тул WEB хуудсыг тодорхой компьютерийн платформд зориулан боловсруулсан форматаар, жишээлбэл Windows XP-д зориулсан Microsoft Word форматаар бэлтгэж, хадгалах боломжгүй. Ямар ч төрлийн компьютер дээр ажиллаж байгаа хэрэглэгч зохих форматтай баримт бичгийг харахын тулд энэ зорилгоор тусгайлан боловсруулсан HTML хэлийг ашигладаг.

HTML гэж яг юу вэ?

Хэрэв та хөтөчтэй ажиллаж байгаа бол View - View HTML code (View - Source) цэсний командыг сонгоно уу. Дэлгэц дээр энэ хуудасны анхны кодыг HTML хэлээр бичсэн цонх гарч ирнэ.

CTRL+U товчийг дарна уу

Интернэт дэх WEB хуудасны дүр төрх байнга өөрчлөгддөг. Гэхдээ бидний хувьд энэ нь одоогоор тийм ч чухал биш юм.

HTML - HyperText Markup Language

HTML - HyperText Markup Language нь баримт бичгийн бүтцийг тодорхойлдог нэлээд түгээмэл командуудын багц юм. Энэхүү тэмдэглэгээний хэл нь баримт бичгийн бие даасан логик хэсгүүдийг - гарчиг, догол мөр, хүснэгт, жагсаалт гэх мэтийг тодруулах боломжийг олгодог боловч тодорхой форматын шинж чанаруудыг заагаагүй болно. Баримт бичгийг уншихдаа форматын тодорхой төрлийг хөтөч өөрөө тодорхойлдог бөгөөд хөтөч нь тусгайлан өгдөг илүү сайн харуулах WEB баримт бичигтаны дэлгэцэн дээр.

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

HTML хэл

HTML хэл нь хэд хэдэн хувилбар эсвэл техникийн үзүүлэлттэй байдаг. Програм хангамжийн бүтээгдэхүүний хувилбаруудын нэгэн адил техникийн үзүүлэлтүүд нь дугаарлагдсан: 2.0, 3.0, 3.2, 4.0. Дараагийн техникийн үзүүлэлтүүд нь өмнөх нэг нэмэлт, өргөтгөлийг илэрхийлдэг. Бид сүүлийн үеийн бүтээцийг ашиглах болно HTML үзүүлэлтүүд 4.0 дэмждэг хамгийн сүүлийн үеийн хувилбаруудхамгийн түгээмэл хөтөч.

HTML кодын цонхон дээрх баримт бичиг нь тусгай форматтай текст баримт бичиг юм. Энэ форматтай бүх файлууд байна HTML өргөтгөл(.html), эсвэл HTM (.htm). HTML баримт бичиг нь энгийн текстийг өнцгийн хаалтанд оруулсан тэмдэглэгээний элементүүдтэй хольдог< и >, Жишээлбэл, , , , . Эдгээр тэмдэглэгээний элементүүдийг шошго гэж нэрлэдэг. Шошго нь дан, нээх, хаах боломжтой бөгөөд тодорхой дарааллаар дараагийн хэсгүүдээс бүрдэнэ.

• зүүн өнцгийн хаалт.

Тиймээс HTML баримт бичгийн эхэнд гарч, түүний эхлэлийг тэмдэглэдэг нээлтийн шошго нь HTML нэр болон хоёр өнцгийн хаалтаас бүрдэнэ.< >, мөн WEB баримт бичгийн төгсгөлд байрлах шошго нь зориулалтын хэсгүүдээс гадна ташуу зураас / тэмдгийг агуулж байгаа бөгөөд энэ нь хаалтын шошгыг илэрхийлж, баримт бичгийн төгсгөлийг илтгэнэ. Таг нь баримт бичигт нэгтгэгдсэн скрипт програмын кодын эхлэлийг хэлнэ. Энэ шошго нь скриптийн нэрнээс гадна "vbscript" утгатай хэлний шинж чанарыг агуулдаг бөгөөд энэ нь скрипт нь vbscript хэлээр бичигдсэн гэсэн үг юм.

Тагуудад зөвхөн латин тэмдэгтүүдийг ашиглах боломжтой бөгөөд шинж чанарын утгуудад дурын тэмдэгтүүдийг ашиглаж болно. Жишээлбэл, кирилл үсгийг атрибутын утга болгон ашигладаг бол тэдгээрийг хашилтанд оруулах ёстой, жишээлбэл, name="1-р хэсэг".

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

Шошгуудыг html суурь болгон

Ихэнх шошго хосолсон байдаг: нээлтийн шошгоны араас харгалзах хаалтын таг байх ба тэдгээрийн хооронд текст эсвэл бусад шошго агуулагддаг, жишээлбэл:

Гурван алхам номын онлайн дэлгүүр

Ийм тохиолдолд хоёр шошго болон тэдгээрийн хооронд хавсаргасан баримт бичгийн хэсэг нь нэртэй блок үүсгэдэг HTML элемент. Жишээлбэл, зарим шошго нь дан бөгөөд хаах тэмдэггүй байдаг. Ийм шошгууд нь өөрөө HTML элементүүд юм.

Ихэнх шошго нь нэг буюу хэд хэдэн шинж чанартай байж болно - хөтөч одоогийн шошгыг хэрхэн боловсруулах талаар нэмэлт мэдээлэл өгдөг шинж чанарууд. Гэхдээ ямар ч шинж чанар байхгүй байж болно. Тагийн атрибут нь нэр, жишээ нь, align, тэнцүү тэмдэг = болон тэмдэгтүүдийн мөрөөр тодорхойлогддог утгаас бүрдэнэ, жишээлбэл, "төв": align="center". Атрибутын утгыг ихэвчлэн хашилтанд бичдэг. Гэхдээ эдгээр утгууд нь зөвхөн латин үсэг, тоо, зураас ашигладаг бол ишлэлийг орхиж болно, жишээлбэл: align=center. Гэхдээ HTML хэлийг JavaScript болон хэлтэй нэгтгэхтэй холбоотой хэд хэдэн нөхцөл байдлын улмаас ишлэлийг орхихыг хатуу зөвлөдөггүй. Тиймээс шинж чанаруудыг хашилтанд нэн даруй бичих зуршилтай болоорой.

HTML баримт бичгийн бүтэц

HTML баримт бичиг бүр нь дараах бүтэцтэй байдаг.

…

HTML баримт бичгийн бүтэц нь дараах чухал элементүүдийг агуулна.

• Баримт бичгийн эхлэл ба төгсгөлийг тэмдэглэдэг шошго ба ;
• толгой хэсгийг ба -аар тусгаарласан;
• хаягаар хязгаарлагдсан бие….

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

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

HTML (HyperText Markup Language) нь тусгай хэлформатлах текст баримт бичиг(үүнийг баримт бичгийн тэмдэглэгээний хэл гэж нэрлэдэг - WWW баримтыг харагч). HTML бол баримт бичгийн бүтцийг дүрсэлсэн нэлээд энгийн командуудын багц юм. HTML нь текстийн логик хэсгүүдийг (гарчиг, догол мөр, жагсаалт гэх мэт) онцлон тэмдэглэх, тусад нь бэлтгэсэн гэрэл зураг эсвэл зургийг вэб хуудсанд байрлуулах, бусад баримт бичигтэй харилцах хуудасны холбоосыг зохион байгуулах боломжийг олгодог.

HTML нь жишээ нь Microsoft Word шиг тодорхой, нарийн баримт бичгийн форматын шинж чанаруудыг заагаагүй болно. Баримт бичгийн тодорхой төрлийг эцсийн эцэст зөвхөн програмаар тодорхойлдог - хөтөчтаны компьютер дээр. Яг ийм хандлагын хэрэгцээ нь техник хангамжийн нэг төрлийн бус байдалтай холбоотой юм програм хангамжинтернетэд холбогдсон компьютерууд. HTML нь програмчлалын хэл биш боловч вэб хуудсууд нь суулгагдсан програмуудыг агуулж болно - скриптүүддээр Javascript хэлүүдТэгээд Visual BasicСкрипт ба програмууд - апплетууд Java хэл дээр.

Үзэл бодлоор Windows хэрэглэгч, Вэб хуудас нь ердөө л интернет сервер дээр байрлах *.htm эсвэл *.html файл юм дотоод сүлжэээсвэл таны машины хатуу диск дээр.

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

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