ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
HTML
2
HTML (HyperText Markup Language)
คำสั่งในภาษา HTML เรียกว่า แท็ก (Tag) แท็ก ใช้สั่งให้เว็บเบราเซอร์แสดงผลส่วนต่างๆ ในเว็บเพจ ตามความหมายของแท็กนั้นๆ แท็ก (Tag) บางแท็ก จะใช้เป็นคู่ คือ ประกอบด้วยแท็กเปิด กับแท็กปิด โดยจะใส่ข้อความที่ต้องการไว้ระหว่างแท็กเปิดกับแท็กปิด บางแท็กใช้งานเดี่ยวๆ เช่น แท็กที่ใช้แสดงรูปภาพ และแท็กที่ใช้แสดงเส้นคั่นเป็นต้น World Wide Web Consortium: W3C
3
โครงสร้างของภาษา HTML ประกอบด้วยส่วนสำคัญ 3 ส่วน คือ
2. ส่วนกำหนดหัวเรื่องและรายละเอียดเกี่ยวกับผู้เขียน ข้อกำหนดพิเศษอื่นๆ 3. ส่วนเนื้อหาของเว็บเพจ ซึ่งประกอบด้วย ข้อความ และรูปภาพ หรือไฟล์มัลติมีเดียอื่นๆ
4
<TITLE>…..</TITLE> </HEAD> <BODY> .
<HTML> <HEAD> <TITLE>…..</TITLE> </HEAD> <BODY> . </BODY> </HTML> ส่วนกำหนดไฟล์ HTML ส่วนกำหนดหัวเรื่อง และรายละเอียดอื่นๆ ส่วนเนื้อหาของเว็บเพจ
5
<Tag Attribute>Content</Tag> <Tag Attribute>
Comment <!-- -->
6
ตัวอย่าง ของ Tag เดี่ยว
<b></b> <u></u> <i></i> <a></a> ตัวอย่าง ของ Tag เดี่ยว <img src=“…” /> <br /> <hr />
7
HTML ELEMENT
8
- text="สี“ - background="url" - bgproperties="fixed"
<body></body> Attributes - bgcolor="สี“ - text="สี“ - background="url" - bgproperties="fixed" - topmargin="number“ - leftmargin="number"
9
รหัสค่าสี ประกอบด้วย เลขฐานสิบหก 2 ตัว 3 ชุด RR GG BB
สี (Color) ชื่อสี รหัสค่าสี ประกอบด้วย เลขฐานสิบหก 2 ตัว 3 ชุด RR GG BB Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Yellow #FFFF00 Aqua #00FFFF Fuchsia #FF00FF Silver #C0C0C0 White #FFFFFF
10
® ™ สัญลักษณ์พิเศษ (Symbol) © © ® ™ " " & &
< >
11
HTML Tag แท็กเดี่ยว size = “ขนาดเส้น” align = “ตำแหน่ง” color = “สี”
<br> การขึ้นบรรทัดใหม่ <hr> เส้นตรงแนวนอน Attributes width = “ความยาว” size = “ขนาดเส้น” align = “ตำแหน่ง” color = “สี”
12
width = “ความกว้าง” px(pixel) หรือ % height = “ความสูง”
<img src=“..”> ไฟล์ประเภทรูปภาพ เช่น jpg, gif, png Attributes src = “แหล่งของรูปภาพ” border = “เส้นขอบ” width = “ความกว้าง” px(pixel) หรือ % height = “ความสูง” alt = “คำอธิบายรูปภาพ” vspace = “ระยะห่างระหว่างรูปกับข้อความ ในแนวตั้ง” hspace = “ระยะห่างระหว่างรูปกับข้อความ ในแนวนอน” align = “ ” top middle bottom
13
แท็กคู่ <b></b> Bold ตัวอักษรหนา
<strong></strong> <i></i> Italic ตัวอักษรเอียง <em></em> <u></u> Underline ตัวอักษรขีดเส้นใต้ <ins></ins> <sub></sub> Subscript ตัวห้อย <sup></sup> Superscript ตัวยก <strike></strike> Strike Through ขีดเส้นทับตัวอักษร <del></del>
14
<ol></ol> Ordered List แสดงรายการแบบเรียงลำดับ
type = “A” type = “a” type = “I” type = “i” start = “” กำหนดข้อเริ่มต้น <ul></ul> Unordered List แสดงรายการแบบไม่เรียงลำดับ type = “disc” type = “circle” type = “square” <li></li> List Item รายการย่อย
15
- จะใส่เป็นชื่อหน้าต่างที่เรากำหนด
<a></a> กำหนดลิงค์ (Link) href = “ ” name = “ ” target = “ ” - "_blank" เปิดหน้าเว็บเพจในหน้าต่าง Browser ใหม่ - "_self" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม และ Frame เดิม - "_parent" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม - "_top" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิมแบบเต็มหน้า และยกเลิก Frame ทั้งหมด - จะใส่เป็นชื่อหน้าต่างที่เรากำหนด
16
กำหนดสีให้ลิงค์ใน tag <body>โดยใช้ attribute
การกำหนดสีให้ลิงค์ กำหนดสีให้ลิงค์ใน tag <body>โดยใช้ attribute link (สีของลิงค์ที่ยังไม่เคยคลิก) alink (สีของลิงค์ขณะคลิก) vlink (สีของลิงค์ที่เคยคลิกแล้ว) <body link="red" alink="blue" vlink="orange">
17
<center></center> กำหนดให้อยู่กึ่งกลาง
<div></div> ใช้แบ่งรูปแบบการแสดงผล <span></span> ใช้เหมือนกับ div นิยมใช้กับข้อความสั้นๆ <pre></pre> แสดงข้อความภายในเหมือนกับที่แสดงใน Text Editor
18
size = “ ” ขนาดตัวอักษร -7 ถึง 7 color = “ ” สีตัวอักษร
<font></font> Attributes face = “ ” ชนิดตัวอักษร size = “ ” ขนาดตัวอักษร -7 ถึง 7 color = “ ” สีตัวอักษร <marquee></marquee> ตัวอักษรวิ่ง <small></small> แสดงข้อความให้ตัวอักษรเล็กลง <big></big> แสดงข้อความให้ตัวอักษรใหญ่ขึ้น <h1></h1> - <h6></h6> หัวข้อ
19
- align = "left" | "center" | "right" จัดตำแหน่งของตาราง
แท็กตาราง <table></table> กำหนดการสร้างตาราง (Table) - align = "left" | "center" | "right" จัดตำแหน่งของตาราง - border = "number" กำหนดความหนาของเส้นขอบตาราง - bordercolor = "สี" สีของเส้นขอบ - width="number" กำหนดความกว้างให้ตาราง - bgcolor = "สี" กำหนดสี background - cellspacing = "number" กำหนดช่องว่างภายใน cell - cellpadding = "number" กำหนดระยะห่างระหว่าง cell
20
<caption></caption> แสดงชื่อตาราง
<th></th> หัวข้อในตาราง (Table Heading) <tr></tr> กำหนดแถวในตาราง (Table Row) - align="left" | "center" | "right" - valign= "top" | "middle" | "bottom" | "baseline" - bgcolor ="สี"
21
- align = "left" | "center" | "right"
<td></td> แสดงข้อมูลในตาราง (Table Data) - align = "left" | "center" | "right" - valign = "top" | "middle" | "bottom" | "baseline“ - width = “ความกว้างของคอลัมน์” - height = “ความสูงของแถว” - colspan = “number” - rowspan = “number” - bgcolor = “สี”
22
การสร้างตาราง
23
เป็นรูปแบบของวิธีในการส่งข้อมูล มี 2 รูปแบบ
แท็กฟอร์ม <form></form> - name = “ชื่อของ Form” - method = “get | post” เป็นรูปแบบของวิธีในการส่งข้อมูล มี 2 รูปแบบ get เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร post เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server - action="URL" - target="_blank | _self | _parent"
24
<textarea></textarea> - cols - rows - wrap
1. off (เป็นค่า default) 2. physical หรือ soft 3. virtual หรือ hard
26
<input type = “xxx”>
text - size = "number" - maxlength = "number" - disabled - readonly radio - value - checked checkbox
27
Input Type=‘text’
28
<input type=”xxx”> (ต่อ)
password file hidden submit reset image button
29
<select></select> - size - multiple
<option></option> - value - selected <fieldset></fieldset> จัดกลุ่มให้กับช่องรับข้อมูล <legend></legend> กำหนดชื่อกลุ่ม <select> <option>Chiang Mai</option> <option>Lamphang</option> <option>Lamphun</option> </select>
31
แท็กเฟรม <frameset></frameset> - noresize
- frameborder = “yes | no” - marginheight = “number” - marginwidth = “number” - scrolling = “yes | no | auto” - cols - rows <frame></frame> - name - src - width - height <frameset> <frame src=“”> </frameset>
32
แท็กไอเฟรม <iframe></iframe> - name - src - width - height
<iframe src=“” width=“” height=“”>
งานนำเสนอที่คล้ายกัน
