คู่มือ HTML สรุปสำหรับผู้เริ่มต้น

อัปเดตล่าสุดเมื่อ 15 พฤษภาคม 2018

เมื่อยี่สิบปีก่อนแม้ว่าคุณจะเป็นเพียงแค่บล็อกงานอดิเรกคุณก็ต้องรู้จักเว็บโค้ดเพื่อป้องกันตัวเองหรือเพิ่มฟังก์ชันง่ายๆลงในไซต์ของคุณ แต่ตอนนี้มีบรรณาธิการและปลั๊กอินมากมายที่มีอยู่ว่าแม้จะรู้ว่าพื้นฐาน HTML ไม่จำเป็นต้องใช้อีกต่อไป ทำเว็บไซต์ or เรียกใช้บล็อก.

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

และหากคุณกำลังประสบกับรูปแบบเนื้อหาไม่ถูกต้องความรู้ด้าน HTML จะช่วยให้คุณกลับมาได้อีกครั้ง

ต่อไปนี้คือคู่มือ HTML HTML สำหรับนักเขียนบล็อกและเจ้าของธุรกิจออนไลน์ที่ไม่ใช้เทคโนโลยี

HTML เป็นหัวใจสำคัญของอินเทอร์เน็ตในปัจจุบัน ล้านเว็บไซต์ร่วมกันจัดตั้งอินเทอร์เน็ต HTML เป็นส่วนช่วยในการสร้างเว็บไซต์เหล่านี้

การเริ่มต้นถาม - ตอบ

1- HTML คืออะไร?

HTML เป็นคำย่อของ Hyper Tต่อ MArkupe Language เป็นภาษามาตรฐานสำหรับการติดแท็กเนื้อหาสำหรับเว็บเบราเซอร์

HTML แสดงโดย "Elements" องค์ประกอบเป็นที่รู้จักกันว่า "แท็ก"

2- ทำไม HTML จึงจำเป็น?

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

นั่นคือเหตุผลที่คุณต้องการ HTML

3- เป็นกรณีที่เป็น HTML หรือไม่?

HTML ไม่สำคัญต่อกรณี แต่วิธีที่ดีที่สุดคือการเขียน HTML ด้วยกรณีที่เหมาะสม

ขั้นตอนในการสร้างไฟล์ HTML แรกของคุณ

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

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

ฉันใช้และแนะนำ Notepad + + (ฟรีและโอเพ่นซอร์ส) สำหรับการเขียนภาษาบนเว็บ มีบรรณาธิการคนอื่น ๆ ที่คุณอาจใช้เช่นกัน Sublime Text, Atom เป็นต้น

นี่คือสิ่งที่คุณต้องทำ:

  1. ติดตั้งโปรแกรมแก้ไขโค้ด
  2. เปิดขึ้น
  3. สร้างไฟล์ใหม่
  4. บันทึกเป็นไฟล์. html

คุณพร้อมที่จะไปแล้ว!


Go Top

1- สวัสดีชาวโลก!

คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ HTML ใหม่และบันทึก ตอนนี้รันบนเว็บเบราเซอร์ของคุณ

รหัส:

<! DOCTYPE html> <html> <head> <title> หน้าเว็บแรกของฉัน </title> </head> <body> <body> <p> Hello World! </p> </body> </html>

Output:

ยินดีด้วย! คุณได้สร้างไฟล์ HTML แรกของคุณแล้ว คุณไม่จำเป็นต้องเข้าใจในตอนนี้ เราจะกล่าวถึงในไม่ช้า

ทำความเข้าใจเกี่ยวกับโครงสร้าง HTML

ทุกไฟล์ HTML มีโครงสร้างที่เปลือยเปล่าทั่วไป นี่คือที่ทุกอย่างเริ่มต้น และทุกหน้าใหญ่ของรหัสจะมาถึงโครงสร้างนี้หลังจากตัดแต่ง

ลองมาทำความเข้าใจกับโค้ด "Hello World!" องค์ประกอบต่อไปนี้เป็นส่วนที่จำเป็นสำหรับไฟล์ HTML แต่ละไฟล์

  • <! DOCTYPE html> = เป็นการประกาศไปยังเบราว์เซอร์ว่าเป็นไฟล์ HTML คุณต้องระบุก่อนแท็ก <html>
  • <html> </ html> = นี่เป็นองค์ประกอบหลักของไฟล์ HTML ทุกสิ่งที่คุณเขียนไประหว่าง <html> และ </ html>
  • <head> </ head> = นี่เป็นส่วนของข้อมูลเมตาสำหรับเบราเซอร์ รหัสภายในแท็กนี้ไม่มีการแสดงภาพ
  • <body> </ body> = นี่คือส่วนที่เว็บเบราว์เซอร์แสดงผล สิ่งที่คุณเห็นในเว็บไซต์คือการแสดงโค้ดระหว่าง <body> และ </ body>


Go Top

2- แท็ก HTML

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

แท็ก HTML มักจะมีการเปิดและแท็กปิด แท็กเปิดมีคำหลักล้อมรอบด้วยสัญลักษณ์น้อยกว่า (<) และมากกว่า (>) แท็กปิดมีทุกอย่างเหมือนกัน แต่เป็นเครื่องหมายทับ (/) หลังเครื่องหมายน้อยกว่า (<)

(2a) ส่วนหัว

แท็กหัวทั้งหมดไประหว่าง <head> และ </ head> มีข้อมูลเมตาสำหรับเว็บเบราเซอร์และเครื่องมือค้นหา พวกเขาโดยทั่วไปไม่มีภาพออก

<title> </ title>

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

รหัส:

<title> หน้าแรกของฉัน </ title>
แท็กชื่อจะปรากฏที่ด้านบนของเบราเซอร์

<link>

แท็กลิงก์เชื่อมโยงหน้า HTML ของคุณกับแหล่งข้อมูลภายนอก การใช้งานหลักคือการเชื่อมโยงเพจ HTML กับ CSS stylesheets เป็นแท็กปิดด้วยตนเองและไม่จำเป็นต้องมีการสิ้นสุด </ link> ที่นี่ rel หมายถึงความสัมพันธ์กับไฟล์และ src หมายถึงแหล่งที่มา

รหัส:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<meta>

Meta เป็นอีกหนึ่งแท็กปิดเองที่ให้ข้อมูลเมตาของไฟล์ html เครื่องมือค้นหาและบริการเว็บอื่น ๆ ใช้ข้อมูลเหล่านี้ ต้องใช้เมตาแท็กหากต้องการเพิ่มประสิทธิภาพหน้าเว็บสำหรับเครื่องมือค้นหา

รหัส:

<meta name = "description" content = "นี่คือคำอธิบายสั้น ๆ ที่เครื่องมือค้นหาแสดง"

<script> </ script>

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

รหัส:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

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

รหัส:

<noscript> <p> อนิจจา! สคริปต์ถูกปิดใช้งาน </ p> </ noscript>

(2b) แท็ก Body

แท็ก body ทั้งหมดจะอยู่ระหว่าง <body> และ </ body> พวกเขามีผลภาพ นี่คือที่ทำงานส่วนใหญ่จะทำ คุณต้องใช้แท็กเหล่านี้เพื่อจัดโครงสร้างเนื้อหาในหน้าหลักของคุณ

<h1> </ h1> ถึง <h6> </ h6>

นี่คือแท็กหัวเรื่อง หัวเรื่องที่สำคัญที่สุดถูกติดแท็กด้วย <h1> และอย่างน้อยที่สำคัญกับ <h6> คุณควรใช้พวกเขาในลำดับชั้นที่ถูกต้อง

รหัส:

<h1> นี่คือส่วนหัว h1 </h1> <h2> นี่คือส่วนหัว h2> </h2> <h3> นี่คือ h3> <h3> นี่คือ h4> > นี่คือส่วนหัว h4 </h4> <h5> นี่คือส่วนหัว h5 </h5>

Output:

แท็กการจัดรูปแบบ

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

รหัส:

<p> คุณสามารถเน้นข้อความของคุณได้หลายวิธี </p> <p> คุณสามารถ <strong> ตัวหนา </strong>, <u> ขีดเส้นใต้ </u>, <em> ตัวเอียง </em>, <เครื่องหมาย > mark </mark>, <sub> ตัวห้อย </sub>, <sup> superscript </sup> และอีกมากมาย! </p>

Output:

<! - ->

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

ตัวอย่าง:

<! - <p> คุณสามารถแสดงความคิดเห็นออกรหัสใด ๆ โดยล้อมรอบพวกเขาด้วยวิธีนี้ </ p> ->

(2c) แท็ก HTML ที่สำคัญอื่น ๆ

<a> </a>

Anchor เป็นแท็กที่ทรงคุณค่าซึ่งใช้กันเกือบทุกแห่ง คุณจะไม่เห็นหน้าเว็บออนไลน์ใด ๆ โดยไม่มีลิงก์ anchor อย่างน้อยหนึ่งลิงก์

โครงสร้างเหมือนกัน มีช่องเปิด <a> และส่วนที่ปิด </a> ข้อความที่คุณต้องการยึดจะอยู่ระหว่าง <a> และ </a>

มีคุณลักษณะบางอย่างที่กำหนดตำแหน่งและวิธีการที่ผู้ใช้ไปหลังจากคลิกที่นี่

  • ahref = "" = กำหนดลิงก์ปลายทาง ลิงค์ไประหว่างเครื่องหมายคำพูดคู่
  • target = "" = กำหนดว่า URL จะเปิดขึ้นในแท็บเบราเซอร์ใหม่หรือในแท็บเดียวกัน target = "_ blank" สำหรับแท็บใหม่และ target = "_ self" สำหรับการเปิดในแท็บเดียวกัน
  • rel = "" = กำหนดความสัมพันธ์ของหน้าปัจจุบันกับหน้าที่เชื่อมโยง หากคุณไม่เชื่อถือหน้าเชื่อมโยงคุณสามารถกำหนด rel = "nofollow" ได้

รหัส:

<p> <a target="_blank" href="https://www.google.com/"> คลิกที่นี่ </a> เพื่อไปที่ Google มันจะเปิดในแท็บใหม่ </p> <p> <a target="_self" href="https://www.google.com/"> คลิกที่นี่ </a> มันจะนำคุณไปยัง Google แต่จะเปิดในแท็บปัจจุบัน </p>

Output:

<img />

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

<img /> เป็นแท็กที่ปิดเอง ไม่จำเป็นต้องปิดแบบดั้งเดิมเช่น </ img> มีคุณลักษณะบางอย่างที่คุณต้องรู้ก่อนจึงจะสามารถใช้งานได้อย่างถูกต้อง

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

ตัวอย่าง:

<p> นี่คือ Googleplex ในเดือนสิงหาคม 2014 </p> <p> ภาพนี้มีความกว้างของพิกเซล 500 และความสูงของพิกเซล 375 </p> <img src = "https: //upload.wikimedia org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" สำนักงานใหญ่ของ Google ในเดือนสิงหาคม 2014 "width =" 500 "height =" 375 "/>

Output:

เคล็ดลับ: ต้องการแทรกภาพที่สามารถคลิกได้หรือไม่? ตัดรหัสภาพด้วยแท็ก <a> ดูว่ามันจะไปอย่างไร

<ol> </ ol> หรือ <ul> </ ul>

แท็กรายการคือการสร้างรายการของไอเท็ม <ol> หมายถึงรายการสั่งซื้อ (รายการที่มีลำดับเลข) และ <ul> หมายถึงรายการที่ไม่ได้จัดเรียง (bullet points)

รายการที่อยู่ภายใน <ol> หรือ <ul> ถูกแท็กด้วย <li> </ li> li หมายถึงรายการ คุณสามารถมี <li> ได้มากเท่าที่คุณต้องการภายในแท็กหลัก <ol> หรือ <ul>

รหัส:

<p> นี่คือรายการที่ได้รับคำสั่ง: </p> <ol> <li> รายการ 1 </li> <li> รายการ 2 </li> <li> รายการ 3 รายการ </li> </ol> <p> นี่คือรายการที่ไม่ได้เรียงลำดับ: </p> <ul> <li> รายการ 1 </li> <li> รายการ 2 </li> <li> รายการ 3 รายการ </li> </ul>

Output:

<table> </ table>

แท็กตารางคือการสร้างตารางข้อมูล มีแท็กระดับภายในที่กำหนดส่วนหัวตารางแถวและคอลัมน์

<table> </ table> คือรหัสแม่แบบด้านนอก ในแท็กนี้ <tr> หมายถึงแถวของตาราง <td> หมายถึงคอลัมน์ตารางและ <th> หมายถึงส่วนหัวของตาราง

รหัส:

<table> <tr> <th> ชื่อ </th> <th> อายุ </th> <th> อาชีพ </th> </tr> <tr> <td> Jo <td> 27 </td> < td> นักธุรกิจ </td> </tr> <tr> <td> แครอล </td> Xtd> 26 </td> <td> พยาบาล </td> </tr> <tr> <td> Simone < / td> <td> 39 </td> <td> ศาสตราจารย์ </td> </tr> </table>

Output:

หมายเหตุ: ค่าภายใน <tr> แรกเป็นส่วนหัว ดังนั้นเราจึงใช้ <th> ซึ่งใช้ผลเป็นตัวหนากับข้อความ

การจัดกลุ่มตาราง

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

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

แท็กการจัดกลุ่มตารางมีดังนี้:

  • <thead> </ thad> = สำหรับการตัดส่วนหัวของตาราง มันจะพิมพ์ไปทุกหน้าแยกของตาราง
  • <tbody> </ tbody> = สำหรับการห่อข้อมูลหลักของตาราง คุณสามารถมี <tbody> ได้เท่าที่คุณต้องการ แท็ก <tbody> หมายถึงกลุ่มข้อมูลที่แยกจากกัน
  • <tfoot> </ tfoot> = สำหรับการตัดข้อมูลส่วนท้ายของตาราง มันจะพิมพ์ไปทุกหน้าแยกของตาราง

โปรดทราบว่าไม่จำเป็นต้องใช้การจัดกลุ่ม คุณสามารถใช้เพื่อสร้างตารางที่ใหญ่กว่าให้อ่านได้ แม้ว่านักพัฒนาซอฟต์แวร์พิเศษบางรายใช้แท็กเหล่านี้เป็นตัวเลือก CSS อย่างชัดเจน

นี่คือวิธีที่เราสามารถจัดกลุ่มตัวอย่างของเราในตาราง <thead>, <tbody> และ <tfoot>:

รหัส:

<table> <thead> <tr> <th> ชื่อ </th> <th> อายุ </th> อาชีพ </th> อาชีพ </th> </tr> </th> </thead> <tbody> <tr> <td> John </td> <td> 27 </td> <td> นักธุรกิจ </td> </tr> <tr> <td> Carol </td> <td> 26 </td> <td> พยาบาล </ td> </tr> <tr> <td> Simone </td> <td> 39 </td> <td> ศาสตราจารย์ </td> </tr> </tr> </t> </t>> <t>> <td> บุคคลทั้งหมด: </td> <td> 3 </td> </tr> </tfoot> </table>

Output:

<form> </ form>

ใช้อิลิเมนต์ฟอร์มเพื่อสร้างฟอร์มการโต้ตอบสำหรับเว็บเพจ แบบฟอร์ม HTML มีองค์ประกอบหลายอย่างติดต่อกัน ตัวอย่างเช่น <label>, <input>, <textarea> เป็นต้น

แอตทริบิวต์ action ในรูปแบบมีความสำคัญมาก จะชี้ไปยังฝั่งเซิร์ฟเวอร์หรือหน้าของ บริษัท อื่นเพื่อประมวลผลข้อมูล สำหรับการประมวลผลคุณต้องกำหนดวิธีการก่อน

คุณสามารถใช้สองวิธีได้หรือโพสต์ รับส่งข้อมูลทั้งหมดในรูปแบบ URL ที่โพสต์ส่งข้อมูลในเนื้อหาของข้อความ

มีหลายรูปแบบสำหรับรูปแบบ ประเภทการป้อนข้อมูลพื้นฐานเป็นข้อความ จะเขียนเป็น <input type = "text"> ประเภทอาจเป็นวิทยุช่องทำเครื่องหมายอีเมลและอื่น ๆ ควรมีอินพุทพิมพ์ส่งที่ด้านล่างเพื่อสร้างปุ่ม submit

<label> ใช้สำหรับสร้างป้ายกำกับและเชื่อมโยงกับอินพุท กฎของการเชื่อมโยงป้ายกำกับกับอินพุทคือค่าที่มีค่าเดียวกันสำหรับแอตทริบิวต์ = "" ของแอตทริบิวต์ label และ id = "" ของอินพุท

รหัส:

<form action = "#"> <label สำหรับ = "ชื่อ"> ชื่อ: </label> <input type = "text" id = "ชื่อ"> <br> <label สำหรับ = "นามสกุล"> นามสกุล: </label> <input type = "text" id = "นามสกุล"> <br> <label สำหรับ = "bio"> Short Bio: </label> <textarea id = แถว "bio" = "10" cols = " 30 "placeholder =" ป้อนประวัติย่อของคุณที่นี่ ... "> </textarea> <br> <label> เพศ: </label> <br> <ฉลากสำหรับ =" ชาย "> ชาย </label> <ประเภทอินพุต = "radio" name = "gender" id = "male"> <br> <label สำหรับ = "female"> หญิง </label> <input type = "radio" name = "gender" id = "female"> <br > <input type = "submit" value = "Submit"> <form>

Output:

หมายเหตุ: ฉันได้ชี้แอ็คชันไปเป็นค่าว่างเนื่องจากไม่ได้เชื่อมต่อกับเซิร์ฟเวอร์ใด ๆ เพื่อประมวลผลข้อมูล


Go Top

3- แอตทริบิวต์ HTML

แอตทริบิวต์เป็นประเภทหนึ่งของการปรับเปลี่ยนสำหรับแท็ก HTML พวกเขาเพิ่มการกำหนดค่าใหม่ลงในแท็ก HTML

แอตทริบิวต์ดูเหมือน attributename = "" และตั้งอยู่ในแท็ก HTML ที่เปิด ค่าของแอตทริบิวต์ไประหว่างเครื่องหมายคำพูดคู่

id = "" and class = ""

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

รหัส:

<h1 class = "heading"> นี่คือหัวข้อหลัก </ h1>

href =””

href ย่อมาจาก Hypertext Reference พวกเขาชี้ผู้ใช้ไปยังลิงก์อ้างอิง แท็ก Anchor <a> ใช้ href เพื่อส่งผู้ใช้ไปยัง URL ปลายทาง

รหัส:

<a href="https://www.google.com/"> Google </a>

src =””

src ย่อมาจาก source กำหนดแหล่งที่มาของสื่อหรือทรัพยากรที่คุณใช้ในไฟล์ HTML แหล่งที่มาอาจเป็น URL ท้องถิ่นหรือบุคคลที่สามก็ได้

รหัส:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt =””

alt หมายถึงทางเลือก เป็นข้อความสำรองที่ใช้งานได้เมื่อองค์ประกอบ HTML ไม่สามารถโหลดได้

รหัส:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "สำนักงานใหญ่ของ Google" />

style =””

style มักใช้ในแท็ก HTML นี่เป็นงาน CSS ภายในแท็ก HTML คุณสมบัติการจัดแต่งทรงผมของคุณอยู่ระหว่างเครื่องหมายคำพูดคู่

รหัส:

<h2 style = "color: red"> นี่เป็นอีกชื่อหนึ่ง </ h2>


Go Top

4- แสดงรหัส: บล็อกและแบบอินไลน์

องค์ประกอบบางอย่างมักจะเริ่มต้นในบรรทัดใหม่และใช้ความกว้างเต็มใช้ได้ องค์ประกอบเหล่านี้เป็นองค์ประกอบ "Block"

เช่น <div>, <p>, <h1> - <h6> ฟอร์ม ฯลฯ

องค์ประกอบบางอย่างใช้เฉพาะพื้นที่ที่ต้องการและไม่เริ่มต้นในบรรทัดใหม่ องค์ประกอบเหล่านี้เป็นองค์ประกอบแบบ "อินไลน์"

เช่น: <a>, <span>, <br>, <strong>, <img> เป็นต้น

คุณจะต้องแยกแยะองค์ประกอบของบล็อกออกจากอินไลน์เมื่อคุณใช้รูปแบบ CSS ในคู่มือ HTML นี้จะไม่จำเป็นมากนัก

รหัส:

<! DOCTYPE html> <html> <head> <title> หน้าเว็บแรกของฉัน </title> </head> <body> <body> <h2> นี่คือหัวเรื่อง H2 มันมีจอแสดงผลบล็อก </h2> <h2> นี่คือ <u> อีก </u> ส่วนหัว H2 ที่นี่แท็กขีดเส้นใต้มีการแสดงผลแบบอินไลน์ </h2> </body> </html>

Output:


Go Top

5- ราคาคู่ แต่เป็นราคาเดียวใน HTML

คำถามนี้ชัดเจนมาก สิ่งที่คุณควรใช้ใน HTML? อ้างเพียงครั้งเดียวหรือสองครั้ง? คนดูเหมือนจะใช้ทั้งสอง แต่ที่หนึ่งถูกต้อง?

ใน HTML การอ้างเพียงครั้งเดียวและคำพูดคู่เหมือนกัน พวกเขาไม่ได้สร้างความแตกต่างในเอาท์พุท

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


Go Top

6- ความหมาย HTML และ HTML ไม่ใช่ความหมาย

ความหมาย HTML เป็น HTML รุ่นล่าสุดซึ่งเรียกอีกอย่างว่า HTML5 เป็นเวอร์ชันที่พัฒนาโดย HTML และ XHTML แบบไม่ใช้ความหมาย

ทำไม HTML5 จึงดีกว่า ในเวอร์ชันก่อนหน้าองค์ประกอบ HTML ถูกระบุด้วยชื่อ id / class ตัวอย่างเช่น <div id = "article"> </ div> ถือว่าเป็นบทความ

ใน HTML5 แท็ก <article> </ article> จะแสดงตัวเองเป็นบทความโดยไม่ต้องระบุรหัส / ชั้นใด ๆ

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

นี่คือรายการของแท็ก HTML5 ที่เป็นที่นิยม:

  • <main> </ main> = เป็นการตัดเนื้อหาหลักที่คุณต้องการให้ผู้ดูของคุณเห็น
  • <header> </ header> = เป็นการทำเครื่องหมายส่วนหัวของเนื้อหาเช่นชื่อหรือเมตาผู้เขียน
  • <บทความ> </ article> = ระบุเนื้อหาที่ผู้ใช้กำหนดหรือเป็นอิสระให้กับผู้ดูของคุณ
  • <section> </ section> = สามารถจัดกลุ่มโค้ดต่างๆเช่นส่วนหัวส่วนท้ายหรือแถบด้านข้าง คุณสามารถพูดได้ว่าเป็นรูปแบบความหมายของ div
  • <footer> </ footer> = นี่คือเนื้อหาส่วนท้ายข้อความปฏิเสธความรับผิดชอบหรือลิขสิทธิ์ของคุณ
  • <audio> </ audio> = ช่วยให้คุณสามารถแทรกไฟล์เสียงโดยไม่ต้องมีปัญหาปลั๊กอินใด ๆ
  • <video> </ video> = เช่น <audio> คุณสามารถแทรกวิดีโอโดยใช้แท็กนี้ได้โดยไม่มีปัญหาปลั๊กอิน

โครงสร้างแบบ HTML5 แบบง่ายๆจะมีลักษณะดังนี้:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> หน้าเว็บแรกของฉัน </title> </head> <body> <body> <nav> <ul> < li> เมนู 1 </li> <li> เมนู 2 </li> </ul> </nav> </header> <main> <main> <article> <header> <h2> นี่คือชื่อของบทความ </ h2> <p> โพสต์โดย John Doe </p> </header> <p> เนื้อหาของบทความไปที่นี่ </p> </article> </main> <mooter> <footer> <p> ลิขสิทธิ์ 2017 John Doe </ p> </footer> </body> </html>


Go Top

7- การตรวจสอบ HTML

ผู้เชี่ยวชาญเว็บส่วนใหญ่จะตรวจสอบโค้ดของตนหลังจากจบการทำงาน เหตุใดจึงจำเป็นต้องตรวจสอบความถูกต้องของรหัสเมื่อทำงานได้ดี?

มีสองเหตุผลที่เป็นไปได้สำหรับการตรวจสอบรหัสของคุณ:

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

Validator W3C เป็นบริการที่ได้รับความนิยมมากที่สุดสำหรับการตรวจสอบรหัส มีหลายวิธีในการตรวจสอบรหัส คุณสามารถอัปโหลดไฟล์หรือใส่รหัสโดยตรงในเครื่องมือตรวจสอบความถูกต้องของไฟล์


Go Top

8- แหล่งข้อมูลที่เป็นประโยชน์อื่น ๆ

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

ต่อไปนี้เป็นแหล่งข้อมูลที่เป็นประโยชน์สำหรับคุณ: