สรุปคำสั่ง HTML (2)

สรุปคำสั่ง HTML (2)

การใส่ตาราง

<TABLE BORDER = "2" >

<CAPTION> การสร้างตาราง </CAPTION>

    <TR> <TH> หัวเรื่อง 1 </TH>

    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>

    <TD> ข้อมูล 2 </TD> </TR>

</TABLE>

การสร้างตาราง ใช้คำสั่ง <TABLE> เป็นเริ่มและปิดท้ายด้วย </TABLE> ส่วน BORDER เป็นคำสั่งย่อยเพื่อใช้ กำหนดขนาดของเส้นตาราง ถ้ากำหนด = "0" จะหมายถึงไม่มีเส้น

- คำสั่ง <CAPTION> และ< /CAPTION> เป็นคำสั่งแสดงข้อความอธิบายชื่อตาราง

- คำสั่ง <TR> และ< /TR> เป็นคำสั่งเพื่อกำหนดแถวในตาราง

- คำสั่ง <TH> และ< /TH> เป็นคำสั่งเพื่อกำหนดหัวเรื่อง ผลลัพธ์ที่ได้คือตัวอักษรจะหนากว่าปกติ (ดูตัวอย่างประกอบ)

- คำสั่ง <TD> และ< /TD> เป็นคำสั่งแสดงข้อมูลปกติ

ความหมายของคำสั่ง Table

- TR หมายถึง Table Row

- TH หมายถึง Table Head

- TD หมายถึง Table Data

<TABLE width = "…%" height = “…%" >

<CAPTION> ขนาดของตาราง </CAPTION>

    <TR> <TH> หัวเรื่อง 1 </TH>

    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>

    <TD> ข้อมูล 2 </TD> </TR>

</TABLE>

การตกแต่งตาราง ใช้คำสั่ง Width และ Height เป็นคำสั่งในการกำหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เช่น กำหนด Width = "……%" หมายถึง กำหนดความกว้างของตารางให้มีขนาดต่างๆ  เมื่อวัดตามความกว้างของจอภาพ เป็นต้น โดยปกติเราจะกำหนดอย่างใดอย่างหนึ่ง เช่น <TABLE width = "50%" >

<TABLE width = "……%" bgcolor = "….." >

<CAPTION> สีฉากหลังของตาราง </CAPTION>

    <TR> <TH> หัวเรื่อง 1 </TH>

    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>

    <TD> ข้อมูล 2 </TD> </TR>

</TABLE>

สีฉากหลังของตาราง

<TABLE width = "50%">

    <TR> <TH bgcolor = "brown" > หัวเรื่อง 1 </TH>

    <TH bgcolor = "white"> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD bgcolor = "green" > ข้อมูล 1 </TD>

    <TD bgcolor = "blue" > ข้อมูล 2 </TD> </TR>

</TABLE>

กำหนดสีแต่ละช่องในตาราง

<TABLE bgcolor = "red">         ใส่สีกรอบของตาราง

การใส่รูป

<IMG SRC="ที่อยู่/ชื่อ">     การใส่ภาพ

<IMG SRC="TEST>JPG" ALIGN=baseline>    การกำหนดค่าของ ALIGN โดย

LEFT ไว้ทางซ้าย RIGHT ไว้ทางขวา

TOP ขอบบนของรูปภาพจะอยู่ในแนวเดียวกับจุดสูงสุดของอักษรหรือรูปภาพที่อยู่บรรทัดเดียวกัน

TEXTTOP ขอบบนของรูปภาพจะอยู่ในแนวเดียวกับจุดสูงสุดของอักษร

MIDDLE จุดกึงกลางของภาพจะอยู่กลางความสูงอักษร

ABSMIDDLE จัดตำแหน่งข้อความเฉพาะที่อยู่ในแนวเดียวกันกับภาพให้ตรงกับจุดกึงกลางของอักษร

BASELINE ขอบล่างสุดจะตรงกับ baseline ของอักษร

BOTTOM เหมือนกับ baseline

ABSBOTTOM ขอบล่างสุดอยู่ในแนวต่ำสุดของอักษร

<IMG SRC="……….. " BORDER=……>         กำหนดความกว้างของกรอบ

<BODY BACKGROUND="…….">     การซ้อนภาพเป็นพื้นหลัง

การเชื่อมโยง

<A HREF="…….."> ข้อความ </A>       การแปลงข้อความให้เป็นลิงก์

<A HREF="……….” <IMG SRC="...."></A>      การแปลงภาพให้เป็นลิงก์

การใส่ลิ้งค์จาก youtube

1.เข้าไปที่ www.youtube.com แล้วเลือก VDO ที่คุณต้องการ

2.กดเลือก แบ่งปัน

3.เลือกที่ "ฝัง"

4.คัดลอก

5.นำมาวางบน HTML

ที่มาของข้อมูล

-https://www.justmakeweb.com

-http://www.oocities.org/thaibrains99/HTMLnote.htm 

-http://janphar.lpru.ac.th/wanasiri/htmltag.html