บทที่2 พัฒนาเว็บไซต์ด้วย HTML
เนื้อหา
ภาษา HTML
MtL HyperText Markup Language
เป็นภาษาพื้นฐานในการแสดงข้อมูลในหน้าเว็บบราวเซอร์
สามรถแสดงผลข้อมูลในรูปแบบต่างๆ เช่น ข้อความ รูปภาพ ภาพเคลื่อนไหว เสียงและสื่มัลติมีเดียอื่น
สามารถสร้างจุดเชื่อมโยงไปยังเว็บต่างๆหรือสร้างฟอร์มสำหรับกรอกข้อมูลบนเว็บไซต์
HTMLขาดความสามารถในการประมวลลข้อมูลเองซึ่งไม่สามารถสร้างปฏิสัมพันธ์กับผู้ใช้โดยตรง
ข้อจำกัดของภาษาHTML
แสดงข้อมูลในลักษณะstaticเท่านั้น
ขาดการทำงานแบบโครงสร้าง การประเมินผลเป็นแบบบนลงล่างเท่านั้น ไม่สามารถตัดสินใจหรือทำซ้ำได้
ไม่มีชุดคำสั่งในการคำนวนคณิตศาสตร์ และไม่สามารถสร้างชุดคำสั่งในลักษณะฟังกชันได้ ทำให้ไม่สามารถขยายขีดความสามารถในตัวภาษาได้ องค์ประกอบพื้นฐานของภาษาHTML
การสร้างเอกสารhtmlมีองคืประกอบอยู่2ส่วนคือ
แท็ก(tag)
ใช้ในการระบุตำแหน่งคำสั่งหรือการลงรหัสคำสั่งhtmlภายในเครื่องมาย less-then bracket(<)และgreater- then bracket(>)โดยที่ tag html แบ่งได้2ลักษณะคือ
Tag เดี่ยว-เป็น tag ที่ไม่ต้องมีการปิดรหัสเช่น<br>,<hr>
Tag เปิด/ปิด-เป็น tag ที่ประกอบด้วย tag เปิด และ tag ปิดโดย tagปิดจะมีเครื่องมายslash(/)นำหน้าคำสั่งใน tagนั้นๆเช่น<b>…</b>, <p>..</p>
Attribute
คำสั่ง html แต่ละคำจะมี Attribute แตกต่างกันไปและมีจำนวนไม่เท่ากัน การระบุ Attribute
มากกว่า1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น เช่น Attributes ของ tag เกี่ยวกับการจัดพารากราฟคือ
<p align=“left|right|center|justify”> … </p>
โครงสร้างไฟล์เอกสาร HTML
<html>
<head>
Tag คำสั่งในส่วนของ head section
</head>
<body>
Tag คำสั่งในส่วนของ body section
</body>
</html>
ส่วนหัวเรื่งเอกสาร<Head section >
<title>ข้อความอธิบายชื่อเรื่องเว็บ<title>
<meta http-equiv=“content-type”
content=“text/html; charset=tis-620”>
<meta name=“author” content=“author-name”>
<meta name=“keywords” content=“keyword-1, keyword-2”>
</head>
ส่วนเนื้อหาเอกสาร(Body Section)
การจัดการข้อความและรูปภาพ
ข้อความหมายถึงตัวอักษรที่แสดงในหน้าเว็บเพจ ซึ่งสามารถกำหนดให้มีลักษณะตามที่ต้องการได้เช่นเดียวกับในโปรแกรมประยุกต์ทั่วไป เช่น การกำหนดฟอนต์ รูปแบบ ตัวหนา ตัวขี้เส้นใต้ เป็นต้น
ภาษา html มีแท็ก (tag) ในการจัดการกับข้อความดังนี้
Tag<Font>
Tag เกี่ยวกับลักษณะตัวอักษร
Tag <FONT>
<FONT FACE = “…” SIZE = “…” COLOR = “…”>ข้อความ</FONT>
ตัวอย่าง การกำหนดลักษณะข้อวาม
<FONT FACE = “AngsanaUPC” SIZE = “14”
COLOR = “#FF0000”>
ฟอนต์AngsanaUPC ขนาด 14สีแดง
</FONT>
<BR>
<FONT FACE = “BrowalliaUPC” SIZE = “24”
COLOR = “#00FF00”>
ฟอนต์BrowalliaUPC ขนาด 24สีเขียว
</FONT>
Tag เกี่ยวกับลักษณะตัวอักษร
แท็ก | ความหมาย | ตัวอย่าง |
<B> | กำหนดตัวหนา (Bold) | <B>ข้อความ</B> |
<I> | กำหนดตัวเอียง (Italic) | <I>ข้อความ</I> |
<U> | กำหนดขีดเส้นใต้ (Underline) | <U>ข้อความ</U> |
<S> | กำหนดขีดเส้นใต้พาดทับกลาง (Strikethrough) | <S>ข้อความ</S> |
<SUB> | กำหนดตัวห้อย (Subscript) | <SUB>ข้อความ</SUB> |
<SUP> | กำหนดตัวยก(Superscript) | <SUP>ข้อความ</SUP> |
<BIG> | เป็นลักษณะของตัวอักษรใหญ่(Big) | <BIG> ข้อความ</BIG> |
<SMALL> | เป็นลักษณะของตัวอักษรเล็ก(Small) | <SMALL>ข้อความ</SMALL> |
<MARQUEE> | เป็นลักษณะการกำหนดให้เป็นตัวอักษรวิ่งสามารถใช้ได้ในIEเท่านั้น | <MARQUEE>ข้อความ</MARQUEE> |
ตัวอย่าง การจัดการตัวอักษร
<FONT>
<B>ตัวหนา</B><BR>
<I>ตัวเอียง</I><BR>
<U>ขีดเส้นใต้</U><BR>
<HR>
ทดสอบตัวอักษรวิ่ง
<MARQUEE>ตัวอักษรวิ่ง</MARQUEE>
<CENTER>ตัวอักษรอยู่กึ่งกลางจอภาพ</CENTER>
</FONT>
การจัดการรูปภาพ
รูปภาพใช้Tag <IMG>ซึ่งประกอบด้วยแอทริบิวต์ต่างๆดังนี้
<IMG SRC = “…” ALIGN = “…” WIDTH =
“…” HEIGHT = “…” BORDER = “…”
แอทริบิวต์ | ความหมาย | ตัวอย่าง |
SRC | ใช้ระบุที่อยู่ที่ภาพต้องการแสดง | SRC = “.\flower.jpg” |
ALIGN | ใช้กำหนดตำแหน่งที่จะวางรูปภาพ | ALIGN = “left” |
WIDTH | ใช้กำหนดค่าความกว้างของภาพ | WIDTH = “640” |
HEIGHT | ใช้กำหนดค่าความสูงของภาพ | HEIGHT = “480” |
BORDER | ใช้กำหนดค่าความหนาของเส้นขอบภาพ | BORDER = “2” |
HSPACE | ใช้กำนดระยะห่างของข้อความจากด้านข้างของภาพ | HSPACE = “50” |
VSPACE | ใช้กำนดระยะห่างของข้อความจากด้านบนและล่างของภาพ | VSPACE = “50” |
Tag <IMG>
ตัวอย่างการใช้Tag <IMG>
<br>
<img src=“hotmail.jpg”>
<br>
ทดสอบการใช้คำสั่ง tagรู ปภาพ
การเชื่อมโยง HTML
<A HREF=“…” TITLE=“…”> … </A>
Tag <A> and </A>ใช้ครอบข้อความที่เป็นจุดเชื่อมโยง
Attribute HREFใช้กำหนดจุดเชื่อโยง เช่น ไฟล์ HTML
Attribute TITLEเป็นข้อความสั้นๆที่ปรากฏเมื่อเลื่อนเมาส์ไปที่ข้อความ ซึ่งเป็นจุดเชื่อมโยง
Ex.
<a href=http://www.hotmail.com title=“hotmail”>Go Hotmail</a>
Ex.
<a href=“http://www.hotmail.com title=“hotmail”><img
src=“hotmail.jpg”></a>
การแสดงข้อมูลแบบรายการ
เป็นการแบ่งข้อมูลย่อยที่มีตัวเลขหรือสัญลักษณ์กำกับมีรูปแบบดังนี้
1. รายการแบบมีหมายเลขจำกัด
2. รายการแบบมีสัญลักษณ์จำกัด
รายการแบบมีหมายเลขจำกัด
กำหนดด้วยแท็ก <OL> .. </OL>ซึ่งย่อมาจาก Ordered Listภายในแท็กนี้ประกอบด้วยแท็กย่อย2 ตัว คือ <LH> และ <LI>โดยมีโคร้างสร้างดังนี้
<ol type=……….>
<LH>
<LI>
<LI>
…………….
</ol>
Attribute ของTag <OL>
STARTกำหนดค่าเริ่มต้นให้กับตัวเลขลำดับที่ เช่นSTART=3จะแสดงหมายเลขกำกับเริ่มจาก3เป็นต้นไป
SKIPใช้กำหนดหมายเลขกำกับจะกระโดดไปเป็นจำนวนค่า
VALUEช้กำหนดว่าต่ฃ้องการให้แสดงเลขนำหน้าด้วยหมายเลขอะไร
TYPEใช้กำกับรูปแบบของลำดับที่ หากไม่กำหนดจะถือว่าTYPE=1
TYPEใช้กำกับรูปแบบของลำดับที่
TYPE | Format | Example |
TYPE=1 | ลำดับเป็นเลขอารบิก | 1, 2, 3, … |
TYPE=A | ลำดับเป็นตัวอักษรพิมพ์ใหญ่ภาษาอังกฤษ | A, B, C, … |
TYPE=a | ลำดับเป็นตัวอักษรพิมพ์เล็กภาษาอังกฤษ | a, b, c, … |
TYPE=I | ลำดับเป็นเลขโลมันแบบตัวใหญ่ | I, II, III, … |
TYPE=i | ลำดับเป็นเลขโลมันแบบตัวเล็ก | i, ii, iii, … |
<font face=“CodiaUPC” size=“2” color=“blue”>
<ol>
<lh><i>ตัวอย่างภาษาคอมพิวเตอร์ที่ใช้งานในปัจจุบันได้แก่ </i>
<li>BASIC
<li>C
<li>FORTRAN
<li>HTML
<br><b>มาทดลองตอบปัญหานี้ดู… </b>
</ol></font>
<font face=“CodiaUPC” size=“2” color=“green”>
<ol type=“A”>
<lh>คำกล่าวใดต่อไปนี้ผิด
<li>ภาษา htmlนิยมใช้ในงานวิทยาศาตร์
<li>ภาษา FORTRANนิยมใช้ในงานกราฟฟิก
<li>ภาษา BASICนิยมใช้ในการเขียนเกมคอมพิวเตอร์
li> ภาษาCนิยมใช้ในการออกรายงาน
</ol></font>
รายการแบบมีสัญลักษณ์กำกับ
<ul type=….>
<lh>
<li>
<li>
…………
</ul>
TYPEใช้กำกับรูปแบบของสัญลักษณ์
TYPE | Format | Example |
TYPE=circle | สัญลักษณ์เป็นรูปวงกลมโปร่ง | o |
TYPE=square | สัญลักษณ์เป็นสี่หลี่ยมทึบ | § |
TYPE=disc | สัญลักษณ์เป็นวงกลมทึบ | · |
<UL TYPE=“square”>
<LH>องค์ประกอบของคอมพิวเตอร์ได้แก่
<LI>ฮาร์ดแวร์ที่ประกอบด้วย
<UL TYPE=“circle”>
<LI>input
<LI>process และ
<LI>output
</UL>
<LI>ซอฟแวร์ที่ประกอบด้วย
<UL TYPE=“circle”>
<LI>ซอฟแวร์ระบบปฏิบัติการ
<LI>ซอฟแวร์ระบบประยุกต์
<LI>ซอฟแวร์อัตถประโยชน์
<LI>ฯลฯ
</UL>
<LI>
<UL TYPE=“circle”>
<LI> ………………………..
</UL>
</UL>
การสร้างตาราง
โครงสร้างแท็ก<TABLE>
<TABLE BORDER=“ความหนาของตาราง”
BORDERCOLOR=“ค่าสี” ALIGN=“ตำแหน่งตาราง”>
<TR>
<TH>หัวเรื่อง</TH>
<TD>ข้อมูล</TD>
<TD>ข้อมูล</TD>
</TR>
<TR>
<TD WIDTH=“..” HEIGHT=“..”>…</TD>
<TD ALIGN=“”>…</TD>
</TR>
</TABLE>
หน้าที่ของTagแต่ละตัว
ชื่อแท็ก | หน้าที่ |
<TABLE> … </TABLE> | กำหนดขอบเขตของแท็กตาราง |
<TR> … </TR> | ใช้ครอบข้อความที่อยู่ในแนวเดียวกัน |
<TH> … </TH> | ใช้ครอบข้อความที่เป็นหัวเรื่อง |
<TD> … </TD> | ใช้ครอบข้อความที่เป็นข้อมูลในแต่ละช่อง |
หน้าที่ของAttributeในแต่ละตัว
ชื่อแท็ก | หน้าที่ |
BORDER | กำหนดขนาดเส้นตาราง |
BORDERCOLOR | กำหนดสีเส้นตาราง |
ALIGN | กำหนดตำแหน่งในแท็ก |
WIDTH | กำหนดความกว้างของช่องตาราง |
HEIGHT | กำหนดความสูงของช่องตาราง |
<TABLE BORDER=“1”>
<TR ALIGN=“center” BGCOLOR=“#DDDDDD”>
<TH>ชื่อ-นามสกุล</TH>
<TH>ตำแหน่ง</TH>
</TR>
<TR>
<TD>นายวราวุฒิ แข่งขันTD>
<TD>อาจารย์</TD>
</TR>
<TR>
<TD>นายชัยพล กิจวรโชติTD>
<TD>อาจารย์</TD>
</TR>
</TABLE>
ป้ายกำกับ: การโปรเเกรมเว็บเบื้องต้น3653206