Thực hành thiết kế Web - 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ú ý: 
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
Hiển thị văn bản với nội dung như sau. File Text.html
Tạo ra danh sách như sau
File OLlist.html
File List.html
Thực hành các thẻ liên kết và đa phương tiện
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
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
Chèn một đoạn phim vào trang web. File Film.html
Chèn một file flash vào trang web (đuôi file là swf). File Flash.html.
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.
Đư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.
Tạo ra bảng như sau. File Table.html
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
Tạo các biểu mẫu sau
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.
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ị.
CSS
CSS Background
Đị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
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
CSS Text
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
Tăng giảm kích thước giữa các kí tự. File TextSpace.html
Căn lề cho các thành phần. File TextAlign.html
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
CSS Border
Đưa ra các kiểu đường viền. File Border.html
Đưa ra màu cho mỗi đường viền. File BorderColor.html
CSS Margin
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