Bài tập thực hành HTML và CSS

Bài tập 1-4: Position Columns

I. Giới thiệu

Trong bài tập này lấy văn bản từ tài liệu Word và sử dụng nó để tạo một trang web về
các gói đặc biệt dành cho Tahiti trip mà World Travel Inc. đang cung cấp cho Lễ kỷ niệm
10 năm thành lập. Cần định vị và định dạng các phần của trang thành các cột cạnh nhau.

II. Mục tiêu

Trong bài này sẽ thực hành:

• Sử dụng văn bản để tạo một trang web mới

• Sử dụng CSS để định dạng văn bản, phần tử, DIV, danh sách
• Áp dụng các thuộc tính text-transform, list-style-image, text-shadow, box-shadow.
• Sử dụng các DIV được định vị để sắp xếp văn bản thành các cột cạnh nhau

III. Nội dung thực hành

• Tạo file tahiti1-HoTenSV.html

• Thêm các thẻ cần thiết cho một trang web và sau đó nhập văn bản bên dưới vào
giữa các thẻ BODY mở và đóng.
o (Tiêu đề Package đã được rút ngắn so với tài liệu Word ban đầu để phù
hợp hơn với các cột bạn sẽ tạo.)
• Thêm vào các thẻ HTML:
o <title>Tahiti Packages</title>
o Dòng "Tahiti Packages": H1

huongct@neu.edu.vn
Bài tập thực hành HTML và CSS

o Các dòng "Package…": H2

o Danh sách dấu đầu dòng cho mỗi gói sử dụng thẻ UL và LI
• Tạo BODY style với

font-family:"Century Gothic", Calibri, Arial, Helvetica, sans-serif;

• Thêm H1 style:

font-family:Calibri, Arial, Helvetica, sans-serif;

color:darkred;
border-bottom:medium double darkred;
border-top:medium double darkred;

• Thêm H1 style:

font-family:Calibri, Arial, Helvetica, sans-serif;

color:white;

• Tìm màu bên trong của ảnh sun.gif để thiết lâp màu background cho H2
o Click chuột phải vào ảnh → Open with → Paint → Color Picker tool → Edit
Colors → R:45, G:162, B:191
• Thêm H2 style với thuộc tính background-color sử dụng màu RGB vừa tìm được
• Thêm H1 style và H2 style để tự động chuyển văn bản thành tất cả các chữ cái
viết hoa:

text-transform:uppercase;

• Thêm H1 style

huongct@neu.edu.vn
Bài tập thực hành HTML và CSS

letter-spacing:2px;
font-weight:normal;

• Lưu lại file với tên Tahiti2-HoTenSV.html

• Chia cột: cần một DIV container cộng với một DIV định vị cho mỗi danh sách được
định vị.
o Thêm 1 DIV with thuộc tính id="packages" bao quanh tất cả các tiêu đề
Package và danh sách.
o Trong phần STYLE, thêm một style cho id #packages đặt position: relative,
width: 100%, top và left là 0px
o Kiểu này tạo container củacác DIV được định vị tạo hiệu ứng của các cột.
o Bao quanh mỗi package bằng một DIV, với các ID của các package lần
lượt là package1, package2, package3, và package4.
o Các DIV này sẽ được định vị tuyệt đối (position:absolute) trong DIV
container.
o Cách tạo bốn cột có cùng chiều rộng: Mỗi cột cần phải hẹp hơn một chút
so với 25% chiều rộng có sẵn. Các đỉnh cần cân bằng với nhau ở 0 pixel.
Vì vậy, cần phải đặt một vị trí tuyệt đối và 24% chiều rộng cho cả bốn DIV
package. Mỗi DIV cần một vị trí LEFT khác nhau, là phần trăm quét qua
mỗi package đủ để xóa các cột trước đó và để lại một chút không gian
trống. Bằng cách sử dụng phần trăm chiều rộng, các cột sẽ thay đổi kích
thước khi cửa sổ được thay đổi kích thước. Nếu bạn đặt chiều rộng tính
bằng pixel, các cột không thể thay đổi kích thước.
o Trong phần STYLE section, thêm style:

#package1 {
position:absolute;
left:0px;
top:0px;
width:24%;
}

▪ Đặt package đầu tiên ở bên trên trái của container DIV.
o Tương tự, thêm style cho 3 package với cùng các thuộc tính (ngoại trừ
thuộc tính LEFT sẽ là: 25%, 50%, và 75% (Điều này sẽ để lại 1% là khoảng
trắng giữa các DIV và 1% ở bên phải của DIV thứ tư.)

huongct@neu.edu.vn
Bài tập thực hành HTML và CSS

o Kết quả:

o Thêm line break và xóa một số text:

Package 1<br>water-lover
Package 2<br>stay dry
Package 3<br>sports lover
Package 4<br>culture &amp; shopping

▪ Lưu ý: thuộc tính text-transform để chuyển text sang chữ cái hoa.
o Kết quả:

• Lưu lại file với tên Tahiti3-HoTenSV.html

• Images:
o Sử dụng ảnh bullet-star.gif để tạo kí hiệu cho danh sách là : Tạo style
cho các mục danh sách, LI có thuộc tính sau:

li {
list-style-image:url('bullet-star.gif');
}

huongct@neu.edu.vn
Bài tập thực hành HTML và CSS

o Thêm ảnh sun.gif phía dưới phần tử H1 với các thuộc tính width, height,
ALT, floats:right.

o Cần đặt sun.gif đặt thẳng hàng với H1 với tia sáng ở giữa của mặt trời
hướng vào giữa văn bản H1
o Hiển thị lại tài liệu trên trình duyệt. Các ký hiệu danh sách và ảnh đã float
bên phải, nhưng ảnh ảnh mặt trời bị ẩn một phần bởi định vị DIV cho
package 4. Đó là điều được cho là xảy ra theo mặc định, nhưng nó không
phải là điều cần phải xảy ra đối với trang này.
▪ Ngoài ra, tia sáng mặt trời ở giữa không hướng vào tiêu đề, Tahiti
Packages, giống như trong tài liệu gốc → cần hiệu chỉnh
• Lưu lại file với tên Tahiti4-HoTenSV.html
• Đặt vị trí ảnh sun.gif
o Tạo một positioning container mới cho phần tử H1 và phần tử IMG để có
thể định vị chính xác các phần tử đó. Chọn chiều cao của DIV này để tránh
hình ảnh mặt trời với package lists bên dưới. DIV phải đủ cao để chứa toàn
bộ hình ảnh (147 x 147) và cho phép một chút không gian bên dưới hình
ảnh. Sau đó, sẽ tạo vị trí cho các thẻ H1 và IMG bên trong container.
▪ Thêm một DIV có id= "heading" bao quanh mã nguồn của hình ảnh
và phần tử H1 (Đây sẽ là phần tử container cho các phần tử sẽ định
vị).
▪ Thêm một style cho DIV này:

huongct@neu.edu.vn
Bài tập thực hành HTML và CSS

div#heading{
position:relative;
height:155px;
}

▪ Giá trị mặc định cho TOP và LEFT là 0 pixel.

▪ Hiển thị trên trình duyệt. Kết quả đã tốt hơn, không còn chồng chéo.
Nhưng tia nắng của hình mặt trời đó vẫn chưa được xếp thẳng hàng
vào giữa tiêu đề theo yêu cầu.

▪ Chỉnh sửa lại style cho H1

position:absolute;
left:0px;
top:30px;

▪ Giá trị 30px được tìm thấy bằng cách thử nghiệm.
▪ Lưu lại file với tên Tahiti5-HoTenSV.html
▪ Hiển thị trên trình duyệt. Bây giờ tia sáng ở giữa của mặt trời đang
hướng vào giữa văn bản H1 (điều thú vị là việc để mặt trời ở vị trí
này giữ cho border của H1 không kéo dài qua văn bản).

huongct@neu.edu.vn
Bài tập thực hành HTML và CSS

• Shadows

o CSS có hai loại bóng shadows - text và box → ở đây sử dụng shadows-
text để tạo bóng cho văn bản H1 và shadows - box để tạo bóng cho các
DIV cho danh sách, giống như chúng là các thẻ nổi trên đầu trang web.

o Cả hai loại bóng đều có cùng một cú pháp: yêu cầu thiết lập khoảng cách
bóng ngang và dọc. Cũng có thể thiết lập độ mờ và độ lan rộng cho bóng
đổ, màu sắc của nó và có nên chèn bóng hay không (bóng bên trong thay
vì bên ngoài đối tượng).

▪ Cú pháp: box-shadow: h-shadow v-shadow blur spread color inset;

o Lưu tài liệu có tên là ex4-tahiti6-HoTenSV.html trong thư mục mới tahiti.

huongct@neu.edu.vn
Bài tập thực hành HTML và CSS

o Hiệu chỉnh style của H1 để thêm thuộc tính shadow

text-shadow:2px 2px 2px lightgray;

o Hiệu chỉnh style của các package để bao gồm thuộc shadow

box-shadow:4px 4px 4px lightgray;

o Lưu tài liệu với tên file ex4-tahiti6-HoTenSV.html

o Refesh lại trình duyệt → Shadow cao hơn màu background của H2, vì phần
tử heading có margin được tạo sẵn và background không hiển thị trong
margin → chỉ cần loại bỏ lề mặc định bằng cách đặt margin-top là 0px →
Thêm style H2 với thuộc tính:

margin-top:0px;

o Lưu lại file với tên Tahiti6-HoTenSV.html

huongct@neu.edu.vn