CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP
CỦA MÁY TÍNH
TẠO TRANG WEB
BÀI 1: LÀM QUEN VỚI NGÔN NGỮ ĐÁNH DẤU
SIÊU VĂN BẢN

Mục tiêu bài học:
Nhận biết được một số khái niệm chính của ngôn ngữ
1 đánh dấu siêu văn bản: phần tử, thẻ mở, thẻ đóng.

2 Trình bày được cấu trúc của văn bản HTML.
Tạo
được
một
trang
web
đơn
giản
bằng
ngôn
ngữ
3
đánh dấu siêu văn bản.

Khởi động: Ai nhanh nhất
(CỘT A)

(CỘT B)

1) Trang web tĩnh

a) Phần mềm hổ trợ tạo trang web

2) Trang web động

b) Là trang web có nội dung không thay
đổi mỗi khi người dùng truy cập.

3) Phần mềm:
Dreamweaver, Mobirise,..
4) HTML

c) Là trang web có nội dung có thể thay
đổi tùy theo yêu cầu của người dùng.
d) Là ngôn ngữ chuyên dụng để tạo trang
web.

1. Ngôn ngữ đánh
dấu siêu văn bản

- HTML (HyperText Markup Language):
là ngôn ngữ đánh dấu siêu văn bản được
sử dụng để tạo và cấu trúc nội dung trang
web.

HĐ1: Tìm hiểu ngôn ngữ đánh dấu siêu văn bản HTML

PHIẾU HỌC TẬP SỐ 1

1. Ngôn ngữ đánh
dấu siêu văn bản

1/Thông qua các phần tử, HTML cho phép khai
báo các thành phần nào của trang web?
2/Mỗi phần tử thường được khai báo bắt đầu
bằng thẻ nào và kết thúc bằng thẻ nào?
3/Thông thường cấu trúc của một phần tử HTML
được viết theo cú pháp nào?
4/Các phần tử , , … có gì đặc biệt ?
5/Thuộc tính của phần tử được khai báo trong thẻ
mở theo cú pháp như thế nào?

1. Ngôn ngữ đánh dấu siêu văn bản

Câu hỏi
Trả lời
1/Thông qua các phần tử, HTML cho
Tiêu đề mục, đoạn văn, bảng biểu, hình ảnh,
phép khai báo các thành phần nào
âm thanh và các siêu liên kết,…
của trang web?
2/Mỗi phần tử thường được khai báo
bắt đầu bằng thẻ nào và kết thúc bằng Khai báo bắt đầu bằng thẻ mở (< >) và kết
thúc bằng thẻ đóng ()
thẻ nào?
3/Thông thường cấu trúc của một Thẻ mở Văn bản và/hoặc các phần tử khác Thẻ đóng
phần tử HTML được viết theo cú
pháp nào?
 
Phần nội dung
4/Các phần tử , , … có gì
đặc biệt ?
5/Thuộc tính của phần tử được khai
báo trong thẻ mở theo cú pháp như thế
nào?

Không sử dụng thẻ đóng để kết thúc khai báo
Tên thuộc tính = “giá trị”

2. Cấu trúc của một văn bản HTML
Hoạt động 2: Tìm hiểu cấu trúc của một văn bản HTML

2. Cấu trúc của một văn bản HTML
Hoạt động 2: Tìm hiểu cấu trúc của một văn bản HTML
PHIẾU HỌC TẬP SỐ 2
Câu 1: Toàn bộ cấu trúc và nội dung của một trang web được viết trong cặp
thẻ nào?
Câu 2: Nội dung trang web thường được chia thành mấy phần?
Câu 3: Phần đầu của trang web được xác định bởi phần tử nào?
Câu 4: Phần thân của trang web được xác định bởi phần tử nào?
Câu 5:
a/Phần nội dung của phần tử nào sẽ hiển thị trên thanh tiêu đề của cửa sổ trình
duyệt web?
b/Phần nội dung của phần tử nào sẽ hiển thị trong màn hình của cửa sổ trình
duyệt web?

2. Cấu trúc của một văn bản HTML

Hoạt động 2: Tìm hiểu cấu trúc của một văn bản HTML
PHIẾU HỌC TẬP SỐ 2
Câu 1: Toàn bộ cấu trúc và nội dung của một trang web được viết trong cặp thẻ:
……………………………………………….

Câu 2: ND trang web thường được chia thành 2 phần: …………………………
Câu 3: Phần đầu của trang web được xác định bởi phần tử nào?.………………
Câu 4: Phần thân của trang web được xác định bởi phần tử nào?.………………
Câu 5:
a/Phần nội dung của phần tử nào sẽ hiển thị trên thanh tiêu đề của cửa sổ trình
duyệt web?
…………………………
b/Phần nội dung của phần tử nào sẽ hiển thị trong màn hình của cửa sổ trình
duyệt web?
…………………………

2. Cấu trúc của một văn bản HTML

2. Cấu trúc của một văn bản HTML
Hoạt động 2: Tìm hiểu cấu trúc của một văn bản HTML
- Toàn bộ cấu trúc và nội dung của một trang web được viết trong cặp thẻ:
thẻ mở và thẻ đóng
……………………………………………….

phần đầu và phần thân
- ND trang web thường được chia thành 2 phần: …………………………
Phần tử head
- Phần đầu của trang web được xác định bởi phần tử nào?.………………
Phần tử body
- Phần thân của trang web được xác định bởi phần tử nào?.………………
- Phần nội dung của phần tử nào sẽ hiển thị trên thanh tiêu đề của cửa sổ trình
Phần
tử title
duyệt web?
…………………………
- Phần nội dung của phần tử nào sẽ hiển thị trong màn hình của cửa sổ trình
Phần
tử body
duyệt web?
…………………………

2. Cấu trúc của một văn bản HTML

LUYỆN TẬP

Câu 1: Tên thẻ HTML có phân biệt chữ hoa và chữ thường
không?
A. Có phân biệt
B. Không phân biệt
C. Chỉ phân biệt trong các trình duyệt khác nhau
D. Phân biệt trong các phiên bản khác nhau

LUYỆN TẬP
Câu 2:  Phần tử nào được sử dụng để xác định phần đầu
của một văn bản HTML?
A. body
B. footer
C. head
D. header

LUYỆN TẬP

Câu 3:Phần tử nào được sử dụng để xác định tiêu đề trang web?
A. body
B. footer
C. head
D. title

LUYỆN TẬP

Câu 4: Phần tử nào được sử dụng để xác định phần thân của một
văn bản HTML?
A. body
B. footer
C. head
D. header

LUYỆN TẬP

Câu 5: Trong các khai báo cấu trúc văn bản HTML sau, khai
báo nào đúng cú pháp ?
A.
B. >
C.
D.

LUYỆN TẬP
Câu 6: Ngôn ngữ đánh dấu siêu văn bản (HTML) có các đặc điểm
sau đúng hay sai?
a)
S Thẻ HTML thường không kết thúc bằng thẻ đóng.
Đ Tên thẻ HTML không phân biệt chữ hoa và chữ thường.
b)

c)
Đ Phần đầu của một văn bản HTML được xác định bởi cặp thẻ
và .
S Thẻ chứa các siêu dữ liệu và tiêu đề của trang web.
d)

Bài 1. LÀM QUEN VỚI NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN

NHIỆM VỤ VỀ NHÀ
1 Tìm hiểu các bước cài đặt phần mềm Sublime Text để
tự cài đặt trên máy tính HS vào tiết tới.

2 Tìm hiểu các bước soạn thảo văn bản HTML bằng
phần mềm Sublime Text.

3 Tìm hiểu cú pháp khai báo thuộc tính cho phần tử.

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP
CỦA MÁY TÍNH
TẠO TRANG WEB
BÀI 1: LÀM QUEN VỚI NGÔN NGỮ ĐÁNH DẤU
SIÊU VĂN BẢN

3. THỰC HÀNH TẠO TRANG WEB ĐƠN GIẢN
Yêu cầu 1: Cài đặt phần mềm Sublime Text
https://sublimetext.com
(Xem SGK trang 38)
Yêu cầu 2: Sử dụng phần mềm Sublime Text để soạn một văn bản
HTML sao cho khi mở văn bản bằng trình duyệt web, trên màn hình
hiển thị dòng chữ: “Chủ đề F: Tạo trang web”
D:/12B3HUNG/trangwebdautien.html

4. VẬN DỤNG

- Câu 3(trang 39). Chú ý: lưu với tên “trangwebthienphuc.html”
- Hãy tạo 1 trang web giới thiệu về môn học mà em yêu thích nhất.

2. Cấu trúc của một văn bản HTML

Bài 1. LÀM QUEN VỚI NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN