เนื้อหาของคอร์ส
พื้นฐานHTML
HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Languageโดย Hypertext หมายถึงข้อความที่เชื่อมต่อกันผ่านลิงค์(Hyperlink) Markup languageหมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเองปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
0/4
HTML เบื้องต้น
ภาษา HTML HTML ย่อมาจาก Hyper Text Markup Language เป็นโปรแกรมภาษาประเภทหนึ่งสำหรับแสดงข้อความต่าง ๆ ในรูปแบบข้อความ รูปภาพ หรือภาพเคลื่อนไหว ฯลฯ และสามารถเชื่อมโยงข้อมูลไปยังเอกสารอื่นได้ที่มีความสามารถสูงเหนือกว่าเอกสารทั่วไปเพราะสามารถเปิดดูข้อมูลภายในได้ ทำได้โดยการใส่คำสั่งลงไปในเอกสาร ซึ่งเรียกว่า แท็ก (TAG) และการนำเอกสารมาแสดงบนหน้าจอภาพในระบบอินเทอร์เน็ตได้ เรียกดูผลได้บนโปรแกรมเบราเซอร์ได้เลย โครงสร้างของภาษา HTML โครงสร้างของไฟล์ภาษา HTML มี 2 ส่วน คือ 1) ส่วนที่เป็นข้อมูลที่ต้องการแสดง เช่น ข้อความ ภาพ เสียง ภาพเคลื่อนไหว เป็นต้น 2) ส่วนที่เป็นคำสั่งแท็ก (TAG) เพื่อใช้กำหนดลักษณะของข้อมูล โดยกำหนดเป็นแท็กเปิดและแท็กปิด เช่น การวางตำแหน่งของข้อมูล ขนาดของขอความ การกำหนดสีข้อความ ส่วนหัว (HEAD) ประกอบด้วยการกำหนดชื่อของเว็บเพจที่เรียกว่า Title บอกให้ทราบว่าเอกสารนั้นเกี่ยวกับอะไร โดยคำสั่ง เป็นการเริ่มต้นชื่อเรื่องเอกสาร ภายในคำสั่งประกอบด้วยคำสั่ง <TITLE> อีกที่เพื่อแสดงชื่อของเอกสารนั้น ส่วนเนื้อหาของเอกสาร (BODY) ประกอบด้วยส่วนที่เป็นเนื้อหาของเว็บเพจ เช่น ข้อความ ตาราง รูปภาพ พื้นหลังสีตัวอักษร และแบบฟอร์มต่าง ๆ โดยใช้คำสั่ง
0/9
วิชาคอมพิวเตอร์เพื่ออาชีพ 3-4 (ม.5/2 สหศิลป์) ภาคเรียนที่ 2 ปีการศึกษา 2564
เกี่ยวกับบทเรียน

HTML images คือ การใส่รูปภาพในเอกสาร html

 1.ใส่รูปภาพแบบปกติ ไม่มีการกำหนดอะไร

<img src="/ใส่ URL ของภาพ" />

2.ในกรณีที่ต้องการใส่ชื่อภาพ ซึ่งอาจใช้เป็นข้อความสำรองในกรณีที่รูปภาพเกิดข้อผิดพลาดไม่สามารถแสดงผลบนหน้าเว็บเพจได้

<img src="/url" alt="ข้อความอธิบายภาพสำรอง"/>

3.ใส่ขนาดของภาพ

<img src="/URL ของภาพ" alt="ข้อความอธิบายภาพสำรอง" width="กรอกตัวเลขที่ต้องการ" height="กรอกตัวเลขที่ต้องการ"/>

โดยค่าตัวเลขที่กรอกมีหน่วยเป็น pixels
ตัวอย่าง

<html>
<body>

<img border="0" src="http://images.temppic.com/20-10-2012
/images_vertis/1350706157_0.24874200.jpg"
alt="coala" width="304" height="228">

</body>
</html>

ผลัพธ์ที่ได้คือ

***ในการใส่รูปภาพในเอกสาร html นี้การใส่ที่อยู่ URL สำคัญมาก เพราะถ้าที่อยู่ผิดรูปจะไม่แสดง
วิธีการหาที่อยู่ URL ของรูปภาพมี 2 วิธี ดังนี้
1.การเอารูปจากเว็บไซต์
– เปิดเว็บไซต์นั้นขึ้นมา หารูปที่ต้องการ
– คลิกขวาที่รูป เลือก view image info แล้ว copy ตัว URL ในส่วน location ให้หมด
– เมื่อได้ URL ก็เอาไปใส่ในโค็ด html ได้เลย
จะสังเกตุได้ว่า จะขึ้นด้วย http และจบด้วย นามสกุล .jpg หรือ .gif

2.การเอารูปภาพจากคอมของเราเอง
– หาเวปที่ให้บริการอัพโหลดรูป เช่น http://www.temppic.com
– ทำการอัพโหลดรูป พอเสร็จแล้วเราจะได้ URL

Tag ที่เกี่ยวข้อง

<img /> กำหนดรูปภาพ
<mapt> กำหนดแผนที่รูปภาพ
<area /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ