HTML | Khả niym bn wĕbsịt̒ 0 ครั้งที่เห็น

คำอธิบาย

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

ก่อนที่จะมีคนเข้ามาในโลกของนักพัฒนาเขาต้องรู้คำศัพท์เหล่านี้ นักพัฒนาเว็บไซต์อยู่ไม่ไกลจากโลกแห่งการเข้ารหัส เงื่อนไขการเขียนโค้ดจะยังคงฝังอยู่ในเงื่อนไขภาษาการเขียนโปรแกรมที่มีอยู่ดังที่ได้กล่าวไว้ข้างต้น HTML, CSS และอื่น ๆ การเข้ารหัสนี้จะเป็นประโยชน์สำหรับการแปลความปรารถนาของผู้พัฒนาและอุปกรณ์ที่ใช้ซึ่งจะเป็นประโยชน์ในการสื่อสารระหว่างผู้พัฒนาและอุปกรณ์

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


1. HTML

Hypertext Markup Language (HTML) เป็นภาษามาร์กอัปมาตรฐานสำหรับเอกสารที่ออกแบบมาเพื่อแสดงในเว็บเบราว์เซอร์ เทคโนโลยีนี้ช่วยได้เช่น Cascading Style Sheets (CSS) และภาษาสคริปต์เช่น JavaScript.

HTML เป็นภาษามาร์กอัปของเว็บหลักและทำงานได้อย่างเป็นธรรมชาติในทุกเบราว์เซอร์และได้รับการดูแลโดย World Wide Web Consortium

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

องค์ประกอบ HTML เป็นส่วนประกอบของหน้า HTML ด้วยโครงสร้าง HTML รูปภาพและวัตถุอื่น ๆ เช่นรูปร่างแบบโต้ตอบสามารถฝังลงในหน้าที่แสดงผลได้ HTML มีวิธีการสร้างเอกสารที่มีโครงสร้างโดยการแสดงความหมายเชิงโครงสร้างสำหรับข้อความเช่นส่วนหัวย่อหน้ารายการลิงก์การอ้างอิงและรายการอื่น ๆ องค์ประกอบ HTML แสดงด้วยแท็กซึ่งเขียนโดยใช้วงเล็บมุม แท็กเช่น < img /> และ < input /> แทรกเนื้อหาลงในหน้าโดยตรง แท็กอื่น ๆ เช่น < p > ล้อมรอบและให้ข้อมูลเกี่ยวกับข้อความเอกสารและอาจรวมถึงแท็กอื่น ๆ เป็นองค์ประกอบย่อย เบราว์เซอร์ไม่แสดงแท็ก HTML แต่ใช้เพื่อตีความเนื้อหาของเพจ

HTML สามารถฝังโปรแกรมที่เขียนด้วยภาษาสคริปต์เช่น JavaScript ซึ่งส่งผลต่อพฤติกรรมและเนื้อหาของเว็บเพจ การรวม CSS จะกำหนดลักษณะและรูปแบบของเนื้อหา World Wide Web Consortium (W3C) ซึ่งเป็นผู้ดูแล HTML และผู้ดูแลมาตรฐาน CSS ปัจจุบันได้ผลักดันการใช้ CSS มากกว่า HTML ในการนำเสนออย่างชัดเจนตั้งแต่ปี 1997

ฟังก์ชัน HTML

HTML (HyperText Markup Language) เป็นภาษาที่ใช้เครื่องหมาย (แท็ก) บางอย่างเพื่อแสดงรหัสที่เบราว์เซอร์ต้องตีความเพื่อให้สามารถแสดงเพจได้อย่างถูกต้อง

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

  • สร้างหน้าเว็บ
  • แสดงข้อมูลต่างๆในอินเทอร์เน็ตเบราว์เซอร์
  • สร้างลิงค์ไปยังหน้าเว็บอื่นด้วยรหัสเฉพาะ (ไฮเปอร์เท็กซ์)

ความแตกต่างระหว่าง HTML และ HTML5

คุณอาจเคยได้ยิน HTML5? HTML และ HTML แตกต่างกันอย่างไร คุณอาจยังสงสัยว่าคำศัพท์ทั้งสองเหมือนกันหรือไม่?

HTML4 (เมื่อเร็ว ๆ นี้เรียกว่า "HTML") เปิดตัวในปี 2542 และเวอร์ชันใหม่ล่าสุดได้เปิดตัวสู่สาธารณะในปี 2014 ซึ่งรู้จักกันในชื่อ HTML5 เวอร์ชันล่าสุดนี้ได้เพิ่มคุณลักษณะใหม่ ๆ ให้กับภาษามาร์กอัป คุณลักษณะขั้นสูงอย่างหนึ่งใน HTML5 คือการรองรับการฝังเสียงและวิดีโอ ดังนั้นแทนที่จะใช้ Flash player เราสามารถฝังไฟล์วิดีโอและไฟล์เสียงบนหน้าเว็บโดยใช้แท็ก < audio> </ audio > & < video > </ video>. นอกจากนี้ยังมีการสนับสนุนในตัวสำหรับกราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) และ MathML สำหรับสูตรทางคณิตศาสตร์และวิทยาศาสตร์

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

แท็กความหมายที่ใช้มากที่สุด ได้แก่ :

<article> </article>, <section> </section>, <aside> </aside>, <header> </header>, and <footer> </footer>.

ตารางต่อไปนี้ให้ข้อมูลเกี่ยวกับความแตกต่างที่สำคัญระหว่าง HTML และ HTML5:

#HTMLHTML5
1 ไม่รองรับเสียงและวิดีโอโดยไม่ใช้การรองรับเครื่องเล่นแฟลช รองรับการควบคุมเสียงและวิดีโอด้วยการใช้แท็กเสียงและวิดีโอ
2 ใช้คุกกี้เพื่อจัดเก็บข้อมูลชั่วคราว ใช้ฐานข้อมูล SQL และแคชของแอปพลิเคชันเพื่อจัดเก็บข้อมูลแบบออฟไลน์
3 ไม่อนุญาตให้ JavaScript ทำงานในเบราว์เซอร์ อนุญาตให้ JavaScript ทำงานในพื้นหลัง เป็นไปได้เนื่องจาก JS Web worker API ใน HTML5
4 กราฟิกแบบเวกเตอร์สามารถทำได้ใน HTML ด้วยความช่วยเหลือของเทคโนโลยีต่างๆเช่น VML, Silver-light, Flash ฯลฯ กราฟิกแบบเวกเตอร์เป็นส่วนสำคัญของ HTML5 เช่น SVG และแคนวาส
5 ไม่อนุญาตให้ลากและวางเอฟเฟกต์ อนุญาตให้ลากและวางเอฟเฟกต์
6 เป็นไปไม่ได้ที่จะวาดรูปร่างเช่นวงกลมสี่เหลี่ยมสามเหลี่ยม ฯลฯ HTML5 ทำให้สามารถวาดรูปทรงต่างๆเช่นวงกลมสี่เหลี่ยมสามเหลี่ยม ฯลฯ
7 ใช้งานได้กับเบราว์เซอร์เดิมทั้งหมด รองรับโดยเบราว์เซอร์ใหม่ทั้งหมดเช่น Firefox, Mozilla, Chrome, Safari และอื่น ๆ
8 HTML เวอร์ชันเก่ามีความเป็นมิตรกับอุปกรณ์เคลื่อนที่น้อยกว่า ภาษา HTML5 เหมาะกับอุปกรณ์เคลื่อนที่มากขึ้น
9 คำประกาศ Doctype ยาวและซับซ้อนเกินไป คำประกาศ Doctype ค่อนข้างเรียบง่ายและตรงไปตรงมา
10 องค์ประกอบเช่น nav ส่วนหัวหายไป องค์ประกอบใหม่สำหรับโครงสร้างเว็บเช่น nav, header, footer เป็นต้น
11 การเข้ารหัสอักขระที่ยาวและซับซ้อน การเข้ารหัสอักขระที่ง่ายและสะดวก
12 แทบจะเป็นไปไม่ได้เลยที่จะได้รับ GeoLocation จริงของผู้ใช้ด้วยความช่วยเหลือของเบราว์เซอร์ เราสามารถติดตาม GeoLocation ของผู้ใช้ได้อย่างง่ายดายโดยใช้ JS GeoLocation API
13 ไม่สามารถจัดการกับไวยากรณ์ที่ไม่ถูกต้อง สามารถจัดการไวยากรณ์ที่ไม่ถูกต้องได้
14 แอตทริบิวต์เช่น charset, async และ ping ขาดหายไปใน HTML แอตทริบิวต์ charset, async และ ping เป็นส่วนหนึ่งของ HTML 5

การปรับปรุงองค์ประกอบ HTML ใน HTML5 รวมถึงการลบองค์ประกอบต่อไปนี้:

# องค์ประกอบใน HTML องค์ประกอบใน HTML5
1 applet เท่ากับ: object
2acronymเท่ากับ: abbr
3dirเท่ากับ: ul
4framesetลบแล้ว
5frameลบแล้ว
6noframesลบแล้ว
7strikeไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
8bigไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
9basefontไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
10fontไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
11centerไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
12ttไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้

แอตทริบิวต์ใน HTML

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

  • CLASS
<div class="big-box yellow-box">มันเป็นกล่องสีเหลืองขนาดใหญ่.</div>
  • ID
<div id="my-box">นี่คือกล่องของฉัน! ใส่ข้อความของคุณในกล่องอื่น.</div>
  • HREF
<a href="http://google.com">Google มัน!</a>
  • Body
<html>
  <head>
    <title>ตัวอย่างแท็ก body</title>
  </head>
  <body>
    นี่คือใน body!
  </body>
</html>
  • Children
<ul id="parent">
  <li id="child">ฉันเป็นลูกชายของพ่อแม่!</li>
</ul>
  • Comments
<!-- นี่คือความคิดเห็น HTML! -->
  • Div
<div>นี่คือองค์ประกอบ div.</div>
  • Html
<!DOCTYPE html>
<html>

ส่วน html นี้จะโหลดโค้ดด้านข้างของหน้าเว็บ

</html>
  • Head
<html>
  <!-- ส่วน "head" -->
  <head>
  </head>
  <!-- ส่วน "head" -->
  <body>
  </body>
</html>
  • Headings. ส่วนหัวเรื่องสามารถประกอบด้วย h1, h2, h3, h4, h5 หรือ h6 นี่คือตัวอย่าง:
<h1> นี่คือ "header" H1 ! </h1>
<h2> นี่คือ "header" H2 ! </h2>
<h3> นี่คือ "header" H3 ! </h3>
... และอื่น ๆ.

*Horizontal rules. ข้อความ "hr" จะมีช่องว่างแนวนอนโดยมีเส้นสีดำหนา 1px

ข้อความบล็อกของคุณ
<hr>
... ข้อความถัดไป.
  • Hyperlinks
<a href="url this link goes to">ข้อความลิงก์</a>
ข้อความต่อไปนี้ <a href="http://google.com"> ไปที่ Google</a>.
  • Images
<img src="./assets/img/mypicture.png" class="style" alt="รูปของฉัน">
  • Line breaks
<p> ข้อความบางส่วน <br/> ทอดยาวสองบรรทัด </p>
  • Links
<link type="text/css" rel="stylesheet" href="styles.css" />
  • Lists
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

ยังสามารถแปลเป็น:

<div class="col-md-12" >
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a>
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
  </div>
</div>
  • Paragraphs
<p> นี่คือข้อความย่อหน้า! </p>
  • Semantic formatting
<p> <strong> คำเตือน: </strong>กรดอาจทำให้เกิดการไหม้อย่างรุนแรง </strong> </p>
  • Tables
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
  • Tags & Elements
<tag attribute='value'>เนื้อหา</tag keyword>
  • Title
<title>บทความของฉัน</title>

Tags: รหัส ข้อมูลอ้างอิง บน 13 กันยายน 2020

แสดงความคิดเห็น

Forum Diskusi

Post a reply
3034 views

ตอบกลับการสนทนานี้