Tóm Tắt
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 với các yêu cầu sau:
– Page:
o Title tag = Ricardo’s Page
o Background Color: red =255, green=200, blue=
o Text color = Green
– Text styles:
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 và icon-lobos 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 ở đầ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 ở 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.
o Bắt đầu đoạn thứ hai bên dưới ảnh sasha. - Links :
o Tạo liên kết cho icon-lobos và văn bản ” Los Lobos ” để liên kết đến
trang loslobos-HoTenSV , 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 ( 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.
