HTML

Download Report

Transcript HTML 

HTML [#1]
HyperText Markup Language
อ. นัฐพงศ์ ส่ งเนียม
http://www.siam2dev.com
[email protected]
ม. ราชภัฏพระนคร
1
ความหมายของ HTML




HTMLหรื อ HyperText Markup Language เป็ นภาษาคอมพิวเตอร์ รูปแบบ
หนึ่ ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกากับ (Tag) ควบคุมการแสดงผล
ข้อความ, รู ปภาพ หรื อวัตถุอื่นๆ ผ่านโปรแกรมเบราเซอร์
แต่ละ Tag อาจจะมีส่วนขยายที่เรี ยกว่า Attribute สาหรั บระบุ หรื อควบคุ ม
การแสดงผล ของเว็บได้ดว้ ย
HTML เป็ นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จาก
แม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัด
ความสามารถบางส่ วนออกไป
เพื่อให้สามารถทาความเข้าใจและเรี ยนรู ้ได้ง่าย และด้วยประเด็นดังกล่าว ทา
ให้บริ การ WWW เติบโตขยายตัวอย่างกว้างขวางตามไปด้วย Tag
2
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> เป็ นต้น
3
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>
4
โครงสร้างเอกสาร HTML


ไฟล์เอกสาร HTML ประกอบด้วยส่ วนประกอบสองส่ วนคือ Head กับ Body โดยสามารถ
เปรี ยบเทียบได้ง่ายๆ ก็คือ ส่ วน Head จะคล้ายกับส่ วนที่เป็ น Header ของหน้าเอกสารทัว่ ไป หรื อ
บรรทัด Title ของหน้าต่างการทางานในระบบ Windows
สาหรับส่ วน Body จะเป็ นส่ วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่ วนจะอยูภ่ ายใน Tag
<HTML>…</HTML>
5
ส่ วนหัวเรื่ องเอกสารเว็บ (Head Section)
Head Section เป็ นส่ วนทีใ่ ช้ อธิบายเกีย
่ วกับข้ อมูลเฉพาะของหน้ า
เว็บนั้นๆ เช่ น ชื่อเรื่องของหน้ าเว็บ (Title), ชื่อผู้จดั ทาเว็บ (Author),
คีย์เวิร์ดสาหรับการค้ นหา (Keyword) โดยมี Tag สาคัญ คือ
<HEAD>
<TITLE>ข้อความอธิบายชือ
่ เรือ
่ ง</TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=TIS-620">
<META NAME="Author" CONTENT="ชือ
่
ผูพ
้ ฒ
ั นาเว็บ">
<META NAME="KeyWords"
CONTENT="ข้อความ 1, ข้อความ 2, …">
</HEAD>
6




ข้อความที่ใช้เป็ น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ตอ้ งใส่ ลกั ษณะพิเศษ เช่น ตัวหนา,
เอียง หรื อสี และควรใช้เฉพาะภาษาอังกฤษที่มีความหมายครอบคลุมถึงเนื้อหาของเอกสารเว็บ
หรื อมีลกั ษณะเป็ นคาสาคัญในการค้นหา (Keyword)
การแสดงผลจาก Tag TITLE บนเบราเซอร์จะปรากฏข้อความที่กากับด้วย Tag TITLE ในส่ วน
บนสุ ดของกรอบหน้าต่าง (ใน Title Bar ของ Window นัน่ เอง)
Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็ นส่ วนสาคัญ ในการทาคลังบัญชีเว็บ
สาหรับผูใ้ ห้บริ การสื บค้นเว็บ (Search Engine) และค่าอื่นๆ ของการแปลความหมาย
การพิมพ์ชุดคาสัง่ HTML สามารถพิมพ์ได้ท้ งั ตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรื อผสม การย่อหน้า
เว้นบรรทัด หรื อช่องว่าง สามารถกระทาได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับ
ระยะเว้นบรรทัดหรื อย่อหน้า หรื อช่องว่าง
7
ส่ วนเนือ้ หาเอกสารเว็บ (Body Section)


Body Section เป็ นส่ วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้
Tag จานวนมาก ขึ้นอยูก่ บั ลักษณะของข้อมูล เช่น ข้อความ, รู ปภาพ, เสี ยง,
วีดิโอ หรื อไฟล์ต่างๆ
ส่ วนเนื้อหาเอกสารเว็บ เป็ นส่ วนการทางานหลักของหน้าเว็บ
ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ตอ้ งการ
นาเสนอ การป้ อนคาสัง่ ในส่ วนนี้ ไม่มีขอ้ จากัดสามารถป้ อนติดกัน
หรื อ 1 บรรทัดต่อ 1 คาสัง่ ก็ได้ แต่มกั จะยึดรู ปแบบที่อ่านง่าย คือ การ
ทาย่อหน้าในชุดคาสัง่ ที่เกี่ยวข้องกัน
8
ส่ วนเนือ้ หาเอกสารเว็บ (Body Section) ต่ อ..

ทั้งนี้ให้ป้อนคาสัง่ ทั้งหมดภายใต้ Tag <BODY> … </BODY> และแบ่งกลุ่ม
คาสัง่ ได้ดงั นี้








กลุ่มคาสัง่ เกี่ยวกับการจัดการพารากราฟ
กลุ่มคาสัง่ จัดแต่ง/ควบคุมรู ปแบบตัวอักษร
กลุ่มคาสัง่ การทาเอกสารแบบรายการ (List)
กลุ่มคาสัง่ เกี่ยวกับการทาลิงค์
กลุ่มคาสัง่ จัดการรู ปภาพ
กลุ่มคาสัง่ จัดการตาราง (Table)
กลุ่มคาสัง่ ควบคุมเฟรม
กลุ่มคาสัง่ อื่นๆ
9
เริ่มสร้ างเว็บเพจด้ วย NotePad
เปิ ดโปรแกรม NotePad <Start, Progra, Accessories, NotePad>

<HTML>
<HEAD>
<TITLE>...............</TITLE>
</HEAD>
<BODY>
...............
...............
</BODY>
</HTML>
10
คาสัง่ ในการเริ่ มต้นในการสร้างเว็บเพจ


คาสัง่ เริ่ มต้น
<HTML>..........</HTML>


คาสัง่ <HTML> เป็ นคาสัง่ เริ่ มต้นในการเขียนโปรแกรมและคาสัง่
</HTML> เป็ นการสิ้ นสุ ดโปรแกรม HTML
คาสัง่ นี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ตอ้ งเขียนเพื่อให้เกิดความเป็ น
ระบบของงาน และเพื่อจะให้รู้วา่ เอกสารนี้เป็ นเอกสารของภาษา HTML
11
ส่ วนหัวของโปรแกรม

<HEAD>..........</HEAD>

คาสัง่ <HEAD> เป็ นคาสัง่ ที่ใช้กาหนดข้อความในส่ วนที่เป็ นชื่อเรื่ องของไฟล์
HTML และภายในคาสัง่ <HEAD>...</HEAD> จะมีคาสัง่ ย่อยอีก
คาสัง่ หนึ่งคือ <TITLE>........</TITLE>
12
กาหนดข้อความในส่ วนหัวของโปรแกรมหรื อไตเติลบาร์

<TITLE>..........</TITLE >

คาสัง่ <TITLE> เป็ นคาสัง่ ที่แสดงชื่อของเอกสาร หรื อชื่อเรื่ องของไฟล์
HTML ซึ่งข้อความภายในคาสัง่ จะปรากฎหรื อแสดงผลในส่ วนของไตเติลบาร์
(Title Bar) ของโปรแกรมเว็บเบราเซอร์ แต่จะไม่แสดงในส่ วนของการ
แสดงผลในโปรแกรมเว็บเบราเซอร์
13
ส่ วนเนื้อหาของโปรแกรม

<BODY>..........</BODY>คาสัง่ นี้เป็ นส่ วนที่สาคัญในการ
แสดงผลในเว็บเบราเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รู ปภาพกราฟิ ก
ต่างๆ
14
การกาหนดสี ของพืน้ หลังของตัวอักษร
จะทาการเขียนในส่ วนของคาสั่ง <BODY> โดยเราจะใช้แอตทริ บิวต์มาเป็ นตัวกาหนด
การกาหนดสี ของพืน้ หลัง - การกาหนดสี พ้นื หลังนั้น เราสามารถมีรูปแบบการกาหนด
สี พ้นื หลังได้อยู่ 2 รู ปแบบ ระบุชื่อของสี ที่ตอ้ งการ อาทิเช่น red, green, yellow, blue
เป็ นต้น

<HTML>
<HEAD>
<TITLE>การกาหนดสี พ้นื หลังโดยการกาหนดสี </TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
การกาหนดสี พ้นื หลังโดยการกาหนดสี
</BODY>
</HTML>
15
การกาหนดสี ของพืน้ หลังของตัวอักษร แบบที่ 2
การระบุแบบตัวเลขโดยจะใช้ค่าสี ในระบบฐาน 16 หรื อเรี ยกว่าหลักการผสมสี แบบ
RBG

<HTML>
<HEAD>
<TITLE>การกาหนดสี พ้นื หลังโดยการกาหนดสี </TITLE>
</HEAD>
<BODY BGCOLOR="#FF66FF">
การกาหนดสี พ้นื หลังโดยใช้หลัก "#RBG"
</BODY>
</HTML>
16
ตัวอย่างค่าสี ในระบบเลขฐาน 16
RGB (Red Green Blue)
FF0000 คือ สีแดง
17
การกาหนดสี ของตัวอักษร
รู ปแบบ ::

<BODY TEXT="#RGB หรื อ กาหนดชื่อสี ที่ตอ้ งการ">
<HTML>
<HEAD>
<TITLE>การกาหนดสี ตวั อักษร</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" text="blue" >
การกาหนดสี ตวั อักษร
</BODY>
</HTML>
18
การกาหนดสี ของตัวอักษร
การระบุแบบตัวเลขโดยจะใช้ค่าสี ในระบบฐาน 16 หรื อเรี ยกว่าหลักการผสมสี แบบ
RBG

<HTML>
<HEAD>
<TITLE>การกาหนดสี ตวั อักษร</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" text="#FF0066" >
การกาหนดสี ตวั อักษร
</BODY>
</HTML>
19
ข้ อความลักษณะหัวเรื่อง (Heading)
รู ปแบบ :: <Hn>....Heading Text ... </Hn>

<HTML>
<HEAD>
<TITLE>การกาหนด Heading</TITLE>
</HEAD>
<BODY>
Computer - Default Size
<H1>Computer - H1</H1>
<H2>Computer - H2</H2>
<H3>Computer - H3</H3>
<H4>Computer - H4</H4>
<H5>Computer - H5</H5>
<H6>Computer - H6</H6>
</BODY>
</HTML>
ค่ าของ n นั้นเป็ นตัวเลข 1 - 6
n = 1 ขนาดใหญ่ สุด
n = 6 ขนาดเล็กสุ ด
20


หมายเหตุ ปัจจุบนั การพัฒนาเว็บไซต์มกั จะกาหนดขนาดของตัวอักษร (Font
size) ให้มีขนาดคงที่ เช่น 1 หรื อ 14-16 Point
เพื่อให้แสดงผลได้สวยงาม ได้สดั ส่ วนเดียวกัน จึงไม่นิยมใช้แท็ก <Hn>
ควบคุม แต่จะเปลี่ยนไปใช้ในลักษณะการมาร์ค (Mark) เพื่อควบคุมกับ
โปรแกรมมิ่ง เช่น XML หรื อ CSS แทน
21
การตกแต่งข้อความ

แท็กที่ใช้ตกแต่งข้อความเพื่อเน้นคา หรื อข้อความสั้นๆ หรื อให้ดูสวยงาม
มาตรฐาน HTML 4.0 มีแท็กสาหรับใช้ตกแต่งข้อความมากมาย ทาได้แทบจะ
ครบทุกรู ปแบบ และสามารถแบ่งออกเป็ น 2 กลุ่มใหญ่ คือ


Logical Format - เป็ นแท็กที่มีชื่อที่สื่อความหมาย ซึ่งเบราเซอร์แต่ละยีห่ อ้ จะแปล
แท็กเหล่ านีต้ ่ างกัน
Fixical Format - แท็กที่กาหนดลักษณะตายตัว ทุกเบราเซอร์จะแปลความหมายแท็ก
เหล่านี้เหมือนกันหมด
22
การกาหนดตัวอักษรให้มีความหนา,ขีดเส้นใต้, การเอน
รูปแบบ :: <B>..........</B>, <U>..........</U> , <I>..........</I>

<HTML>
<HEAD>
<TITLE>การกาหนดตัว….</TITLE>
</HEAD>
<BODY>
ตัวอักษรปรกติ COMPUTER
ตัวอักษรหนา <B>COMPUTER</B>
หมายเหตุ แท็ก U ไม่นิยม
ใช้เนื่องจากอาจก่อให้เกิด
ความสับสนกับข้อความที่
เป็ นจุดลิงก์ได้
ตัวอักษรที่ขีดเส้ นใต้ <U>COMPUTER</U>
ตัวอักษรเอน <i>COMPUTER</i>
</BODY>
</HTML>
23
การกาหนดตัวอักษรกระพริบ
รู ปแบบ:: <BLINK>..........</BLINK>

<HTML>
<HEAD>
<TITLE>การกาหนดตัวอักษรกระพริ บ</TITLE>
</HEAD>
<BODY text="red">
หมายเหตุ ในการกาหนด
<Blink>COMPUTER</Blink>
แสดงผลได้เฉพาะบน Netscape
ตัวอักษรกระพริ บนั้น เราไม่
</BODY>
สามารถเปิ ดในโปรแกรม
</HTML>
เว็บเบราเซอร์ที่เป็ น Internet
Explorer ได้
24
การกาหนดรู ปแบบของตัวอักษร
รู ปแบบ :: <FONT FACE="font name หรื อ typeface">..........</FONT>
<HTML>
•ฟอนต์สาหรับข้อความภาษาไทย/
<HEAD>
อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif,
<TITLE>FONT FACE </TITLE>
Microsoft Sans Serif, Thonburi
</HEAD>
•ฟอนต์สาหรับข้อความภาษาอังกฤษที่
<BODY>
เหมาะสม คือ Arial, Helvetica, sans-serif
ชนิดของฟอนต์ปกติ<BR>
<FONT FACE="MS Sans Serif">ฟอนต์ชื่อ MS Sans Serif</Font>
</BODY>
</HTML>
25
การกาหนดสี ของตัวอักษร , ขนาด
<FONT COLOR="#RGB หรื อ กาหนดชื่อสี ที่ตอ้ งการ">..........</FONT>
<FONT SIZE="ค่ากาหนดขนาดของตัวอักษร">..........</FONT>

<HTML>
<HEAD>
<TITLE>FONT COLOR </TITLE>
</HEAD>
<BODY text="yellow">
Computer
<FONT COLOR=“Red” >Computer</FONT>
Computer
</BODY>
</HTML>
26
การกาหนดขนาดของตัวอักษร
<FONT SIZE="ค่ากาหนดขนาดของตัวอักษร">..........</FONT>

<HTML>
<HEAD>
<TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY text="Red">
<FONT SIZE="1">Computer</Font>
<FONT SIZE="2">Computer</Font>
<FONT SIZE="3">Computer</Font>
<FONT SIZE="4">Computer</Font>
<FONT SIZE="5">Computer</Font>
<FONT SIZE="6">Computer</Font>
<FONT SIZE="7">Computer</Font>
</BODY>
</HTML>
กาหนดเป็ นตัวเลขซึ่ ง
จะมีค่า 1 - 7 โดยค่า
มาตรฐานจะมีค่าจะอยู่
ที่ 3
27
การกาหนดตัวอักษรเคลือ่ นที่
รูปแบบ <MARQUEE>..........</MARQUEE>
คาสัง่ < MARQUEE > นั้นจะกาหนดการเคลื่อนที่ของตัวอักษร โดยปกติการเคลื่อนที่ของตัวอักษร
นั้นจะเคลื่อนที่จากขวามาซ้าย คาสัง่ นี้สามารถแสดงผลได้อย่างถูกต้องเมื่อใช้เบราเซอร์ Internet
Explorer เท่านั้น
หมายเหตุ ใช้ Attribute
<HTML>
direction เพื่อควบคุมทิศทาง
<HEAD>
โดยมี left,right,up,down
<TITLE>MARQUEE</TITLE>
</HEAD>
<BODY>
<Marquee><FONT SIZE="4" color="green">
Computer</Font></Marquee>
</BODY>
</HTML>
เช่น direction ="right"
28
คาสัง่ ลดขนาดตัวอักษรลง 1 ระดับ
รู ปแบบ <SMALL>..........</SMALL>
คาสัง่ < SMALL > เป็ นคาสัง่ ที่สามารถลดขนาดของตัวอักษรลง 1 ระดับจาก
ขนาดของอักษรปั จจุบนั ได้ทนั ที โดยไม่ตอ้ งไประบุดว้ ยคาสั่ง < font size >

<HTML>
<HEAD>
<TITLE>SMALL </TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" color="green" >Computer</Font>
<Small>Computer</Small>
<FONT SIZE="4" color="green">Computer</Font>
</BODY>
</HTML>
29
คาสัง่ เพิ่มขนาดของตัวอักษร 1 ระดับ
รู ปแบบ <BIG>..........</BIG>
คาสั่ง <BIG> เป็ นคาสั่งที่สามารถเพิ่มขนาดของตัวอักษรขึ้น 1 ระดับจาก
ตัวอักษรปั จจุบนั ได้ทนั ที โดยไม่ตอ้ งใช้คาสั่ง <font size>

<HTML>
<HEAD>
<TITLE>BIG </TITLE>
</HEAD>
<BODY>
<FONT SIZE="2" color="green" >Computer</Font>
<Big>Computer</Big>
<FONT SIZE="2" color="green">Computer</Font>
</BODY>
</HTML>
30
คาสัง่ ที่กาหนดตัวอักษรยกระดับ
รูปแบบ <SUP>..........</SUP>
คาสั่ ง < SUP > ย่ อมาจาก (superscript) เป็ นคาสั่ งทีจ่ ะกาหนดให้ ตัวอักษร
หรือข้ อความยกระดับสู งขึน้ กว่ าระดับปกติและมีขนาดเล็ก

<HTML>
<HEAD>
<TITLE>SUPERSCRIPT</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" color="green" >Computer</Font>
A<Sup>2</Sup> =4
<FONT SIZE="4" color="green">Computer</Font>
</BODY>
</HTML>
31
คาสัง่ ที่กาหนดตัวอักษรพ่วงท้าย (ตัวห้อย)
รู ปแบบ <SUB>..........</SUB>

คาสั่ ง < SUB > ย่ อมาจาก (subscript) เป็ นคาสั่ งที่จะกาหนดให้ ตัวอักษร
หรือข้ อความพ่วงท้ ายจะมีลกั ษณะต่ากว่ าระดับปกติและมีขนาดเล็ก
<HTML>
<HEAD>
<TITLE>SUBSCRIPT</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" color="green" >Computer</Font>
H<Sub>2</Sub>0 = Water
<FONT SIZE="4" color="green">Computer</Font>
</BODY>
</HTML>
32