1 / 22

HTML

HTML. Hypertext Markup Language. HTML. โครงสร้างของ HTML ซอฟต์แวร์ที่ต้องใช้ รูปแบบโครงสร้าง HTML การสร้างและการบันทึกเอกสาร HTML การแสดงไฟล์เอกสาร HTML ตารางแสดงตัวอย่าง Tag และคำอธิบาย Tag HTML. โครงสร้างของ HTML. โครงสร้างของภาษา HTML แบ่งเป็น 2 ส่วน

warren-wynn
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Hypertext Markup Language

  2. HTML • โครงสร้างของ HTML • ซอฟต์แวร์ที่ต้องใช้ • รูปแบบโครงสร้าง HTML • การสร้างและการบันทึกเอกสาร HTML • การแสดงไฟล์เอกสาร HTML • ตารางแสดงตัวอย่าง Tag และคำอธิบาย • Tag HTML

  3. โครงสร้างของ HTML • โครงสร้างของภาษา HTML แบ่งเป็น 2 ส่วน • ส่วนที่เป็นข้อความ จะเป็นลักษณะของข้อความทั่วๆ ไป • ส่วนที่เป็นคำสั่ง จะเป็นส่วนที่ใช้ในการกำหนดรูปแบบของข้อความซึ่งจะเรียกว่า Tag หรือ แท็ก โดยจะอยู่ในเครื่องหมาย < และ >

  4. รูปแบบโครงสร้าง HTML • โครงสร้างของเอกสาร HTML จะประกอบไปด้วย Tag เปิด และ Tag ปิดต่างๆ ดังนี้ Tag เปิด <html> <head> … </head> <body> … </body> </html> จุดเริ่มต้น และสิ้นสุด ของเอกสาร HTML Tag ปิด

  5. รูปแบบโครงสร้าง HTML (ต่อ) • <html>…</html> จะต้องมีในเอกสาร HTML เสมอ เนื่องจากเป็นการประกาศให้ทราบว่าเป็นเอกสาร HTML • Tag HTML ประกอบไปด้วย 2 ส่วน • ส่วนของ HEAD เป็นส่วนของการกำหนดการทำงาน และคุณสมบัติพิเศษบางอย่างของ Web Page • ส่วนของ BODY เป็นส่วนที่ให้ใส่เนื้อหาและกำหนดคุณสมบัติพื้นฐานของ Web Page

  6. Tag ที่เกี่ยวข้องในส่วนของ HEAD • Tag <title> เป็น Tag สำหรับกำหนดหัวข้อของ Web page รูปแบบคำสั่ง <title>หัวข้อเรื่องที่แสดงบน Title</title> <html> <head> <title>สร้าง web page ด้วย HTML</title> </head> <body> การใส่หัวข้อเรื่องให้ web page แสดงบน Title Bar </body> </html>

  7. Tag ที่เกี่ยวข้องในส่วนของ HEAD (ต่อ) ผลจากการใส่ Tag<title>…</title>

  8. Tag ที่เกี่ยวข้องในส่วนของ BODY • ส่วนของ BODY เป็นส่วนที่ให้ใส่เนื้อหา และกำหนดคุณสมบัติพื้นฐานของ Web Page <body>…</body>

  9. การสร้างและการบันทึกเอกสาร HTML • เราจะใช้ Text Editor ที่ติดมากับระบบปฏิบัติการ (จะเป็นตัวอื่นก็ได้) ในที่นี้ขอใช้โปรแกรมชื่อว่า NotePad • หากต้องการบันทึกให้เป็นเอกสาร HTML ก็จะต้องกำหนดส่วนขยาย หรือนามสกุลให้เป็น .html หรือ .htm เท่านั้น **สำคัญมาก** • start>Programs>Accessories> Notepad

  10. การสร้างและการบันทึกเอกสาร HTML (ต่อ) • วิธีการบันทึกเอกสาร HTML • เลือกเมนู File>Save • จะปรากฏหน้าต่าง Save As ให้เลือกตำแหน่งที่จะจัดเก็บไฟล์ที่ Save in • เลือกชนิดของไฟล์ที่ Save as type เป็น All Files • ตั้งชื่อไฟล์ HTML ที่ File name โดยจะต้องให้มีนามสกุลเป็น .html หรือ htm • คลิ๊ก Save

  11. การสร้างและการบันทึกเอกสาร HTML (ต่อ) ตำแหน่งที่จัดเก็บไฟล์ ชื่อไฟล์โดยให้มีนามสกุล .html หรือ .htm กดปุ่ม Save ชนิดของไฟล์

  12. การแสดงไฟล์เอกสาร HTML • ดับเบิ้ลคลิกที่ Web Browser ในที่นี้คือ Internet Explorer • เลือก File>open • คลิก Browse เพื่อค้นหาไฟล์ที่ต้องการ จากนั้นคลิกปุ่ม Open • ในช่อง Open จะเจอเส้นทาง(path) ที่เก็บไฟล์ HTML ดังกล่าว • คลิก OK

  13. ตารางแสดงตัวอย่าง Tag และคำอธิบาย

  14. ตารางแสดงตัวอย่าง Tag และคำอธิบาย (ต่อ) หมายเหตุ จากตารางข้างต้น เป็นเพียงบางส่วนของ Tag ที่สำคัญๆ เท่านั้น Tag อื่นๆ ยังมีอีกจำนวนมาก ซึ่งยากแก่การจดจำ ดังนั้น จึงได้มีการสร้างเครื่องมืออำนวยความสะดวกในการสร้าง web page นั่นก็คือ Web Editor นั่นเอง

  15. ซอฟต์แวร์ที่ต้องใช้ • Web Editor (Macromedia Dreamweaver,Microsoft Frontpage,etc.) • Text Editor (Notepad,Editplus,Wordpad,etc.) • Web Browser (Internet Explorer,Mozilla Firefox,etc.)

  16. การกำหนดสีพื้นหลัง การขึ้นบรรทัดใหม่ การจัดข้อความให้อยู่กึ่งกลาง การจัดย่อหน้า การกำหนดลักษณะและแบบตัวอักษร การเว้นช่องว่างในเอกสาร การใส่ comment ในเอกสาร การใส่เส้นคั่นแนวนอนในเอกสาร การแทรกรูปภาพ การสร้าง Link การสร้างตาราง การสร้าง Form Tag HTML

  17. การกำหนดสีพื้นหลัง • รูปแบบของคำสั่ง HTML ในการกำหนดสีพื้นหลังของ Web Page <body bgcolor=“สีหรือรหัสสี ”>...<body> <body bgcolor=“black”>…</body>

  18. การขึ้นบรรทัดใหม่ • รูปแบบของคำสั่ง HTML ที่ใช้ในการขึ้นบรรทัดใหม่ <br> ข้อความที่ต้องการนำไปขึ้นบรรทัดใหม่

  19. การจัดข้อความให้อยู่กึ่งกลางการจัดข้อความให้อยู่กึ่งกลาง • รูปแบบของคำสั่ง HTML ที่ใช้ในการจัดข้อความให้อยู่กึ่งกลางหน้ากระดาษ <center>ข้อความที่ต้องการจัดให้อยู่กึ่งกลาง</center>

  20. การจัดย่อหน้า • การจัดย่อหน้าจะช่วยให้การแบ่งเนื้อหานั้นเป็นสัดส่วนและดูง่ายขึ้น <p align =รูปแบบที่ต้องการจัด>ข้อมูลที่ต้องการจัดย่อหน้า</p> <p align = left>การจัดย่อหน้าแบบชิดซ้าย</p>

  21. การเว้นช่องว่างในเอกสารการเว้นช่องว่างในเอกสาร • โดยปกติ ไม่ว่าเราจะพิมพ์ข้อมูลในเอกสาร HTML โดยการเว้นช่องว่างไว้มากกขนาดไหนก็ตาม เมื่อนำไปแสดงบน Browser ก็จะเปรียบเสมือนว่าเราได้เว้นช่องว่างเพียง 1 อักขระ • หากต้องการให้แสดงข้อมูลที่มีการเว้นช่องว่างให้ตามต้องการก็ต้องใช้คำสั่ง &nbsp;

  22. การใส่ comment ในเอกสาร • คือการที่เราต้องการใส่ข้อความ หรือข้อมูลไว้ในเอกสาร แต่ไม่ต้องการให้แสดงบน Browser • รูปแบบของคำสั่ง HTML ในการใส่ comment ให้กับเอกสาร <! หมายเหตุ>

More Related