ผลการเรียนรู้
1. อธิบายการเขียนคำสั่งของโปรแกรมภาษาคอมพิวเตอร์ได้
2. ปฏิบัติการใช้คำสั่งและสร้างชิ้นงานจากโปรแกรมภาษาคอมพิวเตอร์ได้
3. ออกแบบและนำเสนอชิ้นงานที่สร้างสรรค์ได้
Embedded Files
การเพิ่มลูกเล่นให้กับหน้าเว็พเพจ เราสามารถทำตัวอักษรให้เคลื่อนที่หรือวิ่งผ่านหน้าจอเพื่อความน่าสนใจของเว็บเพจ รวมถึงการสร้างในหน้าเว็บเพจเพื่อเชื่อมโยงข้อมูล โดยการสร้าง Link ต้องคำนึงถึงจุด Link และปลายทางของ Link จะเกิดจากการสร้างขึ้นเอง ส่วนปลายทางของ Link จะมีทั้งแบบที่สามารถสร้างขึ้นมาเองได้ คือ ชื่อส่วนย่อยของเว็บเพจและแบบไม่ต้องสร้างขึ้นเองคือ URL หรือชื่อเว็บเพจ
1. การทำตัวอักษรวิ่ง
เราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์นำไปใช้ในการตกแต่งเวบเพจ โดยรูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
<marquee direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</marquee>
ทิศทางการวิ่ง
UP วิ่งจากด้านล่างขึ้นด้านบน
DOWN วิ่งจากด้านบนลงด้านล่าง
LEFT วิ่งจากด้านขวาไปด้านซ้าย
RIGHT วิ่งจากด้านซ้ายไปด้านขวา
:: กิจกรรมลองทำดู ::
คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อทำตัวอักษรวิ่ง
<!doctype html>
<html>
<head>
<title>การทำตัวอักษรวิ่ง</title>
</head>
<body><marquee direction="up" width="1400" height="500"scrollamount=15 scrolldelay="5"><font face="TH SarabunPSK"><font size=7> <font color="black"><B><center>:: คุณครูจุรีรัตน์ เสวกวิหารี ชั้นมัธยมศึกษาปีที่ 3/99 เลขที่ 99 ::
<br>โรงเรียนนวมินทราชูทิศ มัชฌิม</B></font></marquee>
</body>
</html>
2. การแทรกรูปภาพและการเชื่อมโยงลิงค์โดยใช้รูปภาพ
ที่มา : Opart Surinyotha
อธิบายคำสั่ง
<IMG SRC> เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
= "ชื่อไฟล์รูปภาพ.นามสกุล" ชื่อของรูปภาพที่จะนำมาประกอบ
เว็บเพจ (ต้องระบุ)
WIDTH=120 กำหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกำหนดก็ได้)
HEIGHT=120 กำหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกำหนดก็ได้)
ALT= "คำอธิบาย" สามารถแสดงข้อความเมื่อวางเมาส์บนรูปภาพ
หมายเหตุ :: เทคนิคการค้นหาแหล่งที่มาของรูปภาพ
1. ค้นหารูปภาพจากเว็บไซต์ โดยเข้าเว็บบราวเซอร์ และคลิกที่ค้นหารูปภาพ
2. คลิกเลือกรูปภาพที่ต้องการ
3. คลิกขวาที่รูปภาพจากนั้นเลือก คัดลอกที่อยู่รูปภาพ
4. คัดลอกที่อยู่ของรูปภาพบนช่อง URL โดยเป็นลิงค์ที่ต่อท้ายด้วย .png หรือ .jpg
5. นำลิงค์รูปภาพมาวางในตำแหน่งที่ต้องการ
อธิบายคำสั่ง
<A แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="ชื่อไฟล์/ที่อยู่ URL" ชื่อไฟล์/ที่อยู่เว็บไซต์ปลายทางที่ต้องการเชื่อมโยงไปถึง (ต้องระบุ)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
รูปภาพ รูปภาพที่ใช้แสดงว่านี่คือลิ้งค์
</A> แท็กปิดท้ายข้อความลิ้งค์
ที่มา : Opart Surinyotha
:: กิจกรรมลองทำดู ::
<!doctype html>
<html>
<head>
<title>การเชื่อมโยงลิงค์โดยใช้รูปภาพ</title>
</head>
<body><P align = center><B><font size=7><font face="JasmineUPC">“เกษตรทฤษฎีใหม่ : New Theory Agriculture”</B></P></font>
<A HREF="https://www.youtube.com/watch?v=7Bg-Heph2jk&t=4s">
<center><IMG SRC="https://image.makewebeasy.net/makeweb/m_1920x0/pMrtkmxgt/1_projects_R9/p014_3.png?v=202012190947" height="320" width="800"></A>
</body>
</html>
ตัวอย่างการสร้างสรรค์ผลงาน
เลือกหัวข้อส่งงานด้านล่าง
Page updated
Report abuse