HTML | Khả niym bn wĕbsịt̒

หน้านี้อธิบายรายละเอียดเกี่ยวกับสิ่งที่คุณต้องการรู้

| English | | Filipino | | Indonesia | | Malay | | Thai | | Vietnamese |
0 ครั้งที่เห็น

HTML | Khả niym bn wĕbsịt̒

เผยแพร่เมื่อ : 13 กันยายน 2020

สาขาวิทยาศาสตร์เฉพาะแต่ละสาขามีคำศัพท์เฉพาะของตัวเองว่าชอบหรือไม่ต้องมีความเชี่ยวชาญเพื่อให้เกิดความเข้าใจที่ดีในสิ่งที่กำลังศึกษา ในโลกของนักพัฒนาเว็บไซต์หรือนักพัฒนาเว็บไซต์เรามักจะเห็นหรือได้ยินเกี่ยวกับ 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/> dan <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>, และ <footer></footer>.

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

# HTML HTML5
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 Eองค์ประกอบใน HTML5
1 applet เท่ากับ: object
2 acronym เท่ากับ: abbr
3 dir เท่ากับ: ul
4 frameset ลบแล้ว
5 frame ลบแล้ว
6 noframes ลบแล้ว
7 strike ไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
8 big ไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
9 basefont ไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
10 font ไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
11 center ไม่มีแท็กใหม่ CSS ใช้สำหรับสิ่งนี้
12 tt ไม่มีแท็กใหม่ 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>Contoh tag body</title>
                          </head>
                          <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>
                          <!-- ส่วน "หัว" -->
                          <body>
                          </body>
                        </html>
                        
  • HEADINGS
  •                     ส่วนหัวเรื่องสามารถประกอบด้วย h1, h2, h3, h4, h5 หรือ h6 นี่คือตัวอย่าง :
    
                        <h1> นี่คือส่วนหัว H1 ! </h1>
                        <h2> นี่คือส่วนหัว H2 ! </h2>
                        <h3> นี่คือส่วนหัว H3 ! </h3>
                        ... ฯลฯ.
                        
  • HORIZONTAL RULES
  •                     ข้อความ "hr" จะเว้นระยะในแนวนอนโดยมีเส้นขอบสีดำหนา 1px.
    
                        ข้อความบล็อกของคุณ.
                        <hr>
                        ...ข้อความถัดไป.
                        
  • HYPERLINKS
  •                     <a href="url ลิงก์นี้ไปที่">Teks tautan</a>
                        ข้อความต่อไปนี้ <a href="http://google.com">ไปที่ Google</a>.
                        
  • IMAGES
  •                     <img src="./assets/img/รูปของฉัน.png" class="style" alt="รูปของฉัน">
                        
  • LINE BREAKS
  •                     <p> ข้อความบางส่วน <br/> ทอดยาวสองบรรทัด </p>
                        
  • LINKS
  •                     <link type="text/css" rel="stylesheet" href="styles.css" />
                        
  • LISTS
  •                     * 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>
                        
    dapat juga dijabarkan berupa :
    <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 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> Ini adalah teks paragraf! </p>
                        
  • SEMANTIC FORMATTING
  •                     <p> <strong> คำเตือน: กรดอาจทำให้เกิดแผลไหม้อย่างรุนแรง </strong> </p>
                        
  • TAGS & ELEMENTS
  •                        <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>
                        
  • TITLE
  •                     <title>บทความของฉัน</title>
                        

Tags:

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