Introduction to Internet Service Technology

งานนำเสนอเรื่อง: "Introduction to Internet Service Technology"— ใบสำเนางานนำเสนอ:

1 Introduction to 321370 Internet Service Technology
อ. อธิตา โชคอนันต์รัตนา

2 คำอธิบายรายวิชา (Course description)
ชนิดและบริการต่างๆ ในระบบอินเทอร์เน็ตในเชิงของผู้ให้บริการ มากกว่าผู้ใช้บริการ การจัดการโครงสร้างสารสนเทศขององค์กรสำหรับ ให้บริการในระบบอินเทอร์เน็ตในรูปแบบต่างๆ การรักษาความ ปลอดภัยบนเครือข่ายอินเทอร์เน็ต พัฒนาการของเทคโนโลยีทาง อินเทอร์เน็ต ทีซีพี/ไอพี เนมซเพช การเชื่อมต่อและโปรโตคอล โครงสร้างของระบบรับให้บริการ เทคนิคของเวิล์ไวด์เว็บ การโปรแกรม ทางฝั่งเครื่องให้บริการ เทคนิคของเวิลด์ไวด์เว็บ การโปรแกรมทางฝั่ง เครื่องให้บริการ การเขียนโปรแกรมซีจีไอ

3 การให้คะแนน การวัดผลและประเมินผล เข้าห้องเรียน ร้อยละ 10
เข้าห้องเรียน ร้อยละ 10 ทำการบ้าน ร้อยละ 10 พัฒนางานประยุกต์ ร้อยละ 20 สอบกลางภาค ร้อยละ 30 สอบปลายภาค ร้อยละ 30

4 การตัดเกรด การให้เกรด A C 50 F

5 Review Web Application
Terminals Host Internet เรียนวิชา OS เป็นเรื่องเกี่ยวกับการประมวลผลแบบ Centralized มีเครื่อง Host และมีจอที่ต่อออกไปเครื่อง Terminal เพื่อแสดงผลข้อมูล การทำงาน การประมวลผลทุกอย่างจะอยู่บนเครื่องเดียว นั่นก็คือเครื่อง Host ซึ่งอาจจะเป็น Main Frame

6 การประมวลผลศูนย์กลาง
Terminals Host Centralized Processing ความหมาย หมายถึง วิธีการประมวลผลที่ ผู้ใช้เครื่องคอมพิวเตอร์จะใช้ผ่าน ศูนย์กลางจากเครื่อง ปลายทาง (terminal) การเรียกหาข้อมูลหรือ โปรแกรมที่จะใช้ จะเรียกจาก ศูนย์กลางทั้งหมด ดู terminal ประกอบ คอนเซ็ป Centralized Processing มีเรื่องเกี่ยวกับความเสี่ยง single point of failure เรื่องเกี่ยวกับเครื่องโฮส นั่นก็คือถ้าเครื่องโฮสมีปัญหา ก็จะทำให้ระบบไม่สามารถทำงานได้ เพราะในยุคแรกเรามีการใช้ Main Frame, Mini Computer ที่มี Performance ค่อนข้างสูง ราคาแพง ทำงาน ประมวลผลฐานข้อมูล ประมวลผลโปรแกรม จากปัญหานี้จึงมีการเปลี่ยนไปเป็นแบบ Distributed Processing

7 การประมวลผลแบบกระจาย
Internet Distributed Processing การประมวลผลแบบกระจาย จึงได้มี การจัดสรรหน้าที่การทำงานต่าง ๆ ที่ จะต้องเชื่อมโยงกับเครือข่าย อินเตอร์เน็ตให้กับคอมพิวเตอร์อีก เครื่อง หนึ่งโดยเฉพาะ เรียกว่า เว็บ เซิร์ฟเวอร์ “Web Server Distributed Processing เริ่มเกิดขึ้นสมัยที่เราเริ่มใช้ PC / PC ที่มีประสิทธิภาพสูงก็จะเรียกว่า Work Station

8 Distributed Model Devices Server Database Server Process Server Client
จึงเกิด Concept การมี server หลายๆตัว Server ในแต่อย่างก็อาจจะทำบทบาทที่ต่างกัน มีบางเครื่องที่ทำหน้าที่ client Super Computer อาจจะใช้ในการคำนวณทางคณิตศาสตร์ที่ต้องประมวลผลมากๆ Render Graphic คำนวณ metrics จริงๆ PC ก็ทำได้แต่อาจจะทำเป็นวันๆ Database ก็จะเก่งแบบ IO Input output devices ทำงานแบบ concurrent กับ strorage ได้ดี Client

9 การวัดความสามารถของ Super Computer
หน่วยวัดความสามารถ MIPS (MILLION INSTRUCTION PER SECOND) FLOPS (FLOATING POINT OPERATIONS PER SECOND) การทำ งานในการเอ็กซีคิวส์ (EXECUTE) คำสั่งหนึ่งคำ สั่งของโปรแกรมเราเรียกว่า วัฎจักรคำ สั่ง (MACHINE CYCLE) ซึ่งแบ่งออกเป็น 2 ส่วนคือ INSTRUCTION CYCLE และ EXECUTE CYCLE ความเร็วของการประมวลผลของหน่วยประมวลผลก ลางจะคิดเป็นวินาที มีหน่วยเป็น ถ้าเป็นเครื่อง คอมพิวเตอร์ทั่วไป ได้กี่ล้านคำสั่งโดยเฉลี่ยต่อวินาที MIPS (MILLION INSTRUCTION PER SECOND) ถ้าจะวัดความสามารถของ CPU ที่ใช้เพื่อการประมวลผลจริงๆ จะใช้ FLOPS (FLOATING POINT OPERATIONS PER SECOND)

10 Thick and Thin Thick Client การทำงานหรือการประมวลผลอยู่ที่เครื่องแม่ ข่ายหรือเครื่องเซิร์ฟเวอร์เป็นหลัก แต่ในฝั่ง Client ก็ยังต้องมี โปรแกรมติดตั้งอยู่ Thin Client เป็นลักษณะการเลียนแบบ Centralized Processing แต่เปลี่ยนจาก Terminal จะเป็น PC ธรรมดาแทน ปัญหาของ Thick Client โดยทั่วไประบบ คอมพิวเตอร์ในปัจจุบันจะถูกเชื่อมโยงกันด้วยระบบเครือข่ายท้องถิ่น ( Local Area Network : LAN ) ซึ่งเครื่องที่เป็นลูกข่ายในระบบหรือ Client มักจะเป็นเครื่องพีซีที่มีสเปคเครื่องที่เปี่ยมประสิทธิภาพ ประกอบด้วยโปรเซสเซอร์ความเร็วสูง ฮาร์ดดิสก์ความจุมาก ๆ หน่วยความจำที่มากเพียงพอต่อการรันแอปพลิเคชั่นที่นับวันจะต้องการพลังการ ประมวลผลสูงขึ้นทุกที และเพียบพร้อมไปด้วยอุปกรณ์ต่อพ่วงนานาชนิด เช่น ซีดีรอม เครื่องพิมพ์ ปัญหาของระบบที่ใช้เครื่องพีซีชุดใหญ่เช่นนี้จึงมีอยู่ไม่น้อยเลย เครื่องลูกข่ายประเภทนี้ ผู้เขียนขอเรียกสั้น ๆ ว่า Thick Client นะครับ ในด้านการลงทุน เครื่องพีซีชุดใหญ่นี้จะมีราคาสูง หากใช้งานเพียงไม่กี่เครื่องก็คงไม่ใช้ปัญหา แต่ถ้ามีจำนวนเครื่องเป็นสิบเป็นร้อยเครื่องขึ้นไป ตัวเลขงบประมาณจะแตกต่างอย่างเห็นได้ชัด ทรัพยากรที่ซ้ำซ้อน และกระจัดกระจาย เป็นอีกปัญหาหนึ่งซึ่งมีผลกระทบต่อการบริหารจัดการ ในขณะที่พีซีเหล่านี้ทุกเครื่องต่างก็มีฮาร์ดดิสก์ภายในตัวเอง จะต้องมีซอฟต์แวร์ทั้งระบบปฏิบัติการและโปรแกรมประยุกต์ติดตั้งไว้ทุก เครื่อง เมื่อเริ่มต้นติดตั้งเครื่องเหล่านี้ในแต่ละจุดในสำนักงานก็สูญเสียเวลาและ แรงงานไปมากมายแล้ว หากมองต่อไปถึงข้อมูลของผู้ใช้ที่กระจัดกระจายในแต่ละเครื่อง คอนฟิกและสภาพแวดล้อมการใช้งานของแต่ละบุคคล จะสร้างภาระในเรื่องการสำรองข้อมูลขนาดไหน ปัญหาจะปรากฏขึ้นให้เจ้าหน้าที่ฝ่ายเทคนิคต้องเหนื่อยและเบื่อหน่ายเป็นราย วันอีก หากเครื่องเหล่านี้ติดไวรัส หรือเกิดความเสียหายจนถึงขนาดต้องนำออกไปซ่อมและเปลี่ยนเครื่องใหม่เข้ามาทด แทน Thin Client คืออะไร มีด้วยความต้องการที่จะลด ขนาดของเครื่องคอมพิวเตอร์ที่ใช้เป็นเวิร์กสเตชั่นเหล่านี้ให้มีขนาดเล็กลง เพื่อช่วยให้ความยุ่งยากในด้านการบริหารจัดการและการบำรุงรักษาลดลงไปได้ จึงทำให้เกิดแนวคิดของ Thin Client ขึ้น โดยลดทั้งขนาดและคุณสมบัติของเครื่องคอมพิวเตอร์ชนิดนี้ลงให้เหมาะสมกับงาน ที่ใช้ ซึ่งจะช่วยลดต้นทุนลงไปได้ส่วนหนึ่ง ในขณะเดียวกันก็เป็นการยกเลิกทรัพยากรที่เป็นสื่อบันทึกข้อมูลขนาดใหญ่อย่าง เช่น ฮาร์ดดิสก์ ออกไปจากตัวเครื่องลูกข่าย แล้วยกภาระการประมวลผล การจัดเก็บข้อมูล การบริการงานแอปพลิเคชั่น ซอฟต์แวร์ระบบปฏิบัติการ ซอฟต์แวร์ประยุกต์ และการควบคุมต่าง ๆ ให้ไปรวมอยู่ที่เครื่องเซิร์ฟเวอร์ที่เป็นศูนย์กลางในระบบเครือข่าย ที่เรียกว่า Server Based Computing แนวคิดเช่นนี้จะช่วยให้เกิดประโยชน์หลายประการ # ช่วยลดต้นทุนด้านฮาร์ดแวร์ของเครื่องลูกข่ายลงได้ เช่น สำหรับสถานศึกษาอาจจะใช้เครื่องพีซีระดับต่ำ-ปานกลางที่ได้รับบริจาคมา # ลดความยุ่งยากในด้านการจัดการระบบ ได้แก่ การตรวจเช็คไวรัส หรือ การสำรองข้อมูลในฮาร์ดดิสก์ของแต่ละเครื่อง # ช่วยลดงานที่ต้องปฏิบัติที่จุดตั้งเครื่องลูกข่าย เช่น การเปลี่ยนตัวเครื่องเพื่อการซ่อมแซม อัพเกรด การติดตั้งซอฟต์แวร์ ประยุกต์เพิ่มเติมให้แก่ผู้ใช้ # ลด โอกาส และช่องทางที่จะเกิดความเสียหายเนื่องจากการโจรกรรมข้อมูล ในกรณีที่ตัวเครื่องลูกข่ายแบบ Thin Client ไม่ได้ติดตั้งหรืออนุญาติให้ใช้สื่อบันทึกข้อมูลประเภท Removable Media หรืออุปกรณ์ต่อพ่วง เช่น ฟล๊อปปี้ดิสก์ ( สำเนาไฟล์ไม่ได้ ) พอร์ตเครื่องพิมพ์ ( พิมพ์ข้อมูลจากเอกสารไม่ได้ ) เป็นต้น รวมไปถึงป้องกันการโจรกรรมอุปกรณ์บันทึกข้อมูลราคาแพงเช่น ฮาร์ดดิสก์อีกด้วย เพราะไม่มีฮาร์ดดิสก์อยู่ในเครื่องนั่นเอง

11 Thick Client เครื่อง Client จะต้องมีแอพลิเคชั่นประมวลผลอยู่ด้วย
Host เครื่อง Client จะต้องมีแอพลิเคชั่นประมวลผลอยู่ด้วย แต่ไปใช้ทรัพยากรบางอย่างที่เครื่อง Host

12 Centralized and Thin Client
Personal Computer Host Terminals Host Windows server IBM main Frame Unix Server เครื่อง PC Display อย่างเดียว ลักษณะแบบนี้เรียก 2 tier

13 สถาปัตยกรรมแบบ 3-Tier Internet

14 Business Logic Data Storage Presentation
สถาปัตยกรรมแบบ 3-Tier Business Logic Data Storage Presentation ในทาง Logical โปรแกรมทั้ง 3 ส่วนทำงานแยก ขาดออกจากกัน คือ โปรแกรมแต่ ละส่วนทำงานเป็นอิสระ ไม่ จำเป็นต้องเป็นภาษาเดียวกัน หรือ ผลิตภัณฑ์เดียวกัน สถาปัตยกรรมแบบ 3-Tier เป็นการออกแบบสถาปัตยกรรมของระบบ (System Architecture) โดยมีคอนเซปต์พื้นฐานคือการแบ่งแยกหน้าที่ความรับผิดชอบของแต่ละ tier ให้เด็ดขาดจากกัน ไม่ว่าจะเป็น… Presentation Tier รับผิดชอบในการแสดงผลด้าน UI Business Logic Tier รับผิดชอบในการประมวลผลด้าน business logic และ Data Tier ดูแลในส่วนการจัดการฐานข้อมูล (ในกรณีของ SOA จะมี Service Tier เพิ่มเข้ามาเพื่อดูแลในส่วนการติดต่อสื่อสารกับ service อื่นๆ ซึ่งมีได้มากมายในระบบ)

15 Presentation สถาปัตยกรรมแบบ 3-Tier Business logic Data Storages
ในทาง Physical โปรแกรมทั้ง 3 ส่วนอาจจะแยกกัน อยู่ 3 เครื่อง หรือออาจจะอยู่ที่ เครื่องเดียวกันก็ได้ Internet อยู่ที่เครื่องเดียวกันทั้งหมด อยู่ต่างเครื่องกัน Presentation -> Web browser Business -> Web Server , Apache Data Storage -> File System, Database Business logic Data Storages Presentation

16 สถาปัตยกรรมแบบ n-Tier
ในปัจจุบันข้อมูลบนเครือข่าย ยังมีข้อมูลประเภท Media เพิ่มมา อีก เช่น Movie Video จึงการเพิ่ม Server เข้ามาอีก Presentation Media Server Data storage Internet ทุกวันนี้ลักษณะของ 3-tier เริ่มมี data พวก media movie video animation ซึ่งมักต้องการประสิทธิภาพของเครื่อง server ที่ค่อนข้างสูง Database Server

17 มาตรฐานเกี่ยวกับ Internet
Internet -> TCP/ IP, IMAP, SMTP, FTP ผู้ที่กำหนดมาตรฐานคือ IETF (Internet Engineering Task Force) [ เป็นคณะทำงานเฉพาะกิจหนึ่งของ IAB ประกอบด้วยกลุ่มวิจัยต่างๆ ที่ ทำงานทางด้านโปรโตคอล ของอินเตอร์เน็ต, การประยุกต์ใช้งาน, สถาปัตยกรรม และเทคโนโลยี IETF บริหารจัดการโดยคณะกรรามการ และ IRSG( Internet Research Steering Group) ซึ่งประกอยด้วย ประธานกลุ่มงานวิจัยต่างๆ และนักวิจัยอื่นๆ สามารถไปเปิดดูมาตรฐานต่างๆได้ ซึ่งอันนี้ก็จะเป็นการกำหดมาตรฐานเกี่ยวกับอินเทอร์เน็ต ในอินเทอร์เน็ตมีการส่งแบบ ASCII เป็นคำย่อที่มาจาก American Standards Committee on Information Interchange เป็นมาตรฐานในการรับส่งข้อมูลสารสนเทศบนเครือข่ายอินเทอร์เน็ต รูปแบบที่ใช้แทนตัวอักษรที่นิยมใช้กันมากที่สุด เราเรียกว่า (ASCII) โดยจะแทนตัวอักษรด้วยรหัสหรือค่าตัวเลข เช่น ตัวอักษร "A" ถูกแทนด้วยค่า 65 ในขณะที่ตัวอักษร "B" แทนด้วยค่า 66 และ "C" คือ 67 ตามลำดับ รหัส ASCII นี้เอง ซึ่งถูกนำมาใช้งานในการแสดงข้อมูล รูปแบบเอกสาร ที่สามารถพิมพ์ให้ผู้ใช้ได้เห็นในขณะที่การบันทึกบนระบบคอมพิวเตอร์ จะใช้ในการเก็บเป็นตัวเลขแทน ข้อมูลต่างๆต้องมีการเข้ารหัสที่เหมาะสม

18 มาตรฐานเกี่ยวกับ WWW (www.w3c.org)
W3C หรือ World Wide Web Consortium เป็นองค์กรระหว่าง ประเทศที่ทำงานด้านการพัฒนาเทคโนโลยีของ "เวิลด์ไวด์เว็บ" นำโดยนาย ทิม เบิร์นเนอร์ ลี (Tim Berners-Lee) ก่อตั้ง W3C ในปี ค.ศ.1994  มีองค์กรสมาชิกมากกว่า 450 องค์กร ที่เรารู้จัก กันดีเช่น Apple,Google, Microsoft, Sun Microsystems องค์กร W3C นี้ ประกอบด้วยสถาบัน 3 สถาบันคือ MIT ใน สหรัฐอเมริกา INRIA ในยุโรป และ Keio University ในญี่ปุ่น Service  , www ,ftp, im

19 Tim Berners-Lee

20 WWW

21 โปรโตคอลของ www HTTP (Hyper text transfer protocol) Version 1.1 1.0
HTTP Request ในส่วนหน่วยงานที่เกี่ยวกับมาตรฐานของ www มาตรฐานในการสื่อสารกันของ www สัญญาณที่ส่งไป ก็จะเป็นแบบอยู่ในรูปของ Protocol HTTP มีสองแบบคือ แบบ Request Respond มีรูปแบบที่แตกต่างกัน Client Web Server HTTP Respond

22 ทำรายงานเรื่อง Status Code Definitions ของ HTTP ให้ ยกตัวอย่าง 10 code ที่พบบ่อย
ให้หาว่า tag / attribute / value / css ใด ที่เป็นลักษณะเฉพาะ ของเว็บบราวเซอร์ [ IE 5, IE 6, IE 7, Firefox, Chrome, Safari] ให้หาให้ได้มากที่สุด ในส่วนหน่วยงานที่เกี่ยวกับมาตรฐานของ www

23 Introduction to HTML อย่างกระชับ

24 Content Home Page & Internet & Intranet ลักษณะพื้นฐานของ HTML
9/27/2019 Content Home Page & Internet & Intranet ลักษณะพื้นฐานของ HTML การจัดรูปแบบตัวอักษร และการกำหนดสี การจัดคอลัมน์ และการแสดงลำดับรายการ การจัดแสดงผลแบบกลุ่ม

25 เครือข่ายอินเทอร์เนต
9/27/2019 เครือข่ายอินเทอร์เนต เครือข่ายคอมพิวเตอร์ที่มีขนาดใหญ่ทีสุดในโลก ประกอบด้วยเครือข่ายย่อยจำนวนมากมายที่กระจายอยู่ทั่วโลก มีมาตราฐานการเชื่อมโยงเครือข่ายย่อยแบบเดียวกันด้วย โปรโตคอล TCP/IP สามารถรับ - ส่งข้อมูลทุกรูปแบบทั้งตัวอักษร ภาพเคลื่อนไหว และเสียง

26 เครือข่ายอินทราเนต (Intranet)
9/27/2019 เครือข่ายอินทราเนต (Intranet) เป็นการประยุกต์รูปแบบของอินเทอร์เนตมาใช้กันภายในองค์กร มีการใช้โปรแกรม Browser ในการเข้าถึงข้อมูลต่าง ๆ สามารถติดต่อสื่อสารด้วย Electronics mail สามารถรับ-ส่งข้อมูลผ่านช่องทางการสื่อสาร (FTP) และบริการ ต่าง ๆในระบบเครือข่ายอินเทอร์เนตสามารถนำมาใช้ได้ในระบบ อินทราเนต

27 9/27/2019 World Wide Web เป็นระบบการเผยแพร่ข่าวสารข้อมูลในระบบเครือข่าย อินเทอร์เน็ต โดยการเชื่อมโยงและโอนย้ายข้อมูลจากแหล่งข้อมูล ทีเรียกว่า Web Server ข้อมูลใน World Wide Web เป็นได้ทั้งข้อความ รูปภาพและเสียง การเชื่อมโยงใน WWW มีลักษณะของ Hyperlink และ Hypermedia โดยใช้โปรโตคอล HTTP (HyperText Transfer Protocal)

28 9/27/2019 Web Server (Web Site) คือเครื่องคอมพิวเตอร์ระบบ UNIX หรือ Windows Nt หรือ Windows 95 ที่มีโปรแกรมจัดการทำให้เครื่องดังกล่าวทำหน้าที่ เป็นผู้ให้บริการ (Server) คอยให้บริการข้อมูลกับผู้ที่มาติดต่อ โดยผ่านระบบเครือข่ายอินเทอร์เนต หรือ เครือข่ายอินทราเนต

29 9/27/2019 Web Publishing เป็นการเอกสารสำหรับอ่านด้วยคอมพิวเตอร์ โดยไม่ต้องทำเป็นรูปเล่ม หรือพิมพ์ ลงบนกระดาษ เป็นเอกสารแบบ Interactive สามารถแสดงข้อมูลที่เป็นภาพเคลื่อนไหวและมีเสียงได้ เอกสารบน Webจะแยกเก็บเป็นไฟล์ เรียกว่าเอกสารแต่ละหน้าว่า Web Page หน้าแรกของ Web Publishing เรียกว่า Home Page หน้าที่เป็น Homepage จะต้องเก็บในแฟ้มชื่อ index.html หรือ default.html Homepage ทำหน้าที่เสมือนปกหนังสือและหน้าสารบัญ

30 9/27/2019 Home page คืออะไร Home Page คือ หน้าหนังสืออิเล็กทรอนิกส์บน World Wide Web ที่ เสนอข้อมูลใดๆ ที่เจ้าของ Home Page ต้องการจะใส่ลงไปในหน้า หนังสืออิเล็กทรอนิกส์นั้นเช่น ข้อมูลแนะนำตัวเอง ซึ่งอาจเป็นบุคคล หรือองค์กรที่ต้องการให้ผู้อื่นได้รับทราบ หรือข้อมูลที่ น่าสนใจ เป็นต้น ซึ่งใน Home Page หนึ่งๆ อาจมีหลายหน้าจอ (Page) ได้ และ Page หนึ่งๆ เหล่านี้จะมีฐานะเป็น Web Page และมีนามสกุลเป็น .htm หรือ .html ข้อมูลที่แสดงก็เป็นได้ทั้งข้อความ เสียง ภาพนิ่ง และ ภาพเคลื่อนไหว และข้อมูลที่นำเสนอสามารถเชื่อมโยงในรูปของ Hypertext คือ โยง (link) ไปยัง Page อื่นที่จะให้ข้อมูลนั้นๆ ในระดับ ลึกลงไปได้เรื่อยๆ

31 ส่วนประกอบของ Homepage
9/27/2019 ส่วนประกอบของ Homepage 1. ส่วน Header ประกอบด้วย ชื่อหน่วยงาน ตราหรือสัญลักษณ์ของหน่วยงาน หน้าที่หรือวัตถุประสงค์ของหน่วยงาน 2. ส่วน Body ประกอบด้วย เส้นแบ่งข้อความ รายการของหัวข้อหรือเนื้อหา ภาพประกอบ ปุ่มหรือ icon

32 ส่วนประกอบของ Homepage
9/27/2019 ส่วนประกอบของ Homepage 3. ส่วน footer ประกอบด้วย address ของผู้สร้าง(webmaster) และหน่วยงาน วันเวลาที่สร้างและปรับปรุงข้อมูล คำประกาศลิขสิทธิ์ ตราหรือสัญลักษณ์ของหน่วยงาน คำประกาศหรือเจตนารมย์ของหน่วยงาน

33 Basic HTML HTML ย่อมาจาก Hypertext Markup Language
9/27/2019 Basic HTML HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาที่ใช้สำหรับสร้างเอกสาร hypertext สำหรับการสื่อสารผ่าน World Wide Web เอกสารใน HTML เป็นประเภท plain-text (ASCII) ที่สร้างโดยใช้โปรแกรม เอดิเตอร์ใด ๆ ก็ได้ แล้วนำมาประกอบกับคำสั่งของ HTML ซึ่งเรียกว่า tag เพื่อกำหนดให้ browser แสดงข้อความนั้น ๆในรูปแบบที่ต้องการ พัฒนามาจาก SGML (Standard General Markup Language) เอกสาร HTML ไม่ต้อง Compile

34 เครื่องมือที่ใช้ในการสร้างเอกสาร HTML
9/27/2019 เครื่องมือที่ใช้ในการสร้างเอกสาร HTML โปรแกรม Editor Web browser

35 เครื่องมือที่ใช้ในการสร้างเอกสาร HTML
9/27/2019 เครื่องมือที่ใช้ในการสร้างเอกสาร HTML Editor เป็นโปรแกรมที่ใช้สำหรับป้อนสิ่งต่าง ๆที่ต้องการแสดงบน จอภาพ เช่น ข้อความต่าง ๆที่เป็นคำสั่ง ข้อความที่ต้องการให้แสดงบนจอภาพ ชื่อแฟ้มรูปภาพที่ต้องการให้แสดงผล โปรแกรม editor ที่ใช้อาจเป็น Text editor ทั่วไป HTML editor

36 Text Editor Edit หรือ Qedit บน DOS Notepad บน Windows
9/27/2019 Text Editor Edit หรือ Qedit บน DOS Notepad บน Windows Bbedit บน Macintosh VI บน UNIX Word Processor ต่าง ๆ เช่น Microsoft Word

37 HTML Editorและ Authoring Tool
9/27/2019 HTML Editorและ Authoring Tool HotMetal Pro Adobe PageMill Internet Creator HotDogs Inernet Assistant Microsoft FontPage โปรแกรม Converter

38 9/27/2019 Web Browsers เป็นโปรแกรมที่ทำหน้าที่แปลคำสั่งและข้อมูลที่อยู่ในรูปของ ภาษา HTML ให้กลายมาเป็รูปแบบการแสดงข้อมูลบนจอภาพ ตามรูปแบบ คำสั่งที่กำหนดไว้ Web browsers ที่นิยมใช้งานในปัจจุบัน Netscape Navigator Microsoft ‘s Internet Explorer Mosaic

39 องค์ประกอบของเอกสาร HTML
9/27/2019 องค์ประกอบของเอกสาร HTML เอกสาร HTML มีองค์ประกอบที่สำคัญ 2 ส่วน คือ 1. ข้อความที่ให้แสดงบนจอภาพ 2. ข้อความที่เป็นคำสั่ง เรียกว่า HTML tag

40 องค์ประกอบของเอกสาร HTML
9/27/2019 องค์ประกอบของเอกสาร HTML HTML Tag ประกอบด้วยเครื่องหมาย < (Left angle bracket) ตามด้วยชื่อ Tag และ > (Right angle bracket ) เช่น head tag : <HEAD> title tag : <TITLE> body tag : <BODY> ชื่อ tag ที่เขียนอยู่ในเครื่องหมาย <> นี้จะเขียนเป็นตัวใหญ่หรือ ตัวเล็กก็ได้แต่นิยมเขียนตัวใหญ่เพื่อให้เห็นความแตกต่าง

41 ชนิดของ HTML Tag มี 2 ชนิด
9/27/2019 ชนิดของ HTML Tag มี 2 ชนิด tag คู่(Paired tag) มีลักษณะเหมือนกรอบที่สร้างล้อมรอบข้อความที่ต้องการให้ แสดงผลอย่างใดอย่างหนึ่ง โดยเริ่มใส่ tag เปิดไว้หน้าข้อความและใส่ tag ปิด(มี ลักษณะเหมือน tag เปิดแต่มีเครื่องหมาย / นำหน้า) ไว้หลังข้อความ มีรูปแบบคือ <Tag name> message </Tag name> เช่น <HTML> ………</HTML> <HEAD> ………</HEAD> <BODY> ……….</BODY>

42 9/27/2019 HTML Tag tag เดี่ยว (Single tag) เป็น tag ที่มีเฉพาะ Tag เปิดเท่านั้นไม่มี tag ปิดมี รูปแบบคือ <Tag name> เช่น <BR /> ใช้สำหรับขึ้นบรรทัดใหม่ <HR /> ใช้ตีเส้นตามแนวนอน <IMG /> ใช้อ่านภาพ

43 โครงสร้างพื้นฐานของ HTML
Introduction to HTML 9/27/2019 โครงสร้างพื้นฐานของ HTML <HTML> <HEAD> <TITLE>ชิ่อโปรแกรมหรือข้อมูลที่ต้องการแสดง </TITLE> </HEAD> <BODY> …คำสั่งหรือข้อมูลที่ต้องการแสดง </BODY> </HTML>

44 โครงสร้างพื้นฐานของ HTML
9/27/2019 โครงสร้างพื้นฐานของ HTML <HTML> … </HTML> ใช้บอกว่าเป็นเอกสาร HTML ทุก ๆ ส่วนของ เอกสาร HTML ต้องเขียนภายใต้คำสั่งนี้ <HEAD> … </HEAD> เป็นส่วนหัวเรื่องของเอกสาร HTML ภายในคำสั่ง นี้จะมีคำสั่ง <TITLE> … </TITLE> ที่ใช้หัวเรื่องของเอกสารบน title bar ของโปรแกรม Browser และจะปรากฎในคำสั่ง bookmark ของโปรแกรม Browser ด้วย <BODY>…</BODY> เป็นบล็อคที่ใช้บรรจุข้อมูลต่างๆ ของเอกสาร HTML เช่นข้อความ รูปภาพ ตาราง แบบฟอร์ม รวมทั้ง tag ต่าง ๆ ส่วนนี้ เป็นส่วนที่โปรแกรม Browser นำไปแสดงเป็นผลลัพธ์บนจอภาพ

45 ตัวอย่าง <HTML> <HEAD>
9/27/2019 ตัวอย่าง <HTML> <HEAD> <TITLE> This is my first home’s page</TITLE> </HEAD> <BODY> HELLO WORD ! </BODY> </HTML>

46 9/27/2019 กฎในการใช้ HTML แต่ละ Tag ของภาษา HTML จะต้องอยู่ในเครื่อง < >หมายเท่านั้น ชื่อ Tag จะใช้ตัวอักษรตัวใหญ่หรือเล็กก็ได้ มีความหมายเดียวกัน เช่น <title> <TITLE> หรือ <Title> ต่างก็ให้ความหมายเดียวกัน ในการพิมพ์เอกสาร HTML นั้นจะพิมพ์ติดต่อกันทั้งข้อความ และคำสั่ง หรือพิมพ์แยกบรรทัดหรือเว้นช่องว่างก็แล้วแต่ผู้พิมพ์ แต่การพิมพ์ให้ สวยงามจะทำให้งายต่อการอ่านและแก้ไขภายหลัง Introduction to HTML

47 9/27/2019 คำสั่งอธิบายโปรแกรม เราสามารถแทรกคำอธิบายโปรแกรม หรือหมายเหตุลงในโปรแกรม โดยใช้ tag ที่มีรูปแบบดังนี้ <!-- massage--> เมื่อ massage คือข้อความที่ต้องการให้เป็นคำอธิบาย ตัวอย่าง <!-- DEMO Home page Create By Seree Chinodom 26 Dec >

48 การจัดข้อความในเอกสาร HTML
9/27/2019 การจัดข้อความในเอกสาร HTML คำสั่งขึ้นบรรทัดใหม่ คำสั่งให้ขึ้นย่อหน้าใหม่ คำสั่งกำหนดบล็อคข้อความ คำสั่งจัดรูปแบบข้อความ คำสั่งจัดรูปแบบข้อความให้อยู่ตรงกลาง คำสั่งควบคุมให้แสดงข้อความแบบต่อเนื่อง

49 คำสั่งขึ้นบรรทัดใหม่ (Line Break)
9/27/2019 คำสั่งขึ้นบรรทัดใหม่ (Line Break) ปกติโปรแกรม Browser จะแสดงข้อความต่อเนื่องกันตลอด ถึงแม้ว่าจะมี การกด enter ก็ตาม ถ้าต้องการขึ้นบรรทัดใหม่จะต้องใช้คำสั่งของ HTML คือ tag <BR> ซึ่งมีรูปแบบดังนี้ ข้อความ <BR> ตัวอย่าง Department of Computer Science <BR> Faculty of Science <BR> Burpaha University <BR>

50 คำสั่งขึ้นย่อหน้าใหม่ (Paragraph Break)
9/27/2019 คำสั่งขึ้นย่อหน้าใหม่ (Paragraph Break) Tag <P> ใช้ขึ้นย่อหน้าใหม่ การขึ้นย่อหน้าใหม่จะคล้ายกับการขึ้นบรรทัดใหม่ แต่จะเว้นบรรทัดให้ 1 บรรทัด เพื่อแยกย่อหน้าออกจากกันมีรูปแบบคือ <P> ข้อความ </P> ตัวอย่าง <P> Seree Chinodom Department of Computer Science Faculty of Science Burapha University, Chonburi </P>

51 คำสั่งขึ้นย่อหน้าใหม่ (2)
9/27/2019 คำสั่งขึ้นย่อหน้าใหม่ (2) Tag <P> จะมี tag เสริมที่ใช้ประกอบเพื่อใช้ในการจัดข้อความ เราเรียก tag เสริม ว่า attribute tag ซึ่งมีรูปแบบดังนี้ <ALIGN = Position> Position ได้แก่ - LEFT จัดข้อความชิดซ้ายของจอภาพ - RIGHT จัดข้อความชิดขวาของจอภาพ - CENTER จัดข้อความกลางจอภาพ เช่น <P ALIGN = CENTER> Burapha University </P>

52 คำสั่งกำหนดบล็อคข้อความ
9/27/2019 คำสั่งกำหนดบล็อคข้อความ ใช้สำหรับเน้นข้อความเพื่อแยกจากเนื้อหาที่มาก่อน มีรูปแบบดังนี้ <BLOCKQUOTE> ข้อความ </BLOCKQUOTE> ตัวอย่าง This is the blockquote demo <BLOCKQUOTE> Department of Computer science, Faculty of Science, Burapha University . Bangsaen , Chonburi Thailand </BLOCKQUOTE>

53 คำสั่งจัดรูปแบบข้อความให้ตรงตามเอกสารเดิม(Preformatted)
9/27/2019 คำสั่งจัดรูปแบบข้อความให้ตรงตามเอกสารเดิม(Preformatted) ใช้ tag <PRE> โดยข้อความใด ๆ ที่จัดวางภายใน tag นี้ จะถูก โปรแกรม Browser แสดงผลตามที่ได้จัดไว้ มีรูปแบบดังนี้ <PRE> ข้อความ </PRE> ตัวอย่าง <PRE> B U R A P H A U N I V E R S I T Y </PRE>

54 คำสั่งจัดข้อความให้อยู่ตรงกลางบรรทัด(Center)
9/27/2019 คำสั่งจัดข้อความให้อยู่ตรงกลางบรรทัด(Center) คำสั่งที่ใช้สำหรับจัดรูปแบบของข้อความหรือรูปภาพให้อยู่กลาง บรรทัด ได้แก่ tag <CENTER> มีรูปแบบดังนี้ <CENTER> ข้อความ </CENTER> ตัวอย่าง <CENTER> This is text with CENTER tag </CENTER>

55 การตีเส้นตรงแนวนอนในเอกสาร HTML
9/27/2019 การตีเส้นตรงแนวนอนในเอกสาร HTML การตีเส้นตรงแนวนอน (Horizontal line)ใช้ tag <HR> ซึ่ง เป็น tag เดี่ยวที่ไม่มี tag ปิด มีรูปแบบดังนี้ <HR> ตัวอย่าง The following is horizontal line The rest of this is just more text

56 การกำหนดลักษณะของเส้นตรงแนวนอน
9/27/2019 การกำหนดลักษณะของเส้นตรงแนวนอน เราสามารถกำหนด ความหนา ความยาว ตำแหน่งและแสดงผลเส้นทึบของเส้นได้ดังนี้ <HR SIZE = n WIDTH = m ALIGN = position NOSHADE> SIZE = n เป็นความหนาของเส้น ขนาดปกติ 2 pixel WIDTH = m เป็นการกำหนดความยาวของเส้น ถ้าไม่ระบุจะได้เส้นตรงยาวเต็มจอภาพ อาจ ระบุเป็น % ก็ได้ ALIGN = LEFT|RIGHT|CENTER เป็นการกำหนดตำแหน่งเส้นตรงแนวนอน ในกรณีที่เส้นมี ความยาวไม่เต็มจอภาพ กำหนดได้เป็นLEFT, RIGHT, CENTER NOSHADE เป็นการกำหนดเส้นตรงแนวนอนแบบทึบไม่มีเงา

57 ตัวอย่างการกำหนดเส้นตรงแนวนอน
9/27/2019 ตัวอย่างการกำหนดเส้นตรงแนวนอน <HTML> <BODY> <HR SIZE= 40 WIDTH=50% ALIGN = LEFT> <HR SIZE= 20 WIDTH=40% ALIGN = LEFT> <HR NOSHADE SIZE= 10 WIDTH=50% ALIGN = LEFT> <HR NOSHADE SIZE= 100 WIDTH=1% > <HR NOSHADE SIZE= 80 WIDTH= 1% > </BODY> </HTML>

58 การกำหนดหัวเรื่อง(Heading)
9/27/2019 การกำหนดหัวเรื่อง(Heading) HTML กำหนดหัวเรื่องให้มีขนาด แตกต่างกันได้ 6 ระดับโดยใช้ Tag <H1> ถึง <H6> โดยเป็น tag ที่มี tag ปิด มีรูปแบบคือ <Hn> ข้อความ </Hn> ตัวอย่าง <H1> Burapha University </H1> <H2> Burapha University </H2> <H3> Burapha University </H3> <H4> Burapha University </H4> <H5> Burapha University </H5> <H6> Burapha University </H6>

59 การจัดวางตำแหน่งข้อความ
9/27/2019 การจัดวางตำแหน่งข้อความ การจัดวางตำแหน่งข้อความให้ชิดซ้าย ขวา หรืออยู่กึ่งกลางจอภาพ ให้กำหนด attribute ALIGN=LEFT | RIGHT | CENTER ลงภายในตัวกำหนดรูปแบบตัวอักษร Ex. <H1><P ALIGN=LEFT> Dept. of Computer Science </P></H1> <H2><P ALIGN=CENTER> Dept. of Computer Science </P></H2> <H2><P ALIGN=RIGHT >Dept. of Computer Science </P></H2>

60 การกำหนดขนาดของตัวอักษร (Size)
9/27/2019 การกำหนดขนาดของตัวอักษร (Size) คำสั่งกำหนดขนาดตัวอักษรในภาษา HTML จะไม่กำหนดขนาด ตัวอักษรเป็นพอยต์ แต่จะกำหนดเป็นความสูง มี 7 ขนาด โดยใช้ ตัวเลข 1-7 มีรูปแบบดังนี้ <FONT SIZE = n > ข้อความ </FONT> เมื่อ n เป็นเลขจำนวนเต็มบวก 1-7 1 คือขนาดเล็กที่สุด 7 คือขนาดใหญ่ที่สุด

61 การกำหนดขนาดของตัวอักษร (2)
9/27/2019 การกำหนดขนาดของตัวอักษร (2) การกำหนดขนาดตัวอักษรแบบมาตราฐานทั้งเอกสาร ซึ่งสามารถเพิ่มหรือ ลดขนาดได้ภายหลังโดยใช้ <FONT SIZE = +/- n> มีรูปแบบดังนี้ <BASEFONT SIZE = n> ข้อความ ตัวอย่าง <BASEFONT SIZE = 4> Burapha University <BR> <FONT SIZE = +2> Bangsaen Chonburi> </FONT> <BR>

62 9/27/2019 การกำหนดแบบตัวอักษร ปกติโปรแกรม Browser จะแสดงรูปแบบตัวอักษรได้แบบเดียว ถ้าต้องการแสดงแบบตัวอักษร หลายแบบใน Web page เดียวกันจะต้องใช้ tag สำหรับกำหนด Font ซึ่งมีรูปแบบดังนี้ <FONT FACE = “ name1”, ” name2”,…> ตัวอย่าง <FONT FACE = “AngsanaUPC”> มหาวิทยาลัยบูรพา <BR> <FONT FACE = “CordialUPC”> มหาวิทยาลัยบูรพา <BR> <FONT FACE = “DilleniaUPC”> มหาวิทยาลัยบูรพา <BR> <FONT SIZE = 2 FACE = “Courier”> Burapha University <BR>

63 การกำหนดสีให้ตัวอักษร(Color)
9/27/2019 การกำหนดสีให้ตัวอักษร(Color) การกำหนดสีให้ตัวอักษรมี 2 กรณี 1. การกำหนดสีให้ตัวอักษรเฉพาะข้อความ 2. การกำหนดสีให้ตัวอักษรทั้งเอกสาร

64 ความหมายของตัวเลขและการผสมสี
9/27/2019 ความหมายของตัวเลขและการผสมสี ตัวเลขแทนสีที่ใช้เป็นเลขฐานสิบหก (0-9 และ A-F) จำนวน 3 ชุด แต่ละชุดมีค่า 00-FF - ชุดที่ 1 แทนสีแดง (RED) - ชุดที่ 2 แทนสีเขียว (GREEN) - ชุดที่ 3 แทนสีน้ำเงิน (BLUE) RGB (RedGreenBlue) เป้นแม่สีทางวิทยาศาสตร์ และสามารถนำมาใช้ใน ระบบคอมพิวเตอร์ด้วย

65 ตารางสี สี รหัสสี สี รหัสสี ขาว #FFFFFF น้ำเงิน #0000FF
9/27/2019 ตารางสี สี รหัสสี สี รหัสสี ขาว #FFFFFF น้ำเงิน #0000FF ดำ # สีฟ้า #4D4DFF เทา #7F7F7F สีชมพู #CC3299 แดง #FF0000 เขียว #00FF00 สีเหลือง #FFFF00

66 การกำหนดสีให้กับตัวอักษรเฉพาะข้อความ
9/27/2019 การกำหนดสีให้กับตัวอักษรเฉพาะข้อความ กำหนดใน tag <FONT> มีรูปแบบดังนี้ <FONT COLOR = #rrggbb > กำหนดสีจากเปอร์เซ็นต์การผสมสี <FONT COLOR = colorname > กำหนดสีจากสีมาตราฐาน ตัวอย่าง <FONT COLOR = Red> This is Red color <BR> <FONT COLOR = #0000FF> next is blue <BR> <FONT COLOR = #00FF00> This is Green Color <BR>

67 การกำหนดสีให้กับตัวอักษรทั้งเอกสาร
9/27/2019 การกำหนดสีให้กับตัวอักษรทั้งเอกสาร การกำหนดสีให้กับตัวอักษรทั้งเอกสารจะกำหนดใน tag <BODY> ซี่งมีรูปแบบดังนี้ <BODY TEXT = #rrggbb> กำหนดสีจากเปอร์เซ็นต์การผสมสี <BODY TEXT = colorname > กำหนดสีจากชื่อสีมาตราฐาน ตัวอย่าง <BODY TEXT = Red> <H1> This is testing Text Color </H1> All text in this page is red color by body text = Red Text <BR>

68 การใช้ตัวอักษรพิเศษ (Special Character)
9/27/2019 การใช้ตัวอักษรพิเศษ (Special Character) การใส่ข้อความใน Web page ทำได้โดยการพิมพ์ข้อความใด ๆ ลง ระหว่าง tag <BODY> และ </BODY> โดยสามารถพิมพ์ได้ทั้ง ตัวอักษรและตัวเลข รวมทั้งสัญลักษณ์ต่าง ๆ ยกเว้นเครื่องหมาย “ < > และ & ดังนั้นจึงต้องมีคำสั่งพิเศษ สำหรับแทนสัญลักษณ์เหล่านี้ การใส่ตัวอักษรพิเศษลงในเอกสาร HTML เราสามารถดำเนินการได้ โดยใช้รหัสควบคุมซึ่งระบุได้ 2 วิธี ดังนี้ - ระบุชื่อสัญลักษณ์ที่ต้องการ (Name Entities) - ระบุโดยใช้ ASCII Code

69 ระบุชื่อสัญลักษณ์ที่ต้องการ
9/27/2019 ระบุชื่อสัญลักษณ์ที่ต้องการ ชื่อสัญลักษณ์ที่ระบุจะขึ้นต้นด้วยเครื่องหมาย & (Ampersand) แล้วตามด้วยชื่อย่อ ของสัญลักษณ์ " แสดงเครื่องหมาย quotation mark (“) < แสดงเครื่องหมาย Less than (<) > แสดงเครื่องหมาย greater than (>) & แสดงเครื่องหมาย ampersand (&)   แสดงการเว้นวรรค 1 ตัวอักษร ® แสดงเครื่องหมายพิเศษเครื่องหมายลงทะเบียน

70 การระบุโดยใช้รหัส ASCII
9/27/2019 การระบุโดยใช้รหัส ASCII เริ่มต้นด้วยเครื่องหมาย & แล้วตามด้วยเครื่องหมาย # และค่า ของตัวเลขรหัส ASCII ตัวอย่าง Symbol of Copyright is :© <BR> Symbol of Registration is :® <BR>

71 การแสดงผลแบบรายการ (LIST)
9/27/2019 การแสดงผลแบบรายการ (LIST) รูปแบบ <LIST TYPE> <ITEM> First Item in List <ITEM> Second Item in List <ITEM> Third Item in List </LIST TYPE>

72 การแสดงผลรายการแบบลำดับตัวเลข(orderer Lists)
9/27/2019 การแสดงผลรายการแบบลำดับตัวเลข(orderer Lists) ใช้แสดงรายการที่ต้องมีการเรียงลำดับหรือจัดลำดับความสัมคัญของหัวข้อต่าง ๆ โดย สามารถใช้ตัวเลข หรือตัวอักษรเรียงตามลำดับได้ มีรูปแบบดังนี้ <OL TYPE = number_type START = number..> <LI> Item number one <LI> Item number two <LI> Item number tree </OL> TYPE เป็นการกำหนดว่าจะแสดงรายการโดยใช้ตัวเลข ตัวอักษร หรือตัวอักษรโรมันเป็นต้น

73 9/27/2019 ตัวอย่าง <OL TYPE = a> <LI> Oranges <LI> Peaches <LI> Grapes </OL> ได้ผลลัพธ์คือ a. Oranges b. Peaches c. Grapes

74 9/27/2019 ตัวอย่าง <OL TYPE = I> <LI> Oranges <LI> Peaches <LI> Grapes </OL> ได้ผลลัพธ์คือ I. Oranges II. Peaches III. Grapes

75 9/27/2019 ตัวอย่าง <OL START = 3> <LI> Oranges <LI> Peaches <LI VALUE = 7> Grapes <LI>Apples </OL> ได้ผลลัพธ์คือ 3. Oranges 4. Peaches 7. Grapes 8. Apples

76 การแสดงผลรายการแบบไม่มีลำดับ(Unordered List)
9/27/2019 การแสดงผลรายการแบบไม่มีลำดับ(Unordered List) Unordered Lists แบ่งเป็นหัวข้อย่อยโดยไม่มีหน่วยนับนำหน้า แต่จะเป็น bullet ซึ่งสามารถ กำหนดรูปแบบได้ โดยระบุหลังคำสั่ง TYPE ต่อจาก <UL> เป็น disc(วงกลมทึบ), circle, square รูปแบบ <UL TYPE = bullet_type> <LI> First Item <LI> Second Item <LI> Third Item </UL>

77 ตัวอย่าง These are name of CS Staff <UL>
9/27/2019 ตัวอย่าง These are name of CS Staff <UL> <LI>Seree Chinodom <LI>Tawatchai Iempairoj <LI>Jira Jaturanon <LI>Surangkana Thumlikhit <LI>Others </UL>

78 9/27/2019 Directory Lists เป็นการแสดงผลข้อมูลเหมือนกับ <UL>,</UL> แต่จะถูกจำกัดด้วย ตัวอักษรไม่เกิน 24 ตัว มีรูปแบบดังนี้ <DIR> <LI> message <LI> massage </DIR>

79 9/27/2019 Menu Lists เป็นการแสดงรายการต่างๆแบบไม่มีตัวเลข แต่มีหัวข้อเป็นสัญลักษณ์ (Bullet) แต่ ลักษณะการแสดงผลข้อมูลจะกะทัดรัดกว่าการใช้ tag <UL> มีรูปแบบดังนี้ <MENU> <LI> message <LI> massage </MENU>

80 9/27/2019 Definition Lists เป็นคำสั่งที่ใช้แสดงในรูปของคำจำกัดความ นิยาม คำศัพท์หรือหัวข้อที่ต้องการอธิบาย ใช้ร่วมกับ tag <DT> และ <DD> มีรูปแบบดังนี้ <DL> <DT> หัวข้อย่อย <DD> รายละเอียด <DD> รายละเอียด ... </DL>

81 ตัวอย่าง Important Web Term <DL> <DT>HTML
9/27/2019 ตัวอย่าง Important Web Term <DL> <DT>HTML <DD>Hyper Text Markup Language <DT>WWW <DD>World Wide Web <DT>VRML <DD>Virtual Reality Markup Language </DL>

82 Defintion List-<DL COMPACT>
9/27/2019 Defintion List-<DL COMPACT> เป็นคำสั่งที่ใช้แสดงผลข้อมูลจาก tag <DT> และ <DD> ให้อยู่ในบรรทัดเดียวกัน โดยข้อความที่อยู่ใน <DT>ไม่ยาวมากนัก มีรูปแบบ <DL COMPACT> <DT> หัวข้อย่อย <DD> รายละเอียด <DT> หัวข้อย่อย <DD> รายละเอียด </DL>

83 NESTED LISTS <UL> <LI> few New England states:
9/27/2019 NESTED LISTS <UL> <LI> few New England states: <LI> Vermont <LI> New Hampshire </UL> <LI> One Midwestern state: <LI> Michigan