Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แท็กชื่อ HTML:คำแนะนำทีละขั้นตอน

แท็ก HTML กำหนดชื่อเรื่องของหน้าเว็บ ชื่อนี้ปรากฏในแถบแท็บบนเบราว์เซอร์ของคุณและเมื่อคุณเพิ่มหน้าในรายการบุ๊กมาร์กของคุณ หน้าเว็บทั้งหมดควรมีแท็ก <title></em> </P> <hr class="wp-block-separator"> <p> เมื่อคุณสร้างหน้าเว็บ คุณจะต้องระบุชื่อสำหรับหน้าเว็บนั้น ตัวอย่างเช่น สมมติว่าคุณกำลังสร้างหน้าแรกสำหรับเว็บไซต์ร้านเบเกอรี่ในท้องถิ่น คุณอาจต้องการให้ชื่อร้านเบเกอรี่ปรากฏเป็นชื่อหน้าเว็บ</P> <p> นั่นคือสิ่งที่ <em><title></em> แท็ก HTML เข้ามา <em><title></em> tag กำหนดชื่อเรื่องของเอกสารในรูปแบบ HTML และวางไว้ภายในส่วนหัวของหน้าเว็บ บทแนะนำนี้จะกล่าวถึงความสำคัญของ <em><title></em> . โดยอ้างอิงถึงตัวอย่าง และวิธีใช้งานในโค้ดของคุณ</P> <h2>ทบทวนหัว HTML</h2> <p> ใน HTML <em><head></em> องค์ประกอบใช้เพื่อเก็บองค์ประกอบส่วนหัว องค์ประกอบเหล่านี้ให้ข้อมูลเพิ่มเติมเกี่ยวกับหน้าเว็บ เช่น ไอคอนที่ควรปรากฏสำหรับหน้าเว็บ</P> <p> รวมองค์ประกอบใน <em><head></em> ส่วนอธิบายข้อมูลหลักเกี่ยวกับเอกสาร พวกเขาสามารถชี้เบราว์เซอร์ไปที่สไตล์ชีตและสคริปต์ที่ใช้ในเอกสาร (ถ้ามี)</P> <h2>HTML <title></h2> <p> HTML <em><title></em> tag คือการกำหนดชื่อเรื่องของเอกสาร แท็กนี้ปรากฏใน <em><head></em> แท็ก แท็กนี้ควรสรุปวัตถุประสงค์ของหน้าเว็บ คุณต้องระบุแท็ก <title> หนึ่งแท็กต่อหน้า</P> <p> มาดูไวยากรณ์ของแท็กนี้กัน:</P> <pre><head> <title>Home | Career Karma</title> </head></pre> <p> แท็ก <title> มีทั้งแท็กเปิดและแท็กปิด ระหว่างแท็กเหล่านี้ เราได้เขียนชื่อสำหรับหน้าเว็บ</P> <p> 81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้</P> <p> ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก</P> <p> ข้อความในแท็ก <title> ของเราไม่ปรากฏบนหน้าเว็บ นี่เป็นเพราะแท็ก <title> ของเราอยู่ใน <head> แทนที่จะเป็นแท็ก <body> บนหน้าเว็บของเรา</P> <p> ชื่อด้านบนของเรานั้นแข็งแกร่งเพราะบอกผู้ใช้ว่าพวกเขากำลังดูหน้าใดอยู่ นอกจากนี้เรายังระบุชื่อไซต์เพื่อป้องกันความสับสนหากผู้ใช้เปิดหลายแท็บในมุมมองที่มีชื่อ "หน้าแรก"</P> <p> ชื่อเรื่องของคุณควรชัดเจน อ่านง่าย และไม่ยาวเกินไป พิจารณาตัวอย่างชื่อเรื่องต่อไปนี้:</P> <ul> <li>บล็อก – กรรมในอาชีพ</li> <li>ติดต่ออาชีพกรรม</li> <li>บล็อกอาชีพ Karma</li> </ul> <p> ชื่อทั้งหมดเหล่านี้สื่อถึงวัตถุประสงค์ของหน้า ชื่อของคุณไม่ควรยาวเกินไปเพราะชื่อเรื่องมีพื้นที่จำกัดในแถบแท็บเท่านั้น</P> <p> แท็ก <title> รองรับแอตทริบิวต์ส่วนกลางทั้งหมดใน HTML5 แท็กนี้ได้รับการสนับสนุนโดยเบราว์เซอร์สมัยใหม่ที่สำคัญทั้งหมด แท็กชื่อไม่มีแอตทริบิวต์ HTML เฉพาะองค์ประกอบ</P> <h2>ตัวอย่างแท็กชื่อ HTML</h2> <p> องค์ประกอบชื่อ HTML ถูกกำหนดภายใน <em><head></em> แท็กบนหน้า HTML สมมติว่าเรากำลังสร้างหน้าเว็บสำหรับร้านเบเกอรี่ในท้องถิ่นของเรา Joseph Abrams &Sons เรากำลังสร้างโฮมเพจ และเราต้องการให้ชื่อร้านเบเกอรี่ปรากฏในชื่อเว็บไซต์</P> <p> เราสามารถใช้รหัสต่อไปนี้เพื่อตั้งชื่อเพจของเราเป็น “<em>Joseph Abrams &Sons.</em> “:</P> <pre><head> <title>Joseph Abrams & Sons.</title> </head></pre> <p> เมื่อเปิดหน้าเว็บสำหรับเว็บไซต์ของเรา ชื่อของหน้าจะถูกตั้งค่าเป็น “<em>Joseph Abrams &Sons</em> “.</P> <p> สมมติว่าเรากำลังสร้างหน้าติดต่อสำหรับร้านเบเกอรี่ในท้องถิ่นของเราตั้งแต่ก่อนหน้านี้ เราอาจต้องการใช้ชื่อเรื่องว่า “<em>Contact | โจเซฟ อับรามส์ แอนด์ ซันส์</em> “. ชื่อนี้เรียบง่ายและอธิบายวัตถุประสงค์ของหน้าเว็บของเราได้เป็นอย่างดี</P> <h2>ทำไมคุณจึงควรใช้แท็ก <title></h2> <p> มีสาเหตุหลายประการที่ทำให้การระบุแท็กชื่อเอกสารมีความสำคัญ</P> <p> อันดับแรก <em><title></em> tag แสดงชื่อหน้าในแถบชื่อเรื่องของเว็บเบราว์เซอร์ ตัวอย่างเช่น ชื่อของหน้านี้คือ “<em>HTML Title Tag:A How-To Guide | อาชีพกรรม</em> “. ปรากฏในชื่อแท็บของเว็บไซต์นี้</P> <p> ประการที่สอง <em><title></em> แท็กจะติดป้ายกำกับหน้าเว็บเมื่อบุ๊กมาร์กหรือบันทึกเป็นรายการโปรดในเว็บเบราว์เซอร์ของผู้ใช้ ชื่อที่คุณระบุจะเป็นชื่อที่บันทึกโดยอัตโนมัติ หากคุณไม่ได้ใช้ชื่อที่เหมาะสมสำหรับหน้าเว็บ ผู้ใช้อาจพบว่าเป็นการยากที่จะค้นพบหน้าของคุณในบุ๊กมาร์ก</P> <p> เครื่องมือค้นหาขึ้นอยู่กับเนื้อหาของแท็กชื่อ ชื่อที่ระบุในแท็กชื่อจะเป็นพาดหัวของหน้าเว็บในหน้าผลลัพธ์ของเครื่องมือค้นหา (SERP) SERP คือรายการในหน้าผลการค้นหา</P> <p> นอกจากนี้ เนื้อหาของ <em><title></em> แท็กใช้เพื่อกำหนดหัวข้อของหน้าเว็บโดยเครื่องมือค้นหา</P> <p> ตอนนี้เรารู้แล้วว่า <em><title></em> แท็กมีความสำคัญ คุณอาจจะถามว่า:ฉันจะใช้แท็กชื่อ HTML ได้อย่างไร มาตอบคำถามกันเถอะ</P> <h2>บทสรุป</h2> <p> <em><title></em> tag คือระบุชื่อของเอกสาร HTML ชื่อนี้ปรากฏในชื่อแท็บของเว็บเบราว์เซอร์ นอกจากนี้ยังใช้โดยเครื่องมือค้นหาเมื่อประมวลผลหน้าเว็บเพื่อตัดสินใจเกี่ยวกับหัวข้อและหัวข้อ</P> <p> บทช่วยสอนนี้กล่าวถึงพื้นฐานของ HTML <em><title></em> . โดยอ้างอิงจากตัวอย่าง แท็ก ตอนนี้คุณพร้อมที่จะเริ่มใช้แท็กชื่อเหมือนผู้เชี่ยวชาญ HTML แล้ว!</P> <p> คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเข้ารหัสใน HTML หรือไม่? ดูคู่มือวิธีการเรียนรู้ HTML ของเรา คู่มือนี้ประกอบด้วยรายการทรัพยากรการเรียนรู้ชั้นนำและหลักสูตรสำหรับนักพัฒนาระดับเริ่มต้นและระดับกลาง คุณยังจะได้พบกับหนังสือชั้นนำสำหรับอ่านเกี่ยวกับหัวข้อ HTML</P> <br> </article> <div class="ad ad5"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4480737146802772" crossorigin="anonymous"></script><!-- computer.wsxdn --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4480737146802772" data-ad-slot="4467655591" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <section id="turn-page" class="t-over"> <div class="f-start f-align"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkPrevArticle' href='https://th.wsxdn.com/db044w/zx451s/1004038919.html' >HTML Select:A How-To Guide </a> </div> <div class="f-start f-align"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkNextArticle' href='https://th.wsxdn.com/db044w/zx451s/1004038921.html' >HTML ขึ้นบรรทัดใหม่โดยใช้และ </a> </div> </section> <section class="box1-3"> <ol class="f-between"> <li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004064290.html" class="title"> <p class="r-over r-over-2" title="HTML <html> แท็ก "> HTML <html> แท็ก </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004064313.html" class="title"> <p class="r-over r-over-2" title="HTML <q> แท็ก "> HTML <q> แท็ก </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004064347.html" class="title"> <p class="r-over r-over-2" title="HTML <b> แท็ก "> HTML <b> แท็ก </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004064399.html" class="title"> <p class="r-over r-over-2" title="HTML <dl> แท็ก "> HTML <dl> แท็ก </p> </a> </div> </li> </ol> </section> </section> <aside class="box-r"> <section class="box4-1"> <strong> HTML </strong> <ol> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004038891.html" title="คำแนะนำทีละขั้นตอนสำหรับแอตทริบิวต์ HTML "> <p class="r-over r-over-2">คำแนะนำทีละขั้นตอนสำหรับแอตทริบิวต์ HTML </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004038893.html" title="ฝังวิดีโอ HTML:คำแนะนำทีละขั้นตอน "> <p class="r-over r-over-2">ฝังวิดีโอ HTML:คำแนะนำทีละขั้นตอน </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004038894.html" title="รายการ HTML:คำแนะนำทีละขั้นตอน "> <p class="r-over r-over-2">รายการ HTML:คำแนะนำทีละขั้นตอน </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004038895.html" title="ตาราง HTML:คำแนะนำทีละขั้นตอน "> <p class="r-over r-over-2">ตาราง HTML:คำแนะนำทีละขั้นตอน </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004038897.html" title="ปุ่ม HTML:คำแนะนำทีละขั้นตอน "> <p class="r-over r-over-2">ปุ่ม HTML:คำแนะนำทีละขั้นตอน </p> </a> </li> </ol> </section> <ul> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004063721.html" class="i-text"><p class="r-over r-over-3">กฎแนวนอนในหน้า HTML คืออะไร </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004063722.html" class="i-text"><p class="r-over r-over-3">จะใช้แท็กชื่อในหน้า HTML ได้อย่างไร? </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004064277.html" class="i-text"><p class="r-over r-over-3">HTML <dd> แท็ก </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004064289.html" class="i-text"><p class="r-over r-over-3">HTML <i> แท็ก </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004064291.html" class="i-text"><p class="r-over r-over-3">HTML <hr> แท็ก </p></a> </li> </ul> <ul class="types f-between"> <li><a class='childclass' href='https://th.wsxdn.com/db044w/hf444z/' target="_self">การเขียนโปรแกรม C</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/bz445u/' target="_self">C++</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/tr446l/' target="_self">Redis</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/rp447j/' target="_self">การเขียนโปรแกรม BASH</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/wu448o/' target="_self">Python</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/nl449f/' target="_self">Java</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ig450a/' target="_self">ฐานข้อมูล</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/zx451s/' target="_self">HTML</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ec452w/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/db453v/' target="_self">การเขียนโปรแกรม</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/if454a/' target="_self">CSS</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ge455y/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/xv456p/' target="_self">SQL</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/jh457b/' target="_self">IOS</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/om458g/' target="_self">Android</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/mk459f/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/rp460j/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/qn461i/' target="_self">C#</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/jh465b/' target="_self">PHP</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/kh471c/' target="_self">SQL Server</a></li> </ul> </aside> </section> <footer> <section class="msg f-center container"> <span class="f-start"> ลิขสิทธิ์ © <a href="https://th.wsxdn.com">https://th.wsxdn.com</a> สงวนลิขสิทธิ์ </span> </section> </footer> </body> </html>