งานนำเสนอเรื่อง: "การสร้างเอกสารเว็บเพจ"— ใบสำเนางานนำเสนอ: 1 การสร้างเอกสารเว็บเพจ 2
การสร้างเอกสารเว็บเพจ 3 ส่วนประกอบของ webpage
4 ส่วนประกอบของ Homepage
5 องค์ประกอบของเอกสาร HTML
6 HTML Tag HTML Tag ประกอบด้วยเครื่องหมาย < (Left angle bracket) ตามด้วยชื่อ Tag และ > (Right angle bracket ) เช่น head tag : <HEAD> title tag : <TITLE> body tag : <BODY> ชื่อ tag ที่เขียนอยู่ในเครื่องหมาย <>
นี้จะเขียนเป็นตัวใหญ่หรือตัวเล็กก็ได้แต่นิยมเขียนตัวใหญ่เพื่อให้เห็นความแตกต่าง 7 ชนิดของ HTML Tag มี 2 ชนิด tag คู่(Paired tag) tag เดี่ยว (Single tag)
8 Tag คู่ (Paired Tag) tag คู่(Paired tag) ใส่ tag เปิดไว้หน้าข้อความ และใส่ tag ปิด(ลักษณะเหมือน tag เปิดแต่มีเครื่องหมาย / นำหน้า) ไว้หลังข้อความ <Tag name> ข้อความ</Tag name> เช่น <HTML> ………</HTML> <HEAD> ………</HEAD>
<BODY> ……….</BODY> 9 Tag เดี่ยว (Single Tag) 10 โครงสร้างพื้นฐานของ HTML 11
คำสั่งพื้นฐานของ HTML
12 คำสั่งพื้นฐานของ HTML 13 ตัวอย่าง <HTML> <HEAD> 14 กฎในการเขียนคำสั่ง HTML
15 คำสั่งอธิบายโปรแกรม แทรกคำอธิบายโปรแกรม หรือหมายเหตุลงในโปรแกรมโดยใช้
16 การจัดข้อความในเอกสาร HTML 17
คำสั่งขึ้นบรรทัดใหม่ (Line Break)
18 คำสั่งขึ้นย่อหน้าใหม่ (Paragraph Break)
19 คำสั่งขึ้นย่อหน้าใหม่ (2)
20 คำสั่งกำหนดบล็อคข้อความ
21 คำสั่งจัดรูปแบบข้อความให้ตรงตามเอกสารเดิม(Preformatted)
22
คำสั่งจัดข้อความให้อยู่ตรงกลางบรรทัด(Center)
23 การตีเส้นตรงแนวนอนในเอกสาร HTML
24 การกำหนดลักษณะของเส้นตรงแนวนอน
25 ตัวอย่างการกำหนดเส้นตรงแนวนอน
26 การกำหนดหัวเรื่อง(Heading)
27 การกำหนดรูปแบบตัวอักษร 28 Physical Character style 29
Logical Character Style 30 Logical Character Style 31
การจัดวางตำแหน่งข้อความ
32 การกำหนดขนาดของตัวอักษร (Size)
33 การกำหนดขนาดของตัวอักษร (2)
34 การกำหนดแบบตัวอักษร หากต้องการให้โปรแกรม Browserแสดงแบบตัวอักษรหลายแบบใน Web page เดียวกันจะต้องใช้ tag สำหรับกำหนด Font ซึ่งมีรูปแบบดังนี้ <FONT FACE = “ name1”, ” name2”,…> ตัวอย่าง <FONT FACE = “AngsanaUPC”> มหาวิทยาลัยบูรพา </FONT>
<FONT FACE = “CordialUPC”> มหาวิทยาลัยบูรพา </FONT> <FONT FACE = “DilleniaUPC”> มหาวิทยาลัยบูรพา </FONT> <FONT SIZE = 2 FACE = “Courier”> Burapha University </FONT> <BR>
35 การกำหนดสีให้ตัวอักษร(Color) 36
ความหมายของตัวเลขและการผสมสี
37 ตารางตัวอย่างรหัสสี สี รหัสสี ขาว #FFFFFF น้ำเงิน #0000FF ดำ #000000
38
การกำหนดสีให้กับตัวอักษรเฉพาะข้อความ 39
การกำหนดสีให้กับตัวอักษรทั้งเอกสาร
40 การใช้ตัวอักษรพิเศษ (Special Character)
41 1. ระบุชื่อสัญลักษณ์ที่ต้องการ
42 2. ระบุโดยใช้รหัส ASCII เริ่มต้นด้วยเครื่องหมาย & แล้วตามด้วยเครื่องหมาย # และค่าของตัวเลขรหัส ASCII ตัวอย่าง Symbol of Copyright is :© <BR> Symbol of Registration is :® <BR>
43 การแสดงผลแบบรายการ (List) ด้วยภาษา HTML
44 การแสดงผลแบบรายการ (LIST)
45 การแสดงผลรายการแบบลำดับตัวเลข(orderer
Lists)
46 การแสดงผลรายการแบบลำดับตัวเลข(orderer
Lists) 47 ตัวอย่าง <OL TYPE = a> <LI> Oranges </LI> 48 ตัวอย่าง
<OL TYPE = I> <LI> Oranges </LI> 49 ตัวอย่าง <OL START = 3> <LI> Oranges </LI>
50 การแสดงผลรายการแบบไม่มีลำดับ(Unordered
List)
51 ตัวอย่าง These are name of CS Staff <UL>
52 Directory Lists เป็นการแสดงผลข้อมูลเหมือนกับ <UL>,</UL> แต่จะถูกจำกัดด้วยตัวอักษรไม่เกิน 24 ตัว มีรูปแบบดังนี้ <DIR> <LI> message </LI> <LI> massage </LI> </DIR>
53 Menu Lists แสดงรายการต่างๆแบบไม่มีตัวเลข แต่มีหัวข้อเป็นสัญลักษณ์ (Bullet) แต่การแสดงผลข้อมูลจะกะทัดรัดกว่าการใช้ tag <UL> มีรูปแบบดังนี้ <MENU> <LI> message <LI> massage </MENU>
54 NESTED LISTS <UL> <LI> few New England states: 55 การจัดการรูปภาพ ด้วยภาษา HTML
56 การจัดการกับรูปภาพ รูปภาพที่สามารถนำมาใช้ในเอกสาร HTML มี 2 ชนิด คือ
57 GIF Format GIF (Graphic Interchange From) พัฒนาโดย CompuServe 58 JPEG Format JPEG (JPG) -Joint Protographic Expert Group 59
การแทรกภาพลงในเอกสาร
60 การใส่ข้อความแสดงผลแแบบ Text
61 การวางตำแหน่งรูปภาพ HTML กำหนดการวางรูปภาพเพื่อแสดงผลได้ 2 แบบคือ 62 การใส่ภาพลงใน WEBกึ่งกลางจอภาพ
63 การปรับขนาดภาพ การปรับขนาดของภาพให้ใหญ่หรือเล็กตามสัดส่วน
64 การแสดงกรอบรูปภาพและระยะห่าง
65 การใส่ภาพลงใน WEB การใส่ภาพที่มีขนาดเท่ากันซ้อนกัน โดยภาพแรกจะเกิดชั่วขณะแล้วภาพที่สองจะปรากฏ ใช้แอตทริบิวต์ LOWSRC=“รูปภาพ“ ตัวอย่าง <IMG SRC=“rock.gif” LOWSRC=“rock.gif”
66 การสร้างภาพเคลื่อนไหว
67 การสร้างจุดเชื่อมโยง (Link) ด้วยภาษา HTML 68 การเชื่อมโยงเอกสาร(Link) 69
การเชื่อมโยงกับข้อความ(Text Link)
70 การเชื่อมโยงข้อมูลภายในแฟ้มเอกสารเดียวกัน
71
การเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร
72 การเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร
73
การกำหนดสีให้กับข้อความที่มีการเชื่อมโยง 74 ตัวอย่าง <BODY BGCOLOR=“#000000” TEXT=“#F0F0F0”
75 การใช้ภาพเป็นจุดเชื่อมโยง 76 ตัวอย่าง <HTML>
77 การใช้ mailto เป็นโปรโตคอลที่ใช้สำหรับการสื่อสารข้อมูลแบบจดหมายอีเล็กทรอนิกส์ รูปแบบ <A ตัวอย่าง Address your comment or suggestions at <A </A>
78 การกำหนดลวดลายให้กับ Background
79 การสร้างตาราง (Table) ด้วยภาษา HTML
80 การสร้างตาราง Table ประกอบด้วยแถว (row) และคอลัมน์ (col) จุดตัดของเรียกว่า cell ซึ่งใช้บรรจุข้อมูล คำสั่งที่ใช้สร้างตาราง <TABLE>...</TABLE> สำหรับใช้เริ่มต้นการสร้าง และจบการสร้างตาราง โดยจะไม่มี เส้นแบ่ง cell <TABLE BORDER=n>… </TABLE>
สำหรับใช้เริ่มต้นการสร้างและจบการสร้างตาราง โดยจะมี เส้นแบ่ง Cell แสดงให้เห็น <TR>...</TR> ใช้กำหนดแถวของตาราง (Table Row)
81 คำสั่งสร้างตาราง </TD>...</TD> กำหนดส่วนของข้อมูลลง cell (Table Data) โดยข้อมูลจะอยู่ระหว่าง คำสั่ง <TD>และ</TD> <TH>...</TH> ใช้เหมือน tag <TD>...</TD> แต่ตัวอักษรที่ได้จะเป็นตัวเข้ม มักใช้เป็นหัวตาราง(Table Heading) <CAPTION>
ใช้เขียนข้อความอธิบายตาราง โดยเขียนให้อยู่ด้านบนหรือด้านล่างของตารางก็ได้ <CAPTION ALIGN=TOP | BOTTOM> ถ้าไม่กำหนดจะเป็นการกำหนดให้คำอธิบายอยู่ด้านบนของตาราง 82 tag <TABLE> <TABLE>
83 การตีกรอบตาราง คำสั่ง <TABLE>...</TABLE> เป็นการสร้างตารางที่ไม่มีเส้น การกำหนดเส้นในตารางใช้ แอตทริบิวต์ BORDER กำหนดลงในคำสั่ง <TABLE> ดังนี้ <TABLE BORDER= ความหนา> ……. </TABLE>
84 ตัวอย่าง <HTML>
85 การปรับขนาดความกว้างของตาราง 86
การปรับขนาดความสุงของตาราง
87 การจัดตำแหน่งของข้อมูลใน cell
88 ROWSPAN แอตทริบิวต์ ROWSPAN ใช้กำหนดความสูงเป็นจำนวนเท่าของแถวปกติ ใช้กับ tag <TD> ตัวอย่าง <TABLE BORDER> <TR> <TD>Item1</TD> <TD ROWSPAN=2>Item2</TD> <TD>Item3</TD> </TR> <TR> <TD>Item4</TD>
<TD >Item5</TD> </TR> </TABLE>
89 COLSPAN แอตทริบิวต์ COLSPAN ใช้ปรับขนาดของความกว้างคอลัมน์ในตารางให้มีขนาดเป็นจำนวนเท่าของของขนาดความกว้างปกติ ใน tag <TD> ตัวอย่าง <TABLE BORDER> <TR> <TD>Item1</TD> <TD COLPAN=2>Item2</TD> </TR> <TR>
<TD>Item3</TD> <TD>Item4</TD> <TD >Item5</TD> </TR> </TABLE>
90 CELLPADDING แอตทริบิวต์ CELLPADDING ใช้กำหนดพื้นที่การแสดงข้อมูล ภายในตาราง ปกติจะกำหนดค่า cellpadding เป็น 0 ซึ่งพื้นที่ในการแสดงข้อมูลในตารางเท่ากับจำนวนตัวอักษรที่แสดงเท่านั้น ถ้ากำหนดให้มีค่ามากจะมีพื้นที่เป็นที่ว่างมากขึ้น
91 CELLSPACING
แอตทริบิวต์ CELLSPACING ใช้กำหนดขนาดเส้นตาราง
92 การใส่ภาพลงในตาราง ให้บรรจุคำสั่งอ่านภาพ คือ
93 การสร้างเฟรม (Frame) ด้วยภาษา HTML
94 กำหนดขนาดของเฟรม ใช้ attributes 2 ตัวคือ ROWS และ
COLS
95 คำสั่งกำหนดเฟรม Lists เป็นชุดค่าตัวเลขที่ใช้กำหนดขนาดให้กับเฟรมตามแนวนอนหรือแนวตั้ง ถ้ามีหลายค่าจะคั่นด้วยเครื่องหมายจุลภาค
96 การแบ่งจอภาพ เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนมีข้อมูลและการทำงานที่เป็นอิสระจากกัน การสร้างเฟรม มีคำสั่งที่ใช้ร่วมกันอยู่ 3 คำสั่ง ดังนี้ <FRAMESET> …</FRAMESET> กำหนดการแสดงผลแบบเฟรม <FRAME> กำหนดการแสดงเฟรมแต่ละเฟรม <NOFRAME>…</NOFRAME>
เป็นแท็กที่จะแสดงก็ต่อเมื่อ โปรแกรม Browser ไม่สนับสนุนการแสดงผลแบบเฟรม
97 สามารถสร้างเฟรมซ้อนภายใน <FRAMESET> ได้ หรืออาจจะมี แท็ก <FRAME> หรือ <NOFRAME> อยู่ภายในได้ ในเอกสาร HTML ที่มีการใช้แท็ก <FRAMESET> แล้วจะไม่มี แท็ก <BODY> ตัวอย่าง <HTML> <HEAD> <TITLE> This is frame Demo </TITLE> </HEAD>
<FRAMESET> </FRAMESET> </HTML>
98 การกำหนดขนาดของเฟรม การกำหนดค่าของ lists มีวิธีกำหนด 3 แบบคือ
99 การกำหนดขนาดของเฟรม(2) 100 การกำหนดขนาดของเฟรม(3)
101 Tag <FRAME> เป็นแท็กที่ใส่ระหว่างแท็ก <FRAMESET>…</FRAMESET> ใช้สำหรับใส่ชื่อเอกสารหรือรูปภาพไว้ในส่วนของจอภาพที่แบ่งไว้ด้วยแท็ก<FRAMESET> มีรูปแบบดังนี้ <FRAME SRC = “URL” NAME = “windows_name” MARGINWIDTH=value1 MARGINHEIGHT =
value2 SCROLLING=choice NORESIZE FRAMEBORSER=choice2 FRAMESPACING=value2> 102 Attribute ของ <FRAME> 103 Attribute ของ <FRAME>(2)
104 ตัวอย่างการแบ่งเฟรม <HTML> <HEAD>
105
ตัวอย่างการแบ่งเฟรมให้มีขนาดแน่นอน 106 การกำหนดแถบเลื่อนในเฟรม
107 ตัวอย่างการใช้แถบเลื่อนในเฟรม
108 การสร้างเฟรมซ้อน แต่ละคอลัมน์สามารถแบ่งเป็นแถวและแต่ละแถวสามารถแบ่งเป็นคอลัมน์ได้เช่นกัน ตัวอย่าง แบ่งจอภาพเป็น 2 เฟรมตามแนวดิ่งขนาด 40% และ60% โดย เฟรมแรกแบ่งตามแนวนอนเป็น 2 เฟรม โดยเฟรมแรกสูง 30% และส่วนที่เหลือสูง 70% <FRAMESET COLS = “40%, *”> ... <FRAMESET ROWS
= “30%, 70%”> </FRAMESET> 109 ตัวอย่างการสร้างเฟรมซ้อน 1
110 ตัวอย่างการสร้างเฟรมซ้อน 2
111 tag <NOFRAME>…</NOFRAME> 112
การเชื่อมโยงให้สัมพันธ์กันในเฟรม
113
การเชื่อมโยงให้สัมพันธ์กันในเฟรม(2)
114
การเชื่อมโยงให้สัมพันธ์กันในเฟรม(3) 115 ตัวอย่าง <HTML> <HEAD>
116 ตัวอย่าง แฟ้ม toc.html <HTML>
117 ตัวอย่าง แฟ้ม first.html 118 HELPING SEARCH ENGINES FIND YOUR WEBSITE
119 DESCRIPTION เป็นส่วนที่ใช้สรุปย่อถึงการอธิบายเว็บเพจ
120 ใน Infoseek จะใช้ชื่อ title ของเว็บเพจเป็นการค้นหาอันดับแรก
121 การสร้างฟอร์ม (Form) ด้วยภาษา HTML
122 การสร้างแบบฟอร์ม (Form)
123 การสร้างแบบฟอร์ม(2) ฟอร์ม (Form) ใช้ในการรับข้อมูลจากผู้ใช้ และทำงานร่วมกับโปรแกรมย่อยๆ หรือ Script ที่เรียกว่า Common Gateway Interface(CGI) CGI เป็นโปรแกรมตัวกลางที่ทำหน้าที่เชื่อมโยงข้อมูลระหว่างเครื่องคอมพิวเตอร์ของผู้ใช้กับเครื่อง Server โดย Server รวบรวมข้อมูลที่ผู้ใช้ป้อนมา
เพื่อประมวลผล เมื่อเสร็จแล้วส่งผลลัพธ์กลับไปยังผู้ใช้ 124
ตัวเลือกที่ใช้ในร่วมกับแท็ก Form
125 คำสั่ง INPUT เป็นคำสั่งรับข้อมูลในฟอร์มโดยการสร้างปุ่ม หรือตัวเช็ค หรือ ช่องกรอกข้อความ ตาม attribute ของ TYPE รูปแบบ <INPUT TYPE=ชนิดการรับข้อมูล NAME=“ชื่อตัวแปร“ [ตัวเลือกเพิ่มเติม]> TYPE ใช้บอกชนิดของข้อมูลนำเข้าประกอบด้วย TEXT, PASSWORD, CHECKBOX,
RADIO, SUBMIT, RESET ตัวเลือกเพิ่มเติมมีดังนี้ ALIGN, CHECKED, ROWS, COLS, SIZE, MAXLENGTH, SRC, VALUE 126
คำสั่ง INPUT กับแบบข้อมูลชนิด TEXT 127 คำสั่ง INPUT กับข้อมูลแบบ PASSWORD 128
ตัวอย่างการใช้ PASSWORD
129 คำสั่ง INPUT กับข้อมูลแบบ RADIO
130 ตัวอย่างการใช้ radio button
131 คำสั่ง INPUT กับแบบข้อมูลชนิด CHECKBOX
132 ตัวอย่างการใช้ checkbox
133 การสร้างปุ่มส่งข้อมูลในแบบฟอร์ม
134
การสร้างปุ่มยกเลิกข้อมูลในแบบฟอร์ม
135 การใช้ปุ่ม submit และ reset
136 TEXTAREA เป็นการรับข้อความหลายบรรทัด (Multiline text input)บนแบบฟอร์มในบริเวณที่กำหนดไว้ รูปแบบ <TEXTAREA NAME = “ชื่อตัวแปร“ ROWS = จำนวนบรรทัด COLS = จำนวนคอลัมน์> ข้อความ </TEXTAREA>
ตัวแปรแทนชื่อพื้นที่ที่เรากำหนด 137 ตัวอย่าง <FORM> Please enter any comments here <p>
138 การสร้าง SELECT BOX SELECT แสดงตัวเลือกทั้งหมดให้ผู้ใช้เลือกโดยอาจแสดงในรูปของ Drop-down list หรือแสดงตัวเลือกตามปกติ รูปแบบ <SELECT NAME = “ชื่อตัวแปร“> <OPTION [VALUE = “ข้อมูล“ ] >ข้อความ ………….. </SELECT>
139 ตัวอย่าง <FORM> <SELECT NAME = “sport” > 140 การใช้ MULTIPLE ใน SELECTION BOX
141 การใช้ SIZE กำหนดจำนวนตัวเลือก
142 การส่งข้อมูลในแบบฟอร์มด้วย Mailto
143 เอกสารอ้างอิง http://www.w3.org/ http://www.w3shcools.com/ |