PHẦN I. ÔN TẬP THEO CHỦ ĐỀ
CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH – TẠO TRANG WEB
Sử dụng HTML và CSS trong tạo trang web
1. YÊU CẦU CẦN ĐẠT
- Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.
- Sử dụng được các thẻ HTML để định dạng văn bản, phông chữ, tạo liên kết, danh sách.
- Đưa các tệp dữ liệu đa phương tiện vào trang web (ảnh, âm thanh, video).
- Tạo bảng, khung (frame).
- Tạo mẫu biểu (form).
- Hiểu và sử dụng được một số thuộc tính cơ bản của CSS: màu sắc, phông chữ, nền, đường viền, kích cỡ...
- Sử dụng được các yếu tố của vùng chọn (selector) như class, id, tag...
- Sử dụng được CSS làm trang web đẹp, đa dạng và sinh động hơn.
- Hiểu được mức độ ưu tiên khi áp dụng CSS.
2. KIẾN THỨC TRỌNG TÂM
2.1. Sử dụng HTML trong tạo trang web
a. Thẻ đánh dấu HTML
Thẻ đánh dấu (HTML tag) là các thành phần chính tạo thành ngôn ngữ HTML. Mỗi loại thẻ có tên riêng và ý nghĩa nhất định. Mỗi thẻ được viết trong cặp dấu < >, có thể có thuộc tính và có thể lồng nhau.
Cú pháp: <thẻ_mở thuộc_tính="giá trị">...</thẻ_đóng>
b. Phần tử HTML
Phần tử HTML là toàn bộ thẻ và nội dung của thẻ. Mỗi tệp HTML là tập hợp các phần tử HTML. Cú pháp: <tên_thẻ>nội dung</tên_thẻ>
c. Cấu trúc tệp HTML
Cấu trúc tệp HTML có dạng cây thông tin gồm các phần tử HTML. Gốc chính là phần tử <html>. Mỗi tệp HTML bao gồm:
- Phần đầu <head>: Khai báo tiêu đề (<title>), liên kết CSS (<link>, <style>), mã JavaScript (<script>), bộ ký tự (<meta>).
- Phần thân <body>: Chứa toàn bộ nội dung chính của trang web như văn bản, hình ảnh, liên kết, bảng...
Các thẻ định dạng trang web
- Định dạng tiêu đề: <h1> đến <h6>. <h1> là tiêu đề lớn nhất, <h6> là nhỏ nhất.
- Định dạng đoạn văn: <p>, <div>, <span>, <br>, <hr>.
Tạo danh sách
- Danh sách có thứ tự: <ol type="kiểu" start="giá_trị"><li>...</li></ol>
- Danh sách không có thứ tự: <ul style="list-style-type: kiểu"><li>...</li></ul>
- Danh sách mô tả: <dl><dt>Tên mục</dt><dd>Mô tả mục</dd></dl>
Thiết lập bảng
Bảng được tạo bằng thẻ <table>, mỗi hàng là <tr>, ô tiêu đề là <th>, ô nội dung là <td>. Tiêu đề bảng dùng <caption>.
Cú pháp: <table><caption>Tiêu đề</caption><tr><th>Tiêu đề cột</th></tr><tr><td>Nội dung</td></tr></table>
Tạo liên kết
Cú pháp: <a href="URL">Nội dung hiển thị</a>. URL là đường dẫn tham chiếu tới tài liệu liên kết.
- Đường dẫn tuyệt đối: liên kết đến tài liệu không cùng máy chủ với trang web hiện tại.
- Đường dẫn tương đối: liên kết đến tài liệu trên cùng máy chủ.
- Dùng dấu # để liên kết tới vị trí khác cùng trang web.
Chèn tệp đa phương tiện
Chèn nội dung đa phương tiện bằng các thẻ <img>, <audio>, <video>. Các thẻ này đều có thuộc tính src.
- Hình ảnh: <img src="đường_dẫn" width="..." height="..." alt="văn bản thay thế">
- Audio/Video: <video|audio controls><source src="đường_dẫn" type="video/mp4"></video|audio>
Tạo khung nội tuyến (iframe)
Khung nội tuyến chứa tài nguyên web khác trong trang hiện tại. Cú pháp: <iframe src="đường_dẫn" width="..." height="..."></iframe>
Tạo biểu mẫu (Form)
Biểu mẫu là công cụ thu thập dữ liệu. Dữ liệu nhập vào form được xử lý tại chỗ hoặc gửi về máy chủ. Cú pháp: <form>Các phần tử</form>
Các phần tử thường dùng: <input>, <label>, <select>, <textarea>, <fieldset>.
- <select>: Tạo danh sách lựa chọn thả xuống, mỗi <option> ứng với một lựa chọn.
- <textarea>: Tạo vùng nhập văn bản nhiều dòng, nhiều cột.
- <fieldset>: Nhóm các phần tử liên quan bằng hình chữ nhật bao quanh.
2.2. Sử dụng CSS trong tạo trang web
a. Giới thiệu về CSS
CSS (Cascading Style Sheets) là ngôn ngữ dùng để định kiểu, hình thức và hiệu ứng cho các phần tử HTML, giúp trang web thêm đẹp mắt và sinh động.
Ba cách chèn CSS vào trang web:
- Cách 1 (Inline): Chèn CSS trực tiếp vào thuộc tính style của thẻ HTML.
- Cách 2 (Internal): Chèn CSS trong cặp thẻ <style></style> đặt trong <head>.
- Cách 3 (External): Tạo tệp .css và liên kết bằng thẻ <link> trong <head>.
b. Một số thuộc tính định dạng của CSS
c. Phần tử khối và phần tử nội tuyến
- Phần tử khối (block): Bắt đầu từ đầu hàng, kéo dài suốt chiều rộng trang. Ví dụ: <div>, <p>, <h1>.
- Phần tử nội tuyến (inline): Nhúng bên trong phần tử khác. Ví dụ: <span>, <a>, <strong>.
- Thay đổi loại bằng thuộc tính display: block, inline, none, flex, grid. Giá trị none làm ẩn phần tử.
d. Định dạng khung (Box Model)
- Content (Nội dung): Phần chứa nội dung chính.
- Border (Khung): Viền bao quanh nội dung.
- Padding (Vùng đệm): Khoảng cách giữa nội dung và viền.
- Margin (Lề khung): Khoảng trống xung quanh khung, tách biệt với phần tử khác.
e. Một số bộ chọn đặc biệt của CSS
- Bộ chọn lớp (Class Selector): Chọn các phần tử có cùng giá trị thuộc tính class. Cú pháp: .tên_class { ... }
- Bộ chọn định danh (ID Selector): Áp dụng cho phần tử có id duy nhất. Cú pháp: #tên_id { ... }
g. Mức độ ưu tiên khi áp dụng CSS
- Độ ưu tiên: !important > inline style > ID selector > class selector > tag selector.
- Thứ tự khai báo: Khi cùng mức ưu tiên, quy tắc viết sau sẽ thắng.
- Kế thừa: Một số thuộc tính tự động kế thừa từ phần tử cha, trừ khi phần tử con có quy tắc riêng.
- Vị trí khai báo: CSS inline/internal có ưu tiên cao hơn external CSS.
