PuyZi

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

บทที่2 พัฒนาเว็บไซต์ด้วย HTML

บทที่2 พัฒนาเว็บไซต์ด้วย HTML
เนื้อหา
  •  ภาษา HTML
  • องค์ประอบพื้นฐานของ HTML
  • การจัดการกับข้อความและรูปภาพ
  • การเชื่อมโยง HTML
  • การแสดงข้อูลแบบรายการ
ภาษา HTML
       MtL  HyperText  Markup Language
  •       เป็นภาษาพื้นฐานในการแสดงข้อมูลในหน้าเว็บบราวเซอร์
  •        สามรถแสดงผลข้อมูลในรูปแบบต่างๆ เช่น ข้อความ รูปภาพ ภาพเคลื่อนไหว เสียงและสื่มัลติมีเดียอื่น
  •        สามารถสร้างจุดเชื่อมโยงไปยังเว็บต่างๆหรือสร้างฟอร์มสำหรับกรอกข้อมูลบนเว็บไซต์
  •        HTMLขาดความสามารถในการประมวลลข้อมูลเองซึ่งไม่สามารถสร้างปฏิสัมพันธ์กับผู้ใช้โดยตรง
ข้อจำกัดของภาษาHTML
  •        แสดงข้อมูลในลักษณะstaticเท่านั้น
  •       ขาดการทำงานแบบโครงสร้าง การประเมินผลเป็นแบบบนลงล่างเท่านั้น ไม่สามารถตัดสินใจหรือทำซ้ำได้
  •        ไม่มีชุดคำสั่งในการคำนวนคณิตศาสตร์ และไม่สามารถสร้างชุดคำสั่งในลักษณะฟังกชันได้ ทำให้ไม่สามารถขยายขีดความสามารถในตัวภาษาได้                                        องค์ประกอบพื้นฐานของภาษาHTML

การสร้างเอกสารhtmlมีองคืประกอบอยู่2ส่วนคือ
  •       ส่วนที่เป็นข้อควมที่จะพิมพ์
  •      ส่วนที่เป็นคำสั่ง จะอยู่ภายในเครื่องหมาย<…>ในรูปแบบ<คำสั่ง>ซึ่งจะถูกเรียกว่าแท็ก”(tag)
แท็ก(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
  •        Attributesเป็นส่วนขยายความสามารถของ tag จะต้อใส่ภายในเครื่องหมาย<>ในส่วนเปิด tagนั้น tag
คำสั่ง 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)
  •       เป็นส่วนเนื้อหาหลักของหน้าเว็บ
  •       การแสดงผลจะต้องใช้tagจำนวนมากข้ออู่กับลักษณะของข้อมูล เช่น ข้อความ รูปภาพ เสียง วีดีโอ หรือไฟล์ต่างๆ
การจัดการข้อความและรูปภาพ
  •        ข้อความหมายถึงตัวอักษรที่แสดงในหน้าเว็บเพจ ซึ่งสามารถกำหนดให้มีลักษณะตามที่ต้องการได้เช่นเดียวกับในโปรแกรมประยุกต์ทั่วไป เช่น การกำหนดฟอนต์ รูปแบบ ตัวหนา ตัวขี้เส้นใต้ เป็นต้น
  •        ภาษา 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
  •        จุดเด่นของภาษา HTML คือความสามารถในการเชื่อมโยงข้อมูล
  •       การเชื่อมโยงในภาษา HTMLใช้แท็ก <A>ซึ่งมีโครงสร้างดังนี้
<A HREF=“…” TITLE=“…”> … </A>
Tag <A> and </A>ใช้ครอบข้อความที่เป็นจุดเชื่อมโยง
Attribute HREFใช้กำหนดจุดเชื่อโยง เช่น ไฟล์ HTML
Attribute TITLEเป็นข้อความสั้นๆที่ปรากฏเมื่อเลื่อนเมาส์ไปที่ข้อความ ซึ่งเป็นจุดเชื่อมโยง
  •       การเชื่อมโยงเรียกว่า “hypertext”
Ex.
<a href=http://www.hotmail.com title=“hotmail”>Go Hotmail</a>
  •        สามรถนำรูปภาพมาเป็นจุดเชื่อมโยงได้ โดยกำนด <img>ไว้ในแท็ก <A> ..</A>แทนข้อความ ซึ่งจะได้จุดเชื่อมโยงที่เรียกว่า “hypermedia”
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> _ </UL>ซึ่งย่อมาจากUnordered Listภายในแท็กนี้ประกอบด้วยแท็กย่อย2ตัว คือ <LH>และ<LI>โดยมีโครงสร้างดังนี้
<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>
<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>

ป้ายกำกับ:

เขียนโดย PuyZi @ 19:53   0 ความคิดเห็น