CHỦ ĐỀ F. BÀI 11. MÔ HÌNH HỘP, BỐ CỤC TRANG WEB
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ F. BÀI 11. MÔ HÌNH HỘP, BỐ CỤC TRANG WEB
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Mô tả được mô hình hộp trong trình bày phần tử HTML. Trình bày được cách hiển thị phần tử theo khối, theo dòng. Nhận diện được các thành phần cơ bản trong bố cục trang web.
Khởi động
Khởi động
Khởi động
Em hãy truy cập trang chủ của các website: http:/moet.gov.vn, htttp://tienphong.vn. Theo em, bố cục của hai trang web này có giống nhau không?
Ảnh
1. Mô hình hộp trong trình bày phần tử HTML
Tìm hiểu
1. Mô hình hộp trong trình bày phần tử HTML
Các phần tử trong văn bản HTML được trình bày trên trình duyệt web theo mô hình hộp (box model) (Hình 1). Theo đó, mỗi phần từ khi được trình bày có cấu trúc logic gồm các hộp chữ nhật xác định các vùng nội dung và vùng đường viền. Ngăn cách nhau giữa vùng nội dung và vùng đường viền là một vùng đệm mặc định hiển thị trong suốt, giúp phân tách nội dung và đường viền khi hiển thị trên màn hình trình duyệt web. Vùng lề là một vùng mặc định hiển thị trong suốt, bao ngoài vùng đường viền để phân tách các phần tử được hiển thị cạnh nhau.
Ảnh
Tiếp
Thông thường, các trình duyệt web tự động căn chỉnh để toàn bộ các phần tử được khai báo trong văn bản HTML hiển thị đầy đủ trên màn hình trình duyệt web. Tuy vậy, hoàn toàn có thể điều chỉnh kích cỡ các vùng hiển thị này bằng cách thiết lập giá trị phù hợp cho các thuộc tính định dạng CSS. Bảng 1 liệt kê một số thuộc tính định dạng CSS cho các vùng hiển thị này.
Ảnh
Tiếp
Ví dụ 1. Trong văn bản HTML ở Hình 2a có khai báo thuộc tính định dạng kích thước vùng lề của phần tử p, kết quả hiển thị trên màn hình trình duyệt web như Hình 2.
Ảnh
Tiếp
Ví dụ 2. Trong văn bản HTML ở Hình 3a có khai báo thuộc tính định dạng kích thước vùng đệm và đường viền của phần tử p, kết quả hiển thị trên màn hình trình duyệt web như ở Hình 3b.
Ảnh
2. Hiển thị phần từ theo khối, theo dòng
Hoạt động
2. Hiển thị phần từ theo khối, theo dòng
Hoạt động Theo em, trên một dòng của màn hình trình duyệt web có thể hiện thị nhiều phần tử HTML được không?
Tìm hiểu
2. Hiển thị phần từ theo khối, theo dòng
Theo mặc định, mỗi phần tử HTML sẽ được xác định kiểu hiển thị theo khối hoặc theo dòng. Với cách hiển thị theo khối, mỗi phần tử được hiển thị trên một dòng mới. Ngược lại, với cách hiển thị theo dòng, nhiều phần tử có thể được hiển thị trên cùng một dòng. Ví dụ: phần tử h1, p hiển thị theo khối; phần tử img, a hiển thị theo dòng. CSS cho phép thay đổi kiểu hiển thị mặc định của các phần tử HTML trên trang web thông qua thuộc tính CSS display. Thiết lập kiểu hiển thị của phần tử theo khối được khai báo như sau:
Ảnh
Thiết lập kiểu hiển thị của phần tử theo dòng được khai báo như sau:
Ảnh
Tiếp
Ví dụ 3. Trong văn bản HTML ở Hình 4a, dòng 6 khai báo định dạng hiển thị theo khối, dòng 7 khai báo định dạng hiển thị theo dòng và kết quả hiển thị trên màn hình trình duyệt web như ở Hình 4.
Ảnh
3. Bố cục trang web
Hoạt động
3. Bố cục trang web
Bố cục trang web là cách sắp xếp, bố trí các đối tượng nội dung trên trang web vào các khu vực hiển thị khác nhau để tạo nên một giao diện web. Tuỳ thuộc vào mục đích chuyển tải thông tin, trang web có các bố cục khác nhau. Mỗi trang web như minh hoạ ở Hình 5 thường gồm một số thành phần cơ bản sau đây:
Ảnh
Tiếp
1. Phần đầu trang (header): cung cấp thông tin như logo, tiêu đề trang web. 2. Thanh điều hướng (navigation menu): là tập hợp các siêu liên kết đến các trang web khác trong website. 3. Phần nội dung (content): cung cấp thông tin chính của trang web. 4. Phần chân trang (footer): cung cấp các thông tin bổ trợ như bản quyền, các liên kết nhanh. Một cách phổ biến để phân chia trang web thành các vùng là sử dụng phần tử div kết hợp với các định dạng CSS như bộ chọn lớp, bộ chọn định danh. Mỗi vùng thường
Tiếp (a, Thuộc tính định dạng màu sắc)
Ví dụ 4. Văn bản HTML ở Hình 6a sử dụng phần tử div, kết hợp với định dạng CSS để tạo ra bốn vùng khác nhau, kết quả bố cục trang web sẽ như ở Hình 6b.
Ảnh
Tiếp (b, Thuộc tính định dạng phông chữ)
Ảnh
Luyện tập
Luyện tập
Luyện tập
Em hãy khai báo thêm các quy tắc định dạng cho trang web “Bài10-NV1.html" để nội dung có phần tử body có khoảng cách lề 30 pixel, phần tử h3 có đường viền tô nét (solid), khoảng cách vùng đệm là 20 pixel.
Vân dụng
Vận dụng
Vận dụng
Em hãy sử dụng phần mềm div kết hợp với định dạng CSS để tách trang web Bài 10-NV1.html thành 2 phần: Phần đầu trang và phần nội dung. Phần đầu trang là tiêu đề “Đóng góp ý kiến cho thư viện của nhà trường”, phần nội dung là các thông tin còn lại. Tạo màu nền khác nhau cho 2 phần này.
Câu hỏi tự kiểm tra
Câu hỏi 1
Câu hỏi tự kiểm tra
Bài tập trắc nghiệm
Câu hỏi 1: Cho khai báo định dạng sau: p{height: 50 px; padding:5px; border: 2px solid; margin: 4px;}. Khi đó chiều cao của phần tử p tính theo pixel là bao nhiêu?
A. 60px
B. 72px
C. 54px
D. 64px
Câu hỏi 2
Câu hỏi tự kiểm tra
Câu 2: Cần thiết lập hiển thị theo dòng hoặc theo khối để tạo trang web như ở Hình 7, mỗi phát biểu dưới đây là dúng hay sai?
Ảnh
TIếp (Câu hỏi 2)
a) Theo mặc định, các phần tử input được hiển thị theo khối nên khi khai báo các phần tử input trong văn bản HTML không cần xác định thuộc tính display mà các điều khiển trên biểu mẫu vẫn hiển thị đúng như yêu cầu. b) Để hiển thị như yêu cầu cần định dạng các label được hiển thị theo khối bằng khai báo định dạng label {display: block}. Phần body của văn bản HTML khai báo như sau:

Họ tên Địa chỉ

TIếp (Câu hỏi 2)
c) Để hiển thị như yêu cầu cần định dạng các label được hiển thị theo khối bằng khai báo label {display: block}. Phần body của văn bản HTML khai báo như sau:

Họ tên Ɖia chi

d) Theo mặc định, các phần tử input được hiển thị theo dòng nên cần khai báo định dạng hiển thị theo khối cho hai ô text nhập dữ liệu .bl {display: block}. Phần body của văn bản HTML khai báo như sau:

11o tên Dia chi

Tổng kết
Ghi nhớ
Ghi nhớ
Hình vẽ
CSS trình bày các phần tử HTML trên trình duyệt web theo mô hình hộp. CSS định nghĩa một số thuộc tính định dạng để tuỳ chỉnh vùng lề, đường viền, vùng đệm, vùng nội dung của mô hình hộp. Định dạng CSS cho phép hiển thị phần tử theo khối hoặc theo dòng thông qua thuộc tính display. Thông thường, bố cục của một trang web gồm: phần đầu trang, thanh điều hướng, phần nội dung, phần chân trang.
Kết thúc bài hoc
Ảnh