การเเทรกตาราง

การสร้างตารางนั้น เราสามารถนำมาช่วยในการกำหนดตำแหน่งการแสดงผลของข้อมูลภายในเว็บเพจของเรา ได้ ว่าข้อมูลไหนต้องการแสดง ณ ตำแหน่งใดในเว็บเพจ โดยเราสามารถนำข้อมูลต่าง ๆ มาจัดแสดงในเซลล์ต่าง ๆ ของตารางได้ ทำให้สะดวกในการออกแบบการจัดว่างข้อมูล และทำให้การจัดว่างข้อมูลมีระเบียบเรียบร้อยอีกด้วย  

ในการสร้างตารางนั้นจะมี Tag ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้

1. การสร้างตาราง  <table> </table>
2. การสร้างแถวภายในตาราง  <tr> </tr> แท็กนี้ต้องอยู่ภายในแท็ก <table> </table>
3. การสร้างคอลัมน์ภายในแถวแต่ละแถว <td> </td> แท็กนี้ต้องอยู่ภายในแท็ก <tr> </tr>

 <table>...........</table>
เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง

<tr>............</tr>
เป็นคำสั่งที่ใช้กำหนดแถว (row)

<th>...........</th>
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง

<td>...........</td>
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว

 

การปรับความกว้าง

คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด  มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

การปรับความสูง

คำสั่ง HEIGHT  ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

 ตัวอย่างโค้ด

 ผลที่เเสดง

การจัดวางตาราง

LEFT - จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
RIGHT - จัดตารางชิดขวาของจอภาพ
CENTER - จัดตารางไว้กึ่งกลางของจอภาพ  

ตัวอย่างโค้้ด

ผลที่เเสดง

คำสั่ง Colspan และ Rowspan

คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้ รูปแบบคำสั่ง      <TD  COLSPAN = "Number"> โดยที่

• COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
• Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน

คำสั่ง <TD  ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
รูปแบบคำสั่ง     <TD  ROWSPAN = "Number">

โดยที่ 

• ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว
• Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน

 ตัวอย่างโค้ด

 ผลที่เเสดง

ที่มา
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang
http://www.thainextstep.com/html/html_08.php
http://www.aw.ac.th/web_html/011.htm

การแทรกและจัดการรูปภาพ

การแทรกและจัดการรูปภาพ

            การทำเว็บเพจในหนึ่งหน้า นอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพ เพื่อเพิ่มความน่าสนใจ ให้กับเว็บเพจ นอกจากนี้แล้วรูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ ดังคำกล่าวที่ว่า "หนึ่งภาพแทนพันตัวอักษร" การใส่รูปภาพในเอกสาร HTML นั้นจะต้องเตรียมรูปภาพไว้ก่อน โดยใช้แท็ก (Tag) สำหรับแสดงผลรูปภาพดังนี้

รูปแบบแท็ก (Tag) การใส่รูปภาพ สำหรับแฟ้มรูปภาพที่จัดเก็บใน Folder เดียวกับแฟ้ม Html

<img src = "ชื่อภาพ.ส่วนขยาย">

 

ตัวอย่างโค้ด

ผลที่เเสดง

หากมีการจัดเก็บรูปภาพไว้ต่าง Folder กับ แฟ้ม Html เช่น ถ้าแฟ้มรูปภาพถูกจัดเก็บในไดร์ว D: ชื่อ Folder ต่อไปนี้ M3 , Web site , Picture จะต้องแสดงที่อยู่ของแฟ้มข้อมูลให้ชัดเจน

<img src = "ชื่อเส้นทาง (Path)\ชื่อภาพ.ส่วนขยาย">
  
ตัวอย่างโค้ด

ผลที่เเสดง

      สำหรับแท็ก (Tag) การใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้ไม่ว่าจะเป็นขนาดความกว้าง ความสูง ของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูงเท่าไร ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของ ภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้

ความกว้าง width="ตัวเลขระบุความกว้าง (หน่วยเป็น Pixels)"
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ (หน่วยเป็น Pixels)"

ตัวอย่างโค้ด

ผลที่เเสดง

จากตัวอย่าง จะแสดงภาพขนาด 200x150 pix. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และมีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการให้ขอบมีความหนามาก ระบุตัวเลขให้มาก)

การวางตำแหน่ง

           การนำภาพมาแสดงในเวปเพจนั้นเป็นเพียงขั้นตอนแรก ๆ ต่อไปนี้เราต้องจัดภาพให้เข้ากับเนื้อหาที่มีอยู่ ใน HTML โดยมีรูปแบบคำสั่งดังนี้

Align ="รูปแบบการวางตำแหน่งของภาพ"

  โดยคำสั่งนี้จะถูกแทรกอยู่ในคำสั่ง <Img src...> ซึ่งรูปแบบการวางตำแหน่งของภาพมีดังนี้

รูปแบบตัวอักษร	คำสั่งที่ใช้
Left	ภาพแสดงทางซ้ายโดยมีข้อความล้อมอยู่ทางขวา
Right	ภาพแสดงทางขวาโดยมีข้อความล้อมอยู่ทางซ้าย
Top	ขอบบนของภาพตรงกับส่วนบนข้อความ
Bottom	ขอบล่างของภาพตรงกับส่วนล่างสุดของข้อความ
Center	ตรงกลางของภาพตรงกับกึ่งกลางของข้อความ

    <Img src=”100.jpg” align=” Left / Right / Top / Bottom / Center”>

ตัวอย่างโค้ด

ผลที่เเสดง

ที่มา

http://www.thainextstep.com/html/html_06.php
http://www.aw.ac.th/web_html/010.htm
http://www.siamzone.com/board/view.php?sid=3405335 

การแต่งตัวอักษร

การใส่รูปแบบอักษร

≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

ในเอกสาร HTML ถ้าเราไม่ได้กำหนดแบบตัวอักษร เมื่อแสดงบนบราวเซอร์ จะแสดงตัวอักษรที่เป็น ค่าพื้นฐาน (Default) หากเราต้องการกำหนดแบบตัวอักษรเอกสามารถทำได้โดยใช้ Tag<font>

รูปแบบการใช้คำสั่ง

<font face="ชื่อแบบตัวอักษรที่ต้องการ">.............ข้อความ............</font>

การกำหนดขนาดตัวอักษร

≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

เราสามารถกำหนดขนาดของมันเองได้ถึง 7 ระดับ โดยกำหนดได้ด้วยตัวเลขเลยหรือแบบที่2 กำหนดโดยใส่ค่า +/- แล้วกำหนดระดับอีกที 

รูปแบบการใช้คำสั่ง

 <FONT Size="......">......</FONT>

การกำหนดสีตัวอักษร
≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

รูปแบบการใช้คำสั่ง

สีของตัวอักษร สามารถกำหนดได้ 2 แนวทางคือ 

 1. ใช้คำสั่ง <FONT COLOR=ชื่อสี>

2. ใช้คำสั่ง <FONT COLOR=รหัสสี>

การกำหนดลักษณะและแบบของตัวอักษร

≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

 ลักษณะของตัวอักษรลักษณะของตัวอักษร สามารถกำหนดได้ 3 แบบคือ

<B>ตัวหนา</B>

<I>ตัวเอียง</I>
<U>ขีดเส้นใต้ตัวอักษร</U>

ตัวขีดฆ่า ใช้คำสั่ง <S>...</S>

ตัวอักษรยกขึ้น ใช้คำสั่ง <SUP>...</SUP>
ตัวอักษรห้อยลง ใช้คำสั่ง <SUB>...</SUB>

การทำตัวอักษรวิ่่ง

 ≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

รูปแบบการใช้คำสั่ง

                              <MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง"   height="ความสูง"

 scrollamount=ความเร็วในการวิ่ง  scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>

 

การทำตัวอักษรกระพริบ

 ≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

รูปแบบการใช้คำสั่ง

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

กำหนดตำแหน่งข้อความ

 ≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

LEFT จัดชิดซ้าย

CENTER จัดกึ่งกลาง

RIGHT จัดชิดขวา

รูปแบบการใช้คำสั่ง

 <p align="left | center | right | justify">...</p>

 

  

≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛ ที่มา ≛≛≛≛≛≛≛≛≛≛≛≛

http://www.pyayam.com/html/font_blink.php 
http://school.obec.go.th/krurenu/html/p2-2.html

 http://school.obec.go.th/krurenu/html/p2-4.html