วันจันทร์ที่ 9 กันยายน พ.ศ. 2556

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

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

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

ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้
  • <table>...</table>  เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
  • <tr>....</tr>     เป็นการบอกจำนวนแถว (row)
  • <td>...</td>  เป็นการบอกจำนวนคอลัมน์ (colunm)
 ตัวอย่าง การสร้างเอกสารเว็บ สำหรับสร้างตาราง 
จากตัวอย่างจะเห็นว่าไม่ปรากฎเส้นตารางขึ้นมาบนหน้าเว็บเพจ หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์  border  ช่วย ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้ 

<table border="1">

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



  การกำหนดข้อความกำกับให้กับตาราง <caption> 

สามารถใส่ข้อความกำกับตาราง เพื่อให้ทราบว่าตารางนั้นนำเสนอข้อมูลเกี่ยวกับเรื่องใด โดยมีรูปแบบดังนี้
<caption align="ตำแหน่ง">ข้อความกำกับตาราง</caption>

โดยค่า ตำแหน่ง มีดังนี้
  •      top หมายถึง อยู่กลางตารางด้านบน
  •      bottom หมายถึง อยู่กลางตารางด้านล่าง
  •      left หมายถึง อยู่ด้านบนซ้าย
  •      right หมายถึง อยู่ด้านบนขวา
ตัวอย่างการสร้างตารางโดยมีข้อความกำกับตาราง



  การปรับความกว้างและความสูงให้กับตาราง 

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

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

วันอาทิตย์ที่ 8 กันยายน พ.ศ. 2556

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

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


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

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

➤การปรับขนาด
ความกว้าง width="ตัวเลขระบุความกว้าง (หน่วยเป็น Pixels)
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)
<img src = "ชื่อภาพ.นามสกุลไฟล์" width="200" height="150" >



➤การกำหนดรูปภาพ
left จัดวางข้อความทางด้านซ้าย ซึ่งเป็นค่าปกติ
center จัดวางข้อความตรงกลาง
right จัดวางข้อความทางด้านขวา





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

วันพุธที่ 4 กันยายน พ.ศ. 2556

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



▂ ▃ ▄ ▅ ▆ ▇ █  การกำหนดเเบบอักษร 
 เป็นการกำหนดลักษณะตัวอักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด ก็จะแสดงผลเหมือนกัน เช่น การกำหนดให้ตัวอักษรเป็นตัวหนา ตัวเอียง ตัวขีดฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกำลังในสูตรทางคณิตศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทางวิทยาศาสตร์ เป็นต้น
 
▂ ▃ ▄ ▅ ▆ ▇ █  ขนาดตัวอักษร 

มีรูปแบบโค้ดดังนี้
<font size=n>...</font> ซึ่ง n มีค่าตั้งแต่ 1 ถึง 7




▂ ▃ ▄ ▅ ▆ ▇ █  สีอักษร 
เป็นคำสั่งที่ใช้กำหนดสีของตัวอักษรให้มีสีต่างๆตามต้องการโดยการกำหนดเลขฐาน16

 รูปแบบคำสั่ง
<BODY TEXT="#เลขฐาน16 จำนวน 6 ตัว">......</BODY>


▂ ▃ ▄ ▅ ▆ ▇ █  ตัวเอียง ตัวหนา ตัวขีดเส้นใต้ 
ในที่นี้จะได้ทราบถึงการกำหนดรูปแบบตัวอักษรให้เป็น ตัวอักษรเอียง<I>,ตัวอักษรหนา<B>,และตัวอักษรมีเส้น<U>
 รูปแบบคำสั่ง
<B>......</B>
<I>......</I>
<U>......</U>


▂ ▃ ▄ ▅ ▆ ▇ █  ตัวขีดฆ่า ตัวยก ตัวห้อย 

รูปแบบคำสั่ง
ตัวขีดฆ่า ใช้คำสั่ง <S>...</S>
ตัวอักษรยกขึ้น ใช้คำสั่ง <SUP>...</SUP>
ตัวอักษรห้อยลง ใช้คำสั่ง <SUB>...</SUB>


▂ ▃ ▄ ▅ ▆ ▇ █  ตัวอักษรวิ่ง 

  รูปแบบคำสั่ง

▂ ▃ ▄ ▅ ▆ ▇ █  ตัวอักษรกระพริบ 
เป็นคำสั่งที่ใช้กำหนดตัวอักษรที่อยู่ใน Tag เกิดการกระพริบ ซึ่งคำสั่งนี้จะใช้ได้กับ Browser ของ Netscape เท่านั้น
รูปแบบคำสั่ง
 <BLINK>......</BLINK>



▂ ▃ ▄ ▅ ▆ ▇ █  การจัดตำเเหน่งข้อความ 

รูปแบบคำสั่ง
<P ALIGN=" Left or Right or Center">......</P>

▂ ▃ ▄ ▅ ▆ ▇ █  ที่มา 
  http://it.technicphrae.ac.th/it/elearning/html/html2.html //26.8.12
            http://www.bkk1.in.th/Topic.aspx?TopicID=7177 //26.8.12
 http://bringza024.blogspot.com/2012/09/blog-post.html //26.8.12

เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)