Bài 1: Giới thiệu về Trình quản lý quảng cáo

1. Hướng Dẫn Cài Đặt Visual Studio 2022

Bước 1: Tải Visual Studio 2022

Truy cập trang tải chính thức: Visual Studio 2022
Chọn phiên bản Community (miễn phí) hoặc bản Professional/Enterprise nếu bạn có license.
Nhấn Download để tải file cài đặt .exe.

Bước 2: Cài Đặt Visual Studio 2022

Mở file vs_Community.exe vừa tải.
Chờ trình cài đặt khởi chạy, sau đó chọn Tiếp tục (Continue) để tải thêm dữ liệu cài đặt.

2. Cài Đặt Các Thành Phần Cần Thiết Để Lập Trình HTML

Bước 3: Chọn workload phù hợp

Trong cửa sổ Visual Studio Installer, chọn tab Workloads.
Tích chọn:
✅ ASP.NET and web development (nếu bạn muốn dùng HTML trong các dự án ASP.NET)
✅ Node.js development (nếu bạn cần hỗ trợ thêm cho JavaScript, nhưng không bắt buộc)
Nếu chỉ muốn viết HTML cơ bản, bạn có thể bỏ qua các Workloads này và chỉ cần cài Visual Studio Code thay thế.

Bước 4: Cài đặt Visual Studio

Nhấn Install để bắt đầu quá trình cài đặt.
Chờ quá trình hoàn tất (mất vài phút tùy tốc độ mạng).
Sau khi cài đặt xong, nhấn Launch để mở Visual Studio 2022.

3. Cấu Hình Visual Studio 2022 Để Code HTML

Bước 5: Tạo Dự Án HTML Mới

Mở Visual Studio 2022.
Chọn Create a new project.
Tìm kiếm và chọn "Empty Project" hoặc "ASP.NET Core Web App" nếu muốn tích hợp với C#.
Đặt tên cho dự án, chọn vị trí lưu, sau đó nhấn Create.

Bước 6: Tạo File HTML Mới

Trong cửa sổ Solution Explorer, chuột phải vào dự án → Add → New Item.
Chọn HTML Page, đặt tên file (ví dụ: index.html) rồi nhấn Add.
File index.html sẽ mở trong trình soạn thảo của Visual Studio.

Bước 7: Viết Mã HTML

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang Web Đầu Tiên</title>
</head>
<body>
    <h1>Xin chào, đây là trang HTML đầu tiên của bạn!</h1>
</body>
</html>

Bước 8: Chạy Trang HTML Trực Tiếp

Nhấn F5 hoặc chuột phải vào file index.html → View in Browser để xem trang trên trình duyệt.

4. Cài Đặt Visual Studio Code (Lựa Chọn Nhẹ Hơn)

Nếu bạn chỉ cần viết HTML mà không cần các tính năng nâng cao của Visual Studio 2022, có thể dùng Visual Studio Code:

Tải tại: https://code.visualstudio.com/
Cài đặt và mở VS Code.
Cài đặt extension Live Server để chạy file HTML nhanh chóng.
Tạo file .html và bắt đầu lập trình.

Tóm Tắt

Bước	Hành động
1	Tải Visual Studio 2022 từ trang chính thức
2	Cài đặt phần mềm, chọn workload ASP.NET and web development nếu cần
3	Tạo dự án mới hoặc mở một thư mục HTML có sẵn
4	Tạo file `index.html`, viết mã HTML
5	Chạy file bằng trình duyệt hoặc extension hỗ trợ

Bạn muốn hướng dẫn thêm về phần nào không? 🚀

1. Cấu trúc cơ bản của HTML

Một tài liệu HTML cơ bản bao gồm các thành phần chính sau:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiêu đề trang web</title>
</head>
<body>
    <h1>Chào mừng đến với HTML!</h1>
    <p>Đây là đoạn văn đầu tiên của tôi.</p>
</body>
</html>

Giải thích các thành phần chính

<!DOCTYPE html>
- Khai báo kiểu tài liệu (Doctype), giúp trình duyệt hiểu đây là tài liệu HTML5.
<html lang="vi">
- Thẻ <html> là thẻ gốc chứa toàn bộ nội dung của trang web.
- Thuộc tính lang="vi" chỉ định ngôn ngữ của trang (tiếng Việt).
<head>
- Chứa thông tin về trang web (metadata), không hiển thị trực tiếp trên trang.
- Một số thẻ quan trọng trong <head>:
  - <meta charset="UTF-8">: Xác định bảng mã UTF-8 (hỗ trợ tiếng Việt).
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">: Giúp trang hiển thị tốt trên thiết bị di động.
  - <title>: Tiêu đề hiển thị trên tab trình duyệt.
<body>
- Chứa nội dung hiển thị trên trang web, bao gồm:
  - <h1> đến <h6>: Các tiêu đề, <h1> lớn nhất, <h6> nhỏ nhất.
  - <p>: Đoạn văn.
  - <a>: Liên kết.
  - <img>: Hình ảnh.
  - <ul>, <ol>, <li>: Danh sách.
  - <table>, <tr>, <td>: Bảng.

2. Các Thẻ HTML Cơ Bản về Văn Bản (Text)

2.1. Thẻ Tiêu Đề (`<h1>` - `<h6>`)

Các thẻ tiêu đề dùng để đánh dấu các tiêu đề trong trang web.

<h1> là tiêu đề lớn nhất, <h6> là tiêu đề nhỏ nhất.

Ví dụ:

<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>

Hiển thị:

Tiêu đề cấp 1
Tiêu đề cấp 2
Tiêu đề cấp 3
Tiêu đề cấp 4
Tiêu đề cấp 5
Tiêu đề cấp 6

2.2. Thẻ Đoạn Văn (`<p>`)

Dùng để tạo một đoạn văn bản.

Ví dụ:

<p>Đây là một đoạn văn bản trong HTML.</p>

2.3. Thẻ Xuống Dòng (`<br>`)

Dùng để ngắt dòng mà không tạo khoảng cách giữa các đoạn.

Ví dụ:

<p>Dòng này trước khi xuống dòng.<br>Dòng này sau khi xuống dòng.</p>

Hiển thị:
Dòng này trước khi xuống dòng.
Dòng này sau khi xuống dòng.

2.4. Thẻ Ngắt Đoạn (`<hr>`)

Dùng để tạo một đường kẻ ngang ngăn cách nội dung.

Ví dụ:

<p>Đoạn văn thứ nhất.</p>
<hr>
<p>Đoạn văn thứ hai.</p>

Hiển thị:
Đoạn văn thứ nhất.
——— (Đường kẻ ngang)
Đoạn văn thứ hai.

2.5. Thẻ In Đậm (`<b>`), In Nghiêng (`<i>`), và Gạch Chân (`<u>`)

Dùng để định dạng văn bản đặc biệt.

Ví dụ:

<p><b>Chữ in đậm</b></p>
<p><i>Chữ in nghiêng</i></p>
<p><u>Chữ gạch chân</u></p>

Hiển thị:
Chữ in đậm
Chữ in nghiêng
Chữ gạch chân

2.6. Thẻ Nhấn Mạnh (`<strong>` và `<em>`)

<strong>: Nhấn mạnh văn bản (tương đương với <b> nhưng mang ý nghĩa quan trọng hơn).
<em>: Nhấn mạnh văn bản (tương đương với <i> nhưng mang ý nghĩa nhấn mạnh hơn).

Ví dụ:

<p><strong>Chữ quan trọng</strong></p>
<p><em>Chữ cần nhấn mạnh</em></p>

Hiển thị:
Chữ quan trọng
Chữ cần nhấn mạnh

2.7. Thẻ Chữ Gạch Ngang (`<s>`)

Dùng để tạo chữ gạch ngang (thường dùng để hiển thị nội dung bị lỗi hoặc không còn hiệu lực).

Ví dụ:

<p><s>Giá cũ: 100.000đ</s> Giá mới: 80.000đ</p>

Hiển thị:
~~Giá cũ: 100.000đ~~ Giá mới: 80.000đ

2.8. Thẻ Chỉ Số Trên (`<sup>`) và Chỉ Số Dưới (`<sub>`)

<sup>: Dùng để tạo chỉ số trên (ví dụ: số mũ trong toán học).
<sub>: Dùng để tạo chỉ số dưới (ví dụ: công thức hóa học).

Ví dụ:

<p>X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup></p>
<p>Công thức hóa học của nước: H<sub>2</sub>O</p>

Hiển thị:
X² + Y² = Z²
Công thức hóa học của nước: H₂O

2.9. Thẻ Trích Dẫn (`<blockquote>`, `<q>`, `<cite>`)

<blockquote>: Dùng để trích dẫn một đoạn văn bản dài.
<q>: Dùng để trích dẫn ngắn trong một câu.
<cite>: Dùng để trích dẫn tên tác giả hoặc nguồn tài liệu.

Ví dụ:

<blockquote>
    "Học, học nữa, học mãi." - V.I. Lenin
</blockquote>
<p>Như <q>Albert Einstein</q> đã nói: <cite>"Trí tưởng tượng quan trọng hơn kiến thức."</cite></p>

Hiển thị:

"Học, học nữa, học mãi." - V.I. Lenin

Như Albert Einstein đã nói: "Trí tưởng tượng quan trọng hơn kiến thức."

2.10. Thẻ Định Nghĩa (`<abbr>`)

Dùng để hiển thị từ viết tắt với chú thích khi di chuột vào.

Ví dụ:

<p><abbr title="HyperText Markup Language">HTML</abbr> là ngôn ngữ đánh dấu siêu văn bản.</p>

Hiển thị:
HTML (hiển thị chú thích khi di chuột vào chữ HTML) là ngôn ngữ đánh dấu siêu văn bản.

Tóm Tắt Các Thẻ Văn Bản HTML

Thẻ	Công Dụng
`<h1>` - `<h6>`	Tiêu đề cấp độ 1-6
`<p>`	Đoạn văn
`<br>`	Xuống dòng
`<hr>`	Đường kẻ ngang
`<b>` / `<strong>`	Chữ in đậm
`<i>` / `<em>`	Chữ in nghiêng
`<u>`	Chữ gạch chân
`<s>`	Chữ gạch ngang
`<sup>`	Chỉ số trên
`<sub>`	Chỉ số dưới
`<blockquote>`	Trích dẫn dài
`<q>`	Trích dẫn ngắn
`<cite>`	Trích dẫn tên tác giả
`<abbr>`	Viết tắt có chú thích

Checklist các mục cần chuẩn bị PDF · 1.2MB

Tải xuống
Tài nguyên chính thức của Facebook Link ngoài

Mở link

Yêu cầu

Tạo một tập tin HTML
- Đặt tên tập tin là mo-ta-san-pham.html.
- Viết mã HTML theo đúng cấu trúc gồm <!DOCTYPE>, <html>, <head>, <body>.
Lập trình để đạt kết quả như hinhf sau

Hướng dẫn thực hiện

Bước 1: Tạo tập tin HTML

Mở trình soạn thảo như Notepad++, VS Code hoặc Sublime Text.
Tạo tập tin mới và lưu với tên mo-ta-san-pham.html.

Bước 2: Viết mã HTML

Bắt đầu với <!DOCTYPE html> để khai báo tài liệu HTML5.
Dùng thẻ <html> để bao toàn bộ nội dung trang.
Trong <head>, thêm <title> để đặt tiêu đề trang.
Trong <body>, thêm các nội dung chính:
- <h1> để đặt tên sản phẩm.
- <p> để mô tả sản phẩm.
- <ul> và <li> để liệt kê thông số kỹ thuật.
- <button> để tạo nút "Xem thêm".

Bước 3: Kiểm tra kết quả

Mở tập tin mo-ta-san-pham.html bằng trình duyệt (Chrome, Firefox...).
Kiểm tra xem nội dung hiển thị có đúng không.
Nhấn vào nút "Xem thêm" để xem thông báo JavaScript.
Chụp ảnh màn hình kết quả và nộp bài.

Bài 1: Giới thiệu về Trình quản lý quảng cáo

1. Hướng Dẫn Cài Đặt Visual Studio 2022

Bước 1: Tải Visual Studio 2022

Bước 2: Cài Đặt Visual Studio 2022

2. Cài Đặt Các Thành Phần Cần Thiết Để Lập Trình HTML

Bước 3: Chọn workload phù hợp

Bước 4: Cài đặt Visual Studio

3. Cấu Hình Visual Studio 2022 Để Code HTML

Bước 5: Tạo Dự Án HTML Mới

Bước 6: Tạo File HTML Mới

Bước 7: Viết Mã HTML

Bước 8: Chạy Trang HTML Trực Tiếp

4. Cài Đặt Visual Studio Code (Lựa Chọn Nhẹ Hơn)

Tóm Tắt

1. Cấu trúc cơ bản của HTML

Giải thích các thành phần chính

2. Các Thẻ HTML Cơ Bản về Văn Bản (Text)

2.1. Thẻ Tiêu Đề (<h1> - <h6>)

2.2. Thẻ Đoạn Văn (<p>)

2.3. Thẻ Xuống Dòng (<br>)

2.4. Thẻ Ngắt Đoạn (<hr>)

2.5. Thẻ In Đậm (<b>), In Nghiêng (<i>), và Gạch Chân (<u>)

2.6. Thẻ Nhấn Mạnh (<strong> và <em>)

2.7. Thẻ Chữ Gạch Ngang (<s>)

2.8. Thẻ Chỉ Số Trên (<sup>) và Chỉ Số Dưới (<sub>)

2.9. Thẻ Trích Dẫn (<blockquote>, <q>, <cite>)

2.10. Thẻ Định Nghĩa (<abbr>)

Tóm Tắt Các Thẻ Văn Bản HTML

Yêu cầu

Hướng dẫn thực hiện

Bước 1: Tạo tập tin HTML

Bước 2: Viết mã HTML

Bước 3: Kiểm tra kết quả

2.1. Thẻ Tiêu Đề (`<h1>` - `<h6>`)

2.2. Thẻ Đoạn Văn (`<p>`)

2.3. Thẻ Xuống Dòng (`<br>`)

2.4. Thẻ Ngắt Đoạn (`<hr>`)

2.5. Thẻ In Đậm (`<b>`), In Nghiêng (`<i>`), và Gạch Chân (`<u>`)

2.6. Thẻ Nhấn Mạnh (`<strong>` và `<em>`)

2.7. Thẻ Chữ Gạch Ngang (`<s>`)

2.8. Thẻ Chỉ Số Trên (`<sup>`) và Chỉ Số Dưới (`<sub>`)

2.9. Thẻ Trích Dẫn (`<blockquote>`, `<q>`, `<cite>`)

2.10. Thẻ Định Nghĩa (`<abbr>`)