ผลการเรียนรู้
1. อธิบายการเขียนคำสั่งของโปรแกรมภาษาคอมพิวเตอร์ได้
2. ปฏิบัติการใช้คำสั่งและสร้างชิ้นงานจากโปรแกรมภาษาคอมพิวเตอร์ได้
3. ออกแบบและนำเสนอชิ้นงานที่สร้างสรรค์ได้
ผลการเรียนรู้
1. อธิบายการเขียนคำสั่งของโปรแกรมภาษาคอมพิวเตอร์ได้
2. ปฏิบัติการใช้คำสั่งและสร้างชิ้นงานจากโปรแกรมภาษาคอมพิวเตอร์ได้
3. ออกแบบและนำเสนอชิ้นงานที่สร้างสรรค์ได้
การเพิ่มลูกเล่นให้กับหน้าเว็พเพจ เราสามารถทำตัวอักษรให้เคลื่อนที่หรือวิ่งผ่านหน้าจอเพื่อความน่าสนใจของเว็บเพจ รวมถึงการสร้างในหน้าเว็บเพจเพื่อเชื่อมโยงข้อมูล โดยการสร้าง Link ต้องคำนึงถึงจุด Link และปลายทางของ Link จะเกิดจากการสร้างขึ้นเอง ส่วนปลายทางของ Link จะมีทั้งแบบที่สามารถสร้างขึ้นมาเองได้ คือ ชื่อส่วนย่อยของเว็บเพจและแบบไม่ต้องสร้างขึ้นเองคือ URL หรือชื่อเว็บเพจ
1. การทำตัวอักษรวิ่ง
เราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์นำไปใช้ในการตกแต่งเวบเพจ โดยรูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
ทิศทางการวิ่ง
UP วิ่งจากด้านล่างขึ้นด้านบน
DOWN วิ่งจากด้านบนลงด้านล่าง
LEFT วิ่งจากด้านขวาไปด้านซ้าย
RIGHT วิ่งจากด้านซ้ายไปด้านขวา
:: กิจกรรมลองทำดู ::
คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อทำตัวอักษรวิ่ง
<html>
<head>
<title>การทำตัวอักษรวิ่ง</title>
</head>
<body>
<marquee><font size=5 color="blue"font face="TH SarabunPSK"><B>พระบรมราโชวาทพระบาทสมเด็จพระบรมชนกาธิเบศร มหาภูมิพลอดุลยเดชมหาราช บรมนาถบพิตร ที่เกี่ยวข้องกับการศึกษา<B>
</marquee>
</body>
</html>
2. การแทรกรูปภาพและเชื่อมโยงลิงค์โดยใช้รูปภาพหรือสัญลักษณ์
ที่มา : Opart Surinyotha
อธิบายคำสั่ง
<IMG SRC> เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
= "ชื่อไฟล์รูปภาพ.นามสกุล" ชื่อของรูปภาพที่จะนำมาประกอบเว็บเพจ
(ต้องระบุ)
WIDTH=120 กำหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกำหนดก็ได้)
HEIGHT=120 กำหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกำหนดก็ได้)
ALT= "คำอธิบาย" สามารถแสดงข้อความเมื่อวางเมาส์บนรูปภาพ
หมายเหตุ :: เทคนิคการค้นหาแหล่งที่มาขอรูปภาพ
1. คลิกขวาที่รูปภาพ เลือก Properties หรือ คุณสมบัติ
2. คัดลอกที่อยู่ของรูปภาพ หรือ Location :
3. คัดลอก File name หรือชื่อของรูปภาพ
4. คัดลอก Type of file หรือนามสกุลไฟล์ เช่น .png หรือ .jpg
:: กิจกรรมลองทำดู ::
คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อใส่รูปภาพประกอบในเว็บเพจ
<html>
<head>
<title> การใส่รูปภาพประกอบในเว็บเพจ </title>
</head>
<body>
<center>นี่คือดอกไม้ที่ฉันชอบ<br>
<IMG SRC="C:\Users\ICT3\Desktop/unnamed.png" WIDTH=120 HIGHT=120 ALT="นี่คือดอกไม้ที่ฉันชอบ"><br>
ดอกทานตะวัน<br>
</center>
</body>
</html>
ที่มา : Opart Surinyotha
อธิบายคำสั่ง
<A แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="ชื่อไฟล์/ที่อยู่ URL" ชื่อไฟล์/ที่อยู่เว็บไซต์ปลายทางที่ต้องการเชื่อมโยงไปถึง (ต้องระบุ)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
รูปภาพ รูปภาพที่ใช้แสดงว่านี่คือลิ้งค์
</A> แท็กปิดท้ายข้อความลิ้งค์
:: กิจกรรมลองทำดู ::
<html>
<head>
<title>การเชื่อมโยงลิงค์โดยใช้รูปภาพหรือสัญลักษณ์</title>
</head>
<body><CENTER><font size= 5 color=blue font face="TH SarabunPSK"><B>พระบรมราโชวาท<br>พระบาทสมเด็จพระบรมชนกาธิเบศร มหาภูมิพลอดุลยเดชมหาราช บรมนาถบพิตร ที่เกี่ยวข้องกับการศึกษา</B><br>
<A HREF="https://www.ipst.ac.th/knowledge/12963/education-kingrama9.html/">
<IMG SRC="C:\Users\User\OneDrive\เดสก์ท็อป\desk\HTML/king.jpg"ALT="image" height="200" width="200"></A>
</body>
</html>
เลือกหัวข้อส่งงานด้านล่าง