ปริศนาการสร้างเว็บเพจ: เส้นทางของไฟล์ภาพ

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

1) ภาพรวมของมาร์กอัปรูปภาพ

หากหน้าเว็บมีเพียงข้อความ แต่ไม่มีรูปภาพ รูปภาพเป็นส่วนสำคัญมากในการผลิตหน้าเว็บ HTML Professional จัดเตรียมแท็ก <IMG> เพื่อส่งออกรูปภาพไปยังหน้าเว็บ แท็กนี้มีแอตทริบิวต์ SRC, ALT, ALIGN, BORDER, WIDTH และ HEIGHT

2) รู้เบื้องต้นเกี่ยวกับคุณลักษณะ

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

ต่อไปนี้เป็นส่วนของใบเสนอราคา:
<IMG SRC="ค่าพารามิเตอร์">

ค่าพารามิเตอร์คือชื่อไฟล์เต็มและเส้นทางของรูปภาพ

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

แท็ก <IMG> ไม่ได้เพิ่มรูปภาพลงในเอกสาร HTML แต่เป็นการบอก HTML: ไฟล์รูปภาพใดคือไฟล์รูปภาพใด ที่ไหน? เพื่อให้ HTML สามารถเรียกได้จากตำแหน่งเดิมของไฟล์ภาพ หน้าที่ของแอตทริบิวต์ SRC คือการตอบคำถามทั้งสองข้อนี้ ดังนั้นค่าพารามิเตอร์ของแอตทริบิวต์ SRC จะต้องมีชื่อไฟล์แบบเต็มของไฟล์รูปภาพ กล่าวคือ ชื่อไฟล์และนามสกุล เช่น logo.gif ซึ่งตอบคำถาม คำถามว่าเป็นไฟล์รูปภาพใด ค่าพารามิเตอร์ต้องมีเส้นทางไปยังไฟล์รูปภาพด้วยเพื่อให้ HTML รู้ว่าจะหาไฟล์รูปภาพได้ที่ไหน ในบรรดาค่าพารามิเตอร์ของแอตทริบิวต์ SRC วิธีเขียนเส้นทางของไฟล์รูปภาพมักเป็นปัญหาสำหรับผู้เริ่มต้น

เส้นทางไปยังไฟล์ภาพอาจเป็นเส้นทางสัมพัทธ์หรือ URL เส้นทางที่เรียกว่าสัมพันธ์หมายถึงเส้นทางที่สร้างขึ้นโดยตำแหน่งสัมพันธ์ของไฟล์ที่จะเชื่อมโยงหรือฝังลงในเอกสาร HTML ปัจจุบันและไฟล์ HTML ปัจจุบัน หากไฟล์ HTML และไฟล์รูปภาพ (สมมติว่าชื่อ logo.gif) อยู่ในไดเร็กทอรีเดียวกัน คุณสามารถเขียนโค้ดเป็น <IMG SRC="logo.gif"> หากไฟล์รูปภาพถูกวางไว้ในไดเร็กทอรีที่ ไฟล์ HTML ปัจจุบันอยู่ในไดเร็กทอรีย่อย (สมมติว่าไดเร็กทอรีย่อยมีชื่อว่า image) โค้ดควรเป็น <IMG SRC="images/logo.gif"> หากไฟล์รูปภาพถูกวางไว้ในไดเร็กทอรีด้านบนของไดเร็กทอรีที่มี HTML ปัจจุบัน ไฟล์ตั้งอยู่ (สมมติว่าไดเร็กทอรีด้านบนชื่อ home ) พาธสัมพัทธ์จะต้องเป็น quasi-URL นั่นคือใช้ "../" เพื่อแสดงเว็บไซต์ของผู้พัฒนา ตามด้วยพาธของไฟล์รูปภาพในเว็บไซต์ของผู้พัฒนา . ตัวอย่างเช่น สมมติว่า home เป็นไดเร็กทอรีภายใต้เว็บไซต์นี้ โค้ดควรเป็น <IMG SRC=”../home/logo.gif”> หาก home เป็นไดเร็กทอรีย่อยภายใต้ directory king ใต้เว็บไซต์ โค้ดควรเป็น เขียนว่า <IMG SRC=”../king/home/logo.gif”>

คุณสมบัติอื่น ๆ แอตทริบิวต์ ALT, ALIGN, BORDER, WIDTH และ HEIGHT ของแท็ก <IMG> เป็นทางเลือก แอตทริบิวต์ ALIGN คือการจัดตำแหน่งของรูปภาพและค่าพารามิเตอร์คือด้านซ้าย ตรงกลาง และด้านขวา BORDER คือเส้นขอบของรูปภาพและพารามิเตอร์มากกว่าหรือเท่ากับ 0 และหน่วยเริ่มต้นคือพิกเซล คุณลักษณะ WIDTH และ HEIGHT คือความกว้างและความสูงของรูปภาพ และหน่วยเริ่มต้นของพารามิเตอร์คือพิกเซล คุณลักษณะ ALT คือข้อความที่แสดงเมื่อเลื่อนเมาส์ไปเหนือรูปภาพ ฉันอยากจะเตือนทุกคนว่าคุณต้องใช้สิ่งนี้ คุณลักษณะเมื่อสร้างหน้าเว็บ มีจุดประสงค์อะไรในการทำเช่นนี้? สามารถแสดงข้อความแจ้งเมื่อรูปภาพไม่สามารถแสดงได้ด้วยเหตุผลบางประการ ซึ่งเพิ่มความเป็นมิตรต่อผู้ใช้