โครงสร้าง ภาษา HTML

โครงสร้าง ภาษา 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การประมวลผลจากตัวอย่างที่1 คำสั่ง <Title> คำสั่ง <body>

คำสั่งในการกำหนดหัวเรื่อง (Heading) เป็นการกำหนดหัวเรื่อง จะใช้คำสั่ง <H> เพื่อ ให้ตัวอักษรขนาดใหญ่กว่า ปกติ เช่น ชื่อ บท ชื่หัวข้อ เป็นต้น ซึ่งคำสั่ง <H> มี 6 ระดับ โดย ระดับ ที่ 1 จะ มี ขนาดตัวอักษร ใหญ่ที่สุด ส่วน ระดับที่ 6 จะมี ขนาดตัวอักษรเล็กที่สุด

รูปแบบของคำสั่ง <H> <H1> …... </H> <H2> ….. </H> <H3> ….. </H> <H4> ….. </H> <H5> ….. </H> <H6> ….. </H>

ตัวอย่าง <HTML> <HEAD> <Title>Heading</Title> </HEAD> <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

ยิ่ง เพิ่ม คำสั่ง <BR> บรรทัดยิ่งเว้นมากขึ้น เช่น HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร <BR><BR><BR>วิทยาเขตเทเวศ </BODY> </HTML>

ผลที่ได้ ผลของคำสั่ง <BR><BR><BR>

คำสั่ง <P> คำสั่ง <P>เป็นคำสั่งจัดวางย่อหน้าข้อความ การใช้ คำสั่ง <P> <body> ข้อความ<P>ข้อความ </body>

ตัวอย่างการใช้ คำสั่ง <P> HTML> <HEAD> <TITLE> Break Line </TITLE> </HEAD> <BODY> มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร<P>วิทยาเขตเทเวศ </BODY> </HTML>

ผลที่ได้จาก คำสั่ง <P> ผลคำสั่ง ของ <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>

โครงสร้าง ภาษา HTML