สรุปคำสั่งhtml [2]

ใบงาน สรุปคำสั่งHTML [2]

1. การใส่ภาพ

<IMG SRC="ที่อยู่/ชื่อ">

เช่น <IMG SRC="http://www..../test.jpg">
นอกจากนี้ยังสามารถจัดตำแหน่งต่างๆโดยใช้ ALIGN เช่น

<IMG SRC="TEST>JPG" ALIGN=baseline> 

โดยมีการกำหนดค่าของ ALIGN ดังนี้

• LEFT → ไว้ทางซ้าย RIGHT ไว้ทางขวา
• TOP → ขอบบนของรูปภาพจะอยู่ในแนวเดียวกับจุดสูงสุดของอักษรหรือรูปภาพที่อยู่บรรทัดเดียวกัน
• TEXTTOP → ขอบบนของรูปภาพจะอยู่ในแนวเดียวกับจุดสูงสุดของอักษร
• MIDDLE → จุดกึงกลางของภาพจะอยู่กลางความสูงอักษร
• ABSMIDDLE → จัดตำแหน่งข้อความเฉพาะที่อยู่ในแนวเดียวกันกับภาพให้ตรงกับจุดกึงกลางของอักษร
• BASELINE → ขอบล่างสุดจะตรงกับ baseline ของอักษร
• BOTTOM → เหมือนกับ baseline
• ABSBOTTOM → ขอบล่างสุดอยู่ในแนวต่ำสุดของอักษร

2. การแปลงข้อความให้เป็นลิงก์

<A HREF="http://...."> ข้อความ </A>

3. การแปลงภาพให้เป็นลิงก์

<A HREF="http://...."> <IMG SRC="...."></A>

4. คำสั่งสร้างตาราง

<TABLE>

<TR>

<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 1 </TD>

<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 2 </TD>

</TR>

<TR>

<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 1 </TD>

<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 2 </TD>

</TR> </TABLE>

5. เพิ่ม BGCOLOR 

ใน <TABLE> , <TR> , <TD> ใช้กำหนดสีพื้นหลังของตาราง

6. เพิ่ม BORDERCOLOR 

ใน <TABLE> , <TR> , <TD> เพื่อกำหนดสีของขอบตาราง

7. เพิ่ม BACKGROUND 

ใน <TABLE> , <TR> , <TD> เพื่อกำหนดภาพพื้นหลังของตาราง  เช่น

<BODY TEXT=WHITE>

<TABLE BORDER=10 BGCOLOR=BLACK BORDERCOLOR=RED>

<TR BACKGROUND="AAA.JPG">

ข้อควรระวัง ในเว็บเบราเซอร์บางตัวอาจไม่แสดงผลในบางคำสั่งเช่น แสดงใน Netscape Navigator แต่ไม่แสดงใน Microsoft Internet Explorer บางรุ่นเป็นต้น

8. กำหนดจุดเชื่อมชื่อ news ส่วน "a name" คือตำแหน่งที่ลิงค์ไป (เอกสารเดียวกัน)

<a href ="#news"> Hot News </a> , <a name ="news"> 

9.  สร้างลิงค์ไปยังเอกสารชื่อ "news.html"

<a href ="news.html"> Hot News </a> 

10. การใช Stylesheet  กําหนด สีของLink

โดยกําหนดแท็ก<STYLE> และแท็กอื่นๆดานลางนี้ไวภายในแท็ก <HEAD> 

<STYLE type="text/css">

<!—

A:link { color:white }

A:visited { color:yellow }

A:hover { color:RED }

A:active { color:green }

-->

</STYLE>

สรุปคำสั่ง HTML

สรุปคำสั่ง HTML

⦽คำสั่งพื้นฐาน⦽

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

🔺<p> ....... </p>      ⇛       คำสั่งย่อหน้าใหม่

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

🔺 &nbsp;  ⇛  คำสั่ง เพิ่มช่องว่าง

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

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

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

🔺<TITLE> </TITLE>     ⇛        คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar
🔻<BODY> </BODY>     ⇛       คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวป

                                                 บราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น

⦽คำสั่งรูปแบบตัวอักษร⦽

🔺<font size = "3">............ </font>  ⇛  ขนาดตัวอักษร

🔻<font color = "red"> ...........</font>  ⇛  สีตัวอักษร

🔺<font face = "Arial"> ............</font> ⇛  รูปแบบตัวอักษร

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

🔺<b> ............... </b> ⇛   ตัวอักษรหนา

🔻<i> ............... </i>   ⇛   ตัวอักษรเอน

🔺<u> ................... </u>   ⇛  ขีดเส้นใต้ตัวอักษร

🔻<h1> ......</h1>   ⇛   เป็นแท็กสำหรับกำหนดหัวข้อให้เป็นตัวอักษรขนาดใหญ่สุดถึงเล็กสุดกำหนดใด

                                   ไม่เกิน 6 

🔺<br>     ⇛    ขึ้นบรรทัดใหม่ 

🔻<hr>     ⇛    ขีดเส้นคั่น 

🔺 <P>   ⇛    เว้นเป็นย่อหน้าใหม่โดยจะเว้นบรรทัดให้ 1 บรรทัดด้วย

🔻<BIG>  ⇛  เพิ่มขนาดตัวอักษรขึ้น 1 ระดับ

⦽การแสดงผลแบบรายการแบบมีหมายเลขกำกับ⦽

<OL value = "1" > 

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

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

</OL> 

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

⦽การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ⦽

<UL type = "square"> 

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

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

</UL> 

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

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

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

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

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