Your SlideShare is downloading. ×
Lecture 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lecture 1

1,754
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,754
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CS212 –Веб зохиомжийн үндэс Багш: Б. Тулга
  • 2. Лекц №1
    • Интернет болон вэб хуудасны ерөнхий ойлголт
    • HTML –н тухай
  • 3. Браузерын үүсэл хөгжил
    • Netscape Navigator – хамгийн анхны худалдаа арилжааны зориулалт бүхий браузер бөгөөд анхны хувилбар нь 1994 онд хэрэглээнд гарч байсан байна.
    • Microsoft компаниас гаргасан Internet Explorer браузер нь анх 1995 онд хэрэглээнд гарж байсан бөгөөд хамгийн өргөн хэрэглэгддэг браузеруудын нэг юм. Судалгаагаар дэлхийн нийт хэрэглэгчдийн 75% нь уг браузерыг хэрэглэдэг байна.
  • 4.
    • Firefox - энэ нь Microsoft, Linux, Mac- д зориулсан үнэгүй браузер бөгөөд маш жижигхэн бөгөөд хурдан ажиллаг давуу талтай.
    • Opera -браузер нь гуравдагч браузер гэж нэрлэгддэг. 1994 онд үүссэн
  • 5. HTML
    • HTML бол загварчлалын хэл юм. Мэдээлэл болон, текстийг форматлахад ашиглана. Энэхүү мэдээллийн загварчлал нь уламжлалт програмчлалын хэлнүүдээс ялгаатай юм. HTML -д текстийг хос хаалтан дахь түлхүүр үгээр дүрслэгдэх tag -аар элементийг нь загварчилж өгнө. Жишээ нь: HTML нь өөрөө нэг элемент болох бөгөөд браузер биднийг веб бичиж байгааг тодорхойлж <html> - ээр эхэлж </html> -р дуусгавар болно. Tag -г хаахгүй бол өгүүлбэр зүйн алдаа заах болно.
  • 6. HTML
    • <html> … </html> -н хооронд агуулагдаж байгаа бүх зүйлийг браузер харуулна.
    • Дээр дурьдсанчлан HTML нь загварчлалын хэл учир бид HTML кодоо Notepad програм дээр бичиж болох юм.
    • (Notepad програмыг ажиллуулахдаа [Start]-[Programs]-[Accessories]-[Notepad] )
  • 7. HTML
    • Ерөнхий tag -ууд:
    • <title> </title> гэсэн tag -н хооронд цонхны гарчгийг өгдөг. Энэ нь хувийн хуудасны нэрийг илэрхийлж байна гэсэн үг юм. Энэ нэрээ Favorites –н жагсаалтанд оруулж болно гэсэн үг юм. Хайлтын програмууд уг хуудсыг хайхдаа энэ нэрийг ашиглах болно.
    • <body></body> нь гол элементийг нээнэ. Гол элементүүд браузераар харах гэсэн бүх агуулгаа байршуулна. Текст, имидж, холбоос, холбоосын өнгө, загвар, дэвсгэр ба
  • 8. HTML
    • Үсгийн фонт зэргийг багтаана . </html> -н өмнө ямагт хаагдана. Маш олон элемент HTML -д байрладаг.
    • <head></head> -Хуудасан дээр харагдахгүй хэрэгтэй мэдээллийг бичнэ.
    • <! ---...--- > гэсэн tag -н хооронд тайлбар үгээ бичиж болно. Тайлбар бичиж өгсөнөөр үндсэн програм бичихтэй хамаагүй юм. Энэ tag - т тайлбар бичсэнээр кодоо ойлгоход хэрэг болох юм.
  • 9. HTML
    • Ерөнхий tag -ууд:
    • <link> - өөр документлуу хандах холбоосыг тодорхойлно
    • <body bgcolor> tag – нь өнгийг тодорхойлно.
    • <body background> tag нь дэвсгэр өнгийг тодорхойлно.
    • <p> tag нь параграф /өгүүлбэр бичнэ/
    • <br> tag нь мөрийг таслана
    • <hr> tag нь шугам зурна
  • 10. Гарчиг тодорхойлох <H> tag
    • < H> tag нь текстийн гарчгийг тодорхойлно. h1, h2, h3, h4, h5, h6 гэсэн утгууд авдаг. h1 нь хамгийн том хэмжээг заах бол h6 нь хамгийн жижиг хэмжээг илэрхийлнэ. Жишээ нь:
    • <html>
    • <head>
    • <title> Garchig todorhoilson jishee</title>
    • <body>
    • <h1> Caption h1 </h1>
  • 11. HTML
    • <h2> Caption h2 </h2>
    • <h3> Caption h3</h3>
    • <h4> Caption h4</h4>
    • <h5> Caption h5</h5>
    • <h6> Caption h6</h6>
    • </body>
    • </head>
    • </html>
  • 12. Догол мөр тодорхойлох <p> tag
    • Html -д текст боловсруулж байгаа үед догол мөр авах хэрэг гарвал үүнийг <p> tag -г ашиглана. Бид office -н програм дээр текст боловсруулахдаа догол мөр авахын тулд гараас Enter товч дардаг. Код бичих явцад боловсруулж байгаа текстээ бид гараас хичнээн хэвжүүлээд, олон хоосон зай аваад браузер дээр хархад уг хэвжүүлэлт ороогүй байдаг. Олон хоосон зайг 1 л гэж тооцдог. Иймээс бүх хэвжүүлэлтэнд заавал tag ашиглах ёстой.
  • 13. “ p” tag ашиглаагүй жишээ
    • <html>
    • <title> “p” tag </title>
    • <body>
    • This is a paragraph
    • This is a paragraph
    • This is a paragraph
    • </body>
    • </html>
  • 14. “ p” tag ашигласан жишээ
    • <html>
    • <title> “p” tag </title>
    • <body>
    • <p> This is a paragraph </p>
    • <p> This is a paragraph </p>
    • <p> This is a paragraph </p>
    • </body>
    • </html>
  • 15.
    • <br> tag нь курсорыг дараагийн мөрлүү шилжүүлдэг. Энэ нь шинэ догол мөр үүсгэж байна гэсэн үг биш юм. <br> нь төгсөглгүй tag бөгөөд ганцаараа бичигдэдэг. Өөрөөр хэлбэл уг tag -г хаадаггүй гэсэн үг юм.
    “ br” tag
  • 16. “ br” tag - ашигласан жишээ
    • <html>
    • <title> “br” tag </title>
    • <body>
    • <p> This <br> is a <br> paragraph<br> This is a <br> paragraph </p>
    • </body>
    • </html>
  • 17. “ center” tag
    • Их хэмжээний текст хэвжүүлээд түүнийгээ голлуулах шаардлагай бол Center tag ашиглах нь зохимжтой байдаг. <center>…</center> дотор голууллах шаардлагтай бүх текстээ байрлуулна.
  • 18. “ center” tag ашигласан жишээ
    • <html>
    • <title> “p” tag </title>
    • <body>
    • <center>
    • <p> This is a paragraph </p>
    • <p> This is a paragraph </p>
    • <p> This is a paragraph </p>
    • </center>
    • </body>
    • </html>
  • 19.
    • Уг жишээнд гарчиг гололсон ба, хэвтээ шугам зурах “hr” tag ашиглав.
    • <html>
    • <body>
    • <h1 align=“center”> Caption </h1>
    • <p> This is a paragraph </p> <hr>
    • <p> This is a paragraph </p> <hr>
    • <p> This is a paragraph </p><hr>
    • </body>
    • </html>
  • 20. Текст хэвжүүлэх үндсэн tag -ууд <b> тодоор бичнэ <big> томоор бичнэ <small> жижгээр бичнэ <sub> subscript тэмдэглэгээ <sup> superscript тэмдэглэгээ <i> налуу бичнэ
  • 21. Текст хэвжүүлэх tag -ууд ашигласан жишээ
    • <html>
    • <body>
    • <h1 align=“center”> Caption </h1>
    • <b> This is a paragraph </b> <br>
    • < small > This is a paragraph </ small ><br>
    • < big > This is a paragraph </ big > <br>
    • This is <sub> a paragraph </sub><br>
    • This is a <sup> paragraph </sup><br>
    • <i> This is a paragraph </i>
    • </body>
    • </html>
  • 22. “ pre” tag
    • Хэд хэдэн хоосон зай авах болон, хоосон мөр авах үед уг tag -г ашиглана. Мөн програмын код бичиж харуулахад тохиромжтой.
  • 23. “ pre” tag ашигласан жишээ
    • <html>
    • <title> sw230</title>
    • <body>
    • <pre>
    • sw230- web design web design
    • sw230-web design CSMS
    • </pre>
  • 24.
    • <pre>
    • for i=1 to 10
    • print i
    • next i
    • </pre>
    • </body>
    • </html>
  • 25. Текст хэвжүүлэх бусад tag -ууд <ins> доогуур нь зурна <del> дээгүүр нь дарж зурах <s> <del> -н оронд хэргэлж болно <strike> <del> -н оронд хэргэлж болно <u> <strike> -н оронд хэргэлж болно
  • 26. Компьютерийн гаргалтын tag -ууд <code> <kbd> <samp> <tt> <var> <pre> <listing> <plaintext> <xmp>
  • 27. HTML Өргөн хэрэглэгддэг тэмдэгтүүд

×