วันจันทร์ที่ 27 สิงหาคม พ.ศ. 2555

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

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

สวัสดีเพื่อนๆ ชาวบล็อกเกอร์ทุกคนนะคร้าบ วันนี้ผมจะมาอัพเดตข้อมูลเกี่ยวกับแท็ก    HTML กันต่อนะครับ ในบทความนี้เรามาพูดถึงเรื่องการแทรกตารางกันดีกว่าครับ

  • การสร้างตาราง
จะใช้แท็ก <table>...</table> เพื่อสร้างตารางขึ้นมา โดยจัดเป็นแท็กคู่ 
<tr>...</tr> เพื่อแสดงว่าข้อมูลนั้นอยู่ในแถวเดียวกัน
และ <td>...</td> เพื่อแสดงว่าข้อมูลนั้นอยู่ในเซลล์หรือช่องเดียวกัน
สามารถแสดงได้ดังนี้



จากรูปจะเห็นว่าไม่มีตารางปรากฏขึ้นมา ไม่ได้หมายความว่าพิมพ์ผิดหรือตกแต่อย่างใด แต่ตารางนี้ไม่มีความหนา ดังนั้นจึงต้องเพิ่มความหนาให้ โดยการเติม border=x (เมื่อ x มีค่าความหนาตั้งแต่ 0 เป็นต้นไป ยิ่งเลขมาก ยิ่งหนามาก) ทำได้ดังนี้


แต่ถ้าเราอยากให้ให้เส้นขอบมีสีสันขึ้นมา ต้องเพิ่ม bordercolor="x" โดย x เป็นชื่อสี หรือโค้ดสี 6 หลัก ซึ่งการกำหนดสีแบบโค้ดจะให้สีที่ละเอียดกว่าการระบุชื่อสีไปเลย ดังนี้
 
 

 


  • การปรับแต่งตารางเบื้องต้น (เพิ่มที่แท็ก<table>)
align="x"  เพื่อการจัดตารางให้อยู่ทางด้านใดด้านหนึ่งของเว็บเพจ ถ้าจะให้อยู่ตรงกลาง ก็เปลี่ยน x เป็น right ถ้าจะให้อยู่ตรงกลาง ก็ให้เปลี่ยนเป็น center ทำได้ดังนี้


width=x แท็กนี้สามารถกำหนดความกว้างของตารางเป็น % หรือ ตัวเลข(มีหน่วยเป็นพิกเซล)


height=x โดยที่ x จะกำหนดความสูงของตารางนั้น สามารถกำหนดเป็น % หรือตัวเลข(หน่วยเป็นพิกเซล) เช่นเดียวกับความกว้าง ดังตัวอย่างต่อไปนี้


colspan=x ไว้ใช้กำหนดจำนวนคอลัมน์ที่อยากจะรวมเข้าด้วยกันเป็นเซลล์เดียว ดังแสดง



rowspan=x เมื่อต้องการจะรวมแถวเข้ากันเป็นเซลล์เดียว โดย x เป็นจำนวนที่ต้องการ ดังนี้



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

ลงวันที่ 27 ส.ค. 2555

ที่มา : http://www.thainextstep.com/html/html_09.php




เขียนโดย ที่ ไม่มีความคิดเห็น:

วันจันทร์ที่ 13 สิงหาคม พ.ศ. 2555

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

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

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

     การแทรกรูปภาพนั้นสามารถทำได้โดยระบุแท็ก ดังนี้
<img src="..."> โดยที่ข้อความในเครื่องหมายคำพูดจะต้องเป็นชื่อไฟล์รูปภาพ
***อย่าลืมใส่นามสกุลของไฟล์รูปด้วย***




     
     การจัดตำแหน่งของรูปภาพ สามารถทำได้โดย
<center><img src="..."></center> สำหรับจัดตรงกลาง
<right><img src="..."></right> สำหรับจัดริมขวา
***จะสังเกตว่าไม่ได้ระบุแท็กชิดซ้าย เพราะว่าการแทรกรูปนั้นจะจัดชิดซ้ายให้อยู่แล้ว***





     การปรับขนาดรูปภาพ  สามารถทำได้โดย
<img src="..."width=(ขนาดความกว้าง)height=(ขนาดความสูง)> 
     ซึ่งขนาดดังกล่าวจะอยู่ในหน่วย pixel นะครับ


ลองเทียบกับรูปอื่นดูนะครับ
     การจัดรูปเป็นพื้นหลัง สามารถทำได้โดยระบุ
<body background="..."> โดยที่ข้อความในช่องว่างเป็นชื่อรูปครับ



ผมก็ขอจบการนำเสนอเพียงเท่านี้แหละครับ
ขอให้ทุกคนมีความสุขในเดือนแห่งวันแม่นะครับ

ลงวันที่ 13 สิงหาคม 2555
อ้างอิงจาก : สมุดจดบันทึกของผมเอง ของวิชาเทคโนโลยีสารสนเทศเพิ่มเติม ม.6





     

     
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันเสาร์ที่ 14 กรกฎาคม พ.ศ. 2555

การตั้งค่าตัวอักษร

การตั้งค่าให้กับตัวอักษร

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

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



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

  การกำหนดขนาดตัวอักษรแบบ Heading
เป็นการกำหนดขนาดตัวอักษรที่ใช้ทำหัวเรื่อง โดยใส่ tag ลงไป มีให้เลือก 6 ระดับ คือ ตั้งแต่ h1 ถึง h6
อย่าลืมว่ามีแท็กปิดด้วยนะ เช่น <h1>____</h1> เป็นต้น
  การกำหนดขนาดด้วย Size

เป็นการกำหนดโดยใช้ tag <font size = "...">________</font>
โดยที่ภายในเครื่องหมายคำพูดให้ใส่ตัวเลข -7,-6,...,6,7 ซึ่งขนาดจะเรียงลำดับตามนี้


  • สีตัวอักษร

สามารถกำหนดโดยใช้แท็ก <font color = "...">____</font>
โดยในเครื่องหมายคำพูดสามารถเติมชื่อสี(ภาษาอังกฤษ) หรือโค้ดสีลงไปได้
เช่น <font color = "#00FF00">___</font> หรือ
       <font color = "green">___</font>
ผลที่ได้ก็จะเหมือนกันจ้า ต่างกันแค่ถ้าใช้โค้ดสีจะได้สีหลากรูปแบบกว่าเท่านั้น


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



  • การจัดชิดซ้าย, ขวา และกึ่งกลาง

 เราสามารถใช้แท็ก <P Align=Left>, <P Align=Right> และ <P Align=Center> มากำหนดการจัดตำแหน่งของข้อความได้เป็นชิดซ้าย ขวา และกึ่งกลางตามลำดับ โดยทั้งสามแท็กมีแท็กปิดเป็น </P>
ทั้งนี้เมื่อเราเขียนในโปรแกรม Notepad เมื่อเราเขียนข้อความในนั้นก็จัดให้ชิดซ้ายอยู่แล้ว ดังนั้น <P Align=Left> จึงไม่ค่อยนิยมใช้กันซักเท่าไร
***เราสามารถเปลี่ยนจากตัว P ในแท็กเป็น div ได้เพราะจะทำให้มีการเว้นบรรทัดน้อยลง และโดยพื้นฐานแล้ว จะไม่มี </P> (แท็กปิดของ P)***

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



  • ตัวกระพริบ ตัววิ่ง



  • กำหนด Font ตัวอักษร

ขอบคุณที่ติดตามครับ
ลงวันที่ 14 ก.ค. 2555

ที่มา 
http://www.freescriptsplanet.com/ภาษา-html/แท็ก-html







     

เขียนโดย ที่ ไม่มีความคิดเห็น:

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

Tag พื้นฐาน

แท็กพื้นฐาน (Basic Tag)

สวัสดีครับ เพื่อนๆ ทุกคน

ได้เวลามาเรียนรู้เรื่องของ HTML กันอีกครั้งแล้วนะครับ
วันนี้ผมจะมานำเสนอเรื่องของ Tag กันนะครับ
ไปดูกันเลย!!!

  • HTML

   HTML ย่อมาจาก Hyper Text Markup Language ไฟล์ HTML เป็นไฟล์ข้อความที่เก็บแท็ก markup (markup tag) ขนาดเล็ก ไฟล์ HTML ต้องมีนามสกุล htm หรือ html อย่างใดอย่างหนึ่ง ซึ่งการสร้างไฟล์ HTML สามารถสร้างโดยการใช้ text editor อย่างง่าย เช่น Notepad เป็นต้น

  • Text Editor

   Text Editor คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความ ในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆ ปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย
    ส่วนการแสดงผลนั้นจะแสดงใน Web Browser ต่างๆ เช่น IE, Firefox เป็นต้น

ภาพ Code และแท็กพื้นฐานบางส่วน


ผลที่เกิดขึ้นจาก Code ด้านบนผ่านทาง Web Browser

  • โครงสร้างของภาษา html 


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

  • แท็ก HTML พื้นฐาน

<html> แท็กนี้บอก browser ว่านี่เป็นการเริ่มต้นเอกสาร HTML แท็กสุดท้ายในเอกสารคือ </html> แท็กนี้บอก browser ว่านี่เป็นการสิ้นสุดเอกสาร HTML

ข้อความระหว่างแท็ก <head> และแท็ก </head> เป็นสารสนเทศส่วนหัว สารสนเทศนี้ไม่ได้แสดงผลบน browser 

ข้อความระหว่างแท็ก <title> เป็นไตเติล (ชื่อ) ของเอกสาร ไตเติลได้รับการแสดงในหัวข้อ (caption) ของ browser

ข้อความระหว่างแท็ก <body> เป็นข้อความที่จะแสดงใน browser 

ย่อหน้า ได้รับการกำหนดด้วยแท็ก <p> HTML เพิ่มแถวว่างอย่างอัตโนมัติก่อนและหลังย่อหน้า

<p>This is a paragraph</p>
<p>This is another paragraph</p>  

แท็ก <br> ได้รับการใช้เมื่อต้องการแบ่งบรรทัดแต่ไม่ต้องการเริ่มต้นย่อหน้าใหม่ แท็ก <br> บังคับแบ่งบรรทัดตามตำแหน่งที่วาง แท็ก <br> เป็นแท็กว่างและไม่มีแท็กสิ้นสุด เช่น </br> เพราะการแท็กปิดไม่มีเหตุผล

<p>This <br> is a para<br>graph with line breaks</p> 

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

สวัสดีคร้าบบบ

ลงวันที่ 20 มิ.ย. 2555
เขียนโดย ที่ 1 ความคิดเห็น:

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

คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บ (Basic Words About Web Creating)

สวัสดีครับ เพื่อนๆ บล็อกเกอร์ทุกคน

วันนี้ผมมีคำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บทั้งหมด 8 คำมาฝากครับ

อินเทอร์เน็ต (Internet) 

http://www.mcp.ac.th/online/internet/internet/Internet.jpg
ภาพแสดงเครือข่ายอินเทอร์เน็ต
มาจากคำว่า Inter และ net
1. อินเทอร์ (Inter) คือ ระหว่าง หรือท่ามกลาง
2. เน็ต (Net) คือ เครือข่าย (Network)
อินเทอร์เน็ต (Internet)
คือ เครือข่ายนานาชาติ ที่เกิดจากเครือข่ายเล็ก ๆ มากมาย รวมเป็นเครือข่ายเดียวกันทั้งโลก

URL (Uniform Resource Locator, Universal Resource Locator)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegj4tFN4oil1SzbCw-fwB7x8V4A85hoVi49SRHGTr9Ln9sOSJO6OgJ_3ptJwvWusEaQsp5pH8QMy7pPPbKwpTDJ6tt51NS7AUV0l6eIhnhtsUBXt7RQR_nU6oD3UzjojK1OnAUC5vhOXv/s640/redirect_url_big.jpg
ตามภาพเลยคร้าบ ^ ^

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

WWW (World Wide Web)

http://www.youthapostolate.com/wp-content/uploads/2009/12/www-internet.jpg
ตามนั้นเลยคร้าบ ^ ^
WWW หรือ Web ถูกสร้างขึ้นในปี 1989 ที่ CERN (The European Laboratory for Particle Physics) จากนั้นมามันก็เติบโตอย่างรวดเร็ว
Web เป็นส่วนหนึ่งของ Internet ที่ใช้ Hypertext Transfer Protocol (HTTP) เพื่อแสดง Hypertext และรูปภาพ Hypertext หมายถึงการสร้างเอกสารแบบตัวหนังสือที่มีความสามารถเชื่อมโยงไปยังเอกสารอื่น (Interlinked)

เว็บไซต์ (Website)

http://www.s-mediaintl.com/wp-content/uploads/2012/05/blog-or-website.jpg
ตัวอย่างเว็บไซต์
คือ กลุ่มของเว็บเพจหลาย ๆ หน้า โดยมีโฮมเพจเป็นเว็บเพจหน้าแรก  ที่มีความสวยงาม เพื่อดึงดูดความสนใจของผู้เข้าชมเว็บไซต์ และเว็บไซต์หมายถึง แหล่งข่าวสาร  ข้อมูลของบุคคล  องค์กร  หรือหน่วยงานต่างๆ บนระบบอินเทอร์เน็ต เปรียบได้กับ "หนังสือ 1 เล่ม"


โฮมเพจ (Homepage)

http://kara.allthingsd.com/files/2009/02/metro1a.jpg
หน้าแรกของ Yahoo

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


เว็บเพจ (Webpage)

http://japho.com/wp-content/uploads/2012/03/Make-Your-Own-Web-Page-Free-2-300x263.jpg
ตัวอย่างเว็บเพจ

คือ หน้าเอกสารต่าง ๆ   ที่ใช้เผยแพร่ข้อมูล ข่าวสาร ของบุคคล องค์กร หรือ หน่วยงานต่าง ๆ
เปรียบได้กับ "หน้าต่างๆ ภายในหนังสือ"

HTML : Hypertext Markup Language

http://666.ran4u.com/userfiles/product-image5/d906d3dd-2663-41c2-9599-ea8393b67fa3/html.jpg
ตัวอย่างการเขียน HTML
เป็นภาษามาร์กอัปหลักในปัจจุบันที่ใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูล ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม เชื่อมโยงภาพหรือวิดีโอด้วย โครงสร้างของโค้ดเอชทีเอ็มแอลจะอยู่ในลักษณะภายในวงเล็บสามเหลี่ยม และยังคงเป็นรูปแบบไฟล์อย่างหนึ่ง สำหรับ .html และ สำหรับ .htm ที่ใช้ในระบบปฏิบัติการที่รองรับ รูปแบบนามสกุล 3 ตัวอักษร

Web Browser (เว็บเบราว์เซอร์)

http://ideaserver.com/images/stories/WebBrowser-icons.jpg
ตัวอย่างเว็บเบราว์เซอร์
หรือ โปรแกรมค้นดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ
เว็บเบราว์เซอร์ตัวแรกของโลกชื่อ เวิลด์ไวด์เว็บ ขณะเดียวกันเว็บเบราว์เซอร์ที่นิยมมากที่สุดในปัจจุบันคือ อินเทอร์เน็ตเอกซ์พลอเรอร์ (Internet Explorer , IE)

ลงวันที่ 6 มิ.ย. 2555
ขอบคุณที่ติดตามคร้าบ หวังว่าจะเป็นประโยชน์นะคร้่าบ
      
เขียนโดย ที่ 2 ความคิดเห็น:
ตำแหน่ง: ธนบุรี กรุงเทพมหานคร 10600 ประเทศไทย
สมัครสมาชิก: บทความ (Atom)