การใช้ตารางในการสร้างเว็บเพจ

การใช้ตารางในการสร้างเว็บเพจ

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


คำสั่งหรือแท็กที่ใช้ในการสร้างตารางคือ <table>...</table>
 ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้

<table>...</table> 
เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดในการสร้างตาราง

<tr>....</tr>            
เป็นการบอกจำนวนแถว (row)

<td>...</td>          
 เป็นการบอกจำนวนคอลัมน์ (colunm)


ตัวอย่าง

 รูปแบบการเขียนโค้ด

 

การแสดงผล

การตีเส้น และสีเส้นตาราง การกำหนดระยะห่างระหว่างช่องเซลล์ และการเว้นระยะข้อมูลในเซลล์

จากตัวอย่างจะเห็นว่าไม่ปรากฎเส้นตารางขึ้นมาบนหน้าเว็บเพจ หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์  borderช่วย
ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้

       <table border="1">

นอกจากความหนาของเส้นตารางแล้ว ยังมีแอททริบิวต์ที่กำหนดสีของเส้นตาราง bordercolor ความห่างของช่องเซล์   cellspacing และการเว้นระยะ
ระหว่างข้อมูลในเซลล์ กับกรอบเซลล์  cellpadding โดยใช้แอททริบิวต์ดังต่อไปนี้ bordercolor,cellspacing และ cellpadding
เขียนต่อท้่ายในแท็ก <table> ดังนี้

       <table border="1" bordercolor="blue" cellspacing="5" cellpadding="10">

        border="1" หมายความว่าให้ตีเส้่นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่า
                                            เป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
       
       bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็น
                                                     ค่าตัวเลขฐานสิบหกก็ได้
       
       cellspacing="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel)
       
       cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)


ตัวอย่าง  การสร้างตารางโดยใช้แอททริบิวต์การตีเส้น สีเส้นตารางและการเว้นระยะต่าง ๆ

รูปแบบการเขียนโค้ด

การแสดงผล

การปรับความกว้างและความสูงให้กับตาราง
       
         การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้

        1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
         
           <table width="50%" height="60%">

        2.กำหนดความกว้าง และความยาวเป็นจุด   (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์
           ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
         
          <table width="400" height="200">

ตัวอย่าง  การกำหนดความกว้างและความสูงของตาราง

การแสดงผล

การจัดตำแหน่งข้อมูลในตาราง

              ข้อมูลในตารางแต่ละช่องสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา หรือตรงการเซลล์ได้ โดยการใช้ แอททริบิวต์ align="ตำแหน่งของข้อมูล" ลงในแท็ก <tr> หรือ <td> เช่น

       <tr align="center"><td> แถว 1 คอลัมน์ 1 

       </td><td>    แถว 1 คอลัมน์ 2 </td></tr>

               หมายถึง จัดตำแหน่งข้อมูลแถวที่ 1 ทั้งแถวให้อยู่ตรงกลางเซลล์ 

      <tr><td align="center"> แถว 1 คอลัมน์ 1

      </td><td> แถว 1 คอลัมน์ 2 </td></tr>

              หมายถึง จัดตำแหน่งข้อมูลในแถวที่ 1 คอลัมน์ที่ 1 ให้อยู่ตรงกลางเซลล์ เพียงเซลล์เดียว

 ตำแหน่งของข้อมูล มีดังนี้

     

     "center"   หมายถึง   อยู่ตรงกลางเซลล์

     "justify"  หมายถึง   เต็มช่องเซลล์

     "left"     หมายถึง   อยู่ชิดด้านซ้ายเซลล์

     "right"    หมายถึง   อยู่ชิดด้านขวาเซลล์

ตัวอย่าง การกำหนดตำแหน่งข้อมูลในตาราง

การแสดงผล

การรวมเซลล์ตาราง  

  

  เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป เหมือนตารางใน Microsoft Word หรือ Microsoft Excel การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์ และการรวมแถว

                 1) การรวมคอลัมน์

                    เป็นการรวมเซลล์ตามแนวนอนตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN กำหนดไว้ในคำสั่ง <TD> 

                 

รูปแบบ 

<TR> <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR> 

เช่น 

<TD COLSPAN = "3">จำนวนนักเรียน</TD> 

 เป็นคำสั่งรวมคอลัมน์จำนวน 3 คอลัมน์มาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ จำนวนนักเรียน

ตัวอย่าง การรวมคอลัมน์

การแสดงผล

                     2) การรวมแถว

    เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์

                        

รูปแบบ

  <TR> <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD></TR>

   เช่น

<TD ROWSPAN ="2">ลำดับที่</TD> เป็นคำสั่งรวมแถวจำนวน 2 แถวมาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ ลำดับที่

ตัวอย่าง การรวมแถว

การแสดงผล

 แหล่งที่มา

 http://school.obec.go.th/pp_school/html/table.html
 http://www.kty.ac.th/html/unit5/unit503.html

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

           

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

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

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

            1. ไฟล์ GIF (CompuServe Graphics Interchange Format) มีนามสกุล .gif เป็นไฟล์ชนิด บิตแมบ 8 บิตสี เก็บค่าสีสูงสุดได้ 256 สี เป็นไฟล์แบบบีบย่อขนาด ใช้แสดงผลพวกภาพ การ์ตูน หรือกราฟิกที่มีสีสันไม่มาก และภาพชนิดเคลื่อนไหวที่มีความละเอียดไม่มากนัก

           2. ไฟล์ JPEG หรือ JPG (Joint Photographic Experts Group) มีนามสกุล .jpg เป็นไฟล์ที่ พัฒนาเพื่อใช้งานกับภาพที่มีสีสันสดใสและความละเอียดสูงมาก สามารถเก็บภาพได้ 24 บิตสี แสดงสีได้ถึง 16.7 ล้านสี เป็นไฟล์ที่ผ่านกระบวนการบีบอัดข้อมูลในอัตรา 10:1 ใน การแสดงผลในเว็บเพจ ไฟล์ *.jpg จะแสดงผลช้ากว่าไฟล์ *.gif ในขนาดไฟล์ที่เท่ากัน ดังนั้นจึงนิยมใช้ไฟล์ *.jpg ในภาพขนาดใหญ่ ถ้าเป็นภาพขนาดเล็กจะใช้ไฟล์ชนิด *.gif มากกว่า

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

รูปแบบแท็กการใส่รูปภาพ      <img src = "ชื่อภาพ">

รูปแบบการใส่รูปภาพ

  <html>

  <head><title> ....การใส่รูปภาพ....</title></head>

       <body>

               <img src = "lilies.jpg">        

       </body> 

  </html>

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

ยกตัวอย่างเช่น

 

รูปแบบการเขียนโค้ด

กรณีอยู่ใน Folder เดียวกับไฟล์เว็บเพจ ดังรูป

การแสดงผล

2.การใส่รูปภาพ สำหรับแฟ้มรูปภาพที่จัดเก็บคนละ Folder กับแฟ้ม Html

<img scr=“x”> โดยที่ x คือไฟล์รูปภาพที่ต้องการแสดง แต่จะต้องระบุ Path ของรูปภาพไว้หน้าไฟล์ด้วย

ยกตัวอย่างเช่น

รูปแบบการเขียนโค้ด

กรณีอยู่คนละไฟล์กับเว็บเพจ

การแสดงผล

แหล่งที่มา

http://www.thainextstep.com/html/html_06.php

http://pirun.ku.ac.th/~agrtnk/web/units/unit4/unit4.htm

วันที่ 27/08/12

การเเต่งตัวอักษร HTML

การเเต่งตัวอักษร 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>

ตัวอย่าง

การแสดงผล

แหล่งที่มา         วันที่ 12/07/2012   เวลา 12.22 นาที

-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

HTML TAG พื้นฐาน

 HTML ย่อมาจาก ใช้โปรแกรมอะไรสร้างและเปิดดูเอกสาร  


HTML ย่อมาจาก
     HTML ย่อมาจากคำว่า Hyper Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้างโฮมเพจ     การสร้างไฟล์   HTML  เราสามารถสร้างจาก Text  Editor เช่นจาก Notepad หรือ  Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่  " ชื่อไฟล์ . html "   ซึ่งถ้าหากคุณไม่ใส่  " " จะ กลายเป็นไฟล์   .TXT แทน  ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html   
เช่น Notepad เป็นต้น โดยวิธีการเขียน ก็เหมือนกันการพิมพ์เอกสารทั่ว ๆ ไป เพียงแต่เวลาที่เราทำการเซพ (Save) ไฟล์ให้เราทำการ Save เก็บไว้เป็นไฟล์นามสกุลเป็น .htm หรือ .html สามารถ—แสดงผลออกทางโปรแกรมประเภท browser 
โปรแกรมที่ใช้ในการเปิดดูเอกสาร  เช่น Internet Explorer, Netscape Navigator และ Opera เป็นต้น

ตัวอย่างเช่น

เช่น  NotePad, EditPlus หรือโปรแกรม Dreamweaver 

โปรแกรม Note pad

โปรแกรมเท็กเอดิเตอร์ (Text Editor) คืออะไร

คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือ เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver 

องค์ประกอบของเอกสาร html

การเขียนโฮมเพจด้วยภาษา HTML  นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ2 ส่วน ดังนี้

     
        1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง(Title) ของหน้าต่างการทำงานในระบบ Windows
      

      2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML 

รูปแบบโดยส่วนมากของ HTML มีลักษณะดังนี้

-<html>      คือ  คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ (Head Section) 


-   <head>    คือ<HEAD>..........</HEAD>

Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ

-   <title>       คือ <TITLE>..........</TITLE >

       ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะ พิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุม ถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคำสำคัญในการค้นหา (Keyword)

-   <boby>     คือ<BODY>..........</BODY>

Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>

**สรุป** 
<HTML>....</HTML>  คำสั่งเริ่มต้น คำสั่ง html เป็นคำสั่งเริ่มการเขียน

<HEAD>....</HEAD>  เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ

<TITLE>....</TITLE>   ใช้บอกชื่อของเว็บเพจ

<BODY>....</BODY>  เป็นส่วนสำคัญที่สุด เพราะเป็นส่วนที่แสดงเนื้อหาทั้งหมดอาจรวมถึงรูปภาพตารางการเชื่อมโยง

                       

                                   

-   <BR>       คือ   การขึ้นบัรรทัดใหม่ แทนการกด Enter 1 ครั้ง

ตัวอย่าง 

-   <p>          คือ   ใช้สำหรับการจัดย่อหน้าตัวอักษร  

ตัวอย่าง

 แหล่งที่มา 

-http://pirun.ku.ac.th/~agrtnk/web/units/unit1/unit1-3.htm  

วันที่  5   มิ.ย. 2555

             -http://www.twebmaster.com/viewArticle.php?id=1        
             -http://www.bothong.ac.th/html/content3-2.html               
  วันที่ 17 มิ.ย. 2555 เวลา 12.33

คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บ

คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บ

-Internet
          เครือข่ายคอมพิวเตอร์นานาชาติ ที่มีสายตรงเชื่อมต่อไปยังสถาบันหรือหน่วยงานต่าง ๆ เพื่ออำนวยความสะดวกให้แก่ผู้ใช้ทั่วโลก  ผู้ใช้เครือข่ายนี้สามารถสื่อสารถึงกันได้ทางอีเมล์ สามารถสืบค้นข้อมูลและสารสนเทศ รวมทั้งคัดลอกแฟ้มข้อมูลและโปรแกรมมาใช้ได้.

 ตัวอย่างรูป  

 -Homepage
          โฮมเพจ คือคำที่ใช้เรียกหน้าแรกของเว็บไซต์ โดยเป็นทางเข้าหลักของเว็บไซต์  นอกจากนี้ ภายในโฮมเพจก็อาจมีเอกสารหรือข้อความที่เชื่อมโยงต่อไปยังเว็บเพจอื่นๆอีกด้วย


   ตัวอย่าง Homepage

-WWW
          World Wide Web, WWW, W3 ; หรือที่เรียกกันสั้นๆ ว่า "เว็บ") คือพื้นที่ที่เก็บข้อมูลข่าวสารที่เชื่อมต่อกันทางอินเทอร์เน็ต โดยการกำหนด URL คำว่าเวิลด์ไวด์เว็บมักจะใช้สับสนกับคำว่า อินเทอร์เน็ต โดยจริงๆแล้วเวิลด์ไวด์เว็บเป็นเพียงแค่บริการหนึ่งบนอินเทอร์เน็ต
         
         
-Web Browser
          เว็บเบราว์เซอร์ (web browser) เบราว์เซอร์ หรือ โปรแกรมดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html)



-Webpage
           หมายถึง หน้าหนึ่ง ๆ ของเว็บไซต์ ที่เราเปิดขึ้นมาใช้งาน โดยทั่วไป เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML หรือ XHTML (ซึ่งมักมีนามสกุลไฟล์เป็น htm หรือ html)


ตัวอย่าง Webpage

-HTML
          HTML (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) คือภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee)


-Website
           (website, web site, หรือ Web site) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ 



-URL
          URL ย่อมาจากคำว่า Uniform Resource Locator คือ ที่อยู่ (Address) ของข้อมูลต่างๆในInternet เช่น ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต
         



แหล่งที่มา

-http://www.bloggang.com/mainblog.php?id=kawaiicas&month=09-07-2009&group=2&gblog=10


-http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2089-home-page-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html


-http://www.mindphp.com/modules.php?name=News&file=article&sid=121


-http://www.zazana.com/babnee/webpage-id4676.aspx


-http://panyaras.blogspot.com/2010/05/web-site-web-page-home-page-links-www.htm   

วันที่ 31 พ.ค. 2555

แนะนำตัว(Introduction)

Let me introduce myself   ;D 

My name  is    Thanasarun  Tansagul
ชื่อ          ธนสรัญ ตันสกุล


My nickname is  yok  :D 
ชื่อเล่น    หยก


Age          17  year
อายุ         17 ปี


I am studying at Thonburee woratapeepalarak School 
ศึกษาอยู่ที่  ร.ร.  ธนบุรีวรเทพีพลารักษ์




I am studying in grade 12
ระดับชั้น ม.6/2


My major was science - math
สายการเรียน วิทย์-คณิต  :)


My hobby is read comicbooks
งานอริเดกอ่านการ์ตูน  ^[++++]^