HTML
HTML (HyperText Markup Language) คำสั่งในภาษา HTML เรียกว่า แท็ก (Tag) แท็ก ใช้สั่งให้เว็บเบราเซอร์แสดงผลส่วนต่างๆ ในเว็บเพจ ตามความหมายของแท็กนั้นๆ แท็ก (Tag) บางแท็ก จะใช้เป็นคู่ คือ ประกอบด้วยแท็กเปิด กับแท็กปิด โดยจะใส่ข้อความที่ต้องการไว้ระหว่างแท็กเปิดกับแท็กปิด บางแท็กใช้งานเดี่ยวๆ เช่น แท็กที่ใช้แสดงรูปภาพ และแท็กที่ใช้แสดงเส้นคั่นเป็นต้น World Wide Web Consortium: W3C
โครงสร้างของภาษา HTML ประกอบด้วยส่วนสำคัญ 3 ส่วน คือ 2. ส่วนกำหนดหัวเรื่องและรายละเอียดเกี่ยวกับผู้เขียน ข้อกำหนดพิเศษอื่นๆ 3. ส่วนเนื้อหาของเว็บเพจ ซึ่งประกอบด้วย ข้อความ และรูปภาพ หรือไฟล์มัลติมีเดียอื่นๆ
<TITLE>…..</TITLE> </HEAD> <BODY> . <HTML> <HEAD> <TITLE>…..</TITLE> </HEAD> <BODY> . </BODY> </HTML> ส่วนกำหนดไฟล์ HTML ส่วนกำหนดหัวเรื่อง และรายละเอียดอื่นๆ ส่วนเนื้อหาของเว็บเพจ
<Tag Attribute>Content</Tag> <Tag Attribute> Comment <!-- -->
ตัวอย่าง ของ Tag เดี่ยว <b></b> <u></u> <i></i> <a></a> ตัวอย่าง ของ Tag เดี่ยว <img src=“…” /> <br /> <hr />
HTML ELEMENT
- text="สี“ - background="url" - bgproperties="fixed" <body></body> Attributes - bgcolor="สี“ - text="สี“ - background="url" - bgproperties="fixed" - topmargin="number“ - leftmargin="number"
รหัสค่าสี ประกอบด้วย เลขฐานสิบหก 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
® ™ สัญลักษณ์พิเศษ (Symbol) © © ® ™ " " & & < >
HTML Tag แท็กเดี่ยว size = “ขนาดเส้น” align = “ตำแหน่ง” color = “สี” <br> การขึ้นบรรทัดใหม่ <hr> เส้นตรงแนวนอน Attributes width = “ความยาว” size = “ขนาดเส้น” align = “ตำแหน่ง” color = “สี”
width = “ความกว้าง” px(pixel) หรือ % height = “ความสูง” <img src=“..”> ไฟล์ประเภทรูปภาพ เช่น jpg, gif, png Attributes src = “แหล่งของรูปภาพ” border = “เส้นขอบ” width = “ความกว้าง” px(pixel) หรือ % height = “ความสูง” alt = “คำอธิบายรูปภาพ” vspace = “ระยะห่างระหว่างรูปกับข้อความ ในแนวตั้ง” hspace = “ระยะห่างระหว่างรูปกับข้อความ ในแนวนอน” align = “ ” top middle bottom
แท็กคู่ <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>
<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 รายการย่อย
- จะใส่เป็นชื่อหน้าต่างที่เรากำหนด <a></a> กำหนดลิงค์ (Link) href = “ ” name = “ ” target = “ ” - "_blank" เปิดหน้าเว็บเพจในหน้าต่าง Browser ใหม่ - "_self" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม และ Frame เดิม - "_parent" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม - "_top" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิมแบบเต็มหน้า และยกเลิก Frame ทั้งหมด - จะใส่เป็นชื่อหน้าต่างที่เรากำหนด
กำหนดสีให้ลิงค์ใน tag <body>โดยใช้ attribute การกำหนดสีให้ลิงค์ กำหนดสีให้ลิงค์ใน tag <body>โดยใช้ attribute link (สีของลิงค์ที่ยังไม่เคยคลิก) alink (สีของลิงค์ขณะคลิก) vlink (สีของลิงค์ที่เคยคลิกแล้ว) <body link="red" alink="blue" vlink="orange">
<center></center> กำหนดให้อยู่กึ่งกลาง <div></div> ใช้แบ่งรูปแบบการแสดงผล <span></span> ใช้เหมือนกับ div นิยมใช้กับข้อความสั้นๆ <pre></pre> แสดงข้อความภายในเหมือนกับที่แสดงใน Text Editor
size = “ ” ขนาดตัวอักษร -7 ถึง 7 color = “ ” สีตัวอักษร <font></font> Attributes face = “ ” ชนิดตัวอักษร size = “ ” ขนาดตัวอักษร -7 ถึง 7 color = “ ” สีตัวอักษร <marquee></marquee> ตัวอักษรวิ่ง <small></small> แสดงข้อความให้ตัวอักษรเล็กลง <big></big> แสดงข้อความให้ตัวอักษรใหญ่ขึ้น <h1></h1> - <h6></h6> หัวข้อ
- align = "left" | "center" | "right" จัดตำแหน่งของตาราง แท็กตาราง <table></table> กำหนดการสร้างตาราง (Table) - align = "left" | "center" | "right" จัดตำแหน่งของตาราง - border = "number" กำหนดความหนาของเส้นขอบตาราง - bordercolor = "สี" สีของเส้นขอบ - width="number" กำหนดความกว้างให้ตาราง - bgcolor = "สี" กำหนดสี background - cellspacing = "number" กำหนดช่องว่างภายใน cell - cellpadding = "number" กำหนดระยะห่างระหว่าง cell
<caption></caption> แสดงชื่อตาราง <th></th> หัวข้อในตาราง (Table Heading) <tr></tr> กำหนดแถวในตาราง (Table Row) - align="left" | "center" | "right" - valign= "top" | "middle" | "bottom" | "baseline" - bgcolor ="สี"
- align = "left" | "center" | "right" <td></td> แสดงข้อมูลในตาราง (Table Data) - align = "left" | "center" | "right" - valign = "top" | "middle" | "bottom" | "baseline“ - width = “ความกว้างของคอลัมน์” - height = “ความสูงของแถว” - colspan = “number” - rowspan = “number” - bgcolor = “สี”
การสร้างตาราง
เป็นรูปแบบของวิธีในการส่งข้อมูล มี 2 รูปแบบ แท็กฟอร์ม <form></form> - name = “ชื่อของ Form” - method = “get | post” เป็นรูปแบบของวิธีในการส่งข้อมูล มี 2 รูปแบบ get เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร post เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server - action="URL" - target="_blank | _self | _parent"
<textarea></textarea> - cols - rows - wrap 1. off (เป็นค่า default) 2. physical หรือ soft 3. virtual หรือ hard
<input type = “xxx”> text - size = "number" - maxlength = "number" - disabled - readonly radio - value - checked checkbox
Input Type=‘text’
<input type=”xxx”> (ต่อ) password file hidden submit reset image button
<select></select> - size - multiple <option></option> - value - selected <fieldset></fieldset> จัดกลุ่มให้กับช่องรับข้อมูล <legend></legend> กำหนดชื่อกลุ่ม <select> <option>Chiang Mai</option> <option>Lamphang</option> <option>Lamphun</option> </select>
แท็กเฟรม <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>
แท็กไอเฟรม <iframe></iframe> - name - src - width - height <iframe src=“” width=“” height=“”>