โครงสร้างพื้นฐานของภาษา html

�ѡɳ��ç���ҧ��鹰ҹ���������ྨ���Ẻ�ͧ HTML5 ��ǹ�˭��������ѡɳ����ᵡ��ҧ仨ҡ HTML ������蹡�͹˹�ҹ���ҡ�ѡ ����§��͡�˹����ҧ���ҧ���ᵡ��ҧ� �� �ç���ҧ��ѡ�ͧ HTML ����ǹ��Сͺ��ҧ� �ѧ���

Show

  • ��ǹ��С�Ȫ�Դ������ͧ˹�����ྨ (Doctype Declaration)
  • ��ǹ��С���� HTML
  • ��ǹ��Ǣͧ���ྨ (Head Section)
  • ��ǹ���������ྨ (Body Section)

โครงสร้างพื้นฐานของภาษา html

1. �� <!doctype > ��㹡�û�С�Ȫ�Դ�ͧ���ྨ������ҧ��� ���ҵðҹ HTML5 ���������������������� ����Ըա�û����ż�����Ѻ˹�����ྨ��� �����ҧ�١��ͧ <!doctype html>

��ͤ������������ 

  • �ҧ�� <!doctype> ���ش�ͧ˹�����ྨ���� ��͹��ǹ���� ����� �����������������������͹��û����� ���͡���ʴ��ŷ��յç������������ �����ҧ�����������ջ���Է���Ҿ
  • �� <!doctype> ���������ǹ˹�觢ͧ�� HTML �����ҧ�
  • �� <!doctype> ���硻����� ������� (Single Tag)�����ö��¹�����ѡ�õ�Ǿ����������;�����˭����

2. �� <html> ��㹡�á�˹��ش������鹢ͧ���ྨ HTML 㹢�з���硻Դ��� </html> �繡�á�˹��ش����ش �� <html> ��ͧ���Сͺ��ҧ� ����������� <html> .... </html> 

3. ��ǹ�������ͧ (Head) �� <head> ��㹡�á�˹���������ǹ��Ǣͧ�͡��� ���͡�͹��������������Ңͧ���ྨ ����ǹ����Сͺ仴��� �� <title></title>, <meta> , <link> ��������� css style javascript ��ҧ � ������ǹ������

  • Meta tags��繢�ͤ��������һ�С��������� Code ������ʴ�������ྨ ���� �� <meta> ������������ �� <meta charset=utf-8" /> ���к͡�ش����ѡ�÷����Ѻ������ ���դ����дǡ 㹡�û�С������ ��������ŧ
  • Link tag �繡�û�С�� ������¡��� css �ҡ��ҹ�͡ 㹡�õ���������ྨ�դ�����§�� �����¹����� ��ǹ�ͧ Head �蹡ѹ

4. ��ǹ������ (Body) ����ǹ����ʴ������Ңͧ���ྨ��������觻�Сͺ���� ��ͤ�������硵�ҧ � ���ǹ�����ʴ���� web brower �µç �������͹�Ѻ HTML 4 �� ������Ѻ�Ѵ��áѺ�ٻẺ�ͧ��ͤ��� ���ҧ �ٻ�Ҿ ��ҿԡ��ҧ� �բͧ����ѡ�� �վ�� �繵� ����觡�����������ѧ���

ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Level 1, HTML 2.0, HTML 3.0, HTML 3.2 และ HTML 4.0    ในปัจจุบัน ทาง W3C ได้ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่ง ที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า   มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน

HTML มีโครงสร้างการเขียนโดยอาศัย Tag ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สําหรับจัดรูปแบบเพิ่มเติม

การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get)

แต่มีข้อเสียคือ โปรแกรมเหล่านี้มัก generate code ที่เกินความจำเป็นมากเกินไป ทําให้ไฟล์ HTML มีขนาดใหญ่ และแสดงผลช้า ดังนั้นหากเรามีความเข้าใจภาษา HTML จะเป็นประโยชน์Sให้เราสามารถแก้ไข code ได้ตามความต้องการ และยังสามารถนำ script มาแทรก ตัดต่อ สร้างลูกเล่นสีสันให้กับเว็บเพจของเราได้

การเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น

ภาษา HTML คือภาษาหลักย่อมาจาก Hypertext Markup Language เป็นภาษาพื้นฐานที่ใช้สำหรับสร้างเว็บเพจ จะแสดงผลผ่านทางเว็บเบราว์เซอร์ ส่วนเว็บบราวเซอร์ที่เราคุ้นเคยก็จะมี Google Chrome, Firefox , Microsoft Edge เป็นต้น บราวเซอร์จะมีหน้าที่สำหรับรัน HTML file ขึ้นมาหรือรันหน้าเว็บที่เราเขียนขึ้นมา โดยจะแสดงข้อมูลตัวอักษร ภาพ วิดีโอ เสียง และไฟล์ในรูปแบบอื่นๆ มีการเชื่อมโยงลิงค์ของแต่ละเพจด้วย

ตัวอย่าง HTML

See the Pen Tabs Html by supaporn (@asria) on CodePen.

จากโค้ดด้านบน เป็นโครงสร้าง HTML เกี่ยวกับการสร้าง Tabs ที่เวลาเราเลือกกดหัวข้อมันจะเปลี่ยนเนื้อหาข้อความนั้นๆ จะเห็นได้จากผลลัพธ์ยังแสดงแค่ตัว Text ไม่มีความสวยงามและเมื่อคลิกที่หัวข้อเบราว์เซอร์จะ Scroll เลื่อนลงไปเนื้อหานั้นๆ

สรุป

HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บไซต์ สามารถเปิดได้บนเว็บเบราว์เซอร์ โดยสามารถแสดงข้อมูลเนื้อหา รูปภาพ หรือวิดีโอได้

2. CSS คืออะไร

โครงสร้างพื้นฐานของภาษา html

แอตทริบิวต์ style ใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบของ Tag นั้น เช่น สี แบบอักษร ขนาด และอื่นๆ เช่น กำหนดให้ Tag

ข้อความเป็นสีแดง

ตัวอย่างโค้ดแอตทริบิวต์ style

This is a red paragraph.

สรุป

โครงสร้างของภาษา HTML ต้องมี Tag เพื่อเป็นตัวกำหนดโครงสร้าง ใช้เพื่อออกคำสั่งในการแสดงเนื้อหาต่างๆ บน HTML และจะต้องมี Attribute เป็นตัวกำหนดเนื้อหา โดย Tag จำเป็นต้องมี Tag เปิดและปิด ดังนี้ … แต่สำหรับ tag เดี่ยว ไม่จำเป็นต้องมี Tag ปิด สามารถนำไปใช้ได้เลย เช่น
เป็นต้น

Attribute เป็นตัวสำหรับกำหนดลักษณะเนื้อหาของ Tag เพื่อบอกว่า Tag นี้ใช้เพื่อออกคำสั่งเกี่ยวกับอะไร เช่น สี แบบอักษร ขนาด และอื่นๆ เป็นต้น

5. โครงสร้างพื้นฐานของภาษา HTML โครงสร้างพื้นฐานของภาษา HTML จะประกอบไปด้วยส่วนที่สำคัญ 4 ส่วน คือ คือการประกาศประเภทของเอกสาร หรือ Doctype ว่าเว็บเพจหน้านี้สร้างขึ้นมาเป็นเอกสารประเภทใดและเป็นมาตรฐานใด ซึ่งมาตรฐานที่มีใช้กันอยู่ 3 มาตราฐานคือ HTML, XHTML, HTML5 … เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและเป็นการบอกเบาร์เซอร์ว่าเป็น HTML ชนิดไหน … คือส่วนที่เป็นหัวของเอกสาร เป็นส่วนอธิบายเกี่ยวกับข้อมูลเฉพาะของในหน้านั้นๆ ว่าเกี่ยวกับเรื่องอะไร คีย์เวิร์ดที่สำคัญของหน้านี้คืออะไร ภายในจะมี tag พิเศษ อยู่คือ Title Tag, Meta Tag เป็นต้น Title Tag … คือส่วนที่ใช้บอกว่าเว็บไซต์หน้านี้มีคือเรื่องอะไร ไม่ควรเกิน 64 ตัวอักษร และเขียนให้ความหมายสื่อถึงหน้าเว็บเพจว่าเกี่ยวกับอะไร และควรใส่ Keyword ลงไปด้วย Meta Description Tag คือส่วนที่ใช้ในการอธิบายหน้าว่า เนื้อหาในหน้าเว็บเพจ คืออะไร จะสื่อความหมายอะไร ตัวอักษรไม่ควรเกิน 160 ตัวอักษร Meta Keywords Tag คือส่วนที่แสดงให้ Bot รู้ว่าบทความนี้คีย์เวิร์ดที่เกี่ยวข้องมีอะไรบ้าง การเขียนคีย์เวิร์ดแต่ละคำ ต้องขั้นด้วยเครื่องหมายคอมม่า (,) โครงสร้างพื้นฐานของ HTML มีอะไรบ้าง

การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ 2 ส่วน ดังนี้ 1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง (Title) ของหน้าต่างการทำงานในระบบ Windows. 2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML.

โครงสร้างของภาษา HTML คืออะไร

โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ 1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง 2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่

โครงสร้างพื้นฐาน HTML มีกี่ส่วนที่สำคัญ

โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้

โครงสร้างของภาษา HTML แบ่งเป็น 3 ส่วนอะไรบ้าง

</HEAD> เป็นคำสั่งกำหนดจุดสิ้นสุดส่วนหัวของไฟล์ <BODY> เป็นคำสั่งกำหนดจุดเริ่มต้นของส่วนเนื้อหาไฟล์ </BODY> เป็นคำสั่งกำหนดจุดสิ้นสุดของส่วนเนื้อหาตัวไฟล์ </HTML> เป็นคำสั่งกำหนดจุดสิ้นสุดของไฟล์ HTML.