My Home Page 1

-

ศิลปะไม้ไอติม 45: Idea4Thai : ศิลปะคอมพิวเตอร์-1

ตอนที่2

My Home Page

ตอนผมย้ายมาเรียนที่กรุงเทพฯ ใหม่ๆ ทางโรงเรียนสอนคอมพิเตอร์พื้นฐานทั้งโปรแกรม Windows, Microsoft office, Power Point, และโปรแกรมอื่นๆ พอขึ้นปีที่ 2 ได้เล่นอินเตอร์เน็ตกับพี่สาว มีโอกาสเรียนรู้ HTML และหัดทำโฮมเพจง่ายๆ ดีใจแถบตายที่ทำได้สำเร็จ

สามปีผ่านไปเห็นรุ่นน้องๆ เข้าใหม่เลยทำให้นึกถึงอดีตเก่าๆ หลายคนคงเหมือนเรา ที่พึ่งเริ่มเรียนรู้อินเตอร์เน็ต และอยากมี Home Page ของตนเองบ้าง และอีกหลายคนที่ไปติดแหงกกับ Dreamwaver และ Photoshop ก็เลยพาลถอดใจ หันไปเล่นเกมส์แทน … น้องๆ หลายคนถามพี่ๆ มีวิธีทำ Home Page อย่างง่ายๆ เสร็จในพริบตาบ้างมั๊ย … ผมเลยเอาของเก่าที่เคยทำไว้มาให้เป็นตัวอย่าง … คงถูกใจ

เริ่มต้นกันเลยดีกว่า สำหรับคนที่ใจร้อน ก็นี่เลย …

การใช้ HTML สร้าง Web Page อย่างง่ายๆ

1. โครงสร้างพื้นฐานของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วนคือ
ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้
<HTML>
<HEAD>
<TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว </TITLE>
</HEAD>
<BODY>
คำสั่งหรือข้อความที่ต้องการให้แสดง
</BODY>
</HTML>

2. คลิกเข้าไปที่โปรแกรม Notepad เริ่มต้นด้วย tag <HTML> เพื่อให้เครื่องรู้ว่ากำลังใช้งาน html ตามด้วย tag <HEAD> ชื่อของ web page <TITLE> 1stpage และปิด tag ตามลำดับ </TITLE> </HEAD>



3. การพิมพ์ข้อความ
ในส่วนของ body ใส่ tag <BR> เว้นบรรทัด ระบุแบบตัวอักษร (Arial) สี (Red) และขนาด (5)
พิมพ์ชื่อ Jesada Somprasong <BR> ขึ้นบรรทัดใหม่ และข้อความเป็นอักษรใหญ่ขึ้น (6)
Learn and Play together <BR><BR> เว้นบรรทัด 2 ครั้ง

4. การใส่รูปภาพ
tag คำสั่งคือ <IMG SCR= ระบุตำแหน่งที่เก็บรูปภาพ“I:\1stpage\1.jpg”
ระบุขนาดของรูป <WIDTH =130 HEIGHT=100> ปิด tag </BODY></HTML>
แล้ว Save ไฟล์เป็นแบบ text ชื่อ 1stpage.txt เพื่อเก็บไว้แก้ไขเพิ่มเติมในตอนหลัง



5. การ Save เป็น Html ไฟล์
เสร็จแล้ว Save as อีกครั้งโดยเลือก Save as type: เป็น .html ชื่อ 1stpage.html

6. คลิกเข้าไปดูในโฟลเดอร์ 1stpage จะมี 2 ไฟล์ คือ 1stpage.txt และ 1stpage.html รวมทั้งรูปภาพที่จัดเตรียมไว้ก่อนหน้า


7. การ เปิดดูหน้าเว็บเพจ
ดัลเบิ้ลคลิกที่ไฟล์ 1stpage.html ให้แสดงผลบนอินเตอร์เน็ต เบราเซอร์ (IE) ก็จะออกมาดังรูป


ง่ายดีมั๊ยครับ ! ... นี่เป็นตัวอย่างให้ทดลองเล่นๆ เพียงเปลี่ยนชื่อ และหัวข้อเรื่อง แล้วหาภาพประกอบสวยๆ แค่นี้ก็ได้เริ่มต้นแล้ว สำหรับน้องๆ ที่เพิ่งเริ่มใช้ html คลิกเข้าไปอ่านการใช้งานในอินเตอร์เน็ต ซึ่งมีอยู่มากมาย เช่นที่ http://www.bcoms.net/ แล้วคราวหน้าจะมาเม้าส์ต่อ … สวัสดีจ๊ะ … บาย

< ย้อนกลับ > 

คลิกไปดูต้นฉบับ ใน Geocities.com /Idea4Thai

ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

โครงงานวิทยาศาสตร์ : DC มอเตอร์

-
รูปภาพ
 ศิลปะไม้ไอติม 28: DIY เรือติดมอเตอร์ เป็นเรื่องน่ายินดีที่ปัจจุบัน มีสื่อมากมายให้ค้นหาทางอินเตอร์เน็ต และเช่นเดียวกันก็มีงานฝีมือ งานประดิษฐ์ ต่างๆ ให้น้องๆ นำมาจัดทำโครงงานต่างๆ ตามวิชาที่ค้นคว้าทดลอง FC จำนวนมากขอให้แอดมิน รวบรวมและจัดทำต้นแบบ พร้อมขั้นตอนการทำ DIY เพื่อเป็นตัวอย่างนำไปทำโครงงานในหัวข้อ พลังงานกล และเครื่องใช้ไฟฟ้า จาก DC motor พี่เจษจึงขอให้คุณพ่อ นำเอาเรื่อง “ มอเตอร์ ” มาใช้ประกอบโครงงานง่ายๆ เป็นสิ่งประดิษฐ์จากไม้ไอติม ตามคอนเซ็ปของ "ใจอาสา"  เริ่มต้นจาก เรือติดมอเตอร์ ครับ วัสดุ อุปกรณ์ :      ·        ไม้ไอติม กาวลาเท็กซ์ กาวร้อน แผ่นฟิวเจอร์บอร์ด ·        มอเตอร์ทดรอบ รังถ่าน และถ่านไฟฉาย 2A ·        เครื่องมือพื้นฐาน คัทเตอร์ ดินสอ ไม้บรรทัด ขั้นตอน : ·        วาดแบบบนกระดาษ วัดตามขนาดของไม้ไอติมเป็นหลัก ·        ไม้ไอติมใหญ่ทากาวติดกัน ตามรูป 1 ·   ...
อ่านเพิ่มเติม

DIY กังหันขัยพัฒนาไม้ไอติม Ep.1

-
รูปภาพ
  ศิลปะไม้ไอติม 51: กังหันชัยพัฒนาไม้ไอติม Ep.1 มิติใหม่การจัดทำบทความศิลปะไม้ไอติมของ "ใจอาสา" ในรูปแบบภาพประกอบคลิปวีดีโอ ที่ต้องการความกระชับ และสามารถย้อนกลับมาดูรายละเอียดได้จากบทความในเว็บนี้  โดยนำรูปประกอบบทความเก่า ที่มีข้อจำกัดของพื้นที่ตามแพ็คเก็จที่เช่าจาก Url + domain name ของเว็บไซต์เดิม www.jairsa.com มาขยายและแก้ไขใหม่ ตามขนาดมาตรฐาน ของ Youtube (16:9) เว็บมาสเตอร์ เน้นความชัดของภาพ มีข้อความประกอบที่สั้น และหน่วงเวลาให้สามารถอ่านได้ ด้วยไม่ต้องจำกัดเรื่องพื้นที่ จึงเพิ่มคลิปวีดีโอ ประกอบในบางช่วง มีข้อผิดพลาดเล็กน้อย ที่ไม่ได้แก้ไข เช่น ซองวิดน้ำ ที่เขียนไว้เดิมว่า ช่องวิดน้ำ ส่วนอื่นๆ จะค่อยๆ แก้ไข FC เห็นอะไรดีช่วยแนะนำมา  ก็จะขอบคุณยิ่ง รูปภาพประกอบเครื่องมือ และอุปกรณ์ บางภาพเป็นการรวบรวมจากอินเตอร์เน็ต นำมาทำกราฟิกใหม่ ก็ต้องขอขอบคุณเจ้าของภาพเดิมอย่างยิ่ง  การขึ้นรูปกงล้อกังหัน คลิปวีดีโอ ประกอบขั้นตอนการทำ แต่ไม่ได้อยู่ในบทความเดิมๆ ก็จะนำมารวบรวมไว้ ในที่เดียวกัน   https://youtu.be/DT-nMiLEd70 รายละเอียดบางขั้นตอน สามารถถามมาได้ทาง ...
อ่านเพิ่มเติม

โครงงานโมเดลเพื่อการศึกษา

-
รูปภาพ
 ศิลปะไม้ไอติม 35: การควบคุมความเร็วกังหันไม้ไอติม โมเดลเพื่อใช้ประกอบการเรียนการสอน การทำงานของ DC มอเตอร์ เพื่อขับกังหันชัยพัฒนา ที่สามารถปรับความเร็วได้ตามความต้องการ สวนประกอบ : กงล้อกังหันขนาดใหญ่ 13 นิ้ว ขาตั้งรับเพลาสูง 11 นิ้ว กล่องควบคุมมอเตอร์ ปรับความเร็วรอบ พร้อมสวิทช์ เปิด-ปิด คุณสมบัติและการใช้งาน : เป็นโมเดลสาทิตการทำงานของมอเตอร์แบบทดรอบ 1:120  ใช้ไฟกระแสร์ตรง DC 6-12 โวลท์ มึชุดควบคุมความเร็วรอบของมอเตอร์ พร้อมสวิทช์ เปิด-ปิด มีรังถ่านใส่ถ่านไฟฉายขนาด AA จำนวน 4 ก้อน พร้อมฝาปิด ทั้งหมดบรรจุภายในกล่องไม้ ติดตั้งบนขาตั้งรับเพลา ชุดควบคุมความเร็วรอบ และรางถ่าน สามารถถอดออกเปลี่ยนถ่านด้านหลัง มีสายไฟต่อเข้ากับมอเตอร์ ที่ยึดติดกับแกนเพลา คลิปทดลองการทำงานของชุดโมเดลกังหันชัยพัฒนาไม้ไอติม  การนำไปใช้งานอื่นๆ : เนื่องจากตัวกังหันมีขนาดใหญ่ จึงสามารถใช้เป็นแผงติดรูป หรือป้ายคำบรรยาย ประชาสัมพันธ์โครงงานได้เป็นอย่างดี เพราะสามารถกำหนดความเร็วให้พอดี และหมุนวนต่อเนื่อง สนใจ ติดต่อสั่งทำได้ที่ ชมรมงานประดิษฐ์สูงวัยใจอาสา โทร./ Line id: 089-4482-809  ลุงแดง ไม้ไ...
อ่านเพิ่มเติม