Current Directory:
/home/webapp68.cm.in.th/u68319090010/OS/InstallUbuntu
Upload
Create File
File Name
Size
Actions
📁 images
Folder
Edit
|
Delete
|
Rename
|
Download
MgfRut.html
25639 bytes
Edit
|
Delete
|
Rename
|
Download
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MgfRut - Ubuntu Guide</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <!-- Bootstrap Icons --> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" /> <!-- Glightbox CSS --> <link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet" /> <style> body { font-family: 'Segoe UI', sans-serif; scroll-behavior: smooth; background-color: #fefefe; } section { padding: 60px 0; } .hero { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 100px 20px; text-align: center; border-bottom: 1px solid #ddd; } h1, h2, h3 { color: #343a40; } .img-fluid { border-radius: 8px; margin-bottom: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } footer { background-color: #212529; color: white; padding: 30px 0; margin-top: 40px; } .modal-body p { font-size: 1rem; } .container ul { list-style-type: none; padding-left: 0; } .container ul li { background: #f8f9fa; padding: 10px; margin-bottom: 5px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .modal-content { border-radius: 12px; } .row.g-4 { display: flex; flex-wrap: wrap; gap: 1.5rem; } .col-md-4 { flex: 1 1 calc(33.333% - 1.5rem); } @media (max-width: 768px) { .col-md-4 { flex: 1 1 100%; } } .col-md-4 img.img-fluid { max-width: 100%; /* ให้ภาพไม่เกินความกว้างคอลัมน์ */ height: auto; /* ปรับความสูงตามสัดส่วน */ max-height: 250px; /* กำหนดความสูงสูงสุด (ปรับตามที่เหมาะสม) */ object-fit: contain; /* ปรับภาพให้พอดีกรอบ ไม่บิด */ display: block; margin-left: auto; margin-right: auto; /* จัดกึ่งกลางภาพ */ cursor: pointer; } </style> </head> <body> <header class="hero"> <h1>Ubuntu Desktop Version 20.04</h1> <p class="lead">แนะนำขั้นพื้นฐานสำหรับผู้เริ่มต้น</p> </header> <section class="container"> <h2>ประวัติความเป็นมาของ Linux Ubuntu</h2> <p> Ubuntu เป็นระบบปฏิบัติการแบบโอเพ่นซอร์สที่พัฒนาขึ้นจาก Debian Linux โดยบริษัท Canonical Ltd. ก่อตั้งโดย <strong>Mark Shuttleworth</strong> ในปี ค.ศ. 2004 เพื่อให้ Linux ใช้งานง่ายและเข้าถึงผู้ใช้ทั่วไป </p> <p> Ubuntu ได้รับความนิยมเนื่องจากใช้งานฟรี มีการอัปเดตต่อเนื่อง และมีชุมชนสนับสนุนที่แข็งแกร่ง ใช้ได้ทั้งในระดับบุคคล องค์กร และเซิร์ฟเวอร์ </p> <img src="images/ubuntu.png" class="img-fluid mx-auto d-block" alt="โลโก้ Ubuntu" style="max-width: 400px;"> </section> <section class="container bg-light"> <h2>ความต้องการของ Hardware</h2> <ul> <li><strong>CPU:</strong> Dual-core 2 GHz ขึ้นไป</li> <li><strong>RAM:</strong> อย่างน้อย 4 GB (แนะนำ 8 GB)</li> <li><strong>Storage:</strong> อย่างน้อย 25 GB</li> <li><strong>USB Drive:</strong> ขั้นต่ำ 4 GB สำหรับติดตั้ง</li> <li><strong>ความละเอียดหน้าจอ:</strong> 1024x768 ขึ้นไป</li> <li><strong>อินเทอร์เน็ต:</strong> สำหรับดาวน์โหลด/อัปเดต</li> </ul> <p>สำหรับเครื่องรุ่นเก่า อาจเลือกใช้ Ubuntu MATE หรือ Xubuntu</p> <img src="images/001.png" class="img-fluid mx-auto d-block" alt="สเปคขั้นต่ำ Ubuntu" style="max-width: 600px;"> </section> <section class="container"> <h2 class="mb-4">วิธีการติดตั้ง Linux Ubuntu</h2> <div class="row g-4"> <!-- ตัวย่อโค้ดเพื่อแสดงเฉพาะ 3 ขั้นตอนแรก เป็นตัวอย่าง --> <div class="col-md-4"> <img src="images/ubuntu001.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal1" style="cursor:pointer" alt="ขั้นตอนที่ 1"> <div class="modal fade" id="modal1"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">ขั้นตอนที่ 1 : เข้า google หา Linux Ubuntu</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu001.png" class="img-fluid mb-3"> <p>เข้า google แล้วเขียน Ubuntu 20.04 download จากนั้นกดค้นหา</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu002.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal2" style="cursor:pointer" alt="ขั้นตอนที่ 2"> <div class="modal fade" id="modal2"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">ขั้นตอนที่ 2 : หาเว็บ download Linux Ubuntu</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu002.png" class="img-fluid mb-3"> <p>ในตัวอย่างคือ อันแรกจากบนสุด 'Ubuntu 20.04.6 LTS(Focal Fossa)'</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu003.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal3" style="cursor:pointer" alt="ขั้นตอนที่ 3"> <div class="modal fade" id="modal3"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">ขั้นตอนที่ 3 : Download </h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu003.png" class="img-fluid mb-3"> <p>กด Download เลยสหาย (กดแล้วให้ดูด้วยว่า Download ไว้ที่ไหน ในกรณีนี้จากไว้ที่ folder Download)</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu004.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal4" style="cursor:pointer" alt="ขั้นตอนที่ 4"> <div class="modal fade" id="modal4" tabindex="-1" aria-labelledby="modal4Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal4Label">ขั้นตอนที่ 4 : รอ Download (สำคัญมากๆ)</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu004.png" class="img-fluid mb-3"> <p>ตรวจสอบว่ามีการเชื่อมต่ออินเทอร์เน็ตว่าดีไหม หรือ คอมพิวเตอร์แรงหรือเปล่า ถ้าไม่แรงทำใจ </p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu005.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal5" style="cursor:pointer" alt="ขั้นตอนที่ 5"> <div class="modal fade" id="modal5" tabindex="-1" aria-labelledby="modal5Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal5Label">ขั้นตอนที่ 5 : เสร็จสิ้น Download </h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu005.png" class="img-fluid mb-3"> <p>ตรวจสอบว่าไฟล์ที่ Download นั้น อยู่ใน folder ที่เรา Download ไว้หรอเปล่า</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu006.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal6" style="cursor:pointer" alt="ขั้นตอนที่ 6"> <div class="modal fade" id="modal6" tabindex="-1" aria-labelledby="modal6Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal6Label">ขั้นตอนที่ 6 : การติดตั้ง (ฉบับจำลองด้วย Oracle VirtualBox)</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu006.png" class="img-fluid mb-3"> <p>การติดตั้งนั้นสามารถติดตั้งในตัว คอมพิวเตอร์ได้เลย แต่ในกรณีนี้จะติดตั้งด้วยโปรแกรม จำลอง (Oracle VirtualBox)</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu007.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal7" style="cursor:pointer" alt="ขั้นตอนที่ 7"> <div class="modal fade" id="modal7" tabindex="-1" aria-labelledby="modal7Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal7Label">ขั้นตอนที่ 7 : สร้างตัวจำลอง Linux Ubuntu</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu007.png" class="img-fluid mb-3"> <p>เข้ามาโปรแกรม Oracle VirtualBox แล้ว ให้กด New</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu008.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal8" style="cursor:pointer" alt="ขั้นตอนที่ 8"> <div class="modal fade" id="modal8" tabindex="-1" aria-labelledby="modal8Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal8Label">ขั้นตอนที่ 8 : การตั้งค่า การจำลอง</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu008.png" class="img-fluid mb-3"> <p>ตั้งชื่อ แล้วเอาไฟล์ที่ Download ไว้ใส่ไป</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu009.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal9" style="cursor:pointer" alt="ขั้นตอนที่ 9"> <div class="modal fade" id="modal9" tabindex="-1" aria-labelledby="modal9Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal9Label">ขั้นตอนที่ 9 : ตั้งรหัสผ่าน</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu009.png" class="img-fluid mb-3"> <p>ต่อมาให้ตั้งรหัสผ่าน แล้วเอาไว้เพราะ Linux Ubuntu จะใช้รหัสผ่านตลอด</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu010.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal10" style="cursor:pointer" alt="ขั้นตอนที่ 10"> <div class="modal fade" id="modal10" tabindex="-1" aria-labelledby="modal10Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal10Label">ขั้นตอนที่ 10 : ตั้งค่าทรัพยากร</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu010.png" class="img-fluid mb-3"> <p>ถ้าคอมแรงตั้งค่าตามใจอยากเลย แต่ให้ระวังว่าตัวจำลองจะใช้รวมกับตัว windows</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu011.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal11" style="cursor:pointer" alt="ขั้นตอนที่ 11"> <div class="modal fade" id="modal11" tabindex="-1" aria-labelledby="modal11Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal11Label">ขั้นตอนที่ 11 : ตั้งค่าความจำตัวจำลอง</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu011.png" class="img-fluid mb-3"> <p>ให้ตั้งตามความต้องการ เลยอย่างน้อยให้มี 25 GB</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu012.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal12" style="cursor:pointer" alt="ขั้นตอนที่ 12"> <div class="modal fade" id="modal12" tabindex="-1" aria-labelledby="modal12Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal12Label">ขั้นตอนที่ 12 : เปิดตัวจำลอง</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu012.png" class="img-fluid mb-3"> <p>เมื่อสร้างเสร็จแล้ว ก็ให้กดตัวที่เราสร้าง</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu013.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal13" style="cursor:pointer" alt="ขั้นตอนที่ 13"> <div class="modal fade" id="modal13" tabindex="-1" aria-labelledby="modal13Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal13Label">ขั้นตอนที่ 13 : ใส่ข้อมูล</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu013.png" class="img-fluid mb-3"> <p>ระบบต้องการอะไร ให้ใส่ลงไป</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu014.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal14" style="cursor:pointer" alt="ขั้นตอนที่ 14"> <div class="modal fade" id="modal14" tabindex="-1" aria-labelledby="modal14Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal14Label">ขั้นตอนที่ 14 : ใส่รหัสผ่าน</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu014.png" class="img-fluid mb-3"> <p>ใส่ชื่อและรหัสผ่านที่เราตั้งค่าไว้ก่อนหน้านี่</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu015.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal15" style="cursor:pointer" alt="ขั้นตอนที่ 15"> <div class="modal fade" id="modal15" tabindex="-1" aria-labelledby="modal15Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal15Label">ขั้นตอนที่ 15 : รอตั้งติด</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu015.png" class="img-fluid mb-3"> <p>ระบบจะติดตั้งให้รอ ประมาณ 30 - 60 นาที</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu016.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal16" style="cursor:pointer" alt="ขั้นตอนที่ 16"> <div class="modal fade" id="modal16" tabindex="-1" aria-labelledby="modal16Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal16Label">ขั้นตอนที่ 16 : การเข้าระบบ Linux Ubuntu</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu016.png" class="img-fluid mb-3"> <p>ระบบจะแสดงชื่อของเราที่ตั้งค่าไว้ก่อนหน้านี่ ให้กดเข้าไป</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu017.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal17" style="cursor:pointer" alt="ขั้นตอนที่ 17"> <div class="modal fade" id="modal17" tabindex="-1" aria-labelledby="modal17Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal17Label">ขั้นตอนที่ 17 : ใส่รหัสผ่าน ระบบ Linux Ubuntu</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu017.png" class="img-fluid mb-3"> <p>ใส่รหัสผ่านเลย (ที่ตั้งค่าไว้ก่อนหน้านี่)</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu018.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal18" style="cursor:pointer" alt="ขั้นตอนที่ 18"> <div class="modal fade" id="modal18" tabindex="-1" aria-labelledby="modal18Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal18Label">ขั้นตอนที่ 18 : ระบบตั้งค่า / การใช้โปรแกรม</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu018.png" class="img-fluid mb-3"> <p>ระบบ Linux Ubuntu จะให้เราตั้งค่าและแนะนำว่าเราใช้โปรแกรมอะไรบ้าง หรือต้องการ Download</p> </div> </div> </div> </div> </div> <div class="col-md-4"> <img src="images/ubuntu019.png" class="img-fluid" data-bs-toggle="modal" data-bs-target="#modal19" style="cursor:pointer" alt="ขั้นตอนที่ 19"> <div class="modal fade" id="modal19" tabindex="-1" aria-labelledby="modal19Label" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal19Label">ขั้นตอนที่ 19 : เสร็จสิ้นขั้นตอนทั้งหมด</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <img src="images/ubuntu019.png" class="img-fluid mb-3"> <p>ถ้าทำตามขั้นตอน หน้าจอจะเป็นแบบนี้</p> </div> </div> </div> </div> </div> </div> </section> <section class="container bg-light text-center"> <h2>ผู้จัดทำ</h2> <p><strong>นายศรุต ศิริ</strong></p> <p>อีเมล: kvkveu@gmail.com</p> </section> <footer class="text-center"> เว็บไซต์เพื่อการศึกษา | © 2025 MgfRut </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script> <script> const lightbox = GLightbox({ selector: '.glightbox' }); </script> </body> </html>
Save Changes