โครงสร้าง ภาษา HTML
โครงสร้างภาษาHTML ภาษา HTML สามารถสร้างขึ้นได้ จากโปรแกรมสร้างไฟล์ข้อความ (Text Editor) ทั่วๆไป เช่น “Notepad” สามารถเรียนรู้ได้ง่าย และยังมีขนาดเล็กอีก ด้วย ประเภทของไฟล์ HTML จะเป็นประเภท .html
คำสั่งในภาษา HTML หรือที่ เรียก ว่า “Tag” จะเขียนอยู่ในเครื่อง < และ > Tag จะ แบ่งได้อยู่ 2 กลุ่ม หลักๆคือ 1.Tag เดี่ยว เป็นแท็กที่ไมต้องใช้ เครื่องหมาย / (Slash) เช่น <br> , <img> 2.Tag คู่ เป็นแท็กที่ต้องใช้เครื่องหมาย / (Slash) เช่น <html>….</html>
โครงสร้างหลัก เป็นรูปแบบ มาตรฐานในการสร้างเว็บเพจ ประกอบด้วยคำสั่งหลักอยู่ 4 คำสั่ง ดังนี้ <html>…..</html> <head>…..</head> <title>…..</title> <body>….</body>
<HTML>…..</HTML> เป็นคำสั่งที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเว็บเพจ <HEAD>…..</HEAD> เป็นคำสั่งในส่วนหัวเรื่องของเว็บเพจ <TITLE>…..</TITLE> อยู่ภายใต้คำสั่งของ HEAD ทำหน้าที่ กำหนดข้อความแสดงบน Titlebar สามารถกำหนด ความยาว ได้ 64 ตัวอักษร
รูปแบบการเขียนมีดังนี้ <HTML> <HEAD> <TITLE> titlebar </TITLE> </HEAD> <BODY> เนื้อหา รายละเอียด </BODY> </HTML>
ตัวอย่าง
การประมวลผลจากตัวอย่างที่1 คำสั่ง <Title> คำสั่ง <body>
คำสั่งในการกำหนดหัวเรื่อง (Heading) เพื่อ ให้ตัวอักษรขนาดใหญ่กว่า ปกติ เช่น ชื่อ บท ชื่หัวข้อ เป็นต้น ซึ่งคำสั่ง <H> มี 6 ระดับ โดย ระดับ ที่ 1 จะ มี ขนาดตัวอักษร ใหญ่ที่สุด ส่วน ระดับที่ 6 จะมี ขนาดตัวอักษรเล็กที่สุด
รูปแบบของคำสั่ง <H> <H1> …... </H> <H2> ….. </H> <H3> ….. </H> <H4> ….. </H> <H5> ….. </H> <H6> ….. </H>
ตัวอย่าง <HTML> <HEAD> <Title>Heading</Title> <H1> Heading </H> <H2> Heading </H> <H3> Heading </H> <H4> Heading </H> <H5> Heading </H> <H6> Heading </H> </HTML>
การประมวลผลจากตัวอย่างที่ 2 ผลของคำสั่ง <H1> ผลของคำสั่ง <H6>
คำสั่งขึ้นบรรทัดใหม่ (Line Break) ในเอกสารทั่วไป เราจะขึ้นบรรทัดใหม่ โดยการกด Enter แต่ในการสร้างเอกสร้าง HTML เว็บบราวเซอร์จะถือว่า เป็นการเว้นวรรค 1 ช่องและใช้เป็นจุดตัดคำขึ้นบรรทัดใหม่ถ้ายาวเกินขนาดบรรทัด แต่ถ้าต้องการให้ เอกสารHTML ตัดข้อความ ณ ตำแหน่งที่ เรากำหนด จะใช้คำสั่ง <BR> โดย มีรูปแบบดังนี้
คำสั่งย่อหน้าบรรทัดใหม่ <BR> ใช้คำสั่งโดย <HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร <BR> วิทยาเขตเทเวศ </BODY> </HTML>
การประมวลผลตัวอย่างที่ 3
<TITLE> Break Line </TITLE> </HEAD> <BODY> HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร <BR><BR><BR> วิทยาเขตเทเวศ </BODY> </HTML>
ผลที่ได้ ผลของคำสั่ง <BR><BR><BR>
คำสั่ง <P> คำสั่ง <P> เป็นคำสั่งจัดวางย่อหน้าข้อความ <body> ข้อความ<P>ข้อความ </body>
ตัวอย่างการใช้ คำสั่ง <P> HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร <P> วิทยาเขตเทเวศ </BODY> </HTML>
ผลที่ได้จาก คำสั่ง <P>
คำสั่งเสริมช่วยของ <P> คำสั่งเสริมที่ช่วยในการจัดตำแหน่งของย่อหน้า คือ Alignment โดยมีรูปแบบดังนี้ <P Align=ตำแหน่ง>….ข้อความ….</p> ตำแหน่งที่ใช้ในการจัดย่อหน้า มีด้วยกันสามลักษณะ คือ Left จัดข้อความชิดซ้ายบรรทัด Center จัดข้อความกึ่งกลางบรรทัด Right จัดข้อความชิดขวาบรรทัด
ก่อนใช้คำสั่ง <P Align=Center> <HTML> <HEAD> <TITLE> :: ยินดีต้อนรับ ::</TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร วิทยาเขตเทเวศ</BODY> </HTML>
ก่อนใช้คำสั่ง <P Align=Center>
ตัวอย่าง การใช้คำสั่ง HTML> <HEAD> <TITLE> :: ยินดีต้อนรับ ::</TITLE> </HEAD> <BODY> <P Align=Center>มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร วิทยาเขตเทเวศ</P> </BODY> </HTML>
ผลที่ได้จากคำสั่ง <P Align=Center>