HTML
( HyperText Markup Language )
ไฟล์
HTML จะมีนามสกุลเป็น htm หรือ html ซึ่งสามารถสร้างไฟล์ HTML ได้โดยใช้โปรแกรม
Text Editor เช่น notepad , wordpad หรือ edit plus ฯลฯ โปรแกรมพวกนี้จะใช้เขียนเป็น
code ของภาษา HTML ผู้เขียนต้องมีความรู้ภาษา HTML เป็นอย่างดี แต่ก็ยังมีโปรแกรมที่สร้างขึ้นเพื่อช่วยในการสร้าง
webpage โดยผู้เขียนไม่จำเป็นต้องรู้ code ของภาษา html เพียงแต่ศึกษาวิธีกาารใช้
เช่น Dreamweaver, Frontpage ฯลฯ ซึ่งโปรแกรมเหล่านี้ จะแปลงข้อมูลที่เราเขียน
ไปเป็น code HTML อีกทีหนึ่ง แต่ที่เราจำเป็นต้องเรียนรู้ภาษา HTML
เพราะบางครั้งเมื่อมีปัญหา รูปแบบหรือหน้าตา ของ webpage ไม่เป็นไปตามความประสงค์ของเรา
และเมื่อเราต้องการศึกษา website ต่างๆ เพื่อนำมาประยุกต์ใช้งาน ก็จำเป็นต้องเข้าไปดูที่
code ของภาษา HTML (view -->source ที่โปรแกรม browser ) หรือเมื่อเราศึกษาสูงขึ้นไปอีก
ภาษาHTML ก็จะมีการใช้งานร่วมกับภาษาอื่นๆ ฉะนั้นผู้ที่ทำงานกับ webpageอย่างจริงจัง
จึงจำเป็นต้องรู้ ภาษา HTML
Code (ไฟล์ HTML) นี้จะแสดงผลได้ ต้องถูกแปลโดย โปรแกรม Browser เช่น
Internet Explorer, Nestcape Navigator,Opera ฯลฯ ซึ่งบริษัทที่สร้างโปรแกรม
browser ขึ้นมาใช้งาน จะยึดถือตามมาตราฐาน ที่กำหนดโดยองค์กรที่เป็นกลาง
ชื่อว่า W3C ( World Wide Web Consortium )
ส่วนประกอบหลักๆ
ของ HTML มีอยู่ 2 ส่วน คือ
ส่วนที่ต้องการให้แสดงผลบนจอภาพ คือข้อมูลที่เราต้องการนำเสนอที่หน้า
webpage
ส่วนที่เป็นคำสั่ง จะเรียกว่า แท็ก (Tag) ซึ่งจะเป็นตัวกำหนด รูปแบบของการแสดงผล
tagจะมีเครื่องหมาย < และ > ครอบอยู่ tagบางตัวอาจมีtagปิด บางตัวอาจไม่มี
tagปิดจะมีเครื่องหมาย / เพิ่มด้านหลังเครื่องหมาย < คือ </
และ > tag บาง tag ยังมีตัวขยายอีก เรียกว่า attribute ซึ่ง attribute
จะมีค่าอยู่ระหว่างเครื่องหมาย " และ " เช่น
| <font
face="MS Sans Serif"
color="green"
size="2">นี่คือข้อความที่แสดงด้วย
font MS Sans Serif สีเขียว ขนาด2</font> |
โครงสร้างของเอกสาร
HTML
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
บอกเวอร์ชั่นและ เป็นตัวกำหนดวิธีการแปล tag ของHTML (ไม่จำเป็นต้องมีก็ได้)
<html>
บอกว่าต่อไปนี้เป็นไฟล์ HTML ซึ่งจะคลุม ส่วนอื่นๆ ( head และ
body) ของไฟล์ HTML
<head>
ส่วนนี้ถูกโหลดขึ้นมาก่อน ใช้เก็บ tag ที่อธิบายความหมายต่างๆ
, ควบคุมการทำงานรูปแบบต่างๆของเวบเพจ หรืออ้างอิงถึงไฟล์อี่นๆ
(ไม่ได้แสดงบนหน้าเวบเพจ)
</head>
<body>
ข้อมูลที่ต้องการแสดงบน browser
</body>
</html>
|
ส่วน
<HEAD> tag ที่อยู่ระหว่าง
tag <head> ได้แก่
<TITLE>...</TITLE>
titleจะบอกว่าเอกสารนั้น มีเนื้อหาเกี่ยวกับอะไร และชื่อใน title นี้จะปรากฏที่
title bar ที่ bookmarkหรือ favorite และบาง search engine เช่น Yahoo
Alta vista ยังใช้ในการจัดหมวดหมู่ของ Web site ด้วย
<META> tag นี้ไม่ได้กำหนดหน้าที่ไว้ตายตัว
เพียงกำหนดให้ใช้งานที่ tag อื่นไม่สามารถทำได้ จึงทำหน้าที่ได้หลายหน้าที่
ขึ้นอยู่กับการใช้ Attribute ตัวใด และสามารถมี tag <META> ได้หลายหลาย
tag ในที่นี้เราจะกล่าวถึงที่นิยมใช้กัน
<!--บอก
Browser ให้รู้ว่าไฟล์นี้เป็นข้อมูลแบบ Text อยู่ในรูป HTMLใช้ชุดรหัสตัวอักษร
(Character Set) Windows-874-->
<META http-equiv="Content-Type"
CONTENT ="text/html;
charset=Windows-874">
<!--บอกให้รู้ว่า
เวบนี้ใช้ Tool อะไรสร้าง -- >
<META NAME="Generator"
CONTENT="EditPlus">
<!--การประกาศชื่อ
ผู้สร้าง -->
<META NAME="Author"
CONTENT="SALA">
<!--บอกให้รู้ว่าเนื้อหาของ
เวบ มีข้อมูลเกี่ยวกับอะไร ซึ่งจะมีผลต่อการค้นหาข้อมูลของ Search
Engine -->
<META NAME="Keywords"
CONTENT="energy
, electrical , fuel , thai , mine , lignite , dam , generator
,power plant ,transmission, industry , training , ชีววิถี
, โครงการลดต้นทุน SME">
<!--ส่วนที่จะนำมาแสดงบนจอภาพ
เมื่อ Search Engine พบ Content ของKeywords-->
<META NAME="Description"
CONTENT="EnergyThai
was found by Training Division of EGAT
In addition to trainings, we provide services for every business
transaction in area of Electricity and Energy. ">
|
<META>
กับการแสดงผลแบบ Client-Pull
ให้ Browser ทำการ Refresh (load) เพจเดิม ทุกๆ 4 วินาที
<meta http-equiv="Refresh"
content="4">
ให้
Browser ทำการ load เพจใหม่ ที่กำหนด URLไว้ หลังจากเริ่มload เพจแรกมาแล้ว
4 วินาที
<meta http-equiv="Refresh"
content="4
; URL=music2.html">
ซึ่งสามารถประยุกต์ใช้ กับการแสดงผลแบบ Slideshow สมมุติให้มี 3 slide
( page1.html , page2.html และ page3.html ) สามาารถเขียน tag <META>
ไว้ใน page1.html , page2.html และpage3.html ตามลำดับดังนี้
page1.html
<meta http-equiv="Refresh"
content="4
; URL= page2.html ">
page2.html <meta http-equiv="Refresh"
content="4
; URL= page3.html">
page3.html <meta http-equiv="Refresh"
content="4
; URL= page1.html"> <!--ให้วนกลับไป
page1อีกครั้ง--> |
|
|
ส่วน<BODY>
คือส่วนที่เราต้องการนำเสนอข้อมูลที่หน้า webpage
<body> ... </body>
Attribute ของ tag <body>
text="สี" กำหนดสีปกติของตัวอักษรปกติสีดำ
link="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัวเชื่อมโยง(link)
ปกติสีน้ำเงิน
alink="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัว
link ขณะ link ปกติสีแดง
vlink="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัวเชื่อมโยง(link)ที่เคยเข้าไปแล้ว
ปกติสี ม่วงเข้ม
bgcolor="สี" กำหนดสีของพื้นหลัง
ปกติสีขาว <body text="#FF0000" bgcolor="#00FF00">
background="ชื่อไฟล์รูปภาพ"
กำหนดให้ใช้รูปภาพเป็นพื้นหลัง <BODY BACKGROUND=" ชื่อเส้นทาง
ที่เก็บรูป" >
การกำหนดสี สีอักษร สีพื้น หรือสีขอบรูปภาพในภาษา HTML ใช้คำภาษาอังกฤษ
เช่น RED หมายถึงสีเเดง หรือใช้เลขฐาน 16 จำนวน 6 ตำแหน่ง เป็นตัวกำหนดปริมาณความเข้มของสีในโหมด
R G B ซึ่งเป็นโหมดการผสมสีของแสง เลียนแบบการผสมสีจริง ( R=RED,G=GREEN,B=BLUE
) โดยกำหนดให้สองตำแหน่งแรก เป็นสีแดง สองตำแหน่งถัดมาเป็นสีเขียว
และสองตำแหน่งสุดท้าย เป็นสีน้ำเงิน ปริมาณของสีแต่ละตัวเริ่มจาก 00
- FF ( #FFFFFF หรือ white = สีขาว , #FF0000 หรือ RED =สีแดง , #000000
หรือ black = สีดำ )
Tag ที่อยู่ภายใน tag <body> ได้แก่
<FONT>...</FONT>
เป็นการกำหนด รูปแบบ ขนาด และสีของตัวอักษร มีAttribute ดังนี้
face = MS Sans Serif , AngsanaUPC
color = red , green
size = 1 ,2 ,3
..
| <font
face="MS Sans Serif"
color="#00FFCC
" size="2">.
</font>
|
<B>...
</B> (Bold) ข้อมูลที่อยู่ระหว่าง tag จะแสดงเป็นตัวหนา
<U>... </U> (Underline)
ข้อมูลที่อยู่ระหว่าง tag จะถูกขีดเส้นใต้
<I>... </I> (Italic)
ข้อมูลที่อยู่ระหว่าง tag จะเป็นตัวเอียง
<H1>...</H1> ถึง
<H6>...</H6>(Header)ข้อมูลที่อยู่ระหว่าง
tag จะเป็นตัวหนาขนาดใหญ่ (H1) ลดลงตามลำดับ (H6)
<BR> เป็นการสั่งให้ตัวอักษรที่อยู่หลัง
คำสั่งนี้ ขึ้นบรรทัดใหม่
<CENTER>...</CENTER>
ข้อมูลที่อยู่ระหว่าง tag อยู่กึ่งกลางหน้า
<P> ขึ้นบรรทัดใหม่ และเว้นบรรทัด
มี Attribute Left , right , center
ตัวอักษรแทนช่องว่าง
1 spacebar
<DIV>...</DIV> (Division)
ใช้กำหนดการจัดวางข้อความ หรือจัดแบ่งข้อความออกเป็นส่วนๆ มีAttribute
ดังนี้
align = center , left , right , justify
<div
align="center">พลังงานแสงอาทิตย์</div><div
align="left">ปัจจุบันมีการนำเซลล์แสงอาทิตย์มาใช้งานด้านต่าง
ๆ อย่างแพร่หลาย</div> <div align="right">ในต่างประเทศมี
โรงงานผลิตเซลล์แสดงอาทิตย์หลายแห่ง </div>
<div align="justify">พลังงานแสงอาทิตย์
เป็นพลังงานคืนรูป ที่มีอยู่แล้วในธรรมชาติ มีปริมาณมากเพียงพอ
สนองความต้องการของมนุษย์ ทั้งยังสะอาด ไม่ก่อปฏิกิริยาใด
อันจะทำให้สิ่งแวดล้อมเป็นพิษ สามารถนำมาใช้ประโยชน ์ในการผลิตไฟฟ้า
โดยเซลล์แสงอาทิตย์ซึ่งได้มีการพัฒนา จนเป็นที่ยอมรับ สำหรับการใช้งานในระดับหนึ่ง
แต่ยังต้องพัฒนาต่อไป จนกว่าจะคุ้มค่าทางเศรษฐศาสตร์ สำหรับการผลิตไฟฟ้าในเชิงพาณิชย์
</div> เซลล์แสงอาทิตย์ เป็นสิ่งประดิษฐ์ทางอิเล็กทรอนิกส
์ที่นำมาใช้เปลี่ยนพลังงานแสงอาทิตย ์เป็นพลังงานไฟฟ้า
|
|
|
<HR>
เป็นการสร้างเส้นคั่นหน้า มีAttribute กำหนดรายละเอียดต่างๆ เช่น กำหนด
ความหนา ความยาว การจัดวาง กึ่งกลาง ซ้าย ขวา และกำหนดสีของเส้น ดังนี้
size = 1 ,2 ,3
..
width = 20 ,30 หรือ 20% ,50%,100%
align = Left , right, center
color = red , green
| <HR
size="5"
color="red"
width="50%"
align="center"> |
|
ทดสอบ |
<IMG>
การใส่รูปลงในเวบเพจ สามารถทำได้ โดยใช้ attribute src และอ้างถึงไฟล์รูปภาพให้ถูก
Path ดังนี้
<img src="sky5.jpg">
<!--รูปภาพอยู่ใน Folder เดียวกับ ไฟล์ HTML-->
<img
src="image/sky5.jpg">
<!--รูปภาพอยู่ใน Folder image และ Folder
image อยู่ในDirectory ระดับเดียวกับ ไฟล์ HTML-->
<img src="../image/sky5.jpg">
<!--รูปภาพอยู่ใน Folder image และ Folder
image อยู่ในDirectory ระดับเดียวกับ Folder ที่เก็บ ไฟล์ HTML-->
Attribute ต่างๆ ของ <image>
BODER= กำหนดขนาดกรอบ ของรูปภาพ
WIDTH= กำหนดขนาดความยาวของรูปภาพ
HEIGHT= กำหนดขนาดความสูงของรูป
ALT= แสดงข้อความเมื่อเอาเมาส์ไปวางบนรูป
หรือเมื่อ Browserไม่สามารถแสดงรูปภาพได้
VSPACE= กำหนดระยะห่างของภาพกับตัวอักษรหรือขอบในแนวตั้ง
HSPACE= กำหนดระยะห่างของภาพกับตัวอักษรหรือขอบในแนวนอน
align="right"
=กำหนดรูปภาพอยู่ด้านขวา ของข้อความ
align="left"
=กำหนดรูปภาพอยู่ด้านซ้าย ของข้อความ
align="top"
=กำหนดข้อความอยู่ขอบด้านบน ของรูปภาพ
align="middle"
=กำหนดข้อความอยู่กึ่งกลาง ของรูปภาพ
align="bottom"
=กำหนดข้อความอยู่ขอบด้านล่าง ของรูปภาพ
| <img
src="../image/sky5.jpg"
align="right"VSPACE="30"HSPACE="50"
ALT="picture1"
> |
การสั่งให้แสดงผลแบบรายการ
(LIST)
<OL>...</OL> (Ordered
List) แสดงผลรายการ แบบมีค่ากำกับหน้าหัวข้อ ซึ่งแต่ละหัวข้อจะใช้
tag <LI>นำหน้า โดยชนิดของหัวข้อ จะขึ้นอยู่กับค่าของ Attribute
ดังนี้
Type="1"
กำหนดเป็นตัวเลข ข้อความที่อยู่หลัง <LI> จะมีหัวข้อเป็น 1,2,3,4,
ตามลำดับ
Type ="A"
กำหนดเป็นตัวอักษร ข้อความที่อยู่หลัง <LI> จะมีหัวข้อเป็น A,B,C,D,
ตามลำดับ
Type ="a"
กำหนดเป็นตัวอักษรอังกฤษพิมพ์เล็ก ข้อความที่อยู่หลัง <LI> จะมีหัวข้อเป็น
a,b,c,d, ตามลำดับ
Type ="i"
กำหนดเป็นตัวเลขโรมันพิมพ์เล็ก ข้อความที่อยู่หลัง <LI> จะมีหัวข้อเป็น
i,ii,iii, ตามลำดับ
Type ="I"
กำหนดเป็นตัวเลขโรมันพิมพ์ใหญ่ ข้อความที่อยู่หลัง <LI> จะมีหัวข้อเป็น
I,II,III, ตามลำดับ
Start ="ตัวเลข"
กำหนดให้หัวข้อนั้น เริ่มต้นที่อะไร เช่น สั่ง Start=3 หัวข้อจะเริ่มจาก
3, 4, 5, 6... หรือ C, D, E
. เป็นต้น
<OL
TYPE="1"
start ="3">
<LI>Item one
<LI>Item two
<LI>Item three
</OL>
|
|
|
<UL>...</UL>
(Unordered List) แสดงผลรายการ แบบมีสัญลักษณ์ กำกับหน้าหัวข้อ ซึ่งแต่ละหัวข้อจะใช้
tag <LI>นำหน้า โดยชนิดของหัวข้อ จะขึ้นกับค่าของ Attribute
ดังนี้
Type= "disc"
กำหนดเป็นทรงกลมทึบ ทำให้ข้อความที่อยู่หลัง <LI> มีหัวข้อ เป็นทรงกลมเล็ก
ๆ
Type= "circle"
กำหนดเป็นทรงกลมกลวง ทำให้ข้อความที่อยู่หลัง <LI> มีหัวข้อ
เป็นทรงกลมกลวง
Type= "square"
กำหนดเป็นทรงสี่เหลี่ยมทึบ ทำให้ข้อความที่อยู่หลัง <LI> มีหัวข้อ
เป็นทรงสี่เหลี่ยมทึบ
หมายเหตุ ค่าของAttribute ให้ใช้อักษรตัวเล็ก
<UL
TYPE="circle">
<LI>Item one
<LI>Item two
<LI>Item three
</UL>
|
|
|
<DL>...</DL>
(Definition List) แสดงผลรายการ แบบใช้นิยาม ใช้ประโยชน์
ในการ แสดง คำจำกัดความ จากหัวข้อ ซึ่งคำจำกัดความ จะขึ้นบรรทัดใหม่ให้
โดยต้องใช้ร่วมกับ tag <DT> และ<DD>
<DL>
<DT>Item one</DT>
<DD>cat</DD>
<DD>bird</DD>
<DT>Item two</DT>
<DD>dog</DD>
<DT>Item three</DT>
<DD>pig</DD>
</DL>
|
|
|
........................................................................................................
|
