วันพฤหัสบดีที่ 12 กันยายน พ.ศ. 2556

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

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

ส่วนประกอบของตาราง

      
 1.เซลล์ (cell)   
      
 2. แถว (row)
      
  3.คอลัมน์ (column)

Tag ที่เกี่ยวข้องกับตารางมี ดังนี้้่

         <TABLE>...ระบุว่่าสิ่งที่อยู่ภายใน....</TABLE>(จะแสดงอยู่ในตาราง) เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดของตาราง

         <TR>...ระบุว่่าสิ่งที่อยู่ภายใน...</TR>(จะแสดงอยู่ในแถวเดียวกัน) เป็นการบอกจำนวนแถว (row)

         <TD>...ระบุว่่าสิ่งที่อยู่ภายใน...</TD>(จะแสดงอยู่ในเซลล์เดียวกัน) เป็นการบอกจำนวนคอลัมน์ (column)

  

การปรับขนาดความกว้าง (WIDTH) และความสูง (HEIGHT)

        การกำหนดความกว้างและความสูงให้กับตาราง WIDTH และ HEIGHT ในแท็ก <TABLE>

 

ตัวอย่าง Code

 

ผลจาก Code


การใส่ขอบตาราง

    Border คือ ความหน้าของเส้นตาราง

          เมื่อ "x" มีค่าได้ตั้งแต่ ศูนย์ขึ้นไป ใช้กำหนดขนาดของเส้นขอบตาราง

 

ตัวอย่าง Codc


 

 ผลจาก Code

การรวมเซลล์

           เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์(COLUMN) และการรวมแถว(ROW)

  • การรวมคอลัมน์

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

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


 ตัวอย่าง Codc

 

 ผลจาก Code

 

  • การรวมแถว

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

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

 ตัวอย่าง Codc

 

 ผลจาก Code


 



แหล่งอ้างอิง:http://school.obec.go.th/pp_school/html/table.html
                     http://www.kty.ac.th/html/unit5/unit503.html

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

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

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

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

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

      <img src="x"> โดยที่ "x" คือไฟล์รูปภาพที่ต้องการแสดง เช่น

               รูปแบบcode  <img src="แตงโม.jpg">

 

การแสดงผล

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

     หากรูปภาพไม่ได้เก็บไว้ที่ path(ตำแหน่ง) เดียวกับเอกสารhtml จะต้องระบุ path ของรูปภาพไว้หน้าไฟล์ด้วย เช่น

      รูปแบบcode <img src="sirinad/images/แตงโม.jpg">

 การแสดงผล

 IMG SRC คือ การอ้างแหล่งที่อยู่ของรูปภาพ ตัวอย่างการใช้ img ร่วมกับ src

                   code <img src="sirinad/images/lovetangmo.jpg">

 

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

           Code <IMG SRC ="ชื่อรูปภาพ" width=ขนาดความกว้าง>

 

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

        Code <IMG SRC ="ชื่อรูปภาพ" height=ขนาดความสูง>

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

  • top กำหนดตำแหน่งให้รูปภาพไปอยู่ด้านบน
  • bottom กำหนดตำแหน่งให้รูปภาพไปอยู่ด้านล่าง
  • middle',center กำหนดตำแหน่งให้รูปภาพไปอยู่ตรงกลาง
  • left กำหนดตำแหน่งให้รูปภาพไปอยู่ด้านซ้าย
  • right กำหนดตำแหน่งให้รูปภาพไปอยู่ด้านขวา
             Code<center><IMG SRC ="ชื่อรูปภาพ"></center>

   

ตัวอย่าง Code 

<center><IMG SRC ="แตงโม.jpg" width= 100 height=200></center>

 

  การแสดงผล

 

อ้างอิง http://www.sadung.com/?p=5850

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

วันเสาร์ที่ 7 กันยายน พ.ศ. 2556

HTML tag พื้นฐาน

HTML ย่อมาจาก Hyper Texl Markup Language

ใช้โปรแกรมอะไรสร้าง?

โปรแกรมที่ใช้เปิดผลลัพธ์ของ html คือ โปรแกรมประเภท web browser ได้แก่ Google Crom,Firefox,IE

Text Editor

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

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

เอกสาร html จะมีองค์ประกอบหลักๆ อยู่ 2 ส่วนคือ

  • ข้อความที่ต้องการให้แสดงบนจอภาพ
  • ข้อความที่เป็นคำสั่ง  

 ตัวอย่างCode และ การแสดงผล

<html>......</html>   

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

<head>......</head>

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

<title>......</title>ด

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

<body>......</body>

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

<BR>

        คือ รูปแบบคำสั่งการขึ้นบรรทัดใหม่

<P> 

        คือ รูปแบบคำสั่งการขึ้่นย่อหน้าใหม่

ตัวอย่างCode

การแสดงผล

 
แหล่งอ้างอิง https://sites.google.com/site/easyhtmllanguage/khwam-hmay-khxng-html
http://pirun.ku.ac.th/~agrtnk/web/units/unit1/unit1-3.htm


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