Trường THPT PCT
Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống
<a>.Em hãy nêu sự khác biệt giữa việc đọc trang web và đọc sách, báo giấy. Theo em, điểm khác biệt quan trọng nhất là gì?
Siêu văn bản (Hypertext) là văn bản có chứa liên kết tới tài liệu khác. Các liên kết được tạo bằng thẻ <a>.
<a href="https://www.google.com">Truy cập Google</a>
Câu hỏi nhanh: Thẻ nào dùng để tạo liên kết trong HTML?
| Loại | Ví dụ | Đặc điểm |
|---|---|---|
| Tuyệt đối | https://www.moet.gov.vn | Đầy đủ địa chỉ website, truy cập từ mọi nơi. |
| Tương đối | html/bai10.html | Dẫn tới tệp trong cùng thư mục website. |
<a href="https://moet.gov.vn">Bộ GD&ĐT</a>
<a href="#cuoi_trang">Đến cuối trang</a>
<h3 id="cuoi_trang">Phần cuối trang</h3>
<a href="https://jotun.com"> <img src="logo.png" width="120"> </a>
<a href="#CLB">Theo dõi hoạt động các CLB thể thao</a> <h2 id="CLB">Lịch hoạt động CLB thể thao</h2>
<a href="thong_tin.html">Trang thông tin CLB</a>
<a href="mailto:info@rcomstudio.vn">Gửi email</a>
<a href="tai_lieu.pdf" download>Tải tài liệu PDF</a>
<a href="tel:+84987654321">Gọi cho tôi</a>
Môn: Tin học 12 | Thời lượng: 45 phút | SGK: Kết nối tri thức với cuộc sống
<a> để tạo các loại liên kết khác nhau.Liên kết (Hyperlink) là thành phần giúp người dùng di chuyển giữa các trang web hoặc vị trí trong cùng một trang.
<a href="https://www.google.com">Truy cập Google</a>
Giải thích:
- <a> là thẻ tạo liên kết.
- href là thuộc tính chỉ địa chỉ trang đích.
- Nội dung giữa thẻ <a> ... </a> là phần có thể nhấp được.
<a href="https://rcomdanyi.edu.vn" target="_blank">Trang học trực tuyến</a>
<a href="#phan2">Chuyển tới phần 2</a>
...
<h2 id="phan2">Phần 2: Kiến thức nâng cao</h2>
<a href="tailieu/bai10.pdf" download>Tải bài giảng PDF</a>
<a href="mailto:gv.tinhoc@rcomdanyi.edu.vn">Gửi email cho giáo viên</a>
Viết mã HTML để tạo ba liên kết:
<a href="https://www.google.com">Truy cập Google</a><br> <a href="#phan2">Xem phần 2</a><br> <a href="Bai10.pdf" download>Tải bài giảng</a>
Thuộc tính target quy định cách mở liên kết:
_blank: Mở trang trong cửa sổ/tab mới._self: Mở trong cùng khung (mặc định).<a>.
- Thuộc tính href là địa chỉ đích.
- Có thể tạo liên kết đến trang, phần trong trang, tệp, email hoặc số điện thoại.
Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống
Quan sát hai đoạn văn bản sau:
Trong HTML, danh sách giúp sắp xếp nội dung thành các mục dễ đọc. Có 3 loại danh sách:
<ol><ul><dl>, <dt>, <dd><ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol>
Bảng HTML được tạo bằng các thẻ <table>, <tr>, <th>, <td>.
<table border="1"> <tr><th>Họ tên</th><th>Toán</th></tr> <tr><td>Lan</td><td>9</td></tr> </table>
<th> dùng để tạo ô dữ liệu.<th rowspan="2">Họ tên</th> <th colspan="2">Điểm</th>
Thời gian: 7 phút. Nhập tên học sinh để bắt đầu.
Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống
Quan sát hai đoạn văn bản sau:
Trong HTML, danh sách giúp sắp xếp nội dung thành các mục dễ đọc. Có 3 loại danh sách:
<ol> (Ordered List).<ul> (Unordered List).<dl>, <dt>, <dd>.<h3>Danh sách có thứ tự</h3> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <h3>Danh sách không thứ tự</h3> <ul> <li>Chuối</li> <li>Táo</li> <li>Cam</li> </ul>
Bảng HTML được tạo bằng các thẻ sau:
<table>: Tạo bảng.<tr>: Tạo hàng.<th>: Ô tiêu đề.<td>: Ô dữ liệu.<table border="1"> <tr><th>Họ tên</th><th>Toán</th><th>Lý</th></tr> <tr><td>Lan</td><td>9</td><td>8</td></tr> </table>
Ví dụ hiển thị:
| Họ tên | Toán | Lý |
|---|---|---|
| Lan | 9 | 8 |
<th> dùng để tạo ô dữ liệu.
<table border="1">
<tr>
<th rowspan="2">Họ tên</th>
<th colspan="2">Điểm</th>
</tr>
<tr><th>Toán</th><th>Lý</th></tr>
</table>
rowspan để gộp hàng.
- Dùng colspan để gộp cột.
Bài 1: Tạo bảng điểm gồm 3 học sinh, mỗi cột là Toán – Lý – Hóa.
Bài 2: Dùng thuộc tính style để đổi màu viền bảng thành màu xanh.
Ứng dụng Python để sinh tệp HTML tự động:
data = [
("Lan", 9, 8, 7),
("Mai", 8, 7, 8)
]
html = "<table border='1'><tr><th>Họ tên</th><th>Toán</th><th>Lý</th><th>Hóa</th></tr>"
for row in data:
html += "<tr>" + "".join(f"<td>{c}</td>" for c in row) + "</tr>"
html += "</table>"
open("bang_diem.html","w",encoding="utf-8").write(html)
Thời gian: 7 phút. Nhập tên học sinh để bắt đầu.
Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống
Chúng ta đã từng xem nhiều trang Web khác nhau. Em có bao giờ thắc mắc các trang Web đó được tạo bằng gì chưa?
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản dùng để xây dựng cấu trúc trang Web.
<html> <head> <title>Trang đầu tiên</title> </head> <body> <h1>Chào mừng đến với Website của tôi!</h1> <p>Đây là đoạn văn đầu tiên.</p> </body> </html>
| Phần tử | Ý nghĩa | Ghi chú |
|---|---|---|
| <html> | Phần tử gốc | Chứa toàn bộ nội dung |
| <head> | Phần đầu | Chứa tiêu đề, CSS, script |
| <body> | Phần thân | Hiển thị nội dung chính |
| <p> | Đoạn văn bản | Tách đoạn văn |
| <h1> | Tiêu đề lớn | Từ <h1> đến <h6> |
html
├── head
│ └── title
└── body
├── h1
└── p
Yêu cầu: Tạo trang HTML giới thiệu bản thân.
<html> <head><title>Giới thiệu bản thân</title></head> <body> <h1>Xin chào, tôi là Nguyễn Minh!</h1> <p>Tôi học lớp 12A, trường THPT Phan Chu Trinh.</p> </body> </html>
Đề bài: Tạo trang Web “Lịch sử phát triển HTML” có hình minh họa.
<html> <head><title>Lịch sử phát triển HTML</title></head> <body> <h2>Lịch sử phát triển HTML</h2> <p>HTML được phát triển bởi Tim Berners-Lee vào năm 1991.</p> <img src="html_logo.png" alt="HTML Logo" width="200"> </body> </html>
Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống
<h1>–<h6>, <p>, <b>, <i>, <u>, <font>…Quan sát hai đoạn văn bản trong Hình 8.1 SGK:
Mỗi thẻ HTML có thể kèm các thuộc tính (attributes) để điều chỉnh hiển thị. Ví dụ:
<p align="center">Đoạn văn bản căn giữa</p>
| Thẻ | Ý nghĩa | Ví dụ |
|---|---|---|
| <h1>...</h1> | Tiêu đề lớn | Bài học hôm nay |
| <p>...</p> | Đoạn văn | Đây là một đoạn văn. |
| <div>...</div> | Khối nội dung | Phần riêng biệt |
| <br> | Ngắt dòng | Dòng 1 Dòng 2 |
| Thẻ | Tác dụng | Ví dụ |
|---|---|---|
| <b> | In đậm | Quan trọng |
| <i> | In nghiêng | Chú thích |
| <u> | Gạch chân | Từ khóa |
| <font color="red" face="Arial"> | Định dạng màu và phông chữ | Xin chào! |
<p>Thẻ p tạo đoạn nội dung</p> <p>Thẻ div tạo khối chứa dữ liệu</p> <p>Các thẻ này <br> không có hình thức trình bày riêng</p>
Nhận xét: <p> tạo khoảng cách dòng, còn <br> chỉ ngắt dòng tạm thời.
<p> cho đoạn văn, <br> cho xuống dòng ngắn.
Bài 1: Sửa đoạn sau để làm nổi bật ý chính:
<p>Học HTML giúp tạo ra trang web sinh động.</p>
Đáp án:
<p><b>Học HTML</b> giúp tạo ra <i>trang web sinh động</i>.</p>
Bài 2: Trình bày đoạn văn sau in đậm:
HTML là ngôn ngữ đánh dấu siêu văn bản dùng để tạo trang Web.
<p><b>HTML là ngôn ngữ đánh dấu siêu văn bản dùng để tạo trang Web.</b></p>
Đề bài: Viết mã HTML để trình bày đoạn văn bản sau:
Bài thơ “Mùa xuân nho nhỏ”
Tác giả: Thanh Hải
Một mùa xuân nho nhỏ
Lặng lẽ dâng cho đời.
Yêu cầu:
- Tiêu đề in đậm, căn giữa.
- Tên tác giả in nghiêng.
- Bài thơ dùng thẻ <p> và <br>.
<!DOCTYPE html>
<html>
<head><title>Thực hành 1</title></head>
<body>
<h2 align="center"><b>Bài thơ: Mùa xuân nho nhỏ</b></h2>
<p align="center"><i>Tác giả: Thanh Hải</i></p>
<p>
Một mùa xuân nho nhỏ<br>
Lặng lẽ dâng cho đời<br>
Dù là tuổi hai mươi<br>
Dù là khi tóc bạc.
</p>
</body>
</html>
Kết quả hiển thị:
Tác giả: Thanh Hải
Một mùa xuân nho nhỏ
Lặng lẽ dâng cho đời
Dù là tuổi hai mươi
Dù là khi tóc bạc.
Đề bài: Thiết kế trang HTML giới thiệu bản thân, có:
<!DOCTYPE html>
<html>
<head>
<title>Giới thiệu bản thân</title>
</head>
<body style="font-family:Arial;">
<h1 style="color:#0078D7;">Xin chào! Mình là Nguyễn Văn A</h1>
<p style="color:#666;font-style:italic;">Mình là học sinh lớp 12 yêu thích công nghệ và thiết kế web.</p>
<h3>Sở thích của mình:</h3>
<ul>
<li>Lập trình web</li>
<li>Chụp ảnh</li>
<li>Đọc sách khoa học</li>
</ul>
<p style="color:#FF6600;font-weight:bold;">
“Không có giới hạn cho sự sáng tạo – chỉ có sự kiên trì.”
</p>
</body>
</html>
Nhiệm vụ: Lấy mã màu từ một bức ảnh và áp dụng làm màu tiêu đề bài thơ hoặc trang cá nhân.
#3399ff).style="color:#3399ff;" trong thẻ tiêu đề HTML.<h2 style="color:#3399ff;">Bài thơ mùa thu</h2>
I. Yêu cầu cần đạt
Nhận biết
- Biết khái niệm biểu mẫu trên
trang web
- Biết các thành phần cơ bản của biểu mẫu
- Biết cách hoạt động của biểu mẫu
Thông
hiểu
- Nắm vững cách tạo biểu mẫu với ứng dụng biểu mẫu của
Google
- Nắm vững cách nhúng được Google Forms vào trang
web.
- Nắm vững được cách xem dữ liệu thống kê phản hồi.
Vận dụng
Câu 1: Để tạo biểu mẫu trên
trang web, bạn cần sử dụng ứng dụng nào?
A. Google Docs
B. Google Slides C. Google Forms
D. Google Sheets
Câu 2: Khi tạo biểu mẫu trong
Google Forms, loại câu hỏi nào sau đây không có sẵn?
A. Câu hỏi mở
B. Trắc nghiệm
C. Câu trả lời ngắn D. Câu trả lời dài
Câu 3: Để nhúng biểu mẫu Google Forms vào trang web, bạn cần thực hiện
thao tác nào?
A. Chia sẻ qua email B. Sử dụng mã nhúng
(embed code)
C. Sao chép và dán liên kết
D. Tải xuống và tải lên lại
Câu 4: Khi nhúng biểu mẫu vào trang web, phần nào của biểu mẫu được
chèn vào?
A. Toàn bộ biểu
mẫu
B. Chỉ câu hỏi
C. Chỉ phần trả lời D. Chỉ tiêu đề
Câu 5: Để xem dữ liệu phản hồi từ biểu mẫu, bạn cần vào mục nào trong
Google Forms?
A. Câu hỏi
B. Cài đặt C. Câu trả lời
D. Trợ giúp
Câu 6: Để thay đổi giao diện của biểu mẫu, bạn cần vào mục nào trong
Google Forms?
A. Cài đặt
B. Câu hỏi C. Chủ đề
D. Trợ giúp
Câu 7: Tại sao việc sử dụng biểu mẫu trên trang web lại quan trọng?
A. Giúp thu thập thông tin từ người dùng một cách hiệu quả
B. Giúp giảm chi phí vận hành trang web
C. Giúp tăng tốc độ tải trang
D. Giúp tăng lượng truy cập trang web
Câu 8: Lợi ích của việc nhúng biểu mẫu vào trang web là gì?
A. Người dùng có thể điền
trực tiếp mà không cần rời trang web
B. Giúp trang web trông đẹp hơn
C. Giúp giảm chi phí vận hành trang web
D. Giúp tăng lượng truy cập trang web
Câu 9: Khi thiết kế biểu mẫu, tại sao cần chú ý đến giao diện và trải
nghiệm người dùng?
A. Để trang web trông đẹp hơn
B. Để giảm chi phí vận hành trang web
C. Để tăng lượng truy cập trang web
D. Để người dùng dễ
dàng điền thông tin và gửi phản hồi
Câu 10: Khi xem dữ liệu phản hồi từ biểu mẫu, tại sao cần phân tích kỹ
lưỡng?
A. Để tăng lượng truy cập trang web
B. Để rút ra thông tin
hữu ích và cải thiện trang web
C. Để trang web trông đẹp hơn
D. Để giảm chi phí vận hành trang web
Câu 11: Khi sử dụng biểu mẫu để thu thập thông tin, tại sao cần đảm bảo
tính bảo mật và riêng tư?
A. Để bảo vệ thông
tin cá nhân của người dùng
B. Để giảm chi phí vận hành trang web
C. Để trang web trông đẹp hơn
D. Để tăng lượng truy cập trang web
📌 Danh sách bình luận