Menu Học Tập

Bài 18: Thực hành tổng hợp thiết kế trang web – Tin học 12

Mục lục [Ẩn]

Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó

Câu hỏi mở đầu trang 102Hoạt động thảo luận nhóm trang 102Luyện tập trang 105Vận dụng trang 105

Câu hỏi mở đầu trang 102

Đề bài: Giả sử website của em có nhiều tệp HTML. Có thể hay không chỉ dùng một tệp CSS duy nhất để định dạng cho toàn bộ các trang web? Nếu có thể hãy nêu các bước cần thực hiện.

Lời giải:

Hoàn toàn có thể dùng một tệp CSS duy nhất để định dạng cho toàn bộ website. Đây là cách làm giúp các trang có phong cách trình bày thống nhất và dễ chỉnh sửa.

Các bước cần thực hiện:

  1. Tạo một tệp CSS (ví dụ style.css) chứa toàn bộ mẫu định dạng dùng chung.
  2. Liên kết tệp CSS này với tất cả các tệp HTML bằng thẻ <link> đặt trong <head>:
<link rel="stylesheet" type="text/css" href="style.css">
  1. Khi cần thay đổi giao diện, chỉ cần sửa duy nhất tệp style.css – toàn bộ website tự động cập nhật theo.

1. Dự án: Xây dựng website giới thiệu các câu lạc bộ ngoại khoá của trường

Hoạt động thảo luận nhóm trang 102

Đề bài: Thảo luận theo nhóm để trả lời các câu hỏi sau:

1. Tổ chức cấu trúc website như thế nào cho phù hợp?

Lời giải:

Website nên gồm một trang chủ và các trang thành viên:

  • Trang chủ (index.html): giới thiệu chung, chứa liên kết tới các trang thành viên.
  • Trang câu lạc bộ thể thao (thethao.html).
  • Trang câu lạc bộ nghệ thuật (nghethuat.html).
  • Có thể bổ sung trang đăng kí (dang_ki.html) chứa biểu mẫu tham gia.

2. Với mỗi câu lạc bộ sẽ đưa những thông tin gì?

Lời giải:

Mỗi câu lạc bộ cần có các thông tin cơ bản:

  • Tên câu lạc bộ, khẩu hiệu.
  • Ảnh minh hoạ hoặc video hoạt động.
  • Mô tả ngắn về mục tiêu và hoạt động.
  • Lịch sinh hoạt, địa điểm.
  • Thành tích nổi bật (nếu có).
  • Cách đăng kí tham gia.

3. Trình bày các trang web như thế nào cho đẹp và thống nhất với nhau?

Lời giải:

  • Tất cả các trang dùng chung một tệp CSS (style.css) để thống nhất phong cách.
  • Áp dụng bố cục chung: đầu trang – nội dung chính – cuối trang.
  • Sử dụng cùng hệ màu, cỡ chữ, phông chữ trên mọi trang.
  • Đặt thanh liên kết chuyển trang giống nhau ở các trang.

4. Làm thế nào để website sinh động và đẹp mắt?

Lời giải:

  • Chèn hình ảnh và video thật của các câu lạc bộ.
  • Sử dụng màu sắc hài hoà, tương phản hợp lí giữa nền và chữ.
  • Dùng hiệu ứng CSS :hover để phần tử phản hồi khi di chuột (đã học ở Bài 17).
  • Bố cục cân đối bằng cách dùng padding, margin hợp lí (Bài 16).
  • Thêm đường viền, màu nền cho các khối nội dung.

2. Thực hành

Nhiệm vụ 1: Tạo tệp CSS

Yêu cầu: Tạo tệp CSS để trình bày website theo bố cục đầu trang – nội dung chính – cuối trang.

Hướng dẫn thực hiện:

Bước 1: Phân tích bố cục

Website chia thành 3 phần lớn:

  • Đầu trang (Header): chứa tiêu đề và khẩu hiệu.
  • Nội dung chính (Content): giới thiệu các CLB.
  • Cuối trang (Footer): chứa liên kết tới các trang khác.

Bước 2: Viết CSS cho từng phần

Tạo tệp style.css với các mẫu định dạng như sau (chỉ dùng các thuộc tính đã học ở Bài 13-17):

/* Định dạng chung cho toàn trang */
body {
    font-family: Arial, sans-serif;
    color: black;
    margin: 0;
    padding: 0;
}

/* Đầu trang - Banner */
.banner {
    background-color: darkred;
    color: white;
    text-align: center;
    padding: 30px;
}

.banner h1 {
    font-size: 200%;
    margin: 10px;
}

.banner p {
    font-style: italic;
    font-size: 120%;
}

/* Nội dung chính */
.content {
    padding: 20px;
    background-color: rgb(248, 249, 250);
}

.content h2 {
    color: darkred;
    text-align: center;
}

/* Bảng chứa 3 ô ngang cho phần khẩu hiệu */
.slogan {
    width: 100%;
    text-align: center;
    background-color: rgb(248, 249, 250);
}

.slogan td {
    width: 33%;
    padding: 30px;
    border: 1px solid #ccc;
    vertical-align: top;
}

.slogan h3 {
    color: darkorange;
}

/* Cuối trang - Footer */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 15px;
}

.footer a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
}

Giải thích các điểm chính:

  • Dùng class để phân biệt các vùng đầu trang, nội dung, cuối trang (Bài 16).
  • Bảng <table> được dùng để xếp 3 ô ngang (Bài 16 có nhắc table là phần tử khối).
  • Các thuộc tính khung padding, margin, border và màu chữ, màu nền đều đã học.

Bước 3: Lưu tệp với tên style.css.

Nhiệm vụ 2: Tạo các tệp HTML

Yêu cầu: Tạo các tệp HTML index.html, thethao.html và nghethuat.html.

Hướng dẫn thực hiện:

Bước 1: Cấu trúc chung của mỗi tệp HTML

Mỗi tệp HTML cần liên kết tới tệp style.css trong phần <head>:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>CLB ngoại khoá THPT Nguyễn Bỉnh Khiêm</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- Nội dung trang -->
</body>
</html>

Bước 2: Tạo phần đầu trang (Banner)

<div class="banner">
    <h1>CLB ngoại khoá trường THPT Nguyễn Bỉnh Khiêm</h1>
    <p>Học tập – Rèn luyện – Toả sáng</p>
</div>

Bước 3: Tạo khối Slogan (3 ô ngang bằng <table>)

<table class="slogan">
    <tr>
        <td>
            <h3>Năng động</h3>
            <p>Hoạt động năng nổ và hiệu quả</p>
        </td>
        <td>
            <h3>Đam mê</h3>
            <p>Cháy hết mình trong các cuộc chơi</p>
        </td>
        <td>
            <h3>Toả sáng</h3>
            <p>Giành những giải thưởng cao nhất</p>
        </td>
    </tr>
</table>

Bước 4: Bổ sung nội dung riêng cho từng trang

  • index.html: giới thiệu chung + liên kết tới hai trang thành viên.
  • thethao.html: chi tiết CLB thể thao (bóng đá, bơi lội, cầu lông…).
  • nghethuat.html: chi tiết CLB nghệ thuật (múa, hát, vẽ…).

Bước 5: Tạo cuối trang (Footer) với liên kết

Ở cuối mỗi trang, thêm phần footer chứa liên kết tới các trang khác:

<div class="footer">
    <a href="index.html">Trang chủ</a>
    <a href="thethao.html">CLB Thể thao</a>
    <a href="nghethuat.html">CLB Nghệ thuật</a>
</div>

Bước 6: Chèn hình ảnh, video thực tế bằng thẻ <img> để trang sinh động.

Luyện tập

Luyện tập trang 105

Đề bài:

1. Tạo trang dang_ki.html chứa biểu mẫu đăng kí câu lạc bộ và bổ sung liên kết tới trang dang_ki trong phần cuối trang của tất cả các trang.

Lời giải:

Bước 1: Tạo tệp dang_ki.html với biểu mẫu đăng kí bằng thẻ <form>:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Đăng kí câu lạc bộ</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="banner">
        <h1>Đăng kí tham gia câu lạc bộ</h1>
    </div>

    <form class="content">
        <p>Họ và tên: <input type="text" name="hoten"></p>
        <p>Lớp: <input type="text" name="lop"></p>
        <p>Email: <input type="text" name="email"></p>
        <p>Chọn câu lạc bộ:
            <select name="clb">
                <option value="thethao">CLB Thể thao</option>
                <option value="nghethuat">CLB Nghệ thuật</option>
            </select>
        </p>
        <p>Lí do đăng kí:<br>
            <textarea name="lido" rows="4" cols="40"></textarea>
        </p>
        <p><button type="submit">Gửi đăng kí</button></p>
    </form>

    <div class="footer">
        <a href="index.html">Trang chủ</a>
        <a href="thethao.html">CLB Thể thao</a>
        <a href="nghethuat.html">CLB Nghệ thuật</a>
    </div>
</body>
</html>

Bước 2: Ở footer cả 3 tệp index.html, thethao.html, nghethuat.html, thêm liên kết:

<a href="dang_ki.html">Đăng kí tham gia</a>

2. Thay đổi định dạng và màu sắc của phông chữ trong các vùng khi di chuyển chuột qua.

Lời giải:

Sử dụng pseudo-class :hover (đã học ở Bài 17) để đổi định dạng khi con trỏ chuột đi qua.

Thêm vào tệp style.css các mẫu sau:

/* Đổi màu và in nghiêng khi di chuột qua tiêu đề ô con */
.slogan td:hover h3 {
    color: blue;
    font-style: italic;
}

/* Đổi cỡ chữ khi di chuột qua đoạn mô tả */
.slogan td:hover p {
    color: darkred;
    font-size: 110%;
    font-weight: bold;
}

/* Đổi màu liên kết ở cuối trang khi di chuột */
.footer a:hover {
    color: yellow;
    text-decoration: underline;
}

Giải thích:

  • :hover kích hoạt định dạng chỉ khi con trỏ chuột đang ở trên phần tử.
  • Khi rời chuột đi, phần tử trở về trạng thái ban đầu.
  • Có thể kết hợp :hover với bộ chọn quan hệ con/cháu (như .slogan td:hover h3) để đổi định dạng phần tử con khi di chuột qua phần tử cha.

Vận dụng

Vận dụng trang 105

Đề bài: Hãy đưa ra một thiết kế khác cho website đã tạo ở phần Thực hành. Viết định dạng theo thiết kế mới và chuyển toàn bộ website sang định dạng mới.

Lời giải:

Gợi ý ý tưởng thiết kế mới – Thay đổi hệ màu, phông chữ và bố cục banner:

Bước 1: Định hướng thiết kế mới

  • Đổi tông màu từ đỏ đậm sang xanh dương.
  • Đổi phông chữ có chân (serif) sang phông không chân (sans-serif) mềm mại.
  • Banner trở thành thanh mỏng ở đầu trang thay vì khối lớn.
  • Nội dung dùng dạng danh sách dọc thay vì bảng ngang.

Bước 2: Tạo tệp CSS mới (style2.css)

body {
    font-family: "Segoe UI", Tahoma, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Banner mới - thanh ngang mỏng */
.banner {
    background-color: navy;
    color: white;
    text-align: center;
    padding: 15px;
}

.banner h1 {
    font-size: 150%;
    margin: 5px;
}

/* Nội dung xếp dọc */
.content {
    padding: 25px;
    background-color: aliceblue;
}

.content h2 {
    color: navy;
    border-bottom: 2px solid navy;
    padding: 5px 0;
}

/* Bảng 3 ô đổi thành danh sách dọc */
.slogan {
    width: 100%;
    background-color: aliceblue;
}

.slogan td {
    display: block;
    padding: 20px;
    border: 1px solid navy;
    margin: 10px 0;
    background-color: white;
}

.slogan h3 {
    color: navy;
}

/* Footer mới */
.footer {
    background-color: lightsteelblue;
    color: navy;
    text-align: center;
    padding: 20px;
}

.footer a {
    color: navy;
    padding: 0 15px;
}

.footer a:hover {
    color: darkred;
}

Bước 3: Chuyển toàn bộ website sang định dạng mới

Ở tất cả các tệp HTML (index.html, thethao.html, nghethuat.html, dang_ki.html), chỉ cần đổi dòng liên kết CSS:

Trước:

<link rel="stylesheet" type="text/css" href="style.css">

Sau:

<link rel="stylesheet" type="text/css" href="style2.css">

→ Toàn bộ website tự động chuyển sang giao diện mới mà không cần sửa nội dung HTML.

Kết luận: Đây chính là lợi ích lớn nhất của việc tách CSS ra tệp riêng – có thể thay đổi hoàn toàn giao diện chỉ bằng cách chỉnh sửa hoặc thay thế tệp CSS, mà không cần chạm vào các tệp HTML.

Thầy Phạm Thành Danh

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa

Giải bài tập SGK: Bài 28: Thực hành tổng hợp – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 27: Biểu mẫu trên trang web – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 26: Liên kết và thanh điều hướng – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 25: Xây dựng phần thân và chân trang web – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 24: Xây dựng phần đầu trang web – Tin học 12 ( 12/07 )