Website การออกกำลังกายสำหรับคนรักสุขภาพ

สวัสดีครับผู้เข้าชม วันนี้ผมจะมาแนะนำเว็บไซต์ การออกกำลังกายเพื่อสุขภาพ

ที่แข็งแรง สำหรับคนรักสุขภาพ

15356894_1275736759149390_1160538166_n

โดยเนื้อหาจะมีบอกทั้งประโยชน์ของการออกกำลังกาย ออกกำลังกายตอนไหนเหมาะกับใคร

ช่วยให้ข้อมูลแก่ผู้ที่สนใจจะออกกำลังกาย ลดความอ้วน  โดยจะมีรายละเอียดพื้นฐานประกอบว่าการ

ออกกำลังกายดียังไงเหมาะกับคนที่ใส่ใจสุขภาพ

โค้ดเว็บ การออกกำลังกาย

15282091_1270936006296132_1015683204_n.png

การเขียนคำสั่งโค้ด

สองบรรทัดบน –> เป็นการบอกว่าโค้ดที่เราจะเขียนต่อไปนี้เป็นภาษา html

<head> เป็นการเขียนเกี่ยวกับส่วนหัวของเว็บ & บอกว่าเว็บต้องใช้มาตรฐานอะไรบ้าง
– <title> หัวด้านบนของเว็บว่าชื่อไร
– Meta ทั้งสองบรรทัดคือบอกว่าเว็บนี้เราจะใช้ภาษาไทย
– Script ทั้งสองบรรทัดคือเรียกใช้ code ภาษา Javascript (ในส่วนของนาฬิกา)

โดยเรียกจากไฟล์ที่ชื่อ   coolclock.js  และ  moreskin.js  แล้วก็ปิด </head>

15300705_1270936012962798_1351790900_n.png

<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

Screenshot (36)Screenshot (37)

ที่เหลือเป็นส่วนของ 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>

ของขวัญอะไรก็สู้สุขภาพที่ดีไม่ได้ มาเริ่มกันตั้งแต่วันนี้..กันดีกว่า

ตัวอย่าง คลิ๊ก

 

 

 

Pasakorn Suwannato
at GlurGeek.Com
นายภาสกร สุวรรณโท
นักศึกษามหาวิทยาลัยกรุงเทพ
คณะวิศวะกรรมศาสตร์ ภาควิชาคอมพิวเตอร์
รหัส 1590900989

Leave a Reply

Copyright © 2021 GlurGeek.Com. All Rights Reserved.