SlideShare una empresa de Scribd logo
1 de 22
HTML5


        Дизайнер
• HTML5 бол Opera Software компаниас
  санаачлан танилцуулж буй вэб сайт хийх
  үндсэн тулгуур хэл юм.
• 1990 онд анхны хувилбарыг гаргаж
  байснаас хойш өдгөө 5 дахь шинэчилсэн
  хувилбарыг гаргаад байгаа хэдий ч 11 сарын
  байдлаар бүрэн дуусаагүй байгаа юм.
• HTML5 гол зорилго нь компьютер болон
  нэмэлт дивайсуудад нийцсэн, хүмүүс
  уншихад илүү ойлгомжтой болгоход
  чиглэгдсэн хэл юм.
• 2011 оны 9 сарын 30-ны байдлаар дэлхийн
  топ 100 вэб сайтын 34% нь HTML5
  хэрэглэсэн байна.
• Шинэлэг, орчин үеийн вэб сайт хийх HTML
 технологийн ерөнхий хэрэглээнд хэд хэдэн
 шинэ элемент болон онцлох шинжүүдийг
 оруулсан байна. Тухайлбал,
        <object> оронд <video>, <audio>
        <footer> нь ихэвчлэн HTML кодны сүүлийн мөр эсвэл        вэб
        хуудасны доод хэсгийг илэрхийлэх элемент
        Inline-ийг <span>
        <nav> нь website navigation block гэх мэт утгын орлуулах
элементүүдийг оруулсан байна.
• HTML 4.01 хувилбарт байсан хэрэггүй
  элементүүдийг хассан байна. Тухайлбал,
  <font> болон <center> гэсэн элементийг
  хассан бөгөөд энэ элемент CSS-т түлхүү
  хэрэглэгдэх болсон.
• Вэбийн өнгө үзэмжид чухлаар нөлөөлдөг
  DOM Scripting-д хэрэгтэй хэд хэдэн шинэ
  буюу өргөтгөсөн элементийг нэмж оруулсан
  байна.
HTML5 нь API-г онцгойлон авч үзсэн бөгөөд
одоо байгаа DOM интерфэйсүүдийг өргөтгөж
бас нилээдгүй онцлох шинжүүдийг оруулсан.
Мөн шинэ API-уудыг нэмсэн нь:
• Immediate mode 2D drawing-д canvas element
• Ямар нэг тогтоосон хугацаатай медиа файлыг дахин
    тоглуулах
•   Offline Storage Databases
•   Документэд эдитинг хийх
•   Микродата
•   Browser History менежмэнт
•   Drag and Drop
•   Cross-Document Messaging
•   MIME Type & Protocol Handler Registration зэрэг API нэмсэн.

Гэхдээ эдгээр нь бүгд W3C HTML5-д ороогүй бөгөөд
WHATWG HTML-д оруулсан гэнэ.
HTML 4.01 болон XHTML 1.x-ээс ялгагдах ялгаанууд:

• Parsing хийх шинэ дүрэм оруулсан: SGML
 дээр суурьлаагүй маш уян хатан бөгөөд
 тохиромжтой parsing-тай болсон

• Text/html-д SVG болон MathML-ийг хэрэглэх
 боломжтой болсон

• Шинэ элементүүд болох article, aside, audio,
 bdo, canvas, command, datalist, details,
 embed, figcaption, figure, footer, header,
 hgroup, keygen, mark, meter, nav, output,
 progress, rp, rt, ruby, section, source, summary,
 time, video, wbr зэргийг нэмсэн.
• Удирдах (Control) шинэ хэлбэрүүд болох
 dates and
 times, email, url, search, number, range, tel, col
 or зэргийг нэмсэн.

• Онцлох шинж (Attribute) болох charset (meta-
 д), async (script-эд) нэмсэн.

• Acronym, applet, basefont, big, center, dir, font,
 frame, frameset, isindex, noframes, strike, tt
 зэрэг хэрэггүй болсон элементүүдийг хассан.
• HTML5 браузер нь алдаатай өгүүлбэрийг
олох, засах боломжтой болж байгаа гэнэ.

• HTML5-аар хийгдсэн вэб сайтуудыг хуучин
браузерууд ачаалах боломжгүйгээр хийгдсэн
байна.

• HTML4.01-тэй харьцуулахад HTML5-д lexing
болон parsing хийхэд хэрэгтэй илүү
нарийвчилсан элементүүдийг оруулжээ.

• HTML5-ын олон голлох үзүүлэлтүүд нь
смартфон болон таблетуудад зориулагдсан
бөгөөд гар утасны аппликэйшнүүдийг хийхэд
тохиромжтой гэж үзэж байгаа аж.
• XHTML5 нь HTML5-ын XML цувралуудын нэг бөгөөд
 XHTML5 нь XML дээрх өгүүлбэрийн зөв бүтэцтэй
 хэлбэрийг нарийн шаарддаг.

• MIME/Content Type-аас шалтгаалж XHTML5 болон
 HTML5 хоорондын ялгаа багассан. Ямар медиа сонгож
 байгаагаас шалтгаалж алийг нь хэрэглэхээ шийднэ гэсэн
 үг юм.

• HTML5-ын тухай буруу ойлголт байдаг нь HTML5 нь вэб
 сайтад анимэйшн үүсгэнэ, хийнэ гэсэн явдал юм.

• JavaScript болон CSS3 алт аль нь HTML элементийг
 анимэйшн хийхэд чухал юм.
Яагаад HTML5 хэрэглэх нь дээр гэж?

• Өмнөх хувилбараасаа ажиллагааны хувьд хурдан


• Утасны марк тус бүрт аппликэйшн бичнэ гэсэн
 ойлголтыг халж бүх төрлийн утсанд зориулсан бүхий
 л аппликэйшнийг HTML5 ашиглан хийх боломжтой.

• Вэб сайт хийх бүхий л шинэлэг боломжуудыг
 оруулснаараа илүү уян хатан болсон.

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

• HTML4 дээр суурилж бичигдсэн учраас шинэ шинэ
 онцлог элементүүд дээр ажиллаж цаашид улам
 хөгжингүй болгох боломжтой.

• HTML5 болон CSS3 дээр ажиллах нь дизайны
 үнэмлэхүй цогц шийдлийг өгөх болно.
Вэб хөгжүүлэх технологийн он цагийн дараалал

• 1991      HTML
• 1994      HTML2
• 1996      CSS1 + JavaScript
• 1997HTML4
• 1998CSS2
• 2000XHTML 1
• 2002Tableless Web Design
• 2005AJAX
• 2009HTML5
HTML5 = HTML + CSS + JS
     гэж томъѐолж болно
Утгын хувьд арай дээр болсон тэгууд
Аппликэйшнүүдэд зориулсан тэмдэглэгээт хэл
Шинэ формын (form) төрлүүд
Гар утсан дээр
Аудио + Видео оруулах
Canvas 2D
Inline CVG
HTML5

Más contenido relacionado

La actualidad más candente

U.cs101 алгоритм программчлал-12
U.cs101   алгоритм программчлал-12U.cs101   алгоритм программчлал-12
U.cs101 алгоритм программчлал-12
Badral Khurelbaatar
 
Сэлэнгэ зочид буудлын систем
Сэлэнгэ зочид буудлын системСэлэнгэ зочид буудлын систем
Сэлэнгэ зочид буудлын систем
Altangerel Bilguun
 
үйлдлийн систем
үйлдлийн системүйлдлийн систем
үйлдлийн систем
shulam
 
компьютерийн програм хангамж
компьютерийн програм хангамжкомпьютерийн програм хангамж
компьютерийн програм хангамж
tseegii6
 
хэрэглээний програмууд ба системийн програмууд
хэрэглээний програмууд ба системийн програмуудхэрэглээний програмууд ба системийн програмууд
хэрэглээний програмууд ба системийн програмууд
Tsetsenkhuu Otgonbayar
 
Салаалсан алгоритмын бодлогууд
Салаалсан алгоритмын бодлогуудСалаалсан алгоритмын бодлогууд
Салаалсан алгоритмын бодлогууд
Баярсайхан Л
 
интернэт ба сүлжээ
интернэт ба сүлжээинтернэт ба сүлжээ
интернэт ба сүлжээ
Kahatanbayr
 
Хүний нөөцийн бүртэлийн систем
Хүний нөөцийн бүртэлийн системХүний нөөцийн бүртэлийн систем
Хүний нөөцийн бүртэлийн систем
Altangerel Bilguun
 

La actualidad más candente (20)

мэдээллийн технологи 1 тест
мэдээллийн технологи 1 тестмэдээллийн технологи 1 тест
мэдээллийн технологи 1 тест
 
Java programchlal s.uuganbayr
Java programchlal s.uuganbayrJava programchlal s.uuganbayr
Java programchlal s.uuganbayr
 
өгөгдлийн сангийн системийн үндэс
өгөгдлийн сангийн системийн үндэсөгөгдлийн сангийн системийн үндэс
өгөгдлийн сангийн системийн үндэс
 
Html хичээл
Html хичээлHtml хичээл
Html хичээл
 
U.cs101 алгоритм программчлал-12
U.cs101   алгоритм программчлал-12U.cs101   алгоритм программчлал-12
U.cs101 алгоритм программчлал-12
 
Сэлэнгэ зочид буудлын систем
Сэлэнгэ зочид буудлын системСэлэнгэ зочид буудлын систем
Сэлэнгэ зочид буудлын систем
 
Багц мэдээлэл
Багц мэдээлэлБагц мэдээлэл
Багц мэдээлэл
 
It101 7
It101 7It101 7
It101 7
 
C# hicheelin lekts
C# hicheelin lektsC# hicheelin lekts
C# hicheelin lekts
 
үйлдлийн систем
үйлдлийн системүйлдлийн систем
үйлдлийн систем
 
компьютерийн програм хангамж
компьютерийн програм хангамжкомпьютерийн програм хангамж
компьютерийн програм хангамж
 
хэрэглээний програмууд ба системийн програмууд
хэрэглээний програмууд ба системийн програмуудхэрэглээний програмууд ба системийн програмууд
хэрэглээний програмууд ба системийн програмууд
 
Салаалсан алгоритмын бодлогууд
Салаалсан алгоритмын бодлогуудСалаалсан алгоритмын бодлогууд
Салаалсан алгоритмын бодлогууд
 
SCRUM арга
SCRUM аргаSCRUM арга
SCRUM арга
 
web basic 1
web basic 1web basic 1
web basic 1
 
U.it101 lab 4
U.it101 lab 4U.it101 lab 4
U.it101 lab 4
 
It101 16
It101 16It101 16
It101 16
 
C cons
C consC cons
C cons
 
интернэт ба сүлжээ
интернэт ба сүлжээинтернэт ба сүлжээ
интернэт ба сүлжээ
 
Хүний нөөцийн бүртэлийн систем
Хүний нөөцийн бүртэлийн системХүний нөөцийн бүртэлийн систем
Хүний нөөцийн бүртэлийн систем
 

Destacado

MySQL Э.Насанжаргал
MySQL Э.НасанжаргалMySQL Э.Насанжаргал
MySQL Э.Насанжаргал
Singleton
 
Day 1
Day 1Day 1
Day 1
ETC
 
Day 3 php working with string, number
Day 3   php working with string, numberDay 3   php working with string, number
Day 3 php working with string, number
ETC
 
My sql lec2
My sql lec2My sql lec2
My sql lec2
ETC
 
Diplomiin mobile programming
Diplomiin mobile programming Diplomiin mobile programming
Diplomiin mobile programming
Moba Anax
 
Day 4 php working with date and time, array
Day 4   php working with date and time, arrayDay 4   php working with date and time, array
Day 4 php working with date and time, array
ETC
 
Day 2 php
Day 2   phpDay 2   php
Day 2 php
ETC
 
Дэлгүүрийн кассын систем
Дэлгүүрийн кассын системДэлгүүрийн кассын систем
Дэлгүүрийн кассын систем
Altangerel Bilguun
 

Destacado (20)

MySQL Э.Насанжаргал
MySQL Э.НасанжаргалMySQL Э.Насанжаргал
MySQL Э.Насанжаргал
 
NodeJS
NodeJS NodeJS
NodeJS
 
Day 1
Day 1Day 1
Day 1
 
Засаг.мн - Төрийн цахим хаалга
Засаг.мн - Төрийн цахим хаалгаЗасаг.мн - Төрийн цахим хаалга
Засаг.мн - Төрийн цахим хаалга
 
Coaching
CoachingCoaching
Coaching
 
CSS3
CSS3CSS3
CSS3
 
Java script xэрэглээ
Java script xэрэглээ Java script xэрэглээ
Java script xэрэглээ
 
Day 3 php working with string, number
Day 3   php working with string, numberDay 3   php working with string, number
Day 3 php working with string, number
 
database 10
database 10database 10
database 10
 
Active directory
Active directoryActive directory
Active directory
 
My sql lec2
My sql lec2My sql lec2
My sql lec2
 
Diplomiin mobile programming
Diplomiin mobile programming Diplomiin mobile programming
Diplomiin mobile programming
 
Xml orchuulga bayarbat purevkhuu
Xml orchuulga bayarbat purevkhuuXml orchuulga bayarbat purevkhuu
Xml orchuulga bayarbat purevkhuu
 
Day 4 php working with date and time, array
Day 4   php working with date and time, arrayDay 4   php working with date and time, array
Day 4 php working with date and time, array
 
database 7-8
database 7-8database 7-8
database 7-8
 
вэб дизайн - хичээл 1
вэб дизайн  -  хичээл 1вэб дизайн  -  хичээл 1
вэб дизайн - хичээл 1
 
кино театрын тасалбар захиалгын систем
кино театрын тасалбар захиалгын системкино театрын тасалбар захиалгын систем
кино театрын тасалбар захиалгын систем
 
Day 2 php
Day 2   phpDay 2   php
Day 2 php
 
Database 6
Database 6Database 6
Database 6
 
Дэлгүүрийн кассын систем
Дэлгүүрийн кассын системДэлгүүрийн кассын систем
Дэлгүүрийн кассын систем
 

Similar a HTML5 (11)

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
 
Лекц 1
Лекц 1Лекц 1
Лекц 1
 
Html хэлний хичээл
Html хэлний хичээлHtml хэлний хичээл
Html хэлний хичээл
 
Цахим хуудас хөгжүүлэхэд анхаарах зүйлс
Цахим хуудас хөгжүүлэхэд анхаарах зүйлсЦахим хуудас хөгжүүлэхэд анхаарах зүйлс
Цахим хуудас хөгжүүлэхэд анхаарах зүйлс
 
Веб технологи
Веб технологиВеб технологи
Веб технологи
 
Хувилбар удирдах системийн зөв хэрэглээ
Хувилбар удирдах системийн зөв хэрэглээХувилбар удирдах системийн зөв хэрэглээ
Хувилбар удирдах системийн зөв хэрэглээ
 
Dotnet lekts
Dotnet lektsDotnet lekts
Dotnet lekts
 
surgalt
surgaltsurgalt
surgalt
 
Web intro
Web introWeb intro
Web intro
 
Web intro (1)
Web intro (1)Web intro (1)
Web intro (1)
 

HTML5

  • 1. HTML5 Дизайнер
  • 2. • HTML5 бол Opera Software компаниас санаачлан танилцуулж буй вэб сайт хийх үндсэн тулгуур хэл юм. • 1990 онд анхны хувилбарыг гаргаж байснаас хойш өдгөө 5 дахь шинэчилсэн хувилбарыг гаргаад байгаа хэдий ч 11 сарын байдлаар бүрэн дуусаагүй байгаа юм.
  • 3. • HTML5 гол зорилго нь компьютер болон нэмэлт дивайсуудад нийцсэн, хүмүүс уншихад илүү ойлгомжтой болгоход чиглэгдсэн хэл юм. • 2011 оны 9 сарын 30-ны байдлаар дэлхийн топ 100 вэб сайтын 34% нь HTML5 хэрэглэсэн байна.
  • 4. • Шинэлэг, орчин үеийн вэб сайт хийх HTML технологийн ерөнхий хэрэглээнд хэд хэдэн шинэ элемент болон онцлох шинжүүдийг оруулсан байна. Тухайлбал, <object> оронд <video>, <audio> <footer> нь ихэвчлэн HTML кодны сүүлийн мөр эсвэл вэб хуудасны доод хэсгийг илэрхийлэх элемент Inline-ийг <span> <nav> нь website navigation block гэх мэт утгын орлуулах элементүүдийг оруулсан байна.
  • 5. • HTML 4.01 хувилбарт байсан хэрэггүй элементүүдийг хассан байна. Тухайлбал, <font> болон <center> гэсэн элементийг хассан бөгөөд энэ элемент CSS-т түлхүү хэрэглэгдэх болсон. • Вэбийн өнгө үзэмжид чухлаар нөлөөлдөг DOM Scripting-д хэрэгтэй хэд хэдэн шинэ буюу өргөтгөсөн элементийг нэмж оруулсан байна.
  • 6. HTML5 нь API-г онцгойлон авч үзсэн бөгөөд одоо байгаа DOM интерфэйсүүдийг өргөтгөж бас нилээдгүй онцлох шинжүүдийг оруулсан. Мөн шинэ API-уудыг нэмсэн нь: • Immediate mode 2D drawing-д canvas element • Ямар нэг тогтоосон хугацаатай медиа файлыг дахин тоглуулах • Offline Storage Databases • Документэд эдитинг хийх • Микродата • Browser History менежмэнт • Drag and Drop • Cross-Document Messaging • MIME Type & Protocol Handler Registration зэрэг API нэмсэн. Гэхдээ эдгээр нь бүгд W3C HTML5-д ороогүй бөгөөд WHATWG HTML-д оруулсан гэнэ.
  • 7. HTML 4.01 болон XHTML 1.x-ээс ялгагдах ялгаанууд: • Parsing хийх шинэ дүрэм оруулсан: SGML дээр суурьлаагүй маш уян хатан бөгөөд тохиромжтой parsing-тай болсон • Text/html-д SVG болон MathML-ийг хэрэглэх боломжтой болсон • Шинэ элементүүд болох article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr зэргийг нэмсэн.
  • 8. • Удирдах (Control) шинэ хэлбэрүүд болох dates and times, email, url, search, number, range, tel, col or зэргийг нэмсэн. • Онцлох шинж (Attribute) болох charset (meta- д), async (script-эд) нэмсэн. • Acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt зэрэг хэрэггүй болсон элементүүдийг хассан.
  • 9. • HTML5 браузер нь алдаатай өгүүлбэрийг олох, засах боломжтой болж байгаа гэнэ. • HTML5-аар хийгдсэн вэб сайтуудыг хуучин браузерууд ачаалах боломжгүйгээр хийгдсэн байна. • HTML4.01-тэй харьцуулахад HTML5-д lexing болон parsing хийхэд хэрэгтэй илүү нарийвчилсан элементүүдийг оруулжээ. • HTML5-ын олон голлох үзүүлэлтүүд нь смартфон болон таблетуудад зориулагдсан бөгөөд гар утасны аппликэйшнүүдийг хийхэд тохиромжтой гэж үзэж байгаа аж.
  • 10. • XHTML5 нь HTML5-ын XML цувралуудын нэг бөгөөд XHTML5 нь XML дээрх өгүүлбэрийн зөв бүтэцтэй хэлбэрийг нарийн шаарддаг. • MIME/Content Type-аас шалтгаалж XHTML5 болон HTML5 хоорондын ялгаа багассан. Ямар медиа сонгож байгаагаас шалтгаалж алийг нь хэрэглэхээ шийднэ гэсэн үг юм. • HTML5-ын тухай буруу ойлголт байдаг нь HTML5 нь вэб сайтад анимэйшн үүсгэнэ, хийнэ гэсэн явдал юм. • JavaScript болон CSS3 алт аль нь HTML элементийг анимэйшн хийхэд чухал юм.
  • 11. Яагаад HTML5 хэрэглэх нь дээр гэж? • Өмнөх хувилбараасаа ажиллагааны хувьд хурдан • Утасны марк тус бүрт аппликэйшн бичнэ гэсэн ойлголтыг халж бүх төрлийн утсанд зориулсан бүхий л аппликэйшнийг HTML5 ашиглан хийх боломжтой. • Вэб сайт хийх бүхий л шинэлэг боломжуудыг оруулснаараа илүү уян хатан болсон. • Видео, аудио, имэйжүүдийг зөв кодоор нь бичихэд хялбар болсон.
  • 12. • HTML5 дээр бичигдсэн сайтууд өмнөхөөсөө шинэлэг, хурдан ачааллана гээд давуу талууд ихтэй бөгөөд хуучны сайтууд үеэ өнгөрөөнө гэсэн үг юм. • HTML4 дээр суурилж бичигдсэн учраас шинэ шинэ онцлог элементүүд дээр ажиллаж цаашид улам хөгжингүй болгох боломжтой. • HTML5 болон CSS3 дээр ажиллах нь дизайны үнэмлэхүй цогц шийдлийг өгөх болно.
  • 13. Вэб хөгжүүлэх технологийн он цагийн дараалал • 1991 HTML • 1994 HTML2 • 1996 CSS1 + JavaScript • 1997HTML4 • 1998CSS2 • 2000XHTML 1 • 2002Tableless Web Design • 2005AJAX • 2009HTML5
  • 14. HTML5 = HTML + CSS + JS гэж томъѐолж болно
  • 15. Утгын хувьд арай дээр болсон тэгууд
  • 19. Аудио + Видео оруулах