ส่วนนี้เริ่มต้นด้วยการปรับเปลี่ยนรายละเอียดของข้อความช่วยให้ผู้อ่านสามารถเข้าใจการเปลี่ยนแปลงในรูปแบบฟอนต์ต่างๆของ HTML และสร้างหน้าเว็บระดับมืออาชีพมากขึ้น
4.2 การดัดแปลงข้อความที่หลากหลายในส่วนก่อนหน้านี้ฉันได้เรียนรู้การตั้งค่าต่าง ๆ ของย่อหน้าขนาดใหญ่ซึ่งดูเหมือนจะน่าดึงดูดยิ่งกว่าข้อความของตัวเอง ส่วนนี้เริ่มต้นด้วยการปรับเปลี่ยนรายละเอียดของข้อความช่วยให้ผู้อ่านสามารถเข้าใจการเปลี่ยนแปลงในรูปแบบฟอนต์ต่างๆของ HTML และสร้างหน้าเว็บระดับมืออาชีพมากขึ้น
4.2.1 ป้ายกำกับพื้นฐานสำหรับการตั้งค่าสไตล์ข้อความ - <Font>แท็กพื้นฐานสำหรับการตั้งค่ารูปแบบตัวอักษรคือ <font> </font> และข้อความที่มีอยู่ในนั้นเป็นพื้นที่แอ็คชั่นสไตล์ ในการเขียนโค้ด HTML สำหรับผู้เริ่มต้น <font> </font> นั้นซ้อนกันได้ง่ายโดยหลายแหล่งเช่น <font แอตทริบิวต์ 1 = ค่า 1> <แอตทริบิวต์ font 2 = ค่า 2> ข้อความ </font> </font> อีกสถานการณ์หนึ่งคือฉลากการวางแนวที่ไม่ตรงกับการทำรังเช่น <font> <p> ข้อความ </font> </p> เพื่อสร้างมาตรฐานการเขียนโค้ดและหลีกเลี่ยงความผิดพลาดที่ไม่จำเป็นผู้อ่านจะต้องระมัดระวังเมื่อเรียนรู้
4.2.2 ตั้งค่าสีของข้อความสีเป็นหนึ่งในคุณลักษณะของแท็ก <font> </font> ซึ่งใช้ในการตั้งค่าสีข้อความ สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory ชื่อ FONT_COLOR.htm และเขียนโค้ดตามที่แสดงในรหัส 4.7
รหัส 4.7 การตั้งค่าสีตัวอักษร: font_color.htm
<html>
<head>
<title> การตั้งค่าสีตัวอักษร </title>
</head>
<body>
ข้อความสีแดงอ่อน: <font color =#dd0000> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีแดงเข้ม: <font color =#660000> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีเขียวอ่อน: <font color =#00dd00> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีเขียวเข้ม: <font color =#006600> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีฟ้าอ่อน: <font color =#0000dd> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีน้ำเงินเข้ม: <font color =#000066> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีเหลืองอ่อน: <font color =#dddd00> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีเหลืองเข้ม: <font color =#666600> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีฟ้าอ่อน: <font color =#00dddd> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีน้ำเงินเข้ม: <font color =#006666> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีม่วงอ่อน: <font color =#dd00dd> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
ข้อความสีม่วงเข้ม: <font color =#660066> สาระสำคัญของการเรียนรู้ HTML คือการใช้สิ่งที่ควรจะเป็น </font> <br />
</body>
</html>
ป้อน http: //localhost/font_color.htm ในแถบที่อยู่ของเบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.7
รูปที่ 4.7 การตั้งค่าสีแบบอักษร
ผู้อ่านไม่เพียง แต่สามารถเรียนรู้วิธีการใช้แอตทริบิวต์สีในแท็กตัวอักษรจากรหัส 4.7 แต่ยังคุ้นเคยกับวิธีการเป็นตัวแทนของสีต่างๆ
4.2.3 ตั้งค่าขนาดของข้อความขนาดยังเป็นคุณสมบัติของแท็ก <font> </font> ซึ่งใช้ในการตั้งค่าขนาดข้อความ ค่าของขนาดคือ 1-7 และค่าเริ่มต้นคือ 3 เราสามารถเพิ่ม + และ - อักขระก่อนที่ค่าแอตทริบิวต์ขนาดเพื่อระบุการเพิ่มขึ้นหรือการลดลงเมื่อเทียบกับค่าเริ่มต้นของขนาดตัวอักษร สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory ชื่อ FONT_SIZE.htm และเขียนโค้ดตามที่แสดงในรหัส 4.8
รหัส 4.8 การตั้งค่าขนาดตัวอักษร: font_size.htm
<html>
<head>
<title> การตั้งค่าขนาดตัวอักษร </title>
</head>
<body>
ขนาดคือ 1: <font size = 1> การเรียนรู้ html </font> <br />
ขนาดคือ 2: <font size = 2> การเรียนรู้ html </font> <br />
ขนาดคือ 3: <font size = 3> การเรียนรู้ html </font> <br />
ขนาดคือ 4: <font size = 4> การเรียนรู้ html </font> <br />
ขนาดคือ 5: <font size = 5> การเรียนรู้ html </font> <br />
ขนาดคือ 6: <font size = 6> การเรียนรู้ html </font> <br />
ขนาดคือ 7: <font size = 7> การเรียนรู้ html </font> <br />
</body>
</html>
ป้อน http: //localhost/font_size.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.8
รูปที่ 4.8 การตั้งค่าขนาดตัวอักษร
ผู้อ่านสามารถลองเพิ่ม + และ - อักขระก่อนค่าขนาดเพื่อตั้งค่าขนาดข้อความได้อย่างยืดหยุ่นมากขึ้น
4.2.4 ตั้งค่าตัวอักษรของข้อความใบหน้ายังเป็นคุณสมบัติของแท็ก <font> </font> ซึ่งใช้ในการตั้งค่าแบบอักษรข้อความ (แบบอักษร) แบบอักษรที่แสดงในหน้าเว็บ HTML เรียกว่าจากระบบการเรียกดูดังนั้นเพื่อให้แบบอักษรสอดคล้องกันขอแนะนำให้ใช้ตัวอักษรเพลงและหน้า HTML ยังใช้ตัวอักษรเพลงโดยค่าเริ่มต้น สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory ชื่อ FONT_FACE.htm และเขียนโค้ดตามที่แสดงในรหัส 4.9
รหัส 4.9 การตั้งค่าตัวอักษรฟอนต์: font_face.htm
<html>
<head>
<title> การตั้งค่าตัวอักษร Font </title>
</head>
<body>
ตัวอักษรคือตัวอักษรเพลง: <font size = 5> qinyuanchun · changsha-mao zedong </font> <br />
ตัวอักษรอยู่ใน Kaishi: <font size = 5> qinyuanchun · changsha-mao zedong </font> <br />
ตัวอักษรเป็นตัวหนา: <font size = 5> qinyuanchun · changsha-mao zedong </font> <br />
ตัวอักษรคือ lishu: <font size = 5> qinyuanchun · changsha-mao zedong </font>
</body>
</html>
ป้อน http: //localhost/font_face.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.9
รูปที่ 4.9 การตั้งค่าแบบอักษร
ผู้เขียนกำหนดขนาดข้อความของแบบอักษรที่แก้ไขไว้เป็นหมายเลข 5 เพื่อให้ผู้อ่านดู
4.2.5 ทำให้ข้อความเอียงการใช้แท็กคู่ <i> </i> สามารถเอียงข้อความที่จะนำไปใช้เพื่อให้ได้เอฟเฟกต์พิเศษเช่นวันที่ของบทความ <em> </em> เรียกว่าแท็กเน้นและตัวเอียง ปัจจุบันมีการใช้งานบ่อยกว่า <i> </i> แท็ก วิธีการเขียนมีดังนี้:
<i> นี่คือข้อความตัวเอียง </i>
<em> นี่เป็นตัวเอียง </em>
4.2.6 สร้างข้อความเป็นตัวหนาการใช้แท็กคู่ <b> </b> สามารถสร้างข้อความที่ใช้เป็นตัวหนาทำให้ข้อความสะดุดตามากขึ้นเช่นส่วนชื่อของบทความ <strong> </strong> เรียกว่าเน้นเป็นพิเศษบนฉลากและมันก็เป็นตัวหนาในข้อความ ปัจจุบันใช้บ่อยกว่าแท็ก <b> </b> วิธีการเขียนมีดังนี้:
<b> นี่คือข้อความตัวหนา </b>
<strong> นี่เป็นข้อความตัวหนา </strong>
4.2.7 ขีดเส้นใต้ข้อความใช้แท็กคู่ <u> </u> เพื่อเพิ่มขีดความสามารถของข้อความที่ใช้ ต่อไปนี้เป็นตัวอย่างที่ครอบคลุมของข้อความเอียงตัวหนาและขีดเส้นใต้ สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory ชื่อ Font_style.htm และเขียนโค้ดตามที่แสดงในรหัส 4.10
รหัส 4.10 การตั้งค่าการปรับเปลี่ยนข้อความ: font_style.htm
<html>
<head>
<title> การตั้งค่าการดัดแปลงแบบอักษร </title>
</head>
<body>
<font size = 5> italics: <em> qinyuanchun · changsha-mao zedong </em> <br />
ตัวหนา: <strong> qinyuanchun · Changsha-mao zedong </strong> <br />
ขีดเส้นใต้: <u> qinyuanchun · Changsha-mao zedong </u> <br />
ขีดเส้นใต้ตัวเอียงตัวเอียง: <em> <strong> <u> qinyuanchun · Changsha-Mao Zedong </u> </strong> </em> </em> </font>
</body>
</html>
ป้อน http: //localhost/font_style.htm ในแถบที่อยู่ของเบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.10
รูปที่ 4.10 การตั้งค่าการดัดแปลงแบบอักษร
ผู้เขียนตั้งขนาดข้อความทั้งหมดใน <body> </body> เป็นหมายเลข 5 เพื่อให้ผู้อ่านดู
- หมายเหตุ: เมื่อแท็กหลายแท็กมีข้อความชิ้นเดียวกันลำดับการรวมของพวกเขาจะไม่สามารถปรับได้ไม่ถูกต้อง
4.2.8 การใช้รูปแบบหลายชื่อในบทความเว็บเพื่อเน้นความสำคัญของชื่อรูปแบบของชื่อเรื่องค่อนข้างพิเศษ เทคโนโลยี HTML ปกป้องชุดของแท็กสไตล์สำหรับชื่อเรื่องคือแท็กคู่ <H1> ถึง <H6> และขนาดข้อความแสดงถึงระดับที่แตกต่างกันของชื่อตั้งแต่ขนาดใหญ่ถึงขนาดเล็ก แท็กชื่อเรื่องมีคุณสมบัติซึ่งเป็นเอกสิทธิ์ของบรรทัดเดียวตัวหนาในข้อความและตรงกลางในข้อความ ด้วยวิธีนี้มันเป็นเรื่องง่ายที่จะตั้งชื่อและสามารถตั้งชื่อหลายระดับ สร้างไฟล์เว็บเพจใน D:/ Web/ Directory ชื่อ FONT_H.HTM และเขียนโค้ดตามที่แสดงในรหัส 4.11
รหัส 4.11 การตั้งค่าชื่อเรื่อง: font_h.htm
<html>
<head>
<tite> การตั้งค่าชื่อเรื่อง </title>
</head>
<body>
<h1> ชื่อเรื่องหมายเลข 1 </h1>
<h2> ชื่อเรื่องหมายเลข 2 </h2>
<h3> ชื่อเรื่องหมายเลข 3 </h3>
<h4> ชื่อเรื่องหมายเลข 4 </h4>
<H5> ชื่อเรื่องหมายเลข 5 </h5>
<H6> ชื่อเรื่องหมายเลข 6 </h6>
<H1> นิตยสารฟอร์จูน: ทำไม Google ไม่ตกหลังจากความเจริญรุ่งเรือง? </h1>
<H3> พบปัญหาที่อาจเกิดขึ้น </h3>
<p> & nbsp; & nbsp; & nbsp; & nbsp; ภายในอุตสาหกรรมบางคนเชื่อว่า Google อาจลดลงหลังจากการผูกขาดระยะยาวในตลาดการค้นหาและการโฆษณาทางอินเทอร์เน็ต ... ในขณะเดียวกันแผนใหม่ล่าสุดของ Google เช่น Open Mobile Alliance, แพลตฟอร์มสากลของเว็บไซต์เครือข่ายสังคมออนไลน์ OpenSocial และการลงทุนที่เป็นไปได้ของหลายพันล้านดอลลาร์ในการเสนอราคาสำหรับวงดนตรีความถี่ไร้สายก็ถูกสอบสวนอย่างกว้างขวาง
<H3> จะผูกขาดการค้นหาต่อไป </h3>
<p> & nbsp; & nbsp; & nbsp; & nbsp; บทความล่าสุดบอกว่าหากเครื่องมือค้นหาที่ดีขึ้นปรากฏขึ้นผู้คนจะยอมแพ้ใน Google โดยไม่ลังเล แต่ถึงแม้ว่าจะมีเครื่องมือค้นหาที่ดีกว่า แต่ Google ก็ยังสามารถยืนหยัดได้ในขณะที่ ... ในกรณีนี้ความเร็วของเว็บไซต์มักจะกลายเป็นกุญแจสำคัญในผลลัพธ์ </p>
</body>
</html>
ป้อน http: //localhost/font_h.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.11
รูปที่ 4.11 การตั้งค่าชื่อเรื่อง
4.2.9 เรียนรู้ที่จะจัดการกับอักขระพิเศษในหน้าเว็บใน HTML อักขระบางตัวมีความหมายพิเศษเช่น <และ> เป็นวงเล็บด้านซ้ายและปิดของแท็กในขณะที่แท็กควบคุมการแสดงผลของ HTML แท็กเองสามารถแยกวิเคราะห์ได้โดยเบราว์เซอร์และไม่สามารถแสดงบนหน้าได้ ดังนั้นจะแสดง <และ> ใน html ได้อย่างไร? HTML ระบุวิธีการเขียนอักขระพิเศษบางอย่างที่จะแสดงบนหน้าเว็บดังแสดงในตารางที่ 4.1
ตารางที่ 4.1 อักขระพิเศษใน HTML
สัญลักษณ์พิเศษ
รหัส HTML
สัญลักษณ์พิเศษ
รหัส HTML
-
& lt;
™ (สัญลักษณ์เครื่องหมายการค้า)
&ซื้อขาย;
-
& gt;
® (สัญลักษณ์ลงทะเบียน)
& reg;
(ความกว้างครึ่งเป็นภาษาอังกฤษ)
& quot;
& ครั้ง;
-
&นิกาย;
© (สัญลักษณ์ลิขสิทธิ์)
&สำเนา;
สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory, ชื่อ String.htm และเขียนรหัส String.htm ดังแสดงในรหัส 4.12
รหัส 4.12 การตั้งค่าอักขระพิเศษ: string.htm
<html>
<head>
<title> การตั้งค่าอักขระพิเศษ </title>
</head>
<body>
<font size = 5>
วิธีแสดงแท็ก: & lt; html & gt; <br />
วิธีการแสดงใบเสนอราคา: "คำคมสองความกว้างครึ่งภาษาอังกฤษ" <br />
วิธีการแสดงเครื่องหมายการค้า: & Trade; <br />
วิธีแสดงสัญลักษณ์การลงทะเบียน: & reg; <br />
วิธีแสดงสัญลักษณ์ลิขสิทธิ์: & copy; <br />
show & sect; <br />
การแสดง & เวลา;
</font>
</body>
</html>
ป้อน http: //localhost/string.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.12
รูปที่ 4.12 การตั้งค่าอักขระพิเศษ
- คำอธิบาย: สัญลักษณ์ต้องแสดงแยกต่างหาก & ต้องใช้กับรหัส & amp;
4.2.10 วิธีการเพิกเฉยต่อการแยกเบราว์เซอร์ของ HTML อย่างสะดวกยิ่งขึ้นหากคุณสร้างตัวอย่างโค้ด HTML คล้ายกับหนังสือเล่มนี้บนหน้าเว็บคุณอาจต้องแปลง <และ> ทั้งหมดเป็น & lt; และมันจะดูลำบากมากขึ้น <PlainText> และ <xmp> </xmp> ในรหัส HTML สามารถแก้ปัญหานี้ได้อย่างง่ายดาย
<PlainText> เป็นแท็กเดียว เมื่อแทรกลงในรหัส HTML แท็ก HTML ทั้งหมดหลังจากนั้นไม่ถูกต้อง นั่นคือเบราว์เซอร์ไม่ได้แยกวิเคราะห์แท็ก HTML ทั้งหมดหลังจาก <PlainText> และแสดงโดยตรงบนหน้า
<xmp> </xmp> เป็นแท็กคู่ซึ่งจะทำให้แท็กในเนื้อหามีเพียงการใช้งานและการใช้ <xmp> </xmp> เป็นเรื่องธรรมดามากขึ้น สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory ชื่อ HTML.HTM และเขียนโค้ดตามที่แสดงในรหัส 4.13
รหัส 4.13 ละเว้นการตั้งค่าของแท็ก: html.htm
<html>
<head>
<title> ละเว้นการตั้งค่าของแท็ก </title>
</head>
<body>
<H2> qinyuanchun · Changsha </h2>
<XMP> เป็นอิสระจากฤดูใบไม้ร่วงที่หนาวเย็น <strong> ไปทางเหนือของแม่น้ำ Xiangjiang </strong> หัวหน้าเกาะออเรนจ์ <br /> ดูที่ภูเขาสีแดงและป่าถูกย้อม <br /> แม่น้ำเป็นสีเขียวและใสและเรือหลายร้อยลำแข่งขันกันเพื่อกระแสไฟฟ้า </u> <br/> </xmp>
นกอินทรีโจมตีท้องฟ้า, ปลาว่ายน้ำที่ก้นตื้นและสายพันธุ์ทุกชนิดแข่งขันกันเพื่ออิสรภาพในท้องฟ้าน้ำค้างแข็ง <br /> เมื่อฉันเศร้าเกี่ยวกับดินแดนอันกว้างใหญ่ใครเป็นผู้รับผิดชอบต่อการขึ้น ๆ ลง ๆ ? <br />
<plantext>
ฉันนำคู่รักหลายร้อยคู่เดินทางและฉันจำได้ว่าปีที่ผ่านมาอันรุ่งโรจน์ <br /> เพื่อนร่วมชั้นยังเด็กในนายกรัฐมนตรีของพวกเขา; <br /> นักวิชาการเต็มไปด้วยความกระตือรือร้นและความกล้าหาญ <br /> บอกประเทศและสร้างแรงบันดาลใจคำ <br /> ปุ๋ยคอกของสิ่งสกปรกเป็นหมื่นครัวเรือนในตอนนั้น <br /> คุณเคยจำได้ไหมว่าเมื่อคุณกระแทกน้ำตรงกลางคลื่นจะหยุดเรือบิน!
</body>
</html>
ป้อน http: //localhost/string.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.13
รูปที่ 4.13 ละเว้นการตั้งค่าของแท็ก
4.2.11 วิธีการดัดแปลงข้อความอื่น ๆเพื่อตอบสนองความต้องการของฟิลด์ที่แตกต่างกัน HTML มีแท็กอื่น ๆ ที่แก้ไขข้อความ สิ่งที่ใช้กันมากที่สุดคือฉลากรูปแบบตัวยกและฉลากรูปแบบตัวห้อย ในบางกรณีคุณยังต้องใช้เอฟเฟกต์การลบและคุณสามารถใช้แท็ก HTML Mid-Cribing
- แท็กรูปแบบตัวยกเป็นแท็กคู่ <sup> </up> ซึ่งส่วนใหญ่ใช้เพื่อเป็นตัวแทนของเลขชี้กำลังทางคณิตศาสตร์เช่นสี่เหลี่ยมจัตุรัสหรือลูกบาศก์เมตรของจำนวนหนึ่ง
- ฉลากรูปแบบตัวห้อยเป็นฉลากคู่ <ub> </ub> ซึ่งส่วนใหญ่ใช้สำหรับการเพิ่มความคิดเห็นและการแสดงพื้นฐานทางคณิตศาสตร์
-ฉลากกลางคะแนนคือสองฉลาก <strike> </strike> ซึ่งส่วนใหญ่ใช้สำหรับเอฟเฟกต์การลบ
สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory ชื่ออื่น ๆ htm และเขียนรหัสดังแสดงในรหัส 4.14
รหัส 4.14 การตั้งค่าแท็กการปรับเปลี่ยนอื่น ๆ : อื่น ๆ . htm
<html>
<head>
<title> การตั้งค่าอื่น ๆ สำหรับการแก้ไขแท็ก </title>
</head>
<body>
<font size = 5>
qinyuanchun <sup> Changsha </up>! <br />
การเป็นตัวแทนของดัชนีทางคณิตศาสตร์: 2 <up> 3 < /sup> = 8, 100 <up> 2 < /sup> = 10,000 <br /> <hr />
Qinyuanchun <ub> Changsha </ub>! <br />
การเป็นตัวแทนของหมายเลขพื้นฐานทางคณิตศาสตร์: log <ub> 3 < /sub> 81 = 4, log <ub> 5 < /sub> 125 = 3 <br /> <hr />
เอฟเฟกต์การลบ: <strike> ฉันถูกลบ </strike>
</font>
</body>
</html>
ป้อน http: //localhost/other.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.14
รูปที่ 4.14 การตั้งค่าแท็กการปรับเปลี่ยนอื่น ๆ