วันอาทิตย์ที่ 8 กันยายน พ.ศ. 2556

การสร้างตาราง

1. คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML มีดังนี้

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

เป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง

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

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

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

โครงสร้างของตาราง

<TABLE>
            <CAPTION> ชื่อตาราง </CAPTION>
            <TR>
                     <TH> ข้อมูลส่วนหัว </TH>
            </TR>
            <TR>
                     <TD> ข้อมูล </TD>
             </TR>
             <TR>
                     <TD> ข้อมูล </TD>
             </TR>
</TABLE>

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

ผลลัพธ์

---------------------------------------------------------------

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

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

ตัวอย่างการใช้คำสั่ง BORDER

ผลลัพธ์

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

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

- RIGHT คือ จัดตารางชิดขวาของจอภาพ

- CENTER คือ จัดตารางไว้กึ่งกลางของจอภาพ

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

ผลลัพธ์

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

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

2.5 คำสั่ง BGCOLOR เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ Internet Explorer เท่านั้น

ตัวอย่างการใช้คำสั่ง WIDTH , HEIGHT , BGCOLOR

ผลลัพธ์

2.5 คำสั่ง CELLSPACING ใช้กำหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความหนาของเส้นขอบตาราง

ผลลัพธ์

2.6 คำสั่ง CELLPADDING ใช้กำหนดระยะห่างระหว่างบรรทัดของตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความสูงของเส้นขอบตาราง

ผลลัพธ์

2.7 คำสั่ง Colspan และ Rowspan

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

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

ผลลัพธ์

วันเสาร์ที่ 7 กันยายน พ.ศ. 2556

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

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

การกำหนดแบบอักษร

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

ตัวอย่างแท็ก

<HTML>

<HEAD>

<TITLE> การกำหนด Font ที่จะใช้ในเว็บเพจ </TITLE>

</HEAD>

<BODY>

นี่คือ Font แบบ AngsanaUPC <BR> </FONT>

นี่คือ Font แบบ JasmineUPC<BR>

</FONT>

นี่คือ Font แบบ IrisUPC <BR>

</FONT>

</BODY>

การแสดงผล

นี่คือ Font แบบ AngsanaUPC

นี่คือ Font แบบ JasmineUPC

นี่คือ Font แบบ IrisUPC

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

เป็นส่วนของคำสั่งTagที่เป็นตัวกำหนดตัวอักษรให้มีความหนาและขนาดตัวอักษรให้มีความแตกต่าง

จากอักษรปกติกล่าวคือเป็นส่วนที่จะทำให้หัวเรื่องมีความแตกต่างจากอักษรปกติเพราะหัวเรื่องจะต้อง
เป็นส่วนที่มีจุดเด่นมากที่สุดซึ่งคำสั่ง<Hx>จะมีขนาดของตัวอักษร อยู่ 6 ขนาด ตือ ขนาดใหญ่สุด
คือ <H1>( ใช้มาก )และเล็กที่สุดคือ<H6> (ใช้น้อย )

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

<Hx>........<Hx> โดยที่ x คือค่าตัวเลขตั่งแต่ 1 ถึง 6

ตัวอย่างแท็ก

<HTML>

<HEAD>
<TITLE> การกำหนดหัวเรื่อง</TITLE>
</HEAD>
<BODY> <H1> การกำหนดหัวเรื่องH1 < /H1>
<H2> การกำหนดหัวเรื่องH2< /H2 >
<H3> การกำหนดหัวเรื่องH3</H3>
<H4> การกำหนดหัวเรื่องH4</H4>
<H5> การกำหนดหัวเรื่องH5</H5>
<H6> การกำหนดหัวเรื่องH6</H6> นี่คือตัวอักษรปกติ
</BODY>
</HTML>

การแสดงผล

การกำหนดหัวเรื่องH1

การกำหนดหัวเรื่องH2

การกำหนดหัวเรื่องH3

การกำหนดหัวเรื่องH4

การกำหนดหัวเรื่องH5

การกำหนดหัวเรื่องH6

นี่คือตัวอักษรปกติ

สีตัวอักษรทั้ง2แบบ

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

1.การกำหนดสีของตัวอักษร

เป็นคำสั่งที่ใช้กำหนดสีของตัวอักษรให้มีสีต่างๆตามต้องการโดยการกำหนดเลขฐาน16

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

2.การกำหนดสีของตัวอักษรเฉพาะส่วน

เป็นคำสั่งที่ใช้กำหนดสีของตัวอักษรให้มีสีต่างๆเฉพาะส่วนตามต้องการโดยการกำหนดเลขฐาน16

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

< FONT COLOR="#เลขฐาน16 จำนวน 6 ตัว">......</FONT>

ตัวอย่างแท็ก

1.การกำหนดสีของตัวอักษร

<HTML>
<HEAD>
<TITLE>การกำหนดสีของตัวอักษร</TITLE>
</HEAD>
<BODY TEXT="#00ff00">
กำหนดตัวอักษร เป็นสีเขียว
</BODY>
</HTML>

การแสดงผล

กำหนดตัวอักษร เป็นสีเขียว

2.การกำหนดสีของตัวอักษรเฉพาะส่วน

<HTML>
<HEAD>
<TITLE>การกำหนดสีของตัวอักษรเฉพาะส่วน </TITLE >
</HEAD>
<BODY>
ทดสอบ < FONT COLOR="#FF0000"> กำหนดตัวอักษรเฉพาะส่วน เป็นสีแดง</FONT>โดยคำสั่ง FONTCOLOR
< /BODY >
< /HTML >

การแสดงผล

ทดสอบกำหนดตัวอักษรเฉพาะส่วน เป็นสีแดง โดยคำสั่ง FONTCOLOR

ตัวเอียง ตัวหนา ขีดเส้นใต้

การกำหนดรูปแบบตัวอักษรให้เป็น ตัวอักษรเอียง<I>,ตัวอักษรหนา<B>,และตัวอักษรมีเส้น<U>

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

ตัวอย่างแท็ก

<HTML>

<HEAD>
<TITLE>การกำหนดรูปแบบตัวอักษร</TITLE>
</HEAD >
<BODY >
<B>ตัวอักษรหนา</B><Br>
<I>ตัวอักษรเอียง</I><Br>
<U>ตัวอักษรมีเส้น</U><Br>
<B><I><U>การใช้คำสั่งทั้ง 3 แบบพร้อมกัน</U></I></B><Br>
</BODY>
</HTML>

การแสดงผล

ตัวอักษรหนา
ตัวอักษรเอียง
ตัวอักษรมีเส้น
การใช้คำสั่งทั้ง 3 แบบพร้อมกัน

ตัวขีดฆ่า ตัวยก ตัวห้อย

1.<S> ตัวขีดฆ่า</S>

2.<SUP> ตัวอักษรยกขึ้น</SUP>
3.<SUB> ตัวอักษรห้อยลง</SUB>

ตัวอย่างแท็ก

<HTML>

<HEAD>
<TITLE>การกำหนดรูปแบบตัวอักษร</TITLE>
</HEAD >
<BODY >

<S> ตัวขีดฆ่า</S>

<SUP> ตัวอักษรยกขึ้น</SUP>
<SUB> ตัวอักษรห้อยลง</SUB>

</BODY>
</HTML>

การแสดงผล

~~ตัวขีดฆ่า~~

ตัว^{อักษรยกขึ้น}

ตัว_{อักษรห้อยลง}

_{ตัวอักษรวิ่ง}

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

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

ทิศทางการวิ่ง

UP วิ่งจากด้านล่างขึ้นด้านบน

DOWN วิ่งจากด้านบนลงด้านล่าง

LEFT วิ่งจากด้านขวาไปด้านซ้าย

RIGHT วิ่งจากด้านซ้ายไปด้านขวา

ตัวอย่างแท็ก

<HTML>

<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>

การแสดงผล

ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์กวี คนดีศรีอยุธยา

ตัวอักษรกระพริบ

ตัวอย่างแท็ก

<HTML>
<HEAD>
<TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY> <BLINK>welcome</BLINK>
</BODY>
</HTML>

การแสดงผล

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

1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ...</center>

2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้

<p align = "ตำแหน่ง"> ...ข้อความ...</p> ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

ตัวอย่างแท็ก

html>
<head>
<title>เว็บไทยดีดี :: webthaidd</title>
</head>
<body>
<p align=left>ข้อความอยู่ทางซ้าย</p>
<p align=center>ข้อความอยู่ตรงกลาง</p>
<p align=right>ข้อความอยู่ทางขวา</p>
</body>
</html>

การแสดงผล

แหล่งอ้างอิง
- http://www.bkk1.in.th/Topic.aspx?TopicID=7177
-http://montaip.blogspot.com/2012/07/blog-post_25.html
- http://www.thainextstep.com/html/html_05.php

8/9/56

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

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

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

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

code คือ

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

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

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

code คือ

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

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

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

code คือ