sbeebird.blogspot.com

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

วันพุธที่ 11 กันยายน พ.ศ. 2556

การสร้างตาราง

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

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

คำสั่งย่อยคือ

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

<TR> ระบุสิ่งที่อยู่ภายในแถวเดียวกัน

<TD> ระบุสิ่งที่อยู่ภายในเซลล์เดียวกัน หรือ คอลัมน์
BORDER คือ การกำหนดเส้นขอบตาราง ใส่ใน Tag <table>
รูปแบบคำสั่งคือ border="x" โดย x คือ ตัวเลข
ALIGN คือ กำหนดตำแหน่ง สามารถใช้รวมกับ Tag ต่างๆได้
รูปแบบคำสั่งคือ align="left หรือ right หรือ center"

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

<TR>

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

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

ตัวอย่าง

<html>

<head><title>การสร้างตาราง</title></head>

<body>

<caption>ตาราง</caption>

<tr>

<th>รายละเอียดของตาราง</th>

</tr>

<tr>

<td align="right">คอลัมน์\แถว</td>

</tr>

<tr>

<td align="left">คอลัมน์</td>

</tr>

</table>

</body>

</html>

ผลที่ได้

--------------------------------------------------------------------------------------

การปรับขนาดของตาราง

โดยใช้ WIDTH = X คือ ความกว้างของเซลล์

HEIGHT = X คือ ความสูงของเซลล์

ตัวอย่าง

<html>

<head><title>การสร้างตาราง</title></head>

<body>

<caption>ตาราง</caption>

<tr>

<th>รายละเอียดของตาราง</th>

</tr>

<tr>

<td align="center" width=1000 height=100>คอลัมน์\แถว</td>

</tr>

<tr>

<td align="center">คอลัมน์</td>

</tr>

</table>

</body>

</html>

ผลที่ได้

--------------------------------------------------------------------------------------

การรวมเซลล์

โดยใช้ COLSPAN=X คือ การผสานเซลล์ระหว่างคอลัมน์ X เป็นจำนวนคอลัมน์ที่จะผสาน

ROWSPAN=Y คือ การผสานเซลล์ระหว่างแถว Y เป็นจำนวนแถวที่จะผสาน

ตัวอย่าง

<html>

<head><title>การสร้างตาราง</title></head>

<body>

<caption>ตาราง</caption>

<tr>

<th colspan=3>รายละเอียดของตาราง</th>

</tr>

<tr>

<td align="center" width=1000 height=100>คอลัมน์\แถว</td>

</tr>

<tr>

<td align="center" colspan=2>คอลัมน์</td>

</tr>

</table>

</body>

</html>

ผลที่ได้

--------------------------------------------------------------------------------------

อ้างอิง

http://sbeebird.blogspot.com/ {10/9/56}

วันพุธที่ 28 สิงหาคม พ.ศ. 2556

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

Tag <img> เป็นแท็ก ที่ไว้ใช้สำหรับ การแท็กภาพมาไว้ในเว็บเพจ โดย tag<img> นี้จะมี Attribute หลักๆ คือ src

attribute src="ที่ตั้งรูปภาพ” โดยความสำคัญของ src คือเป็นการอ้างแหล่งที่อยู่ของรูปภาพ

รูปแบบคำสั่ง <img src="ชื่อรูปภาพ.jpg หรือ .gif">

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

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

รูปแบบคำสั่ง <img src="ชื่อรูปภาพ.jpg หรือ .gif" width= X height=Y >

ตัวอย่าง

<html>

<body>

</body>

</html>

ผลที่ได้

หมายเหตุ : กรณีที่ รูปภาพอยู่ที่เดียวกับที่เก็บไฟล์ HTML

-----------------------------------------------------------------------------------------

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

สามารถใช้ Tag ได้ 2แบบ คือ P ALIGN หรือ CENTER

รูปแบบคำสั้ง <img src="ชื่อรูปภาพ.jpg หรือ .gif">

ตัวอย่าง

<html>

<body>

</body>

</html>

ผลที่ได้

-----------------------------------------------------------------------------------------

การแทรกรูปภาพจากเว็บอื่นๆ

รูปแบบคำสั่ง <img src="http://www.________.com/___.jpg หรือ อื่นๆ">

ตัวอย่าง

<html>

<body>

</body>

</html>

ผลที่ได้

-----------------------------------------------------------------------------------------

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

จะต้องใส่ Path ให้กับ Tag <img>

รูปแบบคำสั่ง <img src="ที่อยู่ไฟล์/ชื่อรูปภาพ.jpg หรือ .gif">

ตัวอย่าง

คำสั่ง คือ <img src="รูป/Turbo.jpg">

-----------------------------------------------------------------------------------------

อ้างอิง

http://sbeebird.blogspot.com (1/9/56)

http://www.sadung.com/?p=5850 (1/9/56)

วันพฤหัสบดีที่ 22 สิงหาคม พ.ศ. 2556

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

การกำหนดแบบอักษร FONT ,ขนาด,สีตัวอักษร

รูปแบบคำสั่ง .....ข้อความ.....

FONT

กำหนดรูปแบบตามต้องการเช่น AngsanaUPC ,Cordia New,MS sans serif

รูปแบบคำสั่ง .....ข้อความ......

ตัวอย่าง

<html>

<body>

อักษรแบบ Ms sans serif

อักษรแบบ AngsanaUPC

อักษรแบบ Cordia New

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

ขนาด

รูปแบบคำสั่ง .....ข้อความ......

ตัวอย่าง

<html>

<body>

แสดงข้อความที่มีขนาด n=1 
แสดงข้อความที่มีขนาด n=2 
แสดงข้อความที่มีขนาด n=3 
แสดงข้อความที่มีขนาด n=4 
แสดงข้อความที่มีขนาด n=5 
แสดงข้อความที่มีขนาด n=6 
แสดงข้อความที่มีขนาด n=7 
แสดงข้อความที่มีขนาด n=8

</body>

</html>

หมายเหตุ : ขนาดใหญ่สุดคือ 7 ดูได้จากรูป

ผลที่ได้

----------------------------------------------------------------------------------------

สีตัวอักษร

รูปแบบคำสั่ง .....ข้อความ......

#รหัสสี

ตัวอย่าง

<html>

<body>

อักษรสีแดง 
 อักษรสีน้ำเงิน 
 อักษรสีฟ้า

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

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

รูปแบบคำสั่ง .....ข้อความ..... : คำสั่งตัวหนา

.....ข้อความ..... : คำสั่งตัวเอียง

.....ข้อความ..... : คำสั่งขีดเส้นใต้

ตัวอย่าง

<html>

<body>

ข้อความหนา

ข้อความเอียง

ข้อความขีดเส้นใต้

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

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

รูปแบบคำสั่ง <s>.....ข้อความ.....</s> : ตัวขีดฆ่า

.....ข้อความ..... : ตัวยก

.....ข้อความ..... : ตัวห้อย

ตัวอย่าง

<html>

<body>

<s>.....ตัวขีดฆ่า.....</s>

ข้อความ.....ตัวยก.....

ข้อความ.....ตัวห้อย.....

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

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

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

<marquee direction="left">ขวาไปซ้าย</marquee>

<marquee direction="right">ซ้ายไปขวา</marquee>

<marquee direction="down">บนลงล่าง</marquee>

ตัวอย่าง

<html>

<body>

<marquee direction="left">ขวาไปซ้าย</marquee>

<marquee direction="right">ซ้ายไปขวา</marquee>

<marquee direction="down">บนลงล่าง</marquee>

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

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

รูปแบบคำสั่ง <blink>.....ข้อความ.....</blink>

ตัวอย่าง

<html>

<body>

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

</body>

</html>

ผลที่ได้

----------------------------------------------------------------------------------------

ที่มา

http://skyfah024.blogspot.com/2012/07/blog-post.html (22/8/56)

http://it.e-tech.ac.th/sutin/index6.htm (22/8/56)

วันพฤหัสบดีที่ 18 กรกฎาคม พ.ศ. 2556

HTML TAG พื้นฐาน

HTML ย่อมา Hyper Text Markup Language

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

ใช้โปรแกรม Text Editor ต่างๆ เช่น

Simple Text (OS Macintosh)

Notepad (OS Windows)

EditPlus (OS Windows)

หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น

Microsoft FrontPage (OS Windows)

Dream Weaver (OS Windows,Macintosh)

ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML

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

การเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE) ,Mozilla Firefox ,Google chrome ,Safari, Opera,

Netscape Navigator

อ้างอิง

http://www.enjoyday.net/webtutorial/html/html_chapter01.html 18/7/13
http://www.kts.ac.th/kts/kanghan/html/unit105.html 18/7/13

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

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

<....> คือ Tag เปิด

</....> คือ Tag ปิด

<html> คือ บล็อกจุดเริ่มตอนและจุดสุดท้ายของเอกสาร Html จะมี Tag เปิด และ Tag ปิด

รูปแบบ

<head> คือ บล็อกจุดเริ่มตอนและจุดสุดท้ายของส่วนหัวเรื่องของเอกสาร จะมี <title> เป็นส่วนประกอบ ภายใน จะมี Tag เปิด และ Tag ปิด

<title> คือ เป็นส่วนกำหนดชื่อของเอกสาร Html จะมี Tag เปิด และ Tag ปิด

รูปแบบ

<body> คือ บล็อกที่บรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบน browser ไม่ว่าจะเป็น ข้อความ รูป ตาราง หรือแท็กที่ใช้ในการกำหนดรูปแบบของเอกสาร จะมี Tag เปิด และ Tag ปิด

รูปแบบ

คือ คำสั่งขึ้นบรรทัดใหม่ โดยไม่มี Tag ปิด

รูปแบบ

คือ เป็นตัวกำหนดย่อหน้า จะมี Tag เปิด และ Tag ปิด

รูปแบบ

หมายเหตุ : leet เขียนผิด คำที่ถูกคือ left

การปรับพื้นหลัง โดยใช้คำสั่งใน Tag <body> คือ

สีพื้นหลัง

ภาพพื้นหลัง

ตัวอย่าง

Code

ผลลัพธ์

หมายเหตุ : ในแต่ล่ะ Tag ต้องใช้ภาษาอังกฤษ และรูปใช้สกุลไฟล์ .jpeg หรือ .jpg หรือ .gif หรือ .png

อ้างอิง

http://www.aw.ac.th/web_html/006.htm 18/7/13

http://www.oknation.net/blog/print.php?id=429141 18/7/13

วันพฤหัสบดีที่ 20 มิถุนายน พ.ศ. 2556

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

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

WWW ย่อมาจาก World Wide Web หมายถึง พื้นที่ที่เก็บข้อมูลข่าวสารที่เชื่อมต่อกันทางอินเทอร์เน็ต โดยการกำหนด URL เป็นบริการหนึ่งบนอินเทอร์เน็ต

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

Webpage หมายถึง หน้าหนึ่ง ๆ ของเว็บไซต์ ที่เราเปิดขึ้นมาใช้งาน

Home page หมายถึง เว็บเพจหน้าแรกที่ปรากฏของแต่ละเว็บไซต์

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

URL ย่อมาจาก (Uniform Resource Locator, Universal Resource Locator) คือตัวระบุแหล่งทรัพยากรสากล (URI)ประเภทหนึ่ง ซึ่งใช้สำหรับระบุแหล่งที่อยู่ของทรัพยากรที่ต้องการ และมีกลไกบางอย่างสำหรับดึงข้อมูลทรัพยากรนั้นมา ในการใช้ในเอกสารทางเทคนิคและการอภิปรายทั่วไป มักจะใช้ยูอาร์แอลแทนความหมายที่คล้ายกับยูอาร์ไอ ซึ่งไม่ใช่ความหมายที่ถูกต้องและอาจทำให้เกิดความสับสน ในภาษาพูดทั่วไป ยูอาร์แอลอาจหมายถึง ที่อยู่บนเว็บ หรือ ที่อยู่อินเทอร์เน็ต ก็ได้ ซึ่งปกติแล้วเรามักพิมพ์ยูอาร์แอลในแถบที่อยู่ของเว็บเบราว์เซอร์เพื่อเรียกข้อมูลจากเว็บไซต์

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

เพิ่มเติม

โพรโทคอล (protocol) หรือชื่อไทยว่า เกณฑ์วิธี คือข้อกำหนดซึ่งประกอบด้วยกฎต่าง ๆ สำหรับรูปแบบการสื่อสารเฉพาะรูปแบบใดรูปแบบหนึ่ง เพื่อให้การติดต่อสื่อสารในระบบเครือข่าย ทำงานได้ด้วยกันทั้งระบบ คล้ายกับมนุษย์สามารถใช้ภาษาอังกฤษเป็นภาษากลางในการสื่อสารถึงกันได้

ที่มา

http://th.wikipedia.org
http://www.mindphp.com/
http://guru.google.co.th/
http://www.civicesgroup.com/
http://www.oknation.net/