Get Started. It's Free
or sign up with your email address
Rocket clouds
HTML TAG by Mind Map: HTML TAG

1. โครงสร้างของเอกสาร html

1.1. รูปแบบ

1.1.1. <HTML>...</HTML> เป็นคำสั่งเริ่มต้น และ สิ้นสุดของเอกสาร html

1.1.2. <HEAD>...</HEAD> ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่อง

1.1.3. <TITLE>...</TITLE> เป็นส่วนแสดงชื่อของเอกสาร โดยจะแสดงที่ไตเตลบาร์ของเว็บบราวเซอร์

1.1.4. <BODY>..</BODY> ตรงนี้จะใส่คำสั่งต่างๆที่เพื่อให้ได้ผลตามต้องการ

1.2. ตัวอย่าง

1.2.1. <html> <head> <title>.ข้อความ ชื่อเรื่อง.</title> </head> <body> .......... คำสั่ง ข้อความ ........ </body> </html>

2. การจัดรูปแบบพารากราฟ

2.1. รูปแบบ

2.1.1. <P>

2.1.1.1. ความหมาย สำหรับย่อหน้าใหม่ โดยเว้นบรรทัดว่าง 1 บรรทัด

2.1.2. <P ALGIN=type> ... </P>

2.1.2.1. ความหมาย สำหรับกำหนดวางตำแหน่งข้อความในพารากราฟ โดยที่ type อาจจะเป็น LEFT,CENTER หรือRIGHT ซึ่งเป็นการกำหนดให้วางชิดซ้าย กึ่งกลาง หรือ ชิดขวา เช่น <P ALIGN=CENTER>ข้อความ </P> จะทำให้ข้อความอยู่กึ่งกลางเอกสาร

2.1.3. <BR>

2.1.3.1. ความหมาย ขึ้นบรรทัดใหม่ เหมือนกับการกดคีย์ ENTER บนคีย์บอร์ด

2.1.4. <CENTER> ... </CENTER>

2.1.4.1. ความหมาย ใช้กำหนดกลุ่มข้อความ หรือรูปภาพ ให้แสดงผลที่กึ่งกลางหน้าเอกสาร

2.1.5. <HR ALGIN=type COLOR=color SIZE=n WIDTH=n NOSHADE>

2.1.5.1. ความหมาย สำหรับแบ่งข้อความบนจอภาพให้มีเส้น ณ ตำแหน่งที่ต้องการ กำหนดตำแหน่ง สี ขนาดของความหนา ความยาว หรือเป็นเส้นทึบ โดยที่ALIGN = CENTER,LEFT หรือRIGHTCOLOR = รหัสสีที่ต้องการSIZE = เป็นตัวเลขบอกขนาด 1 ถึง 7 และ -1 ถึง -7WIDTH = กำหนดความหนาของเส้นเป็น%NOSHADE =กำหนดให้เป็นเส้นทึบ

2.1.6. <BLOCKQUOTE>... </BLOCKQUOTE>

2.1.6.1. ความหมาย กำหนดกลุ่มข้อความให้เยื้องขวา และ ขึ้นบรรทัดใหม่ที่ตำแหน่งเดียวกัน

2.1.7. <PRE>..</PRE>

2.1.7.1. ความหมาย กำหนดกลุ่มข้อความให้แสดงผลกับที่ปรากฏในเอกสาร HTML

3. ลิสต์แบบเครื่องหมายหน้ารายการไม่เรียงลำดับ

3.1. รูปแบบ

3.1.1. <UL type=n > <LI> ข้อมูล1 </LI> <LI> ข้อมูล2 </LI> ........................ </UL>

3.2. ตัวอย่าง

3.2.1. ผลไม้ <ul type=circle> <li>ทุเรียน </li> <li>ลำไย </li> <li>องุ่น </li> </ul> ********* ผลไม้ ทุเรียน ลำไย องุ่น

4. ลิสต์แบบค่าจำกัดความ

4.1. รูปแบบ

4.1.1. <DL> <DT>หัวข้อ </DT> <DD>รายการ</DD> <DT>หัวข้อ</DT> <DD>รายการ</DD> ...................... </DL>

5. ลิสต์แบบเครื่องหมายหน้ารายการเรียงลำดับ

5.1. รูปแบบ

5.1.1. <OL start=x type=n > <LI> ข้อมูล1 </LI> <LI> ข้อมูล2 </LI> ........................ </OL>

5.2. ตัวอย่าง

5.2.1. ผลไม้ <ol type=1 start=4> <li>ทุเรียน </li> <li>ลำไย </li> <li>องุ่น </li> </ol> *********** ผลไม้ ทุเรียน ลำไย องุ่น

6. การเติมสีสันให้เอกสารของเราดูมีสีสันสดใส

6.1. รูปแบบ

6.1.1. <BODY BGCOLOR="#color"> ... </HTML>

6.1.1.1. ความหมาย กำหนดสีแบ๊คกราวนด์ ให้กับเอกสาร โดยใช้แท็กของ <BODY> เช่น <BODY BGCOLOR= "#ff0000"> จะกำหนดเป็นสีแดง

6.1.2. <BODY TEXT="#color"> ... </HEAD>

6.1.2.1. ความหมาย กำหนดสีตัวอักษร โดยใช้แท็กของ <BODY>เช่น <BODY TEXT= "#00ff00"> จะเป็นการกำหนดตัวอักษรเป็นสีเขียวทั้งเอกสาร

6.1.3. <FONT COLOR="#color"> ...</FONT>

6.1.3.1. ความหมาย กำหนดสีให้กับตัวอักษรเฉพาะที่ หรือ เฉพาะตัวอักษรที่ต้องการ โดยใช้แท็กของ <FONT> เช่น<FONT COLOR= "#ff0000">ทดลองสี่</FONT> จะเป็นการกำหนดให้คำว่า "ทดลองสี" เป็นสีแดง ต้องดูการกำหนดสีที่แบ๊คกราวนด์ด้วย ว่าซ้ำกันไหม

7. รูปแบบอักษร

7.1. รูปแบบ ย่อมาในส่วนที่ส่วนมากจะจำเป็นต้องใช้

7.1.1. <Hn>...</Hn>

7.1.2. <FONT FACE="font name">...</FONT>

7.1.3. <FONT SIZE=n>...</FONT>

7.1.4. <FONT COLOR=color> ....</FONT>

7.1.5. <B>....</B>

7.1.6. <I>....</I>

7.1.7. <U>....</U>

7.1.8. <STRIKE> ....</STRIKE>

7.1.9. <BLINK> ....</BLINK>

7.1.10. <BIG>....</BIG>

7.1.11. <SMALL> ....</SMALL>

7.1.12. <SUB>....</SUB>

7.2. ตัวอย่าง

7.2.1. <html> <head> <title>.ข้อความ ชื่อเรื่อง.</title> </head> <body> .......... คำสั่ง ข้อความ ........ </body> </html>