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

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

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

ในการสร้างตารางจะมีแท็กที่สำคัญอยู่หลายแท็ก ดังนี้

TABLE
ใช้สำหรับบอกจุดเริ่มต้น และจุดสิ้นสุดของตาราง

รูปแบบคำสั่ง
          <table>................</table>

TR
ใช้สำหรับสร้างแถวของตาราง

รูปแบบคำสั่ง
<tr>................</tr>

TH
ใช้นำหน้าข้อมูลที่ต้องการให้ปรากฏในแต่ละช่องของตาราง โดยส่วนใหญ่จะใช้เป็นหัวเรื่อง ลักษณะตัวอักษรจะเป็นตัวหนา และจะถูกจัดให้อยู่กึ่งกลางของช่องข้อมูล

รูปแบบคำสั่ง
<th>................</th>

TD
ทำหน้าที่คล้ายกับแท็ก <TH> และ </TH> แต่ลักษณะตัวอักษรจะเป็นขนาดปกติ และจะถูกจัดให้ชิด้านซ้ายของช่องข้อมูล ส่วนใหญ่จะใช้ในส่วนที่เป็นรายละเอียดของข้อมูล

รูปแบบคำสั่ง
<td>................</td>

การปรับความกว้าง (width)

width = "x"
     
          จะใช้กำหนดความกว้างของตาราง กำหนดค่า x ในรูปของ เปอร์เซ็นต์ ของขนาดพื้นที่ที่โปรแกรม web browser สามารถจะแสดงได้หรือกำหนดค่าเป็นตัวเลข เพื่อให้ web browser แปลงค่าไปเป็นค่าของ pixels

รูปแบบคำสั่ง 
   
<table width = "150"> หรือ <table width = "50%">

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

hight = "x"
 
          จะใช้สำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ 

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


    <table hight = "150"> หรือ <table hight = "10%">


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

align = "x"
   
          จะใช้เพื่อกำหนดตำแหน่งของตาราง โดยที่ค่า "x" มีค่าเป็น left, right หรือ center โดยโปรแกรม web browser มีค่า default เป็น left

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

<table align = "left">  หรือ <table align= "right">หรือ <table align = "center">


การรวมเซลล์ตาราง - rowspan,colspan

การรวมแถว

rowspan = "x"

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

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

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

colspan = "x"

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

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

ตัวอย่าง

ผลที่ได้

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

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

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

1. ไฟล์ GIF (CompuServe Graphics Interchange Format) มีนามสกุล .gif เป็นไฟล์ชนิด บิตแมบ 8 บิตสี เก็บค่าสีสูงสุดได้ 256 สี เป็นไฟล์แบบบีบย่อขนาด ใช้แสดงผลพวกภาพ การ์ตูน หรือกราฟิกที่มีสีสันไม่มาก และภาพชนิดเคลื่อนไหวที่มีความละเอียดไม่มากนัก

2. ไฟล์ JPEG หรือ JPG (Joint Photographic Experts Group) มีนามสกุล .jpg เป็นไฟล์ที่ พัฒนาเพื่อใช้งานกับภาพที่มีสีสันสดใสและความละเอียดสูงมาก สามารถเก็บภาพได้ 24 บิตสี แสดงสีได้ถึง 16.7 ล้านสี เป็นไฟล์ที่ผ่านกระบวนการบีบอัดข้อมูลในอัตรา 10:1 ใน การแสดงผลในเว็บเพจ ไฟล์ *.jpg จะแสดงผลช้ากว่าไฟล์ *.gif ในขนาดไฟล์ที่เท่ากัน ดังนั้นจึงนิยมใช้ไฟล์ *.jpg ในภาพขนาดใหญ่ ถ้าเป็นภาพขนาดเล็กจะใช้ไฟล์ชนิด *.gif มากกว่า

3. ไฟล์ PNG (Portable Network Graphic) เป็นไฟล์ที่พัฒนาขึ้นมาโดยนำเอาคุณสมบัติที่ดีเด่นของไฟล์ GIF และ JPG มารวมกัน กล่าวคือสนับสนุนจำนวนบิตสีได้ถึง 24 บิต เหมือนกับภาพแบบ JPG ในขณะที่การบีบอัดไฟล์ใช้การทำงานแบบ GIF การแสดงผลในแบบ Interlace และยังสามารถทำภาพโปร่งใสได้


การแทรกรูปภาพ มี 2 กรณี ดังนี

กรณีที่ 1 รูปภาพอยู่ที่เดียวกับไฟล์เว็บเพจ
 กล่าวคือ ไฟล์รูปภาพที่อยู่ในตัวเครื่อง จะต้องอยู่ใน Folder เดียวกับไฟล์เว็บเพจ ดังรูป

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

    <img scr=“x”> โดยที่ x คือไฟล์รูปภาพที่ต้องการแสดง

ตัวอย่าง

ผลที่ได้

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

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

          

     <img scr=“x”> โดยที่ x คือไฟล์รูปภาพที่ต้องการแสดง แต่จะต้องระบุ Path ของรูปภาพไว้หน้าไฟล์ด้วย

ตัวอย่าง

ผลที่ได้

แหล่งอ้างอิง :  http://pirun.ku.ac.th/~agrtnk/web/units/unit4/unit4.htm

19/8/2555

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

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

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

            คำสั่ง <FONT FACE> เป็นการกำหนดชนิดของตัวอักษรตามที่เราต้องการ ชื่อชนิดของตัวอักษรจะใช้ตามชื่อตามโปรแกรม Word และเมื่อจบประโยคหรือข้อความที่เราต้องการจะต้องจบด้วย </FONT>

            รูปแบบคำสั่ง <FONT FACE = “ชนิดของตัวอักษรที่เราต้องการ”>...ข้อความ...</FONT>

ตัวอย่าง

ผลที่ได้

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

                 การกำหนดขนาดตัวอักษร ในที่จะกล่าวถึงเพียงคำสั่งเดียวที่นิยมใช้กัน เพื่อป้องกันการสับสน คำสั่ง <FONT SIZE> ซึ่งจะมีระดับขนาดตัวอักษรตั้งแต่ -7 ถึง +7 ซึ่งตัวเลขยิ่งมากขนาดยิ่งใหญ่ และเมื่อจบประโยคหรือข้อความที่เราต้องการจะต้องจบด้วย </FONT>

 รูปแบบคำสั่ง <FONT SIZE = “number (-7 ถึง +7)” > …ข้อความ... </FONT>

ตัวอย่าง

ผลที่ได้

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

         การกำหนดสีของตัวอักษรเราจะใช้คำสั่ง <FONT COLOR> ซึ่งเป็นคำสั่งใช้ในการกำหนดสีตัวอักษรและจบคำสั่งด้วย < /FONT > 

      รูปแบบคำสั่ง <FONT COLOR= “ สีเป็นภาษาอังกฤษหรือรหัสสี ”>...ข้อความ...</FONT>

ตัวอย่าง การกำหนดสีจากชื่อสีมาตรฐาน

ผลที่ได้

ตัวอย่าง การกำหนดสีจากรหัสสี

ผลที่ได้

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

            เป็นการกำหนดให้ตัวอักษรให้มีลักษณะเป็นตัวหนา (Bold text), ตัวเอียง (Italic text) และ ตัวขีดเส้นใต้ (Underlined text) ซึ่งมีรูปแบบคำสั่งดังนี้

            การกำหนดตัวอักษรให้เป็นตัวหนา

                        รูปแบบคำสั่ง   <B> …</B>

            การกำหนดตัวอักษรให้เป็นตัวเอียง

                        รูปแบบคำสั่ง   <I> …</I>

            การกำหนดตัวอักษรให้เป็นตัวขีดเส้นใต้

                        รูปแบบคำสั่ง   <U> …</U>

            การกำหนดตัวอักษรให้เป็นตัวขีดฆ่า

                        รูปแบบคำสั่ง   <S> …</S>

            การกำหนดตัวอักษรให้เป็นตัวอักษรยกขึ้น

                        รูปแบบคำสั่ง   <SUP> …</SUP>

            การกำหนดตัวอักษรให้เป็นตัวอักษรห้อย

                        รูปแบบคำสั่ง   <SUB> …</SUB>

            การกำหนดตัวอักษรให้เป็นตัวอักษรกระพริบ ( ใช้ได้เฉพาะ Netscape Navigator )

                        รูปแบบคำสั่ง  <BLINK>...</BLINK> 

            การกำหนดตัวอักษรให้เป็นตัวอักษรวิ่ง ( ใช้ได้เฉพาะ Internet Explorer )

                        รูปแบบคำสั่ง   <MARQUEE>...</MARQUEE>

ตัวอย่าง

ผลที่ได้

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

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

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

           <P ALIGN =“LIEFT/CENTER/RIGHT”>….</P>

ตัวอย่าง

ผลที่ได้

แหล่งอ้างอิง

 http://113.53.238.199/it/elearning/html/html2.html

http://www.sompongtaruwan.net/HTML/HTML.html

11/7/51

HTML Tag พื้นฐาน

HTML ย่อมาจาก HyperText Markup Language ใช้โปรแกรม Notepad ใช้โปรแกรม web browser ในการเปิดเอกสารเช่น IE 


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

องค์ประกอบของเอกสาร html มี 2 ส่วนคือ
 1. ส่วน Head คือส่วนที่จะเป็นหัวของเอกสารทั่วไปและส่วนชื่อเรื่อง
 2. ส่วน Body เป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งประกอบด้วย Tag คำสั่งในการจัดรูปแบบ







<html>   คือ...

<HTML>..........</HTML>

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

<head>  คือ...

<HEAD>..........</HEAD>

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

 

<title>   คือ...

         <TITLE>..........</TITLE >

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

<body> คือ...

           <BODY>..........</BODY>

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

<BR>   คือ...

                tag <br> คือคำสั่งที่ใช้ตัดข้อความ หรือการปัดให้ขึ้นบรรทัดใหม่

<P>     คือ...

                Tag <p> คือการขึ้นย่อหน้าใหม่  หรือการปัดให้ขึ้นบรรทัดใหม่ 2 บรรทัด

แหล่งอ้างอิง...

www.thainextstep.com/html/html_03.php

www.htmlthailand.com/article.php?aid=34

13/6/55

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

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

WWW = World Wide Web  เป็นการใช้งานแบบหนึ่งใน Internet ทีทำงานในระบบ Client Server เป็นโปรแกรมที่ทำงานเกี่ยวกับส่วนหนึ่งของข้อมูล

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

ตัวอย่างเว็บเพจหน้าแรกของเว็บไซต์ google

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

Home Page =  เว็บเพจแรกที่ปรากฏหลังจากเริ่มใช้ web browser เช่น Netscape Navigator หรือ Microsoft Internet Explorer ซึ่ง browser มักจะได้รับการตั้งค่าก่อน ดังนั้น home page คือ เพจแรกของผู้ผลิต browser อย่างไรก็ตามผู้ใช้สามรถตั้งค่าการเปิด web site อื่น ๆ 

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

HTML = (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) คือภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) สำหรับภาษา SGML ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน

HTML ยังคงเป็นรูปแบบไฟล์อย่างหนึ่ง สำหรับ .html และ สำหรับ .htm ที่ใช้ในระบบปฏิบัติการที่รองรับ รูปแบบนามสกุล 3 ตัวอักษร

ตัวอย่าง โครงสร้างไฟล์ html 

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

URL = The Uniform Resource Locators (URL) เป็นเสมือนที่อยู่ของเอกสารบนเว็บ ทุกๆ เอกสารจะต้องมี URL เป็นของตัวเอง แต่ละส่วนของ URL เป็นสิ่งที่ใช้ระบบข้อมูลเกี่ยวกับที่ตั้งของเอกสาร ตัวอย่างเช่น

http://www.xvlnw.com
http://www.xvlnw.com/index.php?name=download

อ้างอิง 

http://www.bloggang.com/mainblog.php?id=kawaiicas&month=09-07-2009&group=2&gblog=10

http://www.thaigoodview.com/library/contest2553/type2/tech04/05/_www.html

30/5/55

อยากรู้จักหรอก็เข้ามา ; )

 ชื่อที่ผู้ให้กำเนิดตั้งให้ นาย เกียรติชัย หัวนะราษฎร ชื่อ เล่น ๆ  ที่เพื่อนชองเรียก เฟรม


ได้ออกมาสู่โลกภายนอกเมื่อ 14 เดือน พฤษภาคม ปี 2537  อายุ 18 ปีและ แต่หน้าตายังเด็ก ๆ  -0-


ตอนนี้กำลังหาความรู้ ที่สถานศึกษา โรงเรียน ธนบุรี วรเทพีพลารักษ์ (ไม่มีที่ไป 555)


เกมส์ที่เล่นร๋อ Cabal Audition Dota  (เจอได้ หาทีมมา)


pin หรอ ไม่มีหรอกของแบบนั้นมีแต่ วอชแอ๊ป Add มาละกัน 083 036 3209 โทรได้ 24 ชม. นะจ๊ะ


ณ ปัจจุบัน ที่ ซุกหัวนอนอยู่ที่ เอกชัย 18 คิดถึงก็มาหา อิอิ


อ้อลืมอีกอย่าง เรามี Facebook น๊ะ Add มาเรยยย  kaittichai huanaradsadon  ไม่รับเด็กเสี่ยว ไม่ชอบ เข้า ใจ๊


สุดท้ายขอ จากลา โชคดีมีชัย ^^