HTML

วันเสาร์ที่ 1 กันยายน พ.ศ. 2555

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

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

ตัวอย่างการสร้างตารางดังภาพด้านบน

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การสร้างตารางในภาษา HTML 
<hr>
<table>
 <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
 <tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
 <tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table>
</body>
</html>

แถว 1 คอลัมน์ 1	แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1	แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1	แถว 3 คอลัมน์ 2

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

<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง 
<hr>
<table border="1" cellspacing="5" width="500" height="400">
 <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
 <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
 <tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
 <tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table>
</body>
</html>


แถว 1 คอลัมน์ 1	แถว 1 คอลัมน์ 2
แถว 2 คอลัมน์ 1	แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1	แถว 3 คอลัมน์ 2

การจัดตำแหน่งตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดตำแหน่งข้อมูลในเซลล์ 
<hr>
<table border="1" cellspacing="5" width="700" height="100">
 <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
 <tr align="center"><td> แถว 1 คอลัมน์ 1[กลาง] </td><td> แถว 1 คอลัมน์ 2 [กลาง] </td></tr>
 <tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
 <tr><td> แถว 3 คอลัมน์ 1 </td><td align="right"> แถว 3 คอลัมน์ 2 [ขวา] </td></tr>
</table>
</body>
</html>


แถว 1 คอลัมน์ 1[กลาง]	แถว 1 คอลัมน์ 2 [กลาง]
แถว 2 คอลัมน์ 1	แถว 2 คอลัมน์ 2
แถว 3 คอลัมน์ 1	แถว 3 คอลัมน์ 2 [ขวา]

การรวมเซลล์

<TR> <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR> เช่น
<TD COLSPAN = "3">จำนวนนักเรียน</TD>
เป็นคำสั่งรวมคอลัมน์จำนวน 3 คอลัมน์มาเป็น 1 เซลล์ และในเซลล์นั้นจะมีข้อความ จำนวนนักเรียน

ตัวอย่าง

ภาพแสดงการใช้คำสั่ง colspan ภาพแสดงผลการใช้คำสั่ง colspan

แหล่งอ้างอิิง
http://school.obec.go.th/pp_school/html/table.html
วันที่ 1 กันยายน 2555

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

รูปแบบโค้ด

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน> 
<IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star"> 
ลองทายดูซิว่าเธอคือใคร 
</CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้

นี่คือภาพดาราคนโปรดของฉัน

ลองทายดูซิว่าเธอคือ

ในกรณีที่ภาพอยู่ในที่เดียวกัน

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน> 
<IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star"> 
ลองทายดูซิว่าเธอคือใคร 
</CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้

นี่คือภาพดาราคนโปรดของฉัน

ลองทายดูซิว่าเธอคือใคร

ในกรณีที่ภาพอยู่คนละที่กัน

ให้ใส่พาสที่อยู่ของรูปภาพ

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน> 
<IMG SRC="my picture/mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star"> 
ลองทายดูซิว่าเธอคือใคร 
</CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้

นี่คือภาพดาราคนโปรดของฉัน

ลองทายดูซิว่าเธอคือใคร

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

http://www.tanti.ac.th/Com-tranning/html/page12.html

วันที่ 1 กันยายน 2555

วันจันทร์ที่ 23 กรกฎาคม พ.ศ. 2555

งานสัปดาห์ที่ 3

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

ในการสร้าง Web Page ด้วยภาษา HTML นั้น เราสามารถ ใส่ลูกเล่น หรือ โครงสร้างของ ประโยค กลุ่ม คำ หรือ ตัวอักษร นั้น ๆ ได้ เช่น ขนาดของตั้วอักษร สีของตัวอักษร ตัวอักษรวิ่ง ตัวอักษร กระพริบ การจัดย่อหน้าของตัวอักษร ฯลฯ

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

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

เย้ เย้

ผลที่ได้

โดยขนาดของตัวอักษรมีทั้งหมด 7 ขนาดด้วยกัน

โดยสามารถเปลี่ยนได้โดย เย้ เย้ เปลี่ยนเลข 7 เป็นขนาดที่ ต้องการ (1-7)

EX <Center> เย้ เย้ ขนาดที่ 1

<Center> เย้ เย้ ขนาดที่ 2

<Center> เย้ เย้ ขนาดที่ 3

<Center> เย้ เย้ ขนาดที่ 4

<Center> เย้ เย้ ขนาดที่ 5

<Center> เย้ เย้ ขนาดที่ 6

<Center> เย้ เย้ ขนาดที่ 7

ผลที่ได้

๐ สีตัวอักษร

ในการเปลี่ยนสีตัวอักษรนั้น ทำคล้าย ๆ กันในส่วนของ ขนาดตัวอักษร เพียงให้เปลี่ยนจาคำว่า

"Font Size" มาเป็น "Font Color " และเปลี่ยนชนาดตัวเลขมาเป็น ชื่อสีที่ต้องการ

(ภาษาอังกฤษเท่านั้น)

Ex1 เย้ เย้

ผลที่ได้

ในขณะเดียวกัน เราสามารถใส่สีของตัวอักษร ไปพร้อม ๆ กับขนาดของตัวอักษรได้ด้วย

EX เย้ เย้ มีสีเขียวด้วย

เย้ เย้ สีแดงก็มี

เย้ เย้ สีฟ้าก็มา

ผลที่ได้

และ สีของตัวอักษร นั้น ก็สามารถ กำหนดได้ อีก 1 วิธี คือ ใช้ตัวเลข "ฐาน 16 หลัก" หรือที่เรารู้จักกันดีในชื่อว่า "โค้ดสี" นั้นเอง

(วาร์ปตรงนี้ เพื่อไปเลือกโค้ดสี ^^ http://codecolors.blogspot.com )

Ex เย้ เย้

ผลที่ได้

๐ คำสั่งทั่วไป

คือคำสั่งที่ใช่ใน การ เขียนข้อความ การเน้นคำ หรือ ประ โยค ให้ ได้ใจความมากขึ้น มีดังนี้

ตัวหนา ใช้ Tag 
ตัวเอียง ใช้ Tag ขีดเส้นใต้ ใช้ Tag ขีดฆ่า ใช้ Tag <S>เว้นบรรทัด ใช้ Tag

Ex
 อันนี้ตัวหนา
 อันนี้ตัวเอียง อันนี้ตัวขีดเส้นใต้
<S> อันนี้ตัวขีดฆ่า</S>

ผลที่ได้

๐ ตำแหน่งของตัวอักษร

ในการเขียนหน้า Web Page ด้วย ภาษา HTML นั้น สามารถ ย่อตำเหน่งของตังอักษรได้คล้าย ๆ ย่อหน้า สามที่ คือ

<LEFT> ย่อหน้าทางซ้าย (เราสามารถจะไม่ใส่ <LEFT> ก็ได้ เพราะ ตัวอักษร จะชิด ซ้าย อยู่แล้ว )
<CENTER> กลางหน้ากระดาษ
<RIGHT> ย่อหน้าไปทางขวา

Ex
<LEFT> อันนี้อยู่ทางซ้าย</LEFT>
<CENTER> อันนี้อยู่ตรงกลาง</CENTER>
<RIGHT> อันนี้อยู่ทางขวา</RIGHT>

ผลที่ได้

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

สามารถทำได้ดังนี้

<Marquee> <<< ตัวอักษรวิ่ง
<Blink> <<< ตัวอักษร กระพริบ

สำหรับวิ่งอักษรวิ่งและ กระพริบนั้น ไม่สามารถ แสดงตัวอย่างได้ ^^

อ้างอิง

http://codecolors.blogspot.com/

http://www.chandra.ac.th/office/ict/document/it/it06/html03.html

http://www.thaiall.com/learn/htmchr.htm

http://www.bkk2.in.th/Topic.aspx?TopicID=7177

23 กรกฏาคม 2555

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

งานสัปดาห์ที่2

Week 2 HTML TAG พื้นฐาน

HTML ย่อมาจากคำว่า HyperText Markup Language เป็นภาษาที่ใช้ในการแสดงผลของเอกสารบน website หรือที่เราเรียกกันว่าเว็บเพจ เป็นภาษาที่พัฒนาโดย World Wide Web Consortium (W3C)

HTML เป็นภาษาที่สำคัญมากกับเทคโนโลยีบนเว็บไซต์ ไม่ว่าคุณจะเขียนโปรแกรมบนเว็บไซต์ด้วยภาษาใด ๆ ๆ เช่น PHP, ASP, Perl หรืออื่น ๆ คุณก็ต้องมีความจำเป็นในการแสดงผลข้อมูลออกมายัง Web Browser ด้วยภาษา HTML เป็นหลักใหญ่ หรือให้เรามองว่า HTML คือ Output ในการแสดงผลสู่จอภาพของ Web Browser

โปรแกรมที่ใช้สร้างภาษา HTML (Text Editor)

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

โดยภาษา HTML นั้นเป็นภาษา ที่สามารถเขียนขึ้นมาได้ด้วยหลาย ๆ โปรแกรม เราสามารถสร้างภาษา HTML ได้ด้วยโปรแกรมพื่นฐาน เช่น Nopepad หรือ Worldpad

และก็ยังมีโปรแกรมที่ใช้ ในการเขียนภาษา HTML โดยเฉพาะอีกด้วย อาทิเช่น โปรแกรม

HTML-Assistant(เอชทีเอ็มแอล-แอสซิสแตนต์)

<<< ตัวอย่างของโปรแกรม Notepad

ตัวอย่างของโปรแกรม Worldpad >>>

หลังจากที่เราเขียน CODE ของภาษา HTML เสร็จเรียบร้อยแล้ว ให้เราทำการ SAVE ไฟล์นั้น ๆ โดยให้เขียนข้างหลังชื่อไฟล์เป็นนามสกุลของภาษา HTML คือ .HTML และสามารถเปิดดูได้ด้วย โปรแกรม Web Browser ทั่วไป (IE,Firefox,Google Chrome,Opera,Safari,Maxthon,Netscape,Avant Browser)

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

โดยปกติแล้วโครงสร้างของ HTML

มีรูปแบบโครงสร้างที่ประกอบอยู่ด้วยกัน 2 ส่วน คือ

1. ส่วนของ HEAD สำหรับข้อมูลในส่วนหัวของ HTML เช่น ข้อความบน Title bar เป็นต้น

2. ส่วนของ BODY สำหรับการแสดงผลยังหน้าเอกสาร หรือหน้า Web Browser

โดยทั้ง 2 ส่วนข้างต้น จะเรียกว่า TAG โดยจะต้องเขียน CODe ในเครื่องหมาย <ชื่อ Tag>ตัวอย่างเช่น <HTML>

และส่วนประกอบหรือรายชื่อ Tag หลัก ๆ ที่ใช้ในการเขียนภาษา HTML มีดังนี้

<HTML> คือส่วนที่ใช้ในการเริ่มต้นเขียนภาษา HTML โดยในการเขียนภาษา HTMl แต่ละครั้งจะขาด Tag นี้ไปไม่ได้

<HEAD> คือ ส่วนของหัวเรื่อง

<Title> คือ ชื่อเรื่อง

<Body>คือ เนื้อหาของเรื่อง เป็นส่วนที่จะแสดงผลออกไปยังหน้า Web Browser

คือ การเว้นบรรทัด

คือ การกำหนดย่อหน้าในเว๊บเพจ

คือ ตัวอักษรหนา

คือ ตัวอักษรเอียง

คือ ตัวอักษรขีดเส้นใต้

<Blink> คือ ตัวอักศรกระพริบ

<Marquee> คือ ตัวอักษรแบบแถบวิ่ง

ตัวอย่างของภาษา HTML ที่เขียนเสร็จแล้ว และแสดงผลบน

Web Browser

ตัวอย่างโค้ดที่เขียนด้วยโปรแกรม Note Pad

ตัวอย่างของโค้ดที่เขียนเสร็จและเปิดดูด้วยโปรแกรม Web Browser

(Max thon 3)

www. อ้างอิง

http://guru.google.co.th/guru/thread?tid=7b3e1df05f4fb4d0&pli=1

http://www.holy.ac.th/holy/html.htm

วันที่ค้นหาข้อมูล 28/06/2012

วันอังคารที่ 12 มิถุนายน พ.ศ. 2555

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

INTERNET

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

WWW

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

Homepage

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

web browser

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

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

webpage

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

โดยทั่วไป เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML หรือ XHTML (ซึ่งมักมีนามสกุลไฟล์เป็น htm หรือ html) มีลิงก์สำหรับเชื่อมโยงไปยังเว็บเพจหน้าอื่น ๆ สามารถใส่รูปภาพและรูปภาพยังสามารถเป็นลิงก์ กล่าวคือสามารถคลิกบนรูปเพื่อกระโดดไปหน้าอื่นได้ นอกจากนี้ยังสามารถใส่แอปเพล็ต (applet) ซึ่งเป็นโปรแกรมขนาดเล็กแสดงภาพเคลื่อนไหว มีปฏิสัมพันธ์กับผู้ใช้ หรือสร้างเสียง ได้อีกด้วย

HTML

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

Website

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

URL

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