Bài 19. Thực hành: xây dựng một trang web nhỏ
Bài này ta sẽ gộp những gì đã học về HTML và CSS thành một sản phẩm hoàn chỉnh: một trang web nhỏ giới thiệu bản thân, đi từ việc phác thảo ý tưởng đến khi xem được kết quả trên trình duyệt.
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F6. Dự án tạo trang webtr. 99
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F6. Dự án tạo trang webtr. 132
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 12. Dự án nhỏ: Tạo trang web báo tườngtr. 89
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 12. Dự án nhỏ: Tạo trang web báo tườngtr. 89
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F13. Dự án tạo trang web (tiếp theo)tr. 142
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F13. Dự án tạo trang web (tiếp theo)tr. 175
Xem thêm 2 quyển
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 18. Thực hành tổng hợp thiết kế trang webtr. 102–105
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 18. Thực hành tổng hợp thiết kế trang webtr. 102
Bắt đầu bằng một hình dung
Hãy hình dung bạn vừa học xong cách xây từng viên gạch (các thẻ HTML như <h1>, <p>, <img>, <ul>) và cách sơn phết, trang trí (CSS với màu sắc, phông chữ, khoảng cách). Nhưng một đống gạch rời cùng vài hộp sơn thì chưa phải là một căn nhà. Muốn ở được, ta phải lắp gạch theo đúng thứ tự - nền trước, tường sau, mái trên cùng - rồi mới sơn hoàn thiện. Xây một trang web cũng vậy: cần đi theo từng bước rõ ràng, từ việc nghĩ trước xem trang có những gì, đến việc dựng khung, rồi mới tô màu và chỉnh sửa lại cho vừa ý. Bài thực hành này sẽ dẫn bạn đi hết các bước đó, để tự tay dựng nên một trang web nhỏ - trang giới thiệu về bản thân hoặc một sản phẩm mà bạn thích.
Nội dung bài học
- Bước 1 - Phác thảo nội dung trước khi viết code
- Bước 2 và 3 - Dựng khung HTML rồi thêm CSS
Tóm tắt lý thuyết cần nhớ
- Trước khi viết code, nên phác thảo nội dung: trang cần những phần nào, phần nào trước, phần nào sau.
- HTML dựng khung nội dung bằng các thẻ như
<h1>,<p>,<ul>; CSS quyết định màu sắc, phông chữ, khoảng cách và bố cục. - Một trang giới thiệu bản thân thường được tổ chức thành bốn phần: đầu trang, giới thiệu, danh sách sở thích/kĩ năng và chân trang.
- Nên xem thử trang trên trình duyệt sau khi viết rồi chỉnh sửa dần; ưu tiên sự đơn giản, gọn gàng, dễ đọc hơn là nhồi nhét nhiều chi tiết.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| display | đis-plây | cách hiển thị Thuộc tính CSS để chọn cách một khối hiện ra trên trang. |
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ó đủ 21 câu, chấm điểm tự động và giải thích từng câu sai.
- Viết ngay thẻ
<style>để chọn màu cho trang - Phác thảo trước xem trang cần những phần nội dung nào
- Tìm một trang có sẵn để sao chép nguyên bố cục
- Chèn ảnh đại diện vào giữa trang
<p>cùng<br><ul>cùng các<li><img>cùng<title><head>cùng<meta>
<ul> (danh sách không thứ tự) cùng các <li> bên trong là cách phù hợp để liệt kê nhiều mục như sở thích hay kĩ năng. <p> dùng cho đoạn văn, <img> để chèn ảnh, còn <head>/<meta> không hiển thị nội dung cho người xem.- HTML quyết định màu sắc, phông chữ và bố cục của trang, còn CSS mới là nơi viết nội dung chữ hiển thị
- HTML dựng khung nội dung (tiêu đề, đoạn văn, danh sách...), CSS lo phần trình bày (màu, phông, khoảng cách)
- HTML và CSS làm hoàn toàn cùng một việc, chỉ khác cú pháp nên dùng cái nào cũng cho kết quả như nhau
- CSS bắt buộc phải viết trước để tạo sẵn bố cục, sau đó HTML mới điền nội dung vào các ô đã dựng sẵn
- a)Nên phác thảo nội dung trang trước khi viết HTML, để biết trang cần những phần nào.Đúng
- b)CSS chỉ có thể viết trong một tệp riêng, không thể đặt trong thẻ
<style>ở phần<head>.Sai - c)Một trang giới thiệu bản thân đơn giản có thể chia thành phần đầu trang, phần giới thiệu, phần danh sách và chân trang.Đúng
- d)Trang web càng dùng nhiều màu sắc và hiệu ứng thì càng dễ đọc và chuyên nghiệp hơn.Sai
- (a) Đúng - phác thảo trước giúp biết trang cần phần nào, tránh vừa viết vừa đoán.
- (b) Sai - trong ví dụ của bài, toàn bộ CSS được viết ngay trong thẻ
<style>đặt ở phần<head>, không bắt buộc phải tách thành tệp riêng. - (c) Đúng - đây đúng là cấu trúc gợi ý trong bài: đầu trang, giới thiệu, danh sách sở thích/kĩ năng, chân trang.
- (d) Sai - bài khuyên nên giữ trang đơn giản, ít màu chủ đạo (chừng 2–3 màu) và tránh nhồi nhét quá nhiều chi tiết, vì điều đó giúp trang dễ đọc hơn chứ không phải ngược lại.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 21 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.