การเเทรกตาราง

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

ในการสร้างตารางนั้นจะมี Tag ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้

1. การสร้างตาราง  <table> </table>
2. การสร้างแถวภายในตาราง  <tr> </tr> แท็กนี้ต้องอยู่ภายในแท็ก <table> </table>
3. การสร้างคอลัมน์ภายในแถวแต่ละแถว <td> </td> แท็กนี้ต้องอยู่ภายในแท็ก <tr> </tr>

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

<tr>............</tr>
เป็นคำสั่งที่ใช้กำหนดแถว (row)

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

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

 

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

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

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

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

 ตัวอย่างโค้ด

 ผลที่เเสดง

การจัดวางตาราง

LEFT - จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
RIGHT - จัดตารางชิดขวาของจอภาพ
CENTER - จัดตารางไว้กึ่งกลางของจอภาพ  

ตัวอย่างโค้้ด

ผลที่เเสดง

คำสั่ง Colspan และ Rowspan

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

• COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
• Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน

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

โดยที่ 

• ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว
• Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน

 ตัวอย่างโค้ด

 ผลที่เเสดง

ที่มา
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang
http://www.thainextstep.com/html/html_08.php
http://www.aw.ac.th/web_html/011.htm

การแทรกและจัดการรูปภาพ

การแทรกและจัดการรูปภาพ

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

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

<img src = "ชื่อภาพ.ส่วนขยาย">

 

ตัวอย่างโค้ด

ผลที่เเสดง

หากมีการจัดเก็บรูปภาพไว้ต่าง Folder กับ แฟ้ม Html เช่น ถ้าแฟ้มรูปภาพถูกจัดเก็บในไดร์ว D: ชื่อ Folder ต่อไปนี้ M3 , Web site , Picture จะต้องแสดงที่อยู่ของแฟ้มข้อมูลให้ชัดเจน

<img src = "ชื่อเส้นทาง (Path)\ชื่อภาพ.ส่วนขยาย">
  
ตัวอย่างโค้ด

ผลที่เเสดง

      สำหรับแท็ก (Tag) การใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้ไม่ว่าจะเป็นขนาดความกว้าง ความสูง ของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูงเท่าไร ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของ ภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้

ความกว้าง width="ตัวเลขระบุความกว้าง (หน่วยเป็น Pixels)"
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ (หน่วยเป็น Pixels)"

ตัวอย่างโค้ด

ผลที่เเสดง

จากตัวอย่าง จะแสดงภาพขนาด 200x150 pix. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และมีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการให้ขอบมีความหนามาก ระบุตัวเลขให้มาก)

การวางตำแหน่ง

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

Align ="รูปแบบการวางตำแหน่งของภาพ"

  โดยคำสั่งนี้จะถูกแทรกอยู่ในคำสั่ง <Img src...> ซึ่งรูปแบบการวางตำแหน่งของภาพมีดังนี้

รูปแบบตัวอักษร	คำสั่งที่ใช้
Left	ภาพแสดงทางซ้ายโดยมีข้อความล้อมอยู่ทางขวา
Right	ภาพแสดงทางขวาโดยมีข้อความล้อมอยู่ทางซ้าย
Top	ขอบบนของภาพตรงกับส่วนบนข้อความ
Bottom	ขอบล่างของภาพตรงกับส่วนล่างสุดของข้อความ
Center	ตรงกลางของภาพตรงกับกึ่งกลางของข้อความ

    <Img src=”100.jpg” align=” Left / Right / Top / Bottom / Center”>

ตัวอย่างโค้ด

ผลที่เเสดง

ที่มา

http://www.thainextstep.com/html/html_06.php
http://www.aw.ac.th/web_html/010.htm
http://www.siamzone.com/board/view.php?sid=3405335 

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

การใส่รูปแบบอักษร

≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

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

รูปแบบการใช้คำสั่ง

<font face="ชื่อแบบตัวอักษรที่ต้องการ">.............ข้อความ............</font>

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

≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

เราสามารถกำหนดขนาดของมันเองได้ถึง 7 ระดับ โดยกำหนดได้ด้วยตัวเลขเลยหรือแบบที่2 กำหนดโดยใส่ค่า +/- แล้วกำหนดระดับอีกที 

รูปแบบการใช้คำสั่ง

 <FONT Size="......">......</FONT>

การกำหนดสีตัวอักษร
≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

รูปแบบการใช้คำสั่ง

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

 1. ใช้คำสั่ง <FONT COLOR=ชื่อสี>

2. ใช้คำสั่ง <FONT COLOR=รหัสสี>

การกำหนดลักษณะและแบบของตัวอักษร

≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

 ลักษณะของตัวอักษรลักษณะของตัวอักษร สามารถกำหนดได้ 3 แบบคือ

<B>ตัวหนา</B>

<I>ตัวเอียง</I>
<U>ขีดเส้นใต้ตัวอักษร</U>

ตัวขีดฆ่า ใช้คำสั่ง <S>...</S>

ตัวอักษรยกขึ้น ใช้คำสั่ง <SUP>...</SUP>
ตัวอักษรห้อยลง ใช้คำสั่ง <SUB>...</SUB>

การทำตัวอักษรวิ่่ง

 ≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

รูปแบบการใช้คำสั่ง

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

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

 

การทำตัวอักษรกระพริบ

 ≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

รูปแบบการใช้คำสั่ง

 <BLINK>..........</BLINK>

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

 ≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛

LEFT จัดชิดซ้าย

CENTER จัดกึ่งกลาง

RIGHT จัดชิดขวา

รูปแบบการใช้คำสั่ง

 <p align="left | center | right | justify">...</p>

 

  

≛≛≛≛≛≛≛≛≛≛≛≛≛≛≛ ที่มา ≛≛≛≛≛≛≛≛≛≛≛≛

http://www.pyayam.com/html/font_blink.php 
http://school.obec.go.th/krurenu/html/p2-2.html

 http://school.obec.go.th/krurenu/html/p2-4.html

HTML tag พื้นฐาน

HTML คืออะไร

     HTML ย่อมาจากคำว่า Hypertext Markup Language  การเรียกใช้เอกสารเหล่านี้ทำได้โดยการใช้โปรแกรมเว็บบราวเซอร์ (Web Browser) Mozilla Firefox Internet Explorer Google Chrome apple safari opera ฯลฯ เรียกดูแฟ้มที่สร้างด้วยภาษา HTML 

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

<html> คือ แท็กกำหนดถึงจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML
<head> คือ แท็กกำหนดจุดเริ่มต้นและจุดสิ้นสุดของส่วนกำหนดค่าเริ่มต้นของเอกสาร HTML เช่น ชื่อของเอกสาร
<title> คือ แท็กกำหนดชื่อของเอกสาร
<body> คือ แท็กกำหนดจุดเริ่มต้นและจุดสิ้นสุดของส่วนแสดงข้อมูลของเอกสาร
<br> เป็นคำสั่งขึ้นบรรทัดใหม่โดยตัวคำสั่งจะใช้เพียงตัวเดียวไม่ต้องใช้ 2 ตัวเหมือนคำสั่งอื่น อยู่ภายในคำสั่ง <body> 
<p> เป็นคำสั่งขึ้นย่อหน้าใหม่ใช้กับข้อความ โดยใช้เพียวตัวเดียวแทรกในข้อความ ภายในคำสั่ง <body> 


ตัวอย่าง code

การเเสดงผล

  http://www.codetukyang.com/html/ 20/7/2556

http://www.webthaidd.com/html/ 20/7/2556

http://code.function.in.th/html 20/7/2556

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

  Internet

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

 WWW

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

Web Site

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

  Webpage

หมายถึง หน้าหนึ่ง ๆ ของเว็บไซต์ ที่เราเปิดขึ้นมาใช้งาน

 Homepage

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

Web Browser

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

URL

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

HTTP

ย่อมาจาก Hyper Text Transfer Protocolหมาย ถึง โปรโตคอลสื่อสารที่ทำงานอยู่บนระบบโปรโตคอล TCP HTTP ใช้ในระบบเครือข่ายใยแมงมุม (World Wide Web) ทำหน้าที่ในการจำหน่าย,แจกจ่าย รวมไปถึงการรับข้อมูล จากระบบสื่อกลางชั้นสูง (Hypermedia System) ที่ประกอบด้วยเครื่องให้บริการ (Server) ที่มีอยู่มากมายทั่วโลก เวลาเราเข้าเว็บ ด้วย Browser เช่น Internet Explorer , Fire Fox หรือ Google Chrome หรือ Browser ตัวอื่นๆ เวลาเราเรียกดูเว็บ 
 

http://www.mindphp.com

http://www.ismed.or.th
http://intranet.dt.mahidol.ac.th

ชื่อ:สิริยากร ชุมสุข

ชื่อเล่น:หวาน

เลขที่ 28 ชั้น ม.6/2

อยู่โรงเรียน:ธนบุรีวรเทพีพลารักษ์

แผนการเรียน:วิทย์-คณิต

ชอนเรียนวิชา:ภาษาไทย คณิต

อาหารที่ชอบ:ผัดกะเพรา

สีที่ชอบ:เขียวอ่อน

คติประจำใจ:ฝันให้ไกล..ไปให้ถึง

งานอดิเรก:ดูหนัง ฟังเพลง

คณะที่อยากเรียน:พยาบาล

E-mail:siriyargorn.warn@gmail.com