HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
What is HTML? HTML ย่อมาจาก Hypertext Markup Language HTML เป็นภาษาที่ใช้ในการเขียน Web Page ซึ่งสามารถสร้างให้แสดงผลให้อยู่ในรูปของตัวอักษร ภาพนิ่ง ภาพเคลื่อนไหว เสียง และยังสามารถเชื่อมโยงไปยังเว็บไซต์ อื่นๆในระบบ Internet เอกสาร HTML สามารถตั้งนามสกุลเป็น .htm หรือ .html
การสร้างเอกสาร HTML การสร้างเอกสาร HTML ประกอบไปด้วยโปรแกรม 2 ส่วน 1. Text Editor เป็นโปรแกรมที่ใช้ในการเขียนภาษา HTML เพื่อสร้าง Web Page ตัวอย่่างเช่่น Note Pad 2. Web browser เป็นโปรแกรมที่ใช้เรียกเอกสาร HTML ออกมาแสดงผลบนจอภาพ ในระบบ Internet ตัวอย่างเช่น Internet Explorer
การเขียนภาษา HTML การเขียนภาษา HTML ประกอบด้วย 2 ส่วน คือ 1. ส่วนของคำสั่ง เขียนอยู่ภายในเครื่องหมาย < > เรียกว่า Tag เช่น <br> 2. ส่วนของข้อความที่ต้องการ
การเขียนภาษา HTML (ต่่อ) Tag มี 2 แบบ 1. Tag เดี่ยว Tag ที่มีคำสั่งเดียว สามารถใช้งานคำสั่งได้ ณ ตำแหน่งที่ เราระบุ เช่น <br> 2. Tag คู่ Tag ที่มี 2 ส่วน คือ Tag เปิด และ Tag ปิด โดย Tag ปิดมีรูปแบบเหมือน Tag เปิด แต่มีเครื่องหมาย / นำหน้า <ชื่อคำสั่ง> ข้อความที่ต้องการแสดง </ชื่อคำสั่ง> เช่น <HTML>… ข้อความที่ต้องการ... </HTML>
โครงสร้างภาษา HTML ในการเขียนภาษา HTML 1 หน้า จะต้องประกอบไปด้วยคำสั่งหลักอยู่ 4 คำสั่ง 1. <HTML>…</HTML> เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้น และจุดสิ้นสุด ของเอกสาร HTML 2. <HEAD>…</HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง 3. <TITLE>…<TITLE> เป็นคำสั่งที่กำหนดข้อความที่ต้องการ แสดงผล บนแถบชื่อเรื่อง 4. <BODY>…</BODY> เป็นคำสั่งที่ทำหน้าที่กำหนดข้อความและรูปแบบ คำสั่งใดๆ ที่ต้องการปรับแต่งเอกสารบนส่วนของจอภาพ และจะแสดงผล บนจอภาพเมื่อถูกเรียกใช้จาก Web Browser
รูปแบบมาตรฐานในการเขียนเว็บเพจ
คำาสั่งที่ใช้ในการกำหนดเอกสาร การกำหนดหัวเรื่อง (Heading Tag หรือ <Hn>) รูปแบบ <Hn ALIGN=“ตำแหน่งการจัดวาง”> ข้อความหัวเรื่อง </Hn> โดยที่ n เป็นหมายเลขกำหนดระดับของหัวเรื่อง มีค่าตั้งแต 1 ถึง 6 <H1>…</H1> หัวเรื่องมีขนาดใหญ่ที่สุด <H4>…</H4> หัวเรื่องมีขนาดปกติ <H6>…</H6> หัวเรื่องมีขนาดเล็กที่สุด
การกำหนดหัวเรื่อง <Hn> (ต่อ) ALIGN การกำหนดตำแหน่งการจัดวางหัวเรื่อง left กำหนดการจัดวางชิดซ้ายของบรรทัด (ค่าปกติ) center กำหนดการจัดวางกึ่งกลางของบรรทัด right กำาหนดการจัดวางชิดขวาของบรรทัด
การขีดเส้นแนวนอน <HR> (Horizontal line) <HR SIZE=“ความหนาของเส้น” WIDTH=“ความยาวของเส้น” ALIGN=“ตำแหน่งการวาง” COLOR=“สีของเส้น” NOSHADE> SIZE เป็นการกำหนดความหนาให้กับเส้น มีหน่วยเป็นพิกเซล WIDTH เป็นการกำหนดความยาวให้กับเส้น สามารถกำหนดเป็นเปอร์เซ็นต์ หรือ พิกเซลถ้าไม่ระบุตัวเลขใดๆ จะได้ความยาวเต็มจอภาพ
การขีดเส้นแนวนอน <HR> (Horizontal line) (ต่่อ) ALIGN การกำหนดตำแหน่งการจัดวางของเส้น left กำหนดการจัดวางชิดซ้ายของบรรทัด center กำหนดการจัดวางกึ่งกลางของบรรทัด right กำาหนดการจัดวางชิดขวาของบรรทัด COLOR สีของเส้น สามารถกำหนดสีมาตรฐาน และสีจากรหัสเลขฐาน 16 เช่น สีดำ สีมาตรฐานคือ BLACK สีจากเลขฐาน 16 คือ #000000 NOSHADE เป็นการกำหนดแสดงเส้นทึบไม่มีการแรเงาของเส้น
คำสั่งขึ้นบรรทัดใหม่่ <BR> (Break)
คำสั่งควบคุมการแสดงผลข้อความ <NOBR> (No Break) คำสั่งนี้ควบคุมการแสดงผลข้อความใน web browser เป็นบรรทัดเดียวโดยไม่มีการตัดข้อความให้ขึ้นบรรทัดใหม่ ซึ่งข้อความจะยาวเกินหน้าต่างของ web browser ผู้ใช้สามารถใช้ Scroll Bar ในการเรียกดูข้้อความที่ยาวเกินจากหน้าต่างได้้ รูปแบบ: <NOBR>ข้อความ</NOBR>
การกำหนดย่อหน้า <P> (Paragraph) <P ALIGN=“ตำแหน่งการวาง”> ข้อความ </P> ALIGN การกำหนดตำแหน่งการจัดวางย่อหน้า left กำหนดการจัดวางชิดซ้ายของบรรทัด center กำหนดการจัดวางกึ่งกลางของบรรทัด right กำหนดการจัดวางชิดขวาของบรรทัด
การจัดวางข้อ ความกึ่งกลางบรรทัด <CENTER> รูปแบบ <CENTER> ข้อความ </CENTER>
การจัดรูปแบบเอกสารตามทีผู้ใช้กำหนด<PRE> คำสั่งนี้ใช้ในการกำหนดการแสดงข้อความ และ ช่องว่างในเอกสารโดยที่บราวเซอร์จะแสดงผลตามตำแหน่งที่เราจัดวางไว้ที่เอกสารต้นฉบับ (Source Document) รูปแบบ <PRE> ข้อความ </ PRE >