โค๊ดแต่งบล็อก

โค๊ดแต่งบล็อก

โค๊ดปฏิทิน        :  http://www.bloggang.com/mainblog.php?id=pasta&month=14-09-2010&group=5&gblog=10

โค๊ดนาฬิกา      :  http://www.zalim-code.com/clock.html  

ลิงค์โค๊ดแต่งบล็อกต่าง ๆ       :  http://blog-krutoi.blogspot.com/2015/01/httpnanfufu.html

#Cr  :  http://www.bloggang.com  ,  http://www.zalim-code.com  ,  http://blog-krutoi.blogspot.com

ขอขอบคุณเนื้อหาดีๆ 

TIP : การสร้างและตกแต่งบล๊อค

TIP : การสร้างและตกแต่งบล๊อค

คู่มือการสร้างบล็อค
http://www.korat4.go.th/download/news/1057/blog.pdf

รวมเทคนิคการตกแต่งบล็อคสวย ๆ
http://www.hackublog.com/2010/06/roadmap-blogger-blogspot.html



ขอขอบคุณ

#Cr. http://www.hackublog.com/2010/06/roadmap-blogger-blogspot.html

การใส่ลิงค์บล็อก

การใส่ลิงค์

1. ให้เราคลิกที่เครื่องมือ  ลิงก์   ดังรูป

2.  เมื่อคลิกแล้วจะขึ้นหน้าต่าง แก้ไขลิงก์ ขึ้นมา และให้เราใส่ที่อยู่หรือ url ที่ต้องการจะเชื่อมโยงลงไป ดังรูป

3. กดปุ่มตกลง

การสร้างบล็อก

สร้างบล็อก

เมื่อต้องการเริ่มเขียนบล็อกด้วยบล็อกเกอร์ ให้ไปที่ หน้าแรกบล็อกเกอร์ ใส่ชื่อผู้ใช้และรหัสผ่านของคุณ จากนั้นคลิกลงชื่อเข้าใช้ ป้อนชื่อที่แสดง และยอมรับข้อกำหนดในการให้บริการของบล็อกเกอร์ จากนั้นคลิกที่ลิงก์ สร้างบล็อก แล้วเริ่มต้นได้เลย!

เลือกที่อยู่ (URL) และชื่อบล็อก จากนั้นเลือกเทมเพลตบล็อกที่คุณชอบ (นี่คือลักษณะหน้าตาของบล็อกเมื่อคุณเผยแพร่) จากนั้นก็เริ่มใช้ความคิดสร้างสรรค์ เพิ่มข้อมูลในโปรไฟล์ส่วนบุคคลของคุณ และปรับแต่งลักษณะของบล็อก ถ้าคุณต้องการ เริ่มต้นเขียนบล็อกวันนี้

กลับไปด้านบน

แดชบอร์ด

หน้าแดชบอร์ดคือจุดเริ่มต้นของคุณเช่นเคย หน้านี้จะแสดงรายชื่อบล็อกของคุณทั้งหมด และคุณสามารถคลิกที่ไอคอนถัดจากชื่อบล็อกเพื่อดำเนินการต่างๆ กับแต่ละบล็อก เช่น

• เขียนโพสต์ใหม่: คลิกที่ไอคอนดินสอสีส้มบนแดชบอร์ดเพื่อเข้าถึงเครื่องมือการแก้ไขโพสต์
• ดูโพสต์ของคุณ: ไอคอนรายการโพสต์สีเทาจะนำคุณไปยังรายการโพสต์ที่เผยแพร่แล้วและโพสต์ในข้อความร่างของบล็อกนั้นๆ
• ติดตามบล็อกโปรดของคุณ: ด้านล่างรายการบล็อกของคุณ คุณจะเห็นรายการบล็อกที่คุณติดตาม พร้อมข้อความตัวอย่างจากโพสต์ล่าสุดของบล็อกเหล่านั้น
• อื่นๆ: ดูเมนูเลื่อนลงข้างไอคอนรายการโพสต์สำหรับลิงก์ด่วนไปยัง:
  • ภาพรวม
  • โพสต์
  • หน้าเว็บ
  • ความคิดเห็น
  • สถิติ
  • รายได้
  • การออกแบบ
  • เทมเพลต
  • การตั้งค่า

โปรดทราบว่าแท็บรายได้จะปรากฏเฉพาะเมื่อ AdSense สนับสนุนภาษาของคุณ

กลับไปด้านบน

ภาพรวม

บนแท็บ ภาพรวม คุณจะเห็นกิจกรรมต่างๆ ของบล็อก ข่าวสาร และเคล็ดลับจากทีมบล็อกเกอร์ และบล็อกล่าสุดของกระดาษโน้ต

กลับไปด้านบน

เขียนโพสต์ของคุณ

ชมวิดีโอวิธีโพสต์ลงในบล็อก

เมื่อคุณลงชื่อเข้าใช้บล็อกเกอร์แล้ว คุณจะเห็นแดชบอร์ดพร้อมด้วยรายชื่อบล็อก ต่อไปนี้คือสิ่งที่คุณต้องทำ

1. คลิกที่ไอคอนรูปดินสอสีส้มเพื่อเขียนโพสต์ใหม่ และป้อนอะไรก็ได้ที่ต้องการแบ่งปันกับคนทั้งโลก
2. ถัดไป คุณจะเห็นหน้าเว็บของเครื่องมือแก้ไขโพสต์ เริ่มต้นด้วยการตั้งชื่อโพสต์ (ไม่จำเป็น) จากนั้นป้อนเนื้อหาโพสต์
   
3. เมื่อดำเนินการเสร็จแล้ว ให้คลิกปุ่ม ดูตัวอย่าง ที่ด้านบนเพื่อตรวจสอบให้มั่นใจว่าพร้อมที่จะดำเนินการ จากนั้นคลิกที่ปุ่ม เผยแพร่ เพื่อเผยแพร่โพสต์

กลับไปด้านบน

เพิ่มรูปภาพ

คุณสามารถเพิ่มภาพจากคอมพิวเตอร์หรือจากเว็บไปยังบล็อกของคุณ คลิกที่ไอคอนภาพในแถบเครื่องมือของเครื่องมือแก้ไขบทความ หน้าต่างใหม่จะปรากฏขึ้น เพื่อให้คุณเรียกดูไฟล์ภาพจากคอมพิวเตอร์ หรือป้อน URL ของภาพบนเว็บ

เมื่อคุณเลือกภาพได้แล้ว คุณจะสามารถเลือกการออกแบบเพื่อกำหนดว่าภาพของคุณจะปรากฏในบทความอย่างไร:

• ตัวเลือก "ซ้าย" "กึ่งกลาง" และ "ขวา" ช่วยให้คุณปรับแต่งวิธีที่ข้อความบล็อกจะล้อมรอบภาพของคุณ
• ตัวเลือก "ขนาดภาพ" จะกำหนดขนาดของภาพที่จะปรากฏในบทความของคุณ

คลิก อัปโหลดภาพ เพื่อเพิ่มภาพของคุณ จากนั้นคลิก เสร็จสิ้น เมื่อหน้าต่างการแจ้งปรากฏเพื่อแจ้งให้คุณทราบว่า "เพิ่มภาพของคุณแล้ว" จากนั้น Blogger จะนำคุณกลับสู่เครื่องมือแก้ไขบทความ ซึ่งคุณจะพบภาพของคุณพร้อมสำหรับการเผยแพร่ในบล็อกของคุณ

นอกจากนี้คุณยังสามารถเผยแพร่ภาพในบล็อกของคุณ โดยใช้อุปกรณ์มือถือ ซอฟต์แวร์ภาพที่ให้บริการฟรีของ Google Picasa หรือบริการของบุคคลที่สามเช่น flickr

กลับไปด้านบน

เพิ่มวิดีโอ

เมื่อต้องการเพิ่มวิดีโอลงในโพสต์ของบล็อก ให้คลิกไอคอนรูปแผ่นฟิล์มในแถบเครื่องมือตัวแก้ไขโพสต์ที่ด้านบนของบริเวณที่คุณใช้เขียนข้อความบล็อก จะมีหน้าต่างปรากฏเพื่อให้คุณ "เพิ่มวิดีโอในบทความบล็อกของคุณ"

คลิก เรียกดู เพื่อเลือกไฟล์วิดีโอจากคอมพิวเตอร์ของคุณที่คุณต้องการอัปโหลด โปรดทราบว่า Blogger ยอมรับไฟล์ AVI, MPEG, QuickTime, Real และ Windows Media และวิดีโอของคุณต้องมีขนาดน้อยกว่า 100 เมกะไบต์

ก่อนที่จะอัปโหลดวิดีโอ เพิ่มชื่อในช่อง "ชื่อวิดีโอ" และยอมรับข้อกำหนดในการให้บริการ (คุณต้องดำเนินการนี้เฉพาะครั้งแรกที่อัปโหลดวิดีโอกับ Blogger) จากนั้นคลิก อัปโหลดวิดีโอ

ขณะที่วิดีโอของคุณถูกอัปโหลด คุณจะพบตัวจองพื้นที่ในเครื่องมือแก้ไขบทความ เพื่อแสดงว่าวิดีโอของคุณจะปรากฏที่ไหน นอกจากนี้คุณจะพบข้อความสถานะใต้เครื่องมือแก้ไขบทความ เพื่อแจ้งให้คุณทราบว่าการอัปโหลดกำลังดำเนินการ ขั้นตอนนี้จะใช้เวลาประมาณห้านาที ทั้งนี้ขึ้นอยู่กับขนาดวิดีโอของคุณ เมื่อดำเนินการเสร็จ วิดีโอของคุณจะปรากฏในตัวแก้ไขโพสต์

กลับไปด้านบน

กำหนดค่า

เทมเพลตเป็นสิ่งที่คุณจะใช้ปรับแต่งบล็อกได้อย่างสนุกสนาน เมื่อสร้างบล็อกใหม่ คุณจะต้องเลือกเทมเพลตเริ่มต้น ซึ่งเป็นการออกแบบพื้นฐานสำหรับบล็อกของคุณ คุณสามารถเลือกจาก เทมเพลตจำนวนมาก ที่เตรียมไว้ให้สำหรับบล็อกของคุณ เพียงเลือกเทมเพลตที่เหมาะกับความต้องการของคุณมากที่สุด

เมื่ออยู่บนแท็บ เทมเพลต คุณสามารถเลือกคลิกที่ปุ่ม กำหนดค่า สีส้มเพื่อเริ่มเครื่องมือออกแบบเทมเพลต WYSIWYG (“สิ่งที่เห็นคือสิ่งที่จะได้”) หรือเลือกเทมเพลตเริ่มต้นอันใดอันหนึ่งของเรา หากต้องการแก้ไข HTML ของบล็อก ให้คลิกที่ปุ่ม แก้ไข HTML สีเทา

นอกจากนี้ คุณสามารถปรับแต่งการออกแบบบล็อก โดยใช้อินเทอร์เฟซแบบลากและวางที่ใช้งานง่าย นอกจากนี้คุณยังสามารถเพิ่มวิดเจ็ตดีๆ เช่นการแสดงภาพสไลด์ หรือโพลจากผู้ใช้ หรือแม้แต่ โฆษณา AdSense ก็ได้ ถ้าคุณต้องการควบคุมการออกแบบบล็อกโดยละเอียดยิ่งขึ้นอีก คุณสามารถใช้คุณลักษณะแก้ไข HTML ได้ ในการแก้ไขการออกแบบบล็อก ให้ทำตามขั้นตอนต่อไปนี้

1. คลิก การออกแบบ จากเมนูแบบเลื่อนลงบนแดชบอร์ดด้านล่างบล็อกที่คุณต้องการกำหนดค่า
2. จากนั้นคลิก แก้ไข เพื่อแก้ไขแกดเจ็ตที่มีอยู่ หรือ เพิ่มแกดเจ็ต เพื่อเพิ่มใหม่
3. ถ้าต้องการเพิ่มแกดเจ็ตใหม่หลังจากที่คุณคลิก เพิ่มแกดเจ็ต ให้คลิกที่เครื่องหมายบวกถัดจากแกดเจ็ตที่คุณต้องการ คุณสามารถเลือกวิดเจ็ตตามหมวดหมู่ หรือค้นหาวิดเจ็ตที่ต้องการในมุมด้านขวาบนของหน้าต่างแบบป๊อปอัป

4. เมื่อคุณได้เพิ่มข้อมูลที่จำเป็นไปยังแกดเจ็ตที่เลือกไว้เรียบร้อยแล้ว ให้คลิกปุ่ม บันทึกการจัดวาง สีส้ม การออกแบบที่เปลี่ยนแปลงไว้จะปรากฏขึ้นในทันที

กลับไปด้านบน

#permissionsข้อมูลส่วนบุคคลและการอนุญาต

ตามค่าเริ่มต้น บล็อกของคุณทุกส่วนจะเป็นแบบสาธารณะ และบุคคลทั่วไปในอินเทอร์เน็ตสามารถอ่านได้ แต่ถ้าคุณต้องการความเป็นส่วนตัว คุณสามารถทำได้เช่นกัน คุณสามารถเปลี่ยนการตั้งค่าเหล่านี้ในแท็บ การตั้งค่า | ขั้นต้น

1. ในส่วน "ผู้อ่านบล็อก" คุณอาจพบว่ามีการเลือก "ใครก็ได้" ไว้เป็นค่าเริ่มต้น เมื่อเปลี่ยนตัวเลือกนี้เป็น "เฉพาะผู้อ่านเหล่านี้" คุณจะพบปุ่ม เพิ่มผู้อ่าน
2. คลิกที่ปุ่ม เพิ่มผู้อ่าน จากนั้นป้อนที่อยู่อีเมลของบุคคลที่คุณต้องการให้สิทธิ์ในบล็อกของคุณ ถ้าต้องการเพิ่มหลายคน ให้คั่นที่อยู่ด้วยเครื่องหมายจุลภาค
3. สำหรับแต่ละที่อยู่ที่ป้อน บัญชีผู้ใช้ Google ที่เชื่อมโยงกับที่อยู่นั้นจะได้รับสิทธิ์ในการดูบล็อกของคุณ ถ้าที่อยู่ไม่ได้เชื่อมโยงกับบัญชี บุคคลนั้นจะได้รับอีเมลคำเชิญพร้อมด้วยลิงก์เพื่อให้สามารถดำเนินการหนึ่งในสามอย่างต่อไปนี้:
   • ลงชื่อเข้าใช้บัญชีที่มีอยู่
   • สร้างบัญชีใหม่
   • ดูบล็อกในฐานะผู้เข้าชม (ไม่ต้องมีบัญชี)

โครงงานคอมพิวเตอร์

โครงงานคอมพิวเตอร์

กิจกรรมที่จัดว่าเป็นโครงงานควรมีองค์ประกอบหลัก ดังนี้
          - เป็นกิจกรรมที่เกี่ยวข้องซอฟต์แวร์และเครื่องคอมพิวเตอร์
          - ผู้เรียนเป็นริเริ่มและเลือกเรื่องที่จะศึกษา ค้นคว้า พัฒนา       
          - เก็บรวบรวมหรือประดิษฐ์คิดค้นด้วยตนเองตามความสนใจและระดับความรู้ความสามารถ
          - ผู้เรียนเป็นผู้วางแผนในการศึกษา สรุป และเสนอผลการศึกษาด้วยตนเอง โดยมีผู้เสนอเป็นที่ปรึกษา

ประเภทของโครงงาน แบ่งได้เป็น 5 ประเภท

          1. โครงงานพัฒนาสื่อเพื่อการศึกษา เป็นโครงงานที่ใช้คอมพิวเตอร์ในการผลิตสื่อเพื่อการศึกษา เช่น โครงงานเกี่ยวกับการพัฒนาเว็บไซต์
          2. โครงงานพัฒนาเครื่องมือ เป็นโครงงานที่สร้างเครื่องมือ ใช้สร้างงาน ส่วนใหญ่จะอยู่ในรูปของซอฟต์แวร์ เช่น ซอฟต์แวร์วาดรูป
          3. โครงงานประเภทการทดลองทฤษฎี เป็นโครงงานที่ใช้คอมพิวเตอร์ในการจำลองการทดลองของสาขาต่างๆ
          4. โครงงานประเภทการประยุกต์ใช้งาน สร้างผลงานเพื่อประยุกต์ใช้งานในชีวิตประจำวัน
          5. โครงงานพัฒนาเกม เพื่อความรู้ ความเพลิดเพลิน เช่น เกมหมารุก

ขั้นตอนการทำโครงงานคอมพิวเตอร์
          1. คัดเลือกหัวข้อโครงงานที่สนใจ
          2. ศึกษาค้นคว้าจากและวางแผน
          3. จัดทำเค้าโครงของโครงงาน  

          4. การลงมือทำโครงงาน
          5. การเขียนรายงาน
          6. การนำเสนอและแสดงโครงงาน

    แบบฟอร์มเขียนโครงงาน

ชื่อโครงงาน……………………………………………………………
รายวิชา……………………………………………………….
ชื่อผู้ทำโครงงาน
1…………………………………เลขที่ …………ชั้น …………….
2…………………………………เลขที่ …………ชั้น …………….
3…………………………………เลขที่ …………ชั้น …………….

โรงเรียนนาบอน  อำเภอนาบอน  จังหวัดนครศรีธรรมราช
ชื่ออาจารย์ที่ปรึกษา……………………………………………………..
ระยะเวลาดำเนินงาน…………………………………………………(วัน.)

รายละเอียดเกี่ยวกับโครงงาน

1. แนวคิด ที่มา และความสำคัญ
………………………………………………………………………………………………………………………………………………………………………………………………………………
2. วัตถุประสงค์
………………………………………………………………………………………………………………………………………………………………………………………………………………
3. หลักการและทฤษฎี
………………………………………………………………………………………………………………………………………………………………………………………………….……………

4. ขั้นตอนการดำเนินงาน
………………………………………………………………………………………………………………………………………………………………………………………………………………

5. แผนปฏิบัติงาน
………………………………………………………………………………………………………………………………………………………………………………………………………………
6. ผลที่คาดว่าจะได้รับ
…………………………………………………………………………………………………………………………………………………………………………………………………….…………
7. เอกสารอ้างอิง
………………………………………………………………………………………………………………………………………………………………………………………………………………

.......................................................................................

Profile

ประวัติส่วนตัว



เว็บเพจประวัติส่วนตัว

ชื่อ : นายจิตติพัญญ์ สุขจันทร์

เกิดวันที่ 13 เดือน มีนาคม ปี 2533

อายุ: 25 ปี

ที่อยู่ : 244 ม.7 ต.ปากน้ำ อ.เมือง จ.ชุมพร

Facebook : Me'Jiew


รร.วัดราชโอรส

-------------------------------------------------------------------------------

คำสั่ง HTML คำสั่งเชื่อมโยงลิงค์

คำสั่ง HTML

คำสั่งเชื่อมโยงลิงค์ (Link) HTML

       บทนี้เราจะกล่าวกันในเรื่องการเชื่อมโยง(Link) รูปแบบต่างๆในการเขียนเว็บ HTML คำสั่งที่ใช้เป็นหลักเลยก็คือแท็ก <a> ที่มีแอททริบิว(attributes) ที่สำคัญคือ href, target ,rel เป็นต้น นอกจากนี้เราจะมาดูการนำไปใช้ในรูปแบบต่างๆ เช่น การสร้างการเชื่อมโยง(Hyperlink) แบบปกติ , การสร้างลิงค์กับรูปภาพ , การสร้างลิงค์ในหน้าใหม่(new browser window) , การลิงค์ไปยังอีเมล์ด้วยคำสั่ง 'mailto'  , และการสร้างการเชื่อมโยงด้วยจาวาสคริป (Javascript link)

รูปแบบ

<a href="URL" attributes >Example Text</a>

ตัวอย่าง
<a href="index.html">หน้าหลัก</a><a href="http://108like.com">ไปยังเว็บ 108Like</a><a href="#">ไปด้านบน</a>

ผลลัพธ์

หน้าหลัก >> ลิงค์ไปยังไฟล์ 'index.html'
ไปยังเว็บ 108Like >> ลิงค์ไป URL ที่ระบุในที่นี้คือ http://108like.com
ไปบ้านบน >> ไปยังด้านบนสุดของหน้า

ตัวอย่าง 

<a href="http://www.108like.com"><img src="img/108like.png" /></a>ผลลัพธ์
  
<!-- Logo ที่ลิงค์ไปยัง URL: http://108like.com -->

    

สำหรับคำสั่งรูปภาพผู้เขียนจะไม่ขออธิบาย(หากมาถึงจุดนี้แล้วยังไม่เข้าใจสามารถศึกษาต่อในหัวข้อBasic HTML ที่ได้เขียนไว้แล้วก่อนหน้านี้) นอกจากนี้เราสามารถกำหนดรูปแบบของการเปิดลิงค์ต่างๆด้วยแอททริบิวต์ target ซึ่งมีรูปแบบและตัวอย่างดังนี้ 

รูปแบบ

<a href="http://108like.com" target="VALUE" >Go to 108Like</a>


รูปแบบ VALUE ที่ใช้กับ target ได้แก่

_blank           เปิดลิงค์ในหน้าต่างใหม่
_parent         เปิดลิงค์ในหน้าเดิม (ถือเป็นค่า Default)
_self             เปิดลิงค์ในหน้าเฟรมนั้นๆ (ศึกษาเรื่อง frame)
_top             เปิดลิงค์ทับเฟรมเดิมทั้งหมด (ศึกษาเรื่อง frame)

   

จะเห็นว่าหากต้องการให้ลิงค์นั้นเปิดในหน้าต่างใหม่ก็เพียงแต่เพิ่มแอททริบิว target="_blank" เท่านั้น แต่หากไม่ก็เพียงแค่เปลี่ยน value ให้เป็น _parent หรือลบแอททริบิวท์ target ก็ได้เช่นเดียวกัน ส่วน _self และ _top ล้วนเกี่ยวกับ frame โปรดศึกษาเรื่องเฟรม(Frame) ในภาษา HTML (แต่ผู้เขียนเห็นว่าเฟรมจะกลายเป็นแท็กที่ยกเลิกไปในอนาคต เพราะไม่นิยมใช้กันแล้วในปัจจุบัน ข้อเสียอย่างหนึ่งคือไม่เป็นผลดีต่อ SEO ในนี้เราจะไม่กล่าวถึง) 

.............................................................................................................

คำสั่ง HTML คำสั่ง IMG (เกี่ยวกับรูปภาพ)

คำสั่ง HTML

คำสั่ง IMG  การใส่รูปภาพ
คำสั่ง Background (ใส่ภาพพื้นหลัง)

 ความหมายและชนิดของแฟ้มภาพ

                             การใส่รูปภาพลงในเว็บเพจ เป็นอีกวิธีหนึ่งที่จะทำให้เว็บเพจดูสวยงามขึ้น โดยนำรูปภาพมาใส่ในเว็บเพจร่วมกับข้อความได้ แต่ขอแนะนำว่าหากต้องการที่จะใส่รุปภาพใดในเว็บเพจให้ทำการคัดลอกรูปภาพนั้นมาเก็บไว้ในโฟล์เดอร์เดียวกับเว็บเพจเสียก่อนเพื่อให้ง่ายต่อการจัดการและการเคลื่อนย้าย ส่วนภาพที่นำมาใส่ในเอกสารควรมีขนาดของไฟล์ภาพไม่เกิน 40 kb  เพราะถ้าใหญ่เกินกว่านี้จะทำให้การโหลดข้อมูลช้า ทำให้ผู้เข้ามาดูเว็บเพจต้องคอยนาน รูปภาพที่นิยมนำมาลงในหน้าเว็บเพจจะมีอยู่ 2 ชนิด  คือ

                        1.  รูปภาพชนิด Graphics Interchange Format  (GIF)  เป็นไฟล์รูปภาพที่มีการบีบข้อมูลทำให้ประหยัดเนื้อที่ สามารถแสดงความละเอียดของภาพได้สูงสุด 256 สี ส่วนมากจะเป็นพวกรูปภาพการ์ตูนต่าง ๆ ที่ไม่ต้องการความละเอียดของภาพมากนัก
                       2.  รูปภาพชนิด Joint Photographic Experts Group (JPEG หรือ JPG) เป็นไฟล์รูปภาพที่มีการบีบข้อมูลเหมือนกัน  ทำให้ไฟล์มีขนาดเล็กแต่ไฟล์รูปแบบ JPG  จะสามารถแสดงความละเอียดของสีได้สูงถึง 16 ล้านสี ซึ่งจะทำให้ภาพมีความคมชัดมากกว่า  ส่วนมากจะใช้กับพวกภาพถ่ายต่าง ๆ

 คำสั่งที่ใช้ในการใส่แฟ้มภาพลงเว็บเพจ (Web Page)

                            คำสั่ง <IMG SRC> (Image Source)  เป็นคำสั่งที่ใช้สำหรับใส่รูปภาพลงในเอกสาร HTML  โดยที่ไฟล์รูปภาพต่าง ๆ ที่ต้องการนำมาใส่ในเอกสาร HTML  นั้น  จะต้องถูกเก็บอยู่ในโฟลเดอร์เดียวกันกับเอกสาร HTML เท่านั้น  แต่ถ้าอยู่คนละแห่งก็สามารถนำมาใส่ได้   โดยการกำหนดไดร์ฟและโฟลเดอร์ของไฟล์ที่รูปภาพนั้นอยู่ไว้ด้วย    มีรูปแบบการใช้คำสั่งดังนี้

ตัวอย่างที่ 1 <img src="ที่อยู่ภายในเครื่องของรูป\ชื่อรูปภาพ .gif หรือ .jpg">

ตัวอย่างที่ 2 <img src="urlของรูปภาพ .gif หรือ .jpg">

..........................................................................................................................................

  คำสั่งที่ใช้ในการนำแฟ้มภาพมาทำเป็นภาพพื้นหลังของเว็บเพจ (Web Page)

background = กำหนดรูปภาพ

bgproperties = fixed การกำหนดให้รูปภาพคงที่ จะทำให้รูปภาพไม่มีการเคลื่อนที่ตามเมื่อเลื่อนสกอรบาร์

คำสั่ง HTML คำสั่ง Font

คำสั่ง HTML

คำสั่ง Font  การใส่ข้อความและกำหนดสีข้อความ

1.   <font>...ข้อความ...</font>
2.  <font size="ตัวเลข">.....ข้อความ....</font>    ***หมายเหตุ "ตัวเลข" กำหนดตั้งแต่ 1-10
3.  <font color="สีตัวอักษร">.....ข้อความ....</font>   ***หมายเหตุ ใส่เป็นชื่อภาษาอังกฤษ เช่น Red = สีแดง
4.   <br>  \คำสั่งขึ้นบรรทัดใหม่

ตัวอย่างสี

โครงสร้างภาษา HTML

โครงสร้างภาษา HTML

<html>   \เปิดคำสั่ง html เพื่อเริ่มการสร้างเว็บ

<head>   \เปิดคำสั่งการใส่หัวเรื่อง

<title>....ชื่อเรื่อง....</title>  \คำสั่งการตั้งชื่อของเว็บเพจหน้านั้น

</head>  \เปิดคำสั่งการใส่หัวเรื่อง  

<body>    \เริ่มคำสั่งการพิมพ์คำสั่งหรือเนื้อหา รูปภาพและข้อมูลต่างๆ

</body>  \ปิดคำสั่ง body

</html>  \ปิดคำสั่ง html เพื่อจบคำสั่งการเขียนเว็บเพจ

งานรูปภาพชิ้นที่ 5

การจัดการรูปภาพ

งานชิ้นที่ 5 ให้นักเรียนใช้เครื่องมือที่เรียนมาทั้งหมดสร้างรูปภาพขึ้นมา 1 รูป โดยมีขนาด 1044 x 1088 

เครื่องมือที่ใช้มี ดีงนี้

1.กลุ่มเครื่องมือ Selection

2.คำสั่ง Image > Adjustment

3.กลุ่มเครื่องมือ Text

4.Layer

รูปภาพเปรียบเทียบ

ชิ้นงานตัวอย่าง

งานรูปภาพชิ้นที่ 4

การจัดการรูปภาพ

งานชิ้นที่ 4 ให้นักเรียนใช้คำสั่ง Create Clipping Mask เพื่อทำการซ้อนเลเยอร์ให้รูปต้นฉบับมีพื้นผิวเป็นสีเดียวกับรูปพื้นหลัง

ตัวอย่าง

งานรูปภาพชิ้นที่ 3

การจัดการรูปภาพ

งานชิ้นที่ 3 ให้นักเรียนใช้เครื่องมือในกลุ่มพิมพ์ข้อความ (TEXT) และสร้างเป็นประวัติส่วนตัวของตนเอง พร้อมใส่รูปและตกแต่งให้สวยงาม ขนาดของชิ้นงานเป็น A4

เครื่องมือ

ตัวอย่าง