Lab01 coban HTML
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (747.68 KB, 6 trang )
Bài Tập Thực Hành Thiết Kế Web
Lab 01.
THIẾT KẾ WEB VỚI NGÔN NGỮ HTML
Yêu cầu chung :
Tạo cây thư mục có cấu trúc như hình, lưu giữ các tập tin
HTM vào thư mục HTMLS
Nội dung văn bản sử dụng bảng mã Unicode
Mỗi thư mục sẽ lưu 1 loại tập tin
Mục tiêu:
Làm quen với môi trường thiết kế Web NotePad, Dreamweaver
Xây dựng các trang Web đơn giản sử dụng ngôn ngữ HTML
Bài tập 01 : Thiết kế web bằng phần mềm Notepad/ Notepad++
Sử dụng trình soạn thảo Notepad soan thảo nội dung sau lưu vào thư mục HTML
Đặt tên là: Welcome.htm lưu vào thư mục HTML, Encoding: UTF-8
<HTML>
<HEAD>
<TITLE> Well com to HTML </TITLE>
</HEAD>
<BODY>
Chào mừng bạn đã đến với ngôn ngữ thiết kế web HTML
</BODY>
</HTML>
Mở xem kết quả trang web, trên 1 số trình duyệt khác nhau.
Bài tập 02 : Thiết kế web bằng phần mềm Dreamwaver
Yêu cầu :
Sử dụng Dreamweaver, tạo Site mới với thư mục chứa website là thư mục đã tạo ở
phần yêu cầu chung.
Thiết kế trang web Baitho.html như mẫu, lưu vào thư mục HTML.
Yêu cầu: Định dạng văn bản theo mẫu như: màu nền trang, màu chữ, chữ tiêu đề,
đậm, nghiêng, gạch chân, canh lề,….
1
Bài Tập Thực Hành Thiết Kế Web
Bài tập 03: Thiết kế trang web Congthuc.html
Lưu vào thư mục HTML.
Yêu cầu: Màu nền trang, màu chữ, chữ tiêu đề, đậm, nghiêng, gạch chân, chỉ số trên,
chỉ số dưới,….
Bài tập 04: Thiết kế trang web ChuongTrinhDTWeb1.html
Lưu vào thư mục HTML.
Yêu cầu: Dòng đầu cỡ tiêu đề H3, màu đỏ. Các dòng nội dung dạng danh sách không
đánh số thứ tự. Màu xanh. Dòng cuối có sử dụng văn bản in nghiêng, có màu khác
Bài tập 05: Thiết kế trang web ChuongTrinhDTWeb2.html
Lưu vào thư mục HTML.
Yêu cầu: Có màu nên hoặc ảnh nền cho trang. Dòng tiêu đề có màu đỏ và chuyển
động từ phải sang trái. Danh sách có đánh số thứ tự lồng nhau. Đường kẽ ngang 30%
cửa sổ, canh giữa…
2
Bài Tập Thực Hành Thiết Kế Web
Bài tập 06: Thiết kế trang web MultiMedia.html (Chèn hình, Video, Flash)
Lưu vào thư mục HTML.
Yêu cầu : Chèn flash làm banner. Hình được canh phía trái văn bản, có khung viền.
Phía dưới văn bản chèn một đoạn phim.
Bài tập 07: Thiết kế trang web Bangdiem.html
Lưu vào thư mục HTML.
Yêu cầu: Trình bày bảng điểm kết quả học tập Màu nền dòng tiêu đề và dòng cuối,
màu chữ tùy ý. Độ rộng Table=600, Khoảng cách giữa các ô =0 , độ dày đường viền
1, màu viền tùy ý . Canh lề và trộn ô đúng theo mẫu
3
Bài Tập Thực Hành Thiết Kế Web
Bài 08: Tạo trang web Chuyenmucthacmac.html có nội dung là các chuyên mục thắc
mắc như sau:
4
Bài Tập Thực Hành Thiết Kế Web
Yêu cầu thiết kế:
Tiêu đề cửa sổ: CHUYÊN MỤC THẮC MẮC
Nội dung trang web Tạo 1 table chứa nội dung trên, trong đó:
Dòng đầu: Chứa nội dung tiêu đề và hình ảnh
Ô bên trái: Chứa thực đơn các chuyên mục, mỗi dòng liên kết đến mục tương
ứng với các ô bên phải
Ô bên phải: Thể hiện các nội dung chi tiết của từng chuyên mục.
Yêu cầu xử lý:
Menu liên kết các chuyên mục (bên trái): Khi chọn, di chuyển đến mục tương ứng
trong ô bên phải
Liên kết Về đầu trang (cuối mỗi mục bên phải): Khi chọn, di chuyển về đầu trang
web
Hướng dẫn giải:
Tạo table gồm 15 dòng, 2 cột
Dòng đầu: Tag <img> với thuộc tính src, align. Thẻ Tag <a> với thuộc tính name
name="#vedau" để đánh dấu vị trị đầu trang
Ô bên trái: Thẻ <a> với thuộc tính href
Ô bên phải: Các dòng tiêu đề của chuyên mục ta dùng <a> với thuộc tính name để
khai báo tên chuyên mục
Nội dung chi tiết: thẻ <img>, <font>, <ul>, <li>
”Về đầu trang”: Thẻ <a> với thuộc tính href.
Bài tập 09 Thiết kế trang web Dangky.html
Lưu vào thư mục HTML.
Yêu cầu: Sử dụng Table, Form
5
Bài Tập Thực Hành Thiết Kế Web
Bài tập 10: Thiết kế layout website dùng Table
Yêu cầu:
Thiết kế 2 trang web tintuc.html và donggopykien.html lưu vào thư mục html
Khi Click vào link sẽ chuyển đến trang tương ứng
-------Hết----
6
