การพัฒนาและการบริหารเว็บไซต์ (Web Development and Administration)

สัปดาห์ที่ 1 : แนะนำรายวิชาการพัฒนาและการบริหารเว็บไซต์ (Web Development and Administration)

- หลักการของภาษา HTML
- หลักการของสไตล์ชีต

ความรู้พื้นฐานเกี่ยวกับอินเตอร์เน็ต

 ในปี พ.ศ. 2512 กระทรวงกลาโหม (ทหาร) ของสหรัฐอเมริกา วิจัยการรับส่งข้อมูลระหว่างเครื่องคอมพิวเตอร์ ตั้งชื่อโครงการนี้ ว่าอะไร ? และผลการวิจัยในโครงการนี้ ได้อะไรออกมา ?
ตอบ : ........................................................................... (ARPANET / TCP/IP)

 คำถาม : คอมพิวเตอร์ที่จะเชื่อมต่ออินเตอร์เน็ตจำเป็นต้องมีหมายเลข IP นิสิตเห็นด้วยหรือไม่ ให้เหตุผลประกอบ ?
ตอบ : ............................................................................ [เห็นด้วย / ไม่เห็นด้วย]

 คำถาม : TCP / IP ย่อจากคำใด ?
ตอบ : ............................................................................. (Transmission Control Protocol/Internet Protocol)

 คำถาม : จงบอกวิธีตรวจหมายเลข IP ในเครื่องที่นิสิตใช้งานและเขียนหมายเลขไอพีที่นิสิตใช้งาน ?
ตอบ : .............................................................................. (start -> cmd -> ipconfig)

โดเมนเนม (Domain name)

 การจดจำหมายเลข IP ไม่สะดวกและไม่สื่อความหมาย จึงมีบริการการแปลง IP เป็น ชื่อ Domain เช่น 202.28.32.35 มีชื่อโดเมน คือ http://www.msu.ac.th จงตรวจสอบว่า เว็บไซต์ http://google.com มีไอพีเป็นเลขใด ?
ตอบ : ............................................................................. (start -> cmd -> nslookup google.com) หรือ ping google.com

 คำถาม : เพื่อให้การจัดหมวดหมูเว็บไซต์ทำได้เป็นระเบียบ จึงมีการกำหนดนามสกุลของโดเมน เช่น
- .com หรือ .co -> สำหรับเว็บไซต์เอกชนทั่วไป
- .ac หรือ .edu -> สำหรับเว็บไซต์สถาบันการศึกษา
- .go หรือ .gov -> สำหรับเว็บองค์กรหรือรัฐบาล
- .mi หรือ .mil -> สำหรับเว็บทางทหาร
- .net -> สำหรับเว็บทางให้บริการเครือข่าย
- .org หรือ .or -> สำหรับเว็บที่ไม่หวังผลกำไร

หากนิสิตต้องการจดโดเมนเพื่อขายสินค้า ควรจดด้วยนามสกุลใด ?
ตอบ : ........................................................................... ( .com )

 คำถาม : จงอธิบาย CMS คืออะไร และยกตัวอย่างอย่างน้อย 3 ชนิด ?
ตอบ : ...........................................................................

โครงสร้างเอกสาร HTML

» โครงสร้างเอกสาร HTML ประกอบด้วยแท็ก (tag) มีโครงสร้างดังนี้

กิจกรรมที่ 1: ติดตั้งโปรแกรม OpenVPN

โปรแกรม OpenVPN ใช้สำหรับเชื่อมต่อเครือข่ายเน็ตเวอร์คจากภายนอกมหาวิทยาลัย เช่น AIS, DTAC, 3BB ฯลฯ ให้เชื่อมเข้ามาเป็นเครือข่ายเดียวกับมหาวิทยาลัยมหาสารคาม ทำให้นิสิตสามารถใช้โปรแกรม WinSCP เพื่อถ่ายโอนไฟล์เข้าไปเก็บไว้บนเซิร์ฟเวอร์ที่ตั้งอยู่ในมหาวิทยาลัยมหาสารคามได้

หมายเหตุ: เครื่องเซิร์ฟเวอร์เบอร์ 10.33.3.8 ตั้งอยู่ที่ห้องพักครู คณะวิทยาการสารสนเทศ มหาวิทยาลัยมหาสารคาม

1. ไปที่เว็บ VPN ของมหาวิทยาลัยมหาสารคาม ->  https://vpn.msu.ac.th/m-win10/
2. ดาวน์โหลดโปรแกรม OpenVPN ได้ที่ลิงค์ https://openvpn.net/downloads/openvpn-connect-v3-windows.msi
3. ติดตั้งตามวีดีโอที่ศูนย์คอมพิวเตอร์ของมหาวิทยาลัยมหาสารคามได้แนะนำตามลิงค์นี้

กิจกรรมที่ 2: ติดตั้งโปรแกรม WinSCP

โปรแกรม WinSCP ใช้สำหรับจัดการไฟล์ เช่น สร้าง ลบ แก้ไขและถ่ายโอนไฟล์เข้าไปเก็บไว้บนเซิร์ฟเวอร์

1. ดาวน์โหลด winscp ที่นี่ https://sourceforge.net/projects/winscp/
2. เลือก New Site-> FTP -> Host Name = 10.33.3.85 -> Port=21 -> username = รหัสนิสิต -> password = รหัสที่แจ้งในห้อง

กิจกรรมที่ 3: ติดตั้งโปรแกรม Visual Studio Code

โปรแกรม Visual Studio Code ใช้สำหรับสร้างและแก้ไขไฟล์เอกสารต่าง ๆ ในวิชานี้จะใช้ร่วมกับโปรแกรม WinSCP เพื่อแก้ไขไฟล์ .php และ .html

1. ดาวน์โหลด Visual Studio Code ที่นี่ https://code.visualstudio.com/

» การตั้ง Visual Studio Code เป็น Editor ให้กับ WinSCP โดยเลือก View -> Preference -> Editors -> กดปุ่ม Add จากนั้นเลือก "C:\Users\{โฟลเดอร์}\AppData\Local\Programs\Microsoft VS Code\Code.exe" จากนั้นกดปุ่ม up เพื่อเลื่อนขึ้นไปบนสุดเป็น editor แรก 
» การตั้ง Theme ให้กับ Visual Studio Code  เลือก File -> Preference -> Color Theme -> เลือกโทนสีที่ต้องการ
» การตั้งฟอนต์ให้กับ Visual Studio Code เลือก File -> Preference -> Setting -> Text Editor -> Font จากนั้นป้อนชื่อฟอนต์ที่ต้องการลงในช่องฟอนต์

วีดีโอการสอน: การตั้งค่า visual studio code เป็นโปรแกรมแก้ไขซอร์สโค๊ด

วีดีโอสอน : การตั้งค่า visual studio code เป็นโปรแกรมแก้ไขซอร์สโค๊ด

กิจกรรมที่ 4: เขียนภาษา HTML แสดงคำว่า สวัสดีชาวโลกและชื่อนิสิต

1. โปรแกรม winscp -> สร้างไดเร็คทอรี่ web-design
2. เข้าไปในไดเร็คทอรี่ web-design
3. คลิ๊กขวา -> New -> File ตั่งชื่อไฟล์ว่า index.php
4. เขียนโค๊ดดังต่อไปนี้

<html>
<head></head>
<body>
สวัสดีชาวโลก ผม/ฉัน:ชื่อ ........................
</body>
</html>

5.เปิดเว็บบราวเซอร์ ใส่ URL: http://10.33.3.85/รหัสนิสิต/web-design

กิจกรรมที่ 5: เขียนภาษา HTML จัดรูปแบบตัวอักษร

1. ตัวหนา ใช้แท็ก <b>  เช่น  A<b>B</b>C  จะมีค่าเท่ากับ ABC 
2. ตัวเอียง ใช้แท็ก <i>  เช่น  A<i>B</i>C  จะมีค่าเท่ากับ ABC 
3. ตัวขีดเส้นใต้ ใช้แท็ก <u>  เช่น  A<u>B</u>C  จะมีค่าเท่ากับ ABC 
4. ตัวหนาและเอียง ใช้แท็ก <b> และ <i>  เช่น  A<b><i>B</i></b>C  จะมีค่าเท่ากับ ABC

ให้นิสิตเขียน รหัสนิสิต ชื่อ  สกุล มือถือ 
โดยให้รหัสนิสิตเป็นตัวเข้ม ชื่อเป็นตัวเอียง นามสกุลเป็นตัวขีดเส้นใต้ และมือถือเป็นทั้งเอียงและหนา เขียนเพิ่มจากกิจกรรมที่ผ่านมาลงในไฟล์ index.php

3806908 จักรกฤษณ์  แสงแก้ว 083-6041155

กรณีพบปัญหาภาษาไทยให้แก้ไขดังนี้

เขียนในส่วนของ head ดังนี้
<head>
<meta charset='utf-8'>
</head>

กรณีที่ยังพบปัญหาภาษาไทยให้ตรวจสอบการเข้ารหัสไฟล์ต้องเป็น UTF-8

1. เปิด notepad
2. เขียนโค๊ด HTML 
3. บันทึก -> ที่ช่อง encoding ให้เลือก UTF-8 
ปล. ปัญหาที่เกิดขึ้นเพราะบันทึกลงในไฟล์ ANSI ให้เปลี่ยนเป็น UTF-8

โครงสร้างของแท็กในเอกสาร HTML

โครงสร้างของแท็ก ประกอบด้วย 1. attribute และ value 2. content ของแท็ก

การแสดงรายการ

การแสดงรายการ (List) มี 2 แบบ 
1) <ol> การสร้างรายการแบบเรียงลำดับ (Order List หรือ Numbered List) 
- แอตทริบิวส์ type ประกอบด้วย 1) A = เรียงด้วยตัวพิมพ์ใหญ่ 2) a = เรียงด้วยตัวพิมพ์เล็ก 3) I = เรียงด้วยอักษรโรมันใหญ่ 4) i = เรียงด้วยอังษรโรมันเล็ก 5) 1 = เรียงด้วยตัวเลขอาร์บิก
- แอตทริบิวส์ start คือ ค่าเริ่มต้นของการเรียงลำดับ
2) แบบไม่มีการแสดงลำดับ มีแอตริบิวส์ type ได้แก่ 1) disc = แสดงวงกลมทึบ 2) circle = แสดงวงกลมโปร่ง 3) square = สี่เหลี่ยมทึบ

การแสดงรายการแบบ OL (Order List)

- Order List คือ รายการที่มีลำดับ

<html><body>
<ol>
<li>Google</li>
<li>Gmail</li>
<li>Youtube</li>
</ol>
</body></html>

 ผลลัพธ์

Google
Gmail
Youtube

การแสดงรายการแบบ OL (Order List) และแอตทริบิวส์ type = "A"

- Order List คือ รายการที่มีลำดับ 
- แอตทริบิวส์ type="A" คือ เลขอารบิคตัวพิมพ์ใหญ่

<html><body>
<ol type = "A" >
<li>Google</li>
<li>Gmail</li>
<li>Youtube</li>
</ol>
</body></html>

 ผลลัพธ์

Google
Gmail
Youtube

การแสดงรายการแบบ OL (Order List) และแอตทริบิวส์ start = ค่าเริ่มต้น

- Order List คือ รายการที่มีลำดับ 
- แอตทริบิวส์ start=ค่าเริ่มต้น

<html><body>
<ol type = "1" start="10" >
<li>Google</li>
<li>Gmail</li>
<li>Youtube</li>
</ol>
</body></html>

 ผลลัพธ์

Google
Gmail
Youtube

การแสดงรายการแบบ OL (Order List) ด้วยแอตทริบิวส์ start และ type

- Order List คือ รายการที่มีลำดับ 
- แอตทริบิวส์ start=ค่าเริ่มต้น 
- แอตทริบิวส์ type=ชนิดการแสดงผล I คือ ตัวเลขโรมันตัวพิมพ์ใหญ่ , i คือเลขโรมันตัวพิมพ์เล็ก

<html><body>
<ol type = "I" start="10" >
<li>Google</li>
<li>Gmail</li>
<li>Youtube</li>
</ol>
</body></html>

 ผลลัพธ์

Google
Gmail
Youtube

การแสดงรายการแบบ UL (Unorder List)

- Unorder List คือ รายการที่ไม่มีลำดับตัวเลข เป็นวงกลมหรือสี่เหลี่ยมด้านหน้ารายการ

<html><body>
<ul>
<li>Google</li>
<li>Gmail</li>
<li>Youtube</li>
</ul>
</body></html>

ผลลัพธ์

Google
Gmail
Youtube

การแสดงรายการแบบ UL (Unorder List) และ type="disc"

- Unorder List คือ รายการที่ไม่มีลำดับตัวเลข เป็นวงกลมหรือสี่เหลี่ยมด้านหน้ารายการ 
- แอตทริบิวส์ type="disc" คือ วงกลมสีดำด้านหน้ารายการ

<html><body>
<ul type="disc">
<li>Google</li>
<li>Gmail</li>
<li>Youtube</li>
</ul>
</body></html>

ผลลัพธ์

Google
Gmail
Youtube

การแสดงรายการแบบ UL (Unorder List) และ type="circle"

- Unorder List คือ รายการที่ไม่มีลำดับตัวเลข เป็นวงกลมหรือสี่เหลี่ยมด้านหน้ารายการ 
- แอตทริบิวส์ type="circle" คือ วงกลมขอบดำด้านหน้ารายการ

<html><body>
<ul type="circle">
<li>Google</li>
<li>Gmail</li>
<li>Youtube</li>
</ul>
</body></html>

 ผลลัพธ์

Google
Gmail
Youtube

การแสดงรายการแบบ UL (Unorder List) และ type="square"

- Unorder List คือ รายการที่ไม่มีลำดับตัวเลข เป็นวงกลมหรือสี่เหลี่ยมด้านหน้ารายการ 
- แอตทริบิวส์ type="square" คือ สี่เหลี่ยมด้านหน้ารายการ

<html><body>
<ul type="square">
<li>Google</li>
<li>Gmail</li>
<li>Youtube</li>
</ul>
</body></html>

 ผลลัพธ์

Google
Gmail
Youtube

การใส่รูป

คำอธิบาย : 
1. การใส่รูปใช้แท็กหรือคำสั่ง <img> 
2. ไฟล์ภาพมีนามสกุลต่าง ๆ ได้แก่ 
- .gif เป็นได้ทั้งภาพนิ่งและภาพเคลื่อนไหว ใช้ 8bit ทำให้มี 256 สี 
- .jpg หรือ .jpeg 
- .png ใช้ 24bit ทำให้มีสีได้ 16.7 ล้านสี ภาพ png สามารถกำหนดความโปร่งแสงของพื้นหลังได้
3. แท็กหรือคำสั่ง <img> ประกอบด้วยแอตทริบิวส์ ต่อไปนี้
- width 
- height
- title
- align
- hspace
- vspace
- border
ปล. แอตทริบิวส์ align, border, hspace และ vspace ไม่สนับสนุน HTML5 ให้กำหนดผ่าน CSS
4. การใส่ภาพพื้นหลังในเว็บใช้แอตทริบิวส์ background

การใส่รูปและแอตทริบิวส์ src

- แท็ก img สำหรับใส่รูปในหน้าเว็บเพจ
- แอตทริบิวส์ src="ตำแหน่งไฟล์รูป"

<html><body>
<img src="https://dsdi.msu.ac.th/images/dsdi-0.gif">
</body></html>

 ผลลัพธ์

การใส่รูปและแอตทริบิวส์ src และ width

- แท็ก img สำหรับใส่รูปในหน้าเว็บเพจ
- แอตทริบิวส์ src="ตำแหน่งไฟล์รูป" 
- แอตทริบิวส์ width='ความกว้าง' กำหนดเป็น px (pixel จะเป็นขนาดคงที่) ส่วนกำหนดเป็น % จะแสดงเป็นเปอร์เซ็นต์ตามขนาดบราวเซอร์

<html><body>
<img width="500px" src="https://dsdi.msu.ac.th/images/dsdi-0.gif">
</body></html>

 ผลลัพธ์

การใส่รูปและแอตทริบิวส์ src และ width และ height

- แท็ก img สำหรับใส่รูปในหน้าเว็บเพจ
- แอตทริบิวส์ src="ตำแหน่งไฟล์รูป" 
- แอตทริบิวส์ width='ความกว้าง' กำหนดเป็น px (pixel จะเป็นขนาดคงที่) ส่วนกำหนดเป็น % จะแสดงเป็นเปอร์เซ็นต์ตามขนาดบราวเซอร์
- แอตทริบิวส์ height = "ความสูงของภาพ"

<html><body>
<img width="100%" height="50px" src="https://dsdi.msu.ac.th/images/dsdi-0.gif">
</body></html>

 ผลลัพธ์

การใส่รูปและแอตทริบิวส์ src และ title

- แท็ก img สำหรับใส่รูปในหน้าเว็บเพจ
- แอตทริบิวส์ src="ตำแหน่งไฟล์รูป" 
- แอตทริบิวส์ width='ความกว้าง' กำหนดเป็น px (pixel จะเป็นขนาดคงที่) ส่วนกำหนดเป็น % จะแสดงเป็นเปอร์เซ็นต์ตามขนาดบราวเซอร์
- แอตทริบิวส์ title = "ข้อความเมื่อเมาส์เลื่อนอยู่บนภาพ"

<html><body>
<img title="นี่คือรูปโลโก้" src="https://dsdi.msu.ac.th/images/dsdi-0.gif">
</body></html>

 ผลลัพธ์

การใส่รูปและแอตทริบิวส์ src และ aligh

- แท็ก img สำหรับใส่รูปในหน้าเว็บเพจ
- แอตทริบิวส์ aligh = left center right ตำแหน่งของภาพ

<html><body>
<img align="right" src="http://web.is.it.msu.ac.th/images/is-logo-01.png">
</body></html>
ปล. แอตทริบิวส์ align ไม่สนับสนุน HTML5 ให้ใช้ CSS แทน

 ผลลัพธ์

การกำหนดขอบรูป

border: 3px solid transparent;

การใส่ตาราง

1. การใส่ตารางใช้แท็กหรือคำสั่ง <table> 
2. คำสั่ง <table> ประกอบด้วยแท็กหรือคำสั่งย่อย ดังนี้
- <caption> คือ ข้อความอธิบายว่าตารางนี้คืออะไร
- <tr> คือ การหนึ่งแถวภายในตาราง
- <td> คือ การคอลัมน์ของแต่ละแถว
3. แท็ก <table> ประกอบด้วยแอตทริบิวส์ต่อไปนี้ 
- border คือ ความหนากรอบตาราง
- height คือ ความสูงของตาราง
- width คือ ความกว้างของตาราง
- cellspacing คือ ระยะเซลล์ในตาราง
- cellpadding คือ ระยะระหว่างเซลล์ถึงข้อความ
- align คือ การจัดตำแหน่ง ชิดซ้าย ชิดขวา หรือกึ่งกลางเซลล์
ปล. แอตทริบิวส์ align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary และ width ไม่สนับสนุนใน HTML5 ให้กำหนดผ่าน CSS แทน

การใส่ตาราง

- แท็ก table สำหรับใส่ตาราง ใช้ร่วมกับแท็ก tr (ขึ้นแถวใหม่) และ td (ขึ้นคอลัมน์ใหม่)

<html>
<body>
<table border='1px'>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</body>
</html>

 ผลลัพธ์

Cell A

Cell B

การใส่ตารางและแอตทริบิวส์ th

- แท็ก table สำหรับใส่ตาราง ใช้ร่วมกับแท็ก tr (ขึ้นแถวใหม่) และ td (ขึ้นคอลัมน์ใหม่) 
- แอตทริบิวส์ th คือส่วนหัวของของตาราง

<html>
<body>
<table border="1px">
<tr> <th>เดือน</th> <th>ค่าใช้จ่าย</th></tr>
<tr> <td>มกราคม</td><td>2500 บาท</td></tr>
</table>
</body>
</html>

 ผลลัพธ์

เดือน	ค่าใช้จ่าย
มกราคม	2500 บาท

การใส่ลิงค์

1. การใส่ลิงค์ใช้แท็กหรือคำสั่ง <a> 
2. แอตทริบิวส์ของคำสั่ง <a> ได้แก่
- href คือ ลิงค์ไปยังหน้าเว็บอื่น (HyperText Reference)
- name คือ เนื้อหาที่ยาว ๆ ในหนึ่งหน้าสามารถแบ่งเป็นส่วน ๆ และเข้าถึงแต่ละส่วนได้ โดยระบุแต่ละส่วนด้วยแอตทริบิวส์ name
- target คือ การเปิดลิงค์จะให้อยู่ในหน้าเว็บใหม่หรืออยู่ในหน้าเว็บเดิม ถ้าต้องการเปิดหน้าเว็บใหม่ กำหนด target = "_blank"
3. การลิงค์ไปยังอีเมล์ใช้แอตทริบิวส์ href โดยกำหนดค่าเป็น "mailto:ชื่ออีเมล์"
4. การลิงค์ไปหาไฟล์เพื่อดาวน์โหลด

การใส่ลิงค์ด้วยแท็ก a และแอตทริบิวส์ href

- แท็ก a เป็นการใส่ลิงค์ 
- แอตทริบิวส์ href คือลิงค์
- คอนเทนส์ ของแท็ก a คือข้อความลิงค์

<html>
<body>
<a href="http://google.com">GOOOGLE</a> <br/>
<a href="http://youtube.com">YOUTUBE</a>
</body>
</html>

 ผลลัพธ์

GOOOGLE
YOUTUBE

การใส่ลิงค์ด้วยแท็ก a และแอตทริบิวส์ target

- แท็ก a เป็นการใส่ลิงค์ 
- แอตทริบิวส์ target = "_blank" จะเปิดลิงค์ในแท็บใหม่ของบราวเซอร์

<html>
<body>
<a target="_blank" href="http://google.com">GOOOGLE</a> <br/>
<a target="_blank" href="http://youtube.com">YOUTUBE</a>
</body>
</html>

 ผลลัพธ์

GOOOGLE
YOUTUBE

การใส่ลิงค์อีเมล์ด้วยแท็ก a และแอตทริบิวส์ href

- แท็ก a เป็นการใส่ลิงค์ 
- แอตทริบิวส์ href = "mailto:อีเมล์"
- content ของแท็ก a จะเป็นข้อความบนลิงค์การส่งเมล์

<html>
<body>
<a href="mailto:admin@gmail.com">อีเมล์ถึง admin</a>
</body>
</html>

 ผลลัพธ์

อีเมล์ถึง admin

การใส่ลิงค์ดาวน์โหลดไฟล์ด้วยแท็ก a และแอตทริบิวส์ href

- แท็ก a เป็นการใส่ลิงค์ 
- แอตทริบิวส์ href = "ตำแหน่งของไฟล์ระบุด้วย URL"
- content ของแท็ก a จะเป็นข้อความบนลิงค์ดาวน์โหลดไฟล์

<html>
<body>
<a href="http://ftp.psu.ac.th/pub/wireshark/Wireshark-win64-1.11.3.exe">คลิ๊กดาวน์โหลด Wieshark</a>
</body>
</html>

 ผลลัพธ์

คลิ๊กดาวน์โหลด Wieshark

การใส่ไฟล์มัลติมีเดีย (Multimedia)

 ไฟล์มัลติมีเดีย ได้แก่ ไฟล์เสียง , ไฟล์วิดีโอ 
1. การใส่เสียง ใช้แท็ก <audio> มีแอตทริบิวส์ดังนี้
- src คือ ชื่อไฟล์เสียง
- autoplay คือ กำหนดให้เล่นเสียงทันทีเมื่อเปิดหน้าเว็บ
- controls คือ กำหนดให้มีแผงควบคุมเสียง
- loop คือ กำหนดให้เล่นเสียงกี่รอบ
- preload คือ กำหนดให้โหลดไฟล์ไว้ก่อนค่าที่กำหนด คือ 1) none คือไม่ต้องโหลดเอาไว้ก่อน 2) metadata คือ โหลดเฉพาะข้อมูลของไฟล์เสียง 3) auto คือ โหลดไฟล์เสียงเข้ามาเก็บในบราวเซอร์ก่อนซึ่งช่วยให้เล่นไฟล์เสียงได้รวดเร็วขึ้น
2. การใส่วิดีโอในเว็บใช้คำสั่ง <video> ประกอบด้วยแอตทริบิวส์ดังนี้
- autoplay คือ เล่นวิดีโอทันทีเมื่อเปิดหน้าเว็บ
- controls คือ แสดงแผงควบคุม
- loop คือ จำนวนรอบการเล่นวิดีโอ
- muted คือ ไม่เปิดเสียง
- poster คือ กำหนดรูปภาพแทนวิดีโอก่อนที่จะคลิ๊กเพื่อเล่นวิดีโอ
- width คือ ความกว้างวิดีโอ
- height คือ ความสูงวิดีโอ
- preload คือ การโหลดไฟล์วิดีโอเข้ามาก่อน จะได้เล่นวิดีโอได้เร็วขึ้น 1) none คือไม่ต้องโหลดวิดีโอเข้ามาก่อน 2) metadata คือโหลดเฉพาะข้อมูลรายละเอียดไฟล์วิดีโอ 3) auto คือ เล่นวิดีโอเมื่อเปิดหน้าเว็บ
- mediagroup คือ กรณีมีวิดีโอหลายเรื่องในหน้าเดียวกัน จัดเป็นกลุ่มเดีวกัน
3. รูปแบบไฟล์เสียง ได้แก่ 
- .OGG คือ บีบอัดแต่ไม่ลดคุณภาพ
- .MP3 คือ บีบอัดและลดคุณภาพเสียง
- WAV คือ รูปแบบไฟล์แบบเก่า มีขนาดใหญ่ พัฒนาโดยไมโครซอฟต์และ IBM
4. รูปแบบไฟล์วิดีโอ ได้แก่
- OGG คุณภาพใกล้เคียงไฟล์ .MP4
- H.264 (MP4) นิยมใช้ใน Youtube, iTunes Store 
- VP8/9 (WebM) ออกแบบสำหรับ HTML5 Video</pre>

การใส่เสียงออดิโอด้วยแท็ก audio

- แท็ก audio เป็นการใส่เสียงลงในหน้าเว็บเพจ 
- แท็ก source สำหรับใส่มีเดียที่เป็นไฟล์เสียง 
- แอตทริบิวส์ src = "ไฟล์เสียง" 
- แอตทริบิวส์ type = "ประเภทของสื่อหรือมีเดีย" 
- content ของแท็ก audio แสดงข้อความเมื่อบราวเซอร์ไม่สนับสนุนการเล่นไฟล์เสียง

<audio controls>
  <source src="https://dsdi.msu.ac.th/articles/thamma/learning_and_punya.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

 ผลลัพธ์

การใส่เสียงออดิโอด้วยแท็ก video

- แท็ก video เป็นการใส่วีดีโอลงในหน้าเว็บเพจ 
- แท็ก source สำหรับใส่มีเดียที่เป็นไฟล์วีดีโอ 
- แอตทริบิวส์ src = "ไฟล์วีดีโอ" 
- แอตทริบิวส์ type = "ประเภทของสื่อหรือมีเดีย" 
- content ของแท็ก video แสดงข้อความเมื่อบราวเซอร์ไม่สนับสนุนการเล่นไฟล์วีดีโอ

<video width="320" height="240" controls>
<source src="/data/articles/programming/gis2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

 ผลลัพธ์

ใบงาน 6 : เอกสารราชการ

» ให้นิสิตเขียนเว็บโค๊ด HTML เพื่อสร้างผลลัพธ์ ดังนี้

รายชื่อการเข้าเรียนและส่งงาน

» lab1-การตรวจเลขไอพี.txt
» lab2-winscp-vscode.txt
» lab3.txt
» lab4.txt
» lab5-basic-tags.txt
» lab6-หนังสือราชการ.txt
» sitin.txt

แหล่งข้อมูลเพิ่มเติม

- https://www.w3schools.com/