หน้าแรก

 Help1

 แจ้งข้อแนะนำ
การ เขียนเว็บด้วยภาษา Html เบื้องต้น
เริ่มต้น พื้นฐาน HTML

           

     ภาษาคอมพิวเตอร์ทุก ๆ ภาษาจะมีโครงสร้างเฉพาะ ภาษา HTML ก็เช่นกัน โครงสร้างของภาษา HTML นั้นเป็นโครงสร้างที่ใช้งานง่าย และเข้าใจได้ไม่ยากนัก รูปแบบโครงสร้างของภาษา HTML มีดังนี้

 รูปแบบโครงสร้าง HTML

  <html>
  <head><title> ....ตรงนี้คือส่วนของข้อความที่จะปรากฏที่ Title Bar ของ Browser....</title></head>
       <body>
         ....ตรงนี้คือ ส่วนข้อความหรือเนื้อหา รายละเอียดที่ต้องการให้ปรากฏที่ Web browser ....
       </body>
  </html>

HTML มีองค์ประกอบ 2 ส่วน คือ ส่วนที่เป็นเนื้อหา และส่วนที่เป็นคำสั่งหรือแท็กรูปแบบโครงสร้างของเอกสาร HTML จะเป็นดังนี้

<HTML>........</HTML> เป็นคำสั่งเริ่มต้นและสิ้นสุดเอกสาร HTML
<HEAD>.......</HEAD> ส่วนของ HEAD ของเอกสาร HTML เป็นส่วนที่เราจะสามารถใส่คำอธิบายเว็บเพจ เช่น Title หรือชื่อเรื่องของเอกสาร, Keyword สำหรับการค้นหา ซึ่งเราจะเขียน TAG ในกลุ่มของ HEAD ไว้ภายใน TAG <HEAD> …… </HEAD>
<TITLE>........</TITLE> เป็นส่วนแสดงชื่ออกสารโดยจะแสดงที่ไตเติล บาร์ของ วินโดว์ที่ เปิดเอกสารนี้อยู่เท่านั้น
<BODY>.......</BODY> เป็นส่วนที่จะแสดงผลออกไปยังหน้า Web Browser เช่น การแสดงผลรูปภาพ การแสดงผล Contents การสร้างจุดเชื่อมโยง ซึ่งเราจะเขียน TAG ในกลุ่มของ Body ไว้ภายใน TAG <BODY> ….. </BODY>

เมื่อลอง สังเกตดูเราจะพบสัญลักษณ์ <...> และ </...> เป็นคู่ จากโครงสร้างจะมี <...> 4 ตำแหน่ง และ </...> อีก 4 ตำแหน่ง ซึ่งลักษณะการเขียน HTML จะมีลักษณะแบบนี้ สัญลักษณ์ <...> เราเรียกว่าการเปิด Tag ส่วน </...> คือการปิด Tag นั้นเอง โดยส่วนใหญ่รูปแบบของการเขียน HTML จะมีการเปิดและปิด Tag แต่ก็มียกเว้นบ้าง สำหรับแท็กบางแท็ก ที่ไม่จำเป็นต้องมีการปิดแท็ก

ตารางแสดงตัวอย่าง Tag และคำอธิบาย
<html>...</html>  =  Tag เปิด เป็นจุดเริ่มต้นและสิ้นสุดของเอกสาร
<head>...</head> =  เป็น Tag ที่กำหนดชื่อเรื่อง
<title>...</title> =  เป็น Tag ที่ใช้แสดงชื่อเอกสารที่ Title Bar ของ Windows ที่เปิดอยู่
<body>...</body> =  Tag เปิด เป็นจุดเริ่มต้นและสิ้นสุด เนื้อหาของเอกสาร
<br> =  เป็น Tag สำหรับขึ้นบรรทัด ใหม่
<hr> =  เป็น Tag กำหนดให้เขียนเส้น ใน Web Page
<b>...</b> =  เป็น Tag สำหรับทำตัวอักษร ให้หนา
<I>...</I> =  เป็น Tag สำหรับทำตัวอักษร ให้เอียง
<u>...</u> =  เป็น Tag สำหรับทำตัวอักษร มีขีดเส้นใต้
<a>...</a> =  เป็น Tag กำหนดการเชื่อมโยง
<img>...</img> =  เป็น Tag กำหนดการเชื่อมโยง ด้วยรูปภาพ
<table>...</table> =  เป็น Tag สำหรับการสร้าง ตาราง
<td>...</td> =  เป็น Tag สำหรับกำหนด คอลัมน์
<form>...</form> =  เป็น Tag สำหรับสร้าง Form
<input>...</input> =  เป็น Tag สำหรับกำหนด input ใน Form
<frame>...</frame> =  เป็น Tag สำหรับสร้าง Frame
<h1>...</h1>
=   เป็น Tag สำหรับกำหนดขนาดตัวอักษร ซึ่งมีค่าถึง 6 ขนาด  เวลาเปลี่ยนขนาดก็แค่เปลี่ยนตัวเลขครับ

คำสั่งกำหนดขนาดตัวอักษร

รูป แบบคำสั่ง ความ หมาย ตัวอย่าง
<H1>ข้อความ</H1> หัวเรื่องขนาดใหญ่สุด

ข้อความ

<H2>ข้อความ</H2> หัวเรื่องขนาดใหญ่

ข้อความ

<H3>ข้อความ</H3> หัวเรื่องขนาดกลาง

ข้อความ

<H4>ข้อความ</H4> หัวเรื่องขนาดกลาง

ข้อความ

<H5>ข้อความ</H5> หัวเรื่องขนาดเล็ก
ข้อความ
<H6>ข้อความ</H6> หัวเรื่องขนาดเล็กสุด
ข้อความ
<B>ข้อความ</B> กำหนดตัวหนา ข้อความ
<I>ข้อความ</I> กำหนดตัวเอียง ข้อความ
<U>ข้อความ</U> กำหนดตัวขีดเส้นใต้ ข้อความ
 <font face="CordiaUPC">ข้อความ</font> ตั้งรูปแบบฟอนต์ที่แสดงผล ข้อความ
<font size=+2>ข้อความ</font> ปรับขนาดฟอนต์ที่แสดงผล ข้อความ
 <font color="#FF0000">ข้อความ</font> เปลี่ยนสีฟอนต์ที่แสดงผล ข้อความ
<pre>Text</pre> กำหนดเป็น Fixed Font 
Text
&gt  เครื่องหมายมากกว่า >
&lt  เครื่องหมายน้อยกว่า  <
&quot  เครื่องหมายคำพูด "
&#33 รหัสแอสกี้ !


คำสั่งขีดเส้น คั่น<HR>เช่นเส้นใต้บรรทัดนี้ไงใช้โดยไม่ ต้องมี</HR> มาปิดท้าย
<HR WIDTH=50%> เมื่อต้องการปรับขนาดเส้นให้ยาว 50 % ของหน้าต่าง
<HR WIDTH=200> เมื่อต้องการปรับขนาดเส้นให้ยาว 200 พิกเซล
<HR SIZE=10> เมื่อต้องการปรับความหนาของเส้นให้เท่ากับ 10  พิกเซล
<HR ALIGN=RIGHT width=50%> เมื่อต้องการกำหนดให้เส้นชิดขวา และมีความยาว 50 %
<HR NOSHADE> เพื่อแสดงเส้นที่ไม่มีเฉดสี เป็นเส้นทึบไปเลย

ตาราง

นิยมใช้ การจัดรูปแบบต่างๆ เพื่อความเป็นระเบีบยและง่ายต่อการมองดูข้อมูลประเภทรูปภาพที่สัมพันธ์กัน

คำ สั่ง ความ หมาย
<TABLE>...</TABLE>
<TABLE BORDER>...</TABLE>
<TABLE WIDTH=100%>...</TABLE>
<TR>ส่วนคอลัมน์</TR>
<TD>เนื้อหาในแต่ละคอลัมน์</TD>
<TD COLSPAN=2>...</TD>
<TD ROWSPAN=2>...</TD> 		เปิดรูปแบบตาราง-ปิดตาราง
ตารางแบบมีเส้นขอบ
ตารางมีขนาดเต็มหน้าต่าง 100%
ครอบส่วนที่เป็นแถวเดียวกัน
ครอบในแต่ละกรอบคอลัมน์
กำหนดให้กรอบนั้นยาวเท่ากับ 2 คอลัมน์ในแถวถัดไป
กำหนดให้กรอบนั้นกว้างเท่ากับ 2 แถว

ตัวอย่างครับ

Source Code ตัวอย่าง
<TABLE BORDER COLS=1 WIDTH="100%" >
<TR><TD>หนึ่ง</TD></TR>
<TR><TD>สอง</TD></TR>
</TABLE>>
หนึ่ง
สอง

การจัดวางข้อความในตาราง

Source Code ผลลัพธ์
<table BORDER COLS=1 WIDTH="100%">
<tr><td ALIGN=CENTER>กึ่งกลาง</td></tr>
<tr><td ALIGN=LEFT>ชิดซ้าย</td></tr>
<tr><td ALIGN=RIGHT>ชิดขวา</div></td></tr>
</table>

กึ่งกลาง

ชิดซ้าย
ชิดขวา

การปรับแนววาง ข้อมูลบนตาราง

Source Code ผลลัพธ์
<table BORDER COLS=3 WIDTH="100%">
<tr>
<td VALIGN=TOP>ชิดบน<br><br></td>
<td VALIGN=CENTER>กึ่งกลาง</td>
<td VALIGN=BOTTOM>ชิดล่าง</td>
</tr>
</table>
ชิดบน กึ่งกลาง ชิดล่าง

การปรับแต่งตารางนั้น เราสามารถทำได้โดยเิพิ่มคุณสมบัติของตารางหรือ การกำหนด attribute ของตาราง เพิ่มเติมเข้าไปในแท็กต่าง ๆ ไม่ว่าจะเป็นการเพิ่มในส่วนของ แท็ก <table> แท็ก <tr> และ แท็ก <td> เป็นต้น เราลองมาดูตัวอย่างต่าง ๆ ดังต่อไปนี้

 การใส่สี ให้กรอบตาราง

ในการใส่สีให้กับกรอบตาราง นั้นมีข้อควรระวัง โดยต้องตรวจสอบกรอบของตารางด้วยว่าไม่ได้กำหนดเป็น 0 border="0" เพราะหากกำหนดเป็น 0 จะทำให้ไม่เห็นเส้นขอบ ในตัวอย่างนี้ก็มี attribute ต่าง ๆ เกี่ยวกับแท็ก <table> อยู่หลาย ๆ attribute ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้
 
border สำหรับกำำหนดความหนาของกรอบตาราง โดยการกำหนดขนาดด้วยหน่วยของ Pixel โดยมีรูปแบบดังนี้ <table border = "0"> กรณีไม่ต้องการให้มีกรอบ หรือ <table border = "1"> ค่าตัวเลขมากกรอบจะมีความหนา
 
bordercolor สำหรับกำหนดสีของเส้นกรอบของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bordercolor = "red"> หรือ <table bordercolor = "#ff0000">
 
cellspacing สำหรับกำหนดระยะห่างระหว่างเซลล์แต่ละเซลล์ โดยจะใช้ค่าเดียวกันทุกเซลล์ทั้งตาราง โดยมีรูปแบบดังนี้ <table cellspacing = "0"> หรือ <table cellspacing = "3">
 
cellpadding สำหรับกำหนดระยะห่างระหว่างขอบของเซลล์กับเนื้อหา (อาจเป็นข้อความหรือรูปภาพ) ที่อยู่ภายในเซลล์นั้น ระยะห่างในที่นี้หมายถึงระยะห่างจากขอบของเซลล์ทั้ง 4 ด้าน โดยมีรูปแบบดังนี้ <table cellpadding = "0"> หรือ <table cellpadding = "3">
 การใส่ สีื้พื้นหลังให้กับตาราง

  <table border="1" bgcolor="#0000ff" bordercolor="#FF0000" cellpadding="0"   cellspacing="0" >
       <tr>
              <td>...ข้อมูล...</td>
              <td>...ข้อมูล...</td>
       </tr>
  </table>
จากตัวอย่างเป็นการเพิ่ม attribute bgcolor สำหรับกำหนดสีืพื้นหลังของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bgcolor = "green"> หรือ <table bgcolor = "#00ff00">
 การใส่ ภาพเป็นพื้นหลังให้กับตาราง

  <table border="1" background="lilies.jpg" bordercolor="#FF0000" cellpadding="0"   cellspacing="0" >
       <tr>
              <td>...ข้อมูล...</td>
              <td>...ข้อมูล...</td>
       </tr>
  </table>

จากตัวอย่างเป็นการเพิ่ม attribute background สำหรับกำหนดใส่รูปให้กับพื้นหลังของตาราง โดยมีรูปแบบดังนี้ <table backgound = "ชื่อรูป"> สำหรับการนำรูปมาใช้สามารถใช้ได้กับสกุล .gif .jpg .png เป็นต้น

 

 การปรับ ขนาดของตาราง

  <table border="1" cellpadding="0"   cellspacing="0" width="200" height="30">
       <tr>
              <td>...ข้อมูล...</td>
              <td>...ข้อมูล...</td>
       </tr>
  </table>
จากตัวอย่างเป็นการเพิ่ม attribute width และ height ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้

width สำหรับกำหนดความกว้างของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table width = "150"> หรือ <table width = "50%">
 
height สำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table hight = "150"> หรือ <table hight = "10%">
 Tip HTML

การเพิ่ม Attribute ในแท็กต่าง ๆ ของภาษา HTML
การเพิ่ม Attribute ในแท็กต่าง ๆ เราสามารถเิ่ิ่พิ่มเข้ามาได้เรื่อย ๆ โดยไม่จำเป็นจะต้องเรียงลำดับว่า Attribute ใดจะต้องเขียนก่อนหรือหลัง โดยการเิ่พิ่ม Attribute เข้าไปสามารถทำได้ง่าย ๆ เิ่ีพียงใช้ Space หรือช่องว่างเป็นตัวแบ่งระหว่าง Attribute แต่ล่ะตัว

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

1. GIF (Graphic Intechange Format)
ไฟล์ภาพชนิดนี้ นิยมใช้สำหรับภาพกราฟิคที่เป็นลักษณะลายเล้น ข้อความตัวอักษร หรือภาพการ์ตูนต่าง ๆ ซึ่งมีสีไม่มากนัก เพราะไฟล์ GIF มีค่าสีสูงสุดเีพียง 256 สี ดังนั้นทำให้ภาพกราฟิคที่เราเซฟเป็นไฟล์ประเภท GIF เป็นภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก แต่ข้อดีของไฟล์ประเภทนี้คือ เราสามารถสร้างและเซฟภาพประเภทนี้ให้มีลักษณะพื้นหลังโปร่งใส (Transparent) ซึ่งสามารถนำภาพเหล่านี้ไปใช้กับพื้นหลังสีอะไรก็ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .gif

2. JPG (Joint Photographic Expert Group)
ไฟล์ประเภทนี้สามารถแสดงผลของสีได้สูงสุดถึง 16.7 ล้านสี ดังนั้นจึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายต่าง ๆ หรือภาพอื่น ๆ ที่มีสีเยอะ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง และ่ไฟล์ประเภทนี้ไม่สามารถทำเป็นแบบพื้นหลังโปร่งใส่ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .jpg และ .jpeg  

3. PNG (Portable Network Graphic)
ไฟล์ประเภทนี้จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง 16.7 ล้านสีเหมือนไฟล์ JPG นอกจากนี้ยังสามารถทำเป็นภาพพื้นหลังโปร่งใส เหมือนกับ GIF ได้ด้วย แต่ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็ก ๆ แต่มีการใช้สีมาก เช่น ภาพไอคอน ต่าง ๆ ไฟล์ประเภทนี้มีนามสกุล .png

การวางภาพ

<P> ขึ้นย่อหน้าใหม่ โดยจะเว้นบรรทัดให้หนึ่งบรรทัด
<BR> ขึ้นบรรทัดใหม่
<CENTER> อะไรก็ได้</CENTER> จัดให้อยู่กึ่งกลางของหน้าต่าง
รูปภาพและการ จัดวาง
<IMG SRC="url ชื่อรูปภาพ" ALT="ชื่อแสดง" ALIGN="ระดับภาพ">

ชื่อรูปภาพ ต้องระบุพาธและชื่อไฟล์.สกุล(jpg หรือ gif) ควรเป็นตัวเลขทั้งหมดเพื่อจะได้ไม่เป็นปัญหาในภายหลัง
ชื่อแสดง จะปรากฏในกรณีเล่นโหมด Text หรือรูปภาพยังโหลดขึ้นมาไม่สมบูรณ์
ระดับภาพ มี (Top,Middle,Bottom) จะกำหนดระดับภาพเมื่อวางติดกับข้อความ

<IMG SRC="ชื่อภาพ" WIDTH="ความกว้างภาพ" HEIGHT="ความยาวของภาพ">

ระบุเป็นพิกเซล เช่น  <IMG SRC="DookDik_016_onion.gif" WIDTH="64"            HEIGHT="64">หรือ


เมนูที่เกี่ยวข้อง


คู่มือการใช้งาน

คู่มือโปรแกรมสำเร็จรูป
วิธีสร้างระบบสมาชิก
ฟอร์มสำเร็จรูป

 

 ของแต่งเว็บไซต์

บทความทั่วไป

การโปรโมทเว็บไซต์

ทริปแนะนำ

THTWEB MANUAL คู่มือการใช้งานเว็บไซต์