ภาษา HTML ขึ้นอยู่กับแนวคิดของแท็ก แท็ก- แท็ก, ฉลาก) แท็กจะอยู่ในวงเล็บมุม (< >) และคู่แบบฟอร์ม - คอนเทนเนอร์ (แท็กเปิดและแท็กปิด) ตัวอย่างเช่น คอนเทนเนอร์ของเอกสาร HTML คือคู่ของแท็ก และ . หน้าเว็บประกอบด้วยคอนเทนเนอร์ที่รับผิดชอบสำหรับชื่อเอกสาร (ส่วนหัว) และประกอบด้วยข้อมูลเพิ่มเติม ตลอดจนคอนเทนเนอร์ที่รับผิดชอบสำหรับเนื้อหาเอกสาร (เนื้อหา) มีการนำเสนอในรูป
ดังนั้นเอกสาร HTML จึงอยู่ในคอนเทนเนอร์ ส่วนหัวจึงอยู่ในคอนเทนเนอร์ และเนื้อหาของเอกสารจึงอยู่ในคอนเทนเนอร์ คอนเทนเนอร์ที่อยู่ในส่วนหัว (คอนเทนเนอร์) มีข้อความที่ปรากฏในบรรทัดบนสุดของหน้าต่างเบราว์เซอร์ แท็กที่มีการเข้ารหัส คำสำคัญของหน้าเว็บ รวมถึงโค้ดสำหรับเชื่อมต่อไฟล์สไตล์ชีทแบบเรียงซ้อน CSS, จาวาสคริปต์, VBScript ฯลฯ สามารถเพิ่มลงในคอนเทนเนอร์ส่วนหัวได้
ตัวอย่างของหน้า HTML ธรรมดาที่มีเพียงแท็กพื้นฐาน:
ชื่อหน้า เนื้อหาของหน้าธรรมดา
ผลลัพธ์ของรหัสนี้จะแสดงในรูป
ดังที่คุณเห็นจากตัวอย่าง ข้อความ “เนื้อหาของหน้าธรรมดา” จะแสดงเป็นข้อความปกติ เพื่อจัดรูปแบบข้อความนี้ คุณต้องใช้แท็กพิเศษ ตัวอย่างการใช้แท็กการจัดรูปแบบแสดงในรูป
หากต้องการเปลี่ยนแบบอักษร สี และขนาด ให้ใช้แท็กที่มีพารามิเตอร์ "face", "color" และ "size" ตัวอย่างเช่น ในการตั้งค่าแบบอักษร "arial" เป็นสีแดงและขนาด 14 คุณต้องเขียนโค้ดต่อไปนี้:
จัดรูปแบบข้อความ
หากต้องการเน้นย่อหน้าในข้อความ ให้ใช้แท็ก
ข้อความแต่ละย่อหน้ามักจะอยู่ในคอนเทนเนอร์ ในการสร้างชื่อเรื่อง จะใช้แท็ก , , , , ,
คอนเทนเนอร์ และใช้เพื่อสร้างรายการในเนื้อความของเอกสาร นอกจากนี้ แท็กยังสร้างรายการลำดับเลข ซึ่งก็คือแท็ก
- - รายการสัญลักษณ์แสดงหัวข้อย่อยและในแท็ก
- องค์ประกอบรายการจะถูกวาง ตัวอย่างโค้ดสำหรับแสดงรายการที่แสดงในรูปแบบรายการลำดับเลขและสัญลักษณ์แสดงหัวข้อย่อยแสดงไว้ในรูป
ในการเชื่อมต่อหน้าเว็บตั้งแต่สองหน้าขึ้นไปเข้าด้วยกัน จะใช้ไฮเปอร์ลิงก์ ซึ่งการสร้างจะใช้แท็ก - นอกจากนี้ แท็กไฮเปอร์ลิงก์ยังใช้คุณลักษณะเพิ่มเติมที่ช่วยให้คุณสามารถไปที่หน้าเว็บอื่นหรือย้ายภายในหน้าเว็บที่กำหนดได้ ขอแนะนำให้ใช้วิธีที่สองในเอกสารขนาดใหญ่ที่มีส่วนความหมายหลายส่วน
ตัวอย่างของการใช้ไฮเปอร์ลิงก์แสดงในรูป
เมื่อระบุ URL ของเพจอื่น คุณต้องระบุพาธแบบเต็มไปยังเพจ “พาธเต็ม/โฟลเดอร์/เพจ” หรือพาธสัมพัทธ์ (สัมพันธ์กับเพจนี้) “โฟลเดอร์/เพจ” พารามิเตอร์ "เป้าหมาย" ช่วยให้คุณสามารถเปิดหน้าเว็บในหน้าต่างเบราว์เซอร์ใหม่หรือที่มีอยู่ได้
หากต้องการแทรกรูปภาพลงในหน้าเว็บ ให้ใช้แท็ก ด้วยพารามิเตอร์ src (เส้นทางไปยังรูปภาพ), ความกว้าง (ความกว้างของรูปภาพ), ความสูง (ความสูงของรูปภาพ), เส้นขอบ (กรอบรอบรูปภาพ) โค้ดตัวอย่างสำหรับการแทรกรูปภาพ:
บ่อยครั้งเมื่อสร้างเว็บเพจจำเป็นต้องกำหนดสีพื้นหลังหรือรูปภาพพื้นหลัง ในการดำเนินการนี้ ให้ใช้แอตทริบิวต์ของแท็ก "bgcolor" หรือ "wallpaper-wallpaper" ตัวอย่างการใส่สีพื้นหลัง:
ตัวอย่างการใส่ภาพพื้นหลัง:
คุณลักษณะที่ระบุสามารถใช้ได้ไม่เพียงแต่กับแท็กเท่านั้น แต่ยังใช้กับตาราง พื้นที่ และแท็กอื่นๆ ได้ด้วย ซึ่งจะกล่าวถึงในหัวข้อต่อไปนี้
มนุษย์ไม่สามารถดำรงชีวิตด้วยคำพูดเพียงอย่างเดียวได้
ไม่ว่าเขาจะกลืนพวกเขาไปมากแค่ไหนก็ตาม
แอดไล สตีเวนสัน.โดยทั่วไป HTML ไม่ใช่ภาษาการเขียนโปรแกรม นี่คือภาษามาร์กอัป HyperText นั่นก็คือการเรียกมันว่า “ภาษา HTML” นั้นไม่ถูกต้อง
พูดง่ายๆ ก็คือ HTML คือรายการแท็ก (คำควบคุม) ที่ให้คุณนำเสนอข้อความธรรมดาในรูปแบบที่จัดรูปแบบได้ เช่น เน้นเป็นตัวหนา หรือ ตัวเอียงฯลฯ แต่ข้อความสามารถนำเสนอในลักษณะนี้ได้เฉพาะในโปรแกรมพิเศษ (โปรแกรมที่คุณท่องอินเทอร์เน็ต)
โดยจะแสดงเฉพาะข้อความที่จัดรูปแบบและซ่อนแท็ก HTML ที่ใช้ในการจัดรูปแบบ เพื่อให้ชัดเจนยิ่งขึ้นว่าฉันกำลังพูดถึงอะไร ให้คลิกขวาที่หน้านี้และในเมนูที่เปิดขึ้น เลือก "ซอร์สโค้ด" หรืออะไรที่คล้ายกัน หน้านี้จะเปิดต่อหน้าคุณในรูปแบบปัจจุบัน
คุณสามารถสร้างโค้ด HTML ได้ทั้งในโปรแกรมปกติและโปรแกรมพิเศษที่เรียกว่า โปรแกรมแก้ไขภาพแตกต่างจากโปรแกรมแก้ไขข้อความตรงที่ออกแบบมาเพื่อพิมพ์โค้ด HTML, CSS, JavaScript, PHP ฯลฯ เช่น สำหรับการเขียนโปรแกรมเว็บ นอกจากนี้ยังช่วยให้คุณดูผลงานของคุณในเบราว์เซอร์ในตัวได้ทันทีและเน้นข้อผิดพลาดบางอย่างในโค้ดที่พิมพ์
ฉันขอแนะนำอย่างยิ่งให้พิมพ์โค้ดทั้งหมดด้วยมือ (เพื่อปรับปรุงความตรงของมือเดียวกันเหล่านี้) แต่โปรแกรมแก้ไขภาพช่วยอำนวยความสะดวกในกระบวนการนี้อย่างมาก ส่วนตัวผมใช้. นี่ยังห่างไกลจากเวอร์ชันล่าสุด แต่ความสามารถของมันมากเกินพอสำหรับฉัน
ฉันทำสิ่งนี้: ฉันพิมพ์โค้ดใน Dreamweaver จากนั้นบันทึกและคลิกปุ่ม "ดูในเบราว์เซอร์" (คุณแก้ไขรายการเบราว์เซอร์ในเมนูนี้ด้วยตัวเอง) จากนั้นกลับไปที่ Dreamweaver และแก้ไขต่อ ที่นี่ . เพียงเท่านี้สำหรับเครื่องมือ ตอนนี้เรามาดูแท็ก HTML กันดีกว่า
เริ่มต้นด้วยโครงสร้างของหน้า HTML หรือด้วยแท็กหลัก
แท็กหน้า HTML ที่จำเป็นแท็ก HTML ที่จำเป็น (พื้นฐาน) ที่ใช้ในเอกสาร HTML ทุกฉบับมีดังต่อไปนี้:
บันทึก. เพื่อให้เบราว์เซอร์ส่งออกโค้ด HTML เป็นข้อความ (ไม่แปลเป็นโค้ด) ฉันเว้นช่องว่างไว้หลังวงเล็บมุมเปิดแต่ละวงเล็บ "" เมื่อคุณพิมพ์รหัสอย่าเว้นวรรค
อย่างที่คุณเห็น แท็กทั้งหมดถูกจับคู่กัน (มีแท็กเปิดและแท็กปิด) ใน HTML แท็กเกือบทั้งหมดจะเป็นเช่นนี้ ความแตกต่างระหว่างแท็กเปิดและแท็กปิดคือแท็กปิดนำหน้าด้วยเครื่องหมายทับ “/” แท็กดังกล่าวเรียกอีกอย่างว่าคอนเทนเนอร์แท็ก เนื่องจากสามารถแทรกแท็กอื่นๆ ระหว่างแท็กเหล่านั้นได้ เช่น วางในภาชนะ คุณจะเห็นเองได้ว่าระหว่างแท็กนั้นมีแท็กอื่นอยู่
คุณสามารถพิมพ์ชื่อแท็กด้วยตัวพิมพ์ใหญ่หรือตัวพิมพ์ใหญ่ก็ได้ไม่มีความแตกต่าง นั่นคือบันทึกประเภทและสำหรับเบราว์เซอร์ไม่มีความแตกต่างและได้รับการตีความในลักษณะเดียวกัน ตอนนี้เรามาดูรายละเอียดเพิ่มเติมเกี่ยวกับความหมายของแท็กเหล่านี้กัน
ดังนั้นแท็กหลักจะแสดงเบราว์เซอร์และโปรแกรมอื่น ๆ สำหรับการดูหน้าไฮเปอร์เท็กซ์ที่พวกเขากำลังจัดการกับเอกสารไฮเปอร์เท็กซ์ เอกสาร html ใด ๆ จะต้องขึ้นต้นด้วยและลงท้ายด้วย นั่นคือระหว่างแท็กเหล่านี้จะมีโค้ดทั้งหมดของหน้า html
ระหว่างแท็กจะมีเมตาแท็ก (ชื่อหน้า คำอธิบาย คำสำคัญ ฯลฯ) พวกเขาเก็บข้อมูลเกี่ยวกับหน้า html และข้อมูลทางเทคนิค โดยทั่วไป แท็กนี้เป็นทางเลือก กล่าวคือ หากไม่มีแท็กนี้ เบราว์เซอร์ก็จะแสดงเอกสาร HTML ตามปกติ แต่ถึงแม้ว่าคุณจะไม่ได้วางแผนที่จะใช้พื้นที่ชื่อเรื่อง อย่างน้อยก็เขียนมันอย่างง่ายๆ นี่เป็นสิ่งจำเป็นสำหรับความเข้ากันได้ระหว่างโปรแกรมเวอร์ชันต่างๆ
ข้อมูลทั้งหมดที่อยู่ระหว่างแท็ก "HEAD" จะไม่แสดงในทางใดทางหนึ่งโดยเบราว์เซอร์ (ยกเว้นข้อมูลระหว่างแท็กซึ่งมีชื่อของเอกสาร html อยู่ แสดงในแผงด้านบนของเบราว์เซอร์) แต่อาจมีผลกระทบอย่างมากต่อรูปลักษณ์ของหน้า html ชีวิตบนอินเทอร์เน็ต และการจัดอันดับ เราจะพูดคุยเพิ่มเติมเกี่ยวกับแท็กที่อยู่ในส่วนหัวของเอกสารไฮเปอร์เท็กซ์ในภายหลัง
เนื้อหาหลักของเอกสาร HTML อยู่ระหว่างแท็ก และ นี่คือทุกสิ่งที่เราเห็นเมื่อเปิดหน้า html: ข้อความ กราฟิก เมนู ปุ่ม ฯลฯ นี่คือ "เนื้อหา" หลักของหน้า
ในแท็กอื่นๆ ทั้งหมดที่ใช้เมื่อสร้างเอกสาร HTML แท็กเหล่านั้นจะอยู่ระหว่าง (เช่น ภายใน) แท็กที่จำเป็นเหล่านี้ แท็กเกือบทั้งหมดใน HTML มีแอตทริบิวต์ คุณสมบัติ และพารามิเตอร์ที่หลากหลาย ซึ่งช่วยให้คุณสามารถแสดงข้อมูลได้ตรงตามที่นักพัฒนาต้องการ ตัวอย่างเช่น หากคุณเขียนว่า:
จากนั้นพื้นหลังของทั้งหน้าจะเป็นสีแดง
จริงๆ แล้วแท็กในที่นี้ก็คือแท็ก bgcolor - คุณลักษณะของมัน; "#FF0000" - ค่าแอตทริบิวต์ (แท็กสามารถมีได้หลายแอตทริบิวต์)
บันทึก. คุณลักษณะของแท็กทั้งหมดและค่าจะถูกระบุไว้ในแท็กเปิด (ที่ไม่มีเครื่องหมายทับ) แต่ไม่ว่าในกรณีใดในแท็กปิด
ดังนั้นเราจึงพบแท็กหลักของเอกสาร html ถึงเวลาศึกษาส่วนที่เหลือโดยละเอียดแล้ว ที่นี่ฉันต้องการพูดนอกเรื่องเล็กน้อย
ฉันจะแนะนำการเรียนรู้ HTML ได้อย่างไรด้วยการนำความรู้ที่ได้รับมาฝึกฝน ฉันตระหนักได้ว่าผู้เขียนหนังสือและแบบฝึกหัดเหล่านี้ส่วนใหญ่ทำผิดพลาดเพียงใด หนังสือเรียนทั้งหมดเหล่านี้ ประการแรกมีไว้สำหรับผู้เริ่มต้น และประการที่สอง สอนพื้นฐานของ HTML ตามลำดับ
ที. นั่นคือแท็กชื่อเรื่องของเอกสาร html () จะได้รับการพิจารณาก่อนจากนั้นจึงพิจารณาแท็ก "body" ()
จากประสบการณ์ของฉันเอง ฉันกล้าที่จะบอกว่าขั้นตอนการเรียนรู้พื้นฐานของ HTML นี้เป็นที่ยอมรับไม่ได้สำหรับผู้เริ่มต้นอย่างเด็ดขาด ผู้เริ่มต้นพยายามศึกษาแท็กชื่อที่มีจำนวนมากมายและไม่ค่อยมีใครเข้าใจเหล่านี้ ประการแรกโดยไม่เห็นผลการเรียนรู้ของเขา (ฉันขอเตือนคุณว่าเบราว์เซอร์จะไม่แสดงแท็กชื่อ) และประการที่สอง โดยไม่ต้องสงสัยด้วยซ้ำว่าแท็กเหล่านี้ส่วนใหญ่ไม่จำเป็นในการสร้างไซต์ที่เขาวางแผนไว้ (อย่างน้อยก็ในช่วงเริ่มต้นของการทำงาน)
ดังนั้นเขาจึงได้แต่เสียเวลาและความปรารถนาที่จะเรียนรู้ HTML ต่อไป ขณะเดียวกันก็ยืนกรานว่ามีเพียง “กูรู” เท่านั้นที่สามารถทำได้เพื่อเงินที่ดี ฉันก็จะเลิกทำกิจกรรมนี้เช่นกันถ้าฉันไม่ใส่ใจกับสิ่งที่ฉันยังไม่เข้าใจและยังไม่เดินหน้าต่อไป
ดังนั้นฉันขอแนะนำให้คุณพิจารณาแท็กที่เกี่ยวข้องกับ "เนื้อหา" ของเอกสาร html () ก่อนแล้วจึงไปยังส่วนที่เหลือ นอกจากนี้ “เนื้อหา” ของหน้า html ยังมีข้อมูลที่ผู้เยี่ยมชมไซต์จะได้รับ และการสร้างหรือค้นหามันยากกว่าการเขียนโค้ดมาก
เอาล่ะ คลิกปุ่ม "ถัดไป" โดยไม่ลังเลเลยแม้แต่นาทีเดียวและค้นหาต่อไปว่าคนที่ไม่ได้โกนผมและอดนอนเหล่านี้สร้างเว็บไซต์ได้อย่างไร
ในชีวิตของนักเขียนคำโฆษณาทุกคน การทำความคุ้นเคยกับแท็ก html มาถึงช่วงหนึ่งแล้ว โดยปกติสิ่งนี้จะเกิดขึ้นเองตามธรรมชาติและดูเหมือนเป็นคำขอจากลูกค้าให้ "เตรียมข้อความสำหรับการตีพิมพ์" ซึ่งหมายความว่าในบทความคุณต้องเน้นส่วนหัว ย่อหน้า สถานที่สำคัญ และรายการ แต่ไม่ใช่ด้วยความสามารถของ Word แต่ต้องใช้รหัสภาษา html พิเศษ แท็กสำหรับนักเขียนคำโฆษณาจะช่วยในเรื่องนี้ รายการที่จำเป็นสำหรับการทำงานมักจะมีขนาดเล็ก แต่ก็เพียงพอที่จะจัดรูปแบบข้อความตามข้อกำหนดมาตรฐาน มีอะไรรวมอยู่ในแท็ก html ที่จำเป็นสำหรับนักเขียนคำโฆษณา? (หากคุณขี้เกียจอ่านเกินไป ให้เลื่อนลง - มีอินโฟกราฟิกเกี่ยวกับแท็ก html ที่เรียบง่ายและชัดเจน!)
นักเขียนคำโฆษณาถามคำถามแบบดั้งเดิม และทั้งหมดเริ่มต้นด้วยคำว่า "ใช้แท็กอะไรเพื่อระบุ...":
- ชื่อ;
- ย่อหน้า;
- ข้อความตัวหนา;
- ตัวเอียง;
- รายการหัวข้อย่อย/ไม่มีป้ายกำกับ/
ทั้งหมดนี้เพิ่มเครื่องเทศให้กับงานด้านเทคนิคและกระตุ้นการได้มาซึ่งความรู้ใหม่ สถานการณ์จะแย่ลงเมื่องานคือการใช้แท็กข้อความตัวหนาเพื่อเพิ่มความน่าดึงดูดใจของคีย์ใน PS แต่ทั้งหมดนี้สามารถแก้ไขได้ง่ายมาก ซึ่งเราจะจัดการในตอนนี้
แท็กสำหรับการสร้างชื่อเรื่องแท็กสำหรับสร้างส่วนหัวจะแสดงด้วยองค์ประกอบ h1-h6 พวกเขาได้รับจดหมายจากส่วนหัวภาษาอังกฤษ (หัวเรื่อง) หากต้องการตั้งค่าประเภทส่วนหัวที่ต้องการและเน้นความสำคัญของ PS ให้ใช้รหัสต่อไปนี้:
หัวข้อ h1 หัวข้อ h2 หัวข้อ h3 หัวข้อ h4 หัวข้อ h5 หัวข้อ h6
ในเว็บก็จะเป็นแบบนี้
หัวข้อ h1 หัวข้อ h2 หัวข้อ h3 หัวข้อ h4 หัวข้อ h5 หัวข้อ h6ส่วนหัว h1 มีความสำคัญและการมองเห็นมากที่สุด ใช้เป็นชื่อเรื่องของโพสต์และใช้เพียงครั้งเดียว สำหรับหัวข้อย่อยในข้อความ แนะนำให้ใช้ h2 และ h3 ช่วยเน้นความสำคัญของเนื้อหาที่กำลังพิจารณาและแบ่งบทความออกเป็นระดับข้อมูล
ส่วนหัว h4-h6 นั้นไม่ได้ใช้จริง แต่ต้องการเน้นบล็อกลอจิคัลและส่วนสำคัญ
สำหรับบทความขนาดใหญ่ ควรใช้ส่วนหัว h1-h3 สำหรับบทความขนาดเล็ก - h1 และ h2
รายการ: มีสัญลักษณ์แสดงหัวข้อย่อยและไม่มีป้ายกำกับข้อความที่มีโครงสร้างที่ดีมักจะมีรายการเดียวหรือหลายรายการเสมอ ตามลักษณะที่ปรากฏมีรายการดังนี้:
- ทำเครื่องหมาย - มีหมายเลข
- ไม่มีเครื่องหมาย – องค์ประกอบจะถูกเน้นด้วยสัญลักษณ์
- รายการ
- รายการ
- รายการ
- รายการ
- รายการ
- รายการ
- รายการ
- รายการ
- เมนูที่ 1
- เมนูที่ 2
- รายการที่ไม่เรียงลำดับ (ul)
- รายการสั่งซื้อ (ol)
- รายการคำจำกัดความ (dl) พวกเขากำลังทำอะไร
- รายการที่ไม่เรียงลำดับ (ul): รายการที่มีตัวบ่งชี้จุด
- รายการที่เรียงลำดับ (ol): รายการที่เรียงลำดับเลข
- รายการคำจำกัดความ (dl): รายการที่มีคำจำกัดความองค์ประกอบ
- รูปแบบเนื้อหาที่สอดคล้องกัน
- เพียงแค่สร้าง
- อเนกประสงค์
- ) เราใช้สองแท็ก: และ . กำหนดแต่ละรายการในรายการและ อธิบายประเด็นข้างต้น ด้านล่างนี้เป็นรายการตามรหัสรายการคำจำกัดความที่แสดงก่อนหน้านี้
- วงเล็บมุมเปิด (< ).
- คำพิเศษ (ชื่อแท็ก) ตัวอย่างเช่น hr , iframe , b
- วงเล็บมุมปิด (> )
- - แท็กเดียวที่มีความคิดเห็น ความคิดเห็นคือข้อความที่เบราว์เซอร์ไม่ได้ประมวลผล คุณสามารถเขียนสิ่งที่คุณต้องการภายในแท็กได้ แม้แต่แท็กอื่นๆ แท็กเหล่านั้นจะไม่ทำงานและจะไม่ปรากฏบนหน้าจอ นักพัฒนาแสดงความคิดเห็นเกี่ยวกับโค้ดเพื่อให้เว็บมาสเตอร์คนอื่นๆ เข้าใจได้ง่ายขึ้น หรือเพื่อให้พวกเขาสามารถเข้าใจโค้ดได้อย่างรวดเร็วด้วยตนเองหลังจากเวลาผ่านไปนาน
- , , , , เป็นแท็กที่ควรปรากฏในเอกสาร HTML ที่เหมาะสม (สำหรับรายละเอียดเพิ่มเติม โปรดดู “วิธีสร้างเว็บไซต์ใน Notepad”)
- - แท็ก มีข้อมูลเสริมสำหรับเบราว์เซอร์และเครื่องมือค้นหา ภายในคุณสามารถเขียนคำสำคัญ คำอธิบายหน้า การเข้ารหัสเอกสาร ชื่อผู้เขียน ฯลฯ
- มีลิงก์ไปยังไฟล์สคริปต์หรือโค้ดเอง
- - แท็กที่กำหนดรูปแบบของเอกสารและ/หรือองค์ประกอบโดยใช้ CSS เอกสาร HTML สามารถมีแท็กจำนวนมากที่กำหนดสไตล์ที่แตกต่างกันสำหรับส่วนต่างๆ ของหน้า
- - ตรงกันข้ามโดยสิ้นเชิง, เสริมมัน. แท็ก ระบุ "ส่วนหัว" (ชื่อ) ของส่วนหรือทั้งหน้า
- เก็บ "ขา" ของไซต์หรือส่วนต่างๆ ข้างในคุณสามารถใส่ข้อมูลสนับสนุน, ลิขสิทธิ์, ข้อมูลการติดต่อ ฯลฯ
- มีเนื้อหาหลักของหน้า ไม่ใช่ส่วนหัวหรือบล็อกเมนูหรือ "ขา" ของไซต์ แต่เป็นสิ่งที่สร้างเพจขึ้นมา ตัวอย่างเช่น ในหน้าที่คุณกำลังอ่านอยู่ บทความนี้ควรอยู่ข้างใน
- ออกแบบมาเพื่อสร้างลิงค์ ลิงก์เป็นรากฐานของไฮเปอร์เท็กซ์ ซึ่งเป็นสาเหตุที่บทความนี้จัดทำขึ้นเพื่อลิงก์เหล่านี้โดยเฉพาะ
- จำเป็นต้องเพิ่มรูปภาพลงในหน้าเว็บ (ที่บริการของคุณทุ่มเทให้กับการดำเนินการนี้)
-
,
, - , , ,, , , และแท็กการจัดรูปแบบข้อความอื่นๆ ประกอบขึ้นเป็นกลุ่มแท็ก HTML ขนาดใหญ่ ซึ่งจะกล่าวถึงในบทความ “การจัดรูปแบบข้อความใน HTML”
- - องค์ประกอบบล็อก ข้อความด้านในถูกจัดรูปแบบโดยใช้ CSS (สไตล์ชีตแบบเรียงซ้อน ซึ่งเป็นหัวข้อของส่วนที่สองของบทช่วยสอน)
- - คุณมีย่อหน้า
หรือบล็อก ข้อความในนั้นได้รับการออกแบบในสไตล์เดียวกัน แต่คุณต้องการให้แน่ใจว่าคำหลายคำมีขนาดตัวอักษรหรือสีที่แตกต่างกัน โดยไม่รบกวนโครงสร้าง มีไว้สำหรับสถานการณ์ดังกล่าวที่แท็กมีจุดประสงค์
-
,
-
,
- - แท็กรายการ ทำเครื่องหมายหมายเลข - งานของแท็กเหล่านี้ นอกจากนี้ยังมีรายการคำจำกัดความที่แท็กรับผิดชอบ แต่คุณจะได้เรียนรู้โดยละเอียดเกี่ยวกับทั้ง 6 คำเหล่านี้ในบทความ "การสร้างรายการ"
, , ,
, และ ใช้เมื่อสร้างตารางและกล่าวถึงรายละเอียดในบทความแยกต่างหาก - - แท็กที่เพิ่มการโต้ตอบให้กับเพจ กล่าวคือ ทำให้ผู้ใช้สามารถโต้ตอบกับเว็บไซต์ได้ แน่นอนว่าแบบฟอร์มจำเป็นต้องมีตัวจัดการ แต่ด้วยความช่วยเหลือของแท็กภายใน คุณสามารถสร้างอินเทอร์เฟซได้ ช่องทำเครื่องหมาย ปุ่ม ปุ่มตัวเลือก ช่องป้อนข้อมูล และออบเจ็กต์อื่นๆ ที่ต้องดำเนินการจากคุณ ล้วนเป็นองค์ประกอบของแบบฟอร์มที่มีโค้ดวางอยู่ภายในคอนเทนเนอร์
- - แท็กที่สร้างปุ่มโต้ตอบ เพื่อให้บางสิ่งบางอย่างเกิดขึ้นเมื่อคุณคลิกที่มัน ปุ่มจะต้องอยู่ในรูปแบบ (อยู่ระหว่างแท็ก)
- สร้างองค์ประกอบของแบบฟอร์ม: สวิตช์ ช่องทำเครื่องหมาย ปุ่ม ช่องป้อนข้อมูลทุกประเภท ใส่เข้าไปในภาชนะ แต่ทำไมเราถึงต้องแยกจากกันถ้ามีแบบสากล?
- ช่วยให้คุณสร้างปุ่มพร้อมพารามิเตอร์ขั้นสูง ตัวอย่างเช่น คุณสามารถวางรูปภาพบนปุ่มได้ สิ่งนี้ไม่สามารถทำได้บนองค์ประกอบที่สร้างผ่าน
- และ - แท็กการสร้างเมนูใน HTML 5 - นี่คือคอนเทนเนอร์ภายในซึ่งมีองค์ประกอบต่างๆ อยู่ ซึ่งการเพิ่มจะนำไปสู่การสร้างรายการเมนู เป็นคู่ที่น่าสนใจทีเดียว ตัวอย่างเช่น ด้วยความช่วยเหลือนี้ คุณสามารถสร้างเมนูตามบริบทของคุณเองสำหรับเพจหรือแต่ละองค์ประกอบได้
แต่การออกแบบ Word ทั้งหมดไม่เหมาะสำหรับการเผยแพร่บนเว็บไซต์ ดังนั้นจึงควรเรียนรู้วิธีจัดรูปแบบรายการในแท็ก HTML อย่างเหมาะสม
แท็กรายการสัญลักษณ์แสดงหัวข้อย่อยมีลักษณะดังนี้:
แท็กรายการที่ไม่ได้ติดแท็กดังนี้:
นอกจากนี้ แต่ละองค์ประกอบรายการยังมีกรอบ HTML ของตัวเอง:
ปรากฎว่าในการเน้นรายการสัญลักษณ์แสดงหัวข้อย่อยในข้อความโดยใช้โค้ด html คุณจะต้องรวมองค์ประกอบทั้งสองประเภทที่ใช้ มันจะมีลักษณะเช่นนี้:
สำหรับรายการที่ไม่มีเครื่องหมาย จะคล้ายกัน:
เราได้จัดเรียงรายการแล้ว เราสามารถเดินหน้าต่อไปได้
แท็กเน้นข้อความ: ตัวหนาและตัวเอียงเมื่อค้นหาว่าแท็กใดช่วยให้คุณสามารถจัดรูปแบบข้อความได้อย่างถูกต้อง คุณจะพบกับตัวเลือกโค้ดสองตัวเลือกสำหรับแต่ละกรณีแทบจะในทันที สิ่งนี้ทำให้เกิดความสับสนในหมู่ผู้ที่ไม่ใช่โปรแกรมเมอร์และคำถาม: ลูกค้าต้องการแท็กอะไรกันแน่
มันง่ายมาก! แท็กเสนอตัวเลือกการจัดรูปแบบทางกายภาพและเชิงตรรกะ อันแรกจำเป็นสำหรับผู้ใช้อันที่สอง - สำหรับเครื่องมือค้นหา “เครื่องมือค้นหา” เมื่อเห็นโค้ด html ที่เหมาะกับตัวเอง คำนึงถึงพื้นที่ที่เลือกและใช้ข้อมูลที่ได้รับในการจัดอันดับ ดังนั้นการเน้นข้อความโดยใช้การจัดรูปแบบเชิงตรรกะจะไม่ผิดพลาด
การใช้แท็ก html ช่วยให้เครื่องมือค้นหาพอใจและเน้นข้อความสำหรับผู้ใช้ด้วยสายตา สิ่งที่สำคัญที่สุดคือตัดสินใจด้วยตัวเอง:
เน้นวลีที่เป็นตัวหนาสำหรับ PS และผู้ใช้ เน้นวลีที่เป็นตัวหนาสำหรับผู้ใช้ ทำให้วลีเป็นตัวเอียงสำหรับ PS และผู้ใช้ ทำให้วลีเป็นตัวเอียงสำหรับผู้ใช้
ฉันมีบทความขนาดใหญ่และเป็นที่ถกเถียงกันมากในหัวข้อแท็กตัวหนาซึ่งเรียกว่า
หากจู่ๆ โปรแกรมเมอร์คนใดคนหนึ่งเข้ามาดูหัวข้อนี้ ฉันก็รีบสังเกตอีกครั้งว่าบทวิจารณ์นี้มีไว้สำหรับนักเขียนคำโฆษณา: วิธีใส่แท็ก คืออะไร และสิ่งสำคัญที่ต้องพิจารณาเมื่อเลือก และสุดท้าย จำเป็นต้องมีโค้ด html ยอดนิยมอีกหนึ่งโค้ดเพื่อเน้นย่อหน้า นี้
แท็กเปิดจะอยู่ก่อนจุดเริ่มต้นของย่อหน้า และวางแท็กปิดไว้ที่ส่วนท้าย หากย่อหน้าลงท้ายด้วยรายการแล้ว
ถูกวางไว้หลังแท็กทั้งหมดที่ใช้สำหรับรายการ
อินโฟกราฟิกเฉพาะเรื่องง่ายๆ บางส่วนในตอนท้าย:
เมื่อการอภิปรายหัวข้อนี้เริ่มต้นขึ้นในความคิดเห็น ชมรมผู้เขียนคำโฆษณาที่ประสบความสำเร็จได้ให้ข้อเสนอแนะที่น่าสนใจเกี่ยวกับอินโฟกราฟิกและบทความ นี่คือภาพหน้าจอของความคิดเห็นของผู้เข้าร่วมที่เชื่อถือได้ในการสนทนา
อ่าน: 3,365
ทุกคนที่อ่านบทเรียนนี้คงรู้ว่า HTML คืออะไร แต่การทบทวนข้อมูลพื้นฐานจะช่วยเพิ่มความรู้และฝึกฝนทักษะของคุณ โดยเฉพาะอย่างยิ่งด้วยเทคโนโลยีเว็บที่พัฒนาอยู่ตลอดเวลา
ช่วงนี้มีการพูดคุยกันมากมายเกี่ยวกับการเปลี่ยนแปลงที่ HTML 5 นำเสนอ ทุกแท็กที่กล่าวถึงในบทความนี้รองรับทั้ง HTML 4.01 และ HTML 5 แม้ว่าแท็กเหล่านี้บางส่วนจะใช้กันอย่างแพร่หลาย แต่การทบทวนเทคนิคต่างๆ จะมีประโยชน์มาก ที่เกี่ยวข้อง.
1.หนังสือเกี่ยวกับการเขียนโปรแกรมทุกเล่มกล่าวถึงว่ามันมีประโยชน์มากในการอธิบายว่าโค้ดของคุณทำอะไร เหตุใดการแสดงความคิดเห็นจึงเป็นแนวปฏิบัติที่ดี? สิ่งนี้ช่วยให้ผู้ที่อ่านโค้ดของคุณเข้าใจสิ่งที่เกิดขึ้นได้อย่างแท้จริง
สำหรับ HTML การแสดงความคิดเห็นอาจดูเหมือนเป็นจุดที่เพิ่มน้ำหนักให้กับหน้า อย่างไรก็ตาม ความคิดเห็นอาจมีประโยชน์ในการกำหนดส่วนต่างๆ และเพื่อรักษาโครงสร้างและการจัดระเบียบของโค้ดเพจ การทำเครื่องหมายจุดเริ่มต้นและจุดสิ้นสุดของส่วนต่างๆ สามารถช่วยได้มากเมื่อทำงานในโครงการ
นี่คือเนื้อหาหลัก
... 2. รูปแบบตาราง: , , และเพื่อให้การออกแบบตารางที่ดี คุณต้องใช้แท็กที่กล่าวถึงในหัวข้อย่อย ทั้งหมดนี้ส่งผลต่อแถวของตาราง และคุณสามารถกำหนดสไตล์ให้กับแถวเหล่านั้นได้อย่างง่ายดาย
รายการ | จำนวน |
ผลรวม | 7 |
#1 | 3 |
#2 | 4 |
ล้อมแถวของตารางเข้า - นี่คือวิธีการสร้างชื่อตาราง
การพันเชือกเข้าไป เราสร้างแถวทั้งหมดที่ด้านล่างของตาราง สตริง ต้องกำหนดไว้ก่อนบรรทัด ดังนั้นแถวทั้งหมดจะแสดงก่อนแถวที่เหลือในตาราง
เราล้อมบรรทัดข้อมูลใน.
ย่อหน้า | จำนวน |
ผลรวม | 7 |
#1 | 3 |
#2 | 4 |
รายการแบบเลื่อนลงเป็นวิธีที่ดีในการนำเสนอข้อมูลให้ผู้ใช้เลือก ไม่เพียงแต่ใช้พื้นที่น้อยเท่านั้น แต่ยังเป็นที่คุ้นเคยของผู้ใช้และใช้งานง่ายอีกด้วย คุณสมบัติที่ยอดเยี่ยม คือความสามารถในการสร้างหมวดหมู่ (หรือหัวข้อย่อย) สำหรับรายการ
ดีทรอยต์ ไทเกอร์ส ชิคาโก คับส์ ดีทรอยต์ ไลออนส์ ชิคาโก้ แบร์ส
ดีทรอยต์ ไทเกอร์ส ชิคาโก คับส์ ดีทรอยต์ ไลออนส์ ชิคาโก้ แบร์ส
4. หัวเรื่อง - ,,,,, และแน่นอนว่าทุกคนใช้ส่วนหัว แต่บอกตามตรงว่าครั้งสุดท้ายที่คุณใช้คือเมื่อไหร่ หรือส่วนหัวระดับที่ต่ำกว่า? ส่วนหัวช่วยให้คุณสร้างโครงสร้างความหมายน้อยลง เช่น สไตล์เพิ่มเติมสำหรับข้อความ .
ไม่จำเป็นต้องสร้างงานเพิ่มเติมให้ตัวเอง จำแท็กชื่อเรื่อง
5. และทุกคนชอบไซต์ที่ง่ายต่อการค้นหาข้อมูลที่คุณต้องการจากรายการต่างๆ ที่จัดกลุ่มตามตรรกะ จัดกลุ่มองค์ประกอบต่างๆ เข้าด้วยกันโดยการวาดกรอบสี่เหลี่ยมรอบๆ องค์ประกอบเหล่านั้น นอกจากนี้ยังสามารถเพิ่มชื่อให้กับส่วนดังกล่าวได้โดยใช้ .
ข้อมูลทั่วไป: ชื่อ: อีเมล: วันเดือนปีเกิด:
6.แท็ก ไม่ส่งผลต่อสไตล์แต่อย่างใด มันส่งผลต่อการทำงานของเพจ
ใช้เพื่อกำหนดฉลากขององค์ประกอบอินพุต ตัวป้ายกำกับรับรู้การคลิกเมาส์ ทำให้ช่องป้อนข้อมูลที่เกี่ยวข้องใช้งานได้ คุณสมบัติป้ายกำกับนี้ใช้ได้กับช่องข้อความและปุ่มตัวเลือก
ชื่อ : ชาย : หญิง :
7.หากคุณต้องการสร้างเอฟเฟกต์ที่น่าทึ่งให้กับการแสดงออกบางอย่าง คุณสามารถใช้ได้ - ตามค่าเริ่มต้น บรรทัดว่างจะถูกแทรกก่อนและหลังองค์ประกอบ การเยื้องจะถูกเพิ่มเพื่อแยกข้อความที่อยู่ในองค์ประกอบออกจากเนื้อหาที่เหลือ
ตัวอย่างการใช้แท็กตัวอย่างการใช้แท็ก
8.ไม่สามารถพูดอย่างนั้นได้ หมายถึง แต่มักจะใช้ร่วมกัน
จำแท็กไว้. เมื่อคุณต้องการอ้างอิงถึงใครสักคน
ตัวอย่างการใช้แท็กร่วมกับแท็ก ข้อเสนอนี้รวมอยู่ในแท็กตัวอย่างการใช้แท็ก blockquote ร่วมกับแท็กอ้างอิง ข้อเสนอนี้รวมอยู่ในแท็ก
9.การใช้รายการให้โอกาสที่ดีในการจัดระเบียบข้อมูล ทุกคนรู้เรื่อง
แต่คุณใช้บ่อยแค่ไหน
และ
- บางทีชื่อ "รายการคำจำกัดความ" อาจทำให้นักพัฒนามือใหม่สับสน และทำให้เขาคิดว่ารายการดังกล่าวสามารถใช้เพื่อแทรกคำจำกัดความและเงื่อนไขเท่านั้น อย่างไรก็ตาม สถานการณ์นี้ไม่สอดคล้องกับความเป็นจริง
วิธีแสดงข้อมูลของรายการแต่ละประเภทจะแตกต่างกัน แน่นอนว่าไม่จำเป็นต้องหยุดอยู่แค่นั้น
และ
แต่โครงสร้างของรายการคำจำกัดความต้องมีการชี้แจงเพิ่มเติม
รายการ #1 คำจำกัดความสำหรับรายการ #1 รายการ #2 คำจำกัดความสำหรับรายการ #2
แทนที่จะกำหนดองค์ประกอบรายการ (
รายการ #1 คำจำกัดความสำหรับรายการ #1 รายการ #2 คำจำกัดความสำหรับรายการ #2
10. "(และอักขระ ASCII อื่น ๆ )เมื่อใช้ HTML คุณต้องใช้รหัส ASCII เมื่อคุณต้องการแทรกอักขระ กฎนี้จำเป็นต้องมีขั้นตอนเพิ่มเติม แต่ช่วยให้แน่ใจว่าอักขระทั้งหมดแสดงอย่างถูกต้องบนหน้าจอของผู้ใช้ และเบราว์เซอร์ไม่รับรู้ว่าอักขระเหล่านี้เป็นส่วนหนึ่งของมาร์กอัป คุณเคยเจอข้อความที่แสดงไม่ถูกต้องหรือไม่? โดยทั่วไป ข้อความที่เป็นปัญหาจะถูกสร้างขึ้นโดยใช้เครื่องหมายคำพูด เครื่องหมายอะพอสทรอฟี เครื่องหมายมากกว่าน้อยกว่า และอื่นๆ จริงๆ แล้วมีอักขระไม่มากนัก และควรจดจำรหัส ASCII ไว้
แท็ก คือคำสงวนพิเศษที่อยู่ในวงเล็บมุม (เช่น ) แท็กเป็นองค์ประกอบหลักของ HTML: โค้ดขึ้นต้นด้วยแท็ก และลงท้ายด้วยแท็ก และข้อมูลที่แสดงบนหน้าเว็บจะอยู่ภายในแท็ก ขอแนะนำให้เขียนเป็นตัวพิมพ์เล็กนั่นคือด้วยตัวอักษรตัวเล็กธรรมดา: ไม่ใช่ แต่
แท็กมีกี่ประเภท?แท็ก HTML ส่วนใหญ่จับคู่กัน: มีแท็กเปิด (เช่น ) และแท็กปิด ซึ่งจะแยกความแตกต่างจากแท็กเปิดด้วยเครื่องหมายทับ (/) หลังวงเล็บมุมแรก (เช่น ) ทุกสิ่งที่อยู่ภายในแท็กคู่หนึ่งเรียกว่าเนื้อหา
ข้อความเนื้อหาที่อยู่ภายในแท็กเหล่านี้จะกลายเป็นตัวหนา
นอกจากนี้ยังมีแท็กที่ไม่ได้จับคู่ (เดี่ยว) ซึ่งเรียกว่าแท็ก ไม่จำเป็นต้องปิดซึ่งต่างจากแท็กที่จับคู่ เนื่องจากแท็กเหล่านี้ใช้งานไม่ได้กับเนื้อหา แต่ทำหน้าที่บางอย่างได้ด้วยตัวเอง ตัวอย่างแท็กเดี่ยว -
- มันตั้งค่าข้อความให้ตัดไปบรรทัดถัดไป
หากเราวาดแนวกับภาษารัสเซียเราสามารถพูดได้ว่าแท็กที่จับคู่คือเครื่องหมายคำพูดหรือวงเล็บที่ส่งผลต่อคุณสมบัติของข้อความที่อยู่ในนั้น (พยายามอย่าปิดเครื่องหมายคำพูดทันเวลา) และแท็กเดี่ยว (เครื่องหมาย) เป็นเครื่องหมายวรรคตอน ( เครื่องหมายอัศเจรีย์ คำถาม หรือจุด)
แท็กใด ๆ ประกอบด้วย:
เนื่องจากแท็กเป็นพื้นฐานของภาษามาร์กอัป จึงไม่น่าแปลกใจที่มีแท็กอยู่เป็นจำนวนมาก มาดูแท็กหลักที่สำคัญที่สุดกันดีกว่า