HTML.

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
คำสั่งเริ่มต้น รูปแบบ. <HTML>. </HTML>
Advertisements

บทที่ 7 การใช้ตัวอักษร สื่อชุดนี้เป็นลิขสิทธิ์ของสำนักพิมพ์วังอักษร ใช้เพื่อการศึกษาเท่านั้น.
เรียนรู้และเข้าใจ HTML อย่างง่าย
Chapter 2 : Character and Fonts
FORM อ.กันทิมา อ่อนละออ
Script Programming& Internet Programming
การสร้างเอกสารเว็บเพจด้วยภาษา HTML
หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา
Location object Form object
การสร้างแบบฟอร์ม <form>
PHP LANGUAGE.
HTML (คืออะไร) ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML.
โครงสร้าง ภาษา HTML.
ลักษณะพิเศษของ ภายใต้คำสั่ง <BODY>
วิชา การเขียนโปรแกรมบนเว็บ (Web-based Programming)
ทส215 การเขียนโปรแกรมบนเว็บ 1
ภาษา HTML เบื้องต้น เช่น Internet Explorer และ Netscape Navigator
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)
การสร้างเอกสารเว็บเพจ
การสร้างตาราง Click mouse ที่ปุ่ม จะปรากฏช่องสี่เหลี่ยมแสดง
โครงสร้าง HTML โครงสร้างพื้นฐาน HTML คำสั่งขึ้นบรรทัดใหม่ <BR>
การจัดวางตำแหน่งข้อมูลไว้กึ่งกลาง
การสร้างตาราง (Table)
การสร้างเฟรม(Frame) ด้วยภาษา HTML
แก้ไขปรับปรุง Form.
– Web Programming and Web Database
การสร้างเว็บด้วย HTML HyperText Markup Language
ภาษา HTML.
บทที่ 9 การใส่รูปภาพ (Image).
การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
การสร้างเอกสารเว็บเพจด้วยภาษา HTML
Electronic Commerce เว็บฟอร์ม (Web Form).
การสร้างเว็บเพจ HTML.
CSS.
CSS.
การสร้างช่องรับข้อมูล
Page: 1 การพัฒนาโปรแกรมประยุกต์บนเว็บ อ. บุรินทร์ รุจจนพันธุ์.. ปรับปรุง 12 กรกฎาคม 2550 HTML (HyperText Markup Language)
การกำหนดลักษณะตัวอักษร
เรื่อง การจัดแต่งเอกสาร
HTML, PHP.
CHAPTER 6 Macromedia Dreamweaver MX 8.
การแทรกรูปภาพ บนเว็บเพจ.
การนำเสนองานบนอินเตอร์เน็ต
คำสั่งภาษา HTML เบื้องต้น
รายวิชา เทคโนโลยีสารสนเทศ และการสื่อสาร. โครงสร้างภาษา HTML หัวข้อเรื่อง เว็บไซต์
PHP for Web Programming
Web Technology & Basic Web Development
การสร้างตาราง,ฟอร์มและการส่งค่า Get and Post คอลโทรลต่าง ๆ
บทที่ 3 การกำหนดรูปแบบตัวอักษร
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
หลักการเขียนเว็บไซต์
โครงสร้างและส่วนประกอบภาษา HTML ๖ การจัดการเกี่ยวกับภาพในภาษา HTML IMAGE COMMAND TAG จัดเป็นประเภท TAG เดี่ยว มี ๒ รูปแบบคือ ๑. ภาพประกอบรายละเอียด เป็นภาพที่ใช้แทรก.
การสร้างฟอร์ม(Form) ด้วยภาษา HTML
Introduction to HTML, PHP – Special Problem (Database)
เสริมเว็บให้ดูสวย.
HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) เป็นภาษา มาตรฐานสากลที่ใช้นำเสนอข้อมูลแบบ ผสมผสานในการสื่อสารแบบ World-Wide- Web.
เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML (2) ตอน... การใช้ FORM โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ
การกำหนดสัญลักษณ์และเลขลำดับ
HTML ก็คือภาษาคอมพิวเตอร์ระดับสูงภาษา หนึ่งซึ่งถูกออกแบบมาเพื่อใช้ในการแสดงผล ข้อมูลบนระบบอินเตอร์เน็ท โดยใช้ เครื่องหมาย เป็นตัวกำหนดหลัก โดย ส่วนมากจะใช้คำสั่ง.
สื่อการสอนการเขียนเว็บเพจ ด้วยภาษา HTML
การสร้าง ฟอร์มรับข้อมูล ง การเขียนเว็บไซต์ เบื้องต้น ศูนย์คอมพิวเตอร์ โรงเรียน ปลวกแดงพิทยาคม.
Form.
โครงสร้างของภาษา HTML
โดย ส.อ.ประกาศิต วรนุช วิททยาลัยเฉลิมกาณจนา
ศูนย์ส่งเสริมวิชาการ 231/4 ซอยวัดสังข์กระจาย เขตบางกอกใหญ่ กทม Tel , การเขียนเว็บเพจด้วยภาษา HTML ( ) 1 ประเภทของ.
HTML HyperText Markup Language
HTML (Hypertext Markup Language).
HTML (2) – Web Programming and Web Database
HYPER TEXT MARKUP LANGUAGE
ใบสำเนางานนำเสนอ:

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=“”>