Đề cương thiết kế web với HTMLCSS

, 33 2.4 Các thẻ định dạng ký tự thƣờng dùng 35 BÀI THỰC HÀNH: LÀM VIỆC VỚI CÁC THẺ HTML 39 3.1 Mục tiêu: 39 3.2 Nội dung hƣớng dẫn: 39 3.3 Bài tập mẫu: 40 3.4 Bài tập tự làm: 43 BÀI CÁC THẺ CƠ BẢN (TIẾP) 45 4.1 Danh sách 45 4.1.1 Danh sách không thứ tự 45 4.1.2 Danh sách có thứ tự 49 4.1.3 Danh sách định nghĩa 53 4.2 Thẻ kẻ đƣờng ngang: 55 4.3 Sử dụng font 56 Đề cương môn học: Thiết kế Web với HTML&CSS 4.4 Sử dụng màu sắc 57 4.5 Sử dụng hình ảnh tài liệu HTML 58 4.5.1 Chèn ảnh 60 BÀI THẢO LUẬN: CÁC THẺ CƠ BẢN HTML 63 5.1 Mục tiêu 63 5.2 Tổ chức thực 63 5.3 Nội dung thảo luận 63 5.3.1 Bài thảo luận số 63 5.3.2 Bài thảo luận số 64 BÀI SỬ DỤNG BẢNG VÀ LỚP 65 6.1 Cách tạo bảng 65 6.1.1 Thẻ dùng để tạo bảng 65 6.1.2 Chèn hàng cột 68 6.1.3 Xóa hàng cột 69 6.1.4 Trộn ô: Kết hợp cột hay dòng 70 6.1.5 Định dạng cho ô 74 6.2 Lớp (Layer): 76 6.2.1 Lớp gì? 76 6.2.2 Sử dụng lớp 77 6.3 Chèn Multimedia vào tài liệu HTML 79 6.3.1 Chèn ảnh động vào (.GIF) vào tài liệu HTML 79 6.3.2 Chèn âm vào tài liệu HTML 80 6.3.3 Chèn Video vào tài liệu HTML 82 6.3.4 Chèn Java Applets 83 BÀI THỰC HÀNH: LÀM VIỆC VỚI CÁC THẺ HTML (TIẾP) 86 7.1 Mục tiêu: 86 7.2 Nội dung hƣớng dẫn: 86 7.3 Bài tập mẫu: 86 7.4 Bài tập tự làm: 90 BÀI SỬ DỤNG BIỂU MẪU VÀ KHUNG 92 8.1 Giới thiệu biểu mẫu 92 8.1.1 Sử dụng biểu mẫu 92 Đề cương môn học: Thiết kế Web với HTML&CSS 8.1.2 Phần tử FORM 93 8.1.3 Các phần tử nhập HTML 94 8.1.4 Tạo biểu mẫu 107 8.2 Khung (Frame) 111 8.2.1 Tại sử dụng khung ? 111 8.2.2 Sử dụng khung 111 8.2.3 Phần tử IFRAME – khung dòng (inline frame) 119 BÀI THẢO LUẬN BIỂU MẪU VÀ KHUNG 122 9.1 Mục tiêu 122 9.2 Tổ chức thực 122 9.3 Nội dung thảo luận 122 9.3.1 Bài thảo luận số 122 9.3.2 Bài thảo luận số 123 BÀI 10 THỰC HÀNH LÀM VIỆC VỚI THẺ NHẬP DỮ LIỆU 124 10.1 Mục tiêu: 124 10.2 Nội dung hƣớng dẫn: 124 10.3 Bài tập mẫu: 126 10.4 Bài tập tự làm: 127 BÀI 11 LÀM VIỆC VỚI CASCADING STYLE SHEET 129 11.1 DHTML 129 11.1.1 Giới thiệu DHTML 129 11.1.2 Các đặc điểm DHTML 130 11.2 Style Sheets 132 11.2.1 Khái niệm, chức thuận lợi stylesheet 132 11.2.2 Qui tắc stylesheet 135 BÀI 12 THỰC HÀNH LÀM VIỆC VỚI CASCADING STYLE SHEET (CSS) 138 12.1 Mục tiêu: 138 12.2 Nội dung hƣớng dẫn: 138 12.3 Bài tập mẫu: 139 12.4 Bài tập tự làm: 142 BÀI 13 LÀM VIỆC VỚI CASCADING STYLE SHEET (TIẾP) 143 13.1 Các Selector (selector ) style sheet (hay giả lớp) 143 Đề cương môn học: Thiết kế Web với HTML&CSS 13.1.1 Selector đơn 143 13.1.2 Selector ngữ cảnh 148 13.2 Kết hợp, liên kết chèn style sheet vào tài liệu HTML 150 13.2.1 Phần tử STYLE 150 13.2.2 Thuộc tính STYLE 151 13.2.3 Phần tử Link 151 13.3 Thiết lập thuộc tính stylesheet 152 BÀI 14 THẢO LUẬN VỀ CASCADING STYLE SHEET 154 14.1 Mục tiêu 154 14.2 Tổ chức thực 154 14.3 Nội dung thảo luận 154 14.3.1 Bài thảo luận số 154 14.3.2 Bài thảo luận số 155 BÀI 15 THỰC HÀNH LÀM VIỆC VỚI CASCADING STYLE SHEET (TIẾP) 156 15.1 Mục tiêu: 156 15.2 Nội dung hƣớng dẫn: 156 15.3 Bài tập mẫu: 157 15.4 Bài tập tự làm: 158 BÀI 16 NỀN TẢNG CƠ BẢN VÀ CÚ PHÁP JAVASCRIPT 160 16.1 Giới thiệu Javascript 160 16.1.1 JavaScript gì? 160 16.1.2 Hiệu ứng quy tắc JavaScript 161 16.1.3 Các công cụ JavaScript IDE, môi trƣờng thực thi 162 16.1.4 Nhúng JavaScript vào trang Web 163 16.1.5 Ví dụ đơn giản sử dụng hộp thông báo phƣơng thức write 169 16.2 Các biến (Variables) 170 16.3 Các kiểu liệu 172 16.4 Các toán tử 177 16.4.1 Toán tử số học 177 16.4.2 Các toán tử so sánh 179 16.4.3 Toán tử logic 180 16.4.4 Toán tử chuỗi 181 Đề cương môn học: Thiết kế Web với HTML&CSS 16.4.5 Toán tử Evaluation 181 16.4.6 Mức ƣu tiên toán tử 184 16.5 Các biểu thức 184 16.6 Mảng 192 16.7 Các câu lệnh điều kiện 196 16.8 Các lệnh vòng lặp 198 16.9 Hàm (function) 202 BÀI 17 CÁC ĐỐI TƢỢNG CƠ BẢN TRONG 207 17.1 Các đối tƣợng JavaScript 207 17.2 Cây phân cấp đối tƣợng 207 17.2.1 Câu lệnh this 208 17.2.2 Câu lệnh with 211 17.2.3 Câu lệnh new 212 17.3 Câu lệnh eval 213 17.4 Đối tƣợng String 214 17.5 Đối tƣợng Math 216 17.6 Đối tƣợng Date 220 BÀI 18 THẢO LUẬN CÁC ĐỐI TƢỢNG CƠ BẢN CỦA JAVASCRIPT 226 18.1 Mục tiêu 226 18.2 Tổ chức thực 226 18.3 Nội dung thảo luận 226 18.3.1 Bài thảo luận số 226 18.3.2 Bài thảo luận số 227 BÀI 19 THỰC HÀNH CÁC ĐỐI TƢỢNG CƠ BẢN CỦA JAVASCRIPT 229 19.1 Mục tiêu: 229 19.2 Nội dung hƣớng dẫn: 229 19.3 Bài tập mẫu: 231 19.4 Bài tập tự làm: 233 BÀI 20 CÁC ĐỐI TƢỢNG CỦA TRÌNH DUYỆT TRONG JAVASCRIPT 235 20.1 Đối tƣợng Event - Khái niệm 235 20.2 Các kiện JavaScript 236 20.3 Trình xử lý kiện 245 Đề cương môn học: Thiết kế Web với HTML&CSS 20.4 Đối tƣợng trình duyệt thông thƣờng 247 20.4.1 Mô hình đối tƣợng (DOM) 248 20.4.2 Đối tƣợng Window 248 20.4.3 Đối tƣợng Document 249 20.4.4 Đối tƣợng History 251 20.5 Đối tƣợng Location 252 BÀI 21 THỰC HÀNH CÁC ĐỐI TƢỢNG CƠ BẢN CỦA JAVASCRIPT (TIẾP) 253 21.1 Mục tiêu: 253 21.2 Nội dung hƣớng dẫn: 253 21.3 Bài tập mẫu: 255 21.4 Bài tập tự làm: 257 BÀI 22 XỬ LÝ FORM VÀ CÁC SỰ KIỆN CHO PHẦN TỬ CỦA FORM 258 22.1 Đối tƣợng Form 258 22.2 Đối tƣợng Textfield (trƣờng văn bản) 259 22.3 Đối tƣợng Command Button 262 22.4 Đối tƣợng Checkbox 264 22.5 Đối tƣợng radio 265 22.6 Đối tƣợng ComboBox / lựa chọn 267 22.7 Kiểm tra tính hợp lệ nội dung trƣờng form 268 BÀI 23 THẢO LUẬN XỬ LÝ FORM VÀ SỰ KIỆN 273 23.1 Mục tiêu 273 23.2 Tổ chức thực 273 23.3 Nội dung thảo luận 273 23.3.1 Bài thảo luận số 273 23.3.2 Bài thảo luận số 273 BÀI 24 THỰC HÀNH XỬ LÝ FORM VÀ SỰ KIỆN 275 24.1 Mục tiêu: 275 24.2 Nội dung hƣớng dẫn 275 24.3 Bài tập mẫu 276 24.4 Các tập tự làm 277 BÀI 25 THẢO LUẬN KIỂM TRA TÍNH HỢP LỆ CỦA DỮ LIỆU 279 25.1 Mục tiêu 279 Đề cương môn học: Thiết kế Web với HTML&CSS 25.2 Tổ chức thực 279 25.3 Nội dung thảo luận 279 25.3.1 Bài thảo luận số 279 25.3.2 Bài thảo luận số 280 Đề cương môn học: Thiết kế Web với HTML&CSS GIỚI THIỆU VÀ SIÊU LIÊN KẾT BÀI “Internet”,“World Wide Web”, “Web page” không thuật ngữ.Giờ đây, thuật ngữ trở thành thực Internet mạng máy tính lớn giới, đƣợc xem nhƣ mạng mạng World Wide Web tập Internet World Wide Web gồm Web Servers có mặt khắp nơi giới Các Web server chứa thông tin mà ngƣời dùng giới truy cập đƣợc Các thông tin đƣợc lƣu trữ dƣới dạng trang Web Trong phần này, học Ngôn ngữ đánh dấu siêu văn (HTML), phần quan trọng lãnh vực thiết kế phát triển giới Web Giới thiệu Internet 1.1 Mạng nhóm máy tính kết nối với Internet mạng mạng Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất máy tính giới Hình 1.1: Internet World Wide Web tập Internet Nó bắt đầu nhƣ đề án nghiên cứu cấp quốc gia phòng nghiên cứu CERN Thụy Sĩ Ngày nay, cung cấp thông tin cho ngƣời dùng toàn giới WWW hoạt động dựa chế để đƣa tài nguyên có giá trị đến với ngƣời dùng Đó là: Ø Giao thức: Ngƣời dùng tuân theo giao thức để truy cập tài nguyên Web HyperText Transfer Protocol(HTTP) giao thức đƣợc WWW sử dụng Ø Địa chỉ: WWW tuân theo cách thức đặt tên thống để truy cập vào tài nguyên Web URL đƣợc sử dụng để nhận dạng trang tài nguyên Web Đề cương môn học: Thiết kế Web với HTML&CSS Ø HTML: Ngôn ngữ đánh dấu siêu văn (HTML) đƣợc sử dụng để tạo tài liệu truy cập Web Tài liệu HTML đƣợc tạo cách sử dụng thẻ phần tử HTML File đƣợc lƣu Web server với đuôi htm html Khi bạn sử dụng trình duyệt để yêu cầu số thông tin đó, Web server đáp ứng yêu cầu Nó gửi thông tin đƣợc yêu cầu đến trình duyệt dƣới dạng trang web Trình duyệt định dạng thông tin máy chủ gửi hiển thi chúng Hình 1.2: Trình duyệt yêu cầu đến máy chủ Giới thiệu HTML 1.2 Ngôn ngữ đánh dấu siêu văn rõ trang Web đƣợc hiển thị nhƣ trình duyệt Sử dụng thẻ phần tử HTML, bạn có thể: Ø Điều khiển hình thức nội dung trang Ø Xuất tài liệu trực tuyến truy xuất thông tin trực tuyến cách sử dụng liên kết đƣợc chèn vào tài liệu HTML Ø Tạo biểu mẫu trực tuyến để thu thập thông tin ngƣời dùng, quản lý giao dịch Ø Chèn đối tƣợng nhƣ audio clip, video clip, thành phần ActiveX Java Applet vào tài liệu HTML Tài liệu HTML tạo thành mã nguồn trang Web Khi đƣợc xem trình soạn thảo, tài liệu chuỗi thẻ phần tử, mà chúng xác định trang web hiển thị nhƣ Trình duyệt đọc file có đuôi htm hay html hiển thị trang web theo lệnh có Ví dụ, theo cú pháp HTML dƣới hiển thị thông điệp “My first HTML document” Đề cương môn học: Thiết kế Web với HTML&CSS Ví dụ 1: Welcome to HTML My first HTML document Trình duyệt thông dịch lệnh hiển thị trang web nhƣ hình 1.3 Hình 1.3: Kết ví dụ 1.2.1 HTML Development Tài liệu HTML đƣợc hiển thị trình duyệt Vậy trình duyệt ? Trình duyệt ứng dụng đƣợc cài đặt máy khách Trình duyệt đọc mã nguồn HTML hiển thị trang theo lệnh Trình duyệt đƣợc sử dụng để xem trang Web điều hƣớng.Trình duyệt đƣợc biết đến sớm Mosaic, đƣợc phát triển Trung tâm ứng dụng siêu máy tính quốc gia (NCSA) Ngày nay, có nhiều trình duyệt đƣợc sử dụng Internet Netscape‟s Navigator Microsoft‟s Internet Explorer hai trình duyệt đƣợc sử dụng phổ biến Đối với ngƣời dùng, trình duyệt dễ sử dụng có giao diện đồ họa với việc trỏ kích chuột Để tạo tài liệu nguồn,bạn phải cần trình soạn thảo HTML Ngày nay, có nhiều trình soạn thảo đƣợc sử dụng: Microsoft FrontPage công cụ tổng hợp đƣợc dùng để tạo, thiết kế hiệu chỉnh trang Web Chúng ta thêm văn 10 Đề cương môn học: Thiết kế Web với HTML&CSS Option Button Events Light off 266 Đề cương môn học: Thiết kế Web với HTML&CSS Light on Hình 22.5: kết ví dụ Lƣu ý: Khi thử ví dụ này, bạn nhấp vào nút radio để xem kết xảy 22.6 Đối tƣợng ComboBox / lựa chọn Đối tƣợng ComboBox xuất form HTML giống nhƣ danh sách sổ xuống danh sách cuộn tuỳ chọn Danh sách tuỳ chọn đƣợc mô tả thẻ cách sử dụng thẻ ComboBox hỗ trợ kiện onBlur, onFocus, onChange Ví dụ 6: Option Button Events Dogs Fish Birds Hình 22.6: Kết ví dụ Lƣu ý: Khi chạy ví dụ này, bạn chọn tuỳ chọn sẵn có message tƣơng ứng đƣợc hiển thị 22.7 Kiểm tra tính hợp lệ nội dung trƣờng form Chƣơng trình dƣới ví dụ việc kiểm tra tính hợp lệ nội dung trƣờng formtrƣớc chuyển cho server để tiếp tục xử lý Trong trình kiểm tra tính hợp lệ nội dung trƣờng form, ngƣời lập trình phải kiểm tra trƣờng để bảo đảm trƣờng bị bỏ trống chứa thông tin không hợp lệ Ví dụ 7: 268 Đề cương môn học: Thiết kế Web với HTML&CSS Form Events Handling Form Events

First Name : Last size=15 Name :

270 NAME="lname" Đề cương môn học: Thiết kế Web với HTML&CSS

Email : Comments : Enter your comments

Định dạng
Số trang	280
Dung lượng	6,22 MB