Visitor Analytics
Skip to main content
alt text
  • alt text
  • alt text
  • alt text

ภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML)

HTML คืออะไร?
HTML คืออะไร?

TL;DR

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

HTML หมายถึงอะไร

HTML ย่อมาจาก HyperText Markup Languageและเป็นภาษาที่ใช้สร้างหน้าเว็บ ใช้มาร์กอัปเพื่อกำหนดและจัดรูปแบบองค์ประกอบ ตัวอย่างเช่น สามารถกำหนดแบบอักษร สี ตำแหน่ง ลิงก์ เป็นต้น แม้ว่าผู้สร้างเว็บไซต์ส่วนใหญ่จะไม่ได้เขียนโดยตรงใน HTML แต่ผลลัพธ์สุดท้ายที่อ่านและตีความโดยเว็บเบราว์เซอร์จะอยู่ในรูปแบบ HTML ด้วยเหตุนี้ เมื่อคลิกขวาที่หน้าเว็บและเลือก "ดูแหล่งที่มาของหน้า" ข้อความบรรทัดแรกในหน้าต่างผลลัพธ์ควรเป็น <!doctype html>

โครงสร้างของหน้า HTML คืออะไร?

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

<!DOCTYPE html> - แสดงเว็บเบราว์เซอร์ว่านี่เป็นไฟล์ HTML ที่สามารถอ่านได้

<html lang="en"> - แสดงภาษาที่ใช้เขียนหน้าเว็บ

<head> - เป็นจุดเริ่มต้นของส่วนหัวที่มีการวางรหัสทั่วไป

<title>ชื่อหน้า</title> - นี่คือเมตาแท็กที่แสดงชื่อหน้าซึ่งปรากฏในแท็บเบราว์เซอร์

<meta name="description" content="..." /> - ใช้เพื่ออธิบายว่าเพจเกี่ยวกับอะไร สำหรับเครื่องมือค้นหา

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> - นี่คือคำสั่งที่ระบุว่าควรแสดงหน้าเว็บอย่างไร ขนาดหน้าจอต่างๆ

<meta name="robots" content="index,follow" /> - บอกบอทที่รวบรวมข้อมูลหน้าเว็บว่าสามารถจัดทำดัชนีและเพิ่มลงในผลลัพธ์ของเครื่องมือค้นหา

<link rel="stylesheet" type="text/css" href="/css/style/style.css”> - สิ่งนี้จะเชื่อมต่อ HTML กับไฟล์ CSS ซึ่งมีการจัดรูปแบบข้อความที่มีรายละเอียดมากขึ้น

<script src="/js/random.js" type="text/javascript"></script> - เชื่อมต่อกับไฟล์ JavaScript ใช้เพื่อเรียกใช้การดำเนินการบนหน้าเว็บ

<link rel="canonical" href="https://yourpage.com"/> - หากมีหน้าเว็บที่มีเนื้อหาคล้ายคลึงกันหรือพบหน้าที่มี URL มากกว่าหนึ่ง URL ข้อมูลนี้จะแสดงให้โปรแกรมรวบรวมข้อมูลทราบว่าจะนำเข้า URL ใด บัญชีเพื่อวัตถุประสงค์ในการมอบอำนาจ

</head> - ปิดส่วนหัว

<body> - เป็นการเปิดส่วนเนื้อหาซึ่งวางเนื้อหาของหน้าจริงไว้

<div class="container"> - เปิดส่วนที่เรียกว่าคอนเทนเนอร์ ซึ่งมักจะสร้างเฟรมสำหรับเนื้อหา

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="alt text" height="52" width ="180"></a> - นี่เป็นวิธีหนึ่งในการวางภาพโลโก้ที่เชื่อมโยงไปยังหน้าแรกของคุณ

<div class=”first-text”>นี่คือคำแรกที่จะแสดงบนเว็บไซต์ของคุณจริงๆ</div> - ข้อความบางส่วนที่สามารถกำหนดสไตล์ในไฟล์ CSS ที่เชื่อมต่อ

...

</body>