สรุปคำสั่ง 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

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

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

<CENTER> ข้อความ </CENTER>  คำสั่งจัดให้ข้อความอยู่กึ่งกลาง

<HTML> </HTML> คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม

<HEAD> </HEAD> คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย<TITLE> อยู่ภายใน

<TITLE> </TITLE>คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar

<BODY> </BODY>  คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น

<br>  คำสั่งขึ้นบรรทัดใหม่

<p> ข้อความ </p>            คำสั่งย่อหน้าใหม่

<hr width = "50%" size = "3">     คำสั่ง ตีเส้น, กำหนดขนาดเส้น

<font size = "3"> ข้อความ </font>       ขนาดตัวอักษร

<font color = "red"> ข้อความ </font>      สีตัวอักษร

<besefont size = "2"> ข้อความ </font>      กำหนดค่าเริ่มต้นของขนาดตัวอักษร

<b> ข้อความ </b>                                    ตัวอักษรหนา

<i> ข้อความ </i>                                     ตัวอักษรเอน

<u> ข้อความ </u>                                   ขีดเส้นใต้ตัวอักษร

h1, h2, h3 ,h4, h5, h6                                      คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่องซึ่งขนาดของ h1 จะใหญ่ที่

<body bgcolor ='……..'>                  คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง

<marquee>ข้อความ</marquee>            ข้อความเลื่อนจากขวาไปซ้าย

<marquee direction="left">ข้อความ</marquee>     ข้อความเลื่อนจากขวาไปซ้าย

<marquee direction="right">ข้อความ</marquee>  ข้อความเลื่อนจากซ้ายไปขวา

<marquee direction="up">ข้อความ</marquee>    ข้อความเลื่อนจากล่างขึ้นบน

<marquee direction="down">ข้อความ</marquee>  ข้อความเลื่อนจากบนลงล่าง

<marquee scrollamount="1">ข้อความ</marquee>   ข้อความเลื่อน แบบ กำหนดความเร็ว

©       &copy;

>          &gt;

 <        &lt;

÷          &divide;

¥           &yen;

 €           &euro;

(วรรค)      &nbsp;

 ®          &reg;

 Ψ       &psi;

Θ           &thete;

 ω        &omega;

→       &rarr;

↑        &uarr;

∑         &sum;

 ∩         &cap;

 ≤        &le;

≥          &ge;

←        &larr;

<OL value = "1" >

    <LI> รายการที่ 1

    <LI> รายการที่ 2

.

.

.

</OL>

การแสดงผลแบบรายการ ใช้คำสั่ง <OL> เป็นเริ่มและปิดท้ายด้วย </OL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการได้หลายแบบเช่น เรียงลำดับ 1,2,3... หรือ I,II,III... หรือ A,B,C,... ได้ทั้งนี้จะต้องเพิ่ม การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ

<UL type = "square">

    <LI> รายการที่ 1

    <LI> รายการที่ 2

.

.

.

</UL>

การแสดงผลแบบรายการ ใช้คำสั่ง <UL> เป็นเริ่มและปิดท้ายด้วย </UL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการ ที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการแบบต่างๆ ดังต่อไปนี้

- รูปวงกลมทึบ "disc"

- รูปวงกลมโปร่ง "circle"

- รูปสี่เหลี่ยม "square"

ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <UL type = "square"> เป็นต้นมคำสั่งเข้าไปที่ <OL value = "A"> เป็นต้น