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

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

สมมติว่าคุณพิมพ์ข้อความในโปรแกรมแก้ไข จัดรูปแบบข้อความ (เน้นคำบางคำ ตัวหนาหรือ ตัวเอียง) หรือทำอย่างอื่นกับมัน จากนั้นฉันก็คัดลอกและวางข้อความลงในโค้ด html ของฉัน คุณเปิดหน้า html ใน และการจัดรูปแบบทั้งหมดของคุณหายไปที่ไหนสักแห่ง สิ่งนี้เกิดขึ้นเนื่องจากโปรแกรมแก้ไขข้อความใช้อักขระพิเศษของตัวเองในการจัดรูปแบบข้อความ (โดยพื้นฐานแล้วจะเป็นแท็กเดียวกัน ใช้ในโปรแกรมแก้ไขข้อความเท่านั้น) ซึ่งคุณจะไม่เห็นตามค่าเริ่มต้น

ในหน้าต่างตัวแก้ไข คุณจะเห็นเพียงข้อความเท่านั้น แต่ในความเป็นจริงแล้ว ยังมีอักขระควบคุมพิเศษที่โปรแกรมแก้ไข "เข้าใจ" วิธีแสดงข้อความชิ้นนี้หรือชิ้นนั้น นั่นคือฉันขอย้ำอีกครั้งว่านี่เหมือนกับ "ปรับแต่ง" สำหรับใช้ในโปรแกรมแก้ไขข้อความเท่านั้น

แต่ถึงกระนั้นก็มีวิธีถ่ายโอนข้อความจากโปรแกรมแก้ไขและวางลงในโค้ด html ในรูปแบบดั้งเดิม และเนื่องจากเรากำลังพูดถึงเรื่องนี้ เรามาเริ่มศึกษาการจัดรูปแบบข้อความด้วยแท็กนี้กันดีกว่า มาเริ่มกันเลย

§ 2. แท็กการจัดรูปแบบเอง

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

แท็กยอดนิยมสำหรับการจัดรูปแบบข้อความคือ:

• - ใช้เพื่อเน้นข้อความ ตัวหนา.


• - เคยรับ ตัวเอียงข้อความ. ขอแนะนำให้ใช้แท็กแทนแท็กนี้


• - จะอนุญาต เน้นย้ำข้อความ. สิ่งสำคัญที่นี่คือผู้ใช้ไม่สับสนข้อความที่ขีดเส้นใต้ด้วยลิงก์


• - ทำให้ข้อความถูกขีดฆ่า


• - ออกแบบมาเพื่อเน้นข้อความตัวห้อย (ตัวห้อย) แท็กนี้จะมีประโยชน์ เช่น สำหรับการเขียนสูตรเคมี นี่คือรหัส

  น้ำ

  ทำให้เราได้สูตรนี้มา



• - จำเป็นต้องเน้นข้อความตัวยก (ตัวยก) ตัวอย่างเช่น ในการเขียนการยกกำลัง: เราเขียน

  (ก+ข)2,

  เราได้รับ

  (ก+ข) 2.

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

H2O เป็นสูตรของน้ำ

เมื่อรับชม

น้ำ- นี้ สูตรน้ำ.

§ 3. ย่อหน้า

ใน HTML ย่อหน้าจะถูกสร้างขึ้นโดยใช้นามสกุล . การใช้แท็กนี้จะแทรกบรรทัดว่างหนึ่งบรรทัด และวางองค์ประกอบหน้า HTML ที่มองเห็นได้ไว้ด้านหลังบรรทัดถัดไป ตัวอย่างเช่น ถ้าเราเขียนว่า:

ดังนั้นมันจะมีลักษณะดังนี้:

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

§ 4. การจัดตำแหน่งข้อความ

หากต้องการจัดแนวข้อความ ให้ใช้แอตทริบิวต์ จัดตำแหน่งด้วยค่าที่เป็นไปได้ กลางซ้ายขวาและ ปรับให้เหมาะสม- ดังนั้นจึงจัดแนวข้อความให้อยู่กึ่งกลาง ไปทางซ้าย ไปทางขวา และในเวลาเดียวกันกับสองขอบในคราวเดียว ตัวอย่างเช่น รหัส html:

align="center">ข้อความอยู่ตรงกลาง

จะจัดข้อความให้อยู่ตรงกลาง:

ข้อความตรงกลาง

และรหัสนี้:

ขวา">

จะจัดข้อความให้ชิดขวา

จัดข้อความชิดขวา

หากมีคุณสมบัติ จัดตำแหน่งไม่ได้ใช้ ข้อความจะถูกจัดชิดซ้าย สิ่งนี้เกิดขึ้นตามค่าเริ่มต้น รหัสตัวอย่าง:

จะจัดข้อความชิดซ้าย

ตามค่าเริ่มต้น ข้อความจะถูกจัดชิดซ้าย

§ 5. ตัวแบ่งบรรทัดและแถบแนวนอน

หากคุณต้องการให้แน่ใจว่ามีการเปลี่ยนไปขึ้นบรรทัดใหม่โดยไม่ต้องแทรกบรรทัดว่าง (ซึ่งจะเกิดขึ้นเมื่อคุณกด Enter ในโปรแกรมแก้ไขข้อความ) ให้ใช้แท็ก
- เช่น โค้ด html

1. บรรทัดแรก.
2. บรรทัดที่สอง.

ในเบราว์เซอร์จะมีลักษณะดังนี้:

1. บรรทัดแรก.
2. บรรทัดที่สอง.

ยู
ไม่มีแท็กปิด คุณคงเดาได้แล้วว่าในการแทรกบรรทัดว่างหลายๆ บรรทัด คุณต้องเขียนแท็ก
หลายครั้งติดต่อกัน

คุณยังสามารถแยกส่วนของข้อความด้วยสายตาโดยใช้แท็กได้ แท็กนี้จะสร้างแถบคั่นบนหน้าเว็บ (เช่น แถบสีเขียวที่อยู่ตอนต้นของบทความนี้) แท็กมีคุณสมบัติดังต่อไปนี้:

• ขนาด- ความหนาของแถบ


• ความกว้าง- ความกว้างของเส้น;


• จัดตำแหน่ง- การจัดตำแหน่ง;


• สี- สีลาย;


• ไม่มีสี- คุณลักษณะที่ไม่มีค่า หากระบุไว้ แถบสีดำทึบที่ไม่มีเงาจะถูกสร้างขึ้น

ตัวอย่างเช่น รหัส html:

align="center" size="5" width="50%" color="#3399ff">

ในเบราว์เซอร์จะมีลักษณะเช่นนี้

ความกว้างและความหนาสามารถระบุได้ทั้งเป็นพิกเซล (จากนั้นค่าจะคงที่) และเป็นเปอร์เซ็นต์ (จากนั้นค่าจะเปลี่ยนไปตามความละเอียดของหน้าจอ)

§ 6. หัวเรื่อง

หากต้องการตั้งชื่อส่วนและส่วนย่อยใน HTML ให้ใช้ แท็กชื่อ- ส่วนหัวมีหกระดับและกำหนดไว้ดังนี้:

• - ส่วนหัวระดับแรก


• - ส่วนหัวระดับที่สอง


• - ส่วนหัวระดับที่สาม


• - ส่วนหัวระดับที่สี่


• - ส่วนหัวระดับที่ห้า


• - ส่วนหัวระดับที่หก

ส่วนหัวจะใช้แบบอักษรตัวหนาและแยกออกจากส่วนที่เหลือของข้อความด้วยบรรทัดว่าง ชื่อที่ใหญ่ที่สุดคือ (ชื่อเรื่องของบทเรียนนี้ถูกเน้นด้วย) และชื่อที่เล็กที่สุดคือ แท็กหัวเรื่องมีคุณสมบัติดังต่อไปนี้:

• จัดตำแหน่ง- การจัดตำแหน่งข้อความชื่อเรื่องบนหน้า (ค่าจะเหมือนกับการจัดตำแหน่งของข้อความปกติ)


• ชื่อ- คำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนือชื่อ

ตัวอย่างเช่น รหัส HTML:

align="center" title="Tooltip. วางเมาส์ไว้เหนือชื่อเพื่อดู">Заголовок 4 уровня !}

ในเบราว์เซอร์จะมีลักษณะดังนี้:

ส่วนหัวระดับ 4

§ 7. การทำงานกับแบบอักษร

หากต้องการจัดรูปแบบแบบอักษรโดยตรง HTML จะมีแท็ก แท็กนี้มีคุณลักษณะดังต่อไปนี้:

• สี- สีข้อความแบบอักษร


• ใบหน้า- แบบอักษรแบบอักษร;


• ขนาด- ขนาดตัวอักษรตัวอักษร สามารถระบุเป็นค่าสัมบูรณ์ (1 ถึง 6) หรือค่าสัมพัทธ์ (+1 ถึง +6 และ -1 ถึง -6) ตามค่าเริ่มต้น ขนาดข้อความคือ 3 หากคุณระบุ ขนาด="+1"

§ 8. การสร้างรายการในรูปแบบ HTML

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

ในรายการลำดับเลข เครื่องหมาย (ประเภทค่าแอ็ตทริบิวต์) มีดังนี้:

• 1 - การกำหนดหมายเลขเป็นเลขอารบิค (ค่าเริ่มต้น)


• ก- อักษรละตินตัวพิมพ์ใหญ่ตามลำดับตัวอักษร


• ก- ตัวอักษรละตินขนาดเล็ก


• ฉัน- เลขโรมันขนาดใหญ่


• ฉัน- เลขโรมันเล็ก

ตัวอย่างเช่น โค้ด HTML

องค์ประกอบแรก
องค์ประกอบที่สอง
องค์ประกอบที่สาม

เบราว์เซอร์จะแสดงเช่นนี้

หากคุณใช้โปรแกรมประมวลผลคำ เช่น Microsoft Word หรือ Microsoft Excel คุณควรคุ้นเคยกับการจัดรูปแบบข้อความและวิธีทำให้ข้อความเป็นตัวหนา (ตัวหนา) ตัวเอียง (ตัวเอียง) ขีดทับ หรือขีดเส้นใต้ นี่เป็นเพียงสี่ในสิบเอ็ดตัวเลือกที่ระบุว่าสามารถจัดรูปแบบข้อความใน HTML และ XHTML ได้อย่างไร

ข้อความตัวหนาหรือตัวหนา

แบบอักษรตัวหนาหรือแบบอักษรตัวหนาใน HTML สามารถตั้งค่าได้โดยใช้สองแท็ก ... และ ... - ทุกอย่างที่อยู่ในแท็ก ...และ ...ปรากฏในรูปแบบ HTML เป็นข้อความตัวหนา (ตัวหนา) ดังแสดงด้านล่าง:

ตัวอย่าง

ใช้แท็ก b ที่เราทำ ตัวอักษรตัวหนา.

การใช้แท็กที่แข็งแกร่งที่เราทำ ข้อความเป็นตัวหนา.

เราได้รับผลลัพธ์ดังต่อไปนี้:

ตัวเอียง - ข้อความหรือแบบอักษรตัวเอียง

คุณสามารถทำให้ข้อความเป็นตัวเอียงใน HTML โดยใช้สองแท็ก ... และ ... - ทุกอย่างในแท็กตัวเอียง ...และ ...ปรากฏเป็น HTML ในรูปแบบข้อความตัวเอียง (แบบอักษร) ดังแสดงด้านล่าง:

ตัวอย่าง

การใช้แท็ก i ที่เราทำ ข้อความหรือแบบอักษรตัวเอียง.

การใช้แท็ก em ที่เราทำ ข้อความเป็นตัวเอียง.

เราได้รับผลลัพธ์ดังต่อไปนี้:

ข้อความที่ขีดเส้นใต้

คุณสามารถขีดเส้นใต้ข้อความในรูปแบบ HTML โดยใช้แท็ก ... ...ปรากฏในรูปแบบ HTML ในรูปแบบข้อความที่ขีดเส้นใต้ (แบบอักษร) ดังแสดงด้านล่าง:

ตัวอย่าง

การใช้แท็ก u ที่เราทำ ข้อความหรือคำที่ขีดเส้นใต้.

เราได้รับผลลัพธ์ดังต่อไปนี้:

ข้อความขีดทับ

คุณสามารถขีดทับข้อความในรูปแบบ HTML ได้โดยใช้แท็ก ... - ทุกสิ่งที่อยู่ในแท็ก ...ปรากฏใน HTML ในข้อความขีดทับ (แบบอักษร) ดังที่แสดงด้านล่าง:

ตัวอย่าง

การใช้แท็กการประท้วงที่เราทำ ข้อความขีดทับ.

เราได้รับผลลัพธ์ดังต่อไปนี้:

แบบอักษรโมโนสเปซ

เนื้อหาองค์ประกอบ ... เขียนด้วย HTML ในแบบอักษร monospace แบบอักษรส่วนใหญ่มีความกว้างผันแปรได้เนื่องจากตัวอักษรที่ต่างกันมีความกว้างต่างกัน (เช่น ตัวอักษร "у" จะกว้างกว่าตัวอักษร "r") อย่างไรก็ตาม ในแบบอักษร monospace แต่ละตัวอักษรจะมีความกว้างเท่ากัน

ตัวอย่าง

การใช้แท็ก tt ที่เราทำ แบบอักษรโมโนสเปซ.

เราได้รับผลลัพธ์ดังต่อไปนี้:

ตัวยก

แท็กเนื้อหา ^... ปรากฏใน HTML ในตัวยก แท็กตัวยก ^{ใน HTML มีขนาดตัวอักษรเท่ากับอักขระที่อยู่รอบๆ แต่ใช้ความสูงเพียงครึ่งหนึ่งเท่านั้น องค์ประกอบนี้เหมาะอย่างยิ่งเมื่อจำเป็น เช่น ในการเขียนกำลังของตัวเลขในรูปแบบ HTML}

ตัวอย่าง

ใช้แท็ก sup ที่เราสร้างไว้ด้านบน ^{ดัชนี}หรือกำลังของตัวเลข เช่น 2 ³.

เราได้รับผลลัพธ์ดังต่อไปนี้:

ตัวห้อย

แท็กเนื้อหา _... ปรากฏใน HTML ในตัวห้อย แท็กตัวห้อย _{ใน HTML มีขนาดตัวอักษรเท่ากับอักขระที่อยู่รอบๆ แต่ใช้ความสูงเพียงครึ่งหนึ่งเท่านั้น}

ตัวอย่าง

ใช้แท็กย่อยที่เราสร้างด้านล่าง _{ดัชนี}.

เราได้รับผลลัพธ์ดังต่อไปนี้:

วางข้อความแล้ว

เนื้อหาภายในแท็ก ... ปรากฏใน HTML เป็นข้อความที่วาง

ตัวอย่าง

ฉันต้องการที่จะได้รับเงิน มาก มากมายเงิน.

เราได้รับผลลัพธ์ดังต่อไปนี้:

ข้อความที่ถูกลบ

เนื้อหาภายในแท็ก ... ปรากฏใน HTML เป็นข้อความที่ถูกลบ

ตัวอย่าง

ฉันต้องการที่จะได้รับเงิน มาก มากมายเงิน.

เราได้รับผลลัพธ์ดังต่อไปนี้:

ข้อความขนาดใหญ่

แท็กเนื้อหา ... ปรากฏใน HTML เป็นข้อความขนาดใหญ่ โดยมีขนาดตัวอักษรใหญ่กว่าส่วนที่เหลือของข้อความโดยรอบหนึ่งขนาด ดังแสดงด้านล่าง:

ตัวอย่าง

การใช้แท็กใหญ่ที่เราทำ ส่งข้อความเพิ่มเติม.

เราได้รับผลลัพธ์ดังต่อไปนี้:

ข้อความขนาดเล็ก

เนื้อหาภายในแท็ก ... ปรากฏใน HTML เป็นข้อความขนาดเล็ก โดยมีขนาดตัวอักษรเล็กกว่าข้อความโดยรอบที่เหลือหนึ่งขนาด ดังแสดงด้านล่าง:

ตัวอย่าง

โดยใช้แท็กเล็กๆที่เราทำ ข้อความมีขนาดเล็กลง.

เราได้รับผลลัพธ์ดังต่อไปนี้:

การจัดกลุ่มองค์ประกอบและเนื้อหาของหน้าในรูปแบบ HTML

องค์ประกอบ

และ อนุญาตให้คุณจัดกลุ่มองค์ประกอบหลายรายการใน HTML เพื่อสร้างส่วนหรือส่วนย่อยของหน้า

ตัวอย่างเช่น คุณสามารถใส่ลิงก์ทั้งหมดบนหน้าเว็บในแท็กได้

เพื่อระบุว่าองค์ประกอบทั้งหมดในแท็กนี้

โปรดดูเมนู จากนั้นคุณสามารถจัดรูปแบบแท็กได้

เพื่อให้องค์ประกอบต่างๆ ถูกเรนเดอร์โดยใช้ชุดกฎสไตล์พิเศษ (CSS)

ตัวอย่างที่มีแท็ก

หน้าแรก / เกี่ยวกับเรา / ติดต่อ

ชื่อบทความ

เนื้อหาของหน้า...

เราได้รับผลลัพธ์ดังต่อไปนี้:

ในทางกลับกันองค์ประกอบ สามารถใช้เพื่อจัดกลุ่มองค์ประกอบแบบอินไลน์เท่านั้น ดังนั้น หากคุณมีส่วนหนึ่งของประโยคหรือย่อหน้า (ย่อหน้า) ที่ต้องการรวม คุณสามารถใช้องค์ประกอบนั้นได้ ด้วยวิธีดังต่อไปนี้:

ตัวอย่างที่มีแท็ก

การจัดกลุ่มองค์ประกอบโดยใช้ แท็กช่วง.

เราได้รับผลลัพธ์ดังต่อไปนี้:

โดยทั่วไปแท็กเหล่านี้จะใช้กับ CSS เพื่อให้คุณสามารถจัดสไตล์ส่วนของหน้าได้

สวัสดีผู้อ่านบล็อกที่รัก! บทความนี้จะพูดถึง แท็กการจัดรูปแบบข้อความ- ตัวอย่างที่สำคัญ ได้แก่ การทำข้อความให้เป็นตัวหนาหรือตัวเอียง นอกจากนี้เรายังจะดูผลกระทบของแท็กบางส่วนต่อการเพิ่มประสิทธิภาพเว็บไซต์ภายในและกฎเกณฑ์ในการเขียนแท็กเหล่านั้น คุณสามารถอ่านเกี่ยวกับเรื่องนั้นได้ในบทความที่ให้มา อย่างไรก็ตาม คุณสามารถค้นหาองค์ประกอบการออกแบบข้อความที่คล้ายกันได้ในโปรแกรมแก้ไขข้อความจำนวนมาก เช่น ใน 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	ผล	ตัวอย่าง
ข้อความ	การเขียนข้อความเป็นตัวหนา	ข้อความ
ข้อความ	ข้อความตัวหนา	ข้อความ
ข้อความ	การเขียนข้อความเป็นตัวเอียง	ข้อความ
ข้อความ	การเน้นส่วนสำคัญของข้อความ (ข้อความจะปรากฏเป็นตัวเอียง)	ข้อความ
ข้อความ	ขีดเส้นใต้ข้อความ	ข้อความ
ข้อความ	ข้อความขีดทับ	ข้อความ
ข้อความ	ตัวยก	100 ม.2
ข้อความ	ตัวห้อย	H2SO4

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

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

  ทาโฮมา , อาเรียล แบล็ค

  
  ผลลัพธ์:
  ทาโฮมา อาเรียล แบล็ค
• ขนาด = "ค่า"- ขนาดตัวอักษร (จำนวนเต็มตั้งแต่ 1 ถึง 7) คุณลักษณะ ขนาดด้วยเครื่องหมายลบ (หรือบวก) หมายความว่าขนาดตัวอักษรจะลดลง (หรือเพิ่มขึ้น) ตามจำนวนที่สอดคล้องกันโดยสัมพันธ์กับค่าเริ่มต้น ค่าที่ไม่ได้ลงนามจะระบุขนาดตัวอักษรที่แน่นอน
  ตัวอย่าง:
  

  1 ... 7

  
  ผลลัพธ์:
  1 , 2 , 3 , 4 , 5 , 6 , 7
• สี = "ค่า"- สีตัวอักษร. สำหรับความหมายของสี คุณสามารถใช้ชื่อสีในภาษาอังกฤษได้ เช่น สีแดง, สีเขียว, สีฟ้าฯลฯ หรือค่าเลขฐานสิบหก (เขียนในรูปแบบเลขฐานสิบหก) โดยขึ้นต้นด้วยอักขระ # และระบุสีแดง เขียว และน้ำเงินตามลำดับ ซึ่งจะต้องผสมเพื่อให้ได้เฉดสีที่ต้องการ อย่างหลังจะดีกว่าเพราะในกรณีแรก การเลือกเฉดสีขึ้นอยู่กับการตั้งค่าเบราว์เซอร์เฉพาะของลูกค้า! ตัวอย่าง:
  

  ข้อความ , ข้อความ

  
  ผลลัพธ์:
  ข้อความ ข้อความ

ในการออกแบบเว็บไซต์ พวกเขามักจะใช้ชุดสีที่เรียกว่า . ประกอบด้วยธาตุ 216 ธาตุ ลักษณะเฉพาะของสีที่ “ปลอดภัย” คือสีจะไม่เปลี่ยนแปลงเมื่อแสดงโดยเบราว์เซอร์ที่แตกต่างกันหรือบนจอภาพที่แตกต่างกัน กล่าวคือ จานสีนี้ช่วยให้มั่นใจได้ถึงการแสดงสิ่งที่นักออกแบบเว็บไซต์ตั้งใจบนหน้าจอที่แตกต่างกันอย่างถูกต้อง หากมีส่วนประกอบใดในสามส่วนของค่าเลขฐานสิบหกที่แตกต่างกัน 00 , 33 , 66 , 99 , เอสเอสหรือ เอฟเอฟแล้วสีไม่ปลอดภัย. ค่าแอตทริบิวต์ ขนาดและ สีคุณสามารถเขียนได้โดยไม่ต้องใส่เครื่องหมายคำพูด แต่เป็นการดีกว่าถ้าทำทุกอย่างตามกฎ

มีแท็กอื่นๆ ที่สามารถใช้เพื่อเปลี่ยนพารามิเตอร์ข้อความ:

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

  ชื่อ

  อีเมล *

  ข้อความ *

  ส่ง
  แจ้งการพิมพ์ผิด

  ข้อความที่จะส่งถึงบรรณาธิการของเรา:

  ความคิดเห็นของคุณ (ไม่บังคับ):

  ส่ง ยกเลิก