12_Lesson1.CDF
Presentation
•
Computers
•
1st Grade
•
Practice Problem
•
Medium
Phong Thanh
Used 14+ times
FREE Resource
11 Slides • 33 Questions
1
Làm quen với ngôn ngữ đánh dấu siêu văn bản
2
Làm quen với ngôn ngữ đánh dấu siêu văn bản
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 dùng để xây dựng và trình bày cấu trúc của một trang web tĩnh. Trang web tĩnh thường có nội dung cố định, không thay đổi khi người dùng truy cập, không phản hồi tương tác của người dùng.
-Một trang web tĩnh có thể chỉ là một tập hợp các trang HTML đơn giản hiển thị nội dung mà không có bất kỳ chức năng tương tác nào.
-Để tạo trang web, người dùng có thể sử dụng các phần mềm như Mobirise, Dreamweaver, hoặc tạo trang web trực tiếp bằng cách viết mã HTML.
3
Làm quen với ngôn ngữ đánh dấu siêu văn bản
1. Ngôn ngữ đánh dấu siêu văn bản
HTML cho phép khai báo các thành phần của trang web như:
Tiêu đề (heading)
Đoạn văn (paragraph)
Bảng biểu (table)
Hình ảnh (image)
Âm thanh (audio)
Siêu liên kết (hyperlink)
Các thành phần HTML được biểu diễn bằng thẻ (tag), được đặt giữa cặp dấu “<>”. Thẻ này giúp trình duyệt web hiểu và hiển thị nội dung của trang.
4
Làm quen với ngôn ngữ đánh dấu siêu văn bản
1. Ngôn ngữ đánh dấu siêu văn bản
-Một phần tử HTML thường có cấu trúc:
<ten-phan-tu> Nội dung </ten-phan-tu>
-Ví dụ: <p>Đây là một đoạn văn</p>
-Một số phần tử không cần thẻ đóng như: <img>, <meta>, <input>, được gọi là phần tử tự đóng.
-Các thẻ HTML có thể có thuộc tính để cung cấp thêm thông tin, tuy nhiên thuộc tính là tùy chọn. Cú pháp khai báo thuộc tính:
<ten-phan-tu thuoc-tinh="gia-tri"> Nội dung </ten-phan-tu>
Ví dụ: <img src="image.jpg" alt="Mo ta hinh anh">
5
Làm quen với ngôn ngữ đánh dấu siêu văn bản
1. Ngôn ngữ đánh dấu siêu văn bản
6
Multiple Choice
Phương án nào sau đây chỉ ra đúng vị trí đặt thuộc tính?
Nằm trong thẻ đóng, sau tên thẻ.
Nằm sau nội dung, trước thẻ đóng.
Nằm sau thẻ mở, trước nội dung.
Nằm trong thẻ mở, sau tên thẻ.
7
Multiple Choice
HTML là gì?
Ngôn ngữ lập trình
Ngôn ngữ đánh dấu siêu văn bản
Phần mềm thiết kế web
Giao thức truyền tải dữ liệu
8
Multiple Choice
HTML thường được dùng để tạo loại trang web nào?
Trang web động
Ứng dụng di động
Trò chơi trực tuyến
Trang web tĩnh
9
Multiple Choice
Cặp dấu nào được dùng để tạo thẻ (tag) trong HTML?
{}
[]
<>
()
10
Multiple Choice
Thẻ HTML nào dưới đây không cần thẻ đóng?
<p>
<img>
<div>
<a>
11
Multiple Choice
Cú pháp của một thuộc tính trong thẻ HTML là gì?
ten-phan-tu:"gia-tri"
ten-thuoc-tinh=gia-tri
ten-thuoc-tinh="gia-tri"
gia-tri="ten-thuoc-tinh"
12
Multiple Choice
Vì sao HTML được gọi là ngôn ngữ đánh dấu siêu văn bản?
Vì HTML dùng để thiết kế đồ họa
Vì HTML cho phép đánh dấu và định dạng các thành phần trên trang web, tạo ra cấu trúc trang
Vì HTML có thể thay đổi nội dung trang web động
Vì HTML là ngôn ngữ lập trình
13
Multiple Choice
Điều gì xảy ra nếu một thẻ HTML không có thẻ đóng (nếu thẻ đó yêu cầu thẻ đóng)?
Trình duyệt sẽ tự động thêm thẻ đóng vào
Nội dung bên trong thẻ đó sẽ không hiển thị đúng cách
Trình duyệt sẽ bỏ qua thẻ đó và tiếp tục chạy các thẻ khác
Trình duyệt sẽ báo lỗi và dừng việc tải trang web
14
Multiple Choice
Tại sao các thuộc tính trong HTML thường không bắt buộc phải khai báo?
Vì thuộc tính chỉ là tùy chọn và chỉ dùng khi cần thiết để điều chỉnh thông tin hoặc định dạng cụ thể
Vì thuộc tính có thể gây lỗi trang web
Vì thuộc tính không có tác dụng trong HTML
Vì HTML chỉ hỗ trợ một số thuộc tính nhất định
15
Làm quen với ngôn ngữ đánh dấu siêu văn bản
2. Cấu trúc của một văn bản HTML
Cấu trúc cơ bản của một văn bản HTML được đặt trong cặp thẻ <html> và </html>. Văn bản HTML gồm hai phần chính:
Phần đầu (head):
Được xác định bởi cặp thẻ <head> và </head>.
Phần này chứa các thông tin quan trọng về trang web như tiêu đề (title), siêu dữ liệu (metadata), nhưng không hiển thị trực tiếp trong cửa sổ trình duyệt.
Ví dụ, thẻ <title> trong phần <head> giúp đặt tên trang web hiển thị trên tab trình duyệt.
16
Làm quen với ngôn ngữ đánh dấu siêu văn bản
2. Cấu trúc của một văn bản HTML
Cấu trúc cơ bản của một văn bản HTML được đặt trong cặp thẻ <html> và </html>. Văn bản HTML gồm hai phần chính:
Phần thân (body):
Được xác định bởi cặp thẻ <body> và </body>.
Toàn bộ nội dung mà người dùng nhìn thấy trên trang web, như văn bản, hình ảnh, bảng biểu và liên kết, sẽ được đặt trong phần thân và hiển thị trong trình duyệt.
17
Làm quen với ngôn ngữ đánh dấu siêu văn bản
2. Cấu trúc của một văn bản HTML
Ví dụ cấu trúc HTML cơ bản:
Trong ví dụ này, thẻ <title> đặt tiêu đề cho trang web, trong khi nội dung chính trong <body> sẽ hiển thị cho người dùng.
18
Multiple Choice
Tất cả nội dung của một tài liệu HTML phải nằm trong cặp thẻ nào?
<body>...</body>
<head>...</head>
<html>...</html>
<title>...</title>
19
Multiple Choice
Phần nào trong HTML chứa nội dung sẽ được hiển thị trên trình duyệt?
<html>
<head>
<title>
<body>
20
Multiple Choice
Thẻ nào dưới đây dùng để đặt tiêu đề của trang web hiển thị trên tab của trình duyệt?
<h1>
<meta>
<title>
<header>
21
Multiple Choice
Phần đầu của trang HTML, nơi chứa tiêu đề và siêu dữ liệu, được đặt trong cặp thẻ nào?
<head>...</head>
<body>...</body>
<html>...</html>
<title>...</title>
22
Multiple Choice
Thông tin nào dưới đây không được hiển thị trực tiếp trong trình duyệt?
Nội dung trong thẻ <head>
Nội dung trong thẻ <body>
Nội dung trong thẻ <h1>
Nội dung trong thẻ <p>
23
Multiple Choice
Thẻ <meta charset="UTF-8"> có chức năng gì?
Đặt tiêu đề trang
Đặt ngôn ngữ hiển thị là tiếng Anh
Đặt bảng mã ký tự để hiển thị đúng các ký tự đặc biệt
Đặt hình nền cho trang
24
Multiple Choice
Thẻ nào dưới đây dùng để hiển thị nội dung chính của trang web cho người dùng?
<head>
<html>
<body>
<meta>
25
Multiple Choice
Phần tử nào chứa các thẻ không hiển thị trực tiếp nội dung trong trang web mà cung cấp thông tin về tài liệu?
<html>
<head>
<body>
<footer>
26
Multiple Choice
Từ khóa nào dùng để khai báo tài liệu HTML và cho biết phiên bản HTML đang sử dụng?
<html>
<meta>
<!DOCTYPE html>
<header>
27
Multiple Choice
Thẻ nào dưới đây không nằm trong phần <head> của tài liệu HTML?
<title>
<meta>
<h1>
<link>
28
LUYỆN TẬP
29
Multiple Choice
Đoạn mã sau hiển thị gì trong trang web?
<h1>Chào mừng đến với trang web của tôi</h1>
Một hình ảnh
Một siêu liên kết
Một đoạn văn bản lớn
Một tiêu đề lớn
30
Multiple Choice
Thẻ nào dùng để tạo siêu liên kết trong HTML?
<link>
<img>
<a>
<p>
31
Multiple Choice
Đoạn mã sau dùng để chèn hình ảnh, giá trị nào cần thay đổi để hiển thị hình ảnh khác?
<img src="image.jpg" alt="Mo ta hinh anh">
src
alt
href
class
32
Multiple Choice
Thẻ nào dưới đây được dùng để tạo một đoạn văn bản trong HTML?
<title>
<p>
<h1>
<body>
33
Multiple Choice
Tại sao cần phải có thẻ <title> trong phần <head> của tài liệu HTML?
Để tạo tiêu đề hiển thị trong nội dung trang
Để hiển thị tiêu đề của trang web trên tab của trình duyệt
Để định dạng toàn bộ văn bản trong trang web
Để hiển thị thông báo cho người dùng khi tải trang
34
Multiple Choice
Thẻ <meta charset="UTF-8"> trong phần <head> của tài liệu HTML có tác dụng gì?
Định dạng văn bản thành chữ in nghiêng
Thiết lập ngôn ngữ của trang thành tiếng Anh
Xác định bảng mã ký tự để hiển thị đúng các ký tự đặc biệt
Thay đổi màu sắc của trang web
35
Multiple Choice
Khi sử dụng thẻ <a href="https://www.example.com">, thuộc tính href có ý nghĩa gì?
Chỉ định văn bản hiển thị cho liên kết
Chỉ định địa chỉ URL mà liên kết sẽ dẫn tới
Định dạng liên kết thành chữ in đậm
Định vị trí của liên kết trên trang web
36
Multiple Choice
Tại sao <head> và <body> cần được tách riêng trong cấu trúc HTML?
Để dễ đọc mã nguồn hơn
Để trình duyệt hiểu và hiển thị nội dung và siêu dữ liệu một cách riêng biệt
Để tránh lỗi trong mã HTML
Để trang tải nhanh hơn
37
Multiple Choice
Điều gì sẽ xảy ra nếu bạn đặt nội dung hiển thị vào phần <head> thay vì <body>?
Nội dung có thể không hiển thị, hoặc trình duyệt sẽ bỏ qua
Nội dung sẽ hiển thị bình thường
Nội dung sẽ xuất hiện dưới dạng văn bản HTML thô
Trình duyệt sẽ báo lỗi và không tải trang
38
Multiple Choice
Lý do nào giúp <meta charset="UTF-8"> là một phần quan trọng trong thẻ <head>?
Nó giúp đặt tiêu đề cho trang
Nó xác định ngôn ngữ của trang web
Nó thay đổi màu nền của trang web
Nó đảm bảo các ký tự đặc biệt hiển thị đúng cách trên nhiều trình duyệt
39
Multiple Choice
Tại sao phần <title> thường được đặt trong <head> mà không phải trong <body>?
Để giúp tiêu đề hiển thị ở đúng vị trí trên trình duyệt
Để tiết kiệm dung lượng trong phần <body>
Để tiêu đề không xuất hiện trên trang web
Để tiêu đề có thể định dạng riêng
40
Multiple Choice
Khi xây dựng trang web, tại sao nên sử dụng cấu trúc cơ bản của HTML với thẻ <html>, <head>, và <body>?
Để tránh gặp lỗi khi hiển thị trên trình duyệt
Để thêm nội dung động vào trang
Để cấu trúc HTML có thể chạy trên mọi hệ điều hành
Để dễ dàng sao chép trang web sang các ngôn ngữ khác
41
Multiple Choice
Nếu bạn muốn tạo một trang web có tiêu đề hiển thị là "Trang Chủ" và có đoạn văn "Xin chào!", bạn sẽ đặt mã này vào các phần nào?
<title> trong <head> cho tiêu đề và <p> trong <body> cho đoạn văn
<h1> trong <body> cho tiêu đề và <p> trong <body> cho đoạn văn
<header> trong <head> cho tiêu đề và <footer> cho đoạn văn
<title> trong <body> cho tiêu đề và <p> trong <head> cho đoạn văn
42
Multiple Choice
Đoạn mã dưới đây có ý nghĩa gì đối với tài liệu HTML?
<!DOCTYPE html>
Cho biết đây là trang web động
Cho biết đây là tài liệu HTML và chỉ định phiên bản HTML5
Định nghĩa định dạng văn bản
Định nghĩa ngôn ngữ trang web là tiếng Anh
43
THỰC HÀNH
44
THỰC HÀNH
Nhập nội dung vào SublimeText và xem kết quả
Làm quen với ngôn ngữ đánh dấu siêu văn bản
Show answer
Auto Play
Slide 1 / 44
SLIDE
Similar Resources on Wayground
40 questions
MATH GR1/SK: LEFT RIGHT, GREATER THAN LESS THAN 1-20
Presentation
•
KG - 1st Grade
43 questions
Bài 6 Thư mục
Presentation
•
2nd Grade
45 questions
Lớp 4. CĐ 5. Bài 1. Bước đầu làm quen với Logo (tiết 1)
Presentation
•
1st Grade
36 questions
Review Lesson
Presentation
•
2nd Grade
37 questions
Dieta Hiperproteica
Presentation
•
1st - 3rd Grade
42 questions
BG TH11 KNTT T1-2 B1
Presentation
•
1st Grade
37 questions
Vinyl project
Presentation
•
2nd Grade
Popular Resources on Wayground
16 questions
Grade 3 Simulation Assessment 2
Quiz
•
3rd Grade
19 questions
HCS Grade 5 Simulation Assessment_1 2526sy
Quiz
•
5th Grade
10 questions
Cinco de Mayo Trivia Questions
Interactive video
•
3rd - 5th Grade
17 questions
HCS Grade 4 Simulation Assessment_2 2526sy
Quiz
•
4th Grade
24 questions
HCS Grade 5 Simulation Assessment_2 2526sy
Quiz
•
5th Grade
13 questions
Cinco de mayo
Interactive video
•
6th - 8th Grade
20 questions
Math Review
Quiz
•
3rd Grade
30 questions
GVMS House Trivia 2026
Quiz
•
6th - 8th Grade
Discover more resources for Computers
20 questions
Telling Time to the Hour and Half hour
Quiz
•
1st Grade
16 questions
Counting Coins counting money
Quiz
•
1st - 2nd Grade
20 questions
Halves and Fourths
Quiz
•
1st Grade
22 questions
2D & 3D Shapes & Attributes
Quiz
•
1st Grade
13 questions
Money
Quiz
•
1st Grade
20 questions
Addition and Subtraction facts
Quiz
•
1st - 3rd Grade
15 questions
Place Value tens and ones
Quiz
•
1st Grade
78 questions
SC Ready Reading Assessment Vocabulary
Quiz
•
1st - 5th Grade