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

HTML và CSSMụ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

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ú ý:

• 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

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

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

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ị

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

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

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

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