Bài 11. HTML: chèn hình ảnh và tạo bảng
Một trang web chỉ toàn chữ khó truyền tải được nhiều loại thông tin. Bài học này giới thiệu hai công cụ giúp trang web sinh động và rõ ràng hơn: thẻ <img> để chèn hình ảnh, và bộ ba thẻ <table>, <tr>, <th>/<td> để trình bày dữ liệu theo hàng và cột.
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F3. Tạo bảng và khung trong trang web HTMLtr. 81
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F3. Tạo bảng và khung trong trang web với HTMLtr. 114
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểutr. 50
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểutr. 50
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 9. Tạo danh sách, bảngtr. 52–56
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 9. Tạo danh sách, bảngtr. 52
Bắt đầu bằng một hình dung
Hãy tưởng tượng bạn đang làm một tờ báo tường cho lớp. Trên tờ giấy, bạn cần làm hai việc: dán một tấm ảnh chụp hoạt động của lớp vào một góc, và kẻ một bảng ô vuông ở góc khác để ghi kết quả thi đua giữa các tổ theo từng tuần. Dán ảnh và kẻ bảng là hai thao tác rất khác nhau - một bên là gắn nguyên một tấm ảnh có sẵn vào đúng chỗ, một bên là tự tay kẻ từng ô, từng hàng, từng cột sao cho thẳng thớm.
Trên một trang HTML, ta cũng có đúng hai công cụ tương ứng cho hai việc đó: thẻ <img> lo phần “dán ảnh”, còn bộ ba thẻ <table>, <tr>, <th>/<td> lo phần “kẻ bảng”. Bài học này sẽ đi qua cách dùng cả hai.
Nội dung bài học
- Chèn hình ảnh: thẻ <img>
- Tạo bảng: thẻ <table>, <tr>, <th>, <td>
Tóm tắt lý thuyết cần nhớ
- Thẻ
<img>là thẻ tự đóng dùng để chèn ảnh; thuộc tínhsrctrỏ tới nguồn ảnh,altlà chữ mô tả hiện ra khi ảnh lỗi và được phần mềm đọc màn hình đọc lên,widthdùng để thu nhỏ hoặc phóng to kích thước hiển thị. - Một bảng được dựng từ ba loại thẻ lồng nhau:
<table>bao ngoài cùng,<tr>tạo ra một hàng,<th>/<td>tạo ra một ô tiêu đề hoặc ô dữ liệu bên trong hàng đó. - Số hàng do số cặp
<tr>quyết định, số cột do số ô<th>/<td>trong mỗi hàng quyết định; các hàng nên có cùng số ô để cột thẳng hàng, và hàng chứa<th>thường đặt lên đầu. - Bảng nên dùng để trình bày dữ liệu thật sự có hàng có cột; không nên lạm dụng
<table>để dàn bố cục trang, vì việc đó nên để cho công cụ khác đảm nhiệm.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| list-style-type | lít s-tai tai | kiểu dấu đầu dòng Thuộc tính CSS để chọn dấu ở đầu mỗi mục trong danh sách. |
| colspan | côn-span | gộp nhiều cột Dùng trong bảng để gộp một ô cho rộng ra, nằm đè lên nhiều cột. |
| rowspan | rô-span | gộp nhiều hàng Dùng trong bảng để gộp một ô cho cao ra, nằm đè lên nhiều hàng. |
| border | bo-đơ | đường viền Thuộc tính CSS để vẽ đường viền bao quanh một khối. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 24 câu, chấm điểm tự động và giải thích từng câu sai.
<img> khác với thẻ <p> ở điểm nào?<img>là thẻ tự đóng, không có thẻ đóng riêng đi kèm, còn<p>cần cặp<p>...</p><img>chỉ được phép đặt trong<head>, còn<p>chỉ được phép đặt trong<body><img>không thể có thuộc tính, còn<p>bắt buộc phải có thuộc tính<img>chỉ dùng để hiển thị chữ, còn<p>chỉ dùng để hiển thị ảnh
<img> là thẻ tự đóng - không bao nội dung ở giữa và không cần thẻ đóng riêng, khác với <p> vốn phải có cặp mở-đóng bao quanh đoạn văn. Cả hai đều đặt trong <body> và đều có thể mang thuộc tính (<img> có src, alt...); <img> dùng để hiển thị ảnh chứ không phải chữ.alt trong thẻ <img> dùng để làm gì?- Thu nhỏ kích thước ảnh hiển thị trên trang khi màn hình hẹp, thay cho việc phải đặt thuộc tính
width - Cho biết đường dẫn tới tệp ảnh cần hiển thị, còn
srcchỉ dùng để đặt tên gọi cho tấm ảnh - Cung cấp chữ mô tả thay thế, hiện ra khi ảnh không tải được và được phần mềm đọc màn hình đọc lên
- Đổi màu nền phía sau tấm ảnh cho hợp với màu chủ đạo của trang, thay cho thuộc tính
background
alt là chữ mô tả thay thế: hiện ra khi ảnh lỗi hoặc không tải được, đồng thời được phần mềm đọc màn hình đọc to cho người khiếm thị. Thu nhỏ ảnh là vai trò của width; chỉ đường dẫn tới tệp ảnh là vai trò của src chứ không phải để đặt tên gọi cho ảnh; còn đổi màu nền là việc của CSS (background), không liên quan gì đến alt.<table><tr><th><td>
<tr> tạo ra một hàng mới; mỗi cặp <tr>...</tr> viết thêm là thêm một hàng. <table> là khung bao cả bảng chứ không phải một hàng riêng lẻ; <th> và <td> tạo ra từng ô bên trong một hàng, không phải cả hàng.- a)Thẻ
<img>là thẻ tự đóng, không cần thẻ đóng</img>đi kèm.Đúng - b)Thuộc tính
srccủa thẻ<img>dùng để mô tả nội dung ảnh cho người khiếm thị.Sai - c)Trong một bảng, mỗi cặp
<tr>tương ứng với một hàng, còn mỗi<th>/<td>bên trong hàng đó tương ứng với một ô.Đúng - d)Nên dùng
<table>để chia cột trái phải, đặt menu và dàn toàn bộ bố cục cho trang web.Sai
- (a) Đúng -
<img>là thẻ tự đóng, không có thẻ đóng riêng. - (b) Sai - mô tả nội dung ảnh cho người khiếm thị là vai trò của
alt;srcchỉ dùng để chỉ đường dẫn tới tệp ảnh. - (c) Đúng - đây đúng là cách một bảng được dựng:
<tr>là hàng,<th>/<td>là ô bên trong hàng. - (d) Sai - dùng
<table>để dàn bố cục trang là cách lạm dụng không nên làm; bảng nên dành để trình bày dữ liệu thật sự có hàng có cột, còn việc dàn trang nên để cho công cụ khác đảm nhiệm.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 24 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.