สวัสดีครับผู้เข้าชม วันนี้ผมจะมาแนะนำเว็บไซต์ การออกกำลังกายเพื่อสุขภาพ
ที่แข็งแรง สำหรับคนรักสุขภาพ
โดยเนื้อหาจะมีบอกทั้งประโยชน์ของการออกกำลังกาย ออกกำลังกายตอนไหนเหมาะกับใคร
ช่วยให้ข้อมูลแก่ผู้ที่สนใจจะออกกำลังกาย ลดความอ้วน โดยจะมีรายละเอียดพื้นฐานประกอบว่าการ
ออกกำลังกายดียังไงเหมาะกับคนที่ใส่ใจสุขภาพ
โค้ดเว็บ การออกกำลังกาย
การเขียนคำสั่งโค้ด
สองบรรทัดบน –> เป็นการบอกว่าโค้ดที่เราจะเขียนต่อไปนี้เป็นภาษา html
<head> เป็นการเขียนเกี่ยวกับส่วนหัวของเว็บ & บอกว่าเว็บต้องใช้มาตรฐานอะไรบ้าง
– <title> หัวด้านบนของเว็บว่าชื่อไร
– Meta ทั้งสองบรรทัดคือบอกว่าเว็บนี้เราจะใช้ภาษาไทย
– Script ทั้งสองบรรทัดคือเรียกใช้ code ภาษา Javascript (ในส่วนของนาฬิกา)
โดยเรียกจากไฟล์ที่ชื่อ coolclock.js และ moreskin.js แล้วก็ปิด </head>
<style> เป็นการบอกว่าจะเขียนด้วยภาษา CSS ใช้ในการตกแต่งหน้าเว็บ
*-* H2 คอมพิวเตอร์จะหาโค้ดใน body ที่ใช้ h2 แล้วรันตัวโค้ดนี่ตรงตำแหน่ง h2 นั้น
*-* Padding-left เป็นการบอกว่าเว้นช่องห่างระหว่างขอบซ้ายของจอมาเท่าไร หน่วยเป็น pixel
*-* H3, b, div.backgroud, div.transbox, div.transbox p เหมือนกันกับ h2 คือคอมจะหาส่วนของโค้ด
ที่เหมือนใน body แล้วรันตามที่เราเขียนตรงนี้ด้วย
*-* Font-size ขนาดของ font
*-* Word-spacing เว้นวรรคระหว่าง 1 spacebar ก็คือเว้นระหว่างคำ
*-* Font-family ใช้ font อะไร (เช่นใช้ times new roman ถ้าเครื่องคนที่เปิดไม่มีไปใช้อันถัดไปคือ times เป็นต้น)
*-* คำสั่ง background ก็คือใส่พื้นหลัง พอมี url ตามด้วยวงเล็บ คือใส่ภาพ ในวงเล็บคือชื่อของภาพ
คำว่า repeat คือซ้าภาพไปเรื่อยๆในกรณีที่ภาพเล็กกว่าจอ
*-* Border คำสั่งที่ใช้สร้างกรอบ ถ้าอยู่ใน div.background ก็เป็นกรอบของรูป ถ้าอยู่ใน div.transbox
เป็นกรอบของสี่เหลี่ยม ขาว ใสๆด้านหลัง
*-* Margin คำสั่งสาหรับเว้นพื้นที่รอบตัวเองทั้ง 4 ทิศ มีหน่วยทั้งเป็น % และเป็น pixel
*-* Background-color กาหนดสีพื้นหลัง ในที่นี้ #ffffff เป็นสีขาว
*-* Opacity และ filter เป็นการบอกว่าให้โปร่งใสเท่าไร ในนี้คือ 0.6
*-* Font-weight ความหนาของตัวอักษร ในที่นี้ใช้คำว่า bold คือเป็นตัวหนา
*-* Color ใน div.transbox p อันนี้เป็นสีตัวอักษรก็คือดำ
สรุปคือ div.background อันนี้คือพื้นหลังทั้งเว็บ div.transbox คือกล่องสีขาวใสๆที่ทับบนภาพพื้นหลัง
div.transbox p คือตัวอักษรในกล่องขาวใสแล้วก็ปิด </style> เป็นการจบคำสั่ง CSS
ที่เหลือเป็นส่วนของ html
** <body> อันนี้จำเป็นต้องมีทุกเว็บมันคือส่วนที่แสดงผลให้เราเห็นบนหน้าเว็บ ถ้าไม่มีคือโค้ดก่อนหน้านี้เขียนมา
ก็มองไม่เห็นบนจอ
** onload= ”CoolClock.findAndCreatClocks()” อันนี้คือเรียกคำสั่ง JavaScript ในไฟล์สองไฟล์
(ที่ได้บอกไว้ในรูปแรกตรงส่วนของ script)
** <marquee> เป็นการทำให้ตัวอักษรขยับได้(เคลื่อนจากขวาไปซ้าย bgcolor คือสีด้านหลังที่เป็นสีเขียว
** <b style บีตัวแรกคือบอกว่าคำต่อไปนี้ให้แสดงเป็นตัวหนา style คือบอกว่าภายใน<> อันนี้เป็นโค้ด CSS
แล้วเราก็กำหนดขนาดของ font แล้วปิดด้วย > จากนั้นเขียนคำที่จะแสดงเช่น “การออกกาลังกาย” แล้วก็ปิด b, marquee
** Div class ทั้งสองตัวคือบอกว่าภายใน div ก่อนที่จะ /div ปิด นี้จะให้แสดง background ที่เป็นรูป
และให้ใส่กล่องสีเหลี่ยมโปร่งใส
** <p><div align = “center”> พีตัวแรกคือให้มันขึ้นบรรทัดใหม่ แล้วคำสั่ง div align คือจัดทุกอย่างที่อยู่ภายใน
div ต่อไปนี้ให้อยู่กลางจอ
** <canvas> ทั้งสองตัวคือนาฬิกา โดยกำหนดชื่อเป็น id1 กับ id2 (ตั้งเป็นชื่อไรก็ได้) ส่วนคำสั่ง class
เป็นการกำหนดค่าต่างๆของนาฬิกา – อันแรก CoolClock คือให้ run ฟังก์ชั่นใน JavaScript จากไฟล์สอง
ไฟล์ที่กาหนดในรูปแรก คั่นด้วย : ต่อมาเป็นหน้าตานาฬิกาว่าอยากได้แบบไหน อันนี้ก็ต้องไปดูว่ามันมีแบบ
ไหนให้มาบ้างในตัวไฟล์ JavaScript ซึ่ง Lev กับ classic คือแบบที่เราเลือกมา ตัวเลข 200 คือขนาดของ
นาฬิกาหน่วยเป็น pixel ส่วน Seconds เป็นการบอกว่าให้ show เข็มวินาทีด้วย (อันบนต้องใส่เพราะมี : ต่อ แต่อันล่างไม่มี
จะใส่หรือไม่มันจะถือว่าใส่) ตัว +0 ด้านหลังสุดคือมาตรฐานเวลาโลก ซึ่ง London มาตรฐานอยู่ที่ GMT+0
อันล่างที่ไม่ใส่คือให้ดูนาฬิกาจากเครื่องของคนที่เปิดเว็บเราแล้วใช้เวลาตามนั้น
**H3 คือข้อความ โดยความใหญ่อยู่ที่ระดับ 3 ( 1 มากสุด และ 6 น้อยสุด ) ถ้าสังเกตเรากำหนด h3 ไว้ใน <style>
ด้านบนด้วย ภาษา CSS ว่า ขนาดตัวอักษรเท่าไร เว้นวรรคต่อคำเท่าไร เว้นจากซ้ายจอเท่าไร ผลออกมามันเลยอยู่
กลางหน้าจอตรงกับนาฬิกาด้านบนพอดี
** H2 ข้อความเหมือนกัน แล้วตามด้วย style ก็คือบอกว่าภายใน <h2 > ภายในเครื่องหมายนี้ หลังจาก style เป็นภาษา
CSS ซึ่ง เราใช้ color:red คือบอกว่าตัวอักษรสีแดง
** ที่เหลือตรง <p> ก็เป็นข้อความ ที่ตามด้วย style=”font-size:20px;” คือเรากำหนดขนาดของมัน
** <i> ตัวใหญ่หรือเล็กให้ผลเหมือนกัน เป็นการบอกว่าเป็นอักษรตัวเอียง
** <b> ตัวใหญ่เล็กผลเหมือนกัน บอกว่าเป็นตัวหนา
** ที่เหลือคือปิดทุกอย่าง / ปิดหมดให้ครบ แล้วปิดท้ายโปรแกรมเราด้วย </html>
ของขวัญอะไรก็สู้สุขภาพที่ดีไม่ได้ มาเริ่มกันตั้งแต่วันนี้..กันดีกว่า
ตัวอย่าง คลิ๊ก
