6069 views
สวัสดีครับ วันนี้ผมจะมาสอนการเขียนเว็บไซต์เบื้องต้น แต่ก่อนจะเริ่มสอน เราต้องมีความรู้เบื้องต้นกับเว็บไซต์ซักหน่อย เว็บไซต์มีมากมายและหลากหลาย ทั้งเว็บขนาดใหญ่ เช่น Facebok และเว็บไซต์ทั่วไป
อินเตอร์เน็ต เป็นเครือข่ายการติดต่อสื่อสารขนาดยักษ์ที่ครอบคลุมทั่วประเทศและทั่วโลก โดยผู้ใช้บริการจะใช้เครื่องคอมพิวเตอร์เป็นเครื่องเชื่อมต่อในการสื่อสารและเเลกเปลี่ยนข้อมูล เช่น ข้อความ ภาพ เสียง ไฟล์งานและอื่น ๆ ผ่านระบบเวิลด์ ไวด์ เว็บ (World Wide Web)
เวิลด์ ไวด์ เว็บ (World Wide Web) หรือ เว็บ (web) คือพื้นที่ที่เก็บข้อมูลข่าวสารที่เชื่อมต่อกันทางอินเตอร์เน็ต โดยกำหนด URL
เว็บไซต์ประกอบด้วย 3 ส่วนหลัก ได้แก่
• URL (Uniform Resource Locator) เป็นระบบมาตราญานที่ใช้กำหนด ตำแหน่งที่อยู่ (Address) ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต เช่น URL ของทรูปลูกปัญญา http://www.trueplookpanya.com
• HTTP (HyperText Transfer Protocol) เป็นโปโตคอลสำหรับเปิดดูข้อมูลจาก www เรียกใช้งานโดยระบุ http:// และตามด้วย URL ในช่องกรอก Adress บนเว็บบราว์เซอร์
• HTML (HyperText Markup Lauguage) เป็นภาษาที่ออกแบบมาเพื่อใช้ในการสร้างเว็บ
เว็บบราวเซอร์ (Web Browser) คือโปรแกรมที่ใช้สำหรับเปิดเว็บไซต์ เช่น Google Chrome IE และอื่น ๆ
หลังจากที่อธิบายเบื้องต้นเกี่ยวกับเว็บไซต์และอินเตอร์เน็ตไปแล้ว เราก็จะมาดูกันว่าในการเขียนเว็บไซต์เนี่ย ต้องมีอะไรบ้าง โดยโปรแกรมที่ใช้ในการเขียนเว็บไซต์ก็มีมากมาย ไม่ว่าจะเป็น Adobe Dreamweaver Atom และอื่น ๆ แต่โปรแกรมที่เราจะใช้กันคือ Notepad เป็นโปรแกรมไว้สำหรับบันทึกข้อความต่าง ๆ เรื่องราว สามารถเปิดดูได้ตลอดเวลา แต่ก็สามารถใช้การฝึกเขียนโปรแกรมได้เหมือนกัน โดยเราจะใช้ Notepad ในการเขียนเว็บไซต์กันและภาษาที่ใช้ในการเขียนเว็บไซต์ก็จะมี HTML และ CSS
นี่ก็จะเป็นหน้าตาของ Notepad หากใครหาไม่เจอก็ให้คลิกขวาที่หน้า Dektop แล้วเลือก >สร้าง >notepad หรือเอกสารข้อความ
หลังจากสร้างเสร็จจะมีหน้าตาแบบนี้
หน้าตามันจะดูโล่ง ๆ เพื่อให้ง่ายในการเขียน Code จากนั้นเราจะมาโหลด Sublime Text กันนะครับผม (โหลดก็ได้ ไม่โหลดก็ได้ตามสะดวกเด้ออ อิอิ) ดาวน์โหลดได้ที่นี่เลย https://www.sublimetext.com/3
หลังจากดาวน์โหลดแล้วจะมีหน้าตาแบบนี้
<!DOCTYPE html> เป็นส่วนระบุเวอร์ชั่นของภาษา HTMLl จะใส่ไว้ส่วนบนสุดเสมอ
<html> ไว้สำหรับใส่ส่วนประกอบต่างๆของ เอกสาร HTML
<head> เป็นส่วนที่ใช้บอกรายละเอียดเกี่ยวกับเว็บเพจที่เราสร้าง เช่น <meta charset="utf-8"> เป็นการกำหนดว่าให้แสดงตัวอักษรเป็นเว็บเพจนี้เป็นภาษาไทย หากเราไม่ใส่ส่วนนี้มันก็จะไม่สามรถแสดงผลเป็นภาษาไทย
<title>WebPage<title> เป็นชื่อที่จะปรากฎตรงด้านบนในแท็บของเว็บไซต์
</head>
<body>"เป็นส่วนเนื้อหาที่จะให้มันเเสดงผลออกมา"</body> เป็นส่วนเนื้อหาที่จะให้มันเเสดงผลออกมา
</html>
ถ้าหากเขียนกันเสร็จแล้วละก็ลองเปิดดูกันเลย โดย คลิกขวาที่ไฟล์> เปิดด้วย> เลือกบราวเซอร์ที่จะเปิดได้เลย จะได้ลักษณะหน้าตาแบบนี้ มีคำว่า "เป็นส่วนเนื้อหาที่จะให้มันเเสดงผลออกมา" ซึ่งก็คือข้อความที่เราพิมลงใน tag ของ body นั่นเอง เป็นไงครับ หลักการง่าย ๆ ใช่มั้ยล่ะ
งั้นเราจะเขียน WebPage ข้อมูลส่วนตัวกันดีกว่าา เน้อะ >< มาเริ่มกันเลยยย โดยการเขียน WebPage ของเรานั้น จะใช้ HTML และ CSS เพื่อให้ง่ายต่อการเขียน มาเริ่มกันเลยเราใช้ CSS ใน HTML เลย
นี่ก็จะเป็นตัวอย่าง Code ที่ใช้เขียนน่ะครับ ผมจะอธิบายคร่าว ๆ เป็นส่วน ๆ น่ะครับ
ส่วนที่ 1 บรรทัดที่ 9-55 จะเป็นการเขียน CSS เพื่อไว้ใช้สำหรับการเรียกใช้ โดยเราจะใช้ <style type="text/css"> เพื่อกำหนดคุณสมบัติต่าง ๆ โดยเราจะสร้าง class ขึ้นมาเพื่อเรียกใช้ ภายใน class จะมีการกำหนด ขนาดตัวอักษร สี ชนิดของฟ้อน โดยชนิดของฟ้อนผมใช้ฟ้อนของ Google เอา Code มาเขียนใส่บรรทัดที่ 6 และกำหนดชนิดฟ้อนภายใน class อีกทีนึง คำสั่งที่ใช้ภายใน class ก็จะมี
Font-size กำขนาดตัวอักษร
Font-color กำหนดสี ใช้เป็นรหัสสีและชื่อสีได้บางชื่อ
Font-Family เป็นการกำหนดชนิดของฟ้อนในกรณีนี้ใช้เป็นฟ้อนของทาง Google
Text-align เป็นการปรับตำแหน่งของข้อความ เช่น ซ้าย ขวา กลาง (center)
boder เป็นการกำหนดให้มีเส้นขอบ ว่าจะมีขนาดเท่ไหร่ มีสีอะไร เป็นต้น
boder-raduis เป็นการกำหนดองศาความมนของรูป หรือ กรอบ จะแบ่งเป็น 4 มุม บนซ้าย-ขวา ล่างซ้าย-ขวา โดยเราจะใช้เป็น % ถ้ากำหนดเป็น 50% ก็จะได้ รูปทรงกลมตามรูป
background-imge ใช้สำหรับใส่รูปนำไฟล์มาภาพจากคอม โดยไฟล์ภาพกับไฟล์ HTML ต้องอยู่โฟลเดอร์เดียวกัน
backgoround-size ใช้ปรับขนาดของรูป อาจใช้เป็น 100% เพื่อให้แสดงรูปแบบเต็มในขนาดที่เล็กหรือใหญ่ขึ้น
อย่างที่เห็นเราจะมีการเรียกใช้ class="Pro" ซึ้งภายใน class ได้เเทรกรูปไว้และกำหนดค่าจึงได้รูปเป็นทรงกลม
ส่วนที่ 2 <div> เป็นเท็กที่ใช้ครอบวัตถุที่ต้องการเพื่อจัดรูปแบบ ตัวอย่าง บรรทัดที่ 58 <div class="menu"> ก็จะเป็นการครอบทับวัตถุพร้อมเรียกใช้ class menu ที่ได้กำหนดไว้ในตอนแรก <br> เป็นแท็กที่ใช้สำหรับการเว้นบรรทัด ก็อธิบายกันไปคร่าว ๆ แล้ว เรามาดูตัวอย่างกันเลยดีกว่า
เสร็จแล้ว ! ก็จะได้ประมานนี้ >< ขอบคุณที่อ่านกันนะครับผม หากใครสนต้องการศึกษาต่อผมมีเว็บไซต์เเนะนำซึ่งผมก็กำลังศึกษาอยู่พอดี https://www.w3schools.com/html อันนี้เป็นลิ้งเว็บไซต์ที่ีผมใช้ศึกษาในการเขียนเว็บ มีตัวอย่างมากมายให้ลองทำ บทเรียนหลากหลายภาษา ไม่ว่าจะเป็น PHP Javascript เป็นกำลังใจให้กำคนที่ต้องการศึกษานะคับผม ^^
แหล่งข้อมูลอ้างอิงเพิ่มเติม
จากเว็บไซต์ของ SIT Library'sBlog
หากผิดพลาดอย่างไรก็ขออภัยไว้ ณ ที่นี้
เขียนโดย : โชติ เด็กหัดเขียนบล็อก
6069 views
สวัสดีครับ วันนี้ผมจะมาสอนการเขียนเว็บไซต์เบื้องต้น แต่ก่อนจะเริ่มสอน เราต้องมีความรู้เบื้องต้นกับเว็บไซต์ซักหน่อย เว็บไซต์มีมากมายและหลากหลาย ทั้งเว็บขนาดใหญ่ เช่น Facebok และเว็บไซต์ทั่วไป
อินเตอร์เน็ต เป็นเครือข่ายการติดต่อสื่อสารขนาดยักษ์ที่ครอบคลุมทั่วประเทศและทั่วโลก โดยผู้ใช้บริการจะใช้เครื่องคอมพิวเตอร์เป็นเครื่องเชื่อมต่อในการสื่อสารและเเลกเปลี่ยนข้อมูล เช่น ข้อความ ภาพ เสียง ไฟล์งานและอื่น ๆ ผ่านระบบเวิลด์ ไวด์ เว็บ (World Wide Web)
เวิลด์ ไวด์ เว็บ (World Wide Web) หรือ เว็บ (web) คือพื้นที่ที่เก็บข้อมูลข่าวสารที่เชื่อมต่อกันทางอินเตอร์เน็ต โดยกำหนด URL
เว็บไซต์ประกอบด้วย 3 ส่วนหลัก ได้แก่
• URL (Uniform Resource Locator) เป็นระบบมาตราญานที่ใช้กำหนด ตำแหน่งที่อยู่ (Address) ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต เช่น URL ของทรูปลูกปัญญา http://www.trueplookpanya.com
• HTTP (HyperText Transfer Protocol) เป็นโปโตคอลสำหรับเปิดดูข้อมูลจาก www เรียกใช้งานโดยระบุ http:// และตามด้วย URL ในช่องกรอก Adress บนเว็บบราว์เซอร์
• HTML (HyperText Markup Lauguage) เป็นภาษาที่ออกแบบมาเพื่อใช้ในการสร้างเว็บ
เว็บบราวเซอร์ (Web Browser) คือโปรแกรมที่ใช้สำหรับเปิดเว็บไซต์ เช่น Google Chrome IE และอื่น ๆ
หลังจากที่อธิบายเบื้องต้นเกี่ยวกับเว็บไซต์และอินเตอร์เน็ตไปแล้ว เราก็จะมาดูกันว่าในการเขียนเว็บไซต์เนี่ย ต้องมีอะไรบ้าง โดยโปรแกรมที่ใช้ในการเขียนเว็บไซต์ก็มีมากมาย ไม่ว่าจะเป็น Adobe Dreamweaver Atom และอื่น ๆ แต่โปรแกรมที่เราจะใช้กันคือ Notepad เป็นโปรแกรมไว้สำหรับบันทึกข้อความต่าง ๆ เรื่องราว สามารถเปิดดูได้ตลอดเวลา แต่ก็สามารถใช้การฝึกเขียนโปรแกรมได้เหมือนกัน โดยเราจะใช้ Notepad ในการเขียนเว็บไซต์กันและภาษาที่ใช้ในการเขียนเว็บไซต์ก็จะมี HTML และ CSS
นี่ก็จะเป็นหน้าตาของ Notepad หากใครหาไม่เจอก็ให้คลิกขวาที่หน้า Dektop แล้วเลือก >สร้าง >notepad หรือเอกสารข้อความ
หลังจากสร้างเสร็จจะมีหน้าตาแบบนี้
หน้าตามันจะดูโล่ง ๆ เพื่อให้ง่ายในการเขียน Code จากนั้นเราจะมาโหลด Sublime Text กันนะครับผม (โหลดก็ได้ ไม่โหลดก็ได้ตามสะดวกเด้ออ อิอิ) ดาวน์โหลดได้ที่นี่เลย https://www.sublimetext.com/3
หลังจากดาวน์โหลดแล้วจะมีหน้าตาแบบนี้
<!DOCTYPE html> เป็นส่วนระบุเวอร์ชั่นของภาษา HTMLl จะใส่ไว้ส่วนบนสุดเสมอ
<html> ไว้สำหรับใส่ส่วนประกอบต่างๆของ เอกสาร HTML
<head> เป็นส่วนที่ใช้บอกรายละเอียดเกี่ยวกับเว็บเพจที่เราสร้าง เช่น <meta charset="utf-8"> เป็นการกำหนดว่าให้แสดงตัวอักษรเป็นเว็บเพจนี้เป็นภาษาไทย หากเราไม่ใส่ส่วนนี้มันก็จะไม่สามรถแสดงผลเป็นภาษาไทย
<title>WebPage<title> เป็นชื่อที่จะปรากฎตรงด้านบนในแท็บของเว็บไซต์
</head>
<body>"เป็นส่วนเนื้อหาที่จะให้มันเเสดงผลออกมา"</body> เป็นส่วนเนื้อหาที่จะให้มันเเสดงผลออกมา
</html>
ถ้าหากเขียนกันเสร็จแล้วละก็ลองเปิดดูกันเลย โดย คลิกขวาที่ไฟล์> เปิดด้วย> เลือกบราวเซอร์ที่จะเปิดได้เลย จะได้ลักษณะหน้าตาแบบนี้ มีคำว่า "เป็นส่วนเนื้อหาที่จะให้มันเเสดงผลออกมา" ซึ่งก็คือข้อความที่เราพิมลงใน tag ของ body นั่นเอง เป็นไงครับ หลักการง่าย ๆ ใช่มั้ยล่ะ
งั้นเราจะเขียน WebPage ข้อมูลส่วนตัวกันดีกว่าา เน้อะ >< มาเริ่มกันเลยยย โดยการเขียน WebPage ของเรานั้น จะใช้ HTML และ CSS เพื่อให้ง่ายต่อการเขียน มาเริ่มกันเลยเราใช้ CSS ใน HTML เลย
นี่ก็จะเป็นตัวอย่าง Code ที่ใช้เขียนน่ะครับ ผมจะอธิบายคร่าว ๆ เป็นส่วน ๆ น่ะครับ
ส่วนที่ 1 บรรทัดที่ 9-55 จะเป็นการเขียน CSS เพื่อไว้ใช้สำหรับการเรียกใช้ โดยเราจะใช้ <style type="text/css"> เพื่อกำหนดคุณสมบัติต่าง ๆ โดยเราจะสร้าง class ขึ้นมาเพื่อเรียกใช้ ภายใน class จะมีการกำหนด ขนาดตัวอักษร สี ชนิดของฟ้อน โดยชนิดของฟ้อนผมใช้ฟ้อนของ Google เอา Code มาเขียนใส่บรรทัดที่ 6 และกำหนดชนิดฟ้อนภายใน class อีกทีนึง คำสั่งที่ใช้ภายใน class ก็จะมี
Font-size กำขนาดตัวอักษร
Font-color กำหนดสี ใช้เป็นรหัสสีและชื่อสีได้บางชื่อ
Font-Family เป็นการกำหนดชนิดของฟ้อนในกรณีนี้ใช้เป็นฟ้อนของทาง Google
Text-align เป็นการปรับตำแหน่งของข้อความ เช่น ซ้าย ขวา กลาง (center)
boder เป็นการกำหนดให้มีเส้นขอบ ว่าจะมีขนาดเท่ไหร่ มีสีอะไร เป็นต้น
boder-raduis เป็นการกำหนดองศาความมนของรูป หรือ กรอบ จะแบ่งเป็น 4 มุม บนซ้าย-ขวา ล่างซ้าย-ขวา โดยเราจะใช้เป็น % ถ้ากำหนดเป็น 50% ก็จะได้ รูปทรงกลมตามรูป
background-imge ใช้สำหรับใส่รูปนำไฟล์มาภาพจากคอม โดยไฟล์ภาพกับไฟล์ HTML ต้องอยู่โฟลเดอร์เดียวกัน
backgoround-size ใช้ปรับขนาดของรูป อาจใช้เป็น 100% เพื่อให้แสดงรูปแบบเต็มในขนาดที่เล็กหรือใหญ่ขึ้น
อย่างที่เห็นเราจะมีการเรียกใช้ class="Pro" ซึ้งภายใน class ได้เเทรกรูปไว้และกำหนดค่าจึงได้รูปเป็นทรงกลม
ส่วนที่ 2 <div> เป็นเท็กที่ใช้ครอบวัตถุที่ต้องการเพื่อจัดรูปแบบ ตัวอย่าง บรรทัดที่ 58 <div class="menu"> ก็จะเป็นการครอบทับวัตถุพร้อมเรียกใช้ class menu ที่ได้กำหนดไว้ในตอนแรก <br> เป็นแท็กที่ใช้สำหรับการเว้นบรรทัด ก็อธิบายกันไปคร่าว ๆ แล้ว เรามาดูตัวอย่างกันเลยดีกว่า
เสร็จแล้ว ! ก็จะได้ประมานนี้ >< ขอบคุณที่อ่านกันนะครับผม หากใครสนต้องการศึกษาต่อผมมีเว็บไซต์เเนะนำซึ่งผมก็กำลังศึกษาอยู่พอดี https://www.w3schools.com/html อันนี้เป็นลิ้งเว็บไซต์ที่ีผมใช้ศึกษาในการเขียนเว็บ มีตัวอย่างมากมายให้ลองทำ บทเรียนหลากหลายภาษา ไม่ว่าจะเป็น PHP Javascript เป็นกำลังใจให้กำคนที่ต้องการศึกษานะคับผม ^^
แหล่งข้อมูลอ้างอิงเพิ่มเติม
จากเว็บไซต์ของ SIT Library'sBlog
หากผิดพลาดอย่างไรก็ขออภัยไว้ ณ ที่นี้
เขียนโดย : โชติ เด็กหัดเขียนบล็อก
