Bài thực hành số 1. HTML và CSS

Bài thực hành số 1. HTML và CSS
Mục đích: giúp sinh viên nắm được
• Các thẻ trong HTML để xây dựng được một trang Web
• Định dạng trang Web thông qua CSS
• Thực hành trên phần mềm Macromedia Dreamweaver
Nội dung:
Chú ý:

I.

• Sinh viên không cần quan tâm nhiều đến nội dung, màu, ảnh… trong
tài liệu ví dụ. Các bạn chỉ cần đưa ra được ví dụ thể hiện. Đặt tên
file đúng yêu cầu.
• Vào Run gõ //sv02. Sau đó đăng nhập với user, pass là hocvien để
lấy bộ cài và file bài giảng.

HTML

1. Hiển thị văn bản với nội dung như sau. File Text.html

2. Tạo ra danh sách như sau
a. File OLlist.html

b. File List.html
1


3. Thực hành các thẻ liên kết và đa phương tiện
a. Chèn 3 ảnh bất kì vào trang web, mỗi ảnh có một giá trị của thuộc tính align
khác nhau. File Image.html
b. Chèn âm thanh nền vào trang web và thử nghiệm trên các trình duyệt hiện

có. File Sound.html
c. Chèn một đoạn phim vào trang web. File Film.html
d. Chèn một file flash vào trang web (đuôi file là swf). File Flash.html.
e. Chèn thêm vào file Image.html 3 liên kết để mở các trang Sound.html,
File.html và Flash.html trong cửa sổ mới của trình duyệt.
f. Đưa file Sound.html vào một thư mục mới, hãy chỉnh sửa và tạo liên kết để
hai trang Image.html và Sound.html có thể mở lẫn nhau.
4. Tạo ra bảng như sau. File Table.html

5. Tạo khung Frame2.html trong đó nội dung khung bên trái là file Text.html,
nội dung khung giữa bao gồm 2 file OLList.html và List.html (chia theo chiều
ngang), khung bên phải là file Image.html
2


6. Tạo các biểu mẫu sau
a. Tạo biểu mẫu tìm kiếm của google. File Google.html

Trong đó
• 1-17 đều là các link mở ra trang Google.html, là trang đang đứng
• 18 là textbox
• 19, 20 là các button. Nếu nội dung 18 khác rỗng, click chuột vào 19
sẽ hiển thị thông báo “Google is searching”, click chuột vào 20 sẽ
hiển thị thông báo “I’m feeling lucky”.
• 21 là ảnh bất kì bạn tìm được trên máy tính.
b. Tạo biểu mẫu đăng kí tài khoản của Yahoo (như hình). File Yahoo.html.

Trong đó chú ý ô nhập mật khẩu phải che giấu kí tự nhập vào bằng các dấu
chấm tròn. Các ô ComboBox chỉ cần đưa ra một vài giá trị.

3


II.

CSS

1. CSS Background
a. Định nghĩa màu nền cho các thẻ H1, DIV, P để hiển thị được nội dung
như sau. File BgColor.html

b. Chèn một ảnh vào nền trang web. Ảnh này không được lặp và được cố
định dù người dùng có cuộn văn bản. File BgImage.html

2. CSS Text
a. Thiết lập chữ với hướng từ trái qua phải và từ phải qua trái. File
TextDir.html

4


b. Tăng giảm kích thước giữa các kí tự. File TextSpace.html

c. Căn lề cho các thành phần. File TextAlign.html

3. CSS Font
Định nghĩa tên font, kích thước, định dạng chữ (nghiêng, đậm…) cho ba thẻ
H1, H2, P và đưa ra ví dụ thể hiện. File Font.html

5

4. CSS Border
a. Đưa ra các kiểu đường viền. File Border.html

b. Đưa ra màu cho mỗi đường viền. File BorderColor.html

5. CSS Margin
6


Thiết lập định dạng căn lề cho thẻ P: top, right, bottom, left và đưa ra thể hiện.
File Margin.html

7