Câu 1: Hãy nêu cấu trúc chung của một trang web và khái niệm phần thân trang web?
Cấu trúc chung của một trang web thường bao gồm các phần chính sau:
- Phần đầu trang (Header):
- Thường chứa logo, tên trang web, thanh điều hướng chính (menu), các nút tìm kiếm hoặc thông tin liên hệ.
- Là phần hiển thị đầu tiên mà người dùng nhìn thấy và giúp họ định hướng trên trang web.
- Phần thân trang (Body):
- Khái niệm: Phần thân trang web là khu vực chính chứa nội dung của trang, bao gồm văn bản, hình ảnh, video, âm thanh, các yếu tố tương tác (nút, biểu mẫu), và các thành phần nội dung khác.
- Đây là nơi truyền tải thông tin, cung cấp giá trị và tương tác với người dùng.
- Cấu trúc của phần thân trang có thể khác nhau tùy thuộc vào mục đích và nội dung của từng trang. Nó thường được chia thành các phần nhỏ hơn (sections) để tổ chức nội dung một cách logic và dễ đọc.
- Phần chân trang (Footer):
- Thường chứa thông tin bản quyền, liên kết phụ (ví dụ: chính sách bảo mật, điều khoản sử dụng, sơ đồ trang web), thông tin liên hệ chi tiết, mạng xã hội, hoặc các thông tin bổ sung khác.
- Là phần cuối cùng của trang web và thường chứa các thông tin mang tính tham khảo hoặc pháp lý.
Câu 2: Em hãy nêu các bước tạo phần thân trang Web?
Các bước tạo phần thân trang web thường liên quan đến việc sử dụng ngôn ngữ đánh dấu siêu văn bản HTML (HyperText Markup Language) để cấu trúc nội dung và ngôn ngữ định dạng CSS (Cascading Style Sheets) để trình bày giao diện. Dưới đây là các bước cơ bản:
- Xác định cấu trúc nội dung:
- Lên kế hoạch về các phần (sections) chính của phần thân trang. Ví dụ: phần giới thiệu, phần nội dung chi tiết, phần hình ảnh, phần video, phần liên hệ, v.v.
- Quyết định cách sắp xếp các phần này trên trang.
- Sử dụng thẻ HTML để tạo cấu trúc:
- Sử dụng các thẻ HTML semantic (có ý nghĩa) để bao bọc nội dung một cách logic. Ví dụ:
<main>: Thường dùng để bao bọc nội dung chính của trang.<article>: Đại diện cho một nội dung độc lập, có thể tái sử dụng.<section>: Đại diện cho một phần nội dung theo chủ đề.<div>: Một container chung để nhóm các phần tử khác.<p>: Đoạn văn bản.<h1> đến <h6>: Tiêu đề các cấp độ.<img>: Hình ảnh.<video>: Video.<ul>, <ol>, <li>: Danh sách không thứ tự và có thứ tự.<a>: Liên kết.- Ví dụ cấu trúc HTML cơ bản cho phần thân: HTML
<main>
<section id="gioi-thieu">
<h1>Giới thiệu về chúng tôi</h1>
<p>Đây là đoạn giới thiệu ngắn...</p>
</section>
<article id="san-pham-1">
<h2>Sản phẩm A</h2>
<img src="sanpham-a.jpg" alt="Sản phẩm A">
<p>Mô tả chi tiết về sản phẩm A...</p>
<button>Xem thêm</button>
</article>
<section id="lien-he">
<h2>Liên hệ</h2>
<form>
</form>
</section>
</main>
- Sử dụng CSS để định dạng giao diện:
- Sử dụng CSS để tạo kiểu cho các phần tử HTML trong phần thân trang, bao gồm:
- Màu sắc, font chữ, kích thước chữ.
- Khoảng cách (margin, padding).
- Bố cục (layout) sử dụng Flexbox, Grid hoặc các thuộc tính float, position.
- Hiệu ứng (transitions, animations).
- Khả năng đáp ứng (responsive design) để trang web hiển thị tốt trên nhiều thiết bị.
- Ví dụ CSS cơ bản: CSS
#gioi-thieu {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
#san-pham-1 {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 10px;
}
#san-pham-1 img {
max-width: 100%;
height: auto;
}
#lien-he form {
display: flex;
flex-direction: column;
width: 50%;
margin: 0 auto;
}
- Thêm nội dung:
- Điền nội dung thực tế (văn bản, hình ảnh, video, v.v.) vào các thẻ HTML đã tạo.
- Kiểm tra và điều chỉnh:
- Xem trang web trên trình duyệt để đảm bảo cấu trúc và giao diện hiển thị đúng như mong muốn.
- Sử dụng các công cụ phát triển của trình duyệt (Developer Tools) để kiểm tra HTML và CSS, tìm và sửa lỗi.
- Điều chỉnh HTML và CSS cho đến khi đạt được kết quả ưng ý.
Lưu ý: Các bước trên là quy trình cơ bản. Trong thực tế, việc tạo phần thân trang web có thể phức tạp hơn tùy thuộc vào yêu cầu cụ thể của dự án và việc sử dụng các thư viện, framework hỗ trợ.
Câu 3: Giả sử trong trang chủ của Google Sites chứa các trang con ta muốn đưa các trang con về cùng cấp với trang chủ. Ta thực hiện như thế nào?
Trong Google Sites (phiên bản mới), để đưa các trang con về cùng cấp với trang chủ (tức là hiển thị trực tiếp trên thanh điều hướng chính), bạn cần thực hiện các bước sau:
- Truy cập Google Sites: Mở trang web Google Sites mà bạn đang chỉnh sửa.
- Mở bảng điều hướng "Trang": Ở phía bên phải của màn hình, bạn sẽ thấy một bảng điều hướng có các tab như "Chèn", "Trang", "Chủ đề". Nhấp vào tab "Trang" (Pages).
- Xác định các trang con cần di chuyển: Trong danh sách các trang, bạn sẽ thấy trang chủ và các trang con được thụt vào bên dưới trang chủ.
- Di chuyển trang con:
- Di chuột qua tên trang con mà bạn muốn đưa lên cùng cấp với trang chủ.
- Bạn sẽ thấy ba dấu chấm dọc (
⋮) xuất hiện ở bên phải tên trang. Nhấp vào ba dấu chấm này để mở menu tùy chọn của trang. - Trong menu tùy chọn, chọn "Hủy bỏ trang con" (Remove subpage) hoặc một tùy chọn tương tự (tùy thuộc vào phiên bản giao diện).
- Lặp lại cho các trang con khác: Thực hiện tương tự cho tất cả các trang con mà bạn muốn đưa lên cùng cấp với trang chủ.
Giải thích:
Khi bạn chọn "Hủy bỏ trang con", Google Sites sẽ di chuyển trang đó ra khỏi cấu trúc thư mục hiện tại và đặt nó ngang hàng với trang chủ trong bảng điều hướng "Trang". Điều này đồng nghĩa với việc các trang này sẽ xuất hiện trực tiếp trên thanh điều hướng chính của trang web, giúp người dùng dễ dàng truy cập hơn.