ICSI301 Төсөл #1: HTML ба CSS

Даалгавар 1 (20 оноо)

Тодорхойлж өгсөн CSS загварын дагуу хоёр өөр байдлаар харагддаг нэг HTML баримт үүсгэнэ. Энэ HTML файлыг index.html гэж нэрлэх ба баримтын гарчиг нь “ICSI301 Төсөл #1” байна. Энэ баримтын зэрэгцээ styleA.css болон styleB.css гэсэн хоёр загвар (stylesheet) үүсгэнэ.

Хэрэв HTML файл нь styleA.css загварыг холбосон бол дараах ("Хувилбар А") зурагт үзүүлсэн шиг харагдана:

Хэрэв HTML файл нь styleB.css загварыг холбосон бол дараах ("Хувилбар Б") зурагт үзүүлсэн шиг харагдана:

Санамж: Дэлгэцийн агшинд харагдаж байгаа, сонгож идэвхжүүлсэн D үсэг нь бичвэр хэр их зайд гарахыг харуулсан болно. Түүнээс D үсгийг хөх өнгийн дэвсгэртэй загварчлахгүй болно.

Загвар A тодорхойлолт

Зургаан хайрцаг элемент босоогоор жагссан байна.
Бүх хайрцгууд хэвтээ тэнхлэгийн дагуу голлосон, босоо тэнхлэгийн дагуу хоорондоо ижил зайтай байна. Веб хөтчийн цонхны хэмжээг өөрчлөхөд хайрцгуудын хоорондын зай нь өөрчлөгдөнө (хуудасны босоо тэнхлэгийн дагуу ижил хэмжээгээр). Хэдий тийм боловч, хайрцгууд нэг нь нөгөө дэрээ давхарлагдахгүй, хэмжээ нь ч өөрчлөгдөхгүй байх ёстой.
Хайрцаг бүрийн хэмжээ 100x100 пиксель, дээд талдаа 1px хүрээтэй (өнгө: #687291). Бичвэр нь хэвтээ тэнхлэгийн дагуу голлосон байна.
Хайрцгууд өнгүүдтэй (#dfe1e7, #eeeff2).
Сүүлийн элемент (өнгө: #687291) 4px, хар хүрээтэй, доторх бичвэр нь босоо тэнхлэгийн дагуу голлосон байна.
Бүх элементийн фонт нь Tahoma, 40 пиксель.

Загвар Б тодорхойлолт

Таван хайрцаг нь зүүн дээд өнцөгт шахаж байрлах ба хэвтээ тэнхлэгийн дагуу жагссан байна.
Цонхны хэмжээг өөрчлөхөд хайрцгууд давхарлагдахгүй (жишээ нь. A-гаас E хайрцгууд нэг шугамдаа байрлана. Цонх нь тэдгээрийг харуулахад хүрэлцэхгүй хэмжээтэй байсан ч давхарлагдахгүй).
Сүүлийн хайрцаг нь цонхы баруун доод өнцөгт шахаж байрлана. Цонхны хэмжээ өөрчлөхөд тэндээ л байрласан хэвээр байна. Өөрөөр хэлбэл, цонхны хэмжээг дагадаг байна.
Хайрцаг бүр 100x150 пиксель (өнгө: #eeeff2), зүүн талдаа 10px цэгэн шулуунтай (өнгө: #D0D0FF). Хайрцгууд хоорондоо 10 пиксель зайтай байна.
Хайрцаг дээр хулгана очиход хулганы заагч нь гарын дүрстэй болно. Мөн дэвсгэр (yellow) болон фонтын (goldenrod) өнгө нь өөрчлөгдөнө.
Бүх хайрцгийн фонт нь Tahoma, 40 пиксель.
Хайрцгийн ирмэг болон доторх үсэг нь 10 пиксель зайтай байна.

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

Загварын оноо (5 оноо)

Таны HTML файл XHTML 1.0 баримтыг шалгаж баталгаажуулах http://validator.w3.org хэрэгслийг ямар нэг алдаа, санамжгүйгээр давсан байх ёстой. Мөн таны HTML, CSS кодууд цэвэрхэн, уншууртай, догол мөрийг зөв авч хэрэглэсэн, зөв бүтэцлэгдсэн байх ёстой.

Нэмэлт оноо (2 оноо)

Гуравдахь styleC.css stylesheet үүсгэж дараахаас хоёрыг нь хэрэгжүүлсэн байна:

gradients
transitions
animations
web fonts
shadows

Нөөц

Энэ төсөл болоод энэ хичээлээр Chrome веб хөтчийг ашиглана. Энэ нь веб хөтчөөс болж үүсэж болзошгүй аливаа асуудлыг бууруулах юм.
Төслийнхөө файлуудыг Microsoft Teams програмаар, хичээлийн группд даалгавар илгээх хэсгээр илгээнэ.
Та ямар нэг ЖаваСкрипт эсвэл өөр сан, stylesheet ашиглахгүй. Кодоо зөвхөн өөрөө бичих хэрэгтэй.

Зөвлөмж

Энэ төсөлд дараах шиг CSS шинжүүд хэрэгтэй байж болно. (хэрхэн хэрэглэхийг Гүүглдээд гарын авлага, зааврыг нь хараарай):
```
display: inline-block;
height: 100%;
white-space: nowrap;
```
CSS Flexbox layout модулийг даалгаврын аль нэг хэсэгт ашиглах хэрэгтэй.
XHTML баримт HTML-ээс яг ямар ялгаатай байна вэ? Жишээ нь, элементийн хэмжээг өгөхөд ялгаатай байна уу.
position, flex layout-ийн талаар зайлшгүй судлах хэрэгтэй. Эдгээрийг аливаа элементийг өөрийн хүссэнээрээ байршуулахад гол хэрэглэдэг.
CSS Do Not Repeat Yourself (DRY) зарчмыг сайн баримтлаарай. Илүү оновчтой, дараагийн өөрчлөлтөд уян хатан код бичих хэрэгтэй.
MDN сайтаас суурь мэдлэгээ заавал аваарай. Ямар нэг элемент, CSS шинжийн талаар судлахдаа үүнийг эхлээд үз. Суурь сайн авбал код бичих цагийг чинь хэмнэх болно.
Зааврыг бүрэн гүйцэд уншаарай. Анзаараагүй юм байна гээд зарим оюутнууд дутуу хийх тохиолдол байдаг.

Хүлээлгэн өгөх үр дүн

Даалгаврыг илгээхдээ Төсөл 1-д шаардлагатай index.html, styleA.css, styleB.css, болон (заавал бус) styleC.css файлуудыг оруулаарай.