Bài 10. HTML: văn bản, tiêu đề, danh sách và liên kết
Bài này giới thiệu năm loại thẻ HTML thường dùng nhất để trình bày chữ trên một trang web: tiêu đề, đoạn văn, chữ đậm/nghiêng, danh sách và liên kết. Nắm chắc năm loại thẻ này, bạn đã đủ khả năng dựng một trang thông tin đơn giản, đọc hiểu được và đúng cấu trúc.
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 2. Định dạng văn bản và tạo siêu liên kếttr. 40
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 2. Định dạng văn bản và tạo siêu liên kếttr. 40
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F2. Tạo và định dạng trang web với các thẻ HTMLtr. 73
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F2. Tạo và định dạng trang web với các thẻ HTMLtr. 106
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 3. Thực hành định dạng văn bản và tạo siêu liên kếttr. 46
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 3. Thực hành định dạng văn bản và tạo siêu liên kếttr. 46
Xem thêm 4 quyển
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 8. Định dạng văn bảntr. 46–51
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 8. Định dạng văn bảntr. 46
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 10. Tạo liên kếttr. 57–61
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 10. Tạo liên kếttr. 57
Bắt đầu bằng một hình dung
Hãy tưởng tượng bạn cần dán một tờ thông báo lên bảng tin của một khu chung cư: khu vực sẽ mất nước vào thứ Bảy, mọi người cần chuẩn bị trước. Khi viết tay tờ thông báo đó, bạn tự nhiên phân chia rất rõ ràng: dòng chữ ‘THÔNG BÁO’ được viết to nhất ở trên cùng để ai đi ngang cũng thấy; bên dưới là vài đoạn giải thích lý do và thời gian; tiếp theo là một danh sách gạch đầu dòng liệt kê những việc cần chuẩn bị; cuối tờ thông báo có một dòng nhỏ: ‘Xem lịch cúp nước chi tiết tại bảng tin cổng B’ - tức là chỉ sang một nơi khác để đọc thêm. Một trang web cũng được dựng theo đúng cách đó: thay vì to nhỏ bằng nét bút, HTML dùng các cặp thẻ để nói cho trình duyệt biết đoạn nào là tiêu đề, đoạn nào là văn bản thường, đoạn nào là danh sách, và đoạn nào là một liên kết dẫn sang trang khác.
Nội dung bài học
- Tiêu đề và đoạn văn: những khối chữ cơ bản nhất
- Danh sách: gom các ý thành từng dòng gọn gàng
- Liên kết: đưa người đọc sang một trang khác
Tóm tắt lý thuyết cần nhớ
<h1>đến<h6>tạo tiêu đề với sáu mức to nhỏ khác nhau (<h1>lớn nhất);<p>tạo đoạn văn;<strong>(đậm) và<em>(nghiêng) nhấn mạnh một phần chữ bên trong đoạn.<ul>tạo danh sách không thứ tự (dấu chấm tròn),<ol>tạo danh sách có thứ tự (đánh số tự động); mỗi mục trong cả hai đều nằm trong một thẻ<li>riêng.<a href="địa-chỉ">chữ hiển thị</a>tạo liên kết:hrefxác định trang đích, còn phần chữ nằm giữa hai thẻ là nội dung người đọc nhìn thấy và bấm vào.- Các thẻ phải lồng đúng thứ tự: thẻ nào mở sau phải đóng trước;
<li>phải nằm trong<ul>hoặc<ol>, còn<strong>/<em>phải đóng trước khi thẻ<p>chứa nó đóng lại.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| color | cơ-lơ | màu chữ Thuộc tính CSS để đặt màu cho chữ. |
| font-family | phông phe-mi-li | kiểu phông chữ Thuộc tính CSS để chọn kiểu (họ) phông chữ. |
| font-size | phông sai | cỡ chữ Thuộc tính CSS để đặt chữ to hay nhỏ. |
| href | hờ-rép | địa chỉ liên kết Là chỗ ghi địa chỉ trang web mà liên kết sẽ dẫn tới khi bấm vào. |
| URL | u-a-lờ | địa chỉ trang web Dòng chữ em gõ vào trình duyệt để đến đúng một trang web - giống địa chỉ nhà, mỗi trang chỉ có một, không trùng ai. |
| target | ta-gợt | nơi mở liên kết Cho biết liên kết sẽ mở ra ở đâu: ngay tab đang xem hay mở sang một tab mớ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ó đủ 27 câu, chấm điểm tự động và giải thích từng câu sai.
<h6><h1><h4>- Không có thẻ nào lớn hơn thẻ nào
<h1> là mức tiêu đề lớn nhất, thường dùng cho tên chính của trang; <h6> mới là mức nhỏ nhất.<p><a><li><ol>
<p> (paragraph) dùng để bao quanh một đoạn văn; trình duyệt tự tạo khoảng cách giữa các đoạn <p> với nhau. <a> tạo liên kết, <li> là một mục trong danh sách, <ol> là danh sách có thứ tự.<ol>...</ol>, các mục con sẽ hiển thị như thế nào?- Chỉ mục đầu tiên trong danh sách được hiển thị
- Mỗi mục có một dấu chấm tròn phía trước, không phân biệt thứ tự
- Các mục không hiển thị gì cho tới khi được bấm vào
- Mỗi mục được trình duyệt tự động đánh số thứ tự 1, 2, 3...
<ol> là danh sách có thứ tự (ordered list) nên trình duyệt tự động đánh số cho từng thẻ <li> bên trong; kiểu hiển thị dấu chấm tròn là của <ul>, không phải <ol>.- a)Thẻ
<h1>tạo ra tiêu đề nhỏ hơn thẻ<h6>.Sai - b)Mỗi mục trong danh sách
<ul>hoặc<ol>đều phải được đặt trong một thẻ<li>.Đúng - c)Trong thẻ
<a href="dia-chi.html">Trang sau</a>, phần chữ hiển thị cho người đọc bấm vào là ‘Trang sau’.Đúng - d)Có thể đặt thẻ
<li>một mình, không cần nằm trong<ul>hay<ol>, trình duyệt vẫn hiểu đó là một mục danh sách.Sai
- (a) Sai - số càng nhỏ thì tiêu đề càng lớn, nên
<h1>là tiêu đề lớn nhất, lớn hơn<h6>chứ không nhỏ hơn. - (b) Đúng - dù danh sách không thứ tự hay có thứ tự, mỗi mục con đều nằm trong một thẻ
<li>. - (c) Đúng - phần nội dung giữa thẻ mở và thẻ đóng của
<a>chính là chữ hiển thị cho người đọc bấm;hrefchỉ là địa chỉ đích, không hiển thị ra. - (d) Sai -
<li>chỉ có ý nghĩa danh sách khi lồng bên trong<ul>hoặc<ol>; đặt một mình, trình duyệt không hiểu đó là một mục danh sách.
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 đủ, 27 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.