Giáo án và PPT Khoa học máy tính 12 cánh diều bài 2: Định dạng văn bản và tạo siêu liên kết

BÀI 2: ĐỊNH DẠNG VĂN BẢN VÀ TẠO SIÊU LIÊN KẾT

A. KHỞI ĐỘNG

HS dựa vào hiểu biết để trả lời câu hỏi Khởi động tr.40 SGK.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

Hoạt động 1: Tổ chức các đoạn văn bản trong trang web

+ Việc tổ chức các đoạn văn bản trong trang web có vai trò như thế nào?

+ Cú pháp dùng để tạo đoạn văn bản trên trang web là gì?

Dự kiến sản phẩm:

- Vai trò: Việc tổ chức các đoạn văn bản trong trang web làm các ý được phân tách rõ ràng, giúp văn bản dễ hiểu, dễ đọc hơn đối với người dùng.

- Cú pháp tạo đoạn văn bản:

<p>Văn bản</p>

Hoạt động 2: Tạo tiêu đề mục

+ HTML hỗ trợ khai báo bao nhiêu cấp độ tiêu đề mục?

+ Cú pháp khai báo các phần tử tạo tiêu đề mục là gì?

+ Trình duyệt web sẽ hiển thị tiêu đề mục với định dạng như thế nào?

Dự kiến sản phẩm:

- Các cấp độ tiêu đề mục: HTML hỗ trợ khai báo sáu tiêu đề mục được phân cấp, định nghĩa bởi các phần tử h1, h2, h3, h4, h5 và h6 tương ứng (h là viết tắt của heading và các chữ số cho biết cấp của tiêu đề mục).

- Cú pháp khai báo các phần tử tạo tiêu đề mục:

<Cấp của tiêu đề mục>Tiêu đề mục</Cấp của tiêu để mục>

Trong đó: Cấp của tiêu đề mục là một trong các phần tử h1, h2, h3, h4, h5, h6.

- Hiển thị tiêu đề mục trên trình duyệt web:

+ Kiểu chữ in đậm.

+ Cỡ chữ khác nhau: Phần tử h1 tạo tiêu đề mục có cỡ chữ lớn nhất, cỡ chữ sẽ giảm dần theo các cấp từ h2 đến h6.

Hoạt động 3: Làm nổi bật nội dung văn bản

+ Theo em, có cần thiết phải làm nổi bật nội dung văn bản không? Vì sao?

+ Những phần tử HTML nào giúp em làm nổi bật nội dung văn bản?

Dự kiến sản phẩm:

- Ý nghĩa: Việc làm nổi bật nội dung văn bản là cần thiết trong quá trình soạn thảo nội dung cho trang web vì không chỉ làm nổi bật nội dung mà còn giúp người soạn thảo nội dung trang web thể hiện được mục đích của tác giả…

Hoạt động 4: Tạo siêu liên kết

+ HTML định nghĩa phần tử nào để tạo các siêu liên kết?

+ Cú pháp khai báo phần tử tạo siêu liên kết là gì?

+ Có thể tạo những kiểu siêu liên kết nào?

Dự kiến sản phẩm:

- HTML định nghĩa phần tử a để tạo các siêu liên kết.

- Cú pháp khai báo phần tử a: 

<a href=“URL”>Liên kết web</a>

Trong đó: 

+ Thuộc tính href xác định địa chỉ của tài nguyên web trên Internet. 

+ URL (Uniform Resource Locator) có cấu trúc cơ bản như sau:

Giao thức://Tên miền/Đường dẫn

• Giao thức thường là http hoặc https.

• Tên miền là địa chỉ máy chủ chứa tài nguyên web muốn liên kết, ví dụ: https://www.w3schools.com

C. HOẠT ĐỘNG LUYỆN TẬP

Câu 1 (Câu 1 phần Câu hỏi tự kiểm tra SGK tr.45). Trong các khai báo tạo siêu liên kết sau, khai báo nào đúng?

A. <a href=“trangnhat.html”>Trang chủ</a>

B. <a href=“trang nhat.html”>Trang chủ</a>

C. <a link=“trangnhat.html”>Trang chủ</a>

D. <a link=“trang nhat.html”>Trang chủ</a>

Câu 2. Phần tử nào sau đây được sử dụng để in nghiêng nội dung văn bản trong HTML?

A. strong.

B. italic.

C. mark.

D. em.

Câu 3. Phát biểu nào sau đây đúng?

A. HTML5 cung cấp phần tử font để định dạng phông chữ cho văn bản.

B. HTML hỗ trợ khai báo bảy tiêu đề mục được phân cấp, định nghĩa bởi các phần tử h1, h2, h3, h4, h5, h6 và h7.

C. Để tạo siêu liên kết giữa các trang web trong cùng thư mục, chỉ cần khai báo thành phần Đường dẫn trong URL là tên tệp của trang web cần kết nối.

D. Mỗi phần tử trong một văn bản HTML có thể có nhiều định danh.

Câu 4. Cú pháp tạo siêu liên kết đến phần tử có id=“contact” trong cùng một trang web là

A. <a href=#contact>Liên hệ</a>

B. <a href=“@contact”>Liên hệ</a>

C. <a href=“#contact”>Liên hệ</a>

D. <a href=“contact”>Liên hệ</a>

Câu 5. Các cấp độ tiêu đề mục trong HTML được phân biệt như thế nào?

A. Phân biệt bằng kiểu chữ.

B. Phân biệt bằng cỡ chữ.

C. Phân biệt bằng màu chữ.

D. Phân biệt bằng phông chữ.

Dự kiến sản phẩm:

D. HOẠT ĐỘNG VẬN DỤNG

HS hoàn thành hoạt động Vận dụng SGK tr.45.