HTML - แอนิเมชั่นและมัลติมีเดีย
Download
Report
Transcript HTML - แอนิเมชั่นและมัลติมีเดีย
เอกสารประกอบการสอน
ภาษา HTML
ตอนที่ 1
HTML : Hyper Text Markup Language
คือ ภาษาคอมพิวเตอร์ภาษาหนึ่ง เป็ นมาตรฐานสากลที่ใช้
นาเสนอข้อมูลแบบผสมผสาน ข้อมูลในรู ปแบบต่างๆ เช่น
ข้อความ รู ปภาพ เสี ยง ภาพเคลื่อนไหว หรื อ อื่นๆ จะถูก
เชื่อมโยงเข้าหากัน ด้วยชุดคาสัง่ เพื่อให้แสดงผลออกมาคล้าย
กับ สิ่ งพิมพ์ สไลด์ หรื อ แบบมัลติมีเดีย
ไฟล์ขอ้ มูลของภาษา HTML มีนามสกุลเป็ น .html หรื อ .htm
HTML
2
HTML : Hyper Text Markup Language
ถูกค้นคิดโดย เซอร์ ทโิ มที จอห์ น เบอร์ เนิร์ส-ลี (Sir Timothy
John Berners-Lee) หรือ ทิม เบอร์ เนิร์ส-ลี
- คิดค้นโปรโตคอล http (Hyper Text
Transfer Protocol)
- สร้าง "เบราเซอร์" หรื อโปรแกรมท่อง
อินเทอร์เน็ตตัวแรก พร้อมตั้งชื่อว่า
"เวิลด์ไวด์เวบ" (WorldWideWeb)
3
โฮมเพจ (home page)
: คือ หน้าแรกของเว็บไซต์เมื่อเรี ยกเว็บนั้นๆขึ้นมา ถ้าเปรี ยบ
กับหนังสื อก็คือ หน้าสารบัญ.
เว็บเพจ (web page)
: คือ หน้าเนื้อหาของเว็บไซต์แต่ละหน้า
เว็บบราวเซอร์ (web browser)
: โปรแกรมสาหรับเปิ ดดูเว็บเพจ ได้แก่โปรแกรม Internet
Explorer (IE), FireFox, Opera, Google Chrome เป็ นต้น
HTML
4
โฮมเพจ (home page)
: คือ หน้าแรกของเว็บไซต์เมื่อเรี ยกเว็บนั้นๆขึ้นมา ถ้าเปรี ยบ
กับหนังสื อก็คือ หน้าสารบัญ.
เว็บเพจ (web page)
: คือ หน้าเนื้อหาของเว็บไซต์แต่ละหน้า
เว็บบราวเซอร์ (web browser)
: โปรแกรมสาหรับเปิ ดดูเว็บเพจ ได้แก่โปรแกรม Internet
Explorer (IE), FireFox, Opera, Google Chrome เป็ นต้น
HTML
5
เว็บไซต์ (web site)
: ที่รวบรวมหน้าเว็บเพจหลายหน้า ซึ่ งเชื่อมโยงกันผ่านทาง
ไฮเปอร์ลิงก์ ส่ วนใหญ่จดั ทาขึ้นเพื่อนาเสนอข้อมูลผ่าน
คอมพิวเตอร์ และเครื อข่ายคอมพิวเตอร์
HTML
6
หลักการในการโหลดเว็บเพ็จของโฮมเพ็จ
เมื่อเราเรี ยกไฟล์จากเว็บไซต์ใด ๆ ก็ตาม ไฟล์แรกที่ถูก
เรี ยก (โฮมเพจ) โดยทัว่ ไปจะมองหาไฟล์ index.html หรื อ
index.php หรื อ index.aspx เป็ นอันดับแรกก่อนเสมอ
HTML
7
หลักการทางานของเว็บแอปพลิเคชัน
HTML
8
รู ปแบบของ HTML
Text หมายถึง ข้อความทัว่ ๆไป
Tag หมายถึง คาสัง่ ที่ใช้ในการกาหนดรู ปแบบของ Text
โดย Tag จะอยูภ่ ายในเครื่ องหมาย < >
This is a <B> Bold </B> word
This is a Bold word
<B> </B>
HTML
คือ
คือ
Text
Tag
9
TAG
• Tag เป็ นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบ
คาสัง่ หรื อการลงรหัสคาสัง่ HTML ภายในเครื่ องหมาย less-than
bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML
แบ่งได้ 2 ลักษณะ คือ
– Tag เดี่ยว
เป็ น Tag ที่ไม่ตอ้ งมีการปิ ดรหัส เช่น <P>, <BR> เป็ นต้น
– Tag เปิ ด/ปิ ด
เป็ น Tag ที่ประกอบด้วย Tag เปิ ด และ Tag ปิ ด โดย Tag ปิ ด จะมี
เครื่ องหมาย slash ( / ) นาหน้าคาสัง่ ใน Tag นั้นๆ เช่น <B>…</B>,
<BLINK>…</BLINK> เป็ นต้น
10
This is a <B> Bold </B> word
ผลลัพธ์
This is a Bold word
HTML
11
Attributes
• Attributes เป็ นส่วนขยายความสามารถของ Tag จะต้องใส่ ภายใน
เครื่ องหมาย < > ในส่ วน Tag เปิ ดเท่านั้น
• Tag คาสัง่ HTML แต่ละคาสัง่ จะมี Attribute แตกต่างกันไป มีจานวนไม่
เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็ นตัวคัน่
เช่น Attributes ของ Tag เกี่ยวกับการจัดพารากราฟ คือ <P>
ประกอบด้วย
ALIGN="Left/Right/Center/Justify" ซึ่งสามารถเขียนได้ดงั นี้
<P ALIGN="Left">...</P>
หรื อ
<P ALIGN="Right">...</P>
หรื อ
<P ALIGN="Center">...</P>
12
กฎในการใช้ HTML
- Tag ต้องอยูใ่ นเครื องหมาย < > เท่านั้น
- Tag พิมพ์ดว้ ยตัวพิมพ์ใหญ่หรื อเล็กก็ให้ความหมาย
เดียวกัน เช่น <title> หรื อ <TITLE>
- Tag ส่ วนใหญ่จะมี Tag เปิ ด และ Tag ปิ ด เช่น
<TITLE> </TITLE>
- บาง Tag ไม่มี Tag ปิ ด เช่น <BR> <P>
- จะพิมพ์ Text และ Tag ติดต่อกัน หรื อ เคาะช่องว่าง หรื อ
แยกบรรทัดกันก็ได้
HTML
13
- Attributes เป็ นส่ วนขยายความสามารถของ Tag
• อยูภ่ ายในเครื่ องหมาย < > ในส่ วน Tag เปิ ดเท่านั้น
• Tag แต่ละคาสัง่ จะมี Attribute แตกต่างกันไป
• ใช้ช่องว่างคัน่ ในการระบุ Attribute มากกว่า 1 Attribute
เช่น Attributes ของ Tag เกี่ยวกับการจัดรู ปแบบอักษร คือ
<FONT SIZE= "size"> text </FONT>
<FONT SIZE= “5"> Hello </FONT>
กาหนดให้ขอ้ ความ Hello มีขนาด 5
HTML
14
โครงสร้ างเว็บเพจ HTML
<HTML>
<HEAD>
ระบุเป็ น
เอกสาร
HTML
ส่ วนหัว ชื่อเรื่อง
เอกสาร
<TITLE>
</TITLE>
<META NAME="" CONTENT="">
อธิบาย
เว็บเพจ
</HEAD>
ขอบเขต
เนือ้ หา
HTML
<BODY>
</BODY>
</HTML>
15
<HEAD>..........</HEAD>
ระบุส่วนหัวของโปรแกรม ประกอบด้วย
<TITLE> … </TITLE>
<META>
<TITLE> title </ TITLE>
title : ชื่อเรื่ องของเว็บเพจ
ชื่อเรื่ องของเว็บเพจ HTML ซึ่งข้อความภายในคาสัง่ จะแสดงผล
ในส่ วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บเบราเซอร์
HTML
16
<META NAME= " name" CONTENT = "content" >
name : ชื่อหัวข้อที่จะอธิบาย
content : คาอธิบาย
ไม่ปรากฏผลบนเบราเซอร์ ใช้สาหรับระบุคาอธิบาย
เป็ นส่ วนสาคัญ ในการทาคลังบัญชีเว็บ
สาหรับผูใ้ ห้บริ การสื บค้นเว็บ (Search Engine)
สาคัญมาก หากเราต้องการให้เว็บของเราสามารถสื บค้นผ่าน
ผูใ้ ห้บริ การสื บค้นเว็บ (Search Engine) เช่น google, yahoo, ask
HTML
17
- META DATA
ใช้ใส่ คาอธิบายของหน้าเว็บหรื อของบทความนั้น ๆ โดยเฉพาะ และกาหนด
คาค้นหาสาหรับบทความนั้น ใส่ meta tag สาหรับ robots ใส่ ชื่อผูเ้ ขียนลงใน
meta tag ของหน้าเว็บเพจนั้น ๆ โดยเฉพาะ ทาให้สะดวกแก่การทา seo
Description เป็ นชื่อบทความหรื ออาจจะแต่งเองให้ส้ นั ๆ แต่ได้ใจความ
<meta name="description" content="................................" />
Keywords คาค้นหา ใส่เท่าที่จาเป็ น ไม่มาก ไม่ยาวเกินไป หากมีหลายคาให้ข้นั ด้วยจุดลูกน้ า ( , )
<meta name=“keywords" content="................................" />
HTML
18
- META DATA (ต่ อ)
Robots เป็ นตัวกาหนดไม่ให้ robots ทาหรื อไม่ทาอะไร
<meta name=“robots" content="................................" />
พารามิเตอร์ ทีก่ าหนดภายในส่ วนของ content
NOINDEX, FOLLOW
INDEX, NOFOLLOW
NOINDEX, NOFOLLOW
INDEX, FOLLOW
ห้ามเก็บข้อมูลในหน้านี้แต่สามารถไต่ลิ้งก์ไปได้
เก็บข้อมูลในหน้านี้ได้ แต่หา้ มไต่ลิ้งก์ภายในหน้านี้ต่อไป
ห้ามเก็บข้อมูล ห้ามไต่ลิ้งก์ต่อไป
เก็บข้อมูลและไต่ลิ้งก์ต่อไปได้
Author เป็ นการใส่ ชื่อผูเ้ ขียนบทความใน meta tag ของหน้านั้น
<meta name=“author" content="................................" />
Meta data สาหรับการให้ เว็บแสดงผลในรู ปแบบภาษาไทย
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML
19
ตัวอย่ างการเขียน META DATA
<HTML>
<HEAD>
<TITLE>การเขียนเว็บ</TITLE>
<META NAME="Author" CONTENT="Kasem K.">
<META NAME="Keywords" CONTENT="โปรแกรม,เว็บ,HTML">
<META NAME="Description" CONTENT="สอนการเรียนเว็บ จู๊บ ๆ ">
<META NAME=“Robots" CONTENT=“INDEX, FOLLOW ">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY bgcolor="black" text="white">
Hello World ! <BR>
สวัสดีโลกเบีย้ ว
</BODY>
</HTML>
HTML
20
<BODY>…… </BODY>
ส่ วนเนื้อหาของเว็บเพจ
ประกอบด้วย เนื้อหาในหน้าเว็บเพจ และ Tag สาหรับการแสดงผล
ตัวอย่ าง การกาหนดให้หน้าเว็บเพจมี background เป็ นสี ดา ตัวอักษรสี ขาว
<body bgcolor="black" text="white">
Hello World ! <BR>
สวัสดีโลกเบีย้ ว
</body>
HTML
21
ตัวอย่าง 01_FirstPage01.html
<HTML>
<HEAD>
</HEAD>
<BODY>
Hello My HTML First Page.
</BODY>
</HTML>
HTML
22
ตัวอย่าง 01_FirstPage01.html
HTML
23
ตัวอย่าง 01_FirstPage02.html
<HTML><HEAD></HEAD><BODY>Hello
My HTML First Page.</BODY></HTML>
HTML
24
ตัวอย่าง 01_FirstPage02.html
HTML
25
ตัวอย่าง 01_FirstPage03.html
<HTML>
<HEAD>
<TITLE>This is my title</TITLE>
<META name="description" content="Everything you wanted to know about
stamps, from prices to history.">
<META name="keywords" content="stamps, stamp collecting,stamp history,
prices,stamps for sale">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY>
Hello My HTML First Page.
</BODY>
</HTML>
HTML
26
ตัวอย่าง 01_FirstPage03.html
HTML
27
งานส่ ง - http://bsรหัสนิสิต.xp3.biz/myprofile.html
-สร้างเว็บเพจชื่อ D2 -> myprofile.html (พิมพ์ตวั เล็กทั้งหมด) ซึ่ง
เป็ นเว็บเพจแนะนาตัวนิสิต (D1 -> myinfo.html)
-ให้ระบุรายละเอียดของเว็บเพจไว้ที่ tag <TITLE> และ <META>
<TITLE> ชื่อ-สกุล </TITLE>
<META NAME=”description" CONTENTT = "Everything
about ใส่ ชื่อนิสิต.“/>
<META NAME="keywords“ CONTENT=“ใส่ ชื่อ,ใส่ นามสกุล
,ใส่ สิ่งที่ตวั เองสนใจ“/>
<META http-equiv="Content-Type" content="text/html;
charset=tis-620" />
HTML
28