Slide bài giảng 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
Slide điện tử bài 2: Định dạng văn bản và tạo siêu liên kết. Trình bày với các hiệu ứng hiện đại, hấp dẫn. Giúp học sinh hứng thú học bài. Học nhanh, nhớ lâu. Có tài liệu này, hiệu quả học tập của học môn Khoa học máy tính 12 Cánh diều sẽ khác biệt
Bạn chưa đủ điều kiện để xem được slide bài này. => Xem slide bài mẫu
Tóm lược nội dung
BÀI 2. ĐỊNH DẠNG VĂN BẢN VÀ TẠO SIÊU LIÊN KẾT
KHỞI ĐỘNG
Em hãy nêu một số cách để nhận biết siêu liên kết trang web.
Bài làm rút gọn:
1. Định dạng và màu sắc: Siêu liên kết thường có định dạng khác biệt (như gạch chân dưới) và màu sắc khác so với văn bản thông thường.
2. Chuột khi hover: Khi di chuột qua siêu liên kết, hình dạng chuột thường thay đổi để chỉ ra tính tương tác.
3. Hiển thị URL: Khi di chuột qua siêu liên kết, trình duyệt thường hiển thị URL của liên kết đó ở góc dưới cùng của trình duyệt hoặc trong thanh trạng thái.
4. Thuộc tính HTML: Siêu liên kết thường được khai báo bằng thẻ `<a>` và có thuộc tính `href` để xác định đích của liên kết.
5. Chức năng click: Siêu liên kết thường có khả năng nhấp chuột và chuyển hướng người dùng đến một trang web khác hoặc đến một vị trí khác trên cùng trang web.
1. TỔ CHỨC CÁC ĐOẠN VĂN BẢN TRONG TRANG WEB
2. TẠO TIÊU ĐỀ MỤC
HOẠT ĐỘNG
Em thường định dạng tiêu đề mục của các mục lớn và nhỏ trong một văn bản như thế nào?
Bài làm rút gọn:
Có thể sử dụng các thẻ tiêu đề HTML như `<h1>`, `<h2>`, `<h3>`,... cho mức độ quan trọng và cấu trúc. Cũng có thể sử dụng CSS để tùy chỉnh kiểu chữ, kích thước, màu sắc và thuộc tính khác của các tiêu đề. Việc sử dụng các thẻ tiêu đề và CSS giúp tạo ra các tiêu đề mục với định dạng và mức độ quan trọng khác nhau trong văn bản.
3. LÀM NỔI BẬT NỘI DUNG CỦA VĂN BẢN
HOẠT ĐỘNG
Hãy nêu một số cách làm nổi bật nội dung văn bản ở các hệ soạn thảo văn bản mà em đã sử dụng.
Bài làm rút gọn:
1. Định dạng chữ in đậm: Sử dụng tính năng in đậm (bold) để làm nổi bật một phần của văn bản. Thường được thực hiện bằng cách chọn văn bản cần làm nổi bật và áp dụng định dạng in đậm.
2. Định dạng chữ nghiêng: Sử dụng tính năng chữ nghiêng (italic) để làm nổi bật một phần của văn bản. Thường được thực hiện bằng cách chọn văn bản cần làm nổi bật và áp dụng định dạng chữ nghiêng.
3. Màu sắc văn bản: Sử dụng tính năng chọn màu chữ để làm nổi bật một phần của văn bản. Thông qua việc thay đổi màu sắc, bạn có thể tạo sự tương phản và thu hút sự chú ý đến nội dung quan trọng.
4. Đánh dấu và gạch chân: Sử dụng tính năng đánh dấu (highlight) hoặc gạch chân (underline) để làm nổi bật một phần của văn bản. Điều này giúp tạo sự tương phản và giúp nội dung quan trọng được nhìn thấy rõ hơn.
5. Kích thước chữ: Sử dụng tính năng điều chỉnh kích thước chữ để làm nổi bật một phần của văn bản. Bằng cách tăng kích thước chữ, bạn có thể làm cho nội dung quan trọng trở nên lớn hơn và dễ nhìn thấy hơn.
6. Định dạng đầu dòng: Sử dụng tính năng thụt đầu dòng hoặc đánh số dòng để tạo sự phân cách và làm nổi bật nội dung quan trọng.
7. Sử dụng hình ảnh và biểu đồ: Chèn hình ảnh hoặc biểu đồ để làm nổi bật nội dung văn bản và trực quan hóa thông tin.
8. Sử dụng trích dẫn và dòng nổi bật: Đặt nội dung quan trọng trong trích dẫn hoặc dòng nổi bật để làm nổi bật và thu hút sự chú ý của độc giả.
4. TẠO SIÊU LIÊN KẾT
LUYỆN TẬP
Câu 1: Em hãy sử dụng các phần tử tạo tiêu đề mục để tạo một trang web hiển thị các tiêu đề mục của nội dung bài học này.
Bài làm rút gọn:
<!DOCTYPE html>
<html>
<head>
<title>ĐỊNH DẠNG VĂN BẢN SIÊU LIÊN KẾT</title>
</head>
<body>
<h1>1. TỔ CHỨC CÁC ĐOẠN VĂN BẢN TRONG TRANG WEB </h1>
<p>Nội dung phần 1.</p>
<h1>2. TẠO TIÊU ĐỀ MỤC</h1>
<p>Nội dung phần 2.</p>
<h1>3. LÀM NỔI BẬT NỘI DUNG CỦA VĂN BẢN</h1>
<p>Nộ dung phần 3.</p>
<h1>4. TẠO SIÊU LIÊN KẾT </h1>
<p>Nội dung phần 4.</p>
</body>
</html>
Câu 2: Em hãy sử dụng các phần tử strong, em, mark để làm nổi bật các mục đã tạo ở Câu 1.
Bài làm rút gọn:
Sử dụng strong:
<!DOCTYPE html>
<html>
<head>
<title>ĐỊNH DẠNG VĂN BẢN SIÊU LIÊN KẾT</title>
</head>
<body>
<h1><strong>1. TỔ CHỨC CÁC ĐOẠN VĂN BẢN TRONG TRANG WEB</strong></h1>
<p>Nội dung phần 1.</p>
<h1><strong>2. TẠO TIÊU ĐỀ MỤC</strong></h1>
<p>Nội dung phần 2.</p>
<h1><strong>3. LÀM NỔI BẬT NỘI DUNG CỦA VĂN BẢN</strong></h1>
<p>Nội dung phần 3.</p>
<h1><strong>4. TẠO SIÊU LIÊN KẾT</strong></h1>
<p>Nội dung phần 4.</p>
</body>
</html>
Sử dụng em:
<!DOCTYPE html>
<html>
<head>
<title>ĐỊNH DẠNG VĂN BẢN SIÊU LIÊN KẾT</title>
</head>
<body>
<h1><em>1. TỔ CHỨC CÁC ĐOẠN VĂN BẢN TRONG TRANG WEB</em></h1>
<p>Nội dung phần 1.</p>
<h1><em>2. TẠO TIÊU ĐỀ MỤC</em></h1>
<p>Nội dung phần 2.</p>
<h1><em>3. LÀM NỔI BẬT NỘI DUNG CỦA VĂN BẢN</em></h1>
<p>Nội dung phần 3.</p>
<h1><em>4. TẠO SIÊU LIÊN KẾT</em></h1>
<p>Nội dung phần 4.</p>
</body>
</html>
Sử dụng mark:
<!DOCTYPE html>
<html>
<head>
<title>ĐỊNH DẠNG VĂN BẢN SIÊU LIÊN KẾT</title>
</head>
<body>
<h1><mark>1. TỔ CHỨC CÁC ĐOẠN VĂN BẢN TRONG TRANG WEB</mark></h1>
<p>Nội dung phần 1.</p>
<h1><mark>2. TẠO TIÊU ĐỀ MỤC</mark></h1>
<p>Nội dung phần 2.</p>
<h1><mark>3. LÀM NỔI BẬT NỘI DUNG CỦA VĂN BẢN</mark></h1>
<p>Nội dung phần 3.</p>
<h1><mark>4. TẠO SIÊU LIÊN KẾT</mark></h1>
<p>Nội dung phần 4.</p>
</body>
</html>
VẬN DỤNG:
Em hãy kết hợp sử dụng các phần tử tạo tiêu đề mục từ h1 đến hó với phần tử tạo đoạn văn bản p và phần tử tạo siêu liên kết a để soạn văn bản HTML có nội dung giới thiệu về trường em. Lưu văn bản và mở bằng trình duyệt web.
Bài làm rút gọn:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giới thiệu về Trường XYZ</title>
</head>
<body>
<h1>Trường XYZ</h1>
<h2>Giới thiệu</h2>
<p>Trường XYZ là một cơ sở giáo dục hàng đầu tại khu vực, cam kết mang lại cho sinh viên một môi trường học tập và nghiên cứu tốt nhất.</p>
<h2>Các chương trình học</h2>
<p>Trường XYZ cung cấp một loạt các chương trình học đa dạng, bao gồm:</p>
<ul>
<li><strong>Bachelor of Science (BSc) in Computer Science</strong></li>
<li><strong>Bachelor of Arts (BA) in English Literature</strong></li>
<li><strong>Bachelor of Business Administration (BBA)</strong></li>
</ul>
<h2>Cơ sở vật chất</h2>
<p>Trường XYZ có cơ sở vật chất hiện đại với các phòng học, phòng thí nghiệm và thư viện đầy đủ trang thiết bị và tài liệu.</p>
<h2>Liên hệ</h2>
<p>Để biết thêm thông tin, vui lòng truy cập trang web của chúng tôi: <a href="https://www.truongxyz.edu.vn">www.truongxyz.edu.vn</a></p>
</body>
</html>
TỰ KIỂM TRA
Câu 1: 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>
Bài làm rút gọn:
A. <a href="trangnhat.html">Trang chủ</a>
Câu 2: Mỗi phát biểu sau đây là đúng hay sai khi sử dụng các phần tử để định dạng văn bản trên trang web?
a) Nội dung các tiêu đề mục tạo bởi các phần tử h1, h2, h3, h4, h5, h6 khi hiển thị trên màn hình trình duyệt web đều được in đậm.
b) Nội dung của phần tử strong không thể chứa phần tử hl.
c) Nội dung của phần tử mark khi hiển thị trên màn hình trình duyệt web được tô nền màu xanh.
d) Đoạn văn bản tạo phần tử p được hiển thị trên một đoạn mới khi mở bằng trình duyệt web.
Bài làm rút gọn:
a) Sai.
b) Sai.
c) Sai.
d) Đúng.
Slide bài giảng lớp 12 cánh diều
Slide bài giảng lớp 12 chân trời sáng tạo
Slide bài giảng lớp 12 kết nối tri thức
