HTML2 1

HTML
Hypertext Mark Up Language

ประวัติความเป็นมา ของ HTML
HTML เป็นภาษาที่เป็นภาษาในการกำาหนดรูปแบบอักษรในเอกสาร
หรือ Markup Language เท่านั้น ไม่ใช่เป็นภาษาในการพัฒนาโปรแกรมแบบอื่นๆ
เช่น ภาษา C,C++, และ ภาษา Java ภาษา HTML เป็นภาษาที่พัฒนาขึ้นเพือ่ ตอบสนอง
การสื่อสารบนระบบ Internet โดยมาตรฐานโปรโตคอลชือ่ ว่า HTTP (Hypertext Transfer
Protocal) สำาหรับการสื่อสารระหว่างเครื่องให้บริการ หรือ Web Server ส่วนสถานีรับ
หรือ Client จะใช้โปรแกรมประเภท Web Browser ที่พัฒนาขึ้นสำาหรับอ่านข้อความ
ที่เป็น Web Page โดยเฉพาะ เช่น NetScape หรือ Internet Exprorer เป็นต้น
โครงสร้างของภาษา HTML
โครงสร้างหลักของภาษา จะมี Tag ที่ประกอบจากวงเล็บ <TAG name>
เป็นตัวเปิดการควบคุมและปิดการควบคุมอักษรด้วย </TAG>
เค้าโครงของภาษา HTML
<HTML>
<HEAD>
<TITLE>……….</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Tag ในภาษา HTML ที่สำาคัญมีดังต่อไปนี้
<HTML> และ</HTML>
เป็น Tag ที่ใช้เพื่อกำาหนดว่าเอกสารที่ใช้ภาษา HTML เป็น Markup Language
<HEAD> และ </HEAD>

เป็น Tag ที่ใช้กำาหนดส่วนหัวของเอกสาร HEAD
ไม่ได้เป็นส่วนของเอกสารภายใน แต่จะให้รายละเอียดเกีย่ วกับเอกสารฉบับนี้
<TITLE> และ </TITLE>
เป็นการระบุข้อความที่ต้องการให้เป็นส่วนหัวของเอกสาร TITLE เป็น
ส่วนหนึ่งของ HEAD
<BODY> และ </BODY>
เป็น Tag ที่บอกถึงลักษณะต่างๆ ของเอกสารฉบับนี้
ซึ่งในBODY จะมี Attribute ต่าง ๆ เช่น
TEXT แทนสีของตัวอักษร BGCOLOR แทนสีพื้นหลัง
ตัวอย่างนี้จะเป็นการแสดงการกำาหนดพื้นหลังและตัวอักษร
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
</HEAD>
<BODY BGCOLOR= “BLACK” TEXT=“YELLOW”>
HELLO
</BODY>
</HTML>
ผลลัพธ์ที่ได้
HELLO
จากผลลัพธ์จะเห็นได้วา่ พื้นหลังเป็น สีดำา และตัวอักษรเป็น สีเหลือง

ในการกำาหนดสีของพื้นหลังและตัวอักษรนั้น เราสามารถกำาหนดลงไป
ได้เลยว่าจะเอาสีอะไร แต่ถ้าเราไม่พอใจเราสามารถกำาหนดสีได้อกี โดยมีหลัก
การผสมสีแบบ RGB
หลักการผสมสีแบบ RGB
เราต้องรู้ก่อนว่า RGB คืออะไร
R จะแทน สีแดง
G จะแทน สีเขียว
B จะแทน สีนำ้าเงิน
ซึ่งการผสมสีนั้นจะอยู่ในเลขฐานสิบหกซึ่งเลขฐานสิบหกจะมีตัวเลข
ตั้งแต่ 0 - F
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 เลขฐานสิบ
0 1 2 3 4 5 6 7 8 9 A B C D E F เลขฐานสิบหก
โดยมีหลักการดังต่อไปนี้
เราจะมีเลขทัง้ หมด 6 ตัว โดยแบ่งเป็น 3 ชุด ชุดละ 2 ตัว

ชุดที่ 1 แทน สีแดง(R)
ชุดที่ 2 แทน สีเขียว(G)
ชุดที่ 3 แทน สีนำ้าเงิน(B)
ตัวอย่างการผสมสี
“FF0000” ผลลัพธ์ที่ได้จะออกมาเป็นสีแดงเข้ม เพราะว่า
เรากำาหนดความเข้มของชุดที่ 1(สีแดง) มากที่สุด( FF ) และชุดที2่
และ ชุดที่ 3 ให้มีความเข้มน้อยสุด( 00) จึงทำาให้ค่าสีที่เป็น สีแดงเข้ม
สรุปการกำาหนดสี
1. เป็นการระบุเลยว่าเราจะใช้สีอะไร เช่น RED,BUKE,GREEN,BLACK
2. เป็นการใช้เลขฐานสิบหกจำานวน 3 ชุด ชุดละ 2 ตัว โดยใช้หลักการ RGB
ซึ่งจะทำาการผสมสีได้ถึง 16 ล้านสี (256*256*256สี = 16777216 )
หัวเรื่อง
HEADER เป็น Tag ที่ใช้อธิบายหัวข้อโดยมีขนาดอยู่ 6 ระดับ
โดยมีรูปแบบดังนี้
<H1>………</H1> ขนาดตัวอักษรจะมีขนาดใหญ่ที่สุด
<H2>………</H2>
<H3>………</H3>
<H4>………</H4>
<H5>………</H5>
<H6>………</H6> ขนาดตัวอักษรจะมีขนาดเล็กที่สุด
รูปแบบคำาสั่ง
<Hn [Align = left : center : right ]>….
Heading Text …</Hn>
<Hn> เป็นคำาสั่งที่ใช้สำาหรับกำาหนดขนาดของหัวเรื่อง
โดย n คือตัวเลขแสดงขนาดของตัวอักษร
Align เป็นค่าเสริม (Attribute)เพื่อกำาหนดตำาแหน่งหัวเรื่องบนเพจ

ตัวอย่างรูปแบบคำาสั่ง HEADER
<H1> COMPUTER</H1>
<H2> COMPUTER</H2>
<H3> COMPUTER</H3>
<H4> COMPUTER</H4>
<H5> COMPUTER</H5>
<H6> COMPUTER</H6>
ผลลัพธ์ทไี่ ด้
COMPUTER
COMPUTER
COMPUTER
COMPUTER
COMPUTER
COMPUTER
จะเห็นได้วา่ ขนาดของหัวข้อจะมีขนาดใหญ่และมีขนาดเล็กลงตามลำาดั
บ
กำาหนดรูปแบบอักษรอื่นๆ
<i>……….</i> เป็นตัวอักษรเอน
<b>……….. </b> เป็นอักษรตัวเข้ม
<u>………</u> เป็นอักษรขีดเส้นใต้
<blink>……</blink> เป็นอักษรกระพริบ
<center>…..</center> ตัวอักษรอยู่ตรงกลาง
<p align = left> ……</left>หรือ</p>
<p align=right>…..</right>หรือ </p>

ตัวอย่างโปรแกรมที่แสดงรูปแบบต่างๆของตัวอักษร
<i>HOMEPAGE</i> <p align =left>ASP</left>

<b>Web Server</b> <p align =left>VBScript</p>
<center>JavaScript</center>
<u>Internet Explorer</u>
<p align =right> Java</right>
<blink>Netscape</blink> <p align =right>Perl</p>
ผลลัพธ์ที่ได้จากโปรแกรมตัวอย่างของรูปแบบตัวอักษร
HOMEPAGE Web Server Internet Explorer Netscape
ASP
VBScript
JavaScript
Java
Perl
การขึน้ บรรทัดใหม่
<p> เป็นการย่อหน้าขึ้นบรรทัดใหม่
<BR> เป็นเครือ่ งหมายบอกการ Break ขึ้นบรรทัดใหม่ ซึ่งจะมี
ช่องว่างระหว่างบรรทัดน้อยกว่า
ตัวอย่างการขึ้นบรรทัดใหม่
HTML 4.0 Internet Explorer Microsoft Netscape
ถ้าเราต้องการให้คำาว่า Internet Explorer ขึ้นบรรทัดใหม่ คำาว่าMicrosoft
ขึ้นบรรทัดใหม่ และคำาว่า Netscape ขึ้นบรรทัดใหม่
เราจะใช้คำาสั่ง <p> และ <br> และ เรามาดูความแตกต่างของทัง้ 2 คำาสั่ง
โปรแกรมตัวอย่าง ผลลัพธ์ที่ได้
HTML 4.0
<body> Internet Explorer
HTML 4.0 <br>
Internet Explorer <p>
Microsoft
Microsoft <br>
Netscape<br>
Netscape
</body>
จะเห็นได้วา่ การขึ้นบรรทัดใหม่ของคำาสั่งทั้งสองแต่ต่างกันตรงช่องว่
างระหว่างบรรทัด ถ้าใช้<p>ช่องว่างจะมากกว่าการใช้คำาสั่ง <br>
การขีดเส้นคั่น
ถ้าต้องการที่จะแบ่งข้อความบนหน้าจอภาพ
ให้มีเส้นคั่นทีไ่ ม่ใช่การขีดเส้นใต้ตัวอักษร ให้ใช้คำาสั่ง <HR>
ในบรรทัดทีต่ ้องการ ผลการแสดงที่เกิดจาก
คำาสั่งนี้จะทำาให้จอภาพถูกขีดเส้นแบ่งออกเป็นส่วนๆ นิยมใช้คำาสั่งนี้ในการ
จัดข้อความที่แบ่งออกเป็นตอน เรื่อง หรือส่วน
เพราะทำาให้เกิดความสวยงามและเป็นระเบียบ
ตัวอย่างโปรแกรมการใช้เส้นคั่น
<body>
การศึกษาในชีวิตประจำาวันของเราทุกคนนั้นจะต้องทำาการศึก
ษากัน
ไปจนกว่าเราจะตายจากโลกนี้
<hr>
การแข่งขันแต่ละครัง้ จะต้องมีผู้ประสบความสำาเร็จและผู้ที่ผดิ
หวังจากการแข่งขัน
</body>
การศึกษาในชีวิตประจำาวันของเราทุกคนนั้นจะต้องทำาการศึกษากัน
ไปจนกว่าเราจะตายจากโลกนี้
การแข่งขันแต่ละครั้งจะต้องมีผู้ประสบความสำาเร็จและผู้ที่ผิดหวังจากการแ
ข่งขัน
ความยาวของเส้นคั่น
<HR WIDTH=NUBER/PERCENT>
การกำาหนดขนาดความยาวของเส้นคั่นสามารถกำาหนดได้ 2 รูปแบบ คือ
1. กำาหนดเป็นขนาดที่แน่นอนตายตัว และกำาหนดเป็นเปอร์เซ็นต์ความยาว
โดยการเพิ่มแอตทริบิวต์ WIDTH เข้าไปในคำาสั่ง <HR>
2. การกำาหนดความยาวของเส้นคั่นให้มีขนาดทีแ่ น่นอนนั้น จะเป็นการ
กำาหนดความยาวตามจำานวนจุดของพิกเซลล์บนจอภาพ
การกำาหนดให้ตัวเลขมีค่ามากน้อยเท่าใด
เส้นบรรทัดที่ขีดจะมีความยาวหรือสั้นเท่ากับจำานวนตัวเลขที่กำาหนดลงไป
ตัวอย่างโปรแกรม
<body>
การทำางานนั้นเราต้องมีความขยันในการทำางาน
ต้องมีความอดทนต่อสิ่งที่เกิดขึน้ ไม่ว่าจะหนักเพียงใดเราต้อง
สู่ อย่ายอมแพ้ให้กับมัน
เราต้องเข้มแข็งและควรจำาไว้ว่ายิง่ หนักมากยิ่งลำาบากมากเราจ
ะแข็งแกร่งในอนาคต
<hr width=150>
<hr width=75%>
</body>
ผลลัพธ์จากโปรแกรม
การทำางานนั้นเราต้องมีความขยันในการทำางาน
ต้องมีความอดทนต่อสิ่งที่เกิดขึ้นไม่ว่าจะหนักเพียงใดเราต้องสู่
อย่ายอมแพ้ให้กับมันเราต้องเข้มแข็งและควรจำาไว้ว่ายิ่งหนักมากยิ่งลำาบาก
มากเราจะแข็งแกร่งในอนาคต
จะเห็นได้ว่า การที่ใช้ <hr width=150> จะเป็นการกำาหนดแบบพิกเซลล์

จะออกมาเป็นเส้นสั้น ส่วน <hr width=75%>
จะคำานวณจากขนาดของจอภาพทั้งหมด 100 %
ความหนาของเส้นคั่น
<HR SIZE=NUMBER>
เช่นเดียวกับการกำาหนดความยาวของเส้นคั่น เราสามารถกำาหนด
ขนาดความหนา(สูง) ของเส้นที่แสดงได้เช่นเดียวกัน ด้วยการเพิ่ม
แอตทริบิวต์ SIZE เข้ามา เพียงแต่เมื่อกำาหนดขนาดความหนา
ไม่ต้องกำาหนดเป็นเปอร์เซ็นต์ เพราะไม่ว่าจะกำาหนดเป็นแบบเปอร์เซ็นต์
หรือไม่มีผลก็ออกมาเหมือนกัน
<html>
<head>
<title>test6</title>
</head>
<body>
<center><h1>งานคือเงิน</h1></center>
การที่คนเราทุกได้ทำางานก็เพื่อจะได้เงินมาใช้จ่าย แต่เมื่อได้เงินมาแล้วก็
ควรรู้จักใช้อย่างมีประโยชน์
<hr size=5>
<hr size=10>
</body>
</html>
จะเห็นได้ว่า<hr size=5>จะมีขนาดความหนาน้อยกว่า
<hr size=10>และจะสังเกตได้ว่าถ้าตัวเลขมีค่าเพิ่มขึ้น
ขนาดความหนา (สูง) ของเส้นคั่นจะมีความสูงมากยิ่งขึ้น
เส้นคั่นแบบเส้นทึบ
<HR NOSHADE>
ถ้าต้องการตีเส้นแบ่งข้อความให้เป็นเส้นทึบ ให้เพิ่มแอตทริบิวต์ NOSHSDE
ในคำาสั่ง <HR>
ตัวอย่างโปรแกรม <BODY>
<CENTER>
<H1> HTML</H1>
</CENTER>
<HR NOSHADE>
</BODY>
การวางตำาแหน่งของเส้นคั่น
มีอยู่บ่อยครัง้ ที่เส้นแบ่งข้อความไม่ได้มีขนาดยาวเต็มจอภาพ
ซึ่งแต่ละครั้งเส้นปรากฎบนจอภาพจะถูกจัดให้อยู่กงึ่ กลางของจอภาพเสมอ
ถ้าต้องการเปลีย่ นให้เส้นที่ปรากฎไปอยู่ชิดริมซ้ายหรือขวาให้เพิ่มแอตทริบิวต์
ALIGN=Left หรือ ALIGN=Right ลงในคำาสั่ง <HR> หรือต้องการให้
อยู่ตรงกลางเหมือนเดิมจะกำาหนดเป็น ALIGN=CENTER ก็ไม่ผิดแต่ประการใด
<BODY>
<CENTER>
<H1>เราต้องขยันทำางาน<H1>
</CENTER>
<HR>
<HR WIDTH=60% ALIGN= LEFT>
<HR WIDTH=60% ALIGN= RIGHT>
</BODY>
การกำาหนดสี ใน HTML
ในการกำาหนดสีนั้นเราสามารถกำาหนดสีพื้นฉากหลังและกำาหนดสีตัว
อักษรโดยใช้หลักการแบบ RGB
การกำาหนดในสีสันของพื้นฉากหลัง โดยใช้คำาสั่งแอตทริบิวต์ BGCOLOR
คำาสั่ง <Body gbcolor> เป็นคำาสั่งทีก่ ำาหนดสีของฉากหลัง หรือ พื้นของจอภาพ
ที่ใช้แสดงผล โดยปกติแล้วทุกครั้งที่เปิด โปรแกรมเว็บเบาร์เซอร์ เพื่อทดสอบดู
Web Page ที่เราสร้างขึ้นมา สีของพื้นฉากหลังหรือจอภาพเป็นสีเทาและ
ตัวอักษรจะเป็นสีดำาเสมอ ถ้าเราต้องการเปลีย่ นสีของพื้นฉากหลังให้มีสีที่
เราต้องการเราจะต้องใช้คำาสั่ง <Body bgcolor> และตามด้วยโค้ด(Code)
สีที่เราต้องการนั้นเราจะใช้หลังการ RGB
<HTML>
<HEAD>
<TITLE>TEST9</TITLE>
</HEAD>
<BODY BGCOLOR= “#FF73B0”>
</BODY>
</HTML>
การกำาหนดสีสันของตัวอักษร โดยใช้คำาสั่งแอตทริบิวต์ TEXT
<BODY TEXT=สีที่ต้องการกำาหนด>
การกำาหนดสีสันของตัวอักษรในคำาสั่ง <BODY TEXT

>เป็นการกำาหนดสีของตัวอักษรในการแสดงผลของโปรแกรมเว็บบรา
วเซอร์ทั้งหมด
ที่อยู่ในส่วนเนื้อหาสาระของเว็บบราวเซอร์(foreground) หมายถึง
มีการเปลี่ยนสีมาตรฐานของตัวอักษรจากสีเดิมทีเ่ ป็นสีดำาเปลีย่ นให้เป็
นสีอนื่ ที่เราต้องกการ อาจใช้ในการเปลี่ยนสีสันของอักษร
<HTML>
<HEAD>
<TITLE>TEST10</TITLE>
</HEAD>
<BODY TEXT=AA0098>
<CENTER><H1>INTERNET EXPLORER</H1></CENTER>
<HR WIDTH=75%>
</BODY>
</HTML>
อย่างไรก็ตามสีของตัวอักษรที่ปรากฎบนโปรแกรมเว็บบราวเซอร์จะมีเพียง
แต่สีเดียว เนื่องจากเราใช้คำาสั่ง <BODY TEXT> แต่เราต้องการกำาหนดให้ตัว
อักษรหรือข้อความของเรามีสีอนื่ ต่างจากสีตัวอักษรทั่วไป หรือต้องการเน้นสีสัน
เพื่อเพิ่มจุดเด่น ทำาให้แปลกแตกต่างไปเราสามารถทำาได้โดยใช้คำาสั่ง
<FONT COLOR = สีที่ต้องการ>….</FONT>

<BODY BGCOLOR=AF5524 TEXT=22AD98>

<CENTER>
<H1><B>INTERNET EXPLORER</B></H1>
</CENTER>
<HR WIDTH=65%>
<CENTER><Font color=0088FF><H1>COLOR</H1></Font></CENTER>
<Font color=55A099><H1><p align=left>G</p></H1></Font>
<Font color=22D7FF><H1><center>A</center></H1></Font>
<Font color=9909AD><H1><p align=right>P</p></H1></Font>
</BODY>
การควบคุมสีของตัวอักษรข้อความหรือข้อความที่จะเชือ่ มโยงข้อมูล
<BODY LINK=“#สีกอ่ นการเชื่อมโยง”

VLINK=“#สีหลังจากเชื่อมโยง””
ALINK=“#สีขณะเชื่อมโยง”>
LINK จะเป็นสีของตัวอักษรก่อนมีการเชื่อมโยงกัน คือ สีนำ้าเงินมีการขีดเส้น
ใต้ตัวอักษร รก่อนมีการเชื
ALINKจะเป็นสีของตัวอักษรขณะถูกเลือก ื
VLINKจะเป็นสีของตัวอักษรหลังจาดเชื่อมโยงข้อมูลเรียบร้อยแล้ว คือ สีม่ววง
การกำาหนดขนาดของตัวอักษร
<FONT SIZE=N>…</FONT> / N=ขนาดตัวอักษรมีค่าตั้งแต่ 1 ถึง 7
รูปแบบมีดังนี้
<FONT SIZE=1>….</FONT> ลดขนาดตัวอักษร
<FONT SIZE=2>….</FONT> ลดขนาดตัวอักษร
<FONT SIZE=3>….</FONT> ขนาดตัวอักษรปกติ
<FONT SIZE=4>….</FONT> ขยายขนาดตัวอักษร
<BODY BGCOLOR=5FF6A9 TEXT=A966FF>
<CENTER>
<p><Font Size=1>Y2K</Font><p><Font Size=2>Y2K</Font>
<p> <Font Size=3>Y2K</Font><p><Font Size=4>Y2K</Font>
<p><Font Size=5>Y2K</Font><p><Font Size=6>Y2K</Font>
<p><Font Size=7>Y2K</Font> </CENTER>
</BODY>
<FONT SIZE= + N>…</FONT>
+ N จะเป็นการเพิ่มขนาดของรูปแบบตัวอักษร จากขนาดที่มีอยู่
จะเพิ่มเป็นจำานวนเท่า ของการบวกด้วย N
การนำาภาพเข้ามาสู่ Webpage
<IMG SRC= “ชื่อไฟล์รปู ภาพ” หรือ “path/ File name”
หรือ “image URL”>
ชนิดและรูปแบบของไฟล์กราฟฟิก
ไฟล์ที่มีนามสกุล .GIF
ไฟล์ที่มีนามสกุล .JPG
สำาหรับคำาสั่ง <IMG SRC> เราจะต้องระบุ URL (Uniform Resource Locators)
หรือไดเร็กทอรีป่ ัจจุบันทีเ่ ก็บไฟล์รูปภาพที่เราต้องการไว้ให้ถูกต้อง ถ้าระบุ
URL ผิดโปรแกรมเว็บบราวเซอร์จะแสดงผลเป็นรูปภาพแล้วมี เครือ่ งหมาย ?
ดังนั้นเราจึงควรที่จะระบุ URL ให้ถูกต้องเพื่อให้โปรแกรมเว็บบราวเซอร์แสดง
ผลได้
<BODY BGCOLOR= 55AA00 TEXT = 0000FF>

<CENTER><H1>IMAGE TAG</H1></CENTER>
<HR WIDTH=75%>
<CENTER><IMG SRC=bayshore.jpg ></CENTER>
<CENTER><Font color=FF7521><H1>Bayshore Travel</H1>
</Font>
</CENTER>
</BODY>
<BODY BGCOLOR=black TEXT=red>
<IMG SRC=bayshore.jpg ALT=Y2K> การเขียนโปรแกรม HTML
</BODY>

HTML2 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML2 1

Uploaded by

Copyright:

Available Formats

HTML

Hypertext Mark Up Language

<HEAD> และ </HEAD>

จากผลลัพธ์จะเห็นได้วา่ พื้นหลังเป็น สีดำา และตัวอักษรเป็น สีเหลือง

เราจะมีเลขทัง้ หมด 6 ตัว โดยแบ่งเป็น 3 ชุด ชุดละ 2 ตัว

Align เป็นค่าเสริม (Attribute)เพื่อกำาหนดตำาแหน่งหัวเรื่องบนเพจ

<p align = left> ……</left>หรือ</p>

<p align=right>…..</right>หรือ </p>

<i>HOMEPAGE</i> <p align =left>ASP</left>

จะเห็นได้ว่า การที่ใช้ <hr width=150> จะเป็นการกำาหนดแบบพิกเซลล์

การกำาหนดสีสันของตัวอักษรในคำาสั่ง <BODY TEXT

<FONT COLOR = สีที่ต้องการ>….</FONT>

<BODY BGCOLOR=AF5524 TEXT=22AD98>

<BODY LINK=“#สีกอ่ นการเชื่อมโยง”

<BODY BGCOLOR= 55AA00 TEXT = 0000FF>

You might also like