04. Tạo trang web - HTML

Giới thiệu chung

HTML (HyperText Markup Language) - ngôn ngữ đánh dấu siêu văn bản là một bộ quy tắt dùng để thiết lập cấu trúc, nội dung và hình thức của trang web.

Cùng với CSS và JavaScript, chúng tạo nên một bộ ba để thiết kế giao diện của bất kỳ trang web nào đang hoạt động trên mạng.

Yêu cầu cần đạt

Trong phạm vi kiến thức phổ thông, các em chỉ cần đạt các yêu cầu sau đây theo quy định của chương trình 2018:

Tạo trang web

Cấu trúc trang web dưới dạng HTML

- Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.

- Sử dụng được các thẻ HTML để trình bày trang web:

+ Định dạng văn bản, phông chữ, tạo liên kết, danh sách.

+ Đưa các tệp dữ liệu đa phương tiện vào trang web (Ví dụ: ảnh, âm thanh, video).

+ Tạo bảng, khung (frame).

+ Tạo mẫu biểu (form).

Sử dụng CSS trong tạo trang web

- Hiểu và sử dụng được một số thuộc tính cơ bản của CSS: màu sắc, phông chữ, nền, đường viền, kích cỡ,...

- Sử dụng được các yếu tố của vùng chọn (selector) như class, id, tag,...

- Sử dụng được CSS làm trang web đẹp, đa dạng và sinh động hơn.

Nhiệm vụ 1. Thực hiện đề kiểm thử HTML cơ bản 1 - 10 phút

Tóm tắt lý thuyết

1. Form (Biểu mẫu)

Khái niệm:
- Form là một phần quan trọng của HTML, cho phép người dùng nhập dữ liệu và gửi đến máy chủ.
- Form thường được sử dụng để thu thập thông tin đăng ký, đăng nhập, tìm kiếm, đặt hàng, v.v.
Các thẻ quan trọng:
- <form>: Định nghĩa một biểu mẫu HTML.
- <input>: Cho phép người dùng nhập dữ liệu (văn bản, số, mật khẩu, v.v.).
- <textarea>: Cho phép người dùng nhập văn bản dài.
- <select>: Tạo danh sách thả xuống.
- <button>: Tạo nút bấm để gửi biểu mẫu.
- <label>: Gán nhãn cho các phần tử biểu mẫu.
Ví dụ:

<label for="username">Tên người dùng:</label><br>

</form>

2. CSS (Cascading Style Sheets)

Khái niệm:
- CSS là ngôn ngữ định kiểu được sử dụng để kiểm soát giao diện của các trang web HTML.
- CSS cho phép bạn thay đổi màu sắc, phông chữ, bố cục và nhiều khía cạnh khác của trang web.
Các cách nhúng CSS:
- Inline CSS: Nhúng trực tiếp vào thẻ HTML bằng thuộc tính style.
- Internal CSS: Nhúng trong thẻ <style> trong phần <head> của HTML.
- External CSS: Nhúng bằng cách liên kết đến file CSS bên ngoài.
Ví dụ:

/* External CSS (style.css) */

body {

background-color: lightblue;

font-family: Arial, sans-serif;

}

h1 {

color: blue;

text-align: center;

}

Sau đó trong file HTML chúng ta dùng thẻ <link> để nhúng file style.css như sau:

<!DOCTYPE html>

<html>

<head>

<title>Ví dụ nhúng CSS</title>

</head>

<body>

<h1>Chào mừng đến với trang web của tôi</h1>

</body>

</html>

Lúc này thẻ body và h1 sẽ bị ảnh hưởng bởi các định dạng trong style.css, thẻ <p> không ảnh hưởng.

3. Bộ chọn và độ ưu tiên các bộ chọn trong CSS

Bộ chọn:
- Bộ chọn CSS được sử dụng để chọn các phần tử HTML mà bạn muốn định kiểu.
- Các loại bộ chọn phổ biến:
  - Bộ chọn phần tử (element selector): Chọn các phần tử HTML dựa trên tên thẻ (ví dụ: p, div, h1).
  - Bộ chọn lớp (class selector): Chọn các phần tử HTML có thuộc tính class nhất định (ví dụ: .text, .container).
  - Bộ chọn định danh (ID selector): Chọn phần tử HTML có thuộc tính id nhất định (ví dụ: #header, #footer).
  - Inline style: Định nghĩa style trực tiếp trong thẻ HTML.
  - thuộc tính !important.
Độ ưu tiên:
- Khi nhiều quy tắc CSS được áp dụng cho cùng một phần tử, trình duyệt sẽ sử dụng quy tắc có độ ưu tiên cao nhất.
- Độ ưu tiên được xác định bởi:
  - Inline style (cao nhất)
  - ID selector
  - Class selector
  - Element selector (thấp nhất)
  - thuộc tính !important (cao hơn cả inline style)
Ví dụ:

#content { /* ID selector */

color: red;

}

.text { /* Class selector */

color: blue;

}

p { /* Element selector */

color: green;

}

Trong ví dụ trên, văn bản trong phần tử có id="content" sẽ có màu đỏ, vì bộ chọn ID có độ ưu tiên cao nhất.

Ghi chú: Phần tóm tắt lý thuyết này được soạn thảo với sự hỗ trợ của Gemini của Google.

Nhiệm vụ 2. Tạo Form - thầy gửi

Nhiệm vụ 3. Tạo và áp dụng CSS lên Form - thầy gửi

4. Định dạng khối (div) và mô hình hộp (Box model)

4.1. Thẻ div

Khái niệm:
- Thẻ <div> (division) là một phần tử HTML cấp khối (block-level element) được sử dụng để nhóm các phần tử HTML khác lại với nhau.
- <div> không có ý nghĩa ngữ nghĩa cụ thể, nó chỉ đơn giản là một vùng chứa chung.
- <div> thường được sử dụng cùng với CSS để tạo bố cục và định dạng cho các phần của trang web.
Công dụng:
- Tạo các vùng chứa để phân chia nội dung trang web thành các phần riêng biệt.
- Nhóm các phần tử liên quan lại với nhau để áp dụng kiểu CSS chung.
- Tạo bố cục trang web phức tạp.
Ví dụ:

<h1>Tiêu đề trang web</h1>

<nav>

<a href="#">Trang chủ</a>

<a href="#">Giới thiệu</a>

</nav>

</div>

<p>Nội dung chính của trang web.</p>

</div>

</div>

4. 2. Thuộc tính padding

Khái niệm:
- padding là khoảng trống giữa nội dung của một phần tử và đường viền của nó.
- padding được sử dụng để tạo khoảng cách bên trong phần tử.
Giá trị:
- padding có thể nhận các giá trị theo đơn vị pixel (px), em, phần trăm (%), v.v.
- Bạn có thể đặt giá trị padding cho tất cả các cạnh cùng một lúc hoặc cho từng cạnh riêng biệt (top, right, bottom, left).
Ví dụ:

div {

padding: 20px; /* Tất cả các cạnh có padding 20px */

}

p {

padding-top: 10px;

padding-right: 15px;

padding-bottom: 10px;

padding-left: 15px;

}

4. 3. Thuộc tính margin

Khái niệm:
- margin là khoảng trống bên ngoài đường viền của một phần tử, tạo khoảng cách giữa phần tử đó và các phần tử xung quanh.
- margin được sử dụng để tạo khoảng cách bên ngoài phần tử.
Giá trị:
- margin cũng có thể nhận các giá trị theo đơn vị pixel (px), em, phần trăm (%), v.v.
- Bạn có thể đặt giá trị margin cho tất cả các cạnh cùng một lúc hoặc cho từng cạnh riêng biệt (top, right, bottom, left).
- Giá trị auto được sử dụng để tự động căn giữa phần tử theo chiều ngang.
Ví dụ:

div {

margin: 10px; /* Tất cả các cạnh có margin 10px */

}

h1 {

margin-bottom: 20px; /* Chỉ có margin ở cạnh dưới */

}

.content {

margin: 0 auto; /* Căn giữa phần tử theo chiều ngang */

}

Nguồn: SGK Tin học 12, Cánh Diều.

Nhiệm vụ 4. Thực hiện bài tập thực hành theo các yêu cầu sau đây:

Bước 1. Tạo một file HTML có tên là box-model.html.

Bước 2. Trong file HTML, tạo ba thẻ div với nội dung bất kỳ (ví dụ: "Hộp 1", "Hộp 2", "Hộp 3").

Bước 3. Tạo một file CSS có tên là style.css và liên kết nó với file box-model.html.

Bước 4. Trong file style.css, áp dụng các thuộc tính CSS sau cho mỗi thẻ div:

width và height để đặt kích thước cho hộp.
background-color để đặt màu nền cho hộp.
border để tạo đường viền cho hộp.
padding để tạo khoảng trống bên trong hộp.
margin để tạo khoảng trống bên ngoài hộp.

Bước 5. Thử nghiệm với các giá trị khác nhau cho các thuộc tính padding và margin để quan sát sự thay đổi trong bố cục của các hộp.

Bước 6. Thêm một thẻ div bao bọc ba thẻ div trên và áp dụng các thuộc tính CSS để căn giữa các hộp theo chiều ngang.

Page updated

Google Sites

Report abuse