จารึก ข้อความตัวหนาโดยใช้ HTML และ CSS
มีสามวิธีในการเน้นข้อความเป็นตัวหนาบนหน้า HTML แต่อย่ารีบเร่งที่จะใช้ข้อความที่คุณต้องการทันทีเนื่องจากการเน้นดังกล่าวอาจมีความหมายที่แตกต่างกันและส่งผลต่อการเพิ่มประสิทธิภาพไซต์สำหรับเครื่องมือค้นหา
ตัวอักษรตัวหนาพร้อมแท็กที่แข็งแกร่ง
วิธีนี้เหมาะถ้าคุณต้องการเน้นส่วนสำคัญของข้อความด้วยตัวหนา แท็ก HTML เป็นแท็กการจัดรูปแบบเชิงตรรกะ และสาระสำคัญของแท็กคือการ "เน้น" ความสำคัญของส่วนที่เลือก
มีแท็กการจัดรูปแบบลอจิคัลอื่นๆ ใน HTML ตัวอย่างเช่น แท็กทำให้ข้อความเป็นตัวเอียงและระบุการเน้นวลีที่ไฮไลต์
การเลือกข้อความประเภทอื่น ๆ มีอธิบายไว้ในบทความ:
ข้อความธรรมดา เน้นข้อความส่วนสำคัญ- ข้อความธรรมดา.
ข้อความตัวหนาโดยใช้แท็ก b
ข้อความธรรมดา ข้อความเป็นตัวหนา- ข้อความธรรมดา.
สไตล์ CSS ตัวหนา
ข้อความตัวหนาสามารถทำได้ไม่เพียงแต่โดยใช้แท็ก HTML พิเศษเท่านั้น คุณสามารถทำให้เอาต์พุตเป็นตัวหนาบนแท็กใดๆ ได้โดยการตั้งค่าคุณสมบัติ font-weight: Bold; (ใช้ไม่ได้กับทุกฟอนต์)
การเน้นดังกล่าวจะมีลักษณะเป็นโวหาร โดยไม่ต้องเพิ่มน้ำหนักเชิงตรรกะให้กับข้อความที่เลือก
นอกจากนี้ คุณสามารถเลือกแท็กเฉพาะหรือกลุ่มองค์ประกอบพร้อมกันได้โดยการตั้งค่าสไตล์ผ่านคลาส CSS
คุณสมบัติ CSS ภายในแอตทริบิวต์ style:
ข้อความเป็นตัวหนา
ข้อความเป็นตัวหนา
ข้อความเป็นแบบอักษรปกติ
ข้อความเป็นตัวหนา
จะทำอย่างไรถ้าคุณไม่สามารถทำให้ข้อความเป็นตัวหนาได้?
หากคุณไม่สามารถทำให้ข้อความเป็นตัวหนาได้ อาจเป็นไปได้ว่าสไตล์ CSS ขององค์ประกอบต่างๆ อาจถูกแทนที่ในไซต์ของคุณ ในกรณีนี้ คุณจะต้องปรับสไตล์เหล่านี้ ในกรณีส่วนใหญ่ การดำเนินการนี้จะดำเนินการผ่านไฟล์สไตล์ชีต CSS หลัก หากคุณไม่เข้าใจสิ่งนี้ โปรดติดต่อผู้ดูแลเว็บ เป็นไปได้มากว่าการแก้ปัญหานี้จะต้องใช้เวลาทำงานไม่เกิน 5 นาที (แม้ว่าแน่นอนว่าอาจมีข้อยกเว้นก็ตาม)
การเน้นข้อความที่มีข้อมูลจำนวนมากเป็นความคิดที่ดี ท้ายที่สุดผู้อ่านอาจไม่สังเกตเห็นข้อมูลที่จำเป็นสำคัญหรืออื่น ๆ ที่คุณต้องการสื่อ ตัวอย่างเช่น ฉันยังเน้นข้อความ: ฉันเน้นแท็ก สไตล์ คุณลักษณะ คำหลัก ลิงก์ ฯลฯ ด้วยสีของฉัน แต่ฉันทำเช่นนี้โดยใช้สไตล์ HTML มีปากกาเน้นข้อความมาตรฐาน ได้แก่ ตัวหนา เฉียง ขีดเส้นใต้ ขีดทับ ใหญ่กว่า เล็กกว่า มาดูองค์ประกอบสำเนียงทั้งหมดกันดีกว่า
ภาพขนาดย่อ
แบบอักษรตัวหนาที่รู้จักกันดีซึ่งสามารถมองเห็นได้ทุกที่ เพื่อจุดประสงค์นี้จึงมีการพัฒนาแท็กสองแท็ก และ - แท็ก ทั่วไปมากขึ้น แท็กเหล่านี้ไม่เหมือนกัน แม้ว่าผลลัพธ์จะคล้ายกันก็ตาม ความแตกต่างก็คือแท็ก กำหนดความหนาทางกายภาพของข้อความและแท็ก กำหนดความสำคัญของข้อความนี้และเน้นข้อความด้วยตัวหนา แต่ "แต่" ที่ยิ่งใหญ่ในเบราว์เซอร์สมัยใหม่สิทธิ์ของพวกเขาได้รับการ "เท่าเทียมกัน" พวกเขามีความเท่าเทียมกัน (เทียบเท่า) สถานการณ์เดียวกันนี้ใช้กับแท็ก และ - ดังนั้นจึงมีประโยชน์มากกว่าถ้าใช้แท็กที่สั้นกว่า ด้านล่างนี้เป็นตัวอย่าง:
ภาพขนาดย่อ
ข้อความตัวเอียง
แท็กมีหน้าที่เน้นตัวเอียง และ - ตามที่ระบุไว้ข้างต้น จุดเน้นจะแตกต่างกัน แต่เทียบเท่าในเบราว์เซอร์สมัยใหม่ ด้านล่างนี้เป็นตัวอย่าง:
ข้อความที่ขีดเส้นใต้
คุณสามารถเน้นข้อความด้วยแบบอักษรที่ขีดเส้นใต้โดยใช้แท็ก - แท็กนี้ถูกประณามโดยข้อกำหนด HTML และแนะนำให้ใช้สไตล์ซึ่งฉันเห็นด้วย ฉันจะแน่ใจว่าได้เขียน CSS ที่เทียบเท่ากับแท็กเน้นเสียง ด้านล่างนี้เป็นตัวอย่าง:
ข้อความที่ขีดเส้นใต้
ข้อความขีดทับ
หากต้องการขีดฆ่าข้อความ ให้ใช้แท็กที่เทียบเท่ากันสองแท็ก: และ - แท็กทั้งสองนี้ขมวดคิ้วและแนะนำให้ใช้สไตล์แทน แท็ก เป็นสิ่งต้องห้ามโดยเด็ดขาดใน HTML5 ด้านล่างนี้เป็นตัวอย่าง:
ข้อความขีดทับ
ขนาดใหญ่และเล็กกว่าข้อความปกติ
คุณสามารถเน้นข้อความได้โดยการเพิ่มขนาดของข้อความ มีแท็กสำหรับสิ่งนี้ - หากต้องการทำให้ข้อความเล็กกว่าปกติ ให้ใช้แท็ก - แต่การใช้สไตล์ CSS อยู่เสมอก็ยังมีประโยชน์อยู่ ด้านล่างนี้เป็นตัวอย่าง:
ข้อความขนาดใหญ่ขึ้น
การแทนที่ข้อความตัวหนาด้วยสไตล์ CSS
มีคุณสมบัติดังกล่าวใน CSS - น้ำหนักแบบอักษร- มีความหมายหลายประการ: น้ำหนักแบบอักษร:bold|โดดเด่นยิ่งขึ้น|เบากว่า|ปกติ|100|200|300|400|500|600|700|800|900 หากต้องการทำให้ข้อความหนาที่สุด คุณต้องใช้ค่า น้ำหนักแบบอักษร: 900. เราจะพูดถึงเรื่องนี้เพิ่มเติมในบทเรียนหน้า
แทนที่ข้อความตัวเอียงด้วยสไตล์ CSS
มีความคล้ายคลึงกับแท็กใน CSS (ข้อความตัวเอียง). นี่คือคุณสมบัติลักษณะแบบอักษร ด้านล่างนี้เป็นตัวอย่าง:
ฉัน (
รูปแบบตัวอักษร: ตัวเอียง;
}
แทนที่ข้อความที่ขีดเส้นใต้ด้วยสไตล์ CSS
แท็ก เลิกใช้แล้วตามข้อกำหนด HTML และแนะนำให้ใช้สไตล์ อะนาล็อกสามารถเป็นทรัพย์สินได้ การตกแต่งข้อความ- ฉันมักจะใช้เพื่อลบการขีดเส้นใต้ออกจากลิงก์ (ไม่มีค่า) แต่ในกรณีนี้ เราจำเป็นต้องเพิ่มการขีดเส้นใต้ (การขีดเส้นใต้ค่า) ด้านล่างนี้เป็นตัวอย่าง:
ข้อความที่ขีดเส้นใต้
ยู (
การตกแต่งข้อความ: ขีดเส้นใต้;
สวัสดีผู้อ่านบล็อกที่รัก! บทความนี้จะพูดถึง แท็กการจัดรูปแบบข้อความ- ตัวอย่างที่สำคัญ ได้แก่ การทำข้อความให้เป็นตัวหนาหรือตัวเอียง นอกจากนี้เรายังจะดูผลกระทบของแท็กบางส่วนต่อการเพิ่มประสิทธิภาพเว็บไซต์ภายในและกฎเกณฑ์ในการเขียนแท็กเหล่านั้น คุณสามารถอ่านเกี่ยวกับเรื่องนั้นได้ในบทความที่ให้มา อย่างไรก็ตาม คุณสามารถค้นหาองค์ประกอบการออกแบบข้อความที่คล้ายกันได้ในโปรแกรมแก้ไขข้อความจำนวนมาก เช่น ใน Word
แท็กแบ่งออกเป็น 2 ประเภท: บล็อกและอินไลน์ เมื่อใช้อย่างแรก คุณสามารถเปลี่ยนเนื้อหาของข้อความบางส่วนได้ (บรรทัด แต่ละส่วน หรือคำ) และส่วนหลังคือ แท็กการจัดรูปแบบที่เราจะดูในบทความนี้จะเป็นตัวพิมพ์เล็กเป็นหลัก
กฎและลำดับการเขียนแท็ก
คุณรู้อยู่แล้วว่าแท็กเปิดและปิดคืออะไร ถ้าไม่เช่นนั้น ให้อ่านบทความที่ให้ไว้ตอนต้นของเนื้อหานี้ กล่าวโดยสรุป มีแท็กสองประเภท: เดี่ยว (เช่น บรรทัดใหม่) และคอนเทนเนอร์ (เป็นคู่) ดังนั้นแท็กการจัดรูปแบบข้อความทั้งหมดจึงเป็นเช่นนั้น จับคู่- ซึ่งหมายความว่าองค์ประกอบใดๆ มีแท็กเปิดและปิด และต้องวางไฮไลต์ไว้ระหว่างองค์ประกอบเหล่านั้น ตัวอย่างเช่น การเลือกวลีที่ถูกต้องจะมีลักษณะดังนี้: ส่วนที่เลือก
เมื่อเบราว์เซอร์ประมวลผลส่วนนี้ คุณจะเห็นข้อความต่อไปนี้: ส่วนที่เลือกอย่างไรก็ตาม แท็กทั้งหมดจะไม่แสดงในฟีด RSS ()
สิ่งสำคัญในการเขียนแท็กคืออย่าลืมปิดแท็กเหล่านั้น มิฉะนั้น ข้อความทั้งหมดในหน้าจะถูกเน้นด้วยตัวหนา (ในตัวอย่างที่มีแท็ก - แต่มีบางกรณีที่คุณจำเป็นต้องเน้นส่วนใดส่วนหนึ่งทั้งตัวหนาและตัวเอียงในเวลาเดียวกัน แต่ไม่มีแท็กที่ดำเนินการนี้ มีทางเดียวเท่านั้นที่จะออกจากสถานการณ์นี้: ใช้สองแท็กพร้อมกัน ไม่สำคัญว่าคุณจะใช้มันตามลำดับอะไร ดังนั้นการเขียนข้อความด้วยแท็กดังนี้:
ส่วนที่เลือก
หรือเช่นนี้:
ส่วนที่เลือก
คุณจะยังคงได้รับ ส่วนที่เลือก ตัวเอียงและตัวหนาในเวลาเดียวกัน อย่างไรก็ตามควรใช้ตัวเลือกแรกมากกว่าเพราะในตอนแรกเป็นเพียงตัวเลือกเดียวและถูกต้อง นอกจากนี้อย่าลืมว่าแต่ละเบราว์เซอร์สามารถประมวลผลแท็กต่างกันได้ () ขึ้นอยู่กับการตั้งค่า ตอนนี้เรามาดูแท็กการจัดรูปแบบกันดีกว่า
ข้อความตัวหนาและตัวเอียง - แท็ก , , และ
แท็กการจัดรูปแบบข้อความยอดนิยม - ไฮไลต์ ตัวหนาและ ตัวเอียง- มักใช้เพื่อให้ความสำคัญกับแฟรกเมนต์ กรณีแรกทำหน้าที่เน้นส่วนที่มีข้อมูลหรือคำหลักที่เป็นประโยชน์ ตัวเอียงมีจุดประสงค์เดียวกันกับข้อความตัวหนา แต่ข้อมูลมีความสำคัญน้อยกว่า เนื่องจากตัวเอียงจะสังเกตเห็นได้ชัดเจนในพื้นหลังของข้อความเนื้อหาน้อยกว่าข้อความตัวหนามาพิจารณากันก่อน ทำให้ข้อความเป็นตัวหนา- มีสองแท็กที่ใช้สำหรับการกระทำนี้ - และ - ไม่มีความแตกต่างในลักษณะที่ปรากฏ แม้ว่าแต่ละเบราว์เซอร์สามารถตีความแต่ละองค์ประกอบได้แตกต่างกัน แต่คุณก็สามารถเห็นความแตกต่างได้ นี่คือลักษณะของข้อความในแท็ก และ ในรูปแบบที่เบราว์เซอร์ประมวลผลแล้ว:
ข้อความในแท็กแข็งแกร่ง
ข้อความในแท็กบี
และนี่คือลักษณะของสองบรรทัดนี้ในซอร์สโค้ดของเพจ:
ข้อความในแท็กแข็งแกร่ง ข้อความในแท็กบี
เราสามารถสังเกตสถานการณ์เดียวกันได้ในกรณีของ แท็กตัวเอียง และ - ลองค้นหาความแตกต่างระหว่างสองตัวอย่าง:
ข้อความในแท็ก em
ข้อความในแท็ก I
และนี่คือซอร์สโค้ด:
ข้อความในแท็ก em ข้อความในแท็ก I
ดังนั้นแท็กที่ถือว่าเป็นตัวหนาและตัวเอียงนั้นจริงๆ แล้วไม่แตกต่างกัน แต่เหตุใดเราจึงต้องใช้แท็ก เป็นต้น ถ้ามี - ท้ายที่สุดแล้วตัวหลังมีเพียงอักขระเดียว (ไม่นับวงเล็บ) ดังนั้นจึงเขียนได้ง่ายกว่า และประเด็นทั้งหมดก็คือแท็กนั้น และ อิทธิพล . หากคุณล้อมรอบคำหลักด้วยแท็กเหล่านี้จะส่งผลดีต่อการโปรโมตเว็บไซต์ สิ่งสำคัญคืออย่าหักโหมเกินไป - ข้อความควรมีข้อความที่เป็นตัวหนาสูงสุด 5% ในแท็ก และตัวเอียงในแท็กมีจำนวนเท่ากัน .
หากคุณต้องการเน้นบางจุดในข้อความ ให้ใช้แท็ก หรือ - โดยทั่วไปแล้ว ฉันคิดว่าเครื่องมือค้นหายังถือว่าข้อความในแท็กเหล่านี้มีความสำคัญมากกว่า แต่ การเพิ่มประสิทธิภาพภายในพวกเขายังคงมีอิทธิพลน้อยกว่า และ .
แท็กสำหรับเน้นข้อความด้วยบรรทัด - , และ
ตอนนี้เรามาดูแท็กบางส่วนที่ใช้เส้นประในการออกแบบข้อความ โปรแกรมแก้ไขข้อความที่มีชื่อเสียงที่สุดที่คุณรู้จักคือ แท็ก
หรือขีดเส้นใต้ แท็กนี้ไม่มีผลกระทบต่อการจัดอันดับ (เท่าที่ฉันรู้) แต่การเน้นข้อความบางส่วนและการมุ่งความสนใจไปที่แท็กนั้นจะช่วยได้ ฉันยกตัวอย่างการใช้แท็กนี้ด้านบน อีกสองแท็กที่มีจุดประสงค์คล้ายกัน - และ - ทั้งสองทำหน้าที่ในการเน้นข้อความ คุณสามารถใช้แท็กนี้ในสถานการณ์ใดก็ได้: หากคุณกำลังอัปเดตเอกสาร (หรือบางส่วน) คุณสามารถขีดฆ่าเอกสารเก่าและเพิ่มเอกสารใหม่ได้ หากคุณกำลังจะเขียนสิ่งที่เบี่ยงเบนไปจากหัวข้อของเนื้อหา สิ่งที่ไม่สอดคล้องกับมาตรฐานทางศีลธรรมและจริยธรรม
ความแตกต่างระหว่างสองแท็กนี้อยู่ที่แท็กเท่านั้น การเขียนด้วยเหตุนี้จึงควรใช้อันแรกมากกว่าเพราะว่า ประการแรก เขียนได้สะดวกกว่า และประการที่สอง หน้าเว็บของคุณจะมีโค้ด HTML น้อยลง และเครื่องมือค้นหาก็ชื่นชอบสิ่งนี้
แท็ก และคุณลักษณะ - พารามิเตอร์แบบอักษรข้อความ
ตอนนี้ให้พิจารณาแท็กที่ไม่ได้ใช้โดยไม่มีแอตทริบิวต์ คุณสามารถตั้งค่าพารามิเตอร์สำหรับข้อความเฉพาะได้ โดยทั่วไป ตอนนี้นิยมใช้ (สไตล์ชีตแบบเรียงซ้อน) เนื่องจาก... การใช้สิ่งเหล่านี้ทำให้คุณสามารถลดโค้ด HTML ทั้งหมดของหน้าได้อย่างมาก ลองดูที่แท็กเดียวกันนั้น . ทุกสิ่งมีไว้เพื่อเขา คุณสมบัติสามประการ:
- ใบหน้า- แบบอักษรนั้นเอง ตัวอย่างเช่น Arial, Courier หรือ Verdana คุณสามารถแสดงรายการได้หลายรายการเพราะ ไม่ใช่ผู้ใช้ทุกคนที่มีชุดแบบอักษรที่กว้างขวาง และด้วยการเขียนหลาย ๆ ตัวในแอตทริบิวต์ face เบราว์เซอร์จะสามารถเลือกได้ว่าจะใช้แบบอักษรใดหรือแบบอักษรใดที่มีอยู่ในระบบ
- ขนาด— คุณลักษณะที่ระบุขนาดข้อความ สามารถแสดงได้ทั้งในหน่วยทั่วไปและหน่วยพิกเซล
- สี- สีข้อความ คุณลักษณะนี้สามารถใช้ได้ทั้งในรหัสสี HTML และในคำ อันแรกมีรูปแบบ #FFFFFF (โดยที่ F คือตัวเลขหรือตัวอักษรใดๆ จาก A ถึง F) และอันที่สองเขียนด้วยคำง่ายๆ (เช่น สีแดง)
นี่คือลักษณะของข้อความในแท็ก โดยใช้แต่ละแอตทริบิวต์:
ข้อความนี้คือ 6px
ข้อความนี้เป็นสีแดง ข้อความนี้เป็นแบบอักษร Arial ข้อความนี้เป็นสีแดงและขนาด 5pxและนี่คือสิ่งที่คุณจะเห็นหลังจากประมวลผลโค้ดที่เขียนแล้ว: 
องค์ประกอบการออกแบบข้อความบล็อกหัวเรื่อง -ย่อหน้า
ย่อหน้า
สุดท้ายนี้ เราจะมาดูองค์ประกอบบล็อกที่ใช้ในเกือบทุกเอกสาร เหล่านี้เป็นแท็กหัวเรื่องและย่อหน้า ลองพิจารณาข้อแรกกัน ส่วนหัวมี 6 ประเภทและแต่ละประเภทมีแท็กของตัวเอง แต่ละประเภทมีเพียงหมายเลขซีเรียลของตัวเองและบันทึกโดยใช้แท็ก
, ,..., - ต่อไปนี้คือลักษณะของส่วนหัวทั้งหมดเมื่อประมวลผล:
- ต่อไปนี้คือลักษณะของส่วนหัวทั้งหมดเมื่อประมวลผล:
ตัวเลขหลังชื่อคำตรงกับตัวเลขในแท็ก
ตอนนี้เรามาพูดถึงแท็กไฮไลต์ย่อหน้ากัน
หน้าที่ของแท็กนี้คือการแยกข้อความระหว่างข้อความอื่นที่เหมือนกันและบรรทัดว่าง หากคุณดูซอร์สโค้ดของเอกสาร คุณจะเห็นสิ่งต่อไปนี้:
สี่เหลี่ยมสีเขียวมีหนึ่งย่อหน้า สี่เหลี่ยมสีแดงมีอีกย่อหน้า และนี่คือลักษณะของโค้ดนี้หลังจากประมวลผลโดยเบราว์เซอร์ (ลูกศรชี้ไปที่บรรทัดว่าง):
เป็นผลให้เราได้รับการแยกย่อหน้าหนึ่งจากอีกย่อหน้าที่เห็นได้ชัดเจนซึ่งเป็นประโยชน์ - การอ่านจะสะดวกยิ่งขึ้น
นี่คือจุดสิ้นสุดของบทความเกี่ยวกับ แท็กการจัดรูปแบบเอกสาร- มีอีกมากมายมากกว่าที่ฉันอธิบายไว้ในเนื้อหานี้ จำเป็นต้องพูดถึงบางอย่างมากมาย ด้วยเหตุนี้จึงมีการทุ่มเทให้กับบทความที่แยกจากกันพร้อมบทวิจารณ์ฉบับเต็ม!
ความอิ่มตัวคือการเพิ่มความหนาของเส้นแบบอักษรและคอนทราสต์ตามลำดับ โดยทั่วไปน้ำหนักจะมีสี่ประเภท: น้ำหนักเบา ปกติ ตัวหนา และตัวหนา อย่างไรก็ตาม เมื่อใช้ HTML คุณสามารถตั้งค่าได้เฉพาะสไตล์ปกติและตัวหนาเท่านั้น ในการตั้งค่าข้อความตัวหนา จะใช้แท็กสองแท็ก: และ .
รูปแบบตัวอักษรตัวหนา การเน้นข้อความที่ชัดเจน
สไตล์ตัวเอียง
แบบอักษรตัวเอียงไม่ได้เป็นเพียงการเอียงของอักขระแต่ละตัวเท่านั้น แต่ยังเป็นการออกแบบใหม่ทั้งหมดให้เป็นสไตล์ใหม่ที่เลียนแบบลายมือ ตัวเอียงสำหรับข้อความถูกกำหนดโดยสองแท็ก: และ .
รูปแบบตัวอักษรตัวเอียง การเลือกข้อความ
ควรสังเกตว่าแท็ก และ เช่นเดียวกับ และ แม้ว่าเอฟเฟกต์จะคล้ายกัน แต่ก็ไม่ได้เทียบเท่าและเปลี่ยนกันได้ทั้งหมด แท็กแรก - เป็นแท็กมาร์กอัปทางกายภาพและกำหนดรูปแบบตัวหนาของข้อความและแท็ก - ด้วยแท็กมาร์กอัปแบบลอจิคัลและไฮไลต์ข้อความที่ทำเครื่องหมายไว้ การแบ่งแท็กออกเป็นการจัดรูปแบบเชิงตรรกะและกายภาพ เดิมทีมีจุดมุ่งหมายเพื่อทำให้ HTML เป็นสากล รวมถึงเป็นอิสระจากอุปกรณ์เอาท์พุต ตามทฤษฎีแล้ว หากคุณใช้เบราว์เซอร์คำพูด ข้อความจะถูกจัดรูปแบบโดยใช้แท็ก และ จะถูกทำเครื่องหมายแตกต่างออกไป อย่างไรก็ตาม ปรากฎว่าในเบราว์เซอร์ยอดนิยม ผลลัพธ์ของการใช้แท็กเหล่านี้เทียบเท่ากัน
ตัวอย่าง 7.5 แสดงการใช้แท็ก และ สำหรับการจัดรูปแบบข้อความ
ตัวอย่างที่ 7.5 แท็ก และ
คุกกี้และแสงจันทร์อยู่ที่ไหน! - เด็กเลวอุทาน.
ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 7.5.
สวัสดีเพื่อนๆ
หลังจากพักไปนาน ฉันจำได้ว่าไม่ได้เขียนบรรทัดเดียวมานานแล้ว แน่นอนว่ามีเหตุผลในเรื่องนี้เพราะจะมีเหตุผลบางอย่างที่ต้องแก้ตัวใช่ไหม? ที่จริงแล้ว ฉันทำหลักสูตรวิดีโอทุกวัน ซึ่งฉันได้พูดถึงไปแล้วสองสามครั้ง แต่ตอนนี้ฉันจะไม่พูดอะไรเพิ่มเติมเกี่ยวกับเรื่องนี้ คุณจะพบทุกสิ่งในไม่ช้า
ดังนั้นเนื่องจากไม่มีอะไรคิดจะเขียนถึง ฉันตัดสินใจดูสถิติเพื่อดูว่าผู้ใช้ RuNet สนใจอะไรเกี่ยวกับ HTML, WordPress, DLE และหัวข้อที่คล้ายกัน และเดาอะไร? ยังมีเรื่องที่จะเขียนเกี่ยวกับ คำถามทั้งหมดที่ฉันพบดูเหมือนจะมีคำตอบ แต่ก็ไม่ได้อยู่ในรูปแบบที่เข้าใจเสมอไป และโดยทั่วไปแล้วมันก็น่าสนใจที่จะเขียนอะไรแบบนั้น
วันนี้เราจะมาพูดถึง HTML กล่าวคือ เราจะพูดถึงวิธีเน้นข้อความด้วยตัวหนาและตัวเอียง และเราจะพูดถึงการเน้นด้วยสีด้วย
การทำข้อความให้เป็นตัวหนา
หากต้องการทำให้ข้อความเป็นตัวหนา คุณไม่จำเป็นต้องทำอะไรแฟนซีกับสไตล์ CSS หรือคิดอะไรซับซ้อนอื่นๆ HTML มีคุณสมบัตินี้อยู่แล้ว ในเวลาเดียวกัน เราไม่เพียงแต่สามารถเน้นข้อความเป็นตัวหนาเท่านั้น แต่ยังเน้นข้อความด้วยการเน้นอีกด้วย สามารถเน้นที่เครื่องมือค้นหาหรือเบราว์เซอร์หรือโปรแกรมพิเศษใดๆ สิ่งสำคัญคืออย่าหักโหมจนเกินไปโดยเน้นที่ข้อความในบทความหรือบนหน้าที่มีข้อมูลบางอย่างเนื่องจากอาจส่งผลเสียได้อย่างน้อยก็ในการโปรโมตหน้า HTML นี้
ดังนั้น เพื่อให้ข้อความเป็นตัวหนา เราสามารถใช้แท็กได้ - แท็กนี้อ้างอิงถึงองค์ประกอบของมาร์กอัปทางกายภาพ ในขณะที่ตั้งค่าข้อความให้เป็นตัวหนาโดยไม่ต้องเน้นใดๆ แท็กนี้เป็นแท็กที่จับคู่กัน ซึ่งหมายความว่ามีทั้งแท็กเปิดและแท็กปิด นอกจากนี้ เนื่องจากองค์ประกอบเป็นแบบอินไลน์ จึงต้องอยู่ในองค์ประกอบบล็อกบางส่วน เป็นต้น
รหัสตัวอย่าง:
ภาพขนาดย่อ
ผลลัพธ์:
ภาพขนาดย่อ
ในกรณีนี้ เราเพียงเน้นข้อความเป็นตัวหนา เท่านี้ก็เรียบร้อย
แต่มันเกิดขึ้น ดังนั้นเราจึงไม่จำเป็นต้องเน้นข้อความเพียงอย่างเดียว แต่ต้องเน้นไปที่ข้อความนั้นด้วย สำหรับสิ่งนี้ เราสามารถใช้แท็กมาร์กอัปแบบลอจิคัล - ข้อความที่เน้นด้วยแท็กนี้ไม่เพียงแต่มีน้ำหนักมากขึ้นสำหรับเครื่องมือค้นหาเท่านั้น แต่ตามทฤษฎีแล้วมันควรจะแตกต่างจากแท็ก ในเบราว์เซอร์คำพูด เช่น ตามน้ำเสียง อย่างไรก็ตาม ฉันไม่สามารถยืนยันหรือปฏิเสธข้อมูลนี้ได้ จริงหรือไม่?
ในกรณีนี้ ทุกอย่างจะเหมือนกันทุกประการกับกรณีที่มีการเน้นอย่างง่ายด้วยตัวหนา มีเพียงเราเท่านั้นที่เน้น ไม่ใช่แค่เน้นเท่านั้น
รหัสตัวอย่าง:
ผลลัพธ์:
มันค่อนข้างง่ายใช่ไหม?
ทำให้ข้อความเป็นตัวเอียง
ในกรณีนี้ทุกอย่างไม่ซับซ้อนไปกว่าครั้งแรก และสถานการณ์ของเราก็เหมือนกันทุกประการ เราสามารถเน้นข้อความด้วยสองตัวเลือกใน HTML อีกครั้ง โดยใช้แท็กมาร์กอัปแบบฟิสิคัลหรือแท็กแบบลอจิคัล ซึ่งเราจะเน้นไปที่ข้อความที่เลือกอีกครั้ง
เพื่อให้ข้อความเป็นตัวเอียง เราจะใช้แท็ก - องค์ประกอบนี้มีการจับคู่และอินไลน์ ซึ่งบอกเราว่าเราควรใช้ทั้งแท็กเปิดและแท็กปิด พวกเขาควรใช้มันภายในองค์ประกอบบล็อกด้วย และในกรณีนี้ องค์ประกอบบล็อกที่เหมาะสมที่สุดคือแท็กย่อหน้า
รหัสตัวอย่าง:
ข้อความเป็นตัวเอียง
ผลลัพธ์:
ข้อความเป็นตัวเอียง
และแน่นอน เราสามารถเน้นข้อความไปพร้อมๆ กันได้ด้วยการเน้นข้อความให้เป็นตัวเอียงโดยใช้แท็ก - รายการนี้เหมือนกับ ยกเว้นข้อความที่เป็นตัวเอียงและไม่เป็นตัวหนา
รหัสตัวอย่าง:
ข้อความที่เราเน้น
ผลลัพธ์:
ข้อความที่เราเน้น
และสิ่งสุดท้ายที่ฉันอยากจะพูดถึงในวันนี้คือการเน้นข้อความด้วยสี
ขออภัย เราไม่มีแท็กสำหรับเน้นข้อความด้วยสีในรูปแบบ HTML แต่ถึงกระนั้นก็ไม่มีอะไรซับซ้อนในวิธีนี้
ดังนั้น เพื่อเน้นบางส่วนของข้อความด้วยสี เราสามารถตัดส่วนที่ต้องการของข้อความด้วยแท็กได้ ซึ่งเป็นแท็กทั่วไปและใช้ภายในองค์ประกอบบล็อก ในกรณีของเรา องค์ประกอบบล็อกคือแท็ก แต่เพิ่ม ไม่พอ. คุณต้องระบุพารามิเตอร์สไตล์ซึ่งจะช่วยให้คุณสามารถเพิ่มคุณสมบัติ CSS ให้กับข้อความที่ต้องการและระบุคุณสมบัติเอง (สี) ซึ่งจะช่วยคุณตั้งค่าสีเฉพาะ สุดท้าย ให้ระบุค่าสำหรับคุณสมบัติสี แต่คำถามอาจเกิดขึ้น: “ฉันควรระบุอะไรดี?” คุณต้องระบุรหัส HTML ของสีที่เราต้องการ "ทาสี" ข้อความ สามารถพบได้รหัสสี HTML เพื่อให้ชัดเจนยิ่งขึ้น เรามาดูตัวอย่างกัน รหัสตัวอย่าง
ข้อความที่จะเน้น สี
ในกรณีนี้ เราเน้นคำเดียว: ด้วยสี ฉันยังต้องการที่จะทราบว่าแท็ก ถูกจับคู่และเราต้องปิดมันตรงที่ทรัพย์สินควรสิ้นสุด
ผลลัพธ์:
ข้อความที่จะเน้น
ด้วยวิธีง่ายๆ เหล่านี้ เราสามารถจัดการข้อความบนเพจของเราได้ ฉันอยากจะทราบด้วยว่าทุกสิ่งที่เราเพิ่งพูดถึงนั้นใช้งานได้ทั้งบน WordPress และ DLE เนื่องจากกลไกใด ๆ ใช้ HTML เพื่อแสดงหน้าเว็บ นั่นคือเหตุผลว่าทำไมจึงสามารถเรียก HTML ว่าเป็นพื้นฐานของเว็บไซต์ใดๆ ก็ได้ ไม่ว่าคุณจะมี CMS ใดก็ตาม
ฉันหวังว่าฉันจะอธิบายทุกอย่างชัดเจน
ขอให้โชคดีนะเพื่อน เร็วๆ นี้... จะมีข่าวที่น่าสนใจ...