วิธีทำรูปภาพใน Html

สารบัญ:

วิธีทำรูปภาพใน Html
วิธีทำรูปภาพใน Html

วีดีโอ: วิธีทำรูปภาพใน Html

วีดีโอ: วิธีทำรูปภาพใน Html
วีดีโอ: การใส่รูปภาพและกำหนดขนาดรูปใน html 2024, อาจ
Anonim

HTML เป็นภาษามาร์กอัปที่ใช้สร้างหน้าอินเทอร์เน็ต สามารถใช้ปรับแต่งการแสดงองค์ประกอบต่างๆ รวมถึงรูปภาพ การตั้งค่าการแสดงรูปภาพใน HTML ดำเนินการผ่านแท็กพิเศษ

วิธีทำรูปภาพใน html
วิธีทำรูปภาพใน html

คำแนะนำ

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

ในการสร้างรูปภาพใน HTML จะใช้แท็กซึ่งต้องวางไว้ในส่วนสำหรับแสดง ตัวอย่างเช่น:

รูปภาพใน HTML

ขั้นตอนที่ 3

แท็กไม่ปิดและไม่ต้องการแท็กปิด พารามิเตอร์หลักที่ต้องใช้คือ src ซึ่งกำหนดเส้นทางไปยังไฟล์ภาพที่ต้องการ คุณสามารถระบุในบรรทัดนี้ทั้งแบบเต็ม (ด้วย https://) และเส้นทางที่เกี่ยวข้อง (เช่น /pictures/img.jpg) ไปยังไฟล์รูปภาพที่คุณต้องการวาง

ขั้นตอนที่ 4

พารามิเตอร์ที่สำคัญอีกประการหนึ่งคือ alt ซึ่งกำหนดชื่อของรูปภาพและการระบุตัวตนบนหน้า ชื่อนี้จะปรากฏขึ้นเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ

ขั้นตอนที่ 5

คุณยังสามารถใช้แอตทริบิวต์ width และ height เพื่อตั้งค่าพารามิเตอร์รูปภาพ การตั้งค่าแรกรับผิดชอบความยาว และการตั้งค่าที่สองสำหรับความสูงของรูปภาพบนหน้า พารามิเตอร์นี้ระบุเป็นพิกเซล ดังนั้นแท็ก & img> สามารถตั้งค่าได้:

ขั้นตอนที่ 6

การใช้แท็กนี้ รูปภาพจะถูกสร้างขึ้น ซึ่งเป็นเส้นทางที่บันทึกในแอตทริบิวต์ src เมื่อคุณวางเมาส์เหนือรูปภาพ คุณจะเห็นข้อความ "ชื่อรูปภาพ" ในกรณีนี้ รูปภาพจะมีความกว้าง 300 พิกเซลและสูง 250 พิกเซล คุณสามารถตั้งค่าพารามิเตอร์ทั้งหมดข้างต้นได้ตามต้องการ

ขั้นตอนที่ 7

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

แนะนำ: