Thầy Cải - Quốc Thái

BÀI THỰC HÀNH SỐ 10 - THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB (TRANG 103)

Bài thực hành số 10 - Thực hành tổng hợp thiết kế trang web (trang 103)

Thực hành tổng hợp thiết kế trang web (trang 103). Đây là phần thực hành của bài 18 - Thực hành tổng hợp thiết kế trang web - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

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 như hình 18.2.

Hướng dẫn:
Với bố cục như Hình 18.2, mỗi thành phần (đầu trang, nội dung chính, cuối trang, banner, slogan, ảnh/nội dung) được định nghĩa bằng một lớp riêng hoặc sử dụng chung lớp nếu cùng định dạng.

Phần đầu trang gồm hai phần nhỏ:
• Banner: Có thể sử dụng một ảnh làm nền và tiêu đề là tiêu đề trang web, cỡ chữ to, màu sắc nổi bật. Ví dụ, CSS để trang web hiển thị như Hình 18.1 được thiết lập như sau:

• Slogan: Trong Hình 18.1, slogan gồm 3 ô trên hàng ngang có định dạng giống nhau, mỗi ô có độ rộng bằng 1/3 độ rộng trang. Vì các ô giống nhau nên ta chỉ cần tạo một lớp CSS (đặt tên là block_3). Tuy nhiên khi sử dụng thẻ div, các ô này sẽ được xếp theo chiều dọc. Để hiển thị theo phương ngang, ta sẽ tạo ra một lớp Row có độ rộng bằng độ rộng trang, lớp Row chứa 3 ô trên.

Cách trình bày nhiều ô trong cùng một hàng được sử dụng phổ biến trong các trang web, tạo sự cân đối và hài hòa khi hiển thị. Trong phần nội dung, cách thiết lập hoàn toàn tương tự, áp dụng cho việc chia hai cột bằng nhau trên mỗi hàng. Do vậy, ta sẽ định nghĩa thêm lớp slogan (Hình 18.3) và lớp nội dung chính (content) để bao phía ngoài lớp Row. Mỗi lớp có thể có thêm các đặc tính trình bày riêng.

Ví dụ CSS cho slogan như Hình 18.3 được thiết lập như sau:

Với phần nội dung chính và cuối trang, ta thực hiện việc phân tích bố cục và thiết lập CSS hoàn toàn tương tự.
Sau khi hoàn thành, lưu tệp tin dướ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 để tạo trang web theo phân tích ở Nhiệm vụ 1.
Hướng dẫn:
Để sử dụng các thiết lập CSS từ Nhiệm vụ 1, ta cần tạo các khối bằng thẻ div với các lớp CSS đã tạo. Ví dụ, để tạo khối banner cho trang chủ ta làm như sau:

Thực hiện tương tự cho cả ba tệp tin.
Chuẩn bị một số hình ảnh và video các hoạt động tại lớp/trường em để sử dụng trong mỗi trang web.
Tạo các liên kết từ trang chủ đến hai trang còn lại và đặt liên kết tới các trang khác ở phần cuối trang.

Code tham khảo file styles.css ➺ Tải file

Code tham khảo file index.html ➺ Tải file

Code tham khảo file thethao.html ➺ Tải file

Code tham khảo file nghethuat.html ➺ Tải file

Lưu ý:
- Trên đây chỉ là code tham khảo, chỉ đáp ứng được các yêu cầu tối thiểu. Các em phải chỉnh sửa lại code để trang web sinh động hơn.
- Tất cả các file phải lưu trong cùng thư mục.
- Form đăng ký tham gia CLB là sử dụng form của Google, nếu muốn viết code cho form thì phải viết thêm code cho file xuly.php và cài thêm phần mềm hỗ trợ sever thì mới sử dụng được nút submit.
Chỗ nào chưa rõ thì trao đổi trực tiếp với thầy. Chúc các em tạo được trang web như mong muốn.

CÙNG CHUYÊN MỤC:

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI THỰC HÀNH SỐ 9 - NHẬP TỆP HTML VÀ THIẾT LẬP ĐỊNH DẠNG BẰNG CSS (TRANG 100)

Bài thực hành số 9 - Nhập tệp HTML và thiết lập định dạng bằng CSS (trang 100)

Thực hành nhập tệp HTML và thiết lập định dạng bằng CSS (trang 100). Đây là phần thực hành của bài 17 - Các mức ưu tiên của bộ chọn - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

4. THỰC HÀNH

Nhiệm vụ 1: Nhập tệp HTML

Yêu cầu: Nhập tệp HTML với nội dung như sau:

Nhiệm vụ 2: Thiết lập định dạng bằng CSS

Yêu cầu: Thiết lập định dạng cho tệp HTML ở Nhiệm vụ 1 bằng CSS theo các yêu cầu sau:
- Tiêu đề chính của bài màu đỏ, căn giữa.
- Các tiêu đề nhỏ vào xanh, đậm.
- Phần kết nối liên kết phía trên định dạng trên một hàng ngang, căn phải, các liên kết có màu nền xanh lá cây. Khi di chuột lên thì chuyển chữ màu đỏ.
- Các đoạn đầu tiên bên dưới các tiêu đề có màu đỏ, các đoạn khác vẫn màu mặc định.
- Các hình ảnh logo ban đầu ẩn đi. Khi nháy chuột lên dòng “Xem logo của HTML.” và “Xem logo của CSS.” thì các hình ảnh tương ứng được hiện ra.
Hình ảnh trang web sau khi định dạng cần được thể hiện như Hình 17.3.

Hướng dẫn:

- Phần liên kết đầu trang có thể thiết lập bằng các thẻ <nav> và <ul/li> như sau:

- CSS được thiết lập như sau:

Code tham khảo. (Trang 100) ➺ Tải file

CÙNG CHUYÊN MỤC:

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI THỰC HÀNH SỐ 8 - TẠO TRANG WEB (TRANG 93)

Bài thực hành số 8 - Tạo trang web (trang 93)

Thực hành tạo trang web (trang 93). Đây là phần thực hành của bài 16 - Định dạng khung - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

3. THỰC HÀNH

Nhiệm vụ: Tạo trang web

Yêu cầu: Tạo trang web mô tả bảng 16 tên màu cơ bản CSS như Hình 16.5.

Gợi ý: Bài thực hành có thể thực hiện theo hai bước:
Bước 1. Thiết lập bảng với nội dung như Hình 16.5 nhưng chưa định dạng.
Bước 2. Viết bổ sung các mẫu CSS để định dạng khung đúng như Hình 16.5.

Hướng dẫn:

Bước 1. Thiết lập trang web theo nội dung như Hình 16.5. Sử dụng các thẻ <table> … <table> để thiết lập bảng. Tên bảng được thiết lập bằng thẻ <caption>. Các hàng thiết lập bằng thẻ <tr> … <tr> và ô của bảng thiết lập bằng thẻ <td> … <td>. Riêng các ô tiêu đề (hàng thứ nhất) sẽ sử dụng thẻ <th>. Lưu ý các ô cuối của mỗi hàng cần được thiết lập vào nền theo đúng thông số màu đã ghi tại cột 1 hoặc cột 2. Ví dụ mã nguồn của bảng với hai hàng đầu tiên như sau, các hàng khác sẽ được thiết lập tương tự:

Bước 2. Thiết lập mẫu CSS để tạo khuôn khung, viền cho bảng.
Ví dụ các mẫu định dạng sau:

Code tham khảo. (Trang 93) ➺ Tải file

CÙNG CHUYÊN MỤC:

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI THỰC HÀNH SỐ 7 - TẠO TRANG HTML VÀ ĐỊNH DẠNG CSS (TRANG 88)

Bài thực hành số 7 - Tạo trang HTML và định dạng CSS (trang 88)

Thực hành tạo trang HTML và định dạng CSS (trang 88). Đây là phần thực hành của bài 15 - Tạo màu cho chữ và nền - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

3. THỰC HÀNH

Nhiệm vụ: Tạo trang HTML và định dạng CSS

Yêu cầu: Thiết lập trang HTML và định dạng CSS để thể hiện văn bản sau chính xác và đẹp:

Hướng dẫn:

Bước 1. Nhập văn bản trên thành tệp HTML. Có thể thiết lập các phần tử HTML như sau:
- Bốn ý chính của lợi ích CSS được trình bày bằng cặp thẻ <ul><li>.
- Các câu đầu in đậm của các ý chính dùng thẻ <strong>.
- Cụm từ in nghiêng dùng thẻ <em>.
Bước 2. Viết ra các yêu cầu trình bày trang web, ví dụ:
- Tiêu đề chữ màu đỏ.
- Nội dung chính dùng dấu đầu dòng, không có thứ tự để trình bày.
- Các dòng của danh sách có chiều cao vòng bằng 1,5 bình thường.
- Dòng chữ nhấn mạnh đầu dòng để màu xanh đậm.
- Các cụm từ nhấn mạnh bên trong các dòng dùng màu đỏ, chữ nghiêng.
Bước 3. Thiết lập các mẫu định dạng CSS.

Code tham khảo. (Trang 88) ➺ Tải file

CÙNG CHUYÊN MỤC:

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI THỰC HÀNH SỐ 6 - THIẾT LẬP MẪU ĐỊNH DẠNG CSS (TRANG 81)

Bài thực hành số 6 - Thiết lập mẫu định dạng CSS (trang 81)

Thực hành thiết lập mẫu định dạng CSS (trang 81). Đây là phần thực hành của bài 14 - Định dạng văn bản bằng CSS - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

3. THỰC HÀNH

Nhiệm vụ 1: Thiết lập mẫu định dạng CSS

Yêu cầu: Thiết lập mẫu định dạng CSS để trình bày nội dung văn bản trong Hình 14.8 trên trang web.

Văn bản trong Hình 14.8 cần được trình bày theo yêu cầu sau:
- Các tiêu đề căn trái, cỡ chữ 16 px, màu đỏ, phông chữ không chân.
- Các dòng văn bản thụt lề dòng đầu 2 kí tự, căn trái.
- Toàn bộ văn bản, trừ tiêu đề, là phông chữ có chân.

Hướng dẫn:

Nhiệm vụ 2: Thiết lập mẫu định dạng CSS

Yêu cầu: Thiết lập định dạng cho trang web ở Nhiệm vụ 1 với các yêu cầu sau:
- Các tiêu đề căn giữa, cỡ chữ 16 px, màu xanh.
- Các dòng văn bản thụt lề dòng đầu 2 kí tự, căn đều hai bên.
- Các từ in đậm và in nghiêng trong văn bản sẽ thể hiện theo mặc định của trình duyệt.

Hướng dẫn:

Code tham khảo Nhiệm vụ 1. (Trang 81) ➺ Tải file

Code tham khảo Nhiệm vụ 2. (Trang 82) ➺ Tải file

CÙNG CHUYÊN MỤC:

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI THỰC HÀNH SỐ 5 - TẠO BIỂU MẪU (TRANG 69)

Bài thực hành số 5 - Tạo biểu mẫu (trang 69)

Thực hành tạo biểu mẫu (trang 69). Đây là phần thực hành của bài 12 - Tạo biểu mẫu - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

2. THỰC HÀNH TẠO BIỂU MẪU

Nhiệm vụ 1: Tạo biểu mẫu

Yêu cầu: Tạo biểu mẫu để nhập thông tin các món ăn (Hình 12.2).

Hướng dẫn:

Bước 1. Tạo tiêu đề cho biểu mẫu bằng thẻ heading:
<h2> thông tin món ăn</h2>.
Bước 2. Tạo một biểu mẫu bằng cặp thẻ <form></form>.
Bước 3. Trong cặp thẻ <form>, lần lượt tạo ba cặp label và input.
Mỗi thẻ <input>, ngoài việc sử dụng thuộc tính type để xác định kiểu dữ liệu cần nhập, cần thiết lập mã định danh bằng thuộc tính id để liên kết với thẻ <label> tương ứng. Ví dụ:

Ở đây phần tử input là thường nhập dữ liệu dạng chữ, ứng với nhãn Tên món ăn.
Để phần tử label được viết trên dòng mới cần thêm thẻ <br> vào trước thẻ <label> tương ứng.

Nhiệm vụ 2: Tạo biểu mẫu

Yêu cầu: Tạo biểu mẫu để nhập thông tin đăng kí môn thi tốt nghiệp (Hình 12.3).

Hướng dẫn:

Bước 1. Xác định thông tin cần cung cấp:
- Họ và tên: type="text”.
- Số căn cước công dân: type="number”.
- Ngày sinh: type="date”.
- Giới tính: Chọn một trong hai giá trị type="radio” (hoặc phần tử select).
- Các môn Toán, Ngữ văn, Ngoại ngữ: Giá trị có hoặc không: type="checkbox”.
- Tổ hợp môn Khoa học tự nhiên hoặc Khoa học xã hội: Chọn một trong hai giá trị type=”radio” (hoặc phần tử select).
- Nút gửi thông tin: type="submit” value="Gửi thông tin”.
Bước 2. Lần lượt thêm các phần tử đã phân tích ở trên theo cấu trúc đã học.
Bước 3. Ngoài ra, để biểu mẫu dễ nhìn, ta bổ sung thêm tiêu đề bằng thẻ <h1> và nhóm các thông tin bằng thẻ <fieldset> bằng cách đặt tất cả các câu lệnh để hiển thị các phần tử nằm trong khung giữa cặp thẻ <fieldset> … </fieldset>.
Kết quả thu được là biểu mẫu như Hình 12.3.

Code tham khảo Nhiệm vụ 1. Tạo biểu mẫu Thông tin món ăn ➺ Tải file

Code tham khảo Nhiệm vụ 2. Tạo biểu mẫu Đăng kí môn thi tốt nghiệp ➺ Tải file

CÙNG CHUYÊN MỤC:

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI THỰC HÀNH SỐ 4 - CHÈN TỆP ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN (TRANG 65)

Bài thực hành số 4 - Chèn tệp đa phương tiện và khung nội tuyến (trang 65)

Thực hành chèn tệp đa phương tiện và khung nội tuyến (trang 65). Đây là phần thực hành của bài 11 - Chèn tệp đa phương tiện và khung nội tuyến vào trang web - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

4. THỰC HÀNH CHÈN TỆP ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN

Nhiệm vụ 1: Chèn tệp ảnh

Yêu cầu: Tạo hai trang the_thao.html và nghe_thuat.html và chèn ảnh minh họa.

Hướng dẫn:

- Tạo trang the_thao.html và chèn một ảnh bằng thẻ <img>.
Chuẩn bị: Tạo thư mục images trong thư mục chứa các bài tập thực hành, sao chép một ảnh hoạt động thể thao của trường/lớp vào thư mục đó (chẳng hạn tệp thethao.png).
Chèn ảnh đã chuẩn bị vào trang web:

- Tạo trang nghe_thuat.html: Thực hiện tương tự cách tạo trang the_thao.html.

Nhiệm vụ 2: Chèn tệp âm thanh

Yêu cầu: Chèn tệp bài hát “Quốc ca” vào trang web.

Hướng dẫn:

Chuẩn bị tệp bài hát Quốc ca (mp4 nếu là video, mp3 nếu là audio) và thực hiện chèn vào trang web bằng thẻ phù hợp và để ở chế độ autoplay.
Lưu ý: Em chỉ nên dùng các tài nguyên được phép sử dụng cho trang web của mình.

Nhiệm vụ 3: Chèn khung nội tuyến

Yêu cầu: Chèn khung nội tuyến vào trang CLB.html, hiển thị nội dung của hai trang the_thao.html hoặc nghe_thuat.html tùy theo lựa chọn (Hình 11.5).

Hướng dẫn:

Sử dụng iframe để chèn nội dung của hai trang đã viết trong Nhiệm vụ 1.
Bước 1. Tạo tệp tin index.html có nội dung “Câu lạc bộ ngoại khóa Trường Nguyễn Bỉnh Khiêm” đặt trong cặp thẻ <h2></h2>.
Bước 2. Tạo một phần tử iframe để hiển thị nội dung, phần tử iframe được gắn mã định danh để đặt liên kết.

Bước 3. Tạo hai vị trí đặt liên kết tương ứng với hai lựa chọn là câu lạc bộ thể thao hoặc câu lạc bộ nghệ thuật và đặt liên kết bằng thẻ <a> với thuộc tính target là mã định danh của khung nhìn vừa tạo.

Lưu ý: Thứ tự hiển thị là thứ tự các đoạn mã lệnh, để các lựa chọn câu lạc bộ hiển thị phía trên cần viết câu lệnh trong Bước 3 ở trên câu lệnh trong Bước 2.

Code tham khảo cho trang thethao.html ➺ Tải file

- Dòng 18: Chèn ảnh thethao.jpg trong thư mục images vào trang thethao.html
- Dòng 19: Chèn bài hát quoc_ca.mp4 trong thư mục images vào trang thethao.html

Code tham khảo cho trang nghethuat.html ➺ Tải file

- Dòng 17: Chèn ảnh nghethuat.jpg trong thư mục images vào trang nghethuat.html
- Dòng 18: Chèn bài hát quoc_ca.mp4 trong thư mục images vào trang nghethuat.html

Code tham khảo cho tệp tin index.html ➺ Tải file

- Dòng 9: Liên kết đến trang thethao.html để hiển thị trong khung nội tuyến.
- Dòng 10: Liên kết đến trang nghethuat.html để hiển thị trong khung nội tuyến.
- Dòng 11: Tạo khung nội tuyến để trang thethao.html và trang nghethuat.html hiển thị.

CÙNG CHUYÊN MỤC:

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI THỰC HÀNH SỐ 3 - TẠO LIÊN KẾT (TRANG 61)

Bài thực hành số 3 - Tạo liên kết (trang 61)

Thực hành tạo liên kết (trang 61). Đây là phần thực hành của bài 10 - Tạo liên kết - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.

3. THỰC HÀNH TẠO LIÊN KẾT

Nhiệm vụ 1: Tạo liên kết trong cùng trang

Yêu cầu: Tạo liên kết trong cùng trang web tới bảng thời gian hoạt động.
Sử dụng danh sách và bảng đã tạo trong Bài 9. Em hãy thêm phần giới thiệu lên phía đầu trang và đặt liên kết từ vị trí “Theo dõi lịch hoạt động các CLB Thể thao” tới bảng “Lịch hoạt động các CLB Thể thao” bên dưới.

Hướng dẫn:

Bước 1. Mở tệp tin CLB.html và thêm các nội dung giới thiệu như (Hình 10.2).
Bước 2. Thêm mã định danh cho bảng Lịch hoạt động các CLB Thể thao ở bài trước:

Bước 3. Thêm liên kết cho dòng “Theo dõi lịch hoạt động các CLB Thể thao”.

Nhiệm vụ 2: Tạo liên kết sang trang khác

Yêu cầu: Bổ sung vào tệp thong_tin.html những thông tin về các câu lạc bộ và đặt đường liên kết từ trang chủ đến trang thông tin này.

Hướng dẫn:

Bước 1. Trong cùng thư mục với tệp CLB.html, tạo tệp thong_tin.html và thêm nội dung giới thiệu thông tin về các câu lạc bộ.
Bước 2. Tạo liên kết bằng đường dẫn tương đối đến tệp này (đoạn mã viết trong tệp CLB.html).