TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN – BỘ MÔN HỆ THỐNG THÔNG TIN BÀI GIẢNG THIẾT KẾ TRANG WEB  Tổng quan Internet WEB  HTML  CSS  JavaScript NHA TRANG 2014 LỜI NÓI ĐẦU Bài giảng Thiết kế trang web biên soạn làm tài liệu tham khảo hữu ích cho sinh viên Ngành Công nghệ Thông tin học tập nghiên cứu. Trong giảng này, nội dung viết theo hướng trang bị cho người học kiến thức tảng kỹ thuật, kỹ xây dựng, thay đổi giao diện, điều khiển hoạt động trang web theo chuẩn khác nhau. Các chủ đề giảng bao gồm     Tổng quan Internet dịch vụ World Wide Web Ngôn ngữ đánh dấu siêu văn HTML 4.01 XHTML 1.0 Ngôn ngữ định dạng CSS2 Ngôn ngữ lập trình JavaScript Bên cạnh phần lý thuyết có tập thực hành kèm theo để người học luyện tập, vận dụng kiến thức học vào thực tế, tăng cường khả tự học, đáp ứng yêu cầu đổi phương pháp học tập theo học chế tín chỉ. Dù có nhiều cố gắng công tác biên soạn giảng chắn có nhiều sai sót. Chúng mong nhận ý kiến đóng góp đồng nghiệp sinh viên để hoàn thiện giảng lần xuất tiếp theo. KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN MỤC LỤC CHƯƠNG 0: TỔNG QUAN VỀ INTERNET VÀ WORLD WIDE WEB . 1. Internet 1.1. Khái niệm 1.2. Lịch sử . 1.3. Địa IP tên miền 1.3.1. Địa IP .2 1.3.2. Tên miền (Domain name) 1.4. Nhà cung cấp dịch vụ Internet 1.4.1. IAP (Internet Access Provider) 1.4.2. ISP (Internet Service Provider) 1.4.3. ICP (Internet Content Provider) .4 2. World Wide Web 2.1. Khái niệm 2.2. Các thành phần web . 2.2.1. Siêu văn (HyperText) 2.2.2. Ngôn ngữ đánh dấu siêu văn (HyperText Markup Language – HTML) .5 2.2.3. Giao thức truyền tin siêu văn (HyperText Transfer Protocol – HTTP) 2.2.4. Trình duyệt (web browser) .6 2.2.5. URL (Uniform Resource Locator) .6 2.3. Mô hình tương tác Client-Server ứng dụng Web . 2.3.1. Khái niệm ứng dụng web .7 2.3.2. Mô hình client-server .7 2.4. Một số tổ chức quản lý chuẩn công nghệ web . 2.4.1. W3C - The World Wide Web Consortium 2.4.2. ECMA - European Computer Manufacturers Association 2.4.3. OASIS – Organization for the Advancement of Structured Information Standards CHƯƠNG 1: HYPERTEXT MARKUP LANGUAGE (HTML) . 10 1. Giới thiệu HTML 10 2. Đặc điểm HTML 10 3. Cấu trúc văn HTML 11 3.1. Cấu trúc HTML element 11 3.2. Cấu trúc văn HTML 13 3.2.1. HTML section 13 3.2.2. Header section 13 3.2.3. Body section .13 4. Các thẻ thuộc HTML element . 14 4.1. Phân loại HTML element 14 4.1.1. Element khối (block-level element) .14 4.1.2. Element dòng (inline element) .14 4.2. Các thẻ 15 4.2.1. Thẻ heading 15 4.2.2. Thẻ Paragraph 16 4.2.3. Thẻ .16 4.2.4. Thẻ 17 4.2.5. Thẻ ngắt dòng 17 4.2.6. Đường kẻ ngang .17 4.2.7. Các thẻ định dạng văn .19 4.3. Liên kết 22 4.3.1. Liên kết địa tuyệt đối .22 4.3.2. Liên kết địa tương đối 22 4.3.3. Liên kết nội .23 4.4. Bảng biểu (Table) . 23 4.5. Danh sách (List) 25 4.5.1. Danh sách không đánh số thứ tự 25 4.5.2. Danh sách đánh số thứ tự .26 4.5.3. Danh sách định nghĩa .27 4.6. Hình ảnh . 28 4.7. Multimedia 28 4.8. Khung (frame) . 28 4.9. Biểu mẫu (form) 30 4.9.1. Thẻ 31 a) Text & password 31 b) Radio button . 31 c) Checkbox 32 d) Hidden 32 e) Button . 32 f) Image 33 g) File . 33 4.9.2. Combo box (drop-down menu) 33 4.9.3. TextArea 34 4.10. Các thẻ bổ sung thông tin cho trang web . 35 4.10.1. Thẻ 35 a) Meta Content Type . 35 b) Meta Content Language (hoặc Meta Language) 35 c) Meta Description 36 d) Meta Keywords 36 e) Meta Author . 36 f) Meta Refresh . 36 4.10.2. Thẻ .36 4.10.3. Thẻ 37 4.10.4. Thẻ 37 5. Khai báo chuẩn HTML 38 5.1. Khái niệm 38 5.2. Khai báo 38 5.2.1. HTML 4.01 38 a) HTML 4.01 Strict . 38 b) HTML 4.01 Transitional 39 c) HTML 4.01 Frameset . 39 5.2.2. XHTML 1.0 .39 a) XHTML 1.0 Strict 39 b) XHTML 1.0 Transitional . 39 c) XHTML 1.0 Frameset 39 5.2.3. XHTML 1.1 .40 5.2.4. HTML5 40 6. XHTML . 40 6.1. Khái niệm 40 6.2. Các thay đổi cú pháp XHTML so với HTML 40 7. Giới thiệu HTML5 42 CHƯƠNG 2: CASCADING STYLE SHEET (CSS) 43 1. Giới thiệu CSS . 43 2. Mục đích sử dụng CSS . 43 3. Cú pháp CSS . 43 3.1. Selector . 43 3.1.1. Universal selector .44 3.1.2. Type selector 44 3.1.3. Id selector .45 3.1.4. Class selector .45 3.1.5. Descendant selector .46 3.1.6. Child selector .46 3.1.7. Adjacent sibling selector 46 3.1.8. Attribute selector 47 3.1.9. Pseudo elements Pseudo classes .48 a) Pseudo elements . 48 b) Pseudo classes 48 3.2. Property 49 3.3. Value . 50 4. Đơn vị CSS 50 4.1. Đơn vị đo chiều dài . 50 4.2. Đơn vị màu sắc . 51 5. Nhúng mã CSS vào file HTML . 51 5.1. Kiểu thuộc tính (Inline Style) 51 5.2. Kiểu tập hợp nhúng bên tài liệu HTML (Internal Style Sheet) . 52 5.3. Liên kết (External Style Sheet) 53 5.3.1. Sử dụng thẻ .53 5.3.2. Sử dụng @import .54 5.4. Mức độ ưu tiên cách nhúng CSS vào tài liệu HTML . 57 6. Các định dạng CSS 57 6.1. Background . 57 6.1.1. Màu .57 6.1.2. Ảnh 57 Định dạng background rút gọn 59 6.2. Font . 59 6.2.1. Thuộc tính font-family .59 6.2.2. Thuộc tính font-style 59 6.2.3. Thuộc tính font-variant 59 6.2.4. Thuộc tính font-weight 60 6.2.5. Thuộc tính font-size .60 Định dạng font rút gọn .60 6.3. Text 60 6.3.1. Màu chữ (thuộc tính color) .60 6.3.2. Thuộc tính text-indent 60 6.3.3. Thuộc tính text-align 61 6.3.4. Thuộc tính vertical-align 61 6.3.5. Thuộc tính letter-spacing .61 6.3.6. Thuộc tính text-decoration .62 6.3.7. Thuộc tính text-transform 62 6.4. Box model . 62 6.4.1. Margin 63 6.4.2. Padding 63 6.4.3. Border 64 a) border-width . 64 b) border-color 64 c) boder-style 64 6.4.4. Width & Height 65 a) Thuộc tính width, max-width, min-width . 65 b) Thuộc tính height, max-height, min-height 65 6.5. Float & clear 66 6.5.1. Thuộc tính float 66 6.5.2. Thuộc tính clear .67 6.6. Position . 68 6.7. Lớp (Layers) 69 7. Giới thiệu CSS3 . 70 CHƯƠNG 3: JAVASCRIPT 71 1. Giới thiệu JavaScript . 71 2. Đặc điểm JavaScript 71 3. Mục đích sử dụng JavaScript 72 4. Nhúng mã JavaScript vào file HTML 72 4.1. Sử dụng thẻ 72 4.2. Dùng file chứa mã JavaScript 74 4.3. Dùng biểu thức JavaScript làm giá trị thuộc tính xử lý kiện . 74 4.4. Thẻ . 75 5. Khai báo JavaScript 76 5.1. Biến . 76 5.1.1. Khai báo .76 5.1.2. Quy tắc đặt tên biến .76 5.1.3. Phạm vi biến 76 5.2. Hằng 77 6. Các kiểu liệu JavaScript . 78 6.1. Kiểu số nguyên 78 6.2. Kiểu số thực (kiểu số dấu chấm động) 78 6.3. Kiểu Logical (hay boolean) . 79 6.4. Kiểu chuỗi (String) 79 6.5. Kiểu null 80 6.6. Kiểu undefined (không xác định) 80 7. Toán tử JavaScript . 80 7.1. Toán tử gán . 80 7.2. Toán tử số học . 81 7.3. Toán tử so sánh . 82 7.4. Toán tử logic . 83 7.5. Toán tử thao tác bit 84 7.5.1. Các toán tử logic thao tác bit .84 7.5.2. Các toán tử dịch thao tác bit .85 7.6. Toán tử điều kiện 85 8. Các cấu trúc điều khiển . 86 8.1. Rẽ nhánh if 86 8.2. Rẽ nhánh switch 87 8.3. Cấu trúc lặp for . 88 8.4. Cấu trúc lặp while . 90 8.5. Các cấu trúc chuyển điều khiển vòng lặp . 90 8.5.1. Cấu trúc label .90 8.5.2. Cú pháp break 91 8.5.3. Cấu trúc continue .91 8.6. Quản lý lỗi 92 9. Hàm 92 9.1. Khái niệm 92 9.2. Xây dựng hàm tự định nghĩa . 93 9.3. Một số hàm thông dụng hỗ trợ JavaScript 94 9.3.1. alert 94 9.3.2. prompt 94 9.3.3. confirm .95 9.3.4. eval .95 9.3.5. isNaN .95 9.3.6. parseInt .96 9.3.7. parseFloat .96 9.3.8. setTimeout clearTimeout 96 9.3.9. setInterval clearInterval .96 10. Đối tượng JavaScript . 97 10.1. Các đối tượng xây dựng sẵn JavaScript 98 10.1.1. Đối tượng String 98 a) Thuộc tính . 98 b) Phương thức . 98 10.1.2. Đối tượng mảng (Array) 101 a) Thuộc tính . 101 b) Phương thức . 101 10.1.3. Đối tượng Date .103 10.1.4. Đối tượng Math 104 a) Thuộc tính . 105 b) Phương thức . 105 10.1.5. Đối tượng Number .106 10.2. Đối tượng người dùng tự định nghĩa . 107 10.2.1. Xây dựng đối tượng .107 10.2.2. Sử dụng đối tượng 107 10.2.3. Phát triển kế thừa .108 10.2.4. Bổ sung thuộc tính phương thức cho đối tượng 108 10.3. Đối tượng trình duyệt 109 10.3.1. window .109 a) Thuộc tính . 109 b) Phương thức . 109 10.3.2. location .110 a) Thuộc tính . 110 b) Phương thức . 110 10.3.3. history 111 10.3.4. document 111 a) Thuộc tính . 111 b) Phương thức . 111 c) Thay đổi nội dung Element 112 d) Thay đổi giá trị thuộc tính Element . 113 e) Thay đổi định dạng Element 113 10.3.5. form 114 a) Thuộc tính form . 114 b) Phương thức form 114 c) Các thuộc tính mảng element 114 11. Xử lý kiện . 115 11.1. Khái niệm 115 11.2. Xử lý kiện cho thẻ HTML . 115 11.3. Một số kiện phổ biến 116 11.3.1. Sự kiện chuột 116 11.3.2. Sự kiện bàn phím 116 11.3.3. Sự kiện form .116 11.4. Đăng ký kiện . 117 12. Làm việc với cookie 118 12.1. Khái niệm 118 12.2. Thiết lập cookie . 118 12.3. Đọc cookie 119 TÀI LIỆU THAM KHẢO 120 PHỤ LỤC . 121 1. Các thẻ HTML 4.01, XHTML 1.0 . 121 2. Các thẻ HTML5 123 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG white-space white-space: nowrap; Xác định khoảng trắng có bên thành phần xử lý nào. width width: 800px; Thiết lập chiều rộng cho thành phần. word-spacing word-spacing: 5px; Tăng giảm không gian từ đoạn văn bản. z-index z-index: 100; Thiết lập thứ tự xếp chồng thành phần vị trí. 4. Thuộc tính CSS3 Thuộc tính Mô tả animation Xác định chuyển động thành phần. appearance Định dạng cho thành phần trông giao diện chuẩn gần với người dùng. backface-visibility Xác định bề mặt sau thành phần thực chuyển động xoay. background-clip Xác định vùng backgroud cắt bớt theo vùng giới hạn. background-origin Xác định giá trị tương đối background giới hạn theo vùng giới hạn. background-size Xác định lại chiều rộng chiều cao cho background. background gradient Tạo màu sắc cho background theo biên độ giảm dần. Nhiều background Sử dụng để khai báo nhiều dạng background khác cùng thẻ. border-image Dùng để định dạng dạng border hình ảnh. border-radius Dùng để định dạng dạng bo góc border. box-align Xác định vị trí cho thành phần theo chiều dọc theo chiều thẳng đứng. box-direction Xác định hướng cho thành phần. box-flex Xác định ưu tiên linh hoạt theo thành phần khác. box-ordinal-group Cho biết thứ tự ưu tiên thành phần. box-orient Xác định thành phần dọc theo phương hướng khối theo trục. box-pack Định vị trí thành phần theo mép rìa thành phần. box-sizing Xác định lại chiều rộng chiều cao thành phần. box-shadow Định dạng bóng cho thành phần. column Dùng để chia nội dung thành phần thành nhiều cột khác nhau. @font-face Định dạng dạng font chữ khác theo dạng font riêng. font-size-adjust Dùng để định dạng điều chỉnh cho font chữ, độ lớn chữ thể phép nhân. Trang 127 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG @keyframes Dùng để điều khiển diễn biến hoạt động thành phần, dùng kèm với thuộc tính animation. nav Di chuyển qua lại thành phần điều hướng (navigate) cách di chuyển phím mũi tên. opacity Hiển thị cấp độ suốt cho thành phần. perspective Cho ta thấy chiều sâu thành phần khai báo 3D. perspective-origin Định nghĩa trục quay cho thành phần có sử dụng perspective. resize Định dạng cho vùng nội dung mà người dùng thay đổi kích thước. text-justify Tăng giảm khoảng cách từ ký tự cho dàn thành phần. text-overflow Xác định vùng text cắt bớt. text-shadow Xác định bóng đỗ cho text. transform Xác định chuyển đổi chiều, chiều, xoay, tỷ lệ, di chuyển, nghiêng, . transform-origin Xác định trục cho chuyển đổi chiều, chiều. transform-style Các thành phần bên giữ vị trí 3D nó. transition Xác định trình chuyển đổi có hành động. word-break Sẽ làm cho chữ từ không thể thống nhất, nghĩa xuống hàng vị trí từ. word-wrap Sẽ làm cho từ dài xuống hàng mà không làm vỡ layout. Trang 128 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG BÀI TẬP THỰC HÀNH Yêu cầu chung        Tạo thư mục có cấu trúc sau, lưu giữ tập tin HTML vào thư mục html Lưu file định dạng CSS vào thư mục css Lưu file javascript vào thư mục scripts Lưu hình ảnh vào thư mục images Lưu file nhạc, video, flash, . vào thư mục multimedia Nội dung văn sử dụng bảng mã Unicode Tập tin HTML, CSS javascript có tên 1. Phần HTML CSS Bài tập 01: Sử dụng thẻ để hiển thị phân cấp tiêu đề đề mục Bài tập 02: Định dạng kiểu chữ Trang 129 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 03: Tạo trang web chuyển định dạng CSS thành Internal Style Sheet Các tab bản Bài 01: Sử dụng tab bản Yêu cầu Thiết kế trang web có nội dung sau: Lập trình Web Chào mừng bạn đến với ngôn ngữ HTML Bài tập 04 Tạo trang web chuyển định dạng CSS thành External Style Sheet Các tab - Thuộc tính Bài 03: Sử dụng tab (tt) Yêu cầu Thiết kế trang web có nội dung sau: MẸ ! Mẹ trời thưong Mẹ thiên đường trần gian Công ơn cha mẹ tựa biển trời Làm báo hiếu nguời ơi? Nếu chưa báo hiếu đừng bất hiếu Bất hiếu làm ta khổ muôn đời. Một đời vốn liếng mẹ trao Mẹ cho tất mẹ giữ riêng Mẹ hiền bà tiên Mẹ theo suốt hành trình đi. Trang 130 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 05: Thiết kế trang web có nội dung sau CÁC KÝ HIỆU ĐẶC BIỆT Thương hiệu:  Thương hiệu đăng ký:  Bản quyền:  Email: xyz@yahoo.com       Lưu tập tin tên: KytuDB.html Các ký hiệu sử dụng mã tên mã code Các đường kẽ ngang không bóng, kích thước 100% cửa sổ, màu xanh Có màu đỏ cho ký tự đặc biệt. Màu tùy ý Định dạng Internal Style Sheet Bài tập 06: Thiết kế trang web có nội dung sau      Lưu tập tin tên: ChuongTrinhDTWeb1.html Định dạng External Style Sheet 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 dạng thích, có màu khác màu lại Bài tập 07: Thiết kế trang web có nội dung sau     Lưu tập tin tên: ChuongTrinhDTWeb2.html Định dạng External Style Sheet Dòng đầu cở tiêu đề H3, Đỏ Các dòng nội dung dạng danh sách có đánh số thứ tự, màu xanh.(Màu tuỳ ý.) Trang 131 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 08: Thiết kế trang web có nội dung sau     Lưu tập tin tên: ChuongTrinhDTWeb.html Định dạng External Style Sheet Thiết kế dạng danh sách có đánh số thứ tự lồng nhau. Đường kẻ ngang không bóng 30% cửa sổ. Bài tập 09: Thiết kế trang web có nội dung sau  Lưu tập tin tên: ChuongTrinhDaoTao.html  Thiết kế nội dung theo mẫu  Tại mục tạo liên kết thực mở trang ChuongTrinhDTWeb.html 08 (Cùng cửa sổ)  Học phần I, II, III thực tạo liên kết đến học phần tương ứng trang tại.  Định dạng External Style Sheet, gộp định dạng 08 vào chung file. Trang 132 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 10: Thiết kế trang web có nội dung sau  Lưu tập tin tên: DanhBaWeb.html  Thiết kế dạng danh sách định nghĩa có liện kết đến website theo trình tự: o www.vnexpress.net o www.tuoitre.com.vn o www.nhacso.net o www.ngoisao.net o www.echip.com.vn o www.vietnamnet.vn  Mở cửa sổ hộp thư cho phép soan gửi thư đến: xyz@gmail.com  Định dạng External Style Sheet Bài tập 11: Thiết kế trang web có nội dung sau  Lưu tập tin tên: KetQuaHocTap.html  Màu dòng tiêu đề dòng cuối, màu chữ tùy ý  Độ rộng Table=600px, Khoảng cách ô =0 , độ dày đường viền 1, màu viền tùy ý. Canh lề trộn ô theo mẫu,  Định dạng Internal Style Sheet Trang 133 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 12: Thiết kế trang web có nội dung sau  Lưu tập tin tên: Dangnhap.html  Thiết kế trang sử dụng form trình bày đối tượng: Textbox, Password, Submit Button, Reset Button  Định dạng Internal Style Sheet Bài tập 13: Thiết kế trang web có nội dung sau  Lưu tập tin tên: Thamdoykien.html  Định dạng Internal Style Sheet Bài tập 14: Thiết kế trang web có nội dung sau  Lưu tập tin tên: Survey.html  Định dạng Internal Style Sheet Trang 134 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 15: Thiết kế trang web có nội dung sau  Lưu tập tin tên: Albumnhac.html  Play tập tin nhạc cửa sổ riêng. Các tập tin nhạc chọn tùy ý  Dòng chữ : "Nhạc Online" có định dạng tùy ý. Bài tập 16: Thiết kế trang web có nội dung sau  Trang web có tên Tintuc.html gồm có khung (frame) có tên : "Khungtren", "Khungtrai", "Noidung"  Khoảng cách khung 0, không viền  "Khung trên": Chèn Tập tin ảnh làm Banner, Khoảng cách lề trái, phải =0, Không thay đổi kích thước  "Khung trái" : trang DMTin.html chứa liên kết mở trang tương ứng: "TinKt.html" & "TinCT.html"  "Khung nội dung": Hiện thị trang tạo liên kết từ khung trái. Mặc định ban đầu trang "TinKT.html"  Định dạng External Style Sheet Khi Click liên kết "Kinh tế" 100 500 Khi Click liên kết "Chính trị" Trang 135 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 17: Thiết kế trang web có nội dung bố cục sau  Hình ảnh sử dụng tùy chọn  Sử dụng CSS để bố cục trang web (thẻ thuộc tính float)  Định dạng External Style Sheet Trang 136 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 18: Thiết kế website có nội dung sau  Website có trang, trang liên kết với thông qua liên kết menu "Nội dung chính" tương ứng. Trang 1: Giới thiệu cá nhân (trang chủ) Trang 2: Hình ảnh cá nhân Trang 137 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Trang 3: Liên hệ  Kích thước o Độ rộng chung trang web: 900px. o Độ rộng cột trái: 20%; phải: 20%; cột giữa: 60%. o Độ cao phần Header: 120px. o Độ cao phần Nội dung: Tùy theo nội dung trang web. o Độ cao phần Footer: 50px.  Chèn liên kết ngoài.  Các trang web viết theo chuẩn XHTML 1.0 Strict  Sử dụng CSS để bố cục trang web (thẻ thuộc tính float)  Định dạng External Style Sheet Trang 138 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 19: Thiết kế website giới thiệu cửa hàng sách với cấu trúc nội dung sau Phần banner: hình ảnh, giới thiệu cửa hàng sách, hình ảnh quảng cáo (nếu có) Ngày tháng năm Tạo form đăng nhập Tạo form tìm kiếm thông tin Các liên kết nhanh: quay lại trang chủ/Sách bán chạy/Sách giảm giá Phần trang chính, hiển thị nội dung nhấn chuột vào liên kết Menu chính: (giới thiệu chủ đề sách) Kinh tế Phát luật Tin học … Phần phụ giới thiệu: - loại sách bán chạy.(tối đa đầu sách) - loại sách giảm giá.(tối đa đầu sách) Thông tin quyền Website. Thông tin liên hệ Yêu cầu: 1) Tạo trang chủ. - Theo cấu trúc yêu cầu, hình thức dễ nhìn, có liên kết đầy đủ đến trang website. 2) Tạo trang liên kết (giống phần banner, menu phần phụ, thay đổi nội dung phần trang chính): - Trang giới thiệu sách Kinh tế nhấn chuột vào chủ đề Kinh tế menu - Trang giới thiệu sách Pháp luật nhấn chuột vào chủ đề Pháp luật menu chính. - Trang giới thiệu sách Tin học nhấn chuột vào chủ đề Tin học menu . - Trang giới thiệu chi tiết thông tin sách bán chạy nhấn chuột chọn sách bán chạy phần phụ. (thực trang loại sách) . - Trang giới thiệu chi tiết thông tin sách giảm giá nhấn chuột chọn sách giảm giá phần phụ. (thực trang loại sách) - Trang giới thiệu sách bán chạy cửa hàng (tối đa 10 sách) nhấn chuột vào liên kết nhanh phần banner. - Trang giới thiệu sách giảm giá cửa hàng (tối đa 10 sách) nhấn chuột vào liên kết nhanh phần banner. 3) Các trang web viết theo chuẩn XHTML 1.0 Transitional 4) Sử dụng CSS để bố cục trang web (thẻ thuộc tính float) 5) Định dạng External Style Sheet sử dụng chung cho tất trang Trang 139 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG 2. Phần JavaScript Bài tập 20: Tạo giao diện sau: Yêu cầu : Khi Click chuột vào Radio Button thông điệp (message) giá trị số chọn tương ứng. Bài tập 21: Tạo giao diện Khi Click chuột vào nút Message lên câu chào "Chào bạn" Bài tập 22: Tạo giao diện Khi đóng cửa số trình duyệt xuất lời chào tạm biệt. Bài tập 23: Tạo giao diện có liên kết Trường Đại học Nha Trang Khi nhập vào liên kết Windows hỏi, OK chuyển đến trang liên kết http://ntu.edu.vn, Cancel không thực cả. Trang 140 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 24: Viết chương trình hiển thị ngày tháng năm hành hình Hôm nay, ngày 01 tháng 04 năm 2014 Bài tập 25: Viết chương trình hiển thị giao diện hình bên dưới. Trong trường họ tên textbox, trường năm sinh combobox có giá trị từ 1950 đến năm tại. Bài tập 26: Viết chương trình hiển thị đồng hồ hình bên dưới. Cứ mỗi giây thời gian cập nhật lại lần. Bài tập 27: Hãy tạo chương trình máy tính sau: Bài tập 28: Viết chương trình link đến trang Web khác cho phép tùy chọn đối tượng Windows Trang 141 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG Bài tập 29: Thiết kế form có giao diện sau Yêu cầu: - Thông báo lỗi người dùng không nhập giá trị vào ô. - Thông báo lỗi tên đăng nhập nhỏ ký tự. - Thông báo lỗi mật nhập lại không khớp. - Ô nhập bị lỗi thông báo lỗi, ô nhập màu đổi thành màu vàng. Nếu nhập sau nhấn nút kiểm tra, màu chuyển lại thành trắng. Bài tập 30: Thiết kế form có giao diện sau Yêu cầu: - Khi click chuột vào nút lệnh "Click để hiển thị Password" password nhập hiển thị thành ký tự nhập form đổi thành - Khi click vào nút lệnh "Click để ẩn Password" form chuyển dạng ban đầu. - Sử dụng hình thức đăng ký kiện. Bài tập 31: Thiết kế form có giao diện sau Yêu cầu: - Khi click chuột vào nút lệnh "Save" dòng văn ô nhập liệu ghi lại vùng Nội dung. Dữ liệu ghi lại bao gồm dòng text nhập thời gian lúc lưu lại. Dữ liệu lưu thời gian gần cùng. - Sử dụng hình thức đăng ký kiện Trang 142 [...]... server …  Chú ý: Phân biệt trang web tĩnh và trang web động  Trang web tĩnh + Trang web tĩnh tương tác yếu với người dùng, nội dung của trang web không bị thay đổi theo thời gian cho đến khi người lập trình thay đổi code của trang web + Trang web tĩnh thường được viết bằng thuần HTML hoặc XHTML  Trang web động + Trang web động tương tác mạnh với người dùng, nội dung trang web bị thay đổi tùy theo ngữ... tag và kết thúc bởi Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web, các từ khóa dùng để tìm kiếm và nhận diện trang web, … Những thông tin này không được hiển thị trên trang web Thẻ head có thể bị lược bỏ nếu ta không cần mô tả về trang hiện tại 3.2.3 Body section Được bắt đầu bởi tag và kết thúc bởi Phần này chứa nội dung của trang web xuất hiện... Việc tuân thủ chuẩn W3C sẽ giúp:  Trang web thân thiện hơn với các Search Engine  Trang web được hỗ trợ tốt trên nhiều trình duyệt, không mất nhiều thời gian để chỉnh sửa và tối ưu hóa cho từng trình duyệt  Trang web được tải nhanh hơn  Các thiết bị hiển thị website di động như điện thoại IPad đều dựa trên chuẩn W3C Do đó, trang web sẽ được hiển thị tốt hơn trên các thiết bị này 2.4.2 ECMA - European... dùng yêu cầu + Trang web động được xây dựng bằng HTML (XHTML) kết hợp với các ngôn ngữ kịch bản dành cho server (ASP, PHP, Java,…) + Trang web động thường có yêu cầu truy xuất dữ liệu từ database 2.4 Một số tổ chức quản lý chuẩn và công nghệ web Để làm cho Internet trở thành nơi tốt hơn cho cả những người phát triển web và người dùng cuối cùng, cả trình duyệt và những nhà thiết kế web cần thiết phải tuân... href="https://www.google.com.vn/">Tìm kiếm Liên kết địa chỉ tuyệt đối thường được dùng để tham chiếu đến tài liệu nằm ngoài máy chủ của trang web 4.3.2 Liên kết địa chỉ tương đối Nếu liên kết đến tài liệu thuộc cùng máy chủ của trang web thì ta sử dụng địa chỉ tương đối là đường dẫn tới tài liệu tham chiếu Ví dụ: Trang web đang soạn thảo A mywebsite.html doc1.html doc1.html /B/doc2.html B doc2.html... thông tin một cách bảo mật trên Internet Trang 5 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG 2.2.4 Trình duyệt (web browser) Là một phần mềm để hiển thị các trang web viết bằng HTML cho người dùng Trình duyệt là cầu nối liên lạc giữa người dùng với máy chủ web Thông qua trình duyệt, người dùng gửi yêu cầu đến máy chủ dịch vụ web Máy chủ dịch vụ web sẽ gửi kết quả trả về trình duyệt để hiển thị cho... (web browser) Webpage được truy cập trên mạng Internet thông qua địa chỉ gọi là Uniform Resource Locator (URL) Website là tập hợp các tài liệu web (webpage, file định dạng CSS, các script, hình ảnh, âm thanh…) có liên quan với nhau, được đặt tại ít nhất một máy phục vụ web (web server) 2.2.2 Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML) Là ngôn ngữ đánh dấu cơ bản để tạo ra các trang. .. dụng Web có thể được xem gồm 2 phần:  Client Bên phía client, người dùng (user) sử dụng trình duyệt web để gửi yêu cầu (request) đến Server bằng cách gõ địa chỉ của trang web cần đến vào thanh địa chỉ của trình duyệt Kết quả nhận được sau đó sẽ được hiển thị trên cửa sổ của trình duyệt  Server Về phía Server, máy phục vụ web khởi chạy một ứng dụng web tương ứng để xử lý yêu cầu của người sử dụng, kết... cần thiết phải tuân thủ theo các chuẩn web Khi những nhà phát triển tuân theo các chuẩn web, việc phát triển web sẽ được đơn giản hóa Khi đó, người phát triển có thể dễ dàng hiểu những cách viết mã khác Sử dụng các chuẩn web giúp đảm bảo rằng trang web hiển thị chính xác trên các trình duyệt khác nhau, mà không phải thường xuyên tốn thời gian viết lại Những trang web tuân theo chuẩn sẽ dễ dàng được các... đến doc2.html Trang 22 KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG 4.3.3 Liên kết nội tại Liên kết nội tại thường được dùng tham chiếu đến 1 phần nội dung của trang web Để làm được điều này ta thực hiện các bước sau:  Đánh dấu (bookmark) vị trí bằng cách sử dụng thuộc tính name của thẻ Ví dụ: Chapter 1  Để tham chiếu đến phần nội dung cần thiết, ta liên kết đến vị trí đã . trang web không bị thay đổi theo thời gian cho đến khi người lập trình thay đổi code của trang web. + Trang web tĩnh thường được viết bằng thuần HTML hoặc XHTML  Trang web động + Trang web. mục đích o Web server o File server o Application server o Database server o Mail server …  Chú ý: Phân biệt trang web tĩnh và trang web động  Trang web tĩnh + Trang web tĩnh tương. NHA TRANG 2014 LỜI NÓI ĐẦU Bài giảng Thiết kế trang web được biên soạn làm tài liệu tham khảo hữu ích cho sinh viên Ngành Công nghệ Thông tin học tập và nghiên cứu. Trong bài giảng này,