ออกแบบเว็บฝึกหัด: วิธีที่จะทำให้การไหลเวียนของข้อความรอบภาพ

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

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

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

พารามิเตอร์ตาม "hspace" และ "vSpace" (ระยะทางจากภาพที่ลงในข้อความรอบ) เห็นได้ชัดว่า "hspace" - padding แนวนอนและ "vSpace" - แนวตั้ง

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

มีคุณลักษณะเฉพาะไม่กี่แห่งที่มีอยู่ในส่วนของแท็กจะเป็น นี้ "accesskey", "ชั้น", "id" และ "สไตล์" "Accesskey" กำหนด รวมกันของคีย์, ผ่านที่เข้าถึงวัตถุ "ชั้น" และ "id" - พารามิเตอร์ที่เกี่ยวข้องกับ CSS พวกเขาอธิบายชั้นเรียนที่เป็นภาพ (หรือตัวระบุ) "สไตล์" - ข้อความแอตทริบิวต์ที่ช่วยให้คุณสามารถตั้งค่าตัวในภาพ CSS สไตล์

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

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

มีอีกเครื่องมือที่มีประสิทธิภาพคือ - CSS (มากขึ้นอเนกประสงค์) มันสามารถใช้มีประสิทธิภาพมากขึ้นตั้งค่าคุณสมบัติแท็กรวมทั้งการไหลของข้อความรอบภาพ CSS ช่วยให้คุณกำหนดค่าพารามิเตอร์ที่ไม่เพียง แต่วัตถุที่เฉพาะเจาะจงและทุกคนชอบเขา ตัวอย่างเช่นถ้าคุณต้องการระบุเยื้องของทุกภาพในเอกสารเป็นสิบพิกเซล, มันเพียงพอที่จะเชื่อมต่อกับ CSS ไฟล์ด้วยตะเข็บเดียว: "img {margin: 10px 10px 10px 10px;}" (! ในทางปฏิบัติคำพูดที่ไม่จำเป็น)

การไหลข้อความรอบภาพตัวอย่างเช่นบนขอบด้านซ้ายถูกกำหนดให้เป็น "img {align: ซ้าย;}"

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

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