:: ˹èÇ·Õè 2 àÃÔèÁµé¹¡Ñº HTML5

ÊÃéÒ§àÇçºà¾¨áá´éÇ HTML5



ËÅѧ¨Ò¡·Õèä´éàÃÕ¹ÃÙéà¡ÕèÂÇ ¡Ñº¾×é¹°Ò¹àº×éͧµé¹ã¹¡ÒÃÊÃéÒ§àÇçºà¾¨ ã¹ËÑÇ¢é͹Õé¨Ðà»ç¹¡Ò÷´ÅͧÊÃéÒ§àÇçºà¾¨´éÇÂÀÒÉÒ HTML â´Â¨ÐÊÃéÒ§¨Ò¡â»Ãá¡ÃÁ Text Editor ´éÇ¡ÒþÔÁ¾ì¤ÓÊÑè§ (Tag) ´éǵÑÇàͧ·Ñé§ËÁ´ ´éÇÂâ»Ãá¡ÃÁ Notepad «Ö觨еԴµÑé§ÁÒ¾ÃéÍÁ¡ÑºÃкº»¯ÔºÑµÔ¡Òà Windows ÍÂÙèáÅéÇ

¢Ñé¹·Õè 1 à»Ô´â»Ãá¡ÃÁ Notepad



¡ÒÃà»Ô´â»Ãá¡ÃÁ Notepad

¢Ñé¹·Õè 2 à¢Õ¹¤ÓÊÑè§â¤Ã§ÊÃéÒ§ÀÒÉÒ HTML5



¡ÒÃà»Ô´â»Ãá¡ÃÁ Notepad

ÊÓËÃѺÀÒÉÒ HTML5 ¨ÐÁÕ¡ÒÃà¾ÔèÁ¤ÓÊÑè§ã¹¡ÒèѴâ¤Ã§ÊÃéÒ§àÇçºà¾¨ ¤×Í <header>, <nav>, <section>, <article>, <footer> «Ö觨зÓãËé§èÒÂ㹡ÒÃàÃÕ¡ãªéà¾ÃÒÐà»ç¹¤ÓÊÑ觷ÕèÊ×èͤÇÒÁËÁÒµç¡Ñº¡ÒÃãªé§Ò¹ «Öè§ã¹ HTML4 㹡ÒèѴ¡ÒÃâ¤Ã§ÊÃéÒ§¨Ðµéͧà¢Õ¹css à¾×èÍ¡Ó˹´â¤Ã§ÊÃéÒ§¢Í§Ë¹éÒàÇçºà¾¨ ¼Ùé¾Ñ²¹Ò HTML5 ¨Ö§ä´éà¾ÔèÁ¤ÓÊÑ觢Öé¹ÁÒãËéà¾×èÍà»ç¹á¹Ç¡ÒÃãªé§Ò¹à´ÕÂǡѹ·ÓãËé§èÒÂ㹡ÒþѲ¹ÒàÇçºà¾¨ áÅФÓÊÑè§ã¹¡ÒÃà¢Õ¹¨ÐÊÑè¹Å§Â¡µÑÇÍÂèÒ§àªè¹ ¡ÒÃÓ˹´ÀÒÉÒãËé¡ÑºàÇçºà¾¨¨Ðãªé Meta Tag ¶éÒ´Ù¨Ò¡µÑÇÍÂèÒ§¨Ðà¢Õ¹§èÒ¢Öé¹


¢Ñé¹·Õè 3 ¡Òúѹ·Ö¡àÍ¡ÊÒà HTML

àÁ×èÍÊÃéÒ§àÍ¡ÊÒÃàÊÃç¨áÅéÇ ¨ÐµéͧºÑ¹·Ö¡à»ç¹àÍ¡ÊÒà HTML â´ÂºÑ¹·Ö¡à»ç¹¹ÒÁÊ¡ØÅ .html ËÃ×Í .htm ´Ñ§¹Õé

  • 1. ¤ÅÔ¡àÅ×Í¡àÁ¹Ù File
  • 2. ¤ÅÔ¡àÅ×Í¡àÁ¹Ù Save As


àÅ×Í¡àÁ¹Ù File>Save As


ËÅÑ¡¨Ò¡àÅ×Í¡àÁ¹Ù File>Save As àÅéǨлÃÒ¡¯Ë¹éÒµèÒ§ Save As ´Ñ§ÀÒ¾ áÅéÇ·ÓµÒÁ¢Ñ鹵͹µèÍä» ´Ñ§¹Õé

  • 1. àÅ×Í¡µÓá˹è§ÊÓËÃѺºÑ¹·Ö¡ä¿Åì
  • 2. µÑ駪×èÍä¿ÅìµÒÁ´éǹÒÁÊ¡ØÅä¿Åì .html
  • 3. ¤ÅÔ¡»ØèÁ Save


àÅ×Í¡µÓá˹è§áÅеÑ駪×èÍä¿Åì

¢Ñé¹·Õè 4 ¡ÒôټÅÅѾ¸ì

ËÅѧ¨Ò¡ä´éà¢Õ¹¤ÓÊÑè§â¤Ã§ÊÃéÒ§áÅФÓÊÑ觵èÒ§ áÅзӡÒúѹ·Ö¡ä¿ÅìàÇçºà¾¨àÃÕÂÂÃéÍÂáÅéÇ ¢Ö鹵͹µèÍä»à»ç¹¡ÒôټÅÅѾ¸ì ÇèÒÍÍ¡ÁÒµÒÁ·ÕèàÃÒà¢Õ¹¤ÓÊÑè§ä»ËÃ×ÍäÁè à»ç¹¡ÒõÃǨÊͺ¤ÇÒÁ¶Ù¡µéͧ´éÇ àÃÒ¨Ðà»Ô´´Ù¼ÅÅѾ¸ìâ´Âãªé Browser «Ö觨Ðà·Ó˹éÒ·Õè㹡ÒÃÍèÒ¹¤ÓÊÑè§ áÅÐáÊ´§¼ÅãËéàÃÒ´Ù

  • 1. àÅ×Í¡·ÕèàÃҺѹ·Ö¡ä¿ÅìàÇçºà¾¨
  • 2. ´ÑºàºÔÅä¿ÅìàÇçºà¾¨·ÕèàÃÒÊÃéÒ§áÅкѹ·Ö¡äÇé
  • 3. ºÃÒÇà«ÍÃì¨ÐáÊ´§¼ÅÅѾ¸ì¡ÒÃà¢Õ¹¤ÓÊÑè§Å§ä»ã¹ä¿Åì HTML


à»Ô´ä¿Åì HTML à¾×èÍ´Ù¼ÅÅѾ¸ì

¢Ñé¹·Õè 5 ¡ÒÃà»Ô´ä¿ÅìàÍ¡ÊÒà HTML à¾×èÍá¡éä¢

ã¹¢Ñ鹵͹·ÕèáÅéÇà»ç¹¡ÒÃà»Ô´àÍ¡ÊÒà HTML à¾×èÍ´Ù¼ÅÅѾ¸ì¼èÒ¹â»Ãá¡ÃÁºÃÒÇà«ÍÃì àÁ×èÍàÃÒµéͧ¡ÒÃá¡ä¢¼Å§Ò¹¢Í§àÃÒ¨Óà»ç¹µéͧà»Ô´¼èÒ¹â»Ãá¡ÃÁ Text Editor ¡ç¤×Í â»Ãá¡ÃÁ Notepad ·ÕèàÃÒãªé㹡ÒÃÊÃéÒ§ä¿ÅìàÇçºà¾¨¹Ñé¹àͧ ËÅѧ¨Ò¡·ÕèàÃÒà»Ô´â»Ãá¡ÃÁ Notepad áÅéÇãËé·ÓµÒÁ¢Ñ鹵͹ ´Ñ§¹Õé

  • 1. ¤ÅÔ¡àÅ×Í¡àÁ¹Ù File
  • 2. ¤ÅÔ¡àÅ×Í¡àÁ¹Ù Open


à»Ô´ä¿Åì HTML à¾×èÍá¡éä¢

àÁ×èÍàÃÒà»Ô´â»Ãá¡ÃÁ Notepad áÅÐàÅ×Í¡àÁ¹Ù File>Open áÅéǨлÃÒ¡¯Ë¹éÒµèÒ§ Open ãËéàÃÒ·ÓµÒÁ¢Ö鹵͹ ´Ñ§¹Õé

  • 1. àÅ×Í¡µÓá˹觷Õèà¡çºä¿ÅìàÇçºà¾¨·ÕèàÃҺѹ·Ö¡äÇé
  • 2. àÅ×Í¡ª¹Ô´¢Í§ä¿Åìà»ç¹áºº All Files (¨Ö§¨Ð·ÓãËéàÃÒÁͧàËç¹ä¿ÅìàÇçºà¾¨)
  • 3. ¤ÅÔ¡àÅ×Í¡ä¿ÅìàÇçºà¾¨
  • 4. ¤ÅÔ¡»ØèÁ Open


à»Ô´ä¿ÅìàÇçºà¾¨¾×èÍá¡éä¢

ËÅѧ¨Ò¡àÃÒà»Ô´ä¿ÅìàÇçºà¾¨´éÇÂâ»Ãá¡ÃÁ Notepad áÅéÇ ¡ç¨Ð»ÃÒ¡¯â¤ê´¤ÓÊÑ觵èÒ§ æ ·ÕèàÃÒä´éà¢Õ¹äÇé㹡è͹˹éÒ¹Õé áÅÐàÃÒ¡çÊÒÁÒöá¡éä¢éà¾ÔèÁàµÔèÁ¢éÍÁÙŵèÒ§ æ ËÅÑ¡¨Ò¡ä´éá¡éä¢àÊÃç¨áÅéÇ¡ç¨Ðà»ç¹ºÑ¹·Ö¡¡ÒÃá¡éä¢ â´ÂÁÕ¢Ö鹵͹´Ñ§¹Õé

  • 1. àÅ×Í¡ File
  • 2. àÅ×Í¡àÁ¹Ù Save


á¡éä¢áÅкѹ·Ö¡