การแทรกตาราง

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

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

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

ตัวอย่าง โครงสร้างของการสร้างตารางในภาษา HTML

<TABLE> 

<CAPTION> ชื่อตาราง </CAPTION>

<TR>

<TH> ข้อมูลส่วนหัว </TH>

</TR> 

<TR> 

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

</TR>

<TR> 

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

</TR> 

</TABLE>

ตัวอย่าง การสร้างตาราง

                เมื่อพิมพ์ข้อมูลตามตัวอย่างเสร็จแล้วให้จัดเก็บชื่อ TEST_TABLE.HTM และทำการแสดง ผลลัพธ์บนเว็บเบราว์เซอร์จะได้ผลลัพธ์ ดังนี้

คำสั่ง ต่างๆที่ใช้ในการตกแต่งตารางของภาษา HTML 

BORDER ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel 
ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย BORDER ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกติ คือจะไม่เห็นเส้นขอบของตาราง

       จะได้ผลดังนี้

                                                                          

ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ 

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

ตัวอย่าง การสร้างตารางอยู่กึ่งกลางจอภาพ

ทำการแสดงผลลัพธ์บนเว็บเบราว์เซอร์ สังเกตผลลัพธ์ที่ได้จะได้ผลลัพธ์ ดังนี้

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

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

Colspan และ Rowspan 

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

รูปแบบคำสั่ง  <TD  COLSPAN = "Number">- COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์

- Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน

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

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

ผลลัพธ์

ที่มา

http://www.bankaeng.ac.th/k.npd/p28.htm

https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang

การแทรกรูปภาพ

 การแทรกรูปภาพ 

ตามปกติภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .JPG หรือ .GIF เพราะเป็นไฟล์ภาพที่มีขนาดเล็ก สามารถแสดงผลได้รวดเร็ว จึงไม่ต้องเสียเวลาในการรอให้ภาพปรากฏนานเกินไป

 1. ในกรณีที่ไฟล์รูปภาพอยู่ที่เดียวกับเว็บเพจ

Code : <IMG SRC = "ชื่อไฟล์รูปภาพ . นามสกุลไฟล์รูปภาพ">

code ที่เขียนใน notepad คือ

ผลที่แสดงได้

 2.ในกรณีที่ไฟล์รูปภาพอยู่คนละที่กับเว็บ

Code : <IMG SRC = "แฟ้มที่อยู่ของไฟล์รูปภาพ /ชื่อไฟล์ภาพที่เราต้องการแสดง.นามสกุลของภาพ">
code ที่เขียนใน notepa <img src= "img/02.jpg">

ผลที่แสดงได้

การปรับขนาดของภาพ

ในการแทรกภาพเข้าสู่เอกสาร html นั้นขนาดของภาพอาจไม่ตรงตามที่เราต้องการ ซึ่ง html มีคำสั่งสำหรับปรับขนาดภาพโดยนำ width="" height="100" ไปต่อท้ายชื่อภาพภายในคำสั่งแสดงภาพ แล้วปรับขนาดภาพตามต้องการ  ดังตัวอย่าง

<img src="ที่จัดเก็บภาพ\ชื่อภาพ.JPG" width="250" height="350"/>

code ที่เขียนใน notepad คือ

ผลที่แสดงได้

<img src="ที่จัดเก็บภาพ\ชื่อภาพ.JPG" width="700" height="500"/>

code ที่เขียนใน notepad คือ

ผลที่แสดงได้

(1) ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ

 <LEFT><IMG SRC="ชื่อภาพ.jpg" ></LEFT>

code ที่เขียนใน notepad คือ

ผลที่แสดงได้

 (2) ALIGN=RIGHT กำหนดให้รูปภาพอยู่กึ่งกลางของข้อความ

<CENTER><IMG SRC="ชื่อภาพ.jpg" ></CENTER>

code ที่เขียนใน notepad คือ

ผลที่แสดงได้

3.ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ

<P ALIGN =RIGHT><IMG SRC="ชื่อภาพ.jpg" ></ RIGHT>

code ที่เขียนใน notepad คือ

ผลที่แสดงได้

ที่มา

http://www.anut.smfnew.com/index.php?topic=1091.0

http://school.obec.go.th/krurenu/html/p4-2.html

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

การกำหนดแบบตัวอักษร (Font)

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

อธิบายคำสั่ง

<FONT FACE="ชื่อฟ้อนต์ที่ใช้"> เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

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

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

ตัวอย่าง

การแสดงผล

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

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

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

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

ตัวอย่าง

การแสดงผล

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

การกำหนดสีตัวอักษร  สามารถกำหนดให้เป็นสีเดียวกันทั้งเวบเพจ  หรือกำหนดให้มีสีที่แตกต่างกันในเว็บเพจเดียวกันก็ได้

เราสามารถกำหนดค่าสีได้ 2 แบบ คือ

1. สี="#xxxxxx" ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด           1 ชุดแทนด้วยตัวอักษร 2 ตัว

    แสดงค่าของแม่สี แดง เขียว นํ้าเงิน (RGB)โดยเขียนตามหลังเครื่องหมาย #

    เช่น"#FFFFFF" จะให้ สีขาว ,"#000000" จะให้ สีดำ

2. สี=color ระบุสีลงไปเลย เช่น white,black,blue,red

อธิบายคำสั่ง

<FONT COLOR="ชื่อสี"> เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ

</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

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

<font color="#0000FF">Thanasarun</font> 

ตัวอย่าง

การแสดงผล

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

        

เป็นการกำหนดลักษณะตัวอักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด ก็จะแสดงผลเหมือนกัน เช่น การกำหนดให้ตัวอักษรเป็นตัวหนา ตัวเอียง ตัวขีดฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกำลังในสูตรทางคณิตศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทางวิทยาศาสตร์ เป็นต้น

อธิบายคำสั่ง

<B>...</B>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม

<I>...</I>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง

<S>...</S>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า

<U>...</U>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้

<STRIKE>.....</STRIKE>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า

<SUP>...</SUP>

เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script

<SUB>...</SUB>

เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script

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

แบบตัวอักษร                         โค้ท

ตัวอักษรปกติ                         ไม่ต้องใส่โค้ท

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

ตัวเอียง                                 <i>.....</i>

ตัวขีดเส้นใต้                          <U>.....</U>

             ตัวอักษรขีดฆ่า                       <STRIKE>.....</STRIKE>

ตัวอักษรยกกำลัง                    <SUP>.....</SUP>

ตัวอักษรห้อย                         <SUB>.....</SUB>

ตัวอย่าง

 แบบ  ตัวอักษรปกติ,ตัวหนา,ตัวเอียง, ,ตัวอักษรขีดฆ่า,ตัวอักษรยกกำลัง,ตัวอักษรห้อย

การแสดงผล

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

          

        นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์นำไปใช้ในการตกแต่งเวบเพจ

รูปแบบคำสั่ง 

HTML ที่ใช้ในการทำตัวอักษรวิ่ง

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

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

หมายเหตุ  ใช้ได้เฉพาะ Internet Explorer

ตัวอย่าง

การแสดงผล

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

 ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป

หมายเหตุ ในการกำหนดตัวอักษรกระพริบนั้น เราไม่สามารถเปิดในโปรแกรมเว็บเบราเซอร์ที่เป็น Internet Explorer ได้ (สามารถใช้ได้กับ Netscape )

  

รูปแบบคำสั่ง

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

ตัวอย่าง

การแสดงผล

การขึ้นย่อหน้าใหม่ และกำหนดตำแหน่ง

ข้อความ (Paragraph)

ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align  และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ

รูปแบบคำอธิบาย

LEFT จัดชิดซ้าย

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

RIGHT จัดชิดขวา

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

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

ตัวอย่าง

การแสดงผล

ที่มา 

-http://www.pyayam.com/html/font_blink.php   
                                                                                     
-http://html-language.blogspot.com/2009/05/html.html   

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

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