สวัสดี ผู้อ่านที่รักบล็อก! ในบทความนี้คุณจะได้เรียนรู้ทุกสิ่งเกี่ยวกับ วิธีแทรกรูปภาพบน หน้า html - คุณมีรูปภาพหลายรูปที่คุณต้องการใส่ลงในเพจของคุณหรือคุณต้องการใส่โลโก้บนเว็บไซต์ของคุณหรือไม่? ทั้งหมดนี้เป็นเรื่องง่าย หลังจากอ่านบทความนี้ คุณจะสามารถแทรกรูปภาพลงในหน้า html ของคุณได้โดยไม่มีปัญหาใดๆ ในการทำเช่นนี้เราจะพูดถึงรายละเอียดเกี่ยวกับ แท็ก และคุณลักษณะของรูปแบบนั้น เราจะมาดูรูปแบบไฟล์กราฟิก เช่น gif, jpeg และ PNG กันแบบคร่าวๆ และยังดูคุณลักษณะใหม่ของ HTML5 ที่ทำให้การแทรกวิดีโอและเสียงลงในไซต์ของคุณง่ายขึ้น

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

รูปภาพกราฟิกทั้งหมดและข้อมูลใด ๆ ที่ถูกจัดเก็บไว้ในไฟล์ที่แยกจากหน้าเว็บโดยทั่วไปจะเรียกว่า ดำเนินการองค์ประกอบของหน้า

ก่อนจะใส่รูปภาพและดูรายละเอียดแท็ก การเรียนรู้เกี่ยวกับรูปแบบกราฟิกเพียงเล็กน้อยก็คุ้มค่า

รูปแบบภาพกราฟิก

มีมากมายที่แตกต่างกัน รูปแบบกราฟิกแต่เบราว์เซอร์รองรับเพียงบางส่วนเท่านั้น ลองดูทั้งสามคน

1. รูปแบบ JPEG(กลุ่มผู้เชี่ยวชาญด้านการถ่ายภาพร่วม- เป็นรูปแบบที่นิยมใช้สำหรับจัดเก็บภาพ รองรับสี 24 บิตและเก็บฮาล์ฟโทนทั้งหมดในรูปภาพไม่เปลี่ยนแปลง แต่ jpeg ไม่รองรับความโปร่งใสและบิดเบือนรายละเอียดเล็กๆ น้อยๆ และข้อความในรูปภาพ JPEG ใช้สำหรับจัดเก็บภาพถ่ายเป็นหลัก ไฟล์ในรูปแบบนี้มี นามสกุล jpg,เจพีอี,เจเพ็ก.

2. รูปแบบ GIF(รูปแบบการแลกเปลี่ยนกราฟิก- ข้อได้เปรียบหลักของรูปแบบนี้คือความสามารถในการจัดเก็บภาพหลายภาพพร้อมกันในไฟล์เดียว สิ่งนี้ช่วยให้คุณสร้างวิดีโอแอนิเมชั่นทั้งหมดได้ ประการที่สอง สนับสนุนความโปร่งใส ข้อเสียเปรียบหลักคือรองรับเพียง 256 สี ซึ่งไม่เหมาะกับการเก็บภาพ GIF ส่วนใหญ่จะใช้เพื่อจัดเก็บโลโก้ แบนเนอร์ รูปภาพที่มีพื้นที่โปร่งใสและมีข้อความ ไฟล์ในรูปแบบนี้มีนามสกุลเป็น gif

3. รูปแบบ PNG(กราฟิกเครือข่ายแบบพกพา- รูปแบบนี้ได้รับการพัฒนาเพื่อทดแทน GIF รุ่นเก่าและ JPEG ในระดับหนึ่ง รองรับความโปร่งใส แต่ไม่อนุญาตให้มีภาพเคลื่อนไหว รูปแบบนี้มีนามสกุล png

เมื่อสร้างเว็บไซต์ พวกเขามักจะใช้รูปภาพในรูปแบบ JPEG หรือ GIF แต่บางครั้งก็ใช้ PNG สิ่งสำคัญคือการทำความเข้าใจว่าในกรณีใดควรใช้รูปแบบใดดีกว่า ในระยะสั้น:

JPEG เหมาะที่สุดสำหรับการจัดเก็บภาพถ่ายหรือภาพระดับสีเทาที่ไม่มีข้อความ

• GIF ใช้สำหรับแอนิเมชั่นเป็นหลัก
• PNG เป็นรูปแบบสำหรับทุกสิ่งทุกอย่าง (ไอคอน ปุ่ม ฯลฯ)

การแทรกรูปภาพลงในหน้า html

แล้วคุณจะแทรกรูปภาพลงบนเว็บเพจได้อย่างไร? คุณสามารถแทรกรูปภาพได้โดยใช้เพียงภาพเดียว แท็ก - เบราว์เซอร์จะวางรูปภาพไว้ที่ตำแหน่งบนเว็บเพจที่พบแท็ก .

รหัสสำหรับการแทรกรูปภาพในรูปแบบ htmlหน้ามีลักษณะดังนี้:

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

ต่อไปนี้คือตัวอย่างเพิ่มเติมบางส่วนของการระบุที่อยู่ของไฟล์ด้วยรูปภาพ:

- โค้ด html นี้จะแทรกรูปภาพชื่อ image.jpg ลงในเพจ ซึ่งจัดเก็บไว้ในโฟลเดอร์รูปภาพที่อยู่ตรงรากของเว็บไซต์

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

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

แท็ก เป็นองค์ประกอบแบบอินไลน์ ดังนั้นจึงควรวางไว้ในองค์ประกอบบล็อก เช่น ภายในแท็ก

- ย่อหน้า:

มาฝึกฝนและวางลงในหน้าของเราจากบทความก่อนหน้าเกี่ยวกับ รูปภาพ HTML- ฉันจะสร้างโฟลเดอร์ "images" ถัดจากไฟล์ html ของเพจของฉัน และวางไฟล์รูปภาพ "bmw.jpg" ไว้ที่นั่น ซึ่งมีลักษณะดังนี้:

จากนั้นโค้ด html ของเพจที่มีการแทรกรูปภาพจะเป็นดังนี้:

เว็บไซต์เกี่ยวกับรถยนต์.

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

ภาษาวิทยาศาสตร์ รถยนต์นี้:

ถนนไร้ร่องรอยของมอเตอร์กล ยานพาหนะมีล้ออย่างน้อย 4 ล้อ.

---

การจำแนกประเภทรถยนต์

รถยนต์มีประเภทดังต่อไปนี้:

• รถยนต์นั่งส่วนบุคคล;


• สินค้า;


• เอสยูวี;


• รถม้าชนิดเล็ก;


• หยิบ;


• กีฬา;


• การแข่งรถ

สงวนลิขสิทธิ์. 2010
เว็บไซต์เกี่ยวกับรถยนต์.

และดูผลลัพธ์การแสดงผลในเบราว์เซอร์:

ดังที่เราเห็นแล้วว่าการวางภาพบนหน้าเว็บนั้นไม่มีอะไรซับซ้อน ต่อไป มาดูแอตทริบิวต์แท็กที่สำคัญอื่นๆ กัน .

แอตทริบิวต์ alt เป็นตัวเลือกทางเลือก

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

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

และหน้าตาก็ประมาณนี้:

กำหนดขนาดของภาพ

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

ความกว้าง = "300" ความสูง = "200">

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

นั่นคือทั้งหมดที่เกี่ยวกับการแทรกรูปภาพลงในเพจต่างๆ ในตอนนี้ จากนั้นเราจะดูวิธีการแทรกเสียงหรือวิดีโอลงในเว็บไซต์...

การแทรกวิดีโอและเสียงโดยใช้ HTML 5

ใน ข้อกำหนดใหม่ html5 มีแท็กใหม่หลายแท็กที่ทำให้การแทรกไฟล์มัลติมีเดียเป็นเรื่องง่ายมาก สิ่งนี้ใช้กับวิดีโอและเสียงเป็นหลัก

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

แท็ก

ตามค่าเริ่มต้น คลิปเสียงจะไม่แสดงบนหน้าเว็บ แต่ถ้าอยู่ในแท็ก

แท็กคู่ใช้เพื่อแทรกวิดีโอบนหน้าเว็บ - ด้วยแท็กนี้ ทุกอย่างจะเหมือนกับแท็ก

ไม่มีอะไรจะพูดมากไปกว่าการแทรกรูปภาพและมัลติมีเดียลงในหน้า html ฉันหวังว่าคำถาม “จะแทรกรูปภาพลงในหน้า html ได้อย่างไร”ฉันตอบคุณ ดังนั้นฉันจะสรุป:

สำหรับ การแทรกรูปภาพใน htmlหน้าโดยใช้แท็กเดียว และระบุที่อยู่ของไฟล์ด้วยรูปภาพในแอตทริบิวต์ src: ;

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

หากมีอะไรไม่ชัดเจน ถามในความคิดเห็น และอย่าลืมสมัครรับการอัปเดตบล็อกของฉัน พบกันในโพสต์ถัดไป!

สำหรับการใส่ รูปภาพในรูปแบบ HTMLสองรูปแบบหลักที่ใช้คือ GIF และ JPEG สามารถจัดเก็บรูปแบบ GIF ได้ แอนิเมชั่นง่ายๆ(แบนเนอร์แบบไดนามิก) JPEG เหมาะสำหรับรูปภาพที่มีสีจำนวนมาก เช่น ภาพถ่าย รูปแบบที่สามสำหรับกราฟิกบนเว็บคือ PNG แต่ไม่ค่อยมีการใช้กันอย่างแพร่หลายในการออกแบบเว็บ รูปภาพในรูปแบบ GIF หรือ JPEG จะถูกแทรกลงในหน้าเว็บโดยใช้แท็ก โดยจะไม่มีแท็กปิด

แอตทริบิวต์ SRC

ผ่านแอตทริบิวต์ srcระบุที่อยู่ (URL) ของไฟล์ภาพเช่น เบราว์เซอร์ค้นหารูปภาพที่ต้องการในไดเร็กทอรีไซต์โดยใช้เส้นทาง (URL) ที่ระบุในแอตทริบิวต์นี้ เพื่อความสะดวก รูปภาพไซต์ทั้งหมดจะอยู่ในโฟลเดอร์แยกต่างหาก ซึ่งโดยปกติจะตั้งชื่อไว้ ภาพ- ตัวอย่างเช่น ถ่ายภาพใดๆ ควรเป็นรูปแบบขนาดเล็ก และบันทึกลงในโฟลเดอร์ภาพที่สร้างขึ้นพร้อมชื่อ primer.jpg- ต่อไปเราจะพูดถึงมันเพื่อการฝึกอบรม

เรามาลองใส่รูปภาพในหน้ากันดูไหม? เราเขียนโค้ด (เส้นทาง - URL เขียนขึ้นอยู่กับตำแหน่งของโฟลเดอร์ที่มีรูปภาพ):

src="image/primer.jpg">

สิ่งที่คุณไม่สามารถสร้างเว็บไซต์ได้หากไม่มี: ∼ ∼

สิ่งที่รู้เกี่ยวกับชายคนนี้ก็คือ
ว่าเขาไม่ได้อยู่ในคุก แต่ทำไมเขาถึงไม่ติดคุกก็ไม่รู้
มาร์ค ทเวน.

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

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

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

§ 1. วิธีแทรกรูปภาพ

หากต้องการแทรกรูปภาพลงใน HTML ให้ใช้แท็ก ไอเอ็มจีกับ ภาคบังคับคุณลักษณะ สอาร์ซี- คุณลักษณะนี้จะบอกเบราว์เซอร์ถึงเส้นทางไปยังไฟล์รูปภาพ เหล่านั้น. เพื่อแทรกรูปภาพ ด้วยชื่อ logo.jpgไปยังตำแหน่งใดจุดหนึ่งบนหน้า (โดยต้องมีทั้งหน้าและรูปภาพอยู่ ในโฟลเดอร์เดียว(ไดเร็กทอรี)) คุณต้องแทรกโค้ด html ต่อไปนี้ในที่นี้:

src="logo.jpg">

หากรูปภาพและเพจอยู่ในนั้น แตกต่างไดเรกทอรี (โฟลเดอร์) จากนั้นคุณจะต้องระบุเส้นทางไปยังรูปภาพ ค่อนข้างหน้า ตัวอย่างเช่นหากหน้า html อยู่ในไซต์ไดเร็กทอรี (โฟลเดอร์) ในไดเร็กทอรีเดียวกัน (โฟลเดอร์) จะมีรูปภาพไดเร็กทอรีย่อย (โฟลเดอร์) ซึ่งมีรูปภาพ logo.jpg ของเราอยู่ ดังนั้นในการแทรกคุณต้อง เขียนแบบนี้:

รูปภาพ/logo.jpg">

หรือคุณไม่ต้องกังวลและชี้ให้เห็น ที่อยู่แบบเต็มรูปภาพ- ตัวอย่างเช่นเช่นนี้:

http://www..png">

ในกรณีหลังนี้ เบราว์เซอร์จะแสดงโค้ดดังนี้:

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

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

§ 2. การระบุขนาดของรูปภาพ

เริ่มจากคุณสมบัติที่ให้คุณตั้งค่ากันก่อน ขนาดรูปภาพ(หรือพูดให้เจาะจงกว่าคือ จัดสรรพื้นที่สำหรับมิติข้อมูลเหล่านี้บนหน้าเว็บ) พวกเขาอยู่ที่นี่:

• ความกว้าง- ความกว้างของภาพเป็นพิกเซลหรือเปอร์เซ็นต์


• ความสูง- ความสูงของภาพเป็นพิกเซลหรือเปอร์เซ็นต์

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

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

ความกว้าง = "50" ความสูง = "20">

ความกว้าง = "10%" ความสูง = "5%">

§ 3. ข้อความแสดงแทน

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

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

ฉันขอย้ำอีกครั้งว่าสิ่งนี้จะเกิดขึ้นหากผู้ใช้ปิดการใช้งานการแสดงผลกราฟิก ถ้าไม่เช่นนั้น รูปภาพจะซ่อนข้อความแสดงแทน

§ 4. การจัดแนวรูปภาพ

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

• ซ้าย- รูปภาพอยู่ที่ขอบด้านซ้ายของหน้า และข้อความไหลไปรอบๆ รูปภาพทางด้านขวา


• ขวา- รูปภาพอยู่ที่ขอบด้านขวาของหน้า และข้อความและองค์ประกอบอื่นๆ ไหลไปรอบๆ รูปภาพทางด้านซ้าย

ตัวอย่างเช่น โค้ด HTML

เบราว์เซอร์จะแสดงเช่นนี้

และโค้ด HTML นี้:

จะมีลักษณะเช่นนี้:

หากต้องการหยุดข้อความไม่ให้พันรอบรูปภาพ คุณสามารถใช้แท็กได้ บีอาร์(คุ้นเคยกับเราจากส่วนก่อนหน้าเกี่ยวกับ) ที่ป้าย บีอาร์มีคุณสมบัติ ชัดเจนซึ่งสามารถรับค่าได้สามค่า:

• ซ้าย- หยุดการตัดข้อความรอบรูปภาพที่จัดชิดซ้าย


• ขวา- หยุดการตัดข้อความรอบรูปภาพที่จัดชิดขวา


• ทั้งหมด- หยุดการตัดข้อความรอบรูปภาพที่จัดตำแหน่งทั้งซ้ายและขวา

ขณะเดินทางบนอินเทอร์เน็ต คุณจะเห็นเว็บไซต์หลายแห่งแน่นอน รูปภาพต่างๆ, แบนเนอร์, ภาพถ่าย, กราฟิก วันนี้เราจะมาเรียนรู้วิธีการแทรกรูปภาพลงในหน้า HTML

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

มีบางสิ่งที่ต้องพิจารณาเมื่อเตรียมภาพของคุณ

1. เนื่องจากหน้าเว็บถูกโหลดผ่านเครือข่าย ปัจจัยสำคัญก็คือ ขนาด("น้ำหนัก") ไฟล์กราฟิก ฝังอยู่ในเอกสารเว็บ ยิ่งมีขนาดเล็กเท่าไร ภาพก็จะยิ่งแสดงเร็วขึ้นเท่านั้น

2. บ่อยครั้ง มิติทางกายภาพรูปภาพ (ความกว้างและความสูง) จะต้องถูกจำกัด (ลด) ในความกว้างและความสูง เช่น ตั้งค่าความกว้างไม่เกิน 700-800 พิกเซล มิฉะนั้น รูปภาพทั้งหมดจะไม่พอดีกับหน้าต่างเบราว์เซอร์ และแถบเลื่อนจะปรากฏขึ้น

รูปแบบกราฟิกสำหรับเว็บไซต์

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

นอกจากนี้ยังมีรูปแบบ: PNGซึ่งได้รับการสนับสนุนโดยเบราว์เซอร์เมื่อเพิ่มรูปภาพและมีสองรสชาติ: PNG-8และ PNG-24. แต่ความนิยม รูปแบบ PNGด้อยกว่ามากในการรับรู้ รูปแบบ GIFและเจเพ็ก.

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

เราเขียนโค้ดเพื่อแทรกรูปภาพลงในหน้าเว็บ

หากต้องการแทรกรูปภาพลงในเอกสาร HTML ให้ใช้โครงสร้างที่ระบุใน รายการ 8.1.รหัสนี้จะถูกแทรกลงในตำแหน่งที่ต้องการบนหน้าเว็บ (ตำแหน่งที่คุณต้องการดูภาพ)

ในหน้าเว็บของเราเกี่ยวกับรถยนต์โดยเฉพาะ ฉันได้เตรียมและแทรกรูปภาพสองรูป คุณสามารถดูโค้ดฝังสำหรับรูปภาพแรกในรายการ 8.1

รายการ 8.1.

นี่คือลักษณะภาพที่แทรกครั้งแรกบนหน้าเว็บของเว็บไซต์จะมีลักษณะดังนี้:

และตอนนี้ฉันจะแสดงความคิดเห็นในรายละเอียดเพิ่มเติมเกี่ยวกับสิ่งที่เขียนไว้ รายการ 8.1.

รูปภาพนั้น "ถูกแทรก" โดยใช้แท็ก: img src- รายการเต็มมีลักษณะดังนี้: img src="img/mers1.jpg", ที่ไหน "img/mers1.jpg"– ระบุว่ารูปภาพของเราอยู่ในโฟลเดอร์: รูปภาพและชื่อของไฟล์กราฟิก (รูปภาพ): mers1.jpg.

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

ลองดูตัวเลือกเพิ่มเติม:

เส้นขอบ = "0"– แสดงว่าไม่มีกรอบรอบๆ รูปภาพ ลองเปลี่ยน 0 เป็นตัวเลขอื่น เช่น 1 , - สอดคล้องกับความหนาของกรอบรอบภาพ 1 พิกเซล, 2 – สอดคล้องกับความหนาของกรอบรอบภาพสองพิกเซล เป็นต้น

สำคัญ! หากคุณวางแผนที่จะสร้างรูปภาพเป็นลิงก์ อย่าลืมระบุค่า: เส้นขอบ = "0".

ความกว้าง = "400"– ระบุว่าความกว้างของภาพคือ: 400 พิกเซล(ใส่ รูปร่างที่แท้จริงความกว้างของภาพของคุณ)

ความสูง = "209"- ระบุว่าความสูงของภาพคือ: 209 พิกเซล(ใส่จำนวนจริงสำหรับความสูงของภาพของคุณ)

หากคุณไม่ได้ระบุพารามิเตอร์: ความกว้างและ ความสูงจากนั้นรูปภาพอาจได้รับความบิดเบี้ยวทางเรขาคณิต

สเปซ = "20"– ระบุการเยื้องข้อความ 20 พิกเซลรอบรูปภาพ

จัด = "ซ้าย"– นี่คือแท็กที่คุณคุ้นเคยอยู่แล้ว….. ใช่แล้ว มันหมายถึงการจัดตำแหน่งด้านซ้าย หรืออาจใช้ความหมายก็ได้: ขวา- การจัดตำแหน่งที่ถูกต้อง

alt="มุมมองด้านหน้าของรถ" !}– ข้อความแสดงแทนจะถูกเขียนไว้ที่นี่ ซึ่งจะปรากฏขึ้นเมื่อคุณวางเมาส์ไว้เหนือรูปภาพ

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

ความคิดเห็นเกี่ยวกับบทความนี้ (บทเรียน):

โปรดบอกฉันว่าฉันควรสร้างโฟลเดอร์ img ที่ไหน

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

ประเด็นคือไม่แสดงรูปภาพ มีเพียงคำจารึกเท่านั้น มีอะไรผิดปกติ? ขอบคุณ

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

ขอบคุณมาก ทุกอย่างได้ผล

สวัสดี ฉันมีสถานการณ์เดียวกันกับวิทยากรคนก่อน: ฉันเขียนโค้ดเหมือนของคุณ ฉันเปลี่ยนแค่ชื่อไฟล์: แทนที่จะใส่ mers.1/jpeg ฉันใส่ลิงก์ Mercedes/jpeg มีเพียงหน้าต่างเท่านั้นที่ปรากฏบนเพจที่มี คำจารึกที่ด้านบน “มุมมองด้านหน้าของรถ” และไม่มีรูปภาพ ในความคิดของฉัน เบราว์เซอร์ไม่พบเส้นทางไปยังภาพถ่ายหรือเขียนไม่ถูกต้อง นี่คือรหัสของฉัน: ข

ดูโค้ด img/mercedes/jpeg ของคุณอย่างละเอียด คุณเข้าใจถูกต้องแล้วเบราว์เซอร์ไม่พบเส้นทางไปยังไฟล์กราฟิก 2. ชื่อไฟล์ไม่ถูกต้อง ดูว่าฉันมี mers1.jpg ได้อย่างไร

ฉันคัดลอกโค้ดแล้ววางฉันมีวงรีโดยไม่มีรูปภาพในวงรีมีลิงค์อยู่ด้านบน!

สวัสดี! ปัญหาเดียวกันคือฉันสร้างโฟลเดอร์ชื่อ img ในตำแหน่งเดียวกับเอกสารไซต์ รูปภาพชื่อ 1.jpg จะถูกบันทึกไว้ในโฟลเดอร์นี้ ฉันเขียนทุกอย่างตามตัวอย่างของคุณ

หากคุณสังเกตเห็นว่ารูปภาพของฉันอยู่ในโฟลเดอร์ img

บทความที่มีประโยชน์มากสำหรับผู้ดูแลเว็บมือใหม่ ข้อแม้เดียวสำหรับแอตทริบิวต์ "alt" บทความนี้ให้การตีความดังต่อไปนี้: "alt="มุมมองด้านหน้าของรถ"" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

นี่คือรหัสของฉัน แล้วเหตุใดจึงวางรูปภาพไว้ด้านข้างเมื่องานอยู่ตรงกลาง?

และหากนำภาพจากเว็บไซต์ของผู้อื่นไปจะไม่ถือเป็นการละเมิดลิขสิทธิ์หรือไม่?

อธิบายว่าทำไมเมื่อจัดวาง เอกสาร HTMLไปยังเซิร์ฟเวอร์ แทนที่รูปภาพจะมีพื้นที่ว่างในเฟรม แม้ว่าก่อนการแสดงภาพจะออกมาอย่างที่ควรจะเป็นก็ตาม

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

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

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

เอลวิรา ฉันอ่านจดหมายของคุณแล้ว รวมถึงความคิดเห็นและจดหมายอื่นๆ ทั้งหมดด้วย แต่จะตอบไหนล่ะ...หมู่บ้านปู่???

ไม่รู้ว่าทำไมทุกคนถึงอารมณ์เสียขนาดนี้!? คุณเพียงแค่ต้องไม่คัดลอกแล้ววางโค้ด แต่เขียนด้วยตัวเองแล้วทุกอย่างจะได้ผล... นี่คือข้อความในรูปภาพของฉัน

ฉันคัดลอกรายการของคุณวางค่าของฉัน - มีรูปภาพ จากนั้นฉันก็พิมพ์สิ่งเดียวกันด้านล่าง (ด้วยตนเอง) ไม่มีรูปภาพ - ช่างเป็นปาฏิหาริย์อะไรเช่นนี้?

AndreyK โปรดบอกฉันว่าข้อผิดพลาดอยู่ที่ไหน? พยายามกี่ครั้งก็ไม่สำเร็จ((

Andrey บอกฉันทีว่าทำไมฉันไม่เห็นรูป รหัสของฉัน: มีจารึกแต่ไม่มีภาพ ที่อยู่ของฉัน: [ป้องกันอีเมล]ขอบคุณ

ฉันต้องทนทุกข์ทรมานมาเป็นเวลานานเช่นกัน แต่มันก็ได้ผล! แน่นอนว่าจะต้องเปิดโฟลเดอร์ imj ในเอกสาร HTML

ฉันจะลองแน่นอน ขอบคุณ

อีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอีอี

ฉันทนทุกข์ทรมานมาเป็นเวลานานเช่นกันปรากฎว่าโฟลเดอร์ที่มีรูปภาพควรอยู่ในตำแหน่งเดียวกับ index.html ขอบคุณ Elena

Andrey ฉันแทรก:

Andrey ฉันแทรก: และฉันไม่มีรูปภาพในเอกสาร มีแต่ข้อความ!!! [ป้องกันอีเมล]

รหัสของฉัน...ไม่มีรูปภาพเช่นกัน โฟลเดอร์ img อยู่ในโฟลเดอร์เดียวกับดัชนี... โปรดช่วยด้วย [ป้องกันอีเมล]ขอบคุณ!

ฉันไม่รู้ ฉันอ่านความคิดเห็นทั้งหมด ฉันพยายามทุกอย่าง ฉันคัดลอกและวางข้อมูลของฉัน ไม่มีอะไรทำงาน โฟลเดอร์ที่มีรูปภาพ (img) อยู่ในตำแหน่งเดียวกับ index.html แต่ไม่มีภาพ มีกากบาทสีแดงและคำจารึกแทน ฉันทำงานในเบราว์เซอร์ IE นี่คือสิ่งที่ฉันป้อน:

ฉันดูโค้ด HTML ของหน้าแทนรูปภาพในบทเรียน: รหัสบนหน้าแตกต่างจากที่อยู่ในรายการ ทำไม และบนหน้าโค้ด “mers1.jpg” จะถูกขีดเส้นใต้ไว้ การคัดลอกด้วยการขีดเส้นใต้ล้มเหลว ฉันพยายามแทรกเช่นนั้น ยังไม่มีภาพครับ. เกิดอะไรขึ้น?

เราถามตัวเอง เราก็ตอบตัวเอง ฉันต้องทนทุกข์ทรมานมานานและไม่ได้ใส่รูปภาพ ปรากฎว่า: 1 แทนที่จะเป็นแท็ก src ฉันมี srk 2 ฉันสับสนเมื่อเขียนเส้นทางไปยังรูปภาพ ฉันเปลี่ยนชื่อโฟลเดอร์เป็น IMG และทุกอย่างทำงานได้ ฉันใช้เวลาเกือบสองวันกับสิ่งนี้ แต่มันก็คุ้มค่า

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

สวัสดี บอกวิธีวางภาพหนึ่งภาพไว้ด้านบน ภาพที่สองด้านล่างด้านซ้าย และภาพที่สามทางด้านขวาล่าง))))

..........ฉันเกิดข้อผิดพลาดอะไรกับภาพที่หายไป?

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

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

มาริน่าไม่มีอุบายหรือยั่วยุ :) ในรหัสรายการ 8.1 มีการระบุว่ารูปภาพนี้อยู่ในโฟลเดอร์: img หากคุณเปลี่ยนชื่อโฟลเดอร์สำหรับรูปภาพบนโฮสต์ของคุณ ให้เปลี่ยนชื่อในรายการ นั่นคือเคล็ดลับทั้งหมด

ผมกำลังพยายามใส่ภาพครับ!!! ฉันจดทุกอย่างด้วยแผ่นจดบันทึก ฉันทำทุกอย่างถูกต้อง บางทีอาจจะไม่คุ้มที่จะใช้แผ่นจดบันทึก??

และฉันเปิดทุกอย่างใน Mozilla Fire Fox ล่าสุด))

เส้นทางของรูปภาพของฉันคือ C:Documents and SettingsdenisDesktopkoffevinogradwwwImg และรูปภาพนั้นเรียกว่า gif ชื่อนี้รวมถึง 1.gif...ฉันทำสิ่งนี้ในแผ่นจดบันทึก

ฉันทำแล้วแต่เส้นทางไม่ออกมาเลย โมซิลล่าไม่เห็นรูปถ่ายของนักสำรวจและไฮไลต์ด้วยกากบาทสีแดง

เดนิส เปลี่ยนชื่อมันใหม่ โฟลเดอร์อิมเมจใน img เช่น ทั้งหมด เป็นตัวพิมพ์ใหญ่และเปลี่ยนชื่อเส้นทางด้วย เซิร์ฟเวอร์จำนวนมากไม่แสดงตัวพิมพ์ใหญ่อย่างถูกต้อง

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

จะทำให้ภาพขยายหรือย่อได้อย่างไร?

ด้วยเหตุผลบางอย่าง ภาพก็ไม่อยู่ตรงกลางสำหรับฉันเช่นกัน จับอะไร?.. รหัสเป็นดังนี้:

การทำงานกับรูปภาพในรูปแบบ HTML (วิธีแทรกรูปภาพ เปลี่ยนขนาด ทำให้รูปภาพเป็นลิงก์)

การแทรกรูปภาพ

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

ตัวอย่างเช่น หากต้องการวางรูปภาพบนหน้า:

บรรทัดต่อไปนี้วางอยู่ในตำแหน่งที่ถูกต้องในเอกสาร:

ซึ่งจะทำให้เบราว์เซอร์ทราบว่าไดเรกทอรีรากของไซต์ www.mysite.comมีไดเรกทอรีย่อย รูปภาพ 1.png

ที่นี่เราได้ระบุเส้นทางแบบเต็ม (หรือ ที่อยู่ที่แน่นอน) ไปที่รูปภาพ คุณสามารถระบุ ที่อยู่สัมพัทธ์ รูปภาพ:

เบราว์เซอร์ตีความบรรทัดนี้ดังนี้: ในไดเร็กทอรีที่มีเอกสาร html นี้อยู่จะมีไดเร็กทอรีย่อย รูปภาพประกอบด้วยรูปภาพพร้อมชื่อ 1.pngซึ่งควรจะวางไว้บนหน้า

และนี่คือตัวอย่างการระบุที่อยู่รูปภาพที่เกี่ยวข้องหากไซต์ของคุณมีมากกว่านั้น โครงสร้างที่ซับซ้อนและตัวอย่างก่อนหน้านี้ใช้ไม่ได้:

เบราว์เซอร์ตีความบรรทัดนี้ดังนี้: การรวมกันของอักขระ ../ หมายความว่าคุณต้องขึ้นไปหนึ่งระดับจากไดเร็กทอรีที่มีเอกสาร html นี้อยู่ และเช่นเดียวกับในตัวอย่างก่อนหน้านี้: ในไดเร็กทอรีที่เราพบว่ามีไดเร็กทอรีย่อย รูปภาพประกอบด้วยรูปภาพพร้อมชื่อ 1.pngซึ่งควรจะวางไว้บนหน้า

ด้วยเหตุผลด้านความปลอดภัย ควรระบุที่อยู่ที่เกี่ยวข้องของรูปภาพ ยกเว้นในกรณีที่คุณวางรูปภาพที่อยู่บนไซต์อื่นบนเพจของคุณ

ขนาดภาพ

ขนาดของแต่ละภาพจะถูกระบุด้วยพารามิเตอร์สองตัว: ความกว้างและความสูง ที่ป้าย มีพารามิเตอร์ที่เกี่ยวข้อง: ความกว้างและ ความสูง- พารามิเตอร์เหล่านี้รับค่าเป็นพิกเซล (px)

คุณสามารถถาม มิติที่แท้จริงรูปภาพ:

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

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

ตัวอย่างเช่น หากต้องการขยายภาพของเราให้ใหญ่ขึ้น 1.5 เท่า เราสามารถเขียนได้ว่า:

หรือ

ผลลัพธ์จะเหมือนกัน:

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

ตัวอย่างเช่น ถ้าเราต้องการให้รูปภาพมีความกว้างเพียงครึ่งหนึ่งของหน้า เราจำเป็นต้องเขียนดังนี้:

และเราจะได้รับ:

ล้อมกรอบภาพ

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

ตัวอย่างเช่น นี่คือวิธีที่คุณสามารถเพิ่มกรอบหนา 3 พิกเซลให้กับรูปภาพของเรา:

นี่คือสิ่งที่เบราว์เซอร์จะแสดงให้เราเห็น:

สีของเส้นขอบตรงกับสีข้อความบนเพจที่ระบุโดยใช้พารามิเตอร์ ข้อความแท็ก (ดูบทที่ 6 คุณสมบัติของหน้า - พารามิเตอร์แท็กเนื้อหา) สีเริ่มต้นคือสีดำ

และถ้าคุณไม่อยากเห็นเฟรม ให้บังคับพารามิเตอร์ ชายแดนค่าว่าง:

ข้อความแสดงแทน

ข้อความแสดงแทนเบราว์เซอร์จะแสดงแทนรูปภาพจนกว่าจะโหลด หรือแทนที่จะเป็นรูปภาพหากไม่แสดงด้วยเหตุผลบางประการ

เมื่อใดและหากรูปภาพถูกโหลด ข้อความแสดงแทนจะแสดงเมื่อคุณวางเมาส์ไว้เหนือรูปภาพนี้

หากต้องการเพิ่มข้อความแสดงแทน ให้ใช้ตัวเลือก ทางเลือกอื่นแท็ก ซึ่งกำหนดค่าสตริงซึ่งจะต้องอยู่ในเครื่องหมายคำพูด

คุณสามารถสร้างข้อความแสดงแทนหลายบรรทัดได้

เมื่อต้องการทำเช่นนี้ เพียงแทรกตัวแบ่งบรรทัดในเอกสาร HTML

ข้อความ">

การจัดตำแหน่งภาพ

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

ด้านล่างนี้คือตารางค่าพารามิเตอร์ที่เป็นไปได้ จัดตำแหน่ง:

ตัวเลือก ท็อปข้อความ, สูงสุด, กลาง, ปานกลาง, พื้นฐาน, ด้านล่างกำหนดการจัดตำแหน่งแนวตั้งของภาพ และพารามิเตอร์ ซ้ายและ ขวาแจ้งให้เบราว์เซอร์ทราบว่าข้อความควรอยู่ด้านใด ไหลไปรอบๆภาพ.

การเติมรอบภาพ

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

ตัวอย่างต่อไปนี้แสดงการตัดข้อความรอบๆ รูปภาพ โดยจัดรูปภาพไปทางซ้ายและมีช่องว่างภายใน 5 พิกเซลรอบๆ รูปภาพ

ในเมืองสตอกโฮล์ม บนถนนที่ธรรมดาที่สุด ในบ้านที่ธรรมดาที่สุด ครอบครัวชาวสวีเดนธรรมดาๆ ชื่อ Svanteson อาศัยอยู่ ครอบครัวนี้ประกอบด้วยพ่อที่แสนธรรมดา แม่ที่แสนธรรมดา และลูกที่แสนธรรมดาสามคน ได้แก่ บอส เบธาน และเบบี้

นี่คือผลลัพธ์ในเบราว์เซอร์:

ในเมืองสตอกโฮล์ม บนถนนที่ธรรมดาที่สุด ในบ้านที่ธรรมดาที่สุด ครอบครัวชาวสวีเดนธรรมดาๆ ชื่อ Svanteson อาศัยอยู่ ครอบครัวนี้ประกอบด้วยพ่อที่แสนธรรมดา แม่ที่แสนธรรมดา และลูกที่แสนธรรมดาสามคน ได้แก่ บอส เบธาน และเบบี้

การแยกภาพออกเป็นส่วนๆ

มีหลายครั้งที่จำเป็นต้องวางบนเพจ ภาพขนาดใหญ่- แต่หน้าจะใช้เวลานานในการโหลด จะทำอย่างไร?

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

ค่าศูนย์: เส้นขอบ = "0", ระยะห่างระหว่างเซลล์ = "0", เซลล์แพดดิ้ง = "0".

ในตัวอย่างต่อไปนี้ เราแบ่งรูปภาพออกเป็น 4 ส่วน ตารางจะมีลักษณะดังนี้:

และนี่คือผลลัพธ์: