Đáp án Tin học ứng dụng 12 kết nối bài 8: Định dạng văn bản

BÀI 8. ĐỊNH DẠNG VĂN BẢN

KHỞI ĐỘNG

Cho hai đoạn văn bản như Hình 8.1. Cách trình bày đoạn văn bản nào có định dạng đẹp hơn? Tại sao?

Giải chi tiết:

Đoạn văn bản b) có định dạng đẹp hơn vì:

1. Căn chỉnh dòng: Đoạn văn b) được trình bày theo dạng thơ, mỗi dòng thơ được xuống hàng, tạo cảm giác nhịp nhàng và dễ đọc. Trong khi đó, đoạn văn a) viết liên tục mà không xuống dòng, gây khó đọc và khó cảm nhận nhịp điệu của bài thơ.

2. Cách dòng: Đoạn văn b) có khoảng cách dòng rõ ràng giữa các câu, giúp văn bản trông thoáng hơn và dễ theo dõi hơn. Đoạn văn a) không có khoảng cách dòng giữa các câu, làm cho văn bản trông dày đặc và khó nhìn.

3. Dấu chấm câu: Đoạn văn b) sử dụng dấu chấm câu hợp lý, giúp người đọc dễ dàng hiểu được các ý tứ trong bài thơ. Đoạn văn a) không có dấu chấm câu, làm cho ý nghĩa của câu bị mơ hồ và khó hiểu.

Vì vậy, định dạng của đoạn văn bản b) là đẹp hơn và dễ đọc hơn.

1. THUỘC TÍNH THẺ

Hoạt động 1: Nhận biết thuộc tính thẻ

Hãy quan sát các thẻ trong tệp newpage.html ở Hoạt động 2, Bài 7. Trong các thẻ đó có một thẻ có thêm thuộc tính. Theo em đó là thẻ nào? Em hãy đưa ra dự đoán về tác dụng của các thuộc tính thẻ.

Giải chi tiết:

Trong tệp newpage.html ở Hoạt động 2, Bài 7, có một thẻ có thêm thuộc tính là thẻ <a>. Cụ thể, ví dụ có thể là:

html

<a href="https://www.example.com" target="_blank">Liên kết</a>

Thuộc tính href được sử dụng để chỉ định đường dẫn URL mà liên kết sẽ dẫn đến. Trong ví dụ trên, liên kết sẽ dẫn đến trang web "https://www.example.com".

Thuộc tính target được sử dụng để xác định cách mở liên kết. Giá trị_blank được sử dụng trong ví dụ trên để liên kết được mở trong một cửa sổ hoặc tab mới của trình duyệt.

Câu hỏi 1: Xác định các tên thuộc tính và thẻ chứa thuộc tính tương ứng xuất hiện trong Bài 7.

Giải chi tiết:

Ví dụ Hình 7.1:

- Tên thuộc tính và thẻ chứa thuộc tính có trong tệp văn bản nguồn:

+ Tên thuộc tính: "title"

+ Thẻ chứa thuộc tính: <title>Tên trang Web</title>

- Tên thuộc tính và thẻ chứa thuộc tính có trong tệp văn bản nguồn:

+ Tên thuộc tính: Không có thuộc tính nào được sử dụng trong thẻ <div>

+ Thẻ chứa thuộc tính: <div>...</div>

- Tên thuộc tính và thẻ chứa thuộc tính có trong tệp văn bản nguồn:

+ Tên thuộc tính: Không có thuộc tính nào được sử dụng trong thẻ <h1>

+ Thẻ chứa thuộc tính: <h1>Trang Web và HTML</h1>

- Tên thuộc tính và thẻ chứa thuộc tính có trong tệp văn bản nguồn:

+ Tên thuộc tính: Không có thuộc tính nào được sử dụng trong thẻ <p>

+ Thẻ chứa thuộc tính: <p>Đây là dòng đầu tiên</p>

- Tên thuộc tính và thẻ chứa thuộc tính có trong tệp văn bản nguồn:

+ Tên thuộc tính: Không có thuộc tính nào được sử dụng trong thẻ <hr>

+ Thẻ chứa thuộc tính: <hr>

- Tên thuộc tính và thẻ chứa thuộc tính có trong tệp văn bản nguồn:

+ Tên thuộc tính: Không có thuộc tính nào được sử dụng trong thẻ <p>

+ Thẻ chứa thuộc tính: <p>Đây là dòng cuối cùng</p>

2. CÁC THẺ TRÌNH BÀY VĂN BẢN.

Hoạt động 2: Xác định thành phần cấu thành một văn bản.

Thảo luận: Khi trình bày một văn bản (bài thơ, đoạn văn, trang web,....) có thể có những thành phần nào? Hãy kể tên các thành phần đó.

Giải chi tiết:

Khi trình bày một văn bản, dù là bài thơ, đoạn văn, trang web, hay loại văn bản khác, có thể có các thành phần cấu thành sau đây:

1. Tiêu đề (Title):

   • Phần tiêu đề thường nằm ở đầu văn bản, cung cấp cho người đọc một cái nhìn tổng quát về nội dung của văn bản.

2. Đoạn mở đầu (Introduction):

   • Giới thiệu ngắn gọn về chủ đề, mục đích và nội dung chính của văn bản.

3. Nội dung chính (Body):

   • Bao gồm các đoạn văn, phần, hoặc chương thể hiện chi tiết nội dung của văn bản. Nội dung chính có thể được chia nhỏ thành các mục, tiêu đề phụ, và đoạn văn để cấu trúc và tổ chức thông tin rõ ràng hơn.

4. Đoạn kết (Conclusion):

   • Tóm tắt lại các ý chính, kết luận, và có thể đưa ra những suy nghĩ, đánh giá hoặc lời kêu gọi hành động.

5. Chữ ký hoặc tên tác giả (Signature/Author):

   • Đối với một số loại văn bản như thư từ, bài viết cá nhân, hoặc bài thơ, có thể có chữ ký hoặc tên tác giả.

6. Ngày tháng (Date):

   • Ngày tháng viết hoặc xuất bản văn bản, đặc biệt quan trọng trong các tài liệu hành chính, thư từ, và báo cáo.

7. Chú thích (Footnotes/Endnotes):

   • Cung cấp thêm thông tin, tài liệu tham khảo, hoặc ghi chú chi tiết về nội dung trong văn bản.

8. Hình ảnh, đồ thị, biểu đồ (Images, Charts, Graphs):

   • Các yếu tố hình ảnh hỗ trợ minh họa, bổ sung cho nội dung văn bản, giúp người đọc dễ dàng hình dung và hiểu hơn.

9. Danh mục tài liệu tham khảo (References/Bibliography):

   • Liệt kê các nguồn tài liệu đã được trích dẫn hoặc tham khảo trong văn bản.

10. Mục lục (Table of Contents):

    • Đối với các văn bản dài, mục lục giúp người đọc dễ dàng tìm kiếm và tra cứu các phần nội dung khác nhau.

11. Liên kết (Hyperlinks):

    • Đối với văn bản trên trang web hoặc tài liệu số, các liên kết giúp người đọc truy cập nhanh chóng đến các nguồn thông tin khác hoặc các trang liên quan.

12. Phông chữ và định dạng (Font and Formatting):

    • Sử dụng các loại phông chữ, kích thước, màu sắc, và các yếu tố định dạng khác nhau để làm nổi bật, phân biệt, và tạo điểm nhấn cho các phần nội dung quan trọng.

13. Bố cục và căn chỉnh (Layout and Alignment):

    • Tổ chức và căn chỉnh các phần của văn bản để tạo ra một trang trình bày đẹp mắt, dễ đọc và chuyên nghiệp.

Những thành phần trên giúp tạo nên một văn bản hoàn chỉnh, rõ ràng và dễ hiểu, hỗ trợ người đọc tiếp cận và nắm bắt thông tin một cách hiệu quả.

Câu hỏi 1: Trình duyệt hiển thị đoạn mã html sau thành mấy dòng? Em có nhận xét gì về khoảng cách giữa các dòng?

Giải chi tiết:

Trình duyệt hiển thị đoạn mã HTML trên thành 5 dòng. Mỗi thẻ <p> được hiển thị trên một dòng riêng biệt.

Câu 2: Chỉnh sửa đoạn mã html trong Ví dụ 1 để hiển thị thêm một đường kẻ ngang phân tách giữa dòng tiêu đề “Tin học 12” và nội dung phía dưới.

Giải chi tiết:

Thêm dòng kẻ ngang phân cách tiêu đề với nội dung phía dưới:

3. CÁC THẺ ĐỊNH DẠNG PHÔNG CHỮ

Hoạt động 3: Xác định các dạng đặc biệt của chữ khi trình bày một văn bản

Thảo luận: Khi muốn nhấn mạnh vào một nội dung trong văn bản, em thường thấy nội dung đó được viết như thế nào?

Giải chi tiết:

Em thường thấy nội dung được nhấn mạnh được in đậm, in nghiêng, gạch chân,…

Câu hỏi: Với cùng một đoạn văn bản, kết quả khi định dạng trong các trường hợp sau giống và khác nhau như thế nào?

Giải chi tiết:

Cả hai kiểu đều sử dụng thuộc tính style để áp dụng các đặc điểm định dạng lên đoạn văn bản bên trong thẻ <p>. Kiểu 1 có thêm thuộc tính text-decoration: underline; để gạch chân chữ. Kiểu 2 sử dụng mã màu RGB rgb(255, 0, 0) để đặt màu chữ là màu đỏ.

LUYỆN TẬP

Câu 1: Hãy sửa lại phần tử sau để làm nổi bật ý chính của câu:

Giải chi tiết:

Các em có thể tham khảo câu lệnh sau:

Kết quả khi chạy:

Câu 2: Trình bày đoạn văn bản sau bằng mã HTML:

Giải chi tiết:

Các em sử dụng các câu lệnh dưới đây:

VẬN DỤNG

Câu 1: Hãy chỉ ra các bước cần thực hiện để sử dụng một màu cụ thể trong bức ảnh làm màu cho tiêu đề một bài thơ.

Giải chi tiết:

Để sử dụng một màu cụ thể từ bức ảnh làm màu cho tiêu đề của một bài thơ bằng HTML, bạn cần thực hiện các bước sau:

1. Xác định màu từ bức ảnh:

   • Sử dụng công cụ chọn màu như Adobe Photoshop, GIMP, hoặc các công cụ trực tuyến như ColorZilla để lấy mã màu (mã HEX) từ bức ảnh.

2. Tạo mã HTML cho tiêu đề bài thơ:

   • Sử dụng mã HTML để tạo tiêu đề và áp dụng mã màu lấy được vào tiêu đề bằng CSS.

Dưới đây là hướng dẫn chi tiết từng bước:

Bước 1: Xác định mã màu từ bức ảnh

1. Mở bức ảnh trong công cụ chọn màu.

2. Sử dụng công cụ chọn màu để chọn màu từ bức ảnh. Công cụ sẽ cung cấp cho bạn mã màu dưới dạng HEX (ví dụ: #FF5733).

Bước 2: Tạo mã HTML và CSS

1. Tạo một tệp HTML và sử dụng mã màu đã lấy được để định dạng tiêu đề bài thơ.

Dưới đây là một ví dụ về mã HTML và CSS:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Poem Title</title>

    <style>

        body {

           font-family: Arial, sans-serif;

           background-color: #f0f0f0;

            display: flex;

           justify-content: center;

           align-items: center;

            height: 100vh;

            margin: 0;

        }

        h1 {

            color: #FF5733; /* Thay thế bằng mã màu đã chọn từ bức ảnh */

            font-size: 3em;

            text-align: center;

        }

    </style>

</head>

<body>

    <h1>Vội Vàng</h1>

</body>

</html>

Trong đoạn mã trên:

• #FF5733 là mã màu lấy từ bức ảnh. Thay thế nó bằng mã màu bạn đã chọn.

• Phần h1 chứa tiêu đề bài thơ và áp dụng màu từ bức ảnh.

Câu 2: Hãy đưa ra cách định dạng một đoạn văn bản để được kết quả như sau:

Giải chi tiết:

Sử dụng các thuộc tính CSS như transform, rotate, và translate để xoay và dịch chuyển từng chữ "o" theo đường cong sóng.

Dưới đây là ví dụ đơn giản về HTML và CSS:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Wave Text</title>

    <style>

        .wave-text {

            display: flex;

           justify-content: center;

           align-items: center;

            font-size: 24px;

        }

        .wave-text span {

            display: inline-block;

           transform-origin: bottom;

        }

    </style>

</head>

<body>

    <div class="wave-text">

        <span style="transform: rotate(0deg);">O</span>

        <span style="transform: rotate(10deg);">o</span>

        <span style="transform: rotate(20deg);">o</span>

        <span style="transform: rotate(30deg);">o</span>

        <span style="transform: rotate(40deg);">o</span>

        <span style="transform: rotate(50deg);">o</span>

        <span style="transform: rotate(60deg);">o</span>

        <span style="transform: rotate(70deg);">o</span>

        <span style="transform: rotate(80deg);">o</span>

        <span style="transform: rotate(90deg);">O</span>

        <span style="transform: rotate(80deg);">o</span>

        <span style="transform: rotate(70deg);">o</span>

        <span style="transform: rotate(60deg);">o</span>

        <span style="transform: rotate(50deg);">o</span>

        <span style="transform: rotate(40deg);">o</span>

        <span style="transform: rotate(30deg);">o</span>

        <span style="transform: rotate(20deg);">o</span>

        <span style="transform: rotate(10deg);">o</span>

        <span style="transform: rotate(0deg);">O</span>

        <!-- Tiếp tục cho đến khi tạo được sóng hoàn chỉnh -->

    </div>

</body>

</html>