Home
Education
Classroom
Knowledge
Blog
TV
ธรรมะ
กิจกรรม
โครงการทรูปลูกปัญญา
การเขียนเว็บไซต์เบื้องต้น
Poted by PEE01
  |  31 ต.ค. 60
9434 views
Favorite

สวัสดีครับ วันนี้ผมจะมาสอนการเขียนเว็บไซต์เบื้องต้น แต่ก่อนจะเริ่มสอน เราต้องมีความรู้เบื้องต้นกับเว็บไซต์ซักหน่อย เว็บไซต์มีมากมายและหลากหลาย ทั้งเว็บขนาดใหญ่ เช่น 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 

หลังจากดาวน์โหลดแล้วจะมีหน้าตาแบบนี้ 
 


หลังจากนั้นให้ คลิกขวาที่ File > Save As... >Save ไว้บน Dektop ตั้งชื่อไฟล์ว่า Webpage.html หลังจากนั้นเราก็จะเริ่มเขียนส่วนโครงสร้างไฟล์สำหรับ HTML ลงไปกันก่อน
 

โครงสร้างไฟล์ html ก็จะประกอบด้วย tag ต่าง ๆ
tag คืออะไร ? แท็กคือคำสั่งของการเขียนโปรแกรมภาษา HTML นั่นเอง เช่น <body> จะแสดงผลสิ่งที่อยู่ภายในเเท็ก </body> Tag ที่สำคัญหลัก ๆ มีดังนี้

<!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
 

หากผิดพลาดอย่างไรก็ขออภัยไว้ ณ ที่นี้
เขียนโดย : โชติ เด็กหัดเขียนบล็อก

Favorite
Comments
YoHooo
23 พ.ย. 61 14:59
เยี่ยมเลยครับ



---------------------------

https://jobweb24.com" title="รับทำเว็บไซต์ราคาถูก" style="color: #CCC">รับทำเว็บไซต์
Guest
22 เม.ย. 62 21:42
ผมอยากทราบครับว่า เราจะเปลี่ยนรูปโปรไฟล์ตรงส่วนหรือบรรทัดไหนของโค้ดหรอครับ เพราะว่าของผมมันเป็นรูปสีขาวเปล่่าๆ555
Load More