เว็บไซต์ บล็อก หน้าเว็บ - แนวคิดที่คุ้นเคยอยู่แล้วในสมัยของเรา ด้วยการพัฒนาอินเทอร์เน็ต เว็บไซต์สำหรับโฮสต์หน้าเว็บจึงได้รับความนิยมอย่างไม่น่าเชื่อ และไม่น่าแปลกใจเลย สำหรับบางคน การมีเว็บไซต์เป็นของตัวเองเป็นสิ่งจำเป็น สำหรับบางคน มันคือความบันเทิงที่น่าพึงพอใจ ในกรณีแรก เรามักจะพูดถึงบริษัท บริษัท ผู้ประกอบการเอกชน เมื่อพวกเขาโฆษณาผลิตภัณฑ์หรือบริการใด ๆ ที่เป็นที่ต้องการ เรื่องที่สองเกี่ยวกับบล็อกเกอร์
นอกจากนี้ ยังมีผู้ใช้อินเทอร์เน็ตที่ค้นหาข้อมูล อ่านบล็อก ดูวิดีโอ และอื่นๆ
ในการสร้างเว็บไซต์ที่มีคุณภาพ มีตัวเลือกมากมาย เราจะเน้นการเขียนโปรแกรมเว็บผ่าน HTML
HTML คืออะไร
HTML ย่อมาจาก Hyper Text Mark-Up Language แปลจากภาษาอังกฤษ แปลว่า "Hypertext Markup Language"
กล่าวอีกนัยหนึ่ง HTML คือชุดของรหัสที่คุณสามารถสร้างองค์ประกอบหลักของเว็บไซต์ เฟรมของมันได้ เช่นคำที่ประกอบขึ้นจากประโยค
HTML โค้ดเขียนด้วยตัวอักษรละตินโดยเฉพาะและเรียกว่าแท็ก และแต่ละโค้ดอยู่ในวงเล็บเหลี่ยม บางแท็กจับคู่แล้ว บางแท็กไม่จับคู่
จับคู่หมายความว่าต้องใช้เป็นคู่โดยไม่ล้มเหลว ตัวอย่างเช่น แท็กเปิดระบุว่าแท็กเริ่มต้นที่ตำแหน่งใดบนหน้าเว็บ และแท็กปิดจะระบุตำแหน่งที่หยุด หลังแตกต่างจากเดิมโดยมีเครื่องหมายทับหลังวงเล็บมุมเปิด ตัวอย่างเช่น คือแท็กเปิดคือแท็กปิด
แท็กที่ไม่ได้จับคู่ไม่จำเป็นต้องมีคู่หู
แท็กจำนวนมากสามารถมีแอตทริบิวต์ได้ - องค์ประกอบเพิ่มเติมที่ให้ความหมายที่เฉพาะเจาะจงมากขึ้น ตัวอย่างเช่น แท็ก.
HTML ถูกใช้ที่ไหน
ความเข้าใจดั้งเดิมของ HTML ที่ต้องการคือการสร้างเว็บไซต์
ในทางปฏิบัติ เท่านี้ก็เพียงพอแล้ว เนื่องจาก HTML ให้คุณสร้างองค์ประกอบหลักของเว็บไซต์ เมนู (รวมถึงหลายระดับ) ตั้งค่าพื้นหลัง แทรกข้อความ รูปภาพ เสียง วิดีโอ แก้ไขฟอนต์ และอีกมากมาย
อย่างไรก็ตาม ยังมีภาษาอื่นๆ ที่ให้คุณเพิ่มองค์ประกอบที่น่าสนใจและจำเป็นลงในหน้าเว็บได้มากขึ้น:
- CSS กำหนดรูปแบบสำหรับทั้งเว็บไซต์โดยไม่จำเป็นต้องกำหนดลักษณะเฉพาะขององค์ประกอบแต่ละรายการโดยใช้แท็ก เช่น สีและแบบอักษรของข้อความ เป็นต้น
- ภาษาสคริปต์ทำให้คุณสามารถพัฒนาและฝังโปรแกรมขนาดเล็ก (สคริปต์) บนเว็บไซต์ได้ตั้งแต่ความสวยงามแบบเดิมๆ (เปลี่ยนสีของลิงก์เมื่อวางเมาส์เหนือ) และลงท้ายด้วยสีที่ใช้งานได้ (รวบรวมที่อยู่อีเมลของลูกค้า หมายเลขโทรศัพท์)
- ด้วย PHP คุณสามารถพัฒนาสมุดเยี่ยมหรือระบบแสดงความคิดเห็นของคุณเองได้
นอกจากนี้ยังใช้ HTML ในการสร้างอีเมลเพื่อแจกจ่าย
ลิงค์คืออะไร
อนุญาตให้คุณไปยังหน้าเว็บอื่น ทั้งในไซต์และภายนอก
HTML มักจะใช้ลิงก์:
- เพื่อไปยังแหล่งข้อมูลบนเว็บภายนอก
- เพื่อเลื่อนดูหน้าต่างๆ ภายในเว็บไซต์
- เพื่อไปที่ Google ฟอร์ม
มักจะระบุลิงก์ไปยังแหล่งที่มาใน HTML โดยเฉพาะอย่างยิ่งเมื่อคัดลอกเนื้อหาจากไซต์อื่น คุณต้องระบุผู้เขียน มิฉะนั้น การคัดลอกโดยไม่แสดงที่มาอาจอยู่ภายใต้คำจำกัดความของการละเมิดลิขสิทธิ์ การขโมยเนื้อหา และผลย้อนกลับ นอกจากนี้ การใช้วัสดุที่ยืมมาและไม่ซ้ำใครจะลดประสิทธิภาพ SEO และการระบุลิงก์ไปยังแหล่งที่มาช่วยลดความเสี่ยง
ประเภทของลิงค์
ในความหมายดั้งเดิม ลิงก์คือที่อยู่ของทรัพยากรบนเว็บที่คุณเข้าไปได้ด้วยการคลิก
นอกจากนี้ยังมีไฮเปอร์ลิงก์ทั้งข้อความและรูปภาพ ในกรณีเหล่านี้ ลิงก์ HTML จะถูก "ซ่อน" ไว้ใต้บางประโยค (คำ) หรือรูปภาพ และหากต้องการติดตาม คุณจะต้องคลิกที่ข้อความหรือรูปภาพ
ลิงก์ประเภทอื่นๆ:
- Unvisited - ลิงก์ที่ยังไม่ได้คลิกในระหว่างเซสชันใดเซสชันหนึ่ง ตัวอย่างเช่น หากคุณคลิกลิงก์นี้เมื่อวานนี้ แล้วปิดเครื่องคอมพิวเตอร์ แล้วเปิดใหม่อีกครั้งในวันนี้ ตอนนี้ลิงก์จะไม่ถูกเข้าชมอีกครั้ง เนื่องจากเซสชันใหม่ได้เริ่มต้นขึ้น
- ใช้งานอยู่ - ในสถานะนี้ ลิงก์จะถูกบันทึกเป็นเวลาสั้นๆ: ช่วงเวลาระหว่างการคลิกลิงก์และการติดตาม
- เยี่ยมชมแล้ว - ลิงก์ที่เคยเข้าชมแล้วอย่างน้อยหนึ่งครั้งในหนึ่งเซสชัน
สำหรับลิงก์ข้อความปกติ ลิงก์ที่เข้าชมมักจะเปลี่ยนสีเว้นแต่จะระบุไว้เป็นอย่างอื่น
รูปภาพไฮเปอร์ลิงก์จะไม่เปลี่ยนรูปลักษณ์ ไม่ว่าจะเข้าชมหรือไม่
วิธีแทรกลิงค์ปกติ
แหล่งข้อมูลบนเว็บจำนวนมากมองว่าที่อยู่เว็บไซต์เป็นลิงก์ ทำให้คลิกได้และไฮไลต์ด้วยสีทันที ตัวอย่างเช่น หากที่อยู่ถูกส่งใน Messenger หรือทาง e-mail คลิกที่อยู่นั้น คุณสามารถไปที่ไซต์ได้
ในกรณีสร้างเว็บไซต์ด้วยตนเองโดยใช้ HTML คุณต้องแทรกลิงก์โดยใช้แท็กพิเศษ จะมีลักษณะดังนี้: ที่อยู่เว็บไซต์ ต้องระบุข้อความลิงก์เป็น HTML แบบเต็ม พร้อมโปรโตคอล
วิธีแทรกไฮเปอร์ลิงก์ข้อความ
กล่าวก่อนหน้านี้ว่าไฮเปอร์ลิงก์ข้อความทำงานเหมือนกับลิงก์ปกติ แต่ดูสวยงามกว่า: แทนที่จะใช้ที่อยู่เว็บไซต์ซึ่งมักจะยาวโดยไม่จำเป็น คำหรือวลีจะถูกระบุ ตัวอย่างเช่น ในประโยค "ค้นหาข้อมูลที่นี่" คุณสามารถซ่อนลิงก์ในคำว่า "ที่นี่" มันจะถูกเน้นและคลิกที่มันจะนำผู้ใช้ไปยังไซต์ที่ต้องการ
วิธีสร้างลิงก์ HTML ได้รับการกล่าวถึงก่อนหน้านี้แล้ว คุณสามารถแทรกข้อความไฮเปอร์ลิงก์โดยใช้แท็กเดียวกัน ข้อแตกต่างเพียงอย่างเดียวคือ คุณต้องระบุระหว่างแท็กข้อความที่จะซ่อนลิงก์: ข้อความที่มองเห็นได้
วิธีแทรกไฮเปอร์ลิงก์รูปภาพ
มันซับซ้อนกว่านี้นิดหน่อย เราใช้แท็กเดียวกัน แต่แทนที่จะเป็นข้อความ คุณต้องระบุเส้นทางไปยังรูปภาพ
เส้นทางคือตำแหน่งของภาพ หากรูปภาพ (ภาพถ่าย) อยู่ในบริการแชร์ไฟล์ คุณต้องระบุโฟลเดอร์ทั้งหมดตามเส้นทางไปยังรูปภาพโดยใช้เครื่องหมายทับ คุณยังสามารถใส่ลิงก์ไปยังรูปภาพได้ถ้าเป็นไปได้
แท็ก
นอกจาก src แล้ว ยังมีคุณสมบัติอื่นๆ ที่ช่วยให้คุณปรับความสูง ความกว้าง และตำแหน่งของภาพ และอื่นๆ อีกมากมาย บางส่วน:
- Src - ระบุเส้นทางไปยังรูปภาพ
- Lowsrc - เหมือนกับแอตทริบิวต์ก่อนหน้า แต่ระบุไว้สำหรับรูปภาพคุณภาพต่ำ
- ความสูง - ความสูงของภาพ
- ความกว้าง - ความกว้าง
- Alt - คำอธิบายรูปภาพ เมื่อคุณวางเมาส์เหนือรูปภาพหรือรูปภาพ ข้อความที่ระบุในแอตทริบิวต์นี้จะปรากฏขึ้น
- Border - กำหนดความหนาของเส้นขอบรอบรูปภาพ
แอตทริบิวต์ถูกระบุหลังแท็กและรวมอยู่ในองค์ประกอบของมัน แอตทริบิวต์ต้องตามด้วยค่าของมัน ตัวอย่างเช่น สำหรับแอตทริบิวต์ "ความสูง" หรือ "ความกว้าง" (ความสูง ความกว้าง) จะระบุความสูงของรูปภาพบนหน้าเว็บ หน่วยวัดเป็นพิกเซล เว้นแต่จะระบุไว้เป็นอย่างอื่น
จะมีลักษณะดังนี้: <a href="ที่อยู่หน้าเว็บ"
. คุณลักษณะเหล่านี้จะช่วยกำหนดขนาดที่เหมาะสมสำหรับรูปภาพ เส้นขอบช่วยสร้างเส้นขอบที่มองไม่เห็นรอบรูปภาพ
แอตทริบิวต์ด้านบนใช้กับแท็กแทรกรูปภาพแยกต่างหาก ตัวอย่างเช่น:.
สมอลิงค์คืออะไร
การสร้างลิงก์สมอเป็นทักษะที่มีประโยชน์มาก บ่อยครั้งมีความจำเป็นต้องจัดวางหน้าเว็บที่มีบล็อกข้อความยาวๆ หรือมีส่วนย่อยหลายส่วนในหน้าเดียว ในกรณีนี้ คุณสามารถเริ่มต้นด้วยรายการลิงก์ไปยังส่วนย่อยของข้อความหรือหน้าเว็บ และเมื่อคุณคลิกที่ลิงก์ ผู้ใช้จะไปยังส่วนที่ร้องขอโดยตรง
การสร้างลิงก์ Anchor จะต้องใช้แท็กแอตทริบิวต์มากกว่าลิงก์ประเภทอื่นๆ
ขั้นแรก คุณต้องตั้งค่าโดยรวมสำหรับบล็อกข้อมูลแต่ละส่วนหรือส่วนย่อยของข้อความโดยใช้แอตทริบิวต์ระดับบนสุด จากนั้นเชื่อมโยงกับลิงก์ที่เกี่ยวข้อง
คุณลักษณะของมันนั้นกว้างขวางกว่า ดังนั้นจึงแนะนำให้สร้างลิงก์ที่ง่ายกว่าก่อน จากนั้นไปยังการก่อตัวของลิงก์สมอ
เคล็ดลับ
ช่วยเหลือจากผู้มีประสบการณ์โปรแกรมเมอร์:
- คุณสามารถทำให้ข้อมูลเกี่ยวกับลิงก์ปรากฏบนโฮเวอร์ใน HTML สำหรับสิ่งนี้ คุณลักษณะ alt ซึ่งเราใช้สำหรับองค์ประกอบกราฟิกก็มีประโยชน์เช่นกัน
- สามารถสร้างรายการลิงก์โดยใช้ HTML ได้ โดยเฉพาะอย่างยิ่ง สิ่งนี้มีประโยชน์สำหรับลิงก์สมอ เช่นเดียวกับเมื่อคุณต้องการสร้างรายการทรัพยากรบนเว็บที่สามารถตามด้วยลิงก์ได้โดยตรงจากหน้าเว็บปัจจุบัน
- ด้วยความช่วยเหลือของ CSS และ JavaScript เช่นเดียวกับฟังก์ชัน HTML บางอย่าง คุณสามารถสร้างการออกแบบลิงก์ข้อความและไฮเปอร์ลิงก์ที่แตกต่างจากปกติ ตัวอย่างเช่น เมื่อคุณวางเมาส์เหนือลิงก์ ลิงก์นั้นจะเปลี่ยนสีและย้อนกลับไปยังลิงก์ก่อนหน้าเมื่อเคอร์เซอร์อยู่ห่างจากลิงก์นั้น ซึ่งสามารถทำได้ด้วยสคริปต์ JavaScript ที่กำหนดเอง นอกจากนี้ สีของลิงก์สามารถกำหนดเป็นสีอื่นที่ไม่ใช่สีน้ำเงินสำหรับผู้เข้าชมที่ไม่ได้เยี่ยมชม หรือสีม่วงสำหรับการเยี่ยมชม นี่คืองานของ CSS
- อย่าใช้ลิงก์ในทางที่ผิด หน้าเว็บที่มีลิงก์ที่ไม่เหมาะสมจำนวนมากดูเลอะเทอะและเลอะเทอะ
- ตรวจสอบให้แน่ใจว่าผู้ใช้เข้าใจว่าไฮเปอร์ลิงก์ที่มีรูปภาพนั้นเป็นรูปภาพจริงๆ ไม่ใช่แค่รูปภาพ
สรุป
มันง่ายมากที่จะเชื่อมโยงไปยังหน้าใน HTML สิ่งสำคัญคือต้องปฏิบัติตามประเด็นหลักทั้งหมดของภาษานี้ เนื่องจากข้อผิดพลาดเพียงเล็กน้อยก็อาจนำไปสู่ความจริงที่ว่าจะไม่มีผลใดๆ และโค้ดจะไม่ทำงาน
