Bài tập 1-1: Định dạng Text và Images

I. Giới thiệu
Trong bài tập này, SV thực hành tạo trang web sau:

II. Mục tiêu:

✓ Đặt tiêu đề title cho trang
✓ Định dạng trang
✓ Chèn một hình ảnh
✓ Tạo liên kết văn bản và liên kết hình ảnh
✓ Áp dụng các thẻ tiêu đề (heading tags)
✓ Thêm style vào trang sử dụng internal style sheet
✓ Điều chỉnh text wrapping
✓ Thêm và tạo style cho horizontal rule

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

Tạo trang html mới và đặt tên là ricardo-HotenSV.htm với các yêu cầu sau:
• Page:
o Title tag = Ricardo's Page
o Background Color: red =255, green=200, blue=145
o Text color = Green
• Text styles:

huongct@neu.edu.vn
 o Heading 1 = green, font-family = Trebuchet MS, Tahoma, sans-serif
o Heading 2 = green, font-family = Trebuchet MS, Tahoma, sans-serif
o paragraphs = green, font-family = Comic Sans MS, Arial, sans-serif

• Text:

o Dòng đầu tiên là Heading 1

o Dòng thứ hai là Heading 2.
o Thêm 2 đoạn sau vào cuối trang:
Los Lobos - my team
Back to Hector's page

• Images:

o Sử dụng 2 ảnh sasha.jpg và icon-lobos.gif trong thư mục ricardo

o Tìm kích thước width/height của những ảnh này sử dụng File Explorer.
o Đặt ảnh sasha.jpg ở đầu đoạn văn bản đầu tiên (paragraph). Sử dụng
kiểu inline để làm cho nó trôi ở bên trái với lề margin xung quanh là 10px;
ALT text = "Sasha"
o Đặt ảnh icon-lobos.gif ở bên trái của đoạn "Los Lobos - my team";
ALT text = "Los Lobos"
• Wrapping:

o Đoạn đầu tiên bao quanh bên phải cạnh ảnh sasha.jpg.
o Bắt đầu đoạn thứ hai bên dưới ảnh sasha.jpg.
• Links:

o Tạo liên kết cho icon-lobos.gif và văn bản "Los Lobos" để liên kết đến
trang loslobos-HoTenSV.html, sẽ nằm trong cùng thư mục của trang
này (SV sẽ tạo trang này trong bài tập CSS1_2)

o Tạo liên kết cho văn bản "Hector's page" để quay lại trang hector25-
HoTenSV.html (file này sẽ làm sau)

• Horizontal rule:

o Chèn một đường ngang giữa đoạn thứ hai và liên kết Los Lobos.
o Thêm một style dạng internal style sheet để làm cho Horizontal rule có
màu xanh lục (thuộc tính color).
• Timestamp:

o Ở cuối trang trước thẻ BODY, hãy thêm một đoạn mới và chèn ngày
hiện tại.

huongct@neu.edu.vn