Bài thực hành TK website v1
1 MỤC LỤC Phần 1. Sử dụng HTML trong thiết kế Website 2 1.1. Thiết kế trang Web với một số thẻ HTML cơ bản . 2 1.2. Thiết kế bảng 4 1.3. Thiết kế Form . 5 1.4. Thiết kế trang Web với HTML5 . 8 Phần 2. Sử dụng HTML và CSS trong thiết kế Website . 9 2.1. Sử dụng các thuộc tính CSS trong thiết kế Website . 9 2.2. Thiết kế bố cục trang Web với CSS . 12 2.3. Một số kỹ thuật mở rộng và xây dựng giao diện Website 14 2 Phần 1. Sử dụng HTML trong thiết kế Website 1.1. Thiết kế trang Web với một số thẻ HTML cơ bản Yêu cầu chung Tạo cây thư mục có cấu trúc như sau, lưu giữ các tập tin HTM vào thư mục HTML 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. Lưu giữ bài tập để sử dụng về sau. Lưu tập tin tên baitap_n.html với n là thứ tự bài tập BÀI TẬP 1 Sử dụng trình soạn thảo NotePad soạn thảo nội dung sau lưu vào thư mục html Đặt tên là: Wellcome.html Save as type: All Files Encoding: UTF-8 Mở xem kết quả trang HTML Xem Source Code trang web từ trình duyệt Mở tập tin HTML từ trình soạn thảo và lưu lại với tên khác là: Wellcom2.html Điều chỉnh nội dung hiện thị trong trang là: Chúc các bạn học tốt ngôn ngữ HTML BÀI TẬP 2 Viết ứng dụng sử dụng các thẻ đã học. Ví dụ sử dụng HTML để thiết kế trang web xuất ra họ và tên của mình. Với mỗi 1 chữ, một định dạng khác nhau. Ví dụ: Nguyễn Văn A. Thì chữ Nguyễn in đậm có màu đỏ, chữ Văn in nghiêng có màu xanh và chữ A gạch dưới có màu vàng. <!DOCTYPE HTML> <html> <head> <meta name="description" content="Trang web đầu tiên"/> <meta http-equiv="content-type" content="text/html" charset="UTF-8" /> <meta name="author" content="Thumay" /> <title>Xin chào</title> </head> <body> Chào mừng bạn đã đến với ngôn ngữ thiết kế web HTML (Hypertext Makup Language) </body> </html> 3 BÀI TẬP 3 Yêu cầu: Dòng 1 cỡ chữ 4 in đậm Hướng dẫn: Tạo chỉ số Trên/Dưới <SUP> Văn bản </SUP> : Tạo chỉ số trên cho văn bản. <SUB> Văn bản </SUB> : Tạo chỉ số dưới cho văn bản. BÀI TẬP 4 Nhập Mã tên hay Mã số của ký tự tương ứng Ký tự Mã tên Mã số Ký tự Mã tên Mã số © &Copy; © “ &Quote; " TM &Trade; ™ Khoảng trắng   ® &Reg; ® Ví dụ: BÀI TẬP 5 Dòng đầu cỡ tiêu đề H1 Các dòng nội dung dạng danh sách không đánh số thứ tự BÀI TẬP 6 Dòng đầu cở tiêu đề H3 Các dòng nội dung dạng danh sách có đánh số thứ tự BÀI TẬP 7 Thiết kế dạng danh sách định nghĩa: 4 BÀI TẬP 8 Yêu cầu: Thiết kế nội dung theo mẫu Tại mục 2 tạo liên kết thực hiện mở 1 trang Thietkeweb.html (Cùng cửa sổ) Học phần I, II, III thực hiện tạo liên kết đến từng học phần tương ứng trong cùng trang hiện tại. BÀI TẬP 9 Yêu cầu: Tạo liện kết đến các Website lần lượt theo trình tự: www.vnexpress.net www.tuoitre.com.vn www.nhacso.net www.ngoisao.net www.echip.com.vn www.vietnamnet.vn 1.2. Thiết kế bảng BÀI TẬP 1 Hãy sử dụng thẻ bảng trong HTML để thiết kế trang web xuất ra thời khóa biểu như hình bên dưới. 5 BÀI TẬP 2 Yêu cầu: Thiết kế & trình bày theo mẫu: BÀI TẬP 3 Sử dụng các thẻ định dạng đã học, định dạng cho nội dung các bảng trên. 1.3. Thiết kế Form BÀI TẬP 1 Thiết kế trang sử dụng form trình bày các đối tượng: Textbox, Password, SubmitButton, ResetButton Chú ý: Nên kết hợp Table để trình bày BÀI TẬP 2 Thiết kế trang sử dụng form tạo các đối tượng bên trong theo mẫu thực hiện liên kết gửi nội dung đến địa chỉ mail. Nên kết hợp Table để trình bày 6 BÀI TẬP 3 Thiết kế trang sử dụng form tạo các đối tượng bên trong theo mẫu. Nên kết hợp Table để trình bày BÀI TẬP 4 Thiết kế trang sử dụng form tạo ComboBox chứa các mục liến kết đến các Website tương ứng khi người dùng chọn 1 mục www.laodong.com.vn www.vnexpress.net www.tuoitre.com.vn BÀI TẬP 5 Thiết kê form đăng ký theo mẫu sau: 7 Bài tập 6. Hãy sử dụng HTML để tạo ra một trang đăng ký như hình bên dưới. Với các cột thông tin và form thẳng hàng như bên dưới. 8 1.4. Thiết kế trang Web với HTML5 Bài tập 1. Sử dụng HTML5 tạo Form đăng ký thông tin khách hàng cho website thương mại điện tử nguyenkim.com Bài tập 2. Sử dụng HTML 5 chèn audio vào trong trang web Bài tập 3. Sử dụng HTML 5 chèn video vào trong trang web 9 Phần 2. Sử dụng HTML và CSS trong thiết kế Website 2.1. Sử dụng các thuộc tính CSS trong thiết kế Website Bài tập 1. Cho một vùng div chứa 8 liên kết, hãy thiết kế 8 liên kết này theo yêu cầu bên dưới. Các liên kết này có đặc tính như sau: + Link có kiểu chữ verdana, 18px, in đậm, không có gạch dưới. + Ở link 1,2,3,4 thì khi mở ra sẽ có màu sắc là màu đỏ. Khi đưa chuột vào sẽ có màu sắc là màu xanh lá cây và có gạch ở trên đầu. + Ở link 5,6,7,8 thì khi mở ra sẽ có màu sắc là màu xanh dương. Khi đưa chuột vào sẽ có màu sắc là màu vàng và có gạch ở trên đầu. Bài tập 2. Xây dựng website thỏa mãn các yêu cầu bên dưới: Các đường viền có màu đỏ và khoảng cách đều nhau là 25px. Phần nội dung trong cùng sẽ có màu nền là màu vàng và chữ css sẽ là màu đỏ. 10 Bài tập 3. Sử dụng HTML và CSS thiết kế giao diện trang web đăng ký thông tin cá nhân (Không sử dụng bảng để thiết kế) Bài tập 4. Sử dụng CSS xây dựn Form theo mẫu sau: [...].. .Bài tập 5 Sử dung HTML và CSS thiết kế theo mẫu sau: Bài tập 6 Chèn hình ảnh và nội dung theo mẫu 11 Bài tập 7: Sử dụng HTML và CSS tạo các liên kết theo mẫu sau: Bài tập 8: Sử dụng HTML và CSS tạo menu theo mẫu sau: Bài tập 9: Sử dụng HTML và CSS tạo menu theo mẫu sau: 2.2 Thiết kế bố cục trang Web với CSS Bài tập 1 Sử dụng HTML và CSS thiết kế trang Web có bố cục như sau: 12 Bài tập 2 Sử... cục theo mẫu sau: Bài tập 3 Sử dụng HTML và CSS xây dựng website theo mẫu sau: 13 2.3 Một số kỹ thuật mở rộng và xây dựng giao diện Website Bài tập 1 Sử dụng HTML và CSS chèn một số icon trong ảnh dưới vào trang web Bài tập 2 Sử dụng trình duyệt Firefox, truy cập vào website http://spriteme.org/ Sau đó sử dụng spriteme để tạo tấm hình có chứa các icon lấy từ trang web kenh14.vn 14 Bài tập 3 Sử dụng... cập vào website http://spriteme.org/ Sau đó sử dụng spriteme để tạo tấm hình có chứa các icon lấy từ trang web kenh14.vn 14 Bài tập 3 Sử dụng HTML và CSS xây dựng Website theo mẫu 15 Bài tập 4 Sử dụng HTML và CSS thiết kế Website theo mẫu sau: Bài tập 5 Tham khảo giao diện một số trang web sau https://www.google.com.vn http://www.intel.vn http://www.apple.com http://dantri.com.vn/ http://www.nguyenkim.com/ . và CSS trong thiết kế Website . 9 2.1. Sử dụng các thuộc tính CSS trong thiết kế Website thuật mở rộng và xây dựng giao diện Website 14 2 Phần 1. Sử dụng HTML trong thiết kế Website 1.1. Thiết kế trang Web với