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

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

 

การสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้

<table>...</table>   เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
<tr>....</tr>             เป็นการบอกจำนวนแถว (row)
<td>...</td>             เป็นการบอกจำนวนคอลัมน์ (colunm)

 

ตัวอย่าง

 

 

ผล

 



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

        การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้

        1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
           <table width="50%" height="60%">

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

ตัวอย่าง

 

 

ผล

 

 

 

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

border="X"

border="1" หมายความว่าให้ตีเส้นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่าเป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้

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

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

<caption align="ตำแหน่ง">ข้อความกำกับตาราง</caption>

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

ตัวอย่าง

 

 

ผล

 

 

 

การรวมเซลล์

เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป เหมือนตารางใน Microsoft Word หรือ Microsoft Excel การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์ และการรวมแถว

1) การรวมคอลัมน์       เป็นการรวมเซลล์ตามแนวนอนตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN กำหน ดไว้ในคำสั่ง <TD> รูปแบบ <TR> <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR> เช่น <TD COLSPAN = "3">จำนวนนักเรียน</TD> เป็นคำสั่งรวมคอลัมน์จำนวน 3 คอลัมน์มาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ จำนวนนักเรียน ตัวอย่าง   ผล

2) การรวมแถว

เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์ รูปแบบ <TR> <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD></TR> เช่น <TD ROWSPAN ="2">ลำดับที่</TD> เป็นคำสั่งรวมแถวจำนวน 2 แถวมาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ ตัวอย่าง

ผล



แหล่งที่มา :

http://school.obec.go.th/pp_school/html/table.html
http://www.kty.ac.th/html/unit5/unit503.html
http://www.thainextstep.com/html/html_09.php
สมุดจดอ.ชัยราวี


02/09/55     16:16

การแทรกภาพ

       ตามปกติภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .JPG หรือ .GIF เพราะเป็นไฟล์ภาพที่มีขนาดเล็ก สามารถแสดงผลได้รวดเร็ว จึงไม่ต้องเสียเวลาในการรอให้ภาพปรากฏนานเกินไป

การแทรกภาพใช้คำสั่งดังนี้
กรณีที่ 1 รูปภาพอยู่ที่เดียวกับไฟล์เว็บเพจ

<img src = "..ใส่ URL ของรูปนั้นๆ…">

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

<img src = "http://facstaff.swu.ac.th/sasivimo/imges/mypic01.jpg">

 

แล้วบันทึกไว้ที่เดียวกับรูปภาพ

ผล

 

   การปรับขนาดรูปภาพ

<IMG SRC="ชื่อภาพ" WIDTH=ขนาดความกว้าง HEIGHT=ขนาดความสูง>
เช่นภาพชื่อ girl.jpg มีขนาดความกว้าง 80 และความสูง 100 จะใช้คำสั่งแสดงภาพเป็น
<IMG SRC="girl.jpg" WIDTH=80 HEIGHT=100>

หรือในกรณีที่ต้องการแสดงภาพที่มีขนาดเท่ากับต้นฉบับ ก็จะใช้คำสั่งเพียงสั้น ๆ ดังนี้

<IMG SRC="ชื่อภาพ"> เช่น
<IMG SRC="girl.jpg">

   การกำหนดรูปภาพอยู่ตรงกลาง

<CENTER>IMG SRC ="ชื่อไฟล์รูปภาพ"></CENTER>


ตัวอย่าง

ผลลัพธ์

แหล่งที่มา :
http://www.bloggang.com/viewdiary.php?id=kluaytub&month=10-2007&group=5&date=10&gblog=2
http://www.bkk2.in.th/Topic.aspx?TopicID=7181
สมุดจดอ.ชัยราวี


14/08/55   19:02

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

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

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

<FONT FACE="font name หรือ typeface">..........</FONT>

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

<FONT SIZE="ค่ากำหนดขนาดของตัวอักษร">..........</FONT>

• สีตัวอักษร

<font color=ชื่อสีหรือ#รหัสสี > .....ข้อความ...... </font>

• ตัวเอียง

<I>...ข้อความ..... </I>

• ตัวหนา

<B>.....</B>

• ขีดเส้นใต้

<U>......</U>

• ตัวขีดฆ่า

<S> .........</S>

• ตัวยก

<SUP> ตัวอักษรยกขึ้น</SUP>

• ตัวห้อย

<SUB> ตัวอักษรห้อยลง</SUB>

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

<MARQUEE>ตัวอักษรวิ่ง</MARQUEE>

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

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

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

         การย่อหน้าแบบชิดซ้าย
<P ALIGN=LEFT>ชิดซ้าย</P>
         การย่อหน้าแบบกึ่งกลาง
<P ALIGN=CENTER>กึ่งกลาง</P>
         การย่อหน้าแบบชิดขวา
<P ALIGN=RIGHT>ชิดขวา</P>

ตัวอย่าง

ผลที่ได้

แหล่งที่มา :
http://www.nr.ac.th/learning/htmlforweb/learning2.html
http://html-language.blogspot.com/2009/05/html.html
สมุดจด อ.ชัยราวี


10/07/55   18:41



HTML Tag พื้นฐาน

HTML Tag พื้นฐาน

HTML

- ย่อมาจากคำว่า Hyper Text Markup Language 

- ใช้โปรแกรม Notepad สร้าง

- เปิดด้วยโปรแกรม Web Browser เช่น Google Chrome / Internet Explorer / Mozilla Firefox



Text Editor

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

 ข้อควรจำ

          โปรแกรม Text Editor ใช้สำหรับสร้างเว็บเพจ แต่โปรแกรม Web Browser ใช้สำหรับแสดงผลการทำงานของคำสั่งต่าง ๆ ที่สร้างจากโปรแกรม Text Editor นั่นหมายความว่าการจะสร้างเว็บเพจ ต้องมีเครื่องมือหรือโปรแกรมทั้ง 2 ประเภท คือ Text Editor และ Web Browser

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

ประกอบด้วย 2 ส่วนใหญ่ๆ คือ

- ข้อความที่ต้องการให้แสดงบนจอภาพ

- ข้อความที่เป็นคำสั่ง

HTML พื้นฐาน

คำสั่งเริ่มต้น

        รูปแบบคำสั่ง <HTML>........</HTML> คำสั่ง <HTML> ซี่งจะถือเป็นคำสั่งเริ่มต้นของการเขียน HTML และคำสั่ง </HTML> จะเป็นส่วนของการจบ

การเขียน HTML
        รูปแบบคำสั่ง <HEAD>..........</HEAD> คำสั่ง <HEAD> เป็นคำสั่งที่ใช้ในการกำหนดข้อความส่วนที่เป็นชื่อเรื่องซึ่งภายใต้ของคำสั่งนี้จะมีคำสั่งย่อย อีกคำสั่งหนึ่งคือ คำสั่ง <TITLE>........</TITLE>

รูปแบบคำสั่ง
        <TITLE>.........</TITLE>
        คำสั่ง <TITLE>.....</TITLE> จะเป็นส่วนของการแสดงชื่อของเอกสาร จะปรากฎในขณะที่ไฟล์ HTML ทำงานการแสดงผลจะแสดงในส่วนของไตเติลบาร์ ( Title Bar )

        <body>...</body> คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น

         <BR> มาจากคำว่า BREAK ซึ่งหมายถึง การขึ้นบรรทัดใหม่

         <P> มาจากคำว่า Paragraph ซึ่งหมายถึง การขึ้นย่อหน้าใหม่

ตัวอย่าง

ผล

รายชื่อเวปไซต์ที่น่าสนใจ
ต่อไปนี้เป็นรายชื่อเวปไซต์ที่น่าสนใจ โดยมีการจัดเป็น หมวดหมู่เพื่อช่วยให้การค้นหานั้นสะอาด และรวดเร็ว กรุณา Click Mouse เพื่อไปส่วนที่คุณสนใจ
ความบันเทิง
เวปไซต์สำหรับครอบครัว
ความรู้ด้านคอมพิวเตอร์

         แหล่งที่มา :

 http://school.obec.go.th/pp_school/html/editor.html

 http://www.oknation.net/blog/ict/2009/04/21/entry-1

 http://www.xvlnw.com/knowledge-readknowledge-id40.html

 http://computer.act.ac.th/phadungs/html_tutor/lesson006.html

26/06/55  17:42

คำศัพท์

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

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

www (World Wide Web) เป็นบริการข้อมูล โดยข้อมูลของ www จะอยู่ในรูปเอกสารแบบ Hypertext ซึ่งภายในเอกสารจะมีจุดเชื่อมโยง (link) ไปยังเอกสารอื่นๆ ที่เกี่ยวข้อง เอกสารต่างๆ 

เว็บเพจ (Web Page) คือ เนื้อหาของเว็บไซต์ทุกๆหน้า หรือหน้าใดๆได้ทุกหน้าจะเป็นหน้าที่เีรา่เรียกเฉพาะเจอะจงเข้าไป จะเป็นหน้า general หรือหน้าใดก็ได้
ถ้าเป็นหนังสือก็คือ หน้าต่างๆที่เราเปิดไปเพื่อที่จะอ่านนั่นเอง

เว็บไซต์ (Website) หมายถึง แหล่งความรู้หรือข้อมูลข่าวสารที่ถูกเก็บไว้บนระบบ เน็ตเวิร์ก (Network) ออนไลน์ (Online) ที่เรียกว่า อินเตอร์เน็ต (Internet) ไม่ว่าคุณจะอยู่ที่ไดบนโลกนี้ถ้า คอมพิวเตอร์ (Computer) ของคุณได้ถูกเชื่อมต่อไว้กับระบบอินเตอร์เน็ต คุณก็สามารถที่จะเข้าชมเว็บไซต์ผ่านทาง ซอฟต์แวร์ (Software) ที่เรียกว่า เว็บบาวเซอร์ (Web Browser)

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

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

เว็บเบราว์เซอร์ตัวแรกของโลกชื่อ เวิลด์ไวด์เว็บ ขณะเดียวกันเว็บเบราว์เซอร์ที่นิยมมากที่สุดในปัจจุบันคือ อินเทอร์เน็ตเอกซ์พลอเรอ

HTML (Hypertext Markup Language) คือ ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ เพื่อนำไปแสดงผลในโปรแกรม Web browser เอกสารเว็บเพจจะมีนามสกุลเป็น .htm หรือ .html 

URL ย่อมาจาก unifrom resource locator หมายถึงตัวบอกข้อมูลหรือที่อยู่ของไฟล์บนเว็บไซต์บนอินเตอร์เน็ต

แหล่งที่มา :
http://th.wikipedia.org/wiki

http://school.obec.go.th/pp_school/html/Web1.html

http://www.phuketmultimedia.com/knowledge.html



12/06/55

แนะนำตัว

About Me !!

                                              

Name : Jittrapa mooampan

Nick Name : GOLF

HBD : 2 Jan 1995

Age : 17 years old

Sport : Basketball

Food : Phad thai

Color : Blue

Vocation : Business

Facebook : http://www.facebook.com/?ref=logo#!/profile.php?id=100002484134554