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

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

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

1.อธิบาย Tag
               TABLE : ใช้สร้างตารางข้อมูล
                            : <table>..........</table>
               TR : สำหรับแถวของตาราง
                     : <tr>.........</tr>
               TD : สำหรับข้อมูลในแต่ละ CELL
                     : <td>........</td>

2.การปรับความกว้าง สูง
               การกำหนดความกว้างและความสูงของตารางนั้น สามารถทำได้โดยใช้คำสั่งสำหรับกำหนดคุณลักษณะพิเศษเพิ่มเติม ที่อยู่ภายใต้คำสั่ง <TABLE> โดยคำสั่งที่ใช้สำหรับกำหนดคุณสมบัติพิเศษเพิ่มเติมนั้น คือ WIDTH เพื่อใช้สำหรับ กำหนดความกว้างของตารางและ HEIGHT สำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดได้ 2 ลักษณะ คือ 
กำหนดเป็นเปอร์เซ็นต์ของจอภาพ และกำหนดเป็นจำนวนพิกเซล โดยมีรูปแบบการใช้งานคำสั่ง ดังนี้
               <TABLE WIDTH= “ความกว้างของตาราง” HEIGHT= “ความสูงของตาราง”>

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

4.การจัดตำแหน่งตาราง
              ใช้คำสั่ง คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ
               - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
              - RIGHT  คือ จัดตารางชิดขวาของจอภาพ
              - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ
              รูปแบบคำสั่ง <TD ALIGN="ตำแหน่ง">

5.การรวมเซลล์ 
              ใช้คำสั่ง Colspan และ Rowspan 
               คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้ รูปแบบคำสั่ง <TD  COLSPAN = "Number">
โดยที่ COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
           Number คือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน

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

6.ตัวอย่าง CODE

7.ผลจาก CODE

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

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

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

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

Code : <IMG SRC = "ชื่อไฟล์รูปภาพ . นามสกุลไฟล์รูปภาพ">

code  คือ

ผลที่แสดงได้

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

Code : <IMG SRC = "แฟ้มที่อยู่ของไฟล์รูปภาพ /ชื่อไฟล์ภาพที่เราต้องการแสดง.นามสกุลของภาพ">

code  คือ

ผลที่แสดงได้

การปรับขนาดของภาพ

ใน การแทรกภาพเข้าสู่เอกสาร html นั้นขนาดของภาพอาจไม่ตรงตามที่เราต้องการ ซึ่ง html มีคำสั่งสำหรับปรับขนาดภาพโดยนำ width="" height="100" ไปต่อท้ายชื่อภาพภายในคำสั่งแสดงภาพ แล้วปรับขนาดภาพตามต้องการ  ดังตัวอย่าง

<img src="ที่จัดเก็บภาพ\ชื่อภาพ.JPG" width="250" height="350"/>

code  คือ

ผลที่แสดงได้

<img src="ที่จัดเก็บภาพ\ชื่อภาพ.JPG" width="700" height="500"/>

code  คือ

ผลที่แสดงได้

(1) ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ

 <LEFT><IMG SRC="ชื่อภาพ.jpg" ></LEFT>

code  คือ

ผลที่แสดงได้

(2) ALIGN=RIGHT กำหนดให้รูปภาพอยู่กึ่งกลางของข้อความ

<CENTER><IMG SRC="ชื่อภาพ.jpg" ></CENTER>

code  คือ

ผลที่แสดงได้

3.ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ

<P ALIGN =RIGHT><IMG SRC="ชื่อภาพ.jpg" ></ RIGHT>

code  คือ

ผลที่แสดงได้

ขอขอบคุณแหล่งค้นคว้ามากที่สุดดดดด

http://montaip.blogspot.com/2012_09_01_archive.html  <<27.08.13>>

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

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

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

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

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

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

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

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

ใน เอกสาร 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 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 และการแสดงผล

 

ชื่อ-นามสกุล นาย  อานนท์ สมบุญ

ชื่อเล่น  นน

เลขที่ 10 ชั้น ม.6/5

อยู่โรงเรียนธนบุรีวรเทพีพลารักษ์

แผนการเรียน ภาษาจีน

ชอบเรียนวิชา พละ แนะแนว

อาหารที่ชอบ Pizza

สิ่งที่ชอบ ฟุตซอล

คติประจำใจ รักสนุก แต่ไม่ผูกพัน นะ ^^ !!!

งานอดิเรก เล่นฟุตซอล

ติดต่อ 0886835814

อีเมล non_love16@hotmail.com