HTML Basic Examples เริ่มต้นการสร้างเว็บไซต์ด้วย HTML

# HTML Basic Examples: เริ่มต้นการสร้างเว็บไซต์ด้วย HTML

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

## ตัวอย่าง 1: โครงสร้างพื้นฐานของ HTML

เริ่มต้นด้วยโครงสร้างพื้นฐานของเอกสาร HTML ซึ่งประกอบไปด้วยแท็กต่าง ๆ ที่สำคัญ:

```html

<!DOCTYPE html>

<html>

<head>

<title>ตัวอย่างเพจ HTML</title>

</head>

<body>

<h1>ยินดีต้อนรับสู่เว็บไซต์ของเรา!</h1>

<p>นี่คือเนื้อหาที่ถูกสร้างขึ้นด้วย HTML พื้นฐาน.</p>

</body>

</html>

```

### อธิบายโครงสร้าง:

- `<!DOCTYPE html>`: บอกเบราว์เซอร์ว่าเอกสารนี้เป็น HTML5

- `<html>`: แท็กที่เริ่มและสิ้นสุดเอกสาร HTML

- `<head>`: ส่วนที่บรรจุข้อมูลเมตา เช่น ชื่อเรื่อง

- `<title>`: ชื่อเรื่องที่แสดงในแท็บเบราว์เซอร์

- `<body>`: ส่วนที่ประกอบด้วยเนื้อหาหลักของหน้าเว็บ

## ตัวอย่าง 2: การใช้รูปภาพ

สามารถเพิ่มรูปภาพลงในเอกสาร HTML ได้ง่าย ๆ โดยใช้แท็ก `<img>`:

```html

<!DOCTYPE html>

<html>

<head>

<title>รูปภาพตัวอย่าง</title>

</head>

<body>

<h1>รูปภาพที่เราชอบ</h1>

<img src="https://example.com/image.jpg" alt="คำบรรยายรูปภาพ">

</body>

</html>

```

### อธิบาย:

- `<img src="URL">`: ใช้ในการใส่รูปภาพ โดย `src` คือแหล่งที่มาของรูปภาพ

- `alt`: คำบรรยายของรูปภาพ ซึ่งจะปรากฏเมื่อไม่สามารถโหลดรูปภาพได้

## ตัวอย่าง 3: ลิงก์

การสร้างลิงก์ใน HTML สามารถทำได้โดยใช้แท็ก `<a>`:

```html

<!DOCTYPE html>

<html>

<head>

<title>การสร้างลิงก์</title>

</head>

<body>

<h1>คลิกลิงก์เพื่อไปยังเว็บไซต์ที่คุณสนใจ!</h1>

<a href="https://www.google.com">ไปยัง Google</a>

</body>

</html>

```

### อธิบาย:

- `<a href="URL">`: ใช้สำหรับสร้างลิงก์ โดย `href` คือที่อยู่หรือ URL ที่จะนำไป

## ตัวอย่าง 4: สร้างรายการ

HTML สนับสนุนการสร้างรายการทั้งรายการเรียง (Ordered List) และรายการไม่เรียง (Unordered List):

```html

<!DOCTYPE html>

<html>

<head>

<title>รายการตัวอย่าง</title>

</head>

<body>

<h1>รายการสิ่งที่ชอบ</h1>

<ul>

<li>การอ่านหนังสือ</li>

<li>การเดินทาง</li>

<li>การฟังเพลง</li>

</ul>

</body>

</html>

```

### อธิบาย:

- `<ul>`: แท็กสำหรับสร้างรายการไม่เรียง

- `<li>`: แท็กสำหรับรายการแต่ละรายการ

## สรุป

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

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

ใหม่กว่า เก่ากว่า
Python Game Programming Book