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

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

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

คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML  มีดังนี้

<TABLE>...........</TABLE>   

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

 <CAPTION>...........</CAPTION>   

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

 <TR>...........</TR>   

เป็นคำสั่งที่ใช้กำหนดแถว (ROW)

 <TH>...........</TH>   

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

<TD>...........</TD>   

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

 โครงสร้างของตาราง

<TABLE>

            <CAPTION> ชื่อตาราง </CAPTION>

  <TR>

    <TH> ข้อมูลส่วนหัว </TH>

   </TR> 

  <TR>

    <TD> ข้อมูล </TD>

   </TR>

   <TR>

     <TD> ข้อมูล </TD>

     </TR>

        </TABLE>   

ตัวอย่างการสร้างตาราง

ผลลัพธ์

คำสั่งต่างๆ ที่ใช้ในการตกแต่งตารางของภาษา HTML 

คำสั่ง BORDER   ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย  BORDER  ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง  

ตัวอย่างการใช้คำสั่ง BORDER

ผลลัพธ์

คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ

                  - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ

- RIGHT  คือ จัดตารางชิดขวาของจอภาพ

          - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ

ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ

ผลลัพธ์

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

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

- คำสั่ง BGCOLOR เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ InternetExplorerเท่านั้น

ตัวอย่าง

ผลลัพธ์

คำสั่ง CELLPADDING  ใช้กำหนดระยะห่างระหว่างบรรทัดของตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความสูงของเส้นขอบตาราง

ตัวอย่าง

ผลลัพธ์

คำสั่ง 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 

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

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

   1.การแทรกรูปภาพจากเว็บไซต์ อื่นๆ

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

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

ตัวอย่าง Code

ผลที่ได้

1. Img Src  การแทรกรูปภาพ การใส่รูปภาพ   <img src = "ชื่อภาพ">

2. Width    ความกว้าง      width="ตัวเลขระบุความกว้าง"

3. Height   ความสูง         height="ตัวเลขระบุความสูง"

4. Align    ตำแหน่งภาพ  align = "..." (left,center,right)

ตัวอย่าง Code

ผลที่ได้

ที่มา

http://lyrics.in.th/

http://www.thainextstep.com/html/html_06.php

http://118.174.14.67/html/images2.html

http://www.youtube.com/watch?v=kYYUQdBgQz8

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

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

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

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

ตัวอย่างCode

การแสดงผล

ขนาดตัวอัษร

เราสามารถกำหนดขนาดของตัวอักษรได้ 2 วิธี

1. ในกรณีที่เป็นหัวข้อ (Heading) สามารถใช้คำสั่งต่อไปนี้

<H1>ขนาดใหญ่สุด</H1>

<H2>ขนาดใหญ่</H2>

<H3>ขนาดกลาง</H3>

<H4>ขนาดปกติ</H4>

<H5>ขนาดเล็ก</H5>

<H6>ขนาดเล็กสุด<H6>

2. ในกรณีทั่วไป จะใช้คำสั่ง <FONT SIZE=ค่าตัวเลข> เช่น

<FONT SIZE=3>ตัวอักษรขนาด 3</FONT> หรือ

<FONT SIZE=5>ตัวอักษรขนาด 5</FONT> 

ตัวอย่างCode

การแสดงผล

สีตัวอักษรทั้ง2แบบ

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

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

<FONT COLOR=red>ตัวอักษรสีแดง</FONT> หรือ 

<FONT COLOR=green>ตัวอักษรสีเขียว</FONT>

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

<FONT COLOR=#FF00FF>ตัวอักษรสีชมพู</FONT> หรือ

<FONT COLOR=#0000FF>ตัวอักษรสีน้ำเงิน</FONT>

ตัวอย่างCode

การแสดงผล

ตัวเอียง ตัวหนา ขีดเส้นใต้

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

<I>ตัวเอียง</I>

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

<U>การกำหนดตัวอักษรวิ่ง </u>

ตัวอย่าง Code

การแสดงผล

ตัวขีดฆ่า ตัวยก ตัวห้อย

คำสั่งสำหรับกำหนดตัวอักษรตัวขีดฆ่า   <S> </S>

คำสั่งสำหรับกำหนดตัวอักษรตัวยก        

คำสั่งสำหรับกำหนดตัวอักษรตัวห้อย    

ตัวอย่างCode

การแสดงผล

ตัวอักษรวิ่ง ตัวอักษรกระพริบ

การกำหนดตัวอักษรวิ่ง   <MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง"   height="ความสูง"  scrollamount=ความเร็วในการวิ่ง  scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>> 

UP วิ่งจากด้านล่างขึ้นด้านบน

DOWN วิ่งจากด้านบนลงด้านล่าง

LEFT วิ่งจากด้านขวาไปด้านซ้าย

RIGHT วิ่งจากด้านซ้ายไปด้านขวา

ตัวอย่างCode

<HTML>

<HEAD>

<TITLE>การทำตัวอักษรวิ่ง</TITLE>

</HEAD>

<BODY>

<marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>

</BODY> 

</HTML>

การแสดงผล

ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์กวี คนดีศรีอยุธยา

การกำหนดตัวอักษรกระพริบ   <BLINK> </BLINK>

ตัวอย่างCode

<HTML>

<HEAD>

<TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>

</HEAD>

<BODY> <BLINK>Siam2wed</BLINK>

</BODY>

</HTML>

การแสดงผล

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

1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center  <center> ...ข้อความ...</center>

2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้

 <p align = "ตำแหน่ง"> ...ข้อความ...</p> ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

ตัวอย่างCode

<html>
<head>
<title>เว็บไทยดีดี :: webthaidd</title>
</head>
<body>
<p align=left>ข้อความอยู่ทางซ้าย</p>
<p align=center>ข้อความอยู่ตรงกลาง</p>
<p align=right>ข้อความอยู่ทางขวา</p> 
</body>
</html>

การแสดงผล

ที่มา

http://www.freescriptsplanet.com
http://www.bkk1.in.th/Topic.aspx?TopicID=7177
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/4-kar-cadkar-tahttp://
www.webthaidd.com/html/webthaidd_article_320_.htmlw-xaksr

HTML tag พื้นฐาน

HTML tag พื้นฐาน

- HTML ย่อมาจาก  HyperText Markup Language ใช้โปรแกรม   Notepad   และtext edit  เขียนโปรแกรม ใช้เว็บบราวเซอร์ในการเปิดูเอกสาร  

- Text Editor คือ โปรแกรมที่ใช้ในการสร้างและแก้ใขในการสร้างเว็บเพจด้วยภาษา html เช่น Notepad,Editplus             

- องค์ประกอบของ html คือ 

1. ส่วนประกอบของ Head คือส่วนที่จะเป็นหัว ขอหน้าเอกสารทั่วไป หรือ ส่วนชื่อเรื่อง Title ของหน้าต่างการทำงานในระบบ Windows

2. ส่วนของเนื้อหาของเอกสารนั้นๆจะใช้  Body ซึ้งจะประกอบด้วย Tad คำสั่งในการจัดรูปแบบหรือตกแต่งเอกสาร  

ตัวอย่างดังนี้

<html>

<head><title>ชื่อหัวข้อเอกสาร</title></head>

<body>

Tad คำสั่ง

</body>

</html>

- <HTML> </HTML> คือ คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม

- <HEAD> </HEAD> คือ คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย 

- <Title> </Title> คือ <TITLE> อยู่ภายใน คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar

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

- <BR> คือ คำสั่งขึ้นบรรทัดใหม่ - <P> </P> คือ การใส่ข้อความ เช่น <p>ข้อความ</p>  ตัวอย่าง Code และการแสดงผล

ที่มา
http://gu-ruschool.blogspot.com
http://www.mindphp.com
http://www.thaigoodview.com

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

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

Internet

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

WWW

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

Website

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

Webpage

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

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

Web Browser

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

รายชื่อเว็บเบราว์เซอร์ ที่เป็นที่นิยมอย่างแพร่หลาย

-Internet Explorer

-Mozilla Firefox

-Google Chrome

-Safari                  

HTML
ย่อมาจากคำว่า Hyper Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้างโฮมเพจ

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

ที่มา

http://ultraman081.blogspot.com/2012/06/blog-post.html
http://th.wikipedia.org/wiki/
http://www.xvlnw.com/knowledge-readknowledge-id40.html