SlideShare ist ein Scribd-Unternehmen logo
1 von 59
Вэб дизайн Лекц №1
Вэб дизайн  2 Зорилго Суралцагчдад вэбсайтын тухай ерөнхий ойлголт өгөх, HTML, CSS, JavaScript-ийн талаарх мэдлэг олгох Олгох ур чадвар Вэб хуудасны дизайн гаргах Статик вэб хуудас хийх Энэ хичээл хэнд зориулагдсан бэ? Вэб дизайн сонирхдог, вэб хөгжүүлэгч болохыг зорьсон хүн бүхэнд зориулагдсан. Ямар нэг програмчлалын мэдлэг шаардахгүй
Хичээл явагдах хэлбэр 3 “Вэб Дизайн” цахим сургалт 7 удаагийн хичээлээс бүрдэнэ. Хичээл бүр Онолын мэдлэг олгох хэсэг Онолын хэсгийг жишээгээр тайлбарлаж харуулах хэсэг Танилцуулга вэб сайт хийх хэсэг  гэсэн хэсгүүдээс бүрдэнэ.
Хичээлийн хөтөлбөр 4
Хичээлийн хөтөлбөр 5
Хичээлийн хөтөлбөр 6
Хичээлийн хөтөлбөр 7
Хичээлийн хөтөлбөр 8
Хичээлийн хөтөлбөр 9
Хичээлийн хөтөлбөр 10
Хичээл №1 - Агуулга 11 Интернэт гэж юу вэ?  Вэб гэж юу вэ? Үндсэн ойлголт Вэб хэрхэн ажилладаг вэ? Вэб сервер, Вэб броузер HTML Тааг, түүнийг бичих Үндсэн таагууд/html, head, meta, body/ Атрибутууд Анхны вэб хуудас бичих
Вэб сайт хэрхэн ажилладаг вэ? 12 http://www.google.com Domain Name  System  74.125.224.146 Интернэт Web Server
Интернэтийн түүх 13 1969 онд  АНУ-ын Хамгаалалтын Сайжруулсан Судалгааны Төслийн Агентлаг нь шинэ сүлжээг үүсгэн хөгжүүлэх даалгавар авчээ.  Зорилго нь цөмийн довтолгоонд тэсэж үлдэх сүлжээг бэлтгэх. Гол нь харилцан хамааралгүй ямар ч төвлөрсөн удирдлагагүй үйл ажиллагааг үүсгэх асуудал байлаа.  Судалгаагаар дээрх шаардлагыг хангасан найдвартай протоколыг гаргасан бөгөөд энэ нь одоогийн TCP/IP протоколын бүрдэл юм.   TCP/IP нь бусад протоколуудаас олон талаараа давуу байв. Тухайлбал TCP/IP нь сүлжээний багахан нөөцийг шаарддаг, бусад ямар ч протоколоос хямдхан тусч байлаа. Иймээс ч тун хурдан тархжээ. Протокол гэж юу вэ? Протокол гэдэг нь компьютерууд хоорондоо ярилцах хэл гэж ойлгож болно. Компьютерууд хоорондоо мэдээлэл солилцохын тулд протоколыг ашигладаг.  1980-аад оны үед TCP/IP протокол гарч өөр өөр төрлийн систем бүхий компьютерууд хоорондоо холбогдох боломжтой болсноор интернэтийн хөгжил хүчээ авч эхэлсэн.  Мөн энэ үеэр WWW-ийн эцэг гэгддэг Tim Berners Lee HYPERTEXT MARKUP LANGUAGE, анхны вэб броузер, вэб сервер програмыг зохиосон.
Интернэт 11.07.23 14 Интернэт гэдэг бол сүлжээгээр холбогдсон компьютеруудын сүлжээ Интернэтийг нүдээр харвал
Интернэтийг нүдээр харвал 11.07.23 15
Интернет 16 Интернэтэд холбогдсон компьютер бүхэн IP address гэж нэрлэгддэг дахин давтагдахгүй хаягтай байдаг. IP хаягийг компьютер уншиж, ойлгоход хялбар. Уг  хаягийг л ашиглаж TCP/IP протокол дамжуулж буй мэдээллээ хэрэгтэй газар нь зөв хүргэх боломжтой болдог. IP хаягийн бичигдэх хэлбэр нь: Тоо.Тоо.Тоо.Тоо 0<=Too<=255
Вэб сервер гэж юу вэ? 17 Интернэт дэх вэб хуудсуудыг хадгалах өөр дээр нь байгаа вэбийг үзэхийг хүссэн хvсэлтэд харгалзах вэб хуудсыг боловсруулан, хүсэлтийн хариултыг интернэтээр илгээж байх үүрэгтэй өндөр хvчин чадал бүхий тусгай компьютерууд юм.  Вэб сервер дээр төрөл бүрийн 	 сервер програмууд ажиллаж  	дээрх үүргүүдийг гүйцэтгэж  	байдаг.
Domain Name System 18 Энэхүү систем нь тухайн веб хаягийг/www.google.com/ дахин давтагдашгүй IP хаяг /74.125.224.146/ болгон хөрвүүлдэг.  Вэб хаяг, түүнд харгалзах IP хаягууд Domain Name Server дээр бүртгэгдсэн байна. Өөрөөр хэлвэл таны вэб броузераас дуудсан тухайн веб сайтын хаягийг цааш дамжуулахдаа тэр нэрээр дамжуулалгүй IP хаяг болгон хөрвүүлээд дамжуулдаг байна.  Домайн нэр - Хүний уншиж цээжлэхэд хялбар нэр  IP хаяг - Компьютерийн ойлгоход хялбар нэр
Вэб броузер гэж юу вэ? 19 Хэрэглэгчийн компьютер/бусад төхөөрөмжүүд/ дээр байрлах бөгөөд вэбүзэхэд ашиглагддаг програм Хэрэглэгчийг ямар нэг вэбрүү орох товчлуур(линк) дарах үед вэб броузер нь тухайн вэбийг үзэх хүсэлтийг илгээдэг. Вэб броузер хэрэглэгчдэд вэб дээрх текст, зураг, видео, хөгжим, тоглоом зэргийг дүрслэн харуулдаг. Анхны вэб броузер 1991 онд WorldWideWebнэртэйгээр гарч байжээ.
Вэб броузер 20 Олон янзын вэб броузер байдгаас нэг вэб хуудас өөр өөр броузер дээр харагдах байдал харилцан адилгүй байдаг.
Вэб 21
Анхны вэб 22 Анхны броузерууд  энгийн текст л дүрсэлж харуулах боломжтой байсан.
Вэб гэж юу вэ? 23 Вэб гэдэг бол тодорхой нэг сэдвийн дагуу хийгдсэн, вэб сервер дээрх байрлах холбоотой вэб хуудсууд юм. Вэб хуудас гэдэг нь ердийн текст файл  Вэб хуудсан дээрх агуулгыг дэлгэцийн хаана ямар форматтайгаар (өнгө, хэмжээ, үсгийн фонт г.м) харагдуулахыг зааж өгсөн дүрмүүд бүхий файл. Уг дүрмийг HTML, CSS, JavaScript ашиглан зааж өгдөг.
Вэб гэж юу вэ? 24 Вэбийн агуулгыг шинэчлэгдэх байдлаар нь статик, динамик гэж ангилдаг. Статик сайт:   	Ийм сайт нь ихэвчлэн HTML  ашиглан бичигдсэн байдаг ба сайтыг үзэж буй бүх хэрэглэгчдэд адилхан мэдээлэл харуулдаг.  	Зөвхөн сайтын зохиогч л сайт дээрх мэдээллийг өөрчлөх боломжтой байна. Динамик сайт: 	Вэб хуудсан дахь агуулга нь автоматаар эсвэл тодорхой хугацааны давтамжтайгаар өөрчлөгдөж байдаг.  	Зохиогчийн урьдчилан бэлдсэн формат бүхий хуудсан дээр өгөгдлийн сангаас уншин өгөгдлөө сайт өөрөө байрлуулж байдаг хуудас гэж өөрөөр хэлж болно.
HTML 25
HTML 26 HTML-ийн тухай Тааг гэж юу вэ? Таагуудын үндсэн шинж, бичигдэх дүрэм XHTML, түүний онцлог Үндсэн таагууд Текст хэвжүүлэх таагууд Гарчиг тодорхойлохтааг Тайлбар бичих
HTML-ийн тухай 27 Вэб хуудас бүр мэдээллээ хэрхэн харуулах зааврыг агуулдаг ба вэб броузер хэрэгсэл эдгээр зааврыг уншиж харуулна. Хуудас харуулах зааврыг HTML гэж нэрлэгдэх кодчлолоор бичдэг.  HTML гэдэг нь вэб бүтээхэд зориулагдсан, мэдээллийн харагдах байдлыг тохируулахад  хэрэглэгддэг хэлюм. HTML – Hyper Text Markup Language HTML файл нь html юмуу htmөргөтгөлтэй байна.
HTML тааг 28 HTML нь таагуудаас бүрддэг. Тааг гэдэг нь текст болоод бусад агуулгуудыг броузерт хэрхэн харагдуулахыг хэлдэг заавар юм. Тааг нь их, багын(< >) тэмдгийн хооронд бичигддэг. Вэб хуудасны HTML кодыг харахдаа хулганы баруун товчийг дарж View Page Source гэсэн сонголтыг хийнэ. Нээх, хаах таагууд гэж байна. <b> - Нээх тааг </b> - Хаах тааг Таагт мөн агуулга гэсэн ойлголт байдаг. Таагийн агуулга нь нээх, хаах таaгийн хооронд бичигддэг. <b>Агуулга</b>
Вэб хуудас үүсгэх 29 Дурын текст засварлагч програмыг нээнэ. <b>Энэ текст тодоор харагдана</b> - гэжфайл дотроо бичнэ. Нээсэн файлдаа нэр өгөн, html өргөтгөлтэйгээр хадгална.  Хадгалсан файлаа вэб броузер програм ашиглан нээж харна.
Вэб хуудас нэрлэх 30 Зөвлөмж Үүсгэсэн вэб хуудсуудаа нэрлэхдээ аль болох ойлгомжтой нэрээр нэрлэх хэрэгтэй. Олон үгнээс бүрдсэн нэрээр нэрлэх бол үгнүүд хооронд хоосон зай авч болохгүй. Бүх үгнүүдийг жижгээр нэрлэ. Олон үгнээс бүрдсэн нэрээр нэрлэх хэрэгтэй бол үгнүүдийг дундуур зураасаар холбох хэрэгтэй. web-design-lecture.html Ихэнх вэб дизайнерууд, вэб програмистууд  вэб хуудсаа нэрлэхдээ үгнүүдийг  доогуур  зураас  ашиглан  холбодог.  Хайлтын  систем хуудасны  нэрлэлтийг  тухайн  хуудасны  талаар  мэдээлэл олж авахдаа ашигладаг бөгөөд доогуур зураасаар холбосон нэрийг нэг үг хэмээн үздэг. web_design_lecture.html= webdesignlecture.html
Таагийн атрибут 31 Таагт атрибут нь тухайн таaг ямар шинж чанартай байхыг хэлж өгдөг.  Атрибутнь нээх таaг дотроо(<> тэмдгийн хооронд) байрладаг ба нэр ба утгаар тодорхойлогдоно.  Бичигдэх хэлбэр: Аттрибутын нэр = “утга” Жишээ: <b title=“Вэб дизайн – Онлайн хичээл”>Вэб дизайн</b> 	title – Тухайн элемент дээгүүр хулгана өнгөрөхөд харагдах текстийг тохируулдаг атрибут.
HTML хувилбарууд 32 Уг хичээлийн туршид HTML –ийн нэг хувилбар болох XHTML-ийг ашиглана.  Яагаад XHTML хувилбар гэж? Ихэнх вэб броузерууд буруу, алдаатай бичигдсэн HTML кодуудыг  зөв дүрсэлж харуулах чадвартай байдаг. Гэвч сүүлийн үед хүмүүс зөвхөн компьютер дээрээс вэб үзэхээс гадна гар утас ашиглан вэб үзэх хандлага ихэссэн. Гар утас зэрэг хязгаарлагдмал нөөц бүхий төхөөрөмж дээр ажиллаж байгаа  вэб броузерууд алдаатай бичигдсэн HTML кодыг зөв болгон хөрвүүлж, дүрсэлж чаддаггүй.  XHTML  бичигдсэн кодыг алдаагүй байхыг шаарддаг нэмэлт шаардлагуудтай байдаг. XHTML - EXtensibleHyperText Markup Language
XHTML  33 XHTML файл нь үндсэн гурван хэсгээс бүрдэнэ. DOCTYPE зарлагаа <head> хэсэг <body> хэсэг
<DOCTYPE> зарлагаа 34 <!DOCTYPE> зарлагаа Тааг биш Хуудасны хамгийн эхэнд бичигдэнэ. DTD буюу Document Type Definition Хуудас HTML-ийн ямар хувилбар ашиглаж бичсэнийг броузерт хэлж өгдөг. XHTML-ийн DTD хувилбарууд XHTML 1.0 Strict Энэ DTD нь HTML бүх элементүүд, тэдгээрийн атрибутуудыг агуулах боловч  ашиглагдахаа больж байгаа зарим таагуудыг агуулдаггүй. Мөн frameset-ийг хориглодог.  XHTML-ийн дүрмүүдийн дагуу бичигдсэн байх ёстой. XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head> хэсэг 35 Head хэсэг буюу <head> тааг дотор тухайн вэб хуудасны талаарх мэдээллүүдийг бичдэг. Эдгээр мэдээлэл нь хэрэглэгчид харагдахгүй.
<head> тааг дотор бичигддэг таагууд 36 <title> - Броузерийн дээд хэсэгт харагдах текст <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> HTML element – Wikipedia, the free encyclopedia </title> </head> </html> Зөвлөмж:  Хайлтын системүүдэд хуудасны гарчиг ашиглагддаг. Иймээс сайтын үйл ажиллагаатай холбоотой  оновчтой үгийг сонгож гарчиг хэсэгт оруулах хэрэгтэй. Байгууллагын нэр Үндсэн үйл ажиллагааны чиглэл Хуудасны гарчиг нь хэрэглэгчдэд тухайн хуудсыг bookmark  хийх,  вэбээр зочилсон түүх(Browser history) харахзэрэгт ашиглагддаг тул вэбийн хуудас бүрийг тухайн хуудастай нь холбоотой мэдээлэл бүхий өөр өөр гарчгаар нэрлэх хэрэгтэй.
Гарчигтай вэб хуудас үүсгэх 37 Дурын текст засварлагч програмыг нээнэ. <html> <head> <title> Вэб дизайн – Онлайн Хичээл </title> </head> </html> гэж бичнэ. Нээсэн файлдаа нэр өгөн, html өргөтгөлтэйгээр хадгална.  Хадгалсан файлаа вэб броузер програм ашиглан нээж харна.
<head> тааг дотор бичигддэг таагууд 38 <link>  Хэд хэдэн зорилгоор ашиглагддаг. faviconбуюу броузерийн address bar хэсэгт байрладаг жижиг хэмжээний icon зураг. <link> таагийн rel, href гэсэн атрибутуудыг ашиглана. rel – оруулж ирж буй файл уг хуудсанд ямар зорилгоор хэрэглэгдэхийг заана. href – оруулж ирж буй файлын байрлал, нэр, төрөл faviconболгон ашиглах гэж байгаа зураг pngэсвэл icon төрөлтэй байна. Бичигдэх хэлбэр: <link rel=“shortcut icon” href=“зургийн-нэр.төрөл”> <link rel=“shortcut icon” href=“image.png”> Зураг, вэб хуудас нэг хавтаст байрлах ёстой. Файлын замтай ажиллах талаар бид дараа, дараагийн хичээлүүдээр  дэлгэрэнгүйүзэх болно.
<head> тааг дотор бичигддэг таагууд 39 <meta> тааг Вэбдоторчухамюуюуагуулагдсаныгмөнхэнүүнийгхийсэн,хаанахадгалагдажбайгаа,хуулиархамгаалагдсанэсэх, ямар хэл дээр бичигдсэнгэхмэтмэдээллийг энэ таагийг ашиглан тодорхойлдог.  <meta> тааг нь дотроо агуулгагүй учир хаагдах тааг тусдаа байхгүй. Иймээс <meta …/> гэж хаана. Ихэнх хайлтын системүүд тухайн хуудасны мэдээллийг авахдаа <meta> таагт бичигдсэн өгөгдлүүдийг ашигладаг.
<meta> таг 40 < metaname = “description”> тааг дотор хуудасны тайлбарыг бичнэ. <meta name = “description”  content = “webiintuhaieronhiitailbariig end bichne”> <metaname = “keywords”> таагдотор хуудсыг хайх түлхүүр үгийг бичнэ. <meta  name = “keywords” content = “tuhainwebteiholbootoiyanzburiinuguudiigtaslalaartusgaarlan end bichne”> < meta > таагдотор ямар тэмдэгт ашиглан бичихээ тодорхойлно. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Вэб хуудсанд кирилл текст агуулагдах бол charset=utf-8 гэж заавал бичих хэрэгтэй.
<body> тааг 41  <body> тааг дотор хуудсанд харагдах агуулгуудыг бичнэ. Өөрөөр хэлбэр вэб хэрэглэгчид харагдах хэсэг энд бичигдэнэ. <body>  таагийн атрибутууд: bgcolor – Вэб хуудасны арын дэвсгэр ямар өнгөтэй байхыг зааж өгнө.Жишээ: bgcolor = “red” background – Хуудасны арын дэвсгэрт зураг оруулж өгч болно.	Зураг байрлаж буй замыг зургийн нэр, өргөтгөлийн хамт бичнэ. 		Жишээ:  background = “c://flower.jpg” text – body дотор бичигдсэн бүх текст ямар өнгөтэй байхыг зааж өгнө. 	Жишээ: text = “yellow”
XHTML 42 HTML болон XHTML-ийн хоорондох ялгаа бага боловч XHTML хувилбар нь илүү нэмэлт зарчмын дагуу таагуудаа бичихийг шаарддаг. Бүх таг, түүний атрибутыг жижиг үсгээр бичих  Нээгдсэн тааг бүр заавал харгалзах хаах тааг бичигдэх ёстой. Таагуудыг нээж, хаасан дараалал зөв байх ёстой. Таагийн атрибутуудын утгыг заавал хашилтанд хийж бичнэ. Бүх элементийг дотроо агуулах нэг үндэс элемент заавал байх ёстой.
XHTML бичих дүрэм№1 43 Бүх таг, түүний атрибутыг жижиг үсгээр бичих  Хэдийгээр HTML таагуудын том, жижиг үсгээр бичсэнийг броузер ялгаагүй үзүүлж чаддаг боловч XHTML ашиглаж байгаа бол заавал жижиг үсгээр бичихийг шаарддаг. Буруу хувилбар <BODY> <Body> Зөв хувилбар <body> <html>
XHTML бичих дүрэм№2 44 Нээгдсэн тааг бүр заавал харгалзах хаах тааг бичигдэх ёстой. HTML –д нээсэн таагийг хаахгүй орхиж бичсэн ч броузер түүний өөрөө зөв харуулах боломжтой байдаг. Мөн HTML-д зарим агуулга бичих шаардлагагүй таагуудад хаах тааг бичихгүй байх боломжтойбайдаг. <img> - Зураг харуулах тааг <br> - Шинэ мөр шилжүүлэх тааг Буруу хувилбар <body> Tекст   -  body таагийг хаалгүй орхисон байна. <br> - brтаагийг хаагаагүй байна. Зөв хувилбар <body>Tekcт</body> <br/>
XHTML бичих дүрэм№3 45 Таагуудыг нээж хаасан дараалал зөв байх ёстой. Хамгийн эхэлж нээгдсэн таг доторх тагуудаасаа сүүлд хаагдах ёстой. Буруу хувилбар <p><b> Ингэж бичих нь буруу</p></b> Зөв хувилбар	 <p><b>Ингэж бичих нь зөв</b></p>
XHTML бичих дүрэм№4 46 Тагийн атрибутуудын утгыг заавал хашилтан(“ ”) дотор бичнэ. HTML-д таагийн зарим атрибутад утга өгөхгүй байхыг зөвшөөрдөг. HTML-д таагийн атрибутын утгыг хашилтанд хийхгүй байж болдог. Буруу хувилбар <td nowrap> </td> -nowrapатрибутад утга олгоогүй байна. <td colspan = 2> </td>- colspanатрибутын утгыг хашилтанд хийгээүй байна. Зөв хувилбар <td nowrap=“nowrap”></td> <td colspan=“2”></td>
XHTML бичих дүрэм№5 47 Бүх элементийг дотроо агуулах нэг үндэс элемент заавал байх ёстой. Бүх элементүүд <html> элементийн дотор байрлана. <html> - Үндэс элемент <html> - Хамгийн түрүүнд нээгдэж, хамгийн сүүлд хаагдана. Жишээ: <html> … … … </html>
XHTML 48 Зөв XHTML хуудас бичиж эхлэхийн тулд бидний бичих хуудас бүрт доорх код заавал байх ёстой.
Текст хэвжүүлэх тагууд <b> - Текстийг тод болгоно. <i> - Текстийг налуу болгоно. <br> - Курсорыг дараагийн мөрлүү шилжүүлнэ. <p> - Шинэ paragraph эхлүүлнэ.Автоматаар таагийн агуулгын эхлэл, төгсгөлд хоосон мөр оруулна. <del> - Текстийг дундуур зураастай болгоно. <bdo> - Текстийн бичигдэх чиглэлийг тодорхойлно. bdoтаагийн атрибут:  	dir = “rtl” – Баруунаас зүүн тийш буюу зөв бичиглэл  dir = “ltr” – Зүүнээс баруун тийш буюу урвуу бичиглэл 	 <blockquote> -  Догол мөр шилжүүлнэ. <pre> - Таганд бичигдсэн байгаа агуулга нь яг бичигдсэн байгаа хэлбэрээрээ броузерт гарна. 49
Гарчиг тодорхойлох <h > таг h таг нь 6 янз байна. h1, h2, h3, h4, h5, h6 	h1 таг нь хамгийн томоор гаргах ба h6 таг нь хамгийн жижгээр гаргана. 50 Гарчиг тодорхойлох таагууд
Тайлбар бичих 51 Бичсэн кодыг ойлгомжтой болгох үүднээс тайлбар бичдэг. Тайлбар нь хэрэглэгчийн дэлгэцэнд гарахгүй бөгөөд зөвхөн вэбийг бүтээгчид кодыг ойлгомжтой болгодог. Бичигдэх хэлбэр <!--Энэ бол тайлбар --> <html> 		<head> 			<title>Хуудасны гарчиг</title> 		</head> 		<body> <!– Хуудасны агуулгыг p тааг дотор бичлээ. --> 			<p>Хуудасны агуулга</p> 		</body> 	</html>
Вэбийн харагдах байдлыг төлөвлөх 52 Вэб сайтын дизайныг  эхлээд компьютер дээр биш цаасан дээр гаргаж үз. Богино хугацаанд хэд хэдэн хувилбар гаргаж үзэн харьцуулж болно. Хэт нарийн төлөвлөх гэсний хэрэггүй. Аль болох богино хугацаанд олон хувилбар гаргах гээд үз. Дээрх алхмын дараа  хувилбар бүрээс тохиромжтой, боломжийн гэж үзсэн хэсгүүдээ нийлүүлэн, компьютер дээр дизайныг гаргаж эхэл.
Танилцуулга сайт хийх хэсэг 53
Танилцуулга сайт хийх хэсэг 54 Хичээлийн явцад үзсэн онолын мэдлэгүүдийг ашиглан бид хичээл бүрийн төгсгөл танилцуулга вэб сайтыг хөгжүүлж  явах юм. Хийх сайт: Дээд Сургуулийн Танилцуулга Сайт
Вэбийн агуулгыг гаргах 55 Сургалтын байгууллага бидний хийх вэбээр зочлогсод нь  Сургуулийн ажилтнууд,  Оюутан,  Эцэг эхчүүд,   Сургуульд элсэхээр сонирхсон хүмүүс,  Сургуулийн тухай мэдээлэл авах гэж буй хүмүүс    байх юм. Иймээс сайт эдгээр хэрэглэгчид зориулсан мэдээллүүдийг агуулах хэрэгтэй. Сургуулийн ажилтнууд – Дүрэм журам, Мэдээ Оюутан – Дүрэм журам, Мэдээ, Оюутанд зориулсан үйлчилгээнүүд Эцэг эхчүүд – Мэдээ, Танилцуулга Элсэхээр сонирхсон хүмүүс – Сургуулийн танилцуулга, Элсэлтийн талаарх мэдээлэл, элсэлтийн маягт , Тэнхимүүд Мэдээлэл авах гэж буй  хүмүүс – Танилцуулга, Тэнхимүүд Бүгд хэрэглэгч – Холбоо барих
Вэбийн дизайныг төлөвлөх 56
Вэбийн дизайныг төлөвлөх 57
Вэбийн дизайныг төлөвлөх 58
59 Даалгавар, бие даалтаа хийж, сорилын  асуултуудаар өөрийгөө  шалгаарай. 			       Танд амжилт хүсье  

Weitere ähnliche Inhalte

Was ist angesagt?

компьютерийн програм хангамж
компьютерийн програм хангамжкомпьютерийн програм хангамж
компьютерийн програм хангамжtseegii6
 
U.cs101 алгоритм программчлал-1(1)
U.cs101   алгоритм программчлал-1(1)U.cs101   алгоритм программчлал-1(1)
U.cs101 алгоритм программчлал-1(1)Badral Khurelbaatar
 
ажлын байрны тодорхойлолт, шинжилгээ
ажлын байрны тодорхойлолт, шинжилгээажлын байрны тодорхойлолт, шинжилгээ
ажлын байрны тодорхойлолт, шинжилгээBuka King
 
Ээлжит хичээлийн хөтөлбөрүүд 9-р анги мэдээлэлзүй
Ээлжит хичээлийн хөтөлбөрүүд 9-р анги мэдээлэлзүйЭэлжит хичээлийн хөтөлбөрүүд 9-р анги мэдээлэлзүй
Ээлжит хичээлийн хөтөлбөрүүд 9-р анги мэдээлэлзүйroza_toshke
 
U.IT101-Лекц-7
U.IT101-Лекц-7U.IT101-Лекц-7
U.IT101-Лекц-7taivna
 
Компьютерийн сүлжээ
Компьютерийн сүлжээКомпьютерийн сүлжээ
Компьютерийн сүлжээMunkhtsetseg Myagmar
 
01_6-р анги (Мэдээ, Мэдээлэл түүний шинж чанар)
01_6-р анги (Мэдээ, Мэдээлэл түүний шинж чанар)01_6-р анги (Мэдээ, Мэдээлэл түүний шинж чанар)
01_6-р анги (Мэдээ, Мэдээлэл түүний шинж чанар)Dagvarichin Amaraa
 
Мэдээллийн аюулгүй байдлын эрх зүйн зохицуулалт
Мэдээллийн аюулгүй байдлын эрх зүйн зохицуулалтМэдээллийн аюулгүй байдлын эрх зүйн зохицуулалт
Мэдээллийн аюулгүй байдлын эрх зүйн зохицуулалтGalbaatar Lkhagvasuren
 
Салаалсан алгоритмын бодлогууд
Салаалсан алгоритмын бодлогуудСалаалсан алгоритмын бодлогууд
Салаалсан алгоритмын бодлогуудБаярсайхан Л
 
U.cs101 алгоритм программчлал-10
U.cs101   алгоритм программчлал-10U.cs101   алгоритм программчлал-10
U.cs101 алгоритм программчлал-10Badral Khurelbaatar
 

Was ist angesagt? (20)

It101 10
It101 10It101 10
It101 10
 
хичээл № 5 powerpoint
хичээл № 5 powerpointхичээл № 5 powerpoint
хичээл № 5 powerpoint
 
Лекц №4
Лекц №4Лекц №4
Лекц №4
 
компьютерийн програм хангамж
компьютерийн програм хангамжкомпьютерийн програм хангамж
компьютерийн програм хангамж
 
U.cs101 алгоритм программчлал-1(1)
U.cs101   алгоритм программчлал-1(1)U.cs101   алгоритм программчлал-1(1)
U.cs101 алгоритм программчлал-1(1)
 
ажлын байрны тодорхойлолт, шинжилгээ
ажлын байрны тодорхойлолт, шинжилгээажлын байрны тодорхойлолт, шинжилгээ
ажлын байрны тодорхойлолт, шинжилгээ
 
It101 lec6 10.06
It101 lec6 10.06It101 lec6 10.06
It101 lec6 10.06
 
Ээлжит хичээлийн хөтөлбөрүүд 9-р анги мэдээлэлзүй
Ээлжит хичээлийн хөтөлбөрүүд 9-р анги мэдээлэлзүйЭэлжит хичээлийн хөтөлбөрүүд 9-р анги мэдээлэлзүй
Ээлжит хичээлийн хөтөлбөрүүд 9-р анги мэдээлэлзүй
 
Adobe photoshop cs
Adobe photoshop csAdobe photoshop cs
Adobe photoshop cs
 
Dadlagiin tailan 2018 on Computer
Dadlagiin tailan 2018 on Computer Dadlagiin tailan 2018 on Computer
Dadlagiin tailan 2018 on Computer
 
U.IT101-Лекц-7
U.IT101-Лекц-7U.IT101-Лекц-7
U.IT101-Лекц-7
 
Компьютерийн сүлжээ
Компьютерийн сүлжээКомпьютерийн сүлжээ
Компьютерийн сүлжээ
 
01_6-р анги (Мэдээ, Мэдээлэл түүний шинж чанар)
01_6-р анги (Мэдээ, Мэдээлэл түүний шинж чанар)01_6-р анги (Мэдээ, Мэдээлэл түүний шинж чанар)
01_6-р анги (Мэдээ, Мэдээлэл түүний шинж чанар)
 
Dadlagiin tailan bichih zaawapchilgaa
Dadlagiin tailan bichih zaawapchilgaaDadlagiin tailan bichih zaawapchilgaa
Dadlagiin tailan bichih zaawapchilgaa
 
10-LESSON-01-2021.09
10-LESSON-01-2021.0910-LESSON-01-2021.09
10-LESSON-01-2021.09
 
CS203 Лекц01 Prefeace
CS203 Лекц01  PrefeaceCS203 Лекц01  Prefeace
CS203 Лекц01 Prefeace
 
Мэдээллийн аюулгүй байдлын эрх зүйн зохицуулалт
Мэдээллийн аюулгүй байдлын эрх зүйн зохицуулалтМэдээллийн аюулгүй байдлын эрх зүйн зохицуулалт
Мэдээллийн аюулгүй байдлын эрх зүйн зохицуулалт
 
Салаалсан алгоритмын бодлогууд
Салаалсан алгоритмын бодлогуудСалаалсан алгоритмын бодлогууд
Салаалсан алгоритмын бодлогууд
 
U.cs101 алгоритм программчлал-10
U.cs101   алгоритм программчлал-10U.cs101   алгоритм программчлал-10
U.cs101 алгоритм программчлал-10
 
Lecture 3
Lecture 3Lecture 3
Lecture 3
 

Ähnlich wie вэб дизайн - хичээл 1

Ähnlich wie вэб дизайн - хичээл 1 (20)

Web intro
Web introWeb intro
Web intro
 
Web intro (1)
Web intro (1)Web intro (1)
Web intro (1)
 
Html хэлний хичээл
Html хэлний хичээлHtml хэлний хичээл
Html хэлний хичээл
 
Hicheel1(90)minit
Hicheel1(90)minitHicheel1(90)minit
Hicheel1(90)minit
 
surgalt
surgaltsurgalt
surgalt
 
Html гэж юу вэ
Html гэж юу вэHtml гэж юу вэ
Html гэж юу вэ
 
Lekts3
Lekts3Lekts3
Lekts3
 
Html лекц 1
Html лекц 1Html лекц 1
Html лекц 1
 
Html лекц 1
Html лекц 1Html лекц 1
Html лекц 1
 
Html 1
Html 1Html 1
Html 1
 
Html, css, java script
Html, css, java scriptHtml, css, java script
Html, css, java script
 
Lecture 1. introduction
Lecture 1. introductionLecture 1. introduction
Lecture 1. introduction
 
Lecture3
Lecture3Lecture3
Lecture3
 
Html кодчлол гэж юу вэ
Html кодчлол гэж юу вэHtml кодчлол гэж юу вэ
Html кодчлол гэж юу вэ
 
DW test
DW testDW test
DW test
 
Веб технологи
Веб технологиВеб технологи
Веб технологи
 
Drawing
DrawingDrawing
Drawing
 
Web disian
Web disianWeb disian
Web disian
 
URL хаяг гэж юу вэ?
URL хаяг гэж юу вэ?URL хаяг гэж юу вэ?
URL хаяг гэж юу вэ?
 
Web design -_lecture_1
Web design -_lecture_1Web design -_lecture_1
Web design -_lecture_1
 

вэб дизайн - хичээл 1

  • 2. Вэб дизайн 2 Зорилго Суралцагчдад вэбсайтын тухай ерөнхий ойлголт өгөх, HTML, CSS, JavaScript-ийн талаарх мэдлэг олгох Олгох ур чадвар Вэб хуудасны дизайн гаргах Статик вэб хуудас хийх Энэ хичээл хэнд зориулагдсан бэ? Вэб дизайн сонирхдог, вэб хөгжүүлэгч болохыг зорьсон хүн бүхэнд зориулагдсан. Ямар нэг програмчлалын мэдлэг шаардахгүй
  • 3. Хичээл явагдах хэлбэр 3 “Вэб Дизайн” цахим сургалт 7 удаагийн хичээлээс бүрдэнэ. Хичээл бүр Онолын мэдлэг олгох хэсэг Онолын хэсгийг жишээгээр тайлбарлаж харуулах хэсэг Танилцуулга вэб сайт хийх хэсэг гэсэн хэсгүүдээс бүрдэнэ.
  • 11. Хичээл №1 - Агуулга 11 Интернэт гэж юу вэ? Вэб гэж юу вэ? Үндсэн ойлголт Вэб хэрхэн ажилладаг вэ? Вэб сервер, Вэб броузер HTML Тааг, түүнийг бичих Үндсэн таагууд/html, head, meta, body/ Атрибутууд Анхны вэб хуудас бичих
  • 12. Вэб сайт хэрхэн ажилладаг вэ? 12 http://www.google.com Domain Name System 74.125.224.146 Интернэт Web Server
  • 13. Интернэтийн түүх 13 1969 онд АНУ-ын Хамгаалалтын Сайжруулсан Судалгааны Төслийн Агентлаг нь шинэ сүлжээг үүсгэн хөгжүүлэх даалгавар авчээ. Зорилго нь цөмийн довтолгоонд тэсэж үлдэх сүлжээг бэлтгэх. Гол нь харилцан хамааралгүй ямар ч төвлөрсөн удирдлагагүй үйл ажиллагааг үүсгэх асуудал байлаа. Судалгаагаар дээрх шаардлагыг хангасан найдвартай протоколыг гаргасан бөгөөд энэ нь одоогийн TCP/IP протоколын бүрдэл юм. TCP/IP нь бусад протоколуудаас олон талаараа давуу байв. Тухайлбал TCP/IP нь сүлжээний багахан нөөцийг шаарддаг, бусад ямар ч протоколоос хямдхан тусч байлаа. Иймээс ч тун хурдан тархжээ. Протокол гэж юу вэ? Протокол гэдэг нь компьютерууд хоорондоо ярилцах хэл гэж ойлгож болно. Компьютерууд хоорондоо мэдээлэл солилцохын тулд протоколыг ашигладаг. 1980-аад оны үед TCP/IP протокол гарч өөр өөр төрлийн систем бүхий компьютерууд хоорондоо холбогдох боломжтой болсноор интернэтийн хөгжил хүчээ авч эхэлсэн. Мөн энэ үеэр WWW-ийн эцэг гэгддэг Tim Berners Lee HYPERTEXT MARKUP LANGUAGE, анхны вэб броузер, вэб сервер програмыг зохиосон.
  • 14. Интернэт 11.07.23 14 Интернэт гэдэг бол сүлжээгээр холбогдсон компьютеруудын сүлжээ Интернэтийг нүдээр харвал
  • 16. Интернет 16 Интернэтэд холбогдсон компьютер бүхэн IP address гэж нэрлэгддэг дахин давтагдахгүй хаягтай байдаг. IP хаягийг компьютер уншиж, ойлгоход хялбар. Уг хаягийг л ашиглаж TCP/IP протокол дамжуулж буй мэдээллээ хэрэгтэй газар нь зөв хүргэх боломжтой болдог. IP хаягийн бичигдэх хэлбэр нь: Тоо.Тоо.Тоо.Тоо 0<=Too<=255
  • 17. Вэб сервер гэж юу вэ? 17 Интернэт дэх вэб хуудсуудыг хадгалах өөр дээр нь байгаа вэбийг үзэхийг хүссэн хvсэлтэд харгалзах вэб хуудсыг боловсруулан, хүсэлтийн хариултыг интернэтээр илгээж байх үүрэгтэй өндөр хvчин чадал бүхий тусгай компьютерууд юм. Вэб сервер дээр төрөл бүрийн сервер програмууд ажиллаж дээрх үүргүүдийг гүйцэтгэж байдаг.
  • 18. Domain Name System 18 Энэхүү систем нь тухайн веб хаягийг/www.google.com/ дахин давтагдашгүй IP хаяг /74.125.224.146/ болгон хөрвүүлдэг. Вэб хаяг, түүнд харгалзах IP хаягууд Domain Name Server дээр бүртгэгдсэн байна. Өөрөөр хэлвэл таны вэб броузераас дуудсан тухайн веб сайтын хаягийг цааш дамжуулахдаа тэр нэрээр дамжуулалгүй IP хаяг болгон хөрвүүлээд дамжуулдаг байна. Домайн нэр - Хүний уншиж цээжлэхэд хялбар нэр IP хаяг - Компьютерийн ойлгоход хялбар нэр
  • 19. Вэб броузер гэж юу вэ? 19 Хэрэглэгчийн компьютер/бусад төхөөрөмжүүд/ дээр байрлах бөгөөд вэбүзэхэд ашиглагддаг програм Хэрэглэгчийг ямар нэг вэбрүү орох товчлуур(линк) дарах үед вэб броузер нь тухайн вэбийг үзэх хүсэлтийг илгээдэг. Вэб броузер хэрэглэгчдэд вэб дээрх текст, зураг, видео, хөгжим, тоглоом зэргийг дүрслэн харуулдаг. Анхны вэб броузер 1991 онд WorldWideWebнэртэйгээр гарч байжээ.
  • 20. Вэб броузер 20 Олон янзын вэб броузер байдгаас нэг вэб хуудас өөр өөр броузер дээр харагдах байдал харилцан адилгүй байдаг.
  • 22. Анхны вэб 22 Анхны броузерууд энгийн текст л дүрсэлж харуулах боломжтой байсан.
  • 23. Вэб гэж юу вэ? 23 Вэб гэдэг бол тодорхой нэг сэдвийн дагуу хийгдсэн, вэб сервер дээрх байрлах холбоотой вэб хуудсууд юм. Вэб хуудас гэдэг нь ердийн текст файл Вэб хуудсан дээрх агуулгыг дэлгэцийн хаана ямар форматтайгаар (өнгө, хэмжээ, үсгийн фонт г.м) харагдуулахыг зааж өгсөн дүрмүүд бүхий файл. Уг дүрмийг HTML, CSS, JavaScript ашиглан зааж өгдөг.
  • 24. Вэб гэж юу вэ? 24 Вэбийн агуулгыг шинэчлэгдэх байдлаар нь статик, динамик гэж ангилдаг. Статик сайт: Ийм сайт нь ихэвчлэн HTML ашиглан бичигдсэн байдаг ба сайтыг үзэж буй бүх хэрэглэгчдэд адилхан мэдээлэл харуулдаг. Зөвхөн сайтын зохиогч л сайт дээрх мэдээллийг өөрчлөх боломжтой байна. Динамик сайт: Вэб хуудсан дахь агуулга нь автоматаар эсвэл тодорхой хугацааны давтамжтайгаар өөрчлөгдөж байдаг. Зохиогчийн урьдчилан бэлдсэн формат бүхий хуудсан дээр өгөгдлийн сангаас уншин өгөгдлөө сайт өөрөө байрлуулж байдаг хуудас гэж өөрөөр хэлж болно.
  • 26. HTML 26 HTML-ийн тухай Тааг гэж юу вэ? Таагуудын үндсэн шинж, бичигдэх дүрэм XHTML, түүний онцлог Үндсэн таагууд Текст хэвжүүлэх таагууд Гарчиг тодорхойлохтааг Тайлбар бичих
  • 27. HTML-ийн тухай 27 Вэб хуудас бүр мэдээллээ хэрхэн харуулах зааврыг агуулдаг ба вэб броузер хэрэгсэл эдгээр зааврыг уншиж харуулна. Хуудас харуулах зааврыг HTML гэж нэрлэгдэх кодчлолоор бичдэг. HTML гэдэг нь вэб бүтээхэд зориулагдсан, мэдээллийн харагдах байдлыг тохируулахад хэрэглэгддэг хэлюм. HTML – Hyper Text Markup Language HTML файл нь html юмуу htmөргөтгөлтэй байна.
  • 28. HTML тааг 28 HTML нь таагуудаас бүрддэг. Тааг гэдэг нь текст болоод бусад агуулгуудыг броузерт хэрхэн харагдуулахыг хэлдэг заавар юм. Тааг нь их, багын(< >) тэмдгийн хооронд бичигддэг. Вэб хуудасны HTML кодыг харахдаа хулганы баруун товчийг дарж View Page Source гэсэн сонголтыг хийнэ. Нээх, хаах таагууд гэж байна. <b> - Нээх тааг </b> - Хаах тааг Таагт мөн агуулга гэсэн ойлголт байдаг. Таагийн агуулга нь нээх, хаах таaгийн хооронд бичигддэг. <b>Агуулга</b>
  • 29. Вэб хуудас үүсгэх 29 Дурын текст засварлагч програмыг нээнэ. <b>Энэ текст тодоор харагдана</b> - гэжфайл дотроо бичнэ. Нээсэн файлдаа нэр өгөн, html өргөтгөлтэйгээр хадгална. Хадгалсан файлаа вэб броузер програм ашиглан нээж харна.
  • 30. Вэб хуудас нэрлэх 30 Зөвлөмж Үүсгэсэн вэб хуудсуудаа нэрлэхдээ аль болох ойлгомжтой нэрээр нэрлэх хэрэгтэй. Олон үгнээс бүрдсэн нэрээр нэрлэх бол үгнүүд хооронд хоосон зай авч болохгүй. Бүх үгнүүдийг жижгээр нэрлэ. Олон үгнээс бүрдсэн нэрээр нэрлэх хэрэгтэй бол үгнүүдийг дундуур зураасаар холбох хэрэгтэй. web-design-lecture.html Ихэнх вэб дизайнерууд, вэб програмистууд вэб хуудсаа нэрлэхдээ үгнүүдийг доогуур зураас ашиглан холбодог. Хайлтын систем хуудасны нэрлэлтийг тухайн хуудасны талаар мэдээлэл олж авахдаа ашигладаг бөгөөд доогуур зураасаар холбосон нэрийг нэг үг хэмээн үздэг. web_design_lecture.html= webdesignlecture.html
  • 31. Таагийн атрибут 31 Таагт атрибут нь тухайн таaг ямар шинж чанартай байхыг хэлж өгдөг. Атрибутнь нээх таaг дотроо(<> тэмдгийн хооронд) байрладаг ба нэр ба утгаар тодорхойлогдоно. Бичигдэх хэлбэр: Аттрибутын нэр = “утга” Жишээ: <b title=“Вэб дизайн – Онлайн хичээл”>Вэб дизайн</b> title – Тухайн элемент дээгүүр хулгана өнгөрөхөд харагдах текстийг тохируулдаг атрибут.
  • 32. HTML хувилбарууд 32 Уг хичээлийн туршид HTML –ийн нэг хувилбар болох XHTML-ийг ашиглана. Яагаад XHTML хувилбар гэж? Ихэнх вэб броузерууд буруу, алдаатай бичигдсэн HTML кодуудыг зөв дүрсэлж харуулах чадвартай байдаг. Гэвч сүүлийн үед хүмүүс зөвхөн компьютер дээрээс вэб үзэхээс гадна гар утас ашиглан вэб үзэх хандлага ихэссэн. Гар утас зэрэг хязгаарлагдмал нөөц бүхий төхөөрөмж дээр ажиллаж байгаа вэб броузерууд алдаатай бичигдсэн HTML кодыг зөв болгон хөрвүүлж, дүрсэлж чаддаггүй. XHTML бичигдсэн кодыг алдаагүй байхыг шаарддаг нэмэлт шаардлагуудтай байдаг. XHTML - EXtensibleHyperText Markup Language
  • 33. XHTML 33 XHTML файл нь үндсэн гурван хэсгээс бүрдэнэ. DOCTYPE зарлагаа <head> хэсэг <body> хэсэг
  • 34. <DOCTYPE> зарлагаа 34 <!DOCTYPE> зарлагаа Тааг биш Хуудасны хамгийн эхэнд бичигдэнэ. DTD буюу Document Type Definition Хуудас HTML-ийн ямар хувилбар ашиглаж бичсэнийг броузерт хэлж өгдөг. XHTML-ийн DTD хувилбарууд XHTML 1.0 Strict Энэ DTD нь HTML бүх элементүүд, тэдгээрийн атрибутуудыг агуулах боловч ашиглагдахаа больж байгаа зарим таагуудыг агуулдаггүй. Мөн frameset-ийг хориглодог. XHTML-ийн дүрмүүдийн дагуу бичигдсэн байх ёстой. XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 35. <head> хэсэг 35 Head хэсэг буюу <head> тааг дотор тухайн вэб хуудасны талаарх мэдээллүүдийг бичдэг. Эдгээр мэдээлэл нь хэрэглэгчид харагдахгүй.
  • 36. <head> тааг дотор бичигддэг таагууд 36 <title> - Броузерийн дээд хэсэгт харагдах текст <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> HTML element – Wikipedia, the free encyclopedia </title> </head> </html> Зөвлөмж: Хайлтын системүүдэд хуудасны гарчиг ашиглагддаг. Иймээс сайтын үйл ажиллагаатай холбоотой оновчтой үгийг сонгож гарчиг хэсэгт оруулах хэрэгтэй. Байгууллагын нэр Үндсэн үйл ажиллагааны чиглэл Хуудасны гарчиг нь хэрэглэгчдэд тухайн хуудсыг bookmark хийх, вэбээр зочилсон түүх(Browser history) харахзэрэгт ашиглагддаг тул вэбийн хуудас бүрийг тухайн хуудастай нь холбоотой мэдээлэл бүхий өөр өөр гарчгаар нэрлэх хэрэгтэй.
  • 37. Гарчигтай вэб хуудас үүсгэх 37 Дурын текст засварлагч програмыг нээнэ. <html> <head> <title> Вэб дизайн – Онлайн Хичээл </title> </head> </html> гэж бичнэ. Нээсэн файлдаа нэр өгөн, html өргөтгөлтэйгээр хадгална. Хадгалсан файлаа вэб броузер програм ашиглан нээж харна.
  • 38. <head> тааг дотор бичигддэг таагууд 38 <link> Хэд хэдэн зорилгоор ашиглагддаг. faviconбуюу броузерийн address bar хэсэгт байрладаг жижиг хэмжээний icon зураг. <link> таагийн rel, href гэсэн атрибутуудыг ашиглана. rel – оруулж ирж буй файл уг хуудсанд ямар зорилгоор хэрэглэгдэхийг заана. href – оруулж ирж буй файлын байрлал, нэр, төрөл faviconболгон ашиглах гэж байгаа зураг pngэсвэл icon төрөлтэй байна. Бичигдэх хэлбэр: <link rel=“shortcut icon” href=“зургийн-нэр.төрөл”> <link rel=“shortcut icon” href=“image.png”> Зураг, вэб хуудас нэг хавтаст байрлах ёстой. Файлын замтай ажиллах талаар бид дараа, дараагийн хичээлүүдээр дэлгэрэнгүйүзэх болно.
  • 39. <head> тааг дотор бичигддэг таагууд 39 <meta> тааг Вэбдоторчухамюуюуагуулагдсаныгмөнхэнүүнийгхийсэн,хаанахадгалагдажбайгаа,хуулиархамгаалагдсанэсэх, ямар хэл дээр бичигдсэнгэхмэтмэдээллийг энэ таагийг ашиглан тодорхойлдог. <meta> тааг нь дотроо агуулгагүй учир хаагдах тааг тусдаа байхгүй. Иймээс <meta …/> гэж хаана. Ихэнх хайлтын системүүд тухайн хуудасны мэдээллийг авахдаа <meta> таагт бичигдсэн өгөгдлүүдийг ашигладаг.
  • 40. <meta> таг 40 < metaname = “description”> тааг дотор хуудасны тайлбарыг бичнэ. <meta name = “description” content = “webiintuhaieronhiitailbariig end bichne”> <metaname = “keywords”> таагдотор хуудсыг хайх түлхүүр үгийг бичнэ. <meta name = “keywords” content = “tuhainwebteiholbootoiyanzburiinuguudiigtaslalaartusgaarlan end bichne”> < meta > таагдотор ямар тэмдэгт ашиглан бичихээ тодорхойлно. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Вэб хуудсанд кирилл текст агуулагдах бол charset=utf-8 гэж заавал бичих хэрэгтэй.
  • 41. <body> тааг 41 <body> тааг дотор хуудсанд харагдах агуулгуудыг бичнэ. Өөрөөр хэлбэр вэб хэрэглэгчид харагдах хэсэг энд бичигдэнэ. <body> таагийн атрибутууд: bgcolor – Вэб хуудасны арын дэвсгэр ямар өнгөтэй байхыг зааж өгнө.Жишээ: bgcolor = “red” background – Хуудасны арын дэвсгэрт зураг оруулж өгч болно. Зураг байрлаж буй замыг зургийн нэр, өргөтгөлийн хамт бичнэ. Жишээ: background = “c://flower.jpg” text – body дотор бичигдсэн бүх текст ямар өнгөтэй байхыг зааж өгнө. Жишээ: text = “yellow”
  • 42. XHTML 42 HTML болон XHTML-ийн хоорондох ялгаа бага боловч XHTML хувилбар нь илүү нэмэлт зарчмын дагуу таагуудаа бичихийг шаарддаг. Бүх таг, түүний атрибутыг жижиг үсгээр бичих Нээгдсэн тааг бүр заавал харгалзах хаах тааг бичигдэх ёстой. Таагуудыг нээж, хаасан дараалал зөв байх ёстой. Таагийн атрибутуудын утгыг заавал хашилтанд хийж бичнэ. Бүх элементийг дотроо агуулах нэг үндэс элемент заавал байх ёстой.
  • 43. XHTML бичих дүрэм№1 43 Бүх таг, түүний атрибутыг жижиг үсгээр бичих Хэдийгээр HTML таагуудын том, жижиг үсгээр бичсэнийг броузер ялгаагүй үзүүлж чаддаг боловч XHTML ашиглаж байгаа бол заавал жижиг үсгээр бичихийг шаарддаг. Буруу хувилбар <BODY> <Body> Зөв хувилбар <body> <html>
  • 44. XHTML бичих дүрэм№2 44 Нээгдсэн тааг бүр заавал харгалзах хаах тааг бичигдэх ёстой. HTML –д нээсэн таагийг хаахгүй орхиж бичсэн ч броузер түүний өөрөө зөв харуулах боломжтой байдаг. Мөн HTML-д зарим агуулга бичих шаардлагагүй таагуудад хаах тааг бичихгүй байх боломжтойбайдаг. <img> - Зураг харуулах тааг <br> - Шинэ мөр шилжүүлэх тааг Буруу хувилбар <body> Tекст - body таагийг хаалгүй орхисон байна. <br> - brтаагийг хаагаагүй байна. Зөв хувилбар <body>Tekcт</body> <br/>
  • 45. XHTML бичих дүрэм№3 45 Таагуудыг нээж хаасан дараалал зөв байх ёстой. Хамгийн эхэлж нээгдсэн таг доторх тагуудаасаа сүүлд хаагдах ёстой. Буруу хувилбар <p><b> Ингэж бичих нь буруу</p></b> Зөв хувилбар <p><b>Ингэж бичих нь зөв</b></p>
  • 46. XHTML бичих дүрэм№4 46 Тагийн атрибутуудын утгыг заавал хашилтан(“ ”) дотор бичнэ. HTML-д таагийн зарим атрибутад утга өгөхгүй байхыг зөвшөөрдөг. HTML-д таагийн атрибутын утгыг хашилтанд хийхгүй байж болдог. Буруу хувилбар <td nowrap> </td> -nowrapатрибутад утга олгоогүй байна. <td colspan = 2> </td>- colspanатрибутын утгыг хашилтанд хийгээүй байна. Зөв хувилбар <td nowrap=“nowrap”></td> <td colspan=“2”></td>
  • 47. XHTML бичих дүрэм№5 47 Бүх элементийг дотроо агуулах нэг үндэс элемент заавал байх ёстой. Бүх элементүүд <html> элементийн дотор байрлана. <html> - Үндэс элемент <html> - Хамгийн түрүүнд нээгдэж, хамгийн сүүлд хаагдана. Жишээ: <html> … … … </html>
  • 48. XHTML 48 Зөв XHTML хуудас бичиж эхлэхийн тулд бидний бичих хуудас бүрт доорх код заавал байх ёстой.
  • 49. Текст хэвжүүлэх тагууд <b> - Текстийг тод болгоно. <i> - Текстийг налуу болгоно. <br> - Курсорыг дараагийн мөрлүү шилжүүлнэ. <p> - Шинэ paragraph эхлүүлнэ.Автоматаар таагийн агуулгын эхлэл, төгсгөлд хоосон мөр оруулна. <del> - Текстийг дундуур зураастай болгоно. <bdo> - Текстийн бичигдэх чиглэлийг тодорхойлно. bdoтаагийн атрибут: dir = “rtl” – Баруунаас зүүн тийш буюу зөв бичиглэл dir = “ltr” – Зүүнээс баруун тийш буюу урвуу бичиглэл <blockquote> - Догол мөр шилжүүлнэ. <pre> - Таганд бичигдсэн байгаа агуулга нь яг бичигдсэн байгаа хэлбэрээрээ броузерт гарна. 49
  • 50. Гарчиг тодорхойлох <h > таг h таг нь 6 янз байна. h1, h2, h3, h4, h5, h6 h1 таг нь хамгийн томоор гаргах ба h6 таг нь хамгийн жижгээр гаргана. 50 Гарчиг тодорхойлох таагууд
  • 51. Тайлбар бичих 51 Бичсэн кодыг ойлгомжтой болгох үүднээс тайлбар бичдэг. Тайлбар нь хэрэглэгчийн дэлгэцэнд гарахгүй бөгөөд зөвхөн вэбийг бүтээгчид кодыг ойлгомжтой болгодог. Бичигдэх хэлбэр <!--Энэ бол тайлбар --> <html> <head> <title>Хуудасны гарчиг</title> </head> <body> <!– Хуудасны агуулгыг p тааг дотор бичлээ. --> <p>Хуудасны агуулга</p> </body> </html>
  • 52. Вэбийн харагдах байдлыг төлөвлөх 52 Вэб сайтын дизайныг эхлээд компьютер дээр биш цаасан дээр гаргаж үз. Богино хугацаанд хэд хэдэн хувилбар гаргаж үзэн харьцуулж болно. Хэт нарийн төлөвлөх гэсний хэрэггүй. Аль болох богино хугацаанд олон хувилбар гаргах гээд үз. Дээрх алхмын дараа хувилбар бүрээс тохиромжтой, боломжийн гэж үзсэн хэсгүүдээ нийлүүлэн, компьютер дээр дизайныг гаргаж эхэл.
  • 54. Танилцуулга сайт хийх хэсэг 54 Хичээлийн явцад үзсэн онолын мэдлэгүүдийг ашиглан бид хичээл бүрийн төгсгөл танилцуулга вэб сайтыг хөгжүүлж явах юм. Хийх сайт: Дээд Сургуулийн Танилцуулга Сайт
  • 55. Вэбийн агуулгыг гаргах 55 Сургалтын байгууллага бидний хийх вэбээр зочлогсод нь Сургуулийн ажилтнууд, Оюутан, Эцэг эхчүүд, Сургуульд элсэхээр сонирхсон хүмүүс, Сургуулийн тухай мэдээлэл авах гэж буй хүмүүс байх юм. Иймээс сайт эдгээр хэрэглэгчид зориулсан мэдээллүүдийг агуулах хэрэгтэй. Сургуулийн ажилтнууд – Дүрэм журам, Мэдээ Оюутан – Дүрэм журам, Мэдээ, Оюутанд зориулсан үйлчилгээнүүд Эцэг эхчүүд – Мэдээ, Танилцуулга Элсэхээр сонирхсон хүмүүс – Сургуулийн танилцуулга, Элсэлтийн талаарх мэдээлэл, элсэлтийн маягт , Тэнхимүүд Мэдээлэл авах гэж буй хүмүүс – Танилцуулга, Тэнхимүүд Бүгд хэрэглэгч – Холбоо барих
  • 59. 59 Даалгавар, бие даалтаа хийж, сорилын асуултуудаар өөрийгөө шалгаарай. Танд амжилт хүсье 

Hinweis der Redaktion

  1. Зорилго Олгох ур чадвар Хичээл хэрхэн явагдах Хичээлийн хөтөлбөр Хэнд зориулагдсан бэХийх танилцуулга вэбний дизайн ерөнхий дүр зураг, мэдээлэл байгаа зэргийг үзүүлэх
  2. Вэб хэрхэн ажилладаг талаар ойлгомжтой байлгах үүднээс зургаас үзүүльеТөгсгөлВэбийн дизайн гаргах тухай суралцаж эхлэхээсээ өмнө эхлээд эдгээр интернэт, вэб броузер, домайн нэйм систем, вэб броузер, вэб хуудас гэж юу болох тухай ойлголт авцгаая
  3. ªºðººð õýëáýë 1 ýñâýë 10 ,100 ,1000 ìàøèíóñòãàãäñàí ÷ ñ¿ëæýýá¿òýí ¿ëäýõáîëîìæèéãîëãîх áàéëàà. Түүний төсөл анхандаа өөрийн судалгааны ажлыг өөртөө болон бусад хамтран ажиллагсаддаа ашиглахад хялбар байлгах үүднээс тухайн үгэн дээр дараад л тухайн үгтэй холбоотой мэдээллийг авах боломжтой байлгах зорилгоор бүтээгджээ.
  4. Хэрвээ та анзаарсан бол холбогдсон үзүүрүүд буюу компьютеруудыг Тоо.Тоо.Тоо.Тоо гэсэн форматтайгаар нэрлэсэн байсан.
  5. Вэбүүдийг харуулахYahoo.comAmazon.comYoutube.com
  6. Хуудасныsource code харахYamarneghuudasnii source code-g haruulahhttp://mn.wikipedia.org/
  7. Хуудасны тайтле-д өөрийн сайтын үйл ажиллагаатай холбоотой текстийг тавьж өгдөг.
  8. Вэб хуудасны гарчгийг зөв сонгох нь чухал ач холбогдолтой.Гарчиг бүхий хуудас бичиж харуулна.Title бүхий хуудас үүсгэж ажиллуулах
  9. Жишээ үзүүлэх – Body тааг бүхий