วันอังคารที่ 28 สิงหาคม พ.ศ. 2555

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


ารแทรกตาราง มีรูปแบบโค้ดในการสร้าง ดังนี้

1. table ใช้ในการสร้างตาราง <table> ... </table> 
                                            
              ( *border = 3 คือการกำหนดใส่เส้นขอบตาราง )


2. tr ใ้ช้กำหนดแถวในกับตาราง <tr> .... </tr>


              ( แท็กนี้อยู่ภายในแท็กของ <table> ... </table> )



3. td ใช้กำหนดจำนวนคอลัมน์ <td> ... </td>

               (แท็กนี้อยู่ภายในแท็กของ <tr> .... </tr> ) 


ex. 


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


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

 width =  ....      ใช้ในการกำหนดความกว้างของตาราง

            (... กำหนดความกว้าง)

ex.

 

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




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

Height = ...   ใช้ในการกำหนดความสูงของตาราง 

             (... กำหนดความสูง)

ex. 



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


การจัดตำแหน่งตาราง

align ... ใช้จัดตำแหน่งตาราง

        ( ... กำหนดตำแหน่ง)

  • การจัดตำแหน่งซ้าย align="left"
ex.

  • การจัดตำแหน่งกลาง align="center"
ex. 



  • การจัดตำแหน่งขวา align="right"
ex.


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


การรวมเซลล์


  • rowspan= ... ใช้กำหนดการรวมคอลัมน์ในแนวตั้งเข้าด้วยกัน  ( merge cell )

            ( ... ใช้กำหนดการรวมแถวเข้าด้วยกัน)

ex.



  • colspan ... ใช้กำหนด การรวมคอลัมน์ในแนวนอนเข้าด้วยกัน ( merge cell )

             ( ... ใช้กำหนดการรวมคอลัมน์เข้าด้วยกัน )

ex.

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


ขอบคุณ.
http://code.function.in.th/html/table

1/9/55










วันอังคารที่ 14 สิงหาคม พ.ศ. 2555

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

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



  • รูปแบบโค้ดในการแทรกรูปภาพ



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


                              <img src="ชื่อไฟล์ . นามสกุล">
ตัวอย่าง


     * กรณีที่2. รูปภาพอยู่คนละที่กับไฟล์เว็บเพจ
                           <img src="ที่อยู่ไฟล์/ชื่อไฟล์.นามสกุล">
ตัวอย่าง

------------------------------------------------------------------------------------------
  • คำอธิบาย tag - img src

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

---------------------------------------------------------------------------------------
  • การปรับขนาดของภาพ
ความกว้าง และ  ความสูง
                                       
                               <img src="ชื่อภาพ" height=XX width=XX>


ตัวอย่าง




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


  • การปรับตำแหน่งรูปภาพ

 การจัดชิดซ้าย
                    

                            <img src="ชื่อภาพ.นามสกุล="left"> 

ตัวอย่าง

  





การจัดกลางหน้า

                  <center><img src="ชื่อภาพ.นามสกุลของภาพ"></center> 


ตัวอย่าง


 



การจัดชิดขวา

                    <img src="ชื่อภาพ.นามสกุลของภาพ"align=right>
ตัวอย่าง

 




ข้อมูลอ้่างอิง

http://www.w3schools.com/html/html_images.asp




17/8/55











วันอังคารที่ 10 กรกฎาคม พ.ศ. 2555

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

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

  • โค้ด คือ :  <font face = "รูปแบบตัวอักษรที่ต้องการ"> ข้อความที่ต้องการ </font> 
  • Ex : <font face = "Kristen ITC"> Atita Suraboonkul. </font>




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

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

  • โค้ด คือ<font size = " ขนาดตัวเลขที่ต้องการ ">  ข้อความที่ต้องการ  </font>

  • Ex :   <font size = "30"> Atita Suraboonkul. </font>



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


สีตัวอักษร

  • โค้ด คือ : <font color = " สีที่ต้องการ ">  ข้อความที่ต้องการ </font>


  • Ex : <font color = "red"> Atita Suraboonkul. </font>
                <font color=" #0000FF "> Atita Suraboonkul. </font>  



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


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

  • โค้ด คือ : 
  • <i>   ข้อความที่ต้องการ  </i> 
  • <b>  ข้อความที่ต้องการ </b>
  • <u>  ข้อความที่ต้องการ  </u> 
  • Ex :
  • <i>  Atita Suraboonkul. </i>
  • <b> Atita Suraboonkul. </b> 
  • <u> Atita Suraboonkul. </u> 




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


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

  • โค้ดคือ :
  • <del>  ข้อความที่ต้องการ  </del>
  • ข้อความที่ต้องการ <sup> ข้อความที่ต้องการ </sup> 
  • ข้อความที่ต้องการ <sub> ข้อความที่ต้องการ </sub>
  • Ex : 
  • <del>  Atita Suraboonkul. </del> 
  • 5 <sup> 10 </sup> 
  • CO <sub> 2 </sub> 





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

ตัวอักษรวิ่ง

  • โค้ดคือ : <marquee>  ข้อความที่ต้องการ  </marquee>

  • Ex :  <marquee> ตัวอักษรวิ่ง </marquee>






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

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

  • โค้ดคือ : <blink>  ข้อความที่ต้องการ  </blink>

  • Ex :  <blink> Atita Suraboonkul. </blink>










10/7/2555

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
















วันศุกร์ที่ 29 มิถุนายน พ.ศ. 2555

tag พื้นฐาน

HTML คือ

             HTML ย่อมาจากคำว่า Hyper Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้างโฮมเพจ*ใช้อะไรในการเขียน HTML


             Text  Editor เช่นจาก Notepad หรือ  Word pad ในการสร้าง HTML
*เปิดเอกสาร

  • Google chrome
  • Internet explorer
  • Mozilla Firefox  







Text Editor คืออะไร

           Text Editor คือ โปรแกรมต่างๆ ที่ใช้ในการกำหนดข้อความ และรูปแบบคำสั่งต่างๆ ของภาษา HTML ซึ่งปัจจุบันผู้เขียนโปรแกรมส่วนใหญ่จะใช้โปรแกรม Notepad ในการเขียนโปรแกรม HTML เป็นหลัก เช่น

*ผลลัพธ์






โครงสร้างของภาษา HTML

           โครงสร้างของภาษา html จะประกอบด้วย 2 ส่วนด้วยกัน คือส่วนที่เป็นส่วนหัว (head) และส่วนเนื้อหา (body) โดยมีรูปแบบภาษาดังนี้




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

 เป็น TAG สำหรับการขึ้นบรรทัดใหม่ของ HTML
<P> 
HTML เพิ่มแถวว่างอย่างอัตโนมัติก่อนและหลังย่อหน้า



*http://www.xvlnw.com/knowledge-readknowledge-id40.html
*http://www.genstyles.com/tips-11.html
*http://school.obec.go.th/pp_school/html/editor.html
*http://www.easyhome.in.th/lesson/htmlindex.htm




29/6/2555 !


















วันพฤหัสบดีที่ 7 มิถุนายน พ.ศ. 2555

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

Internet

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







Homepage 

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

นหน้าโฮมเพจของเว็บไซต์ มักประกอบด้วยส่วนต่าง ๆ ดังนี้
1.โลโก้ (logo) คือสิ่งสำคัญที่จะช่วยให้ผู้เข้าชมสามารถจดจำเว็บไซต์ของเราได้ นอกจากนี้แล้วโลโก้ยังช่วยให้เว็บไซต์ของเราดูมีเอกลักษณ์อีกด้วย
2. เมนูหลัก (link menu) เป็นจุดที่เชื่อมโยงข้อมูลที่สำคัญ ซึ่งรวบรวมไว้ในรูปแบบของปุ่มเมนู หรือข้อความที่ผู้เยี่ยมชมเว็บไซต์สามารถรับรู้เรื่องราวที่น่าสนใจของเว็บ ไซต์ได้ ควรมีข่าวใหม่ๆ เนื้อหาใหม่ๆมาตลอด
3. โฆษณา (Banner) เป็นส่วนที่สำคัญอีกเช่นเดียวกัน  เพราะเว็บไซต์ที่มีโฆษณาจะช่วยส่งเสริมภาพลักษณ์ ความน่าเชื่อถือ และช่วยกระตุ้นความสนใจเพราะมักใช้ภาพเคลื่อนไหว (Gif Animation)  ประกอบซึ่งจะทำให้เว็บไซต์ของเราดูตื่นตาตื่นใจมากขึ้น จากการวิจัยพบว่าภาพเคลื่อนไหวยังช่วยให้เว็บไซต์ของเราดูน่าสนใจมากยิ่ง ขึ้นถึง 30%  แต่ไม่ควรมีโฆษณามากเกินไปและควรจัดวางตำแหน่งให้เหมาะสมอีกด้วย
4. ภาพประกอบและเนื้อหา (content)  เป็นส่วนที่ให้สาระความรู้กับผู้เข้าชม ซึ่งเนื้อหาที่ให้จะต้องมีขนาดพอเหมาะไม่สั้นหรือยาวจนเกินไป  ควรมีการปรับเนื้อหาให้ใหม่ทันกับปัจจุบันอยู่ตลอดเวลา จัดวางเนื้อหาให้เหมาะสมกับผู้ที่เข้ามาชมเนื้อหา และการมีภาพที่เกี่ยวข้องประกอบอยู่ยิ่งจะทำให้เว็บไซต์เป็นที่น่าสนใจมาก ยิ่งขึ้น
5. การใช้สีให้เหมาะสมกับหน้าโฮมเพจ (color)เพราะสีแต่ละสีจะให้ความรู้สึกที่มีผลด้านอารมณ์กับผู้เข้าชมในลักษณะที่แตกต่างกันไป
 

การสร้างโฮมเพจ สามารถทำได้หลายวิธีเช่น
1. ใช้ Web Hosting ซึ่งเป็นเว็บไซต์ที่ทำหน้าที่ให้บริการจัดเก็บข้อมูล โดยบางเว็บไซต์ให้บริการในการสร้างโฮมเพจสำเร็จรูปกับผู้ต้องการในการมีโฮ มเพจ ซึ่งจะมีรูปแบบของโฮมเพจให้เลือกได้ตามที่ต้องการ หรือต้องการให้ออกแบบตามความประสงค์ของผู้ใช้บริการก็ได้
2. ใช้โปรแกรม สร้างเว็บเพจ เป็นการสร้างโฮมเพจโดยการใช้โปรแกรมสำเร็จรูปในการสร้าง ทำให้สามารถสร้างตาราง จัดวางตำแหน่งข้อความหรือรูปภาพได้สะดวก ตลอดจนการปรับแต่งแก้ไขจะทำได้ง่าย ซึ่งโปรแกรมที่นิยมใช้ในปัจจุบันได้แก่โปรแกรม Dreamweaver, FrontPage, Go Live หรือ Home Site เป็นต้น
3.โปรแกรมภาษา HTML และ JavaScript การสร้างโฮมเพจโดยใช้โปรแกรมภาษา HTML และ JavaScript นั้น ผู้สร้างโฮมเพจจะต้องมีความสามารถและความชำนาญในการเขียนโปรแกรมได้เป็น อย่างดี เนื่องจากการสร้างโฮมเพจด้วยวิธีนี้ เป็นการพิมพ์คำสั่งและข้อมูลที่ต้องการแสดงบนโฮมเพจพร้อมกัน 

 

 

 

 www.

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

 

Web browser

          โปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่ สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์  หรือระบบคลังข้อมูลอื่นๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่าย คอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ

 


ประโยชน์ของ Web Browser
สามารถดูเอกสารภายในเว็บเซิร์ฟเวอร์ได้ อย่างสวยงามมีการแสดงข้อมูลในรูปของ ข้อความ ภาพ และระบบมัลติมีเดียต่างๆ ทำให้การดูเอกสารบนเว็บมีความน่าสนใจมากขึ้น ส่งผลให้อินเตอร์เน็ตได้รับความนิยมเป็นอย่างมากเช่นในปัจจุบัน ปัจจุบัน web browser ส่วนใหญ่จะรองรับ html 5 และ อ่าน css เพื่อความสวยงามของหน้า web page


webpage

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

โปรแกรมที่ใช้เปิดดูเว็บเพจ เรียกว่า เว็บเบราว์เซอร์ ตัวอย่างเว็บเบราว์เซอร์ที่เป็นที่นิยม เช่น อินเทอร์เน็ตเอ็กซ์พลอเรอร์, Netscape, มอซิลลา ไฟร์ฟอกซ์, และ ซาฟารี เป็นต้น

โปรแกรมสำหรับสร้างเว็บเพจ เช่น โปรแกรม Macromedia Dreamweaver , PHP & MySQL , Flash Professional เป็นต้น 

 

 HTML

        ภาษาที่ใช้ในการเขียนเว็บเพจ ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ในการเขียนข้อความ ลงบนเอกสารที่ต่างก็เชื่อมถึงกันใน cyberspace ผ่าน Hyperlink นั่นเอง 





Website

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

 

 

URL 

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

รูปแบบของ URL จะประกอบด้วย
http://www.urlbookmarks.com/support/urlfaq.htm
1. ชื่อโปรโตคอลที่ใช้ (http ซึ่งย่อมาจาก HyperText Transfer Protocol)
2. ชื่อเครื่องคอมพิวเตอร์ และชื่อเครือข่ายย่อย (www/urlbookmarks)
3. ประเภทของเวบไซต์ (.com) ซึ่งมีอยู่ 2 ประเภท คือเช่น.com (Commercial),.edu (Educational),.org (Organizations),.net (Network) ฯลฯ
4. ไดเร็กทอรี่ (/support/)
5. ชื่อไฟล์และนามสกุล (urlfaq.htm)

         ความสำคัญของ URL คือเวลาเราเข้าเว็บไซต์เราก็ต้องพิมพ์ URL ลงในช่อง url address ของ web browser เช่น จะเข้าเว็บ google.comก็ต้องพิมพ์ http://www.google.com หรือ จะพิมพ์ google.com ก็ได้ไม่ต้องมี http://www.ก็ได้เดี๋ยว Browser มันจะเติมให้เราเอง ดังนั้นการอ้างอิงของข้อมูลบนอินเตอร์เนตต้องระบุ URL ให้ถูกต้อง มิฉะนั้นจะไม่สามารถเข้าถึงข้อมูลนั้นได้ 

 

 

 

แหล่งอ้างอิง

http://www.thaiall.com/article/internet.htm
http://www.mindphp.com/modules.php?name=News&file=article&sid=121
http://guru.google.co.th/guru/thread?tid=70a112b85f33e4d3&pli=1
http://school.obec.go.th/kudhuachang/les07.htm
http://guru.google.co.th/guru/thread?tid=24eb1549df2ad154
http://school.obec.go.th/pp_school/html/browser.html
http://www.freescriptsplanet.com/%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2-html/html-%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%95%E0%B9%89%E0%B8%99/163-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3
http://www.com5dow.com/%E0%B9%84%E0%B8%82%E0%B8%9B%E0%B8%B1%E0%B8%8D%E0%B8%AB%E0%B8%B2%E0%B8%A8%E0%B8%B1%E0%B8%9E%E0%B8%97%E0%B9%8C-IT/1831-URL-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html


 8/6/2555