การสร้างเว็บด้วย HTML HyperText Markup Language
Tag Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR> เป็นต้น Tag เปิด/ปิด <B>…</B>, <BLINK>…</BLINK> เป็นต้น
โครงสร้าง HTML
โครงสร้าง คำอธิบาย <HTML> ประกาศว่าต่อไปจะเป็น HTML <HEAD> <TITLE>ข้อความ</TITLE> สั่งให้ TITLE แสดงตัวอักษรที่ต้องการ </HEAD> กำหนดให้สิ้นสุดส่วนของ HEAD <BODY> กำหนดให้เริ่มต้นส่วน BODY ข้อความต่าง ๆ ข้อความที่แสดงในส่วนของ browser </BODY> กำหนดให้สิ้นสุดส่วน BODY ประกาศว่าต่อไปจะเป็นสิ้นสุดคำสั่ง HTML
การกำหนดสีของพื้นหลังของตัวอักษร 1 การกำหนดสีของพื้นหลังของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น <HTML> <HEAD> <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="yellow"> การกำหนดสีพื้นหลังโดยการกำหนดสี </BODY> </HTML>
2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่า หลักการผสมสีแบบ RBG <HTML> <HEAD> <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="#FF66FF"> การกำหนดสีพื้นหลังโดยใช้หลัก "#RBG" </BODY> </HTML>
การกำหนดสีของตัวอักษร 1 การกำหนดสีของตัวอักษร 1.ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น <HTML> <HEAD> <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="blue" > การกำหนดสีตัวอักษร </BODY> </HTML>
2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่า หลักการผสมสีแบบ RBG <HTML> <HEAD> <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="#FF0066" > การกำหนดสีตัวอักษร </BODY> </HTML>
ข้อความลักษณะหัวเรื่อง (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>
ข้อความลักษณะหัวเรื่อง (Heading) ข้อความลักษณะหัวเรื่อง จะกำกับด้วยแท็ก <Hn> โดย n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6 n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด สามารถเพิ่ม/ลดขนาดโดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น
ผลลัพธ์ Computer - Default Size Computer - H1 Computer - H2
การกำหนดตัวอักษรให้มีความหนา <HTML> <HEAD> <TITLE>การกำหนดตัวหนา</TITLE> </HEAD> <BODY> ตัวอักษรปรกติ COMPUTER ตัวอักษรหนา <B>COMPUTER</B> </BODY> </HTML>
การกำหนดตัวอักษรให้ขีดเส้นใต้ <HTML> <HEAD> <TITLE>การกำหนดการขีดเส้นใต้</TITLE> </HEAD> <BODY> ตัวอักษรปกติ COMPUTER ตัวอักษรที่ขีดเส้นใต้ <U>COMPUTER</U> </BODY> </HTML>
การกำหนดตัวอักษรให้มีการเอน <HTML> <HEAD> <TITLE>การกำหนดอักษรเอน</TITLE> </HEAD> <BODY> ตัวอักษรปกติ COMPUTER ตัวอักษรเอน <i>COMPUTER</i> </BODY> </HTML>
การกำหนดรูปแบบของตัวอักษร ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif
การกำหนดรูปแบบของตัวอักษร (ต่อ) <HTML> <HEAD> <TITLE>FONT FACE </TITLE> </HEAD> <BODY> ชนิดของฟอนต์ปกติ<BR> <FONT FACE="MS Sans Serif">ฟอนต์ชื่อ MS Sans Serif</Font> </BODY> </HTML>
การกำหนดสีของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ การกำหนดสีของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ <HTML> <HEAD> <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow"> Computer <FONT COLOR="Red">Computer</FONT> Computer </BODY> </HTML>
2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 <HTML> <HEAD> <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow"> Computer <FONT COLOR ="#FF66FF"> Computer</FONT> Computer </BODY> </HTML>
การกำหนดขนาดของตัวอักษร 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>
กำหนดโดยใช้เครื่องหมายบวกและเครื่องหมายลบ โดยสามารถกำหนดได้ดังนี้ ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน - 2 ถ้าเป็น การขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งจะใช้ไม่เกิน + 4
<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>
คำสั่งที่กำหนดตัวอักษรยกระดับ <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>
คำสั่งที่กำหนดตัวอักษรพ่วงท้าย (ตัวห้อย) <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>
การกำหนดตัวอักษรเคลื่อนที่ <HEAD> <TITLE>MARQUEE</TITLE> </HEAD> <BODY> <Marquee><FONT SIZE="4" color="green“>Computer</Font></Marquee> </BODY> </HTML>
กำหนดตัวอักษร ขนาด และ สี กำหนดตัวอักษร ขนาด และ สี <font face="Impact" size="3" color="#9900CC">
ช่องรับข้อมูล Drop down list คำนำหน้า : <select size="1" name="S_sex"> <option>นาย</option> <option>นาง</option> <option selected>นางสาว</option></select>
การสร้างปุ่มบันทึกและยกเลิก <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”>
การสร้างปุ่ม 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> กลับก่อนหน้านี้
ช่องรับข้อมูล radio เพศ : <input type ="radio" name="gender" checked>หญิง <input type = "radio" name="gender">ชาย
ช่องรับข้อมูล Checkbox ประเภทหนังสือที่ชอบ : <input type = "checkbox">นวนิยาย <input type = "checkbox">วิชาการ <input type ="checkbox">บันเทิง>
ช่องรับข้อมูล text area ความคิดเห็นเพิ่มเติม : <textarea cols = "50" rows ="4"></textarea>
ช่องรับข้อมูล 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“>
การแสดงข้อความเตือน <form name="good" method="POST" onSubmit="if(confirm(‘ยืนยันการบันทึกข้อมูล ?')) document.good.action='SaveAddSubject.php'">
การสร้างตาราง <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>4122606</td></center> <td width=20%><center><font color=#660099>โปรแกรมประยุกต์ด้านสารสนเทศฯ</td></center> </table> </html>
ผลที่จอภาพ