วันเสาร์ที่ 29 กรกฎาคม พ.ศ. 2560

<HTML>

สำหรับ <HTML> นั้นเป็นคำสั่งหรือแท็กแรกในภาษา HTML ซึ่งเป็นคำสั่งที่แสดงให้รู้ว่า ไฟล์นี้เป็นไฟล์ HTML ซึ่งจะใช้ <HTML> ที่บรรทัดบนสุดและ </HTML> เป็นการปิดคำสั่ง HTML ซึ่งจะไว้ที่บรรทัดสุดท้าย เพื่อแสดงว่าจบไฟล์



<HEAD>
สำหรับแท็ก <HEAD> เป็นส่วนหัวของไฟล์ที่ใช้ใส่แท็กต่างๆ เช่น <TITLE>, <META>, <!DOCTYPE> เป็นต้น ส่วนนี้จะเป็นส่วนที่ถูกเรียกมาก่อนส่วนอื่นๆ และจะไม่แสดงผลออกทาง Browser


<BODY>

สำหรับแท็กนี้เป็นส่วนที่เริ่มต้นส่วนที่เป็นคำสั่งต่างๆ ที่จะแสดงยัง Browser ซึ่งข้อมูลทุกอย่างของเราที่จะนำมาแสดงต้องใส่ไว้ภายใต้คำสั่งนี้เท่านั้น แท็กนี้มีคำสั่งย่อยที่สำคัญ ดังนี้

1. BACKGROUND คือการกำหนดให้ Browser แสดงพื้นหลังด้วยรูปภาพ เช่น <BODY BACKGROUND= “bg.gif”> เป็นต้น

2. BGCOLOR คือการกำหนดให้ Browser แสดงพื้นหลังสีที่กำหนด เช่น <BODY BGCOLOR= “green” > เป็นต้น

3. TEXT คือการกำหนดให้ Browser แสดงอักษรเป็นสีที่กำหนด เช่น <BODY TEXT= “rad”> เป็นต้น



<META>
สำหรับแท็กนี้เป็นแท็กที่มีประโยชน์มากเลยทีเดียวในสมัยนี้ ไม่ว่าจะไว้สำหรับกำหนดภาษาที่จะแสดงผล ใช้เป็นเครื่องมือในการค้นหาเว็บ ของ Search Engine ต่างๆ ใส่ข้อความ คำอธิบายต่างๆ

1. NAME= “GENERATOR” ใช้บอกชื่อของผู้เขียนหรือชื่อโปรแกรมที่ใช้เขียน เช่น <META NAME=“GENERATOR” CONTENT= “ชื่อผู้เขียนหรือชื่อโปรแกรม”>

2. NAME= “DESCRIPTION” ใช้ใส่คำอธิบายของโฮมเพจเรา ซึ่งเป็นแท็กหนึ่งที่ Search Engine ใช้ในการค้นหาเว็บเรา เช่น

<META NAME= “DESCRIPTION” CONTENT= “ใส่คำอธิบาย”>

3. NAME= “KEYWORDS” ใช้ใส่คำสำคัญ หรือคำต่างๆที่เกี่ยวข้องกับเว็บเรา ซึ่งเป็นแท็กหนึ่งที่ Search Engine ใช้ในการค้นหาเว็บเรา เช่น

<META NAME= “KEYWORDS” CONTENT= “ใส่คำสำคัญ”>



<!- ->

สำหรับแท็กนี้เรียกว่าแท็ก Comment (หมายเหตุ) ใช้ในการทำหมายเหตุในเอกสาร HTML ซึ่งผู้ที่เปิดดูจาก Browser จะไม่สามารถมองเห็นได้ แต่จะสามารถอ่านได้จาก Taxt Edittor เท่านั้น รูปแบบการใช้ คือ <!- ข้อความ ->



<FONT>

สำหรับแท็กนี้ ก็จะเกี่ยวกับการแสดงผลของตัวอักษร เช่น ขนาด, สี, Font ของตัวอักษร เป็นต้น

1. SIZE ใช้กำหนดขนาดของ Font ให้มีขนาดต่างๆกัน โดยจะมีขนาดตั้งแต่ 1-7 ซึ่งขนาด

ที่ 1 จะมีขนาดเล็กที่สุดหรือเท่ากับ 8 pt และ ขนาด 7 จะมีขนาดใหญ่ที่สุดหรือเท่ากับ 36 pt

2. COLOR ใช้กำหนดสีของ Font ให้มีสีสันต่างๆ กัน โดยที่คุณสามารถใส่เป็นรหัสสีหรือชื่อก็ได้ เช่น <FONT COLOR= “#000000” > หรือ <FONT COLOR= “Black” > เป็นต้น

3. FACE ใช้กำหนด Font ที่จะให้ Browser แสดงผลด้วย Font ที่กำหนด เช่น <FONT FACE= “Angsana UPC” > เป็นต้น



<B>

สำหรับแท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดการแสดงผลของตัวอักษรแบบตัวหนา รูปแบบการใช้งานคือ <B> ข้อความ </B>

< I >

สำหรับแท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดการแสดงผลของตัวอักษรแบบตัวเอียง รูปแบบการใช้งานคือ < I > ข้อความ </I>

< U >

สำหรับแท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดการแสดงผลของตัวอักษรแบบตัวขีดเส้นใต้ รูปแบบการใช้งานคือ < U > ข้อความ </U>



< BR >

สำหรับแท็กนี้ เป็นแท็กที่ใช้สำหรับการขึ้นบรรทัดใหม่ มีรูปแบบการใช้งาน คือ <BR>



<CENTER>

สำหรับแท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดให้ข้อความภายในแท็กนี้ มีการจัดรูปแบบ แบบกึ่งกลาง มีรูปแบบการใช้งาน คือ <CENTER> ข้อความ </CENTER>



< HR>

สำหรับแท็กนี้ เป็นแท็กที่ใช้สำหรับการขีดเส้น ___________ โดยมีรูปแบบการใช้งานคือ <HR>



< P >

สำหรับแท็กนี้ เป็นแท็กที่ใช้สำหรับการขึ้นย่อหน้าใหม่ มีรูปแบบการใช้ คือ <P> ข้อความ </P>

1. ALIGN ใช้กำหนดลักษณะการจัดย่อหน้า บนหน้าจอ โดยจะมีค่าที่ใช้ คือ LEFT (วางแบบชิดซ้าย), RIGHT (วางแบบชิดขวา), CENTER (วางแบบกึ่งกลาง) ใช้งานคือ

<P ALIGN= “LEFT”> ข้อความ </P>

<P ALIGN= “RIGHT”> ข้อความ </P>

<P ALIGN= “CENTER”> ข้อความ </P>



<MARQUEE>

สำหรับแท็กนี้เป็นแท็กที่ใช้สำหรับ กำหนดการแสดงผลของตัวอักษรวิ่ง โดยมีรูปแบบการใช้งานคือ <MARQUEE> ข้อความ </MARQUEE> มีคำสั่งย่อย ดังนี้

1. WIDTH แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดความกว้างของพื้นที่ตัวอักษรวิ่ง โดยจะมีการกำหนดค่าเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ (%) มีรูปแบบการใช้งาน คือ

< MARQUEE WIDTH= “200” > หรือ < MARQUEE WIDTH= “20%” > เป็นต้น

2. HEIGHT แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดความสูงพื้นที่ตัวอักษรวิ่ง โดยจะมีการกำหนดค่าเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ (%) มีรูปแบบการใช้งาน คือ

< MARQUEE HEIGHT = “200” > หรือ < MARQUEE HEIGHT = “20%” > เป็นต้น

3. BGCOLOR แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดสีพื้นหลังที่เป็นสีที่กำหนด เช่น

< MARQUEE BGCOLOR = “green”> เป็นต้น

4. HSPACE สำหรับแท็กนี้ ใช้สำหรับกำหนดระยะห่างทางด้านซ้ายและขวาของตัวอักษรวิ่ง มีรูปแบบการใช้งาน คือ < MARQUEE HSPACE= “10”>ข้อความ </MARQUEE>

5. VSPACE สำหรับแท็กนี้ ใช้สำหรับกำหนดระยะห่างทางด้านบนและล่างของตัวอักษรวิ่ง มีรูปแบบการใช้งาน คือ < MARQUEE VSPACE= “10”>ข้อความ </MARQUEE>

6. LOOP ใช้กำหนดจำนวนรอบของตัวอักษรวิ่ง โดยจะมีค่าเป็นเลข ตั้งแต่ 1 ไปจนถึง Infinite หรือว่า Loop แบบไม่รู้จบ

7.BEHAVIOR ใช้กำหนดลักษณะการวิ่งของตัวอักษร โดยสามารถกำหนดได้ 3 แบบ คือ

ALTERNATIVE ตัวอักษรวิ่งจากขวามาซ้ายและซ้ายไปขวา กลับไปกลับมา

SCROLL ตัวอักษรวิ่งจากขวามาซ้าย

SLIDE ตัวอักษรวิ่งจากขวามาซ้ายแล้วหยุดนิ่ง

ตัวอย่าง < MARQUEE BEHAVIOR= “ALTERNATIVE” > ข้อความ </MARQUEE>

< MARQUEE BEHAVIOR= “SCROLL” > ข้อความ </MARQUEE>

< MARQUEE BEHAVIOR= “SLIDE” > ข้อความ </MARQUEE>



<TABLE>
สำหรับแท็กนี้ เป็นแท็กที่ใช้มากที่สุด และสำคัญที่สุดในการสร้างโฮมเพจของเรา สำหรับการสร้างตาราง โดยจะต้องใช้ควบคู่กับแท็ก <TR> และ <TD> เสมอในการสร้างตาราง โดยมีรูปแบบการใช้งาน ดังนี้

<TABLE> ------------------------------------------------------------> คำสั่งเปิดตาราง

<TR> ------------------------------------------------------------> หมายถึง แถว

<TD> ข้อความ </TD> <TD> ข้อความ </TD> -----------------------> หมายถึง คอลัมภ์

</TR> ------------------------------------------------------------> จบแถว

</TABLE> ------------------------------------------------------------> คำสั่งจบตาราง



จะเห็นว่าคำสั่ง <TR> นั้นคือ คำสั่งแถว และ คำสั่ง <TD> คือคำสั่ง คอลัมภ์ และคำสั่งคอลัมภ์นั้นจะเห็นว่าอยู่ภายใต้คำสั่ง <TR> ซึ่งก็คือ เมื่อใดที่ตารางมีแถว ก็ต้องมีคอลัมภ์อยู่ในแถว และในคอลัมภ์นั่นเองที่เป็นที่ใส่ข้อมูลต่างๆ จากด้านบนจะเห็นว่า คำสั่งนี้จะมี 1 ตาราง 1 แถว 2 คอลัมภ์ ส่วนการกำหนดรายละเอียดนั้น มีดังต่อไปนี้

1. WIDTH แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดความกว้างของตาราง โดยจะมีการกำหนดค่าเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ (%) มีรูปแบบการใช้งาน คือ <TABLE WIDTH= “200” > หรือ<TABLE WIDTH= “20%” > เป็นต้น

2. HEIGHT แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดความสูงของตาราง โดยจะมีการกำหนดค่าเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ (%) มีรูปแบบการใช้งาน คือ <TABLE HEIGHT = “200” > หรือ<TABLE HEIGHT = “20%” > เป็นต้น

3. ALIGN แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดลักษณะการวางตารางบนหน้าจอ โดยจะมีค่าที่ใช้คือ LEFT, RIGHT, CENTER เช่น <TABLE ALIGN = “CENTER” > เป็นต้น

4. BORDER แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดขนาดความหนาของกรอบตาราง โดยจะมีการกำหนดค่าเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ (%) มีรูปแบบการใช้งาน คือ <TABLE BORDER = “0” >(เมื่อไม่ต้องการมีกรอบ), หรือ <TABLE BORDER = “2” > เป็นต้น

5. CELLSPACING แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดระยะห่างระหว่างคอลัมภ์ของตาราง ด้านซ้าย-ขวา โดยจะมีการกำหนดค่าเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ (%) มีรูปแบบการใช้งาน คือ<TABLE CELLSPACING = “0” > (เมื่อไม่ต้องการมีระยะห่าง), หรือ <TABLE CELLSPACING = “2” > เป็นต้น

6. CELLPADDING แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดระยะห่างระหว่างคอลัมภ์ของตาราง ด้านบน-ล่าง โดยจะมีการกำหนดค่าเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ (%) มีรูปแบบการใช้งาน คือ<TABLE CELLPADDING = “0” > (เมื่อไม่ต้องการมีระยะห่าง), หรือ <TABLE CELLPADDING = “2” > เป็นต้น

7. BACKGROUND แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดสีพื้นหลังที่เป็นรูปภาพกับตาราง เช่น < TABLE BACKGROUND= “bg.gif”> เป็นต้น

8. BGCOLOR แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดสีพื้นหลังที่เป็นสีที่กำหนด เช่น < TABLE BGCOLOR = “green”> เป็นต้น

9. BORDERCOLOR แท็กนี้ เป็นแท็กที่ใช้สำหรับกำหนดสีของกรอบตารางให้เป็นสีที่กำหนด เช่น < TABLE BORDERCOLOR = “green”> เป็นต้น


ตัวอย่างคำสั่ง

คำสั่ง <br> ใช้สำหรับขึ้นบรรทัดใหม่คำสั่ง <b>ข้อความ</b> : กำหนดให้ข้อความเป็นตัวหนา
คำสั่ง <center>ข้อความ</center> : กำหนดให้ข้อความอยู่กลาง
คำสั่ง <img src="url"> : ใส่รูป
คำสั่ง <font color="#000000" size="10">ข้อความ</font> : กำหนดทั้งขนาดและสีข้อความ
คำสั่ง <img src="url" width="100px" height="100px"> : ใส่รูป แบบ กำหนดขนาด
แหล่งที่มา :https://sites.google.com/site/swaskrmaenkrathok/1-3-kha-sang-phasa-html
                    http://blog9amity.blogspot.com/2013/01/html.html