ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
การสร้างเว็บด้วย HTML HyperText Markup Language
2
Tag Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR> เป็นต้น Tag เปิด/ปิด <B>…</B>, <BLINK>…</BLINK> เป็นต้น
3
โครงสร้าง HTML
4
โครงสร้าง คำอธิบาย <HTML> ประกาศว่าต่อไปจะเป็น HTML <HEAD>
<TITLE>ข้อความ</TITLE> สั่งให้ TITLE แสดงตัวอักษรที่ต้องการ </HEAD> กำหนดให้สิ้นสุดส่วนของ HEAD <BODY> กำหนดให้เริ่มต้นส่วน BODY ข้อความต่าง ๆ ข้อความที่แสดงในส่วนของ browser </BODY> กำหนดให้สิ้นสุดส่วน BODY ประกาศว่าต่อไปจะเป็นสิ้นสุดคำสั่ง HTML
5
การกำหนดสีของพื้นหลังของตัวอักษร 1
การกำหนดสีของพื้นหลังของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น <HTML> <HEAD> <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="yellow"> การกำหนดสีพื้นหลังโดยการกำหนดสี </BODY> </HTML>
6
2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่า หลักการผสมสีแบบ RBG
<HTML> <HEAD> <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="#FF66FF"> การกำหนดสีพื้นหลังโดยใช้หลัก "#RBG" </BODY> </HTML>
7
การกำหนดสีของตัวอักษร 1
การกำหนดสีของตัวอักษร 1.ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น <HTML> <HEAD> <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="blue" > การกำหนดสีตัวอักษร </BODY> </HTML>
8
2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่า หลักการผสมสีแบบ RBG
<HTML> <HEAD> <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="#FF0066" > การกำหนดสีตัวอักษร </BODY> </HTML>
9
ข้อความลักษณะหัวเรื่อง (Heading)
<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>
10
ข้อความลักษณะหัวเรื่อง (Heading)
ข้อความลักษณะหัวเรื่อง จะกำกับด้วยแท็ก <Hn> โดย n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6 n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด สามารถเพิ่ม/ลดขนาดโดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น
11
ผลลัพธ์ Computer - Default Size Computer - H1 Computer - H2
12
การกำหนดตัวอักษรให้มีความหนา
<HTML> <HEAD> <TITLE>การกำหนดตัวหนา</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ COMPUTER ตัวอักษรหนา <B>COMPUTER</B> </BODY> </HTML>
13
การกำหนดตัวอักษรให้ขีดเส้นใต้
<HTML> <HEAD> <TITLE>การกำหนดการขีดเส้นใต้</TITLE> </HEAD> <BODY> ตัวอักษรปกติ COMPUTER ตัวอักษรที่ขีดเส้นใต้ <U>COMPUTER</U> </BODY> </HTML>
14
การกำหนดตัวอักษรให้มีการเอน
<HTML> <HEAD> <TITLE>การกำหนดอักษรเอน</TITLE> </HEAD> <BODY> ตัวอักษรปกติ COMPUTER ตัวอักษรเอน <i>COMPUTER</i> </BODY> </HTML>
15
การกำหนดรูปแบบของตัวอักษร
ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif
16
การกำหนดรูปแบบของตัวอักษร (ต่อ)
<HTML> <HEAD> <TITLE>FONT FACE </TITLE> </HEAD> <BODY> ชนิดของฟอนต์ปกติ<BR> <FONT FACE="MS Sans Serif">ฟอนต์ชื่อ MS Sans Serif</Font> </BODY> </HTML>
17
การกำหนดสีของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ
การกำหนดสีของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ <HTML> <HEAD> <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow"> Computer <FONT COLOR="Red">Computer</FONT> Computer </BODY> </HTML>
18
2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16
<HTML> <HEAD> <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow"> Computer <FONT COLOR ="#FF66FF"> Computer</FONT> Computer </BODY> </HTML>
19
การกำหนดขนาดของตัวอักษร 1. กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7
การกำหนดขนาดของตัวอักษร 1. กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 <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>
20
กำหนดโดยใช้เครื่องหมายบวกและเครื่องหมายลบ โดยสามารถกำหนดได้ดังนี้ ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน - 2 ถ้าเป็น การขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งจะใช้ไม่เกิน + 4
21
<HTML> <HEAD> <TITLE>FONT SIZE </TITLE> </HEAD> <BODY text="Red"> <FONT SIZE="+4">Computer</Font> <FONT SIZE="+3">Computer</Font> <FONT SIZE="+2">Computer</Font> <FONT SIZE="+1">Computer</Font> Computer <FONT SIZE="-1">Computer</Font> <FONT SIZE="-2">Computer</Font> </BODY> </HTML>
22
คำสั่งที่กำหนดตัวอักษรยกระดับ
<HTML> <HEAD> <TITLE>SUPERSCRIPT</TITLE> </HEAD> <BODY> <FONT SIZE="4" color="green" >Computer</Font> A<Sup>2</Sup> = A2 <FONT SIZE="4" color="green">Computer</Font> </BODY> </HTML>
23
คำสั่งที่กำหนดตัวอักษรพ่วงท้าย (ตัวห้อย)
<HTML> <HEAD> <TITLE>SUBSCRIPT</TITLE> </HEAD> <BODY> <FONT SIZE="4" color="green" >Computer</Font> H<Sub>2</Sub>0 = H2O <FONT SIZE="4" color="green">Computer</Font> </BODY> </HTML>
24
การกำหนดตัวอักษรเคลื่อนที่
<HEAD> <TITLE>MARQUEE</TITLE> </HEAD> <BODY> <Marquee><FONT SIZE="4" color="green“>Computer</Font></Marquee> </BODY> </HTML>
26
กำหนดตัวอักษร ขนาด และ สี
กำหนดตัวอักษร ขนาด และ สี <font face="Impact" size="3" color="#9900CC">
27
ช่องรับข้อมูล Drop down list
คำนำหน้า : <select size="1" name="S_sex"> <option>นาย</option> <option>นาง</option> <option selected>นางสาว</option></select>
28
การสร้างปุ่มบันทึกและยกเลิก
<input type="submit" value=“บันทึก” name="B1" style="font-size: 1em; color: #800080" size="3“> <input type="reset" value=“ยกเลิก” name="B2" style="font-size: 1em; color: #800080“ size=“3”>
29
การสร้างปุ่ม button <input type=“button" value=“<<back” onclick=“history.go(-1)” name="B1" style="font-size: 1em; color: #800080" size="3“> หรือ <a href="javascript:onclick=history.back()"><font size="3" color="#6600CC">กลับก่อนหน้านี้</a> กลับก่อนหน้านี้
30
ช่องรับข้อมูล radio เพศ :
<input type ="radio" name="gender" checked>หญิง <input type = "radio" name="gender">ชาย
31
ช่องรับข้อมูล Checkbox
ประเภทหนังสือที่ชอบ : <input type = "checkbox">นวนิยาย <input type = "checkbox">วิชาการ <input type ="checkbox">บันเทิง>
32
ช่องรับข้อมูล text area
ความคิดเห็นเพิ่มเติม : <textarea cols = "50" rows ="4"></textarea>
33
ช่องรับข้อมูล Text และ Password
ชื่อผู้ใช้(Username) : <input type ="text" name="S_userName" size="30"> รหัสผ่าน (Password) : <input type ="password" name="S_password" size="15“> ยืนยันรหัสผ่าน(Confirm) : <input type ="password" name="C_password" size="15“>
34
การแสดงข้อความเตือน <form name="good" method="POST" onSubmit="if(confirm(‘ยืนยันการบันทึกข้อมูล ?')) document.good.action='SaveAddSubject.php'">
35
การสร้างตาราง <html> <body
<p align = center><IMG height=200 width =150 src="images/begonia2.jpeg"> <table width=60% border=1 align=center > <tr bgcolor=#AFCACF ><p align = center> <td width=5%><center><font color=#660099>ลำดับที่</td></center> <td width=10%><center><font color=#660099>รหัสวิชา</td></center> <td width=20%><center><font color=#660099>วิชาสอน</td></center> </tr> <tr bgcolor=#CCCCFF border =1 align = center> <td width=5%><center><font color=#660099>1</td></center> <td width=10%><center><font color=#660099> </td></center> <td width=20%><center><font color=#660099>โปรแกรมประยุกต์ด้านสารสนเทศฯ</td></center> </table> </html>
36
ผลที่จอภาพ
งานนำเสนอที่คล้ายกัน
