btvn.vn
Tìm kiếm Đăng nhập

Thực hành định dạng trang HTML

Lưu trên thiết bị này
Định dạng văn bản HTML · Chọn bài khác

Phân tích trước khi viết mã

Nhiệm vụ: trình bày phiếu đo vườn rau giả định. Tên chung dùng h1 màu xanh; hai mục “Kết quả dự kiến” và “Cách làm” dùng h2. Đánh dấu diện tích quan trọng, đặt số mũ của đơn vị và chỉ số dưới của tên bước. Bước kiểm tra gồm ba dòng nhưng vẫn là một đoạn. Chuẩn bị trình soạn thảo văn bản thuần và trình duyệt như bài trước. Dùng tệp mẫu dưới đây để đối chiếu; có thể nhập lại mã vào tệp mới, lưu tên `thuc_hanh.html` với mã hóa UTF-8.

Tệp mẫu để đối chiếu

```html <!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <title>Phiếu đo vườn rau</title> </head> <body> <h1 style="color:rgb(32,90,148);font-family:sans-serif;font-size:28px">Phiếu đo vườn rau</h1> <h2>Kết quả dự kiến</h2> <p>Vườn hình chữ nhật dài 6 m, rộng 4 m; diện tích là <strong>24 m<sup>2</sup></strong>.</p> <h2>Cách làm</h2> <p>B<sub>1</sub>: Ghi chiều dài và chiều rộng.</p> <p>B<sub>2</sub>: Tính diện tích: 6 × 4 = 24 (m<sup>2</sup>).</p> <p>B<sub>3</sub>: Kiểm tra kết quả.<br>Đối chiếu hai số đo.<br>Ghi đúng đơn vị diện tích.</p> <p><em>Số liệu dùng để minh họa cách trình bày.</em></p> </body> </html> ``` Vườn có diện tích 6 × 4 = 24 m². Đây là dữ liệu giả định để luyện trình bày: strong bao phần quan trọng, sup đặt số 2, sub đặt số thứ tự bước. Hai br của bước B₃ nằm trong cùng p, không tạo thêm đoạn.

Mở, sửa và kiểm từng yêu cầu

1. Mở tệp đã lưu bằng trình duyệt. Kiểm một h1, hai h2 và phần diện tích có số 2 trên cao. 2. Kiểm các chỉ số 1, 2, 3 của tên bước nằm thấp; bước B₃ có hai ngắt dòng chủ động. Không dùng tổng số dòng trên màn hình để suy số đoạn vì văn bản còn tự xuống dòng theo độ rộng. 3. Đổi riêng màu h1 từ `rgb(32,90,148)` thành `rgb(148,60,32)`. Lưu và tải lại đúng tệp; kiểm màu thay đổi nhưng nội dung, cấp tiêu đề và cỡ chữ vẫn giữ. 4. Nếu kết quả khác yêu cầu, kiểm thẻ mở/đóng, nháy của style, dấu `:`/`;`, tên đặc tính và đơn vị cỡ chữ. Sửa một chỗ rồi xem lại để tìm đúng nguyên nhân. Khi muốn lấy màu từ ảnh, mở ảnh trong phần mềm sửa ảnh, dùng công cụ lấy mẫu màu ở điểm cần chọn, đọc ba giá trị RGB rồi đưa vào color. Chẳng hạn, nếu giá trị đã đọc là R32/G90/B148 thì viết `color:rgb(32,90,148)`; không đảo thứ tự. Cần chọn màu chữ nhìn rõ trên nền. Với GIMP3.0.4 giao diện tiếng Anh, mở ảnh hai mảng màu đi kèm. Nhấn O để chọn Color Picker, giữ Shift và nháy vào giữa mảng xanh. Cửa sổ Color Picker Information cho thấy cột Pixel có R32/G90/B148. Cột RGB(%) bên cạnh dùng phần trăm, không sao số phần trăm ấy vào cách viết RGB số nguyên đang luyện. Mảng nâu có R148/G60/B32 để đối chiếu màu đã đổi ở h1.

Bài luyện

Trong tệp mẫu, vì sao bước B₃ dùng hai br thay vì tách cả ba dòng thành ba p?
Chọn một đáp án

Bài luyện

Đã đọc màu từ ảnh được R32, G90, B148. Khai báo nào dùng đúng ba thành phần đó cho màu chữ?
Chọn một đáp án

Bài luyện

Đổi riêng khai báo màu h1 như bước thực hành rồi lưu và tải lại. Kết quả nào phù hợp?
Chọn một đáp án

Đang học