Professional Documents
Culture Documents
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 2
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 3
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 4
รูปที่ 4 การเข้าโปรแกรม
2.หน้าตาโปรแกรม Notepad
รูปที่ 5 หน้าตาโปรแกรม
3. จากนั้นลองพิมพ์ไฟล์ตัวอย่างลงไปดังนี้
<HTML>
<HEAD>
<TITLE> โฮมเพจแรกของ
กระผม</TITLE>
</HEAD>
<BODY>
สวัสดีครับ คนอาน
หน้าตาดีจังเลย
</BODY>
</HTML>
รูปที่ 6 ลักษณะการเขียน
4. การบันทึก(save)
ทําดังตอไปนี้ Click ที่เมนู File > Save
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 5
หรือ
รูปที่ 7 การบันทึกไฟล
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 6
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 7
โครงสร้างภาษา HTML
คำาสัง่ ในภาษา HTML เรียกว่า แท็ก (Tag) จะเขียนอยู่ใน
เครื่องหมาย < และ > แท็กจะแบ่งได้เป็ นสอง
กล่่ม คือ แท็กแบบเปิ ด และแท็กแบบปิ ด โดยปกติแล้วแท็กของภาษา
HTML จะเปิ ดและปิ ด โดยมีรูปแบบดังนี้
รูปแบบ <TAG> .... </TAG>
เช่น <HTML> .... </HTML>, <B> .... </B>
การปิ ดแท็กจะใช้เครื่องหมาย / (Slash) เป็ นตัวกำาหนดในแท็กที่ปิด
ส่วนแท็กอีกประเภทหนึ่ งจะเป็ นแท็ก
ในลักษณะเปิ ด คือ ไม่ต้องมีแท็กเปิ ดท้าย เช่น <IMG>, <BR>, <WBR>
เป็ นต้น
รูปแบบภาษา HTML
ภาษา HTML ประกอบด้วยแท็ก (tag) ทําหน้าที่ควบคุมโครงสร้างและการ
แสดงผลของเว็บเพจ ซึ่งจะ
ถูกแปลผลด้วยโปรแกรมบราวเซอร รูปแบบของคําสัง่ จะประกอบด้วย ตัวอักษร
คําสัง่ อยูภายใต้เครื่องหมาย
< > แท็กมี 2 รูปแบบดังนี้
แท็กคู่ ประกอบด้วยคูของแท็กที่อยูภายใต้เครื่องหมาย < > คําสัง่ แตละ
คูจะมีช่ ือเรียกวา แท็กเปด(open tag) และแท็กปด (close tag)
แท็กเปดเปนคําสัง่ ที่อยูหน้าข้อความเพื่อกําหนดจุดเริม
่ ต้นลักษณะหรือรูป
แบบการแสดงผล แท็กปด คล้ายกับแท็กเปดแตมีเครื่องหมายสแลช (/)
อยูภายในทําหน้าที่ปดท้ายข้อความเพื่อกําหนดจุดสิ้นสุดของลักษณะหรือรูป
แบบการแสดงผลนั้ นๆ มีรูปแบบดังนี้
<ในรูปที่ 7.1
ตัวอยางของแท็กเปดและแท็กปดแสดงไว้
<HTM
/HTML
L>
>
<HEA
แท็กเปิ ด </HEA แท็กปิ ด
D>
D>
<BOD
</BOD
Y>
Y>
ตัวอย่างแท็กเปดและ
แท็กปด
<คำาสัง่ >
ซึ่งแท็กเหลานี้ เปนแท็กที่ไมทํางานเกี่ยวกับการแสดงผลอักษรหรือรูปภาพ
การเขียนแท็กจะใช้อักษรตัวเล็ก (lower case) หรือตัวใหญ (upper case)
หรือผสมกันก็ได้ เชน
< HTML> หรือ <html> หรือ <Html> โปรแกรมบราวเซอรจะถือวาเปนคําสัง่
เดียวกัน ยกเว้นคําเฉพาะหรือ
คําระบุเส้นทาง ชื่อแฟ มข้อมูล ชื่อไดเรคทอรี่ ตัวอักษรเล็กหรือใหญจะถือวาเปน
คนละตัวกัน เชน<IMG
SRC=”picture.gif”></IMG> และ <IMG SRC=”PICTURE.GIF”></IMG>
เปนต้น
เพื่อความเข้าใจง่ายในการกำาหนดโครสร้างภาษา HTML เราจึงควร
กำาหนดแท็กเปิ ดและเปิ ดให้เหมาะสม
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 9
<HTML>
<HEAD> <TITLE> Title Bar </TITLE>
</HEAD>
<BODY>
ส่วนเนื้ อหาร รูปภาพ
</BODY>
</HTML>
การจัดรูปแบบเอกสาร
คำาสัง่ ในการกำาหนดหัวเรื่อง (Headding)
การกำาหนดหัวเรื่องเราจะใช้คำาสั่ง Headding <H> เพื่อแสดงอัตรา
อักษรขนาดใหญ่กว่าปกติ เช่น ชื่อบท,ชื่อหัวข้อ เป็ นต้น คำาสั่ง heading มี
ด้วยกัน 6 ระดับ โดยที่ระดับ 1 จะมีขนาดใหญ่ส่ด และระดับ 6 จะมีขนาด
เล็กที่ส่ด มีรูปแบบคำาสั่ง ดังนี้
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 10
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 11
<P>
Microsoft ถูกตัดสินโดยศาลสหรัฐแล้ว <BR>
โดยศาลสั่ง ให ้ Microsoft แยกบริษท ั ออกเป็ นบริษท
ั ย่อย ๆ <BR>
<I>(ส่วนย่อหน้าใช้คำาสั่ง <BR> จึงขึ้นบรรทัดใหม่)</I>
</BODY>
</HTML>
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 12
ซึ่งข้อความที่ได้จะอยู่กึ่งกลางบรรทัด เหมาะกับการสร้างข้อความที่
เป็ นหัวเรื่อง
ตัวอย่างที่5 center.html
<HTML>
<HEAD><TITLE> Center </TITLE></HEAD>
<BODY>
<H1><CENTER>การฝึ กอบรมเชิงปฏิบัติการ
เรื่อง</CENTER></H1>
<H2><CENTER>การสร้างเว็บเพจเบื้องต้น </CENTER></H2>
<H3><CENTER>วิทยากร อ.ชัยวัฒน์ เทียนนาวา</CENTER></H3>
</BODY>
</HTML>
การตีเส้นแนวนอน (Horizontal Line)
ภาษา HTML มีคำาสั่ง ช่วยในการตีเส้นแนวนอน เพื่อแยกเอกสารออก
เป็ นส่วน ๆ ให้งา
่ ยต่อการดูรูปแบบ
เอกสารมากขึ้น โดยมีรูปแบบดังนี้
<HR>
สำาหรับคำาสั่ง <HR> นี้ จะไม่มีแท็กปิ ด เป็ นคำาสั่ง ในลักษณะที่เรียกว่า
แท็กเปิ ด ซึ่งถ้าเป็ นคำา default จะแสดงเส้นขนาด 2 pixels เต็มจอภาพ
แต่คำาสั่ง <HR> ยังมี Attributes ช่วยในการกำาหนดความหนา,
ความยาว,การจัดตำาแหน่ ง และการกำาหนดความทึบของเส้น โดยมีรูปแบบ
ดังนี้
<HR Size = "ความหนาของเส้น "
Width = "ความยาวของเส้น "
Align = "ตำาแหน่ งการจัดวาง"
Noshade>
Size เป็ นการกำาหนดความหนาให้กับเส้น ขนาดปกติ คือ 2
pixels
Width เป็ นการกำาหนดความยาวให้กับเส้น สามารถกำาหนดเป็ นทั้ง
pixels และ % โดยปกติ
ถ้าไม่กำาหนด เส้นจะยาวเต็มจอภาพ
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 13
ตัวอย่างที่6 horizontal_line.html
<HTML>
<HEAD><TITLE> Horizontal Line </TITLE></HEAD>
<BODY>
เส้น ขนาดปกติ <HR> เส้น ความหนา 5 <HR Size="5">
เส้น ความหนา 20 <HR Size="20"> เส้น ความยาว 200 <HR
Width="200">
เส้น ความยาว 50% ของจอภาพ <HR Width="50%">
เส้น ความหนา 20 ความยาว 20% <HR size="20" Width="20%">
เส้น ความหนา 10 ความยาว 20% และอย่ชู ิดซ้ายของบรรทัด <HR size="10"
Width="20%" Align="Left">
เส้น ความหนา 10 และแสดงเส้น ทึบโดยไม่มีการแรเงาของเส้น <HR Size="10"
Noshade>
</BODY>
</HTML>
การจัดรูปแบบตัวอักษร และการใช้สี
คำาสัง่ ในการกำาหนดแบบตัวอักษร (Font Type)
คำาสั่ง ในการกำาหนดแบบตัวอักษรนั้น เราใช้แท็ก <FONT> ซึ่งแท็
กนี้ สามารถที่จะกำาหนดได้ต้ังแต่ แบบ
ตัวอักษร (Font Face), ขนาดของตัวอักษร (Font Size) และสีของตัว
อักษร (Font Color)
การกำาหนดแบบตัวอักษร หรือที่เรียกว่า ฟอนต์ (Font) โดยปกติค่า
เริ่ม ต้นของเว็บบราวเซอร์จะกำาหนดเป็ นแบบ Time New Roman เพื่อ
ความหลากหลายของรูปแบบตัวอักษรมากกว่า 1 รูปแบบบนจอภาพของ
บราวเซอร์ เราสามารถใช้คำาสั่ง <FONT> ตามด้วย Attributes "FACE"
เพื่อกำาหนดรูปแบบการแสดงผลภาษาไทยให้กับตัวอักษรของเว็บเพจของ
เราได้ ซึ่งการแสดงผลภาษาไทยนั้นมีฟอนต์ให้เลือกหลายแบบตัวอย่างเช่น
AngsanaUPC, CordiaUPC, BrowalliaUPC, MS Sans Serif เป็ นต้น
แต่สำาหรับฟอนต์ท่ีเหมาะสมกับการแสดงผลภาษาไทยในเว็บบราวเซอร์ คือ
MS Sans Serif โดยมีรูปแบบดังนี้
<FONT Face = "ชื่อฟอนต์"> ... ข้อความ ... </FONT>
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 14
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 15
ตัวอย่างที่9 font_color.html
<HTML>
<HEAD><TITLE> Font Color</TITLE></HEAD>
<BODY>
<FONT color="Blue">This is Blue Color</FONT><BR>
<FONT color="Green">This is Green Color</FONT><BR>
<FONT color="#FFA500">This is #FFA500</FONT><BR>
</BODY>
</HTML>
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 16
ตัวอย่างที่10 style.html
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD>
<BODY>
แบบตัวอักษรปกติ
แบบตัวอักษรหนา <B>Bold</B><BR>
แบบตัวอักษรเอียง <I>Italic</I><BR>
แบบตัวอักษรขีดเสน้ ใต <
้ U>Underline</U><BR>
แบบตัวอักษรตัวพิมพ์ดีด <TT>Typewriter</TT><BR>
แบบตัวอักษรขีดเสน้ พาดทับกลางตัวอักษร <S>Strikethrough</S><BR>
แบบตัวอักษรตัวหอ้ ย <SUB>Subscript</SUB><BR>
แบบตัวอักษรตัวยก <SUP>Superscript</SUP><BR>
แบบตัวอักษรตัวโต <BIG>Big</BIG><BR>
แบบตัวอักษรตัวเล็ก <SMALL>Small</SMALL>
</BODY>
</HTML>
การกำาหนดสีพ้ น
ื หลัง
การกำาหนดสีพ้ ืนหลังของเว็บเพจเราสามารถทำาได้จากแท็ก
<BODY> โดยกำาหนดจาก Attributes "BGColor" โดยมีรูปแบบดังนี้
กำาหนดสีพ้ ืนหลังจากชื่อ สีมาตรฐาน
<BODY BGColor = "สีพ้ ืน หลัง">
....
</BODY>
กำาหนดสีพ้ ืน หลังจากเลขฐาน 16
<BODY BGColor = "#RRGGBB">
....
</BODY>
ตัวอย่างที่11 bgcolor.html
<HTML>
<HEAD><TITLE> BGColor </TITLE></HEAD>
<!-- BODY BGColor="Yellow" -->
<BODY BGColor="#FFFF00"> The Internet is a collection of information
stored in computers physically located throughout the world.<BR>
Much of the information on the Internet is organized onto electronic pages.
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 17
You'll bring one page to your computer screen, discover its contents, and have
the option of bringing more pages of information.
</BODY>
</HTML>
การกำาหนดสีให้กับตัวอักษรทัง ้ เอกสาร
การกำาหนดสีให้กับตัวอักษรทั้ง เว็บเพจเราสามารถทำาได้จากแท็ก
<BODY> โดยกำาหนดจาก Attributes
"Text" โดยมีรูปแบบดังนี้
กำาหนดสีพ้ ืน หลังจากชื่อ สีมาตรฐาน
<BODY Text = "สีพ้ ืน หลัง">
....
</BODY>
กำาหนดสีพ้ ืน หลังจากเลขฐาน 16
<BODY Text = "#RRGGBB">
....
</BODY>
ตัวอย่างที่12 body_text.html
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD>
<!-- BODY Text="Red" -->
<BODY Text="#FF0000"> The Internet is a collection of information stored
in computers physically located throughout the world.<BR>
Much of the information on the Internet is organized onto electronic pages.
You'll bring one page to your computer screen, discover its contents, and have
the option of bringing more pages of information.
</BODY>
</HTML>
การกำาหนดเครื่องหมายหัวข้อและเลขลำาดับ
คำาสัง่ ในการแสดงรายการแบบไม่มีลำาดับ (Unordered List)
Unordered List หรือ Bullet List นั้น ในภาษา HTML ได้กำาหนดคำา
สั่ง ในการอำานวยความสะดวกในการ
สร้าง Bullet ขึ้นไว้ดว
้ ย เพื่อแสดงเครื่องหมายหน้าหัวข้อเรื่องหรือลำาดับ
ของรายการต่าง ๆ โดยไม่มีการ
เรียงลำาดับ โดยมีรูปแบบดังนี้
<UL>
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
... ...........
</UL>
ตัวอย่างที่13 bullet1.html
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 18
<HTML>
<HEAD><TITLE> List Item </TITLE></HEAD>
<BODY>
<UL>Viewing the Navigator Window
<LI>Window and frames
<LI>Colors and underlining
<LI>Company logo
<LI>Progress bar
<LI>Status message area
</UL>
</BODY>
</HTML>
ตัวอย่างที่14 bullet2.html
<HTML>
<HEAD><TITLE> List Item </TITLE></HEAD>
<BODY>
<UL Type="Circle">วิวัฒนาการคอมพิวเตอร์
<LI>ย่คหลอดสูญญากาศ
<LI>ย่คทรานซิสเตอร์
<LI>ย่ควงจรรวม
<LI>ย่ควีแอลเอสไอ
<LI>ย่คเครือข่าย
</UL>
</BODY>
</HTML>
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 19
ตัวอักษร
รเป็ นตัวกำาหนดแสดงลำาดับ โดยมีรูปแบบดังนี้
<OL Type = "ชนิ ดของตัวเลข" Start = "ตัวเลขเริ่มต้น ">
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
... ...........
</OL>
ตัวอย่างที่15 order_list.html
<HTML>
<HEAD><TITLE> Order List </TITLE></HEAD>
<BODY>
<OL Type="I">My computer in my dream
<LI>Inter Pentium 4 processor 2.0 GHz
<LI>RDRAM 256 MB
<LI>Harddisk 50 GB ATA-100
<LI>52X CD-Rom Drive
<LI>Speakers (Labtec) 160 Watt
<LI>Asus GeForce3 64 MB
<LI>Creative Sound Baster
</OL>
</BODY>
</HTML>
การสร้างตาราง
คำาสัง่ ในการสร้างตาราง (Table)
การสร้างเว็บเพจในปัจจ่บันมีการนำาตารางเข้ามาเกี่ยวข้องกับหลาย
ๆ ส่วน ตั้ง แต่การสร้างตารางเพื่อแสดงความสัมพันธ์ในลักษณะแถว
(Row) และคอลัมน์ (Column) รวมถึงการแบ่งขอบเขตให้กับข้อความเพื่อ
การจำากัดและควบค่มข้อความให้อยู่ในส่วนที่เราต้องการคำาสั่ง สำาหรับ
สร้างตารางประกอบด้วยคำาสั่ง ดังนี้
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 20
สำาหรับโครงสร้างของคำาสั่ง ในการสร้างตารางมีดังนี้
<TABLE>
<CAPTION> ข้อความกำากับตาราง </CAPTION>
<TR>
<TH> ข้อความส่วนหัว </TH>
....................
</TR>
<TR>
<TD> ข้อความส่วนของข้อมูล </TD>
........................
</TR>
<TR>
<TD> ข้อความส่วนของข้อมูล </TD>
........................
</TR>
........................
</TABLE>
ตัวอย่างที่16 table1.html
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER> Example Data
<H2>Report Sale 2001</H2>
<TABLE>
<TR>
<TH>Month</TH> <TH>Sale A</TH> <TH>Sale
B</TH>
</TR>
<TR>
<TD>January</TD> <TD>500</TD>
<TD>800</TD>
</TR>
<TR>
<TD>February</TD> <TD>1200</TD>
<TD>1000</TD>
</TR>
<TR>
<TD>Mar</TD> <TD>900</TD> <TD>400</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 21
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 22
</CENTER>
</BODY>
</HTML>
การนำารูปภาพมาใช้กับเว็บเพจ
ชนิ ดของรูปภาพ
การนำารูปภาพมาใส่ในเว็บเพจเป็ นส่วนหนึ่ งที่สร้างความน่าสนใจให้
กับเว็บเพจเป็ นอย่างมาก โดยเฉพาะ
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 23
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 24
ตัวอย่างที่20 image2.html
<HTML>
<HEAD><TITLE> Image </TITLE></HEAD>
<BODY>
<CENTER> <IMG SRC=" mypic.jpg" ALT="รูปใครเอ่ย"></CENTER>
</BODY>
</HTML>
การนำารูปภาพทำาเป็นพื้นหลัง
เราสามารถนำารูปภาพไปประกอบเป็ นพื้นหลังหรือที่เรียกว่าวอลล์
เปเปอร์ (Wall Paper) ของเว็บเพจได้ โดยกำาหนดในส่วนของแท็ก Body
ซึ่งใช้ Attributes Background โดยมีรูปแบบดังนี้
<BODY Background = "ไฟล์ภาพ">
ตัวอย่างที่21 image_background.html
<HTML>
<HEAD><TITLE> Wall Paper </TITLE></HEAD>
<BODY Background="logo_bg.gif">
<CENTER> We are students</CENTER>
</BODY>
</HTML>
การเชื่อมโยงเว็บเพจ (Link)
การเชื่อมโยงเว็บเพจ หรือที่เรียกว่าลิงค์ (Link) ถือว่าเป็ นค่ณสมบัติท่ี
สำาคัญของภาษา HTML ดังจะเห็นได้จากเว็บเพจทั่ว ๆ ไป จ่ดเชื่อมโยง
เว็บเพจอาจจะเป็ นข้อความหรือรูปภาพก็ได้
การสร้างจุดเชื่อมโยงข้อความ (Text Link)
ในการเชื่อมโยงเว็บเพจเราจะใช้แท็ก <A> โดยการกำาหนดข้อความ
ในเอกสาร HTML เป็ นจ่ดเชื่อมโยง
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 25
โดยมีรูปแบบดังนี้
<A HREF = "URL"> ข้อ ความ </A>
ตัวอย่างที่22 link1.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER><H2>สภาบันการศึกษา</H2></CENTER><BR>
<A HREF="http://www.north.rit.ac.th/">สถาบันเทคโนโลยีราชมงคล
วิทยาเขตภาคพายัพ</A><BR>
<A HREF="http://www.ru.ac.th/">มหาวิทยาลัยรามคำาแหง</A><BR>
<A HREF="http://www.cu.ac.th/">จ่ฬาลงกรณ์มหาวิทยาลัย</A><BR>
<A HREF="http://www.tu.ac.th/">มหาวิทยาลัยธรรมศาสตร์</A><BR>
</BODY>
</HTML>
ตัวอย่างที่23 link2.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER> <H2>หนังสือพิมพ์ไทย</H2>
<P>
<A HREF="http://www.komchadluek.com/">
<IMG SRC="komchadluek.gif" BORDER="0">
</A>
<P>
<A HREF="http://www.thairath.com/">
<IMG SRC="thairath.gif" BORDER="0">
</A>
</CENTER>
</BODY>
</HTML>
การกำาหนดสีให้กับจุดเชื่อมโยงเว็บเพจ
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 26
Attributes ที่ใช้ในการกำาหนดสีมีด้วยกันดังนี้
BGCOLOR กำาหนดสีพ้ ืนหลังให้กับเว็บเพจ
TEXT กำาหนดสีตัวอักษรปกติ
LINK กำาหนดสีตัวอักษรที่เป็ นจ่ดเชื่อมโยง
VLINK (Visited Link) กำาหนดสีตัวอักษรที่ทำาการคลิกเพื่อไปยัง
เป้ าหมายแล้ว
ALINK (Active Link)กำาหนดสีตัวอักษรที่กำาลังคลิกไปยังเป้ าหมาย
ตัวอย่างที่24 link3.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY TEXT="RED" LINK="BLUE" VLINK="GREEN" ALINK="ORANGE">
<CENTER><H2>สภาบันการศึกษา</H2></CENTER><BR>
<A HREF="http://www.north.rit.ac.th/">สถาบันเทคโนโลยีราชมงคล
วิทยาเขตภาคพายัพ </A><BR>
<A HREF="http://www.ru.ac.th/">มหาวิทยาลัยรามคำาแหง</A><BR>
<A HREF="http://www.cu.ac.th/">จ่ฬาลงกรณ์มหาวิทยาลัย</A><BR>
<A HREF="http://www.tu.ac.th/">มหาวิทยาลัยธรรมศาสตร์</A><BR>
</BODY>
</HTML>
การเชื่อมโยงระหว่างเว็บเพจ
ในการระบ่ตำาแหน่ งที่อยู่สำาหรับลิงค์น้ัน ถ้าอยู่ต่างเว็บไซต์กันจะต้อง
ระบ่ไว้ให้ครบถ้วน ตามตัวอย่างที่ 22-24 ที่ผ่านมา แต่ถ้าเป็ นไฟล์ HTML
ในเว็บไซต์เดียวกันเราสามารถละชื่อเว็บไซต์ได้ เหลือเพียงชื่อไฟล์ก็พอ
ตัวอย่างที่25 link3.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER><H2>สภาบันการศึกษา</H2></CENTER><BR>
<A HREF="head.html">ตัวอย่างท ่ี 1</A><BR>
<A HREF="paragraph.html">ตัวอย่างท ่ี 4</A><BR>
<A HREF=" font_size.html">ตัวอย่างท ่ี 8</A><BR>
<A HREF=" order_list.html">ตัวอย่างท ่ี 15</A><BR>
<A HREF=" table3.html">ตัวอย่างท ่ี 18</A><BR>
</BODY>
</HTML>
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 27
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 28
2. ประเภทการสร้างเฟรมแบบต่าง ๆ
2.1 การแบ่งหน้าจอโดยกำาหนดหน่วยตามความละเอียด
การแบงหน้าจอโดยกําหนดหนวยตามความละเอียดจอภาพ จะมีหนวยเป็ น
พิกเซล ( Pixel )เชน 640 X 480 , 800 X 600 และ 1,024 X 768 เป็ นต้น
การแบงหน้าจอจะต้องคํานึ งถึงผู้ใช้ทัว่ ไปวา สวนใหญกําหนดความละเอียด
มาตรฐานกี่พิกเซล ควรออกแบบหน้าเว็บเพ็จให้เหมาะสมและมีความ สวยงาม
โดยมีรูปแบบการใช้งานคําสัง่ ดังนี้ คือ
<FRAMESET COLS/ROWS = “VALUE 1,VALUE 2,......VALUE
n”>
ตัวอยางการใช้งาน
<FRAMESET COLS = “400,150,150”> แบงหน้าจอตามแนวตั้งเป็ น 3
สวน คือ 400,150,150
<FRAMESET COLS = “400,400”> แบงหน้าจอตามแนวตั้งเป็ น 2 สวน
คือ 400,400
<FRAMESET ROWS = “200,200,200”> แบงหน้าจอตามแนวนอนเป็ น
3 สวน คือ 200,200,200
<FRAMESET ROWS = “350,350”> แบงหน้าจอตามแนวนอนเป็ น 2
สวน คือ 350,350
ตัวอย่าง
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 29
Code ของตัวอยางการแบงเฟรมแบบกําหนดขนาด
ผลลัพทจากการแบงเฟรม
2.2 การแบ่งหน้าจอโดยกำาหนดหน่วยตามเปอร์เซนต์
การแบงหน้าจอโดยกําหนดหนวยเป็ นเปอรเซ็นต (%) หน้าจอจะถูกแบง
สวนตามเปอรเซ็นตท่ีกําหนด สามารถกําหนดตามแนวนอนหรือแนวตั้งก็ได้ โดย
มีรูปแบบการใช้คําสัง่ ดังนี้
<FRAMESET COLS/ROWS = “VALUE 1,VALUE
2,......VALUE n”>
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 30
ตัวอยางการใช้งาน
<FRAMESET COLS = "50%,25%,25%"> แบงหน้าจอตามแนวตั้งเป็ น
3 สวน คือ 50%,25%,25%
<FRAMESET COLS = "50%,50%"> แบงหน้าจอตามแนวตั้งเป็ น 2
สวน คือ 50%,50%
<FRAMESET ROWS = "50%,25%,25%"> แบงหน้าจอตามแนวนอน
เป็ น 3 สวน คือ 50%,25%,25%
<FRAMESET ROWS = "50%,50%"> แบงหน้าจอตามแนวนอนเป็ น 2
สวน คือ 50%,50%
ตัวอย่าง
Code ของตัวอยางการแบงเฟรมแบบ
กําหนดเป็ นเปอรเซ็นต
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 31
ผลลัพทจากการแบงเฟรม
2.3 การแบ่งหน้าจอโดยกำาหนดดอกจันทร์ร่วม
การแบงหน้าจอโดยใช้เครื่องหมายดอกจันทรวม เป็ นการแบงหน้าจอโดย
กําหนดตามความสัมพันธของแตละเฟรม ซึ่งดอกจันท (*) หมายถึงกว้าง
ยาวตามความสัมพันธของเฟรม ตัวอยางเชน
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 32
ตัวอย่าง
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 33
ผลลัพทจากการแบงเฟรม
2.4 การกำาหนดไม่ให้มีการปรับขนาดของเฟรม
จากการสร้างเฟรมที่ผานมา เมื่อรันโปรแกรมแล้วเราสามารถปรับขนาดของ
เฟรมเพื่อเลื่อนดูข้อมูลในเฟรมใดเฟรมหนึ่ ง โดยการใช้เมาสคลิกแล้วลากบริเวณ
เส้นแบงเฟรมได้ ถ้ารันโปรแกรมใหมจะได้หน้าจอการแบงเฟรมเหมือนเดิม แต
ถ้าไมต้องการให้ปรับขนาดของเฟรม ให้กําหนดรูปแบบของ คําสัง่ ดังตอไปนี้
<FRAME NAME="ชื่อเฟรม" SRC="ชื่อไฟล.html” NORESIZE> NORESIZE
แท็กที่ใช้กําหนดไมให้มีการปรับขนาดของเฟรม
3. การสร้างเฟรมย่อย
การสร้างเฟรมยอย คือการสร้างเฟรมเพิ่มขึ้นภายในเฟรมปกติมากกวาหนึ่ ง
เฟรม เพื่อทําให้สามารถใช้งานได้สะดวกและจัดหน้าจอได้เหมาะสมมากยิ่งขึ้น
เป็ นการสร้างแท็ก <FRAMESET>ซ้อนไว้ในแท็ก <FRAMESET> อีกทีหนึ่ ง
ตัวอย่าง
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 34
ผลลัพท
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 35
4. การเชื่อมโยงภายในเฟรม
การเชื่อมโยงภายในเฟรมเป็ นการเชื่อมโยงไฟลเมื่อทําการคลิกเมาสท่ี
รายการที่ต้องการแล้วจะปรากฏผลลัพธของไฟลหรือหรือเว็บไซด ที่ทําการเชื่อม
โยงไป โดยทําการสร้างไฟลเป็ น 2 สวนคือ สวนที่หนึ่ งสร้างไฟลเพื่อทําการแบง
เฟรมสําหรับแสดงการเชื่อมโยง สวนที่สองเพื่อทําการกําหนดการเชื่อมโยงใน
เฟรมโดยการอ้างอิงชื่อเฟรม
ตัวอย่าง
5. การแสดงผลปลายทาง
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 36
สร้างเสียงดนตรีบนเว็บเพจ
แบบ Background Sound
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 37
แบบ EMBED
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 38
ตัวอย่าง
<EMBED SRC="sound.mid" HIGHT=60 WIDTH=144
CONTROLS=COLSOLE AUTOSTART=TRUE LOOP=TRUE>
แบบกำาหนดตัวเชื่อม
รูปแบบ < A HREF="......">คำาอธิบาย</A>
เป็ นการใสเพลงโดยการกําหนดตัวเชื่อม ในชองวาง ๆให้ใสตําแหนงไฟล
เสียง ลงไป สวนตรง "คําอธิบาย" ให้ใสข้อความที่ส่ ือความหมายให้รู้วา ตัวเชื่อม
นี้ เป็ นไฟลเพลง เชน "เพลงแสนสนุ ก"
ตัวอย่าง < A HREF="sound.mid"> ฟั งเพลงกดตรงนี้ จ้า</A>
แบบ META
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 39
ใส่ไฟล์วีดิโอให้เว็บเพจ(IE)
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 40
ใส่ไฟล์วีดิโอให้เว็บเพจ(NS)
รูปแบบ
< EMBED SRC="....." LOOP="TRUE/FALSE WIDTH=pixels
HEIGHT=pixels ALIGN="....." >
ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 41
ครูชัยวัฒน เทียนนาวา