Course โมดูล 3 - Lecture: แท็ก HTML แรก

3.1 แท็ก html

หากคุณกำลังอ่านข้อความนี้ สันนิษฐานว่าในอนาคตคุณจะทำงานเป็น Java Developer หรือ Full Stack Java Developer คุณจะแทบไม่ได้เขียนเอกสาร HTML แต่ คุณ จะต้องอ่านบ่อยๆ นี่เป็นวิธีการทำงานของโลก ดังนั้นคุณต้องเข้าใจว่าเอกสาร HTML ถูกจัดเรียงอย่างไร

จุดเริ่มต้นของเอกสาร HTML คืออะไร? เอกสาร HTML แต่ละรายการมีโครงสร้างที่ประกอบด้วยแท็กที่ซ้อนกันสามแท็ก: html, headและ bodyนี่คือตัวอย่างมาตรฐาน:

<!DOCTYPE html>
<html>
    <head>
        Service tags
    </head>
    <body>
        Main document
    </body>
</html>

ทุกสิ่งที่เบราว์เซอร์แสดงอยู่ในแท็กคู่body(เนื้อหาเอกสาร) ภายในแท็กheadคือแท็กที่มีบริการ / ข้อมูลเสริมสำหรับเบราว์เซอร์

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

หรือ ในทางตรงกันข้ามXHTML = XML+HTMLมีมาตรฐานซึ่งมีกฎที่เข้มงวดมากกว่ากฎปกติ HTMLแต่ข้อมูลดังกล่าวจะเป็นประโยชน์กับคุณเมื่อคุณตัดสินใจเขียนเบราว์เซอร์ของคุณเอง หรืออย่างน้อยก็เป็นของคุณHTML-parserเอง

3.2 แท็กส่วนหัว

ภายในแท็กheadแท็กต่อไปนี้มักจะอยู่: title, meta, style, ...

แท็ก<title> ระบุชื่อของเอกสารที่แสดงในแท็บเบราว์เซอร์

แท็ก<meta>ใช้เพื่อกำหนดข้อมูลบริการต่างๆ ตัวอย่างเช่น คุณสามารถช่วยให้เบราว์เซอร์เข้าใจการเข้ารหัสของเอกสาร HTML (มีข้อความล้วน หากคุณจำได้)


<html>
    <head>
        <title> Escape character</title>
           <meta charset="utf-8" />
   </head>
    <body>
 
    </body>
</html>

3.3 แท็ก body, p, b

แท็ก<body>ประกอบด้วยข้อความ html ทั้งหมดที่เบราว์เซอร์จะแสดง แท็กที่ง่ายที่สุดสำหรับการแสดงเอกสารคือ: <h1>, <p>, <b>,<br>

<h1>- นี่คือแท็กคู่ ช่วยให้คุณสามารถตั้งชื่อหน้า / บทความของคุณได้ หากบทความของคุณยาวและคุณต้องการหัวข้อย่อย คุณสามารถใช้แท็กสำหรับกรณีนี้<h2>และ<h3>ต่อไปจนกว่า<h6>

ตัวอย่าง:


<body>
     <h1>Cats</h1>
          <h2> Description of cats</h2>
            detailed description of cats
          <h2> Origin of cats</h2>
              Information about the origin of cats.
          <h2> Cat paws</h2>
              Huge article about the paws of cats
</body>

หากบทความของคุณมีขนาดใหญ่และคุณต้องการทำให้อ่านง่ายขึ้นโดยแบ่งเป็นย่อหน้า คุณจะต้องมีแท็กคู่ <p>(จากคำว่า ย่อหน้า) สำหรับสิ่งนี้ เพียงห่อข้อความในแท็ก<p>แล้ว</p>เบราว์เซอร์จะแสดงเป็นย่อหน้าแยกต่างหาก

ความสนใจ! เบราว์เซอร์จะไม่สนใจการขึ้นบรรทัดใหม่และ/หรือการเว้นวรรคเพิ่มเติมในข้อความของคุณ หากคุณต้องการเพิ่มตัวแบ่งบรรทัด ให้ใส่แท็กเดียว<br>(จาก บรรทัด br eak) ลงในข้อความ

ส่วนที่ดีที่สุดคือการเน้นข้อความเป็นตัวหนา หากคุณต้องการทำให้ข้อความเป็นตัวหนา ให้ห่อด้วยแท็ก<b> </b>(จากbเก่า)