Giáo trình HTML

254 trang huongle 2960

Download

Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình HTML", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

giao_trinh_html.pdf

Nội dung text: Giáo trình HTML

Mục lục Chương 1. Giới thiệu và siêu liên kết 24 1.1. Mục tiêu bài học: 24 1.2. Giới thiệu 24 1.1.1. Giới thiệu Internet 24 1.1.2. Giới thiệu HTML 25 1.1.2.1 HTML Development 26 1.1.2.2 Cấu trúc của một tài liệu HTML 27 1.1.2.2.1. Đoạn 27 1.1.2.2.2. Các thẻ ngắt 28 1.1.2.2.3. Chọn canh lề 29 1.1.2.3 Sử dụng thẻ 30 1.1.2.4 Sử dụng ký tự đặc biệt trong tài liệu HTML 30 1.1.2.5 Sử dụng các siêu liên kết 31 1.1.2.5.1. Giới thiệu siêu liên kết và URL 31 1.1.2.5.2. Sử dụng siêu liên kết 32 1.1.2.5.3. Liên kết đến những tài liệu khác 33 1.1.2.5.4. Liên kết đến các phần trong cùng một tài liệu 34 1.1.2.5.5. Liên kết đến một điểm xác định ở một tài liệu khác 36 1.1.2.6 Sử dụng e-mail 37 1.1.2.7 Điều hướng quanh Web site 37 1.3. Tóm tắt bài học 38 1.4. Ôn tập 39 1.5. Tự thực hành 39 Chương 2. Giới thiệu và các siêu liên kết 40
2.1. Mục tiêu bài học: 40 2.2. Phần I – Thực hiện trong 1h30’ đầu: 40 2.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 46 2.4. Tự thực hành 46 Chương 3. Các thẻ cơ bản 47 3.1. Mục tiêu bài học: 47 3.2. Giới thiệu 47 3.2.1. Headings (Tiêu đề) 47 3.3. Các thẻ mức đoạn 48 3.3.1. Thẻ 48 3.3.2. Thẻ 49 3.3.3. Thẻ 50 3.3.4. Thẻ khối , 51 3.3.5. Các thẻ định dạng ký tự thường dùng 52 3.3.5.1 Thẻ định dạng mức vật lý 52 3.3.5.2 Thẻ định dạng mức logic 53 3.3.6. Danh sách 54 3.3.6.1 Danh sách không thứ tự 55 3.3.6.2 Danh sách có thứ tự 57 3.3.6.3 Danh sách định nghĩa 60 3.3.7. Thẻ kẻ đường ngang: 61 3.3.8. Sử dụng font 62 3.3.9. Sử dụng màu sắc 63 3.3.10. Sử dụng hình ảnh trong tài liệu HTML 64 3.3.10.1 Ảnh GIF (Graphics Interchange Format) (.GIF) 64
3.3.10.2 Ảnh JPEG (Joint Photographic Expert Group) (.JPEG) 65 3.3.10.3 PNG (Portable Network Graphics) 65 3.3.10.4 Chèn ảnh 65 3.4. Tóm tắt bài học 67 3.5. Ôn tập 68 3.6. Tự thực hành 68 Chương 4. Các thẻ cơ bản 69 4.1. Mục tiêu bài học: 69 4.2. Phần I – Thực hiện trong 1h30’ đầu: 69 4.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 76 4.4. Tự thực hành 76 Chương 5. Sử dụng bảng và lớp 76 5.1. Mục tiệu bài học: 76 5.2. Giới thiệu 76 5.2.1. Cách tạo bảng 76 5.2.1.1 Thẻ dùng để tạo bảng 77 5.2.1.2 Chèn hàng và cột 79 5.2.1.3 Xóa hàng và cột 80 5.2.1.4 Trộn ô: Kết hợp các cột hay dòng 81 5.2.1.5 Định dạng cho ô 83 5.2.2. Lớp (Layer): 85 5.2.2.1 Lớp là gì? 85 5.2.2.2 Sử dụng các lớp 86 5.2.3. Chèn Multimedia vào tài liệu HTML 88 5.2.3.1 Chèn ảnh động vào (.GIF) vào tài liệu HTML 88
5.2.3.2 Chèn âm thanh vào tài liệu HTML 89 5.2.3.3 Chèn Video vào tài liệu HTML 90 5.2.4. Chèn các Java Applets 91 5.3. Tóm tắt bài học 92 5.4. Ôn tập 93 5.5. Tự thực hành 93 Chương 6. Sử dụng bảng và lớp 94 6.1. Mục tiêu bài học: 94 6.2. Phần I – Thực hiện trong 1h30’ đầu: 94 6.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 96 6.4. Tự thực hành 96 Chương 7. Sử dụng biểu mẫu và khung 97 7.1. Mục tiêu bài học: 97 7.2. Giới thiệu 97 7.2.1. Giới thiệu biểu mẫu 97 7.2.2. Sử dụng biểu mẫu 97 7.2.3. Phần tử FORM 98 7.2.4. Các phần tử nhập của HTML 98 7.2.4.1 Phần tử INPUT 99 7.2.4.1.1. Nút bấm 99 7.2.4.1.2. Văn bản 99 7.2.4.1.3. Checkbox (Hộp kiểm) 100 7.2.4.1.4. Radio 100 7.2.4.1.5. Submit 100 7.2.4.1.6. Ảnh 100
7.2.4.1.7. Reset 101 7.2.4.1.8. Phần tử TextArea (vùng văn bản) 102 7.2.4.1.9. Phần tử BUTTON (Nút bấm) 102 7.2.4.1.10. Phần tử lựa chọn (Select) 104 7.2.4.1.11. Phần tử LABEL (Nhãn) 106 7.2.4.2 Tạo biểu mẫu 107 7.2.4.2.1. Thiết lập tiêu điểm (Focus) 108 7.2.4.2.2. Thứ tự tab 109 7.2.4.2.3. Phím truy cập (Access Keys) 109 7.2.4.2.4. Phần tử vô hiệu hóa (Disabling Elements) 109 7.2.5. Khung (Frame) 109 7.2.5.1 Tại sao sử dụng khung ? 110 7.2.5.2 Sử dụng khung 110 7.2.6. Liên kết các khung 114 7.2.6.1 Phần tử NOFRAMES 115 7.2.6.2 Phần tử IFRAME – khung trên dòng (inline frame) 115 7.3. Tóm tắt bài học 116 7.4. Ôn tập 117 7.5. Tự thực hành 118 Chương 8. Sử dụng biểu mẫu và khung 118 8.1. Mục tiêu bài học: 118 8.2. Phần I – Thực hiện trong 1h30’ đầu: 119 8.2.1. Sử dụng biểu mẫu 119 8.2.2. Sử dụng khung: 122 8.2.3. Sử dụng khung trên dòng: 122
8.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 122 8.4. Tự thực hành 123 Chương 9. Các style sheet 123 9.1. Mục tiêu bài học: 123 9.2. Giới thiệu 124 9.2.1. DHTML 124 9.2.1.1 Giới thiệu DHTML 124 9.2.1.2 Các đặc điểm của DHTML 125 9.2.1.2.1. Kiểu động (Dynamic Style) 125 9.2.1.2.2. Nội dung động (Dynamic Content) 125 9.2.1.2.3. Định vị (Positioning) 125 9.2.1.2.4. Liên kết dữ liệu (Data Binding) 126 9.2.1.2.5. Downloadable Fonts (Có khả năng tải Font chữ) 126 9.2.1.2.6. Scripting 126 9.2.1.2.7. Cấu trúc đối tượng (Object Structure) 126 9.2.2. Style Sheets 126 9.2.2.1 Khái niệm, chức năng và các thuận lợi của stylesheet 126 9.2.2.2 Lợi ích của các stylesheet 127 9.2.2.2.1. Nạp chồng trình duyệt: 127 9.2.2.2.2. Bố cục trang (Page layout) 128 9.2.2.2.3. Sử dụng lại các stylesheet 128 9.2.2.2.4. Chỉ cần làm một lần thật tốt 128 9.2.2.3 Qui tắc stylesheet 128 9.2.2.3.1. Qui tắc kiểu (Style Rule) 128 9.2.2.3.2. Style Sheet 128
9.2.2.3.3. Các qui tắc (Rules) 128 9.2.2.4 Các Selector (selector ) trong style sheet (hay các giả lớp) 131 9.2.2.5 Selector đơn 131 9.2.2.6 Selector HTML 131 9.2.2.7 Selector lớp 132 9.2.2.8 Selector ID 134 9.2.2.9 Selector ngữ cảnh 136 9.2.3. Kết hợp, liên kết và chèn một style sheet vào tài liệu HTML 137 9.2.3.1 Phần tử STYLE 137 9.2.3.2 Phần tử Link 138 1. Sheet1.css 138 2. Tệp .htm 138 9.2.4. Thiết lập thuộc tính trong stylesheet 139 9.3. Tóm tắt bài học 139 9.4. Ôn tập 140 9.5. Tự thực hành 140 Chương 10. Các style sheet 140 10.1. Mục tiêu bài học: 140 10.2. Phần I – Thực hiện trong 1h30’ đầu: 140 10.2.1. Viết những style sheet 140 10.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 143 10.4. Tự thực hành 144 Chương 11. Nền tảng cơ bản và cú pháp JavaScript 145 11.1. Mục tiêu bài học: 145 11.2. Giới thiệu 145
1.1.3. Giới thiệu về Javascript 145 1.1.3.1 JavaScript là gì? 145 1.1.3.2 Định nghĩa 146 1.1.4. Hiệu ứng và quy tắc JavaScript 146 1.1.5. Các công cụ JavaScript và IDE, và môi trường thực thi 147 1.1.5.1 Client-side Java Script 147 1.1.5.2 JavaScript trên Web Server 147 1.1.6. Nhúng JavaScript vào trong trang Web 148 1.1.6.1 Dùng thẻ SCRIPT 148 1.1.6.2 Dùng file bên ngoài 149 1.1.6.3 Đặt các biểu thức JavaScript là giá trị cho các thuộc tính của thẻ HTML 150 1.1.6.4 Dùng JavaScript trong trình xử lý sự kiện 151 1.1.7. Ví dụ đơn giản sử dụng các hộp thông báo và phương thức write 152 1.2. Các biến (Variables) 153 1.2.1. Khai báo biến 153 1.2.2. Phạm vi của biến 153 1.2.3. Literals 153 1.2.4. Các kiểu dữ liệu 153 1.2.4.1 Số nguyên 156 1.2.4.2 Số thực (Floating-point) 156 1.2.4.3 Chuỗi 156 1.2.4.3.1. Ký tự backspace 156 1.2.4.3.2. Ký tự form feed (sang trang) 156 1.2.4.3.3. Ký tự new line (xuống dòng) 156 1.2.4.3.4. Ký tự carriage return (Phím xuống dòng) 157
1.2.4.3.5. Ký tự tab 157 1.2.4.4 Boolean 157 1.2.4.5 Null 157 11.3. Các toán tử 157 11.3.1. Toán tử số học 157 11.3.2. Các toán tử so sánh 158 11.3.3. Toán tử logic 159 11.3.4. Toán tử chuỗi 160 11.3.4.1 Toán tử Evaluation 160 11.3.4.2 Toán tử điều kiện 160 11.3.4.3 typeof 161 11.3.5. Mức ưu tiên của các toán tử 162 11.4. Các biểu thức 162 11.4.1. Các biểu thức quy tắc 162 11.4.1.1 Các mẫu đơn giản (Simple pattern). 163 11.4.1.2 Kết hợp các ký tự đơn giản và đặc biệt. 163 11.4.2. Tạo một biểu thức quy tắc 164 11.4.2.1 Sử dụng khởi tạo đối tượng (Object initializer). 164 11.4.2.2 Gọi hàm khởi tạo của đối tượng RegExp. 164 11.4.3. Sử dụng biểu thức quy tắc 165 11.5. 13.6 Mảng 166 11.5.1. Tạo mảng 167 11.5.2. Thêm các phần tử 167 11.5.3. Truy cập các phần tử mảng 168 11.5.4. Sử dụng các phương thức của mảng: 168
11.5.5. Mảng nhiều chiều 169 11.6. Các câu lệnh điều kiện 170 11.6.1. Câu lệnh if . . . else 170 11.6.2. Lệnh switch 170 11.6.3. Các lệnh vòng lặp 171 11.6.4. Vòng lặp “for” 171 11.6.5. Do . . . while 173 11.6.6. Lệnh while 173 11.6.7. Câu lệnh break & continue 173 11.6.8. for in 173 11.6.9. With 174 11.7. Hàm (function) 174 11.7.1. hàm eval 175 11.7.2. eval(string) 175 11.7.3. Hàm isNaN 175 11.7.4. Tạo hàm do người dùng định nghĩa 175 11.7.4.1 Định nghĩa hàm 175 11.7.4.2 Gọi một hàm 175 11.7.4.3 Câu lệnh return 176 11.8. Tóm tắt bài học 177 11.9. Ôn tập 178 11.10. Tự thực hành 178 Chương 12. Nền tảng cơ bản và cú pháp JavaScript 179 12.1. Mục tiêu bài học: 179 12.2. Phần I – Thực hiện trong 1h30’ đầu: 179
12.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 182 Chương 13. Các đối tượng cơ bản trong JavaScript 183 13.1. Mục tiêu bài học: 183 13.2. Giới thiệu 183 13.2.1. Các đối tượng JavaScript 183 13.2.2. Cây phân cấp của đối tượng 184 13.2.3. Câu lệnh this 184 13.2.4. Câu lệnh for in 186 13.2.5. Câu lệnh with 187 13.2.6. Câu lệnh new 188 13.2.7. Câu lệnh eval 189 13.2.8. Đối tượng String 190 13.2.8.1 Các thuộc tính: 190 13.2.8.2 Phương thức: 190 13.2.9. Đối tượng Math 191 13.2.9.1 Thuộc tính: 191 13.2.9.2 Phương thức: 191 13.2.10. Đối tượng Date 193 13.2.10.1 Phương thức: 194 13.2.10.2 Nhóm phương thức get: 194 13.2.10.3 Nhóm phương thức set: 194 13.2.10.4 Nhóm phương thức to: 195 13.2.10.5 Nhóm phương thức Parse & UTC: 195 13.3. Tóm tắt bài học 196 13.4. Ôn tập 197
13.5. Tự thực hành 197 Chương 14. Những đối tượng ngôn ngữ cơ bản trong JavaScript 197 14.1. Mục tiêu bài học: 197 14.2. Phần I – Thực hiện trong 1h30’ đầu: 197 14.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 199 14.4. Tự thực hành 200 Chương 15. Các đối tượng của trình duyệt trong JavaScript 200 15.1. Mục tiêu bài học: 200 15.2. Giới thiệu 200 15.2.1. Đối tượng Event - Khái niệm 200 15.2.2. Các sự kiện JavaScript 201 15.2.3. onClick 201 15.2.4. onChange 202 15.2.5. onFocus 204 15.2.6. onBlur 204 15.2.7. onMouseOver 204 15.2.8. onMouseOut 204 15.2.9. OnLoad 205 15.2.10. onSubmit 206 15.2.11. onMouseDown 206 15.2.12. onMouseUp 206 15.2.13. onResize 207 15.3. Trình xử lý sự kiện 208 15.4. Trình xử lý sự kiện cho các thẻ HTML 208 15.5. Trình xử lý sự kiện như là những thuộc tính 209
15.6. Đối tượng trình duyệt thông thường 209 15.7. Mô hình đối tượng (DOM) 210 15.8. Đối tượng Window 210 15.8.1. Các thuộc tính 211 15.8.2. Những phương thức 211 15.9. Đối tượng Document 211 15.9.1. Các thuộc tính 212 15.9.2. Các phương thức 212 15.10. Đối tượng History 212 Các phương thức 213 15.11. Đối tượng Location 213 15.11.1. Các thuộc tính 213 15.11.2. Các phương thức 213 15.12. Tóm tắt bài học 213 15.13. Ôn tập 214 15.14. Tự thực hành 214 Chương 16. Các đối tượng của trình duyệt trong JavaScript 216 16.1. Mục tiêu bài học: 216 16.2. Phần I – Thực hiện trong 1h30’ đầu: 216 16.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 221 16.4. Tự thực hành 222 Chương 17. Xử lý Form và các sự kiện cho các phần tử trong Form 223 17.1. Mục tiêu bài học: 223 17.2. Giới thiệu 223 17.2.1. Đối tượng Form 223
17.2.2. Đối tượng Textfield (trường văn bản) 224 17.2.3. Đối tượng Command Button 227 17.2.4. Đối tượng Checkbox 228 17.2.5. Đối tượng radio 229 17.2.6. Đối tượng ComboBox / lựa chọn 231 17.3. Kiểm tra tính hợp lệ của nội dung các trường trên form 232 17.4. Tóm tắt bài học 234 17.5. Ôn tập 234 17.6. Tự thực hành 234 Chương 18. Xử lý Form và các sự kiện cho các phần tử trong Form 235 18.1. Mục tiêu bài học: 235 18.2. Phần I – Thực hiện trong 1h30’ đầu: 235 18.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 241 18.4. Tự thực hành 244 Glossary 245 B. Arrays : Man̉ g 245 C. Body Sec on : Phần thân (văn ban̉ HTML) 245 D. Browser : Trình duyệt 245 E. Controls : Các điều khiên̉ 245 F. DHTML 245 G. Event : Sự kiêṇ 246 H. Event Handler : Bô ̣ điều khiên̉ sự kiêṇ 246 I. Expression : Biêủ thức 246 J. External link : Liên kết ngoài 246 K. Form : Biêủ mẫu 246
L. Frame : Khung 246 M. FrontPage 246 N. Header Section : Phần êu đề 246 O. HTML 247 P. Hyperimages : Liên kết anh̉ 247 Q. Hyperlink : Siêu liên kết 247 R. Image Map : Ban̉ đồ ảnh 247 S. Internal Link : Liên kết trong 247 T. Internet 247 U. JavaScript 247 V. Layer : Tầng 247 W. Mosaic 247 X. Network : Maṇ g 247 Y. Object : Đối tượng 248 Z. Protocol : Giao thức 248 AA. Style Sheets : Ban̉ g kiêủ 248 BB. Tags : The ̉ 248 CC. Uniform Resource Locator (or URL) 248 DD. Variable : Biến 248 EE. Web Server 248 FF. The server application that stores web pages, accepts the browser’s requests and returns appropriate web pages. 248 GG. World Wide Web (or WWW) 248 Phụ lục 1: Các thuộc tính sử dụng trong Style sheet 248 Phụ lục 2: Các từ khoá trong JavaScript 251 Mục lục Bảng:
Bảng 1-1: Thuộc tính align 29 Bảng 1-2: Ký tự đặc biệt trong HTML 31 Bảng 3-1: Thẻ định dạng mức vật lý 53 Bảng 3-2: Thuộc tính Type 57 Bảng 3-3: Thông số cho mục danh sách 58 Bảng 3-4: Thuộc tính thẻ HR 62 Bảng 3-5: Mã màu 64 Bảng 11-1: Liệt kê ký tự đặc biệt 156 Mục lục Hình: Hình 1-1: Internet 24 Hình 1-2: Trình duyệt yêu cầu đến máy chủ 25 Hình 1-3: Kết quả ví dụ 1 26 Hình 1-4: Kết quả của ví dụ 2 27 Hình 1-5: Kết quả của ví dụ 3 28 Hình 1-6: Kết quả của ví dụ 4 29 Hình 1-7: Kết quả của ví dụ 5 30 Hình 1-8: Kết quả của ví dụ 6 33 Hình 1-9: Kết quả của ví dụ 7 34 Hình 1-10: Kết quả của ví dụ 7 35 Hình 1-11: Kết quả sau khi click vào Internet 36 Hình 1-12: Kết quả của ví dụ 9 37 Hình 1-13: Kết quả sau khi click vào Internet 37 Hình 2-1: Kết quả ví dụ 1 (trước khi kích vào liên kết) 41 Hình 2-2: Kết quả ví dụ 1 sau khi click vào liên kết 42 Hình 2-3: Kết quả của ví dụ 2 43
Hình 2-4: Kết quả của ví dụ 2 sau khi kích vào Overview 43 Hình 2-5: Kết quả của ví dụ 2 sau khi kích vào Benefits 44 Hình 2-6: Kết quả của ví dụ 2 sau khi kích vào Features 44 Hình 2-7: Kết quả của Ví dụ 2 sau khi kích vào Technical Specifications 45 Hình 2-8: Kết quả của ví dụ 3 45 Hình 2-9: Kết quả của ví dụ 4 46 Hình 3-1: Kết quả ví dụ 1 48 Hình 3-2: Kết quả ví dụ 2 49 Hình 3-3: Kết quả ví dụ 3 50 Hình 3-4: Kết quả ví dụ 4 51 Hình 3-5: Kết quả ví dụ 5 52 Hình 3-6: Kết quả ví dụ 6 55 Hình 3-7: Kết quả ví dụ 7 56 Hình 3-8: Kết quả ví dụ 8 58 Hình 3-9: Kết quả ví dụ 9 59 Hình 3-10: Kết quả ví dụ 10 60 Hình 3-11: Kết quả ví dụ 11 61 Hình 3-12: Kết quả ví dụ 12 62 Hình 3-13: Kết quả của ví dụ 13 63 Hình 3-14: Kết quả của ví dụ 14 64 Hình 3-15: Kết quả ví dụ 15 66 Hình 3-16: Kết quả ví dụ 16 (dòng văn bản giải thích hiển thị khi di chuyển chuột vào ảnh) 67 Hình 4-1: Kết quả ví dụ 1 70 Hình 4-2: Kết quả ví dụ 2 71 Hình 4-3: Kết quả ví dụ 3 72
Hình 4-4: Kết quả ví dụ 4 72 Hình 4-5: Kết quả ví dụ 5 74 Hình 4-6: Kết quả ví dụ 6 75 Hình 4-7: Kết quả ví dụ 7 75 Hình 5-1: Mô hình của bảng 77 Hình 5-2: Kết quả của ví dụ 1 77 Hình 5-3: Kết quả của ví dụ 2 78 Hình 5-4: Kết quả của ví dụ 3 79 Hình 5-5: Kết quả của ví dụ 4 80 Hình 5-6: Kết quả của ví dụ 5 81 Hình 5-7: Kết quả của ví dụ 6 82 Hình 5-8: Kết quả của ví dụ 7 83 Hình 5-9: Kết quả của ví dụ 8 84 Hình 5-10 Kết quả của ví dụ 9 85 Hình 5-11: Kết quả của ví dụ 10 87 Hình 5-12: Kết quả của ví dụ 11 88 Hình 5-13: Kết quả của ví dụ 12 89 Hình 5-14: Kết quả của ví dụ 13 90 Hình 5-15: Kết quả của ví dụ 14 91 Hình 5-16: Kết quả của ví dụ 15 92 Hình 6-1: Kết quả ví dụ 1 95 Hình 6-2: Kết quả ví dụ 2 95 Hình 6-3: 96 Hình 6-4: 97 Hình 7-1: Kết quả ví dụ 1 102
Hình 7-2: Kết quả ví dụ 2 104 Hình 7-3: Kết quả ví dụ 3 105 Hình 7-4: Kết quả ví dụ 4 106 Hình 7-5: Kết quả ví dụ 5 107 Hình 7-6: Kết quả ví dụ 6 108 Hình 7-7: Khung trong trang Web 110 Hình 7-8: Kết quả ví dụ 7 111 Hình 7-9: Kết quả ví dụ 8 112 Hình 7-10: Kết quả ví dụ 9 113 Hình 7-11: Kết quả ví dụ 10 113 Hình 7-12: Kết quả ví dụ 11 114 Hình 7-13 Kết quả ví dụ 12 115 Hình 7-14:: Kết quả ví dụ 14 (trình duyệt có hỗ trợ khung) 116 Hình 8-1 Kết quả ví dụ 1 120 Hình 8-2: Kết quả ví dụ 2 122 Hình 8-3: 123 Hình 9-1: Kết quả ví dụ 1 127 Hình 9-2: Kết quả ví dụ 2 130 Hình 9-3: Kết quả Ví dụ 3 131 Hình 9-4: Kết quả ví dụ 4 132 Hình 9-5: Kết quả ví dụ 5 133 Hình 9-6: Kết quả ví dụ 6 134 Hình 9-7: Kết quả ví dụ 7 135 Hình 9-8: Kết quả ví dụ 8 136 Hình 9-9: Kết quả ví dụ 9 137
Hình 9-10: Kết quả ví dụ 10 139 Hình 9-11: Error! Bookmark not defined. Hình 10-1: Kết quả của Ví dụ 1 141 Hình 10-2: Kết quả của Ví dụ 2 141 Hình 10-3: Kết quả của ví dụ 3 142 Hình 10-4: Kết quả của Ví dụ 4 143 Hình 10-5: Kết quả Ví dụ 5 143 Hình 10-6: 144 Hình 10-7: 144 Hình 10-8: 145 Hình 11-1: Dùng JavaScript 149 Hình 11-2: Dùng JavaScript – File ngoài 150 Hình 11-3: Dùng các biểu thức JavaScript 151 Hình 11-4: Dùng JavaScript - Alert 152 Hình 11-5: Dùng JavaScript – Confirm, Alert và Write 152 Hình 11-6: Các biến JavaScript: 154 Hình 11-7: JavaScript: variables (1) 155 Hình 11-8: JavaScript: Ví dụ NaN 156 Hình 11-9:JavaScript: Các toán tử số học 158 Hình 11-10: JavaScript: Toán tử logic 160 Hình 11-11: JavaScript: Toán tử Logic 161 Hình 11-13: JavaScript: Toán tử typeof 161 Hình 11-14: JavaScript: Biểu thức 166 Hình 11-15JavaScript: Các biểu thức (1) 166 Hình 11-16: JavaScript: Mảng 168
Hình 11-17JavaScript: Sắp xếp các mảng (Sorting Arrays) 169 Hình 11-19: Mảng hai chiều (Two dimensional Array) 170 Hình 11-20: Vòng lặp for 173 Hình 11-19: For in loop 174 Hình 11-23: Định nghĩa và gọi một hàm 176 Hình 11-21: Giá trị trả về hàm 177 Hình 11-22 179 Hình 12-1: Kết quả của ví dụ 1 180 Hình 12-2: Kết quả của ví dụ 2 181 Hình 12-3: Kết quả của ví dụ 2 (sau khi nhấn vào nút Check) 181 Hình 12-4: 183 Hình 13-1: Cây phân cấp đối tượng 184 Hình 13-2: Kết quả của ví dụ 1 185 Hình 13-3: Kết quả của ví dụ 2 186 Hình 13-4: Kết quả của ví dụ 3 187 Hình 13-5: Kết quả của ví dụ 4 188 Hình 13-6: Kết quả của ví dụ 5 189 Hình 13-7: Kết quả của ví dụ 6 189 Hình 13-8: Kết quả của ví dụ 7 191 Hình 13-9: Kết quả của ví dụ 8 192 Hình 13-10: Kết quả của ví dụ 9 193 Hình 13-11: Kết quả của ví dụ 9 (sau khi nhấn nút lệnh) 193 Hình 13-12: Kết quả của ví dụ 10 196 Hình 13-13: Kết quả của ví dụ 11 196 Hình 14-1: Kết quả ví dụ 1 198
Hình 14-2: Kết quả của ví dụ 2 199 Hình 14-3: Kết quả ví dụ 3 199 Hình 15-1: Kết quả của ví dụ 1 202 Hình 15-2 Kết quả của ví dụ 2(1) 203 Hình 15-3: Kết quả của ví dụ 2(2) 203 Hình 15-4: Kết quả của ví dụ 3 – Blur (hình trái) and focus (hình phải) 204 Hình 15-5: Kết quả của ví dụ 4 205 Hình 15-6: Kết quả của ví dụ 5 206 Hình 15-7: Kết quả của ví dụ 6 207 Hình 15-8: Kết quả của ví dụ 7 207 Hình 15-9: Kết quả ví dụ 8 209 Hình 15-10: Đối tượng trình duyệt IE 210 Hình 15-12: Đối tượng trình duyệt Netscape 212 Hình 15-13: Error! Bookmark not defined. Hình 15-14: Kết quả sau khi click vào Internet 214 Hình 15-15: Kết quả sau khi click vào Internet 215 Hình 15-16: Kết quả sau khi click vào Internet 215 Hình 15-17: Kết quả sau khi click vào Internet 216 Hình 16-1: Kết quả của Ví dụ 1 217 Hình 16-2: Kết quả của Ví dụ 2 218 Hình 16-3: Kết quả của ví dụ 3 219 Hình 16-4: Kết quả của Ví dụ 4 220 Hình 16-5: Kết quả của Ví dụ 5 221 Hình 16-6: 221 Hình 16-7: 222
Hình 16-8: 222 Hình 17-1: Kết quả của ví dụ 1 224 Hình 17-2: Kết quả ví dụ 1 (sau khi nhấp vào nút Submit) 224 Hình 17-3: Kết quả của ví dụ 2 225 Hình 17-4: Kết quả của ví dụ 2 (khi nhấp vào hộp văn bản (textbox)) 226 Hình 17-5: Kết quả của ví dụ 2 (Sau khi nhập văn bản vào textbox và nhấn phím tab) 226 Hình 17-6: Kết quả của ví dụ 2 (Sau khi nhấp chuột bên ngoài textbox) 227 Hình 17-7: Kết quả của ví dụ 3 228 Hình 17-8: Kết quả của ví dụ 3 (sau khi nhập văn bản vào trường text đầu tiên) 228 Hình 17-9: Kết quả của ví dụ 3 (sau khi nhấp vào nút copy) 228 Hình 17-10: kết quả của ví dụ 4 229 Hình 17-11: kết quả của ví dụ 5 230 Hình 17-12: Kết quả của ví dụ 6 231 Hình 17-13: kết quả của ví dụ 7 233 Hình 17-14: Kết quả của ví dụ 7 (sau khi gửi form) 234 Hình 17-15 235 Hình 18-1: Minh hoạ ví dụ 1 236 Hình 18-2: Minh hoạ ví dụ 2 238 Hình 18-3: Kết quả ví dụ Example 2 (sau khi click chuột vào nút Display) 238 Hình 18-4: Kết quả ví dụ 3 (phần thứ nhất) 240 Hình 18-5: Kết quả ví dụ 3 (phần hai) 241 Hình 18-6: 242 Hình 18-7: 242 Hình 18-8: 243 Hình 18-9: 243
Hình 18-10: 244 Hình 18-11 245 Chương 1. Giới thiệu và siêu liên kết 1.1. Mục tiêu bài học: Kết thúc chương này, bạn có thể: · Mô tả về Internet · Mô tả về HTML · Viết một tài liệu HTML đơn giản · Sử dụng siêu liên kết trong tài liệu HTML · Sử dụng thẻ · Sử dụng các ký tự đặc biệt trong tài liệu HTML 1.2. Giới thiệu “Internet”,“World Wide Web”, và “Web page” không chỉ còn là các thuật ngữ.Giờ đây, các thuật ngữ này đã trở thành hiện thực. Internet là mạng máy tính lớn nhất trên thế giới, được xem như là mạng của các mạng. World Wide Web là một tập con của Internet. World Wide Web gồm các Web Servers có mặt khắp mọi nơi trên thế giới. Các Web server chứa thông tin mà bất kỳ người dùng nào trên thế giới cũng có thể truy cập được. Các thông tin đó được lưu trữ dưới dạng các trang Web. Trong phần này, chúng ta sẽ học về Ngôn ngữ đánh dấu siêu văn bản (HTML), đây là một phần quan trọng trong lãnh vực thiết kế và phát triển thế giới Web. 1.1.1. Giới thiệu Internet Mạng là một nhóm các máy tính kết nối với nhau. Internet là mạng của các mạng. Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất cả các máy tính trên thế giới. Hình 1-1: Internet World Wide Web là một tập con của Internet. Nó bắt đầu như là đề án nghiên cứu cấp quốc gia tại phòng nghiên cứu CERN ở Thụy Sĩ. Ngày nay, nó cung cấp thông tin cho người dùng trên toàn thế giới. WWW hoạt động dựa trên 3 cơ chế để đưa các 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 các giao thức này để truy cập tài nguyên trên Web. HyperText Transfer Protocol(HTTP) là giao thức được WWW sử dụng. · Địa chỉ: WWW tuân theo một cách thức đặt tên thống nhất để truy cập vào các tài nguyên trên Web. URL được sử dụng để nhận dạng các trang và các tài nguyên trên Web. · HTML: Ngôn ngữ đánh dấu siêu văn bản (HTML) được sử dụng để tạo các tài liệu có thể truy cập trên Web. Tài liệu HTML được tạo ra bằng cách sử dụng các thẻ và các phần tử của HTML. File được lưu trên Web server với đuôi .htm hoặc .html. Khi bạn sử dụng trình duyệt để yêu cầu một số thông tin nào đó, Web server sẽ đáp ứng các yêu cầu đó. Nó gửi thông tin được yêu cầu đến trình duyệt dưới dạng các trang web. Trình duyệt định dạng thông tin do máy chủ gửi về và hiển thi chúng. Hình 1-2: Trình duyệt yêu cầu đến máy chủ 1.1.2. Giới thiệu HTML Ngôn ngữ đánh dấu siêu văn bản chỉ rõ một trang Web được hiển thị như thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử HTML, bạn có thể: · Điều khiển hình thức và nội dung của trang · Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu HTML · Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch · Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX và các Java Applet vào tài liệu HTML Tài liệu HTML tạo thành mã nguồn của trang Web. Khi được xem trên trình soạn thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang web hiển thị như thế nào. Trình duyệt đọc các file có đuôi .htm hay .html và hiển thị trang web đó theo các lệnh có trong đó. Ví dụ, theo cú pháp HTML dưới đây sẽ hiển thị thông điệp “My first HTML document” Ví dụ 1: Welcome to HTML My first HTML document
Trình duyệt thông dịch những lệnh này và hiển thị trang web như hình 1.3 Hình 1-3: Kết quả ví dụ 1 1.1.2.1 HTML Development Tài liệu HTML được hiển thị trên trình duyệt. Vậy trình duyệt là gì ? Trình duyệt là một ứng dụng được cài đặt trên máy khách. Trình duyệt đọc mã nguồn HTML và hiển thị trang theo các lệnh trong đó. Trình duyệt được sử dụng để xem các trang Web và điều hướng.Trình duyệt được biết đến sớm nhất là Mosaic, được phát triển bởi 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 trên Internet. Netscape’s Navigator và Microsoft’s Internet Explorer là 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 bởi vì nó có giao diện đồ họa với việc trỏ và kích chuột. Để tạo một tài liệu nguồn,bạn phải cần một trình soạn thảo HTML. Ngày nay, có nhiều trình soạn thảo đang được sử dụng: Microsoft FrontPage là một công cụ tổng hợp được dùng để tạo, thiết kế và hiệu chỉnh các trang Web. Chúng ta cũng có thể thêm văn bản, hình ảnh , bảng và những thành phần HTML khác vào trang. Thêm vào đó, một biểu mẫu cũng có thể được tạo ra bằng FrontPage. Một khi chúng ta tạo ra giao diện cho trang web, FrontPage tự động tạo mã HTML cần thiết. Chúng ta cũng có thể dùng Notepad để tạo tài liệu HTML. Để xem được tài liệu trên trình duyệt bạn phải lưu nó với đuôi là .htm hay .html. Các lệnh HTML được gọi là các thẻ. Các thẻ này được dùng để điều khiển nội dung và hình thức trình bày của tài liệu HTML. Thẻ mở (“ ”), chỉ ra sự bắt đầu và kết thúc của một lệnh HTML. Ví dụ, thẻ HTML được sử dụng đểđánh dấu sự bắt đầu và kết thúc của tài liệu HTML . . . Chú ý rằng các thẻ không phân biệt chữ hoa và chữ thường, vì thế bạn có thể sử dụng thay cho Thẻ HTML bao gồm: · Phần tử: nhận dạng thẻ · Thuộc tính: Mô tả thẻ · Value: giá trị được thiết lập cho thuộc tính Ví dụ:
Trong ví dụ trên, BODY là phần tử, BGCOLOR(nền) là thuộc tính và “lavender” là giá trị. Khi cú pháp HTML được thực hiện, màu nền cho cả trang được thiết lập là màu “lavender”. 1.1.2.2 Cấu trúc của một tài liệu HTML Một tài liệu HTML gồm 3 phần cơ bản: · Phần HTML: Mọi tài liệu HTML phải bắt đầu bằng thẻ mở HTML và kết thúc bằng thẻ đóng HTML . Thẻ HTML báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu HTML · Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ và kết thúc bởi thẻ . Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web. Tiêu đề nằm trong thẻ TITLE, bắt đầu bằng thẻ và kết thúc là thẻ . Tiêu đề là phần khá quan trọng. Các mốc được dùng để đánh dấu một web site. Trình duyệt sử dụng tiêu đề để lưu trữ các mốc này. Do đó, khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm. · Phần thân: phần này nằm sau phần tiêu đề. Phầ̀n thân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân bắt đầu bằng thẻ và kết thúc bằng thẻ Ví dụ 2: Welcome to the world of HTML This is going to be real fun Hình 1-4: Kết quả của ví dụ 2 1.1.2.2.1. Đoạn Bạn có chú ý đến thẻ trong ví dụ 2 không? Thẻ để trình bày một đoạn. Khi viết một bài báo hay một bài luận, bạn nhóm nội dung thành một loạt các đoạn. Mục đích là nhóm các ý tưởng logic lại với nhau và áp dụng một số định dạng cho nội dung. Trong một tài liệu HTML, nội dung có thể được nhóm thành các đoạn. Thẻ đoạn được sử dụng để đánh dấu sự bắt đầu của một đoạn mới. Ví dụ 3
Welcome to HTML This is going to be real fun Another paragraph element Hình 1-5: Kết quả của ví dụ 3 Thẻ đóng là không bắt buộc. Thẻ kế tiếp sẽ tự động bắt đầu một đoạn mới. 1.1.2.2.2. Các thẻ ngắt Phần tử được sử dụng để ngắt dòng trong tài liệu HTML. Thẻ bổ sung một ký tự xuống dòng tại vị trí của thẻ. Ví dụ 4: Welcome to HTML This is going to be real fun Another paragraph element
Hình 1-6: Kết quả của ví dụ 4 1.1.2.2.3. Chọn canh lề Thuộc tính align được sử dụng để canh lề cho các phần tử HTML trong trang Web. Chúng ta có thể canh lề văn bản, các đối tượng, hình ảnh, các đoạn, các phân đoạn, Sau đây, bạn sẽ học cách canh lề văn bản. Thuộc tính align gồm các giá trị sau: Value Description Left Văn bản được canh lề trái Center Văn bản được canh giữa Right Văn bản được canh phải Justify Văn bản được canh đều hai bên Bảng 1-1: Thuộc tính align Canh lề được mặc định dựa vào hướng của văn bản. Nếu hướng văn bản là từ trái sang phải thì mặc định là trái. Ví dụ 5 Learning HTML This is good fun
Hình 1-7: Kết quả của ví dụ 5 1.1.2.3 Sử dụng thẻ Phần tiêu đề cũng chứa phần tử META. Phần tử này cung cấp thông tin về trang web của bạn. Nó gồm tên tác giả, tên phần mềm dùng để viết trang đó, tên công ty, thông tin liên lạc Phần tử META sử dụng sự kết hợp giữa thuộc tính và giá trị. Ví dụ, để chỉ Graham Browne là tác giả, người ta sử dụng phần tử META như sau: Tác giả của tài liệu là “Graham Browne” Thuộc tính http-equiv có thể được sử dụng để thay thế thuộc tính name. Máy chủ HTTP sử dụng thuộc tính này để tạo ra một đầu đáp ứng HTTP (HTTP response header). Đầu đáp ứng được truyền đến trình duyệt để nhận dạng dữ liệu. Nếu trình duyệt hiểu được đầu đáp ứng này, nó sẽ tiến hành các hành động đặc biệt đối với đầu đáp ứng đó. Ví dụ, sẽ sinh ra một đầu đáp ứng HTTP như sau: Expires: Mon, 15 Sep 2003 14:25:27 GMT Do vậy, nếu tài liệu đã lưu lại, HTTP sẽ biết khi nào truy xuất một bản sao của tài liệu tương ứng. 1.1.2.4 Sử dụng ký tự đặc biệt trong tài liệu HTML Bạn có thể chèn các ký tự đặc biệt vào văn bản của tài liệu HTML. Để đảm bảo trình duyệt không nhầm chúng với thẻ HTML, bạn phải gán mã định dạng cho các ký tự đặc biệt này. Ký tự đặc Mã định Ví dụ biệt dạng Lớn hơn (>) > Learning HTML If A > B Then A = A + 1 The above statement used special characters Nhỏ hơn ( Learning HTML
If A < B Then A = A + 1 The above statement used special characters Trích dẫn(““) " Learning HTML " To be or not to be ? " That is the question Ký tự “&” & Learning HTML William & Graham went to the fair Bảng 1-2: Ký tự đặc biệt trong HTML 1.1.2.5 Sử dụng các siêu liên kết Siêu liên kết là một phần tử bên trong tài liệu mà liên kết đến một vị trí khác trong cùng tài liệu đó hoặc đến một tài liệu hoàn toàn khác. Chẳng hạn, khi ta kích vào siêu liên kết sẽ nhảy đến liên kết cần đến. Các siêu liên kết là thành phần quan trọng nhất của hệ thống siêu văn bản 1.1.2.5.1. Giới thiệu siêu liên kết và URL Khả năng chính của HTML là hỗ trợ siêu liên kết. Một siêu liên kết, hay nói ngắn gọn là một liên kết, là sự kết nối đến tài liệu hay file khác (đồ họa, âm thanh, video) hoặc ngay cả đến một phần khác trong cùng tài liệu đó. Khi kích vào siêu liên kết, người dùng được đưa đến địa chỉ URL mà chúng ta chỉ rõ trong liên kết. · Một phần khác trong cùng tài liệu · Một tài liệu khác · Một phần trong tài liệu khác · Các file khác – hình ảnh, âm thanh, trích đoạn video · Vị trí hoặc máy chủ khác Các liên kết có thể là liên kết trong hoặc liên kết ngoài · Liên kết trong là liên kết kết nối đến các phần trong cùng tài liệu hoặc cùng một web site · Liên kết ngoài là liên kết kết nối đến các trang trên các web site khác hoặc máy chủ khác. Để tạo siêu liên kết, chúng ta cần phải xác định hai thành phần: 1. Địa chỉ đầy đủ hoặc URL của file được kết nối 2. Điểm nóng cung cấp cho liên kết. Điểm nóng này có thể là một dòng văn bản, thậm chí là một ảnh.
Khi người dùng kích vào điểm nóng, trình duyệt đọc địa chỉ được chỉ ra trong URL và “nhảy” đến vị trí mới. Mỗi nguồn tài nguyên trên Web có một địa chỉ duy nhất Ví dụ, 207.46.130.149 là địa chỉ web site của Micorsoft. Giờ đây, để nhớ các con số này rất khó và dễ nhầm lẫn. Vì vậy, người ta sử dụng các URL. URL là một chuỗi cung cấp địa chỉ Internet của web site hay tài nguyên trên World Wide Web. Định dạng đặc trưng là www.nameofsite.typeofsite.contrycode Trong đó Nameofsite: tên của site Typeofsite: kiểu của site Contrycode: mã nước] Ví dụ, 216.239.33.101 có thể được biểu diễn bằng URL là www.google.com URL cũng nhận biết được giao thức mà site hay tài nguyên được truy nhập. Dạng URL thông thường nhất là “http”, nó cung cấp địa chỉ Internet của một trang Web. Một vài dạng URL khác là “gopher”, nó cung cấp địa chỉ Internet của một thư mục Gopher, và “ftp”, cung cấp vị trí của một tài nguyên FTP trên mạng. URL cũng có thể tham chiếu đến một vị trí trong một tài nguyên. Ví dụ, bạn có thể tạo liên kết đến một chủ đề trong cùng một tài liệu. Trong trường hợp đó, định danh đoạn được sử dụng ở phần cuối của URL. Định dạng là, giao thức: tên của site / tài liệu chính #định danh đoạn Có hai dạng URL: · URL tuyệt đối – là địa chỉ Internet đầy đủ của trang hoặc file, bao gồm giao thức, vị trí mạng, đường dẫn tùy chọn và tên file. Ví dụ, là một địa chỉ URL tuyệt đối. · URL tương đối – là một URL có một hoặc nhiều phần bị thiếu. Trình duyệt lấy thông tin bị thiếu từ trang chứa URL đó. Ví dụ, nếu giao thức bị thiếu, trình duyệt sử dụng giao thức của trang hiện thời. 1.1.2.5.2. Sử dụng siêu liên kết Thẻ Trong đó, 1. Giao thức (protocol) – Đây là loại giao thức. Một số giao thức thường dùng: · http – giao thức truyền siêu văn bản · telnet – mở một phiên telnet · gopher – tìm kiếm file · ftp – giao thức truyền file · mailto – gửi thư điện tử 2. Host.domain – Đây là địa chỉ Internet của máy chủ 3. Port - Cổng phục vụ của máy chủ đích
4. HyperText – Đây là văn bản hay hình ảnh mà người dùng cần nhấp vào để kích hoạt liên kết 1.1.2.5.3. Liên kết đến những tài liệu khác Giả sử có hai tài liệu HTML trên đĩa cứng cục bộ, Doc1.htm và Doc2.htm. Để tạo một liên kết từ Doc1.html đến Doc2.htm Ví dụ 6: Using links This page is all about creating links to documents. Hình 1-8: Kết quả của ví dụ 6 Khi người dùng “nhảy” đến một tài liệu khác, bạn nên cung cấp cách để quay trở lại trang chủ hoặc định hướng đến một file khác. Ví dụ 7: Document 2 This is document 2. This page is displayed when you click the hyperlink in Document 1
Hình 1-9: Kết quả của ví dụ 7 Chú ý là các liên kết được gạch chân. Trình duyệt tự động gạch chân các liên kết. Nó cũng thay đổi hình dáng con trỏ chuột khi người sử dụng di chuyển chuột vào liên kết. Ở ví dụ trên, các file nằm trong cùng một thư mục, vì vậy chỉ cần chỉ ra tên file trong thông số HREF là đủ. Tuy nhiên, để liên kết đến các file ở thư mục khác, cần phải cung cấp đường dẫn tuyệt đối hay đường dẫn tương đối. · Đường dẫn tuyệt đối chỉ ra đường dẫn đầy đủ từ thư mục gốc đến file. Ví dụ, C:\mydirectory\html examples\ Doc2.htm · Đường dẫn tương đối chỉ ra vị trí liên quan của file với vị trí file hiện tại. Ví dụ, nếu thư mục hiện hành là mydirectory thì đường dẫn sẽ là, Vì vậy, nếu muốn liên kết các tài liệu không liên quan với nhau thì ta nên dùng đường dẫn tuyệt đối. Tuy nhiên, nếu ta có một nhóm tài liệu có liên quan với nhau, chẳng hạn phần trợ giúp trong HTML, thì ta nên sử dụng đường dẫn tương đối cho các tài liệu trong nhóm và đường dẫn tuyệt đối cho các tài liệu không liên quan trực tiếp đến chủ đề. Khi đó người dùng có thể cài đặt phần trợ giúp này trong thư mục mình chọn và nó vẫn hoạt động. 1.1.2.5.4. Liên kết đến các phần trong cùng một tài liệu Thẻ neo Bạn không phải sử dụng bất kỳ văn bản nào để đánh dấu điểm neo. Để dùng, ta sử dụng vạch dấu (marker) trong thông số HREF như sau: Dấu # ở trước tên của siêu liên kết để báo cho trình duyệt biết rằng liên kết này liên kết đến một điểm được đặt tên trong tài liệu. Khi không có tài liệu nào được chỉ ra trước ký tự #, trình duyệt hiểu rằng liên kết này nằm trong cùng tài liệu. Ví dụ 8:
Using Links The Internet is a network of networks. That is, computer networks are linked to other networks, spanning countries and today the globe. The TCP/IP transfer protocol provides the bindings that connect all these computers the world over. Hyper Text Markup Language is the standard language that the Web uses for creating and recognizing documents. Although not a subset of, it is loosely related to the Standard Generalized Markup Language (SGML). SGML is a method for representing document formatting languages. A basic rule is that of unity and variety. That is, everything should fit together as a unit, but at the same time there is enough variety to keep things interesting. Consistency creates and reinforces the unique identity of a site. Colors, fonts, column layout and other design elements should be consistent throughout every section of the site. Hình 1-10: Kết quả của ví dụ 7
Hình 1-11: Kết quả sau khi click vào Internet 1.1.2.5.5. Liên kết đến một điểm xác định ở một tài liệu khác Bây giờ chúng ta đã biết cách sử dụng các vạch dấu trong cùng một tài liệu, hãy thử “nhảy” đến một vị trí trên một tài liệu khác. Để “nhảy” đến một điểm trên tài liệu khác, chúng ta cần phải chỉ ra tên của tài liệu khi chúng ta tạo vạch dấu. Trước tiên trình duyệt sẽ đọc tên tài liệu và mở tài liệu đó. Sau đó nó sẽ đọc vạch dấu và di chuyển đến điểm được đánh dấu. Ví dụ 9 Main document
Hình 1-12: Kết quả của ví dụ 9 Hình 1-13: Kết quả sau khi click vào Internet Chú ý sự giống nhau giữa hình 1.13 vào hình 1.11 1.1.2.6 Sử dụng e-mail Nếu muốn người sử dụng gửi được e-mail, chúng ta có thể đưa một đặc tính vào trong trang Web và cho phép họ gửi e-mail từ trình duyệt. Tất cả những gì chúng ta cần làm là chèn giá trị mailto vào trong thẻ liên kết. 1.1.2.7 Điều hướng quanh Web site Dù web site có lôi cuốn đến đâu, nếu nó không có một lược đồ điều hướng đơn giản thì người dùng cũng sẽ mất phương hướng ngay. Một số trong số họ có thể sẽ không bao giờ quay lại. Lược đồ điều hướng trong mỗi site là khác nhau. Tuy nhiên có một số nguyên tắc cơ bản mà bạn cần nhớ: · Xác định nội dung của web site · Tạo một lược đồ điều hướng để giúp người dùng đi đến phần cần đến một cách nhanh chóng · Cung cấp các chức năng tìm kiếm thông tin · Có nhiều cách để tổ chức một web site
· Trình bày tuyến tính – Cách này theo cấu trúc tuyến tính. Có một chuỗi liên kết liên tục giữa các trang. Mỗi trang có liên kết đến trang trước và trang sau. Trang cuối có liên kết đến trang đầu. Định dạng này được dùng khi chúng ta muốn trình bày thông tin liên tục. Ví dụ, các chương trong cuốn sách hoặc các slide của một bài trình bày mà yêu cầu người dùng đọc thông tin theo trình tự liên tiếp nhau. · Trình bày theo phân cấp: Đây là cách trình bày thông thường nhất được sử dụng trong thiết kế Web. Trang chủ liên kết với nhiều trang khác. Người dùng có thể chọn một liên kết và “nhảy” đến trang cần đến. Mỗi trang đều có liên kết về trang chủ. · Bản đồ ảnh – Một số người thấy cách trình bày trực quan thì dễ hiểu hơn. Vì vậy, bản đồ ảnh hay bản đồ site được đưa vào các trang chủ. Khi người dùng kích vào các điểm nóng thì tài liệu liên quan được hiển thị. Khi đã quyết định một lược đồ điều hướng, đây là lúc để thiết kế tài liệu. Có một số nguyên tắc mà bạn cần ghi nhớ: · Siêu liên kết nên rõ ràng. Từ nên được gạch chân và có màu xanh, bởi vì trên Web, màu xanh được quy ước là siêu liên kết. Siêu liên kết thường xuất hiện ở cuối trang. Nếu chúng xuất hiện ở giữa đoạn văn bản, có thể làm người đọc không tập trung vào đề tài. · Các trang con – nên có một thanh menu hoặc thanh điều hướng, nếu không người đọc có thể không thấy các trang chính. Nếu người dùng kích vào một biểu tượng bất kỳ trên thanh điều hướng thì họ sẽ nhảy từ trang hiện thời đến trang mới · Luôn có một bảng mục lục để người dùng nhảy sang một đề tài nào đó. Bảng mục lục (TOC) được hiển thị ở cuối trang. Người dùng có thể chọn một đề tài nào đó để nhảy đến trang cần đến · Luôn có nút “Back” và “Forward” trong trang để người dùng có thể điều hướng đến trang cần đến. Trình duyệt có cung cấp các chọn lựa này, nhưng nó sử dụng các trang trong danh sách history mà có thể không phải làcác trang trong Web site. 1.3. Tóm tắt bài học · Internet là mạng của các mạng · Giao thức TCP/IP cung cấp các liên kết mà kết nối tất cả các máy tính trên thế giới WWW là một tập con của Internet · Ngôn ngữ đánh dấu siêu văn bản (HTML) được dùng để tạo ra tài liệu có thể truy cập trên Web · Trình duyệt đọc mã nguồn HTML và hiển thị trang theo các lệnh trong đó. · Lệnh HTML được gọi là thẻ. Thẻ được sử dụng để điều khiển nội dung và hình thức của tài liệu HTML · Trong một tài liệu HTML, nội dung có thể được nhóm vào các đoạn. Thẻ đoạn được dùng đển đánh dấu bắt đầu một đoạn mới · Phần tử được dùng để ngắt dòng trong tài liệu HTML · Thuộc tính canh lề được sử dụng để canh lề cho các phần tử HTML trong trang Web · Phần tử META cung cấp thông tin trên trang web. Nó sử dụng sự kết hợp giữa thuộc tính và giá trị.
· Siêu liên kết là một phần tử bên trong tài liệu mà liên kết đến một vị trí khác trong cùng tài liệu đó hoặc đến một tài liệu hoàn toàn khác · Liên kết trong là một liên kết đến một phần bên trong cùng một tài liệu hoặc trong cùng một web site · Liên kết ngoài là những liên kết đến các trang web trên các web site hoặc các máy chủ khác · Thẻ neo được sử dụng để xác định văn bản hay hình ảnh nào sẽ dùng làm siêu liên kết trong tài liệu HTML. Thuộc tính HREF (tham chiếu siêu văn bản) được dùng để chỉ địa chỉ hay URL của tài liệu hoặc file được liên kết. 1.4. Ôn tập 1. Điền vào chỗ trống: a. ___WWW___là một tập con của Internet b. Giao thức nối các mạng trên Internet gọi là ___HTP/IP___. c. __HTML___ là ngôn ngữ chuẩn mà Web dùng để tạo và nhận dạng các tài liệu d. Lệnh HTML được gọi là __thẻ___. e. ___ được dùng để đánh dấu sự kết thức của tài liệu HTML f. ___nội dung của tài liệu___ là các phần tử HTML xuất hiện trong BODY g. __thẻ neo ___ chỉ một liên kết đến site hay trang web khác h. URL là viết tắt của ___Uniform Resoun Location___. i. Một ___ được sử dụng để đánh dấu một phần trong một tài liệu HTML 2. Các câu sau đây Đúng hay Sai: a. SGML là cách trình bày các ngôn ngữ định dạng văn bản b. Trình duyệt được sử dụng để tạo tài liệu HTML c. Các thẻ HTML phân biệt chữ hoa và chữ thường sai d. Phần tử META được dùng để xác định thông tin về tài liệu HTML e. Phần tử P mặc định bắt đầu một dòng mới f. Một liên kết ngoài là liên kết đến một phần trong tài liệu trên web site khác g. URL tương đối xác định đường dẫn đầy đủ đến tài nguyên trên Web sai h. Giao thức gopher được sử dụng để tìm kiếm file trên Web i. Bạn có thể tạo các liên kết sử dụng thuộc tính id của một phần tử 1.5. Tự thực hành 1. Tạo một trang Web với tiêu đề là “Using Paragraphs”. Tạo hai đoạn văn bản. Hiển thị một tiêu đề mức 5 giữa hai đoạn 2. Tạo hai tài liệu HTML, a.htm và b.htm. Tạo một liên kết từ a.htm đết b.htm. Tạo một liên kết trở lại từ b.htm về a.htm. 3. Tạo một tài liệu HTML với văn bản sau: Internet The Internet is a network of networks. That is, computer networks are linked to other networks, spanning countries. The TCP/IP transfer protocol provides the bindings that connect all these computers the world over. Layout
A web page is not a printed page. That is, the guidelines that are applied to print may not apply to a web page. Avoid making the reader scan too much of the screen while reading the page. After a while it puts a strain on the eyes, and the reader may lose interest. Text should be contained within a few inches width. Linear layout Linear layout follows a linear structure. There is a sequential link between the pages. Each page has a link to the previous and next page. The last page has a link to the first page. This format is used when you are presenting sequential information. For example, chapters of a book or slides of a presentation which require the user to read the information in sequential order. Pathnames Absolute pathnames specify the complete path to the file from the root directory. For example, C:\mydirectory\ htmlexamples\Doc2.htm. Relative pathnames specify the location of the file relative to the location of the current file. For example, if the current directory is mydirectory, then the pathname will be Tạo liên kết trong đến các chủ đề trong tài liệu Chương 2. Giới thiệu và các siêu liên kết 2.1. Mục tiêu bài học: Kết thúcchương này, bạn có thể: · Viết những tài liệu HTML đơn giản · Sử dụng các siêu liên kết (Hyperlinks) · Sử dụng thẻ · Sử dụng các ký tự đặc biệt trong HTML Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận. 1. Tạo thư mục HTML-DHTML-JS-Examples trong ổ đĩa D:\ và lưu tất cả các file .html chỉ trong thư mục này. (Nếu không có đĩa D, hãy tạo trong ổ đĩa C:\) 2. Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”. 3. Gõ đoạn mã ở ví dụ 1 4. Kích vào File chọn Save As 5. Lưu file với đuôi .html trong thư mục D:\HTML-DHTML-JS-Examples. Chọn tên thích hợp, ví dụ , lab21 (Lab21 để biết đây là ví dụ 1 trong bài Lab 2) Hoặc 6. Lưu nó trong thư mục đăng nhập của mình 7. Chạy Internet Explorer. 8. Kích vào File → Open, chọn Browse và chọn file từ thư mục D:\HTML-DHTML-JS- Examples 2.2. Phần I – Thực hiện trong 1h30’ đầu: Ví dụ 1: Đoạn mã HTML minh họa một thẻ liên kết First Linked Document
TO OPEN THE NEW DOCUMENT Chú ý: Trước khi chạy đoạn mã này thì file TEST.HTML phải tồn tại. Nội dung của nó như sau: (Mở một file Notepad mới gõ nội dung và lưu với tên file TEST.HTML trong cùng thư mục của file nguồn) A sample HTML Document This is a sample html document Cú pháp: Nó sẽ tạo “CLICK HERE” như một liên kết và khi kích vào liên kết này nó sẽ đưa bạn đến trang TEST.HTML Kết quả của ví dụ 1 như hình 2.1 Hình 2-1: Kết quả ví dụ 1 (trước khi kích vào liên kết)
Hình 2-2: Kết quả ví dụ 1 sau khi click vào liên kết Ví dụ 2: Cuộn đến vị trí trong cùng tài liệu Trong đoạn mã đã định sẵn bốn neo “anchor” được định nghĩa như sau: · Overview · Benefits · Features · Technical Specifications Linking in the Same Document HUBS DETAILS Scalable from 12 to 260 Nodes Baystack 10BASE-T Hubs deliver a simple and cost-effective method for starting and growing Ethernet networks The BayStack 10BASE-T Hubs deliver simple, scalable, plug-and play solutions for small and growing Ethernet net-work environments Technical Specifications for the BayStack 10BASE-T Hubs are shown in Table 1
Kết quả của ví dụ 2 hiển thị như hình 2.2 Hình 2-3: Kết quả của ví dụ 2 Hình 2-4: Kết quả của ví dụ 2 sau khi kích vào Overview
Hình 2-5: Kết quả của ví dụ 2 sau khi kích vào Benefits Hình 2-6: Kết quả của ví dụ 2 sau khi kích vào Features
Hình 2-7: Kết quả của Ví dụ 2 sau khi kích vào Technical Specifications Ví dụ 3: Dùng ký tự đặc biệt trong tài liệu HTML Learning HTML If A > B Then A = A - 1 If A < B Then A = A + 1 The above statements used special characters Hình 2-8: Kết quả của ví dụ 3 Ví dụ 4: Dùng phần tử doc lai
Using META Element This page is refreshed after every 2 seconds Hình 2-9: Kết quả của ví dụ 4 Khi trang trên (Ví dụ 4) hiển thị trên trình duyệt, chú ý vào thanh trạng thái. Trang web sẽ làm tươi lại (nạp lại) sau mỗi hai giây Chú ý: Nếu có thời gian, thử lại những ví dụ trong phần lý thuyết chương 1. 2.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 1. Viết một trang web mô tả về gia đình và các vật nuôi của bạn. Kích vào liên kết “Mô tả gia đình” nó sẽ đưa bạn đến phần mô tả về gia đình . Khi kích vào liên kết “Mô tả vật nuôi“ nó sẽ đưa bạn đến phần mô tả về vật nuôi của bạn. Gợi ý: Sử dụng neo “anchor” và những phần tử “đoạn” 2. Viết câu lệnh HTML để hiển thị dòng sau trong một trang web. For more information, please send an e-mail to me, Garywilson@MyCompany.com Gợi ý: Đặt câu lệnh sau vào trong phần của file HTML. 2.4. Tự thực hành 1. Viết đoạn mã HTML trỏ đến đoạn “Football” trong trang MyFile.html từ trang First.html ( ) 2. Viết một tài liệu HTML để giải thích cách dùng các ký tự đặc biệt.
Chương 3. Các thẻ cơ bản 3.1. Mục tiêu bài học: Kết thúc chương này, bạn có thể: · Sử dụng các thẻ cơ bản · Chèn hình ảnh vào trong tài liệu HTML 3.2. Giới thiệu Chương này thảo luận về những thẻ cơ bản của HTML như các thẻ tiêu đề (Header), các thẻ đoạn và các thẻ khối. Phần này cũng nói về danh sách (Lists) và làm thế nào để sử dụng các ảnh trong tài liệu HTML 3.2.1. Headings (Tiêu đề) Phần tử này được sử dụng để cung cấp tiêu đề cho phần nội dung hiển thị trên trang web. Tất cả những phần tử tiêu đề phải có thẻ kết thúc. Nó bắt đầu bằng thẻ và kết thúc bằng . Những phần tiêu đề được hiển thị to và in đậm hơn để phân biệt chúng với các phần còn lại của văn bản. Chúng ta cũng có thể hiển thị phần tiêu đề một trong sáu kích thước từ H1 đến H6. Tất cả những gì chúng ta làm là định rõ kích thước H1, H2 Trình duyệt chú trọng đến cách hiển thị Ví dụ 1: Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML
Hình 3-1: Kết quả ví dụ 1 3.3. Các thẻ mức đoạn Phần này ta sẽ học ba thẻ mức đoạn văn bản: , và 3.3.1. Thẻ Phần tử được dùng để hiển thị các thông tin như tác giả, địa chỉ, chữ ký trong tài liệu HTML.Phần tử này thường hiển thị ở cuối trang và có thể chứa một hoặc một số phần sau: · Liên kết đến trang chủ · Đặc tính chuỗi tìm kiếm · Thông tin bản quyền Ví dụ 2: Welcome to HTML My first HTML document This is going to be real fun Using another heading Another paragraph element
Hình 3-2: Kết quả ví dụ 2 3.3.2. Thẻ Chúng ta có thể chỉ định một trích dẫn văn bản bên trong tài liệu bằng cách sử dụng phần tử BLOCKQUOTE và Q. BLOCKQUOTE được sử dụng cho những phần trích dẫn dài và được hiển thị như một đoạn văn bản thụt vào đầu dòng. Nếu phần trích dẫn ngắn và không cần ngắt đoạn,thì sử dụng phần tử Q tốt hơn. Khi sử dụng phần tử Q, bạn phải xác định dấu ngoặc kép Ví dụ 3: Learning HTML The blockquote element is used to format the content in blocks of text. Humpty Dumpty sat on a wall Humpty Dumpty had a great fall All the King’s horses And all the King’s men Could not put Humpty Dumpty together again If you notice the content is rendered as a block of text.
Hình 3-3: Kết quả ví dụ 3 3.3.3. Thẻ Nếu chúng ta muốn văn bản được hiển thị với định dạng đã được xác định trước, chúng ta sử dụng phần tử PRE. Phần tử này dùng để xác định định dạng cho văn bản. Khi văn bản được hiển thị trong trình duyệt, nó sẽ tuân theo tất cả các định dạng đã được xác định trước trong mã nguồn tài liệu HTML. Ví dụ 4: Learning HTML Humpty Dumpty sat on a wall Humpty Dumpty had a great fall All the King’s horses And all the King’s men Could not put Humpty Dumpty together again
Hình 3-4: Kết quả ví dụ 4 3.3.4. Thẻ khối , Có những trường hợp chúng ta muốn chia văn bản trong một trang web thành những khối thông tin logic. Chúng ta cũng có thể áp dụng những thuộc tính thông thường cho toàn bộ khối. Phần tử DIV và SPAN được sử dụng để nhóm nội dung lại với nhau. Phần tử DIV dùng để chia tài liệu thành các thành phần có liên quan với nhau. Phần tử SPAN dùng để chỉ một khoảng các ký tự. Phần tử SPAN dùng để định nghĩa nội dung trong dòng(in-line) còn phần tử DIV dùng để định nghĩa nội dung mức khối (block-level) Ví dụ 5: Learning HTML Division 1 The DIV element is used to group elements Typically, DIV is used for block level elements Division 2 This is a second division Are you having fun? The second division is right aligned. Common formatting is applied to all the elements in the division Chú ý: Phần tử SPAN không hiển thị trong Netscape
Hình 3-5: Kết quả ví dụ 5 3.3.5. Các thẻ định dạng ký tự thường dùng HTML có nhiều thẻ có thể được sử dụng để định dạng nội dung của tài liệu. Các thẻ được phân thành các nhóm: 3.3.5.1 Thẻ định dạng mức vật lý Thẻ định dạng mức vật lý là những thẻ định rõ hoặc thay đổi đặc điểm của văn bản mà bạn áp dụng thẻ. Thẻ Mô tả Ví dụ . . . In đậm Learning HTML This is good fun Cố định độ rộng văn bản Learning HTML
This is good fun . . . Chỉ số trên Mathematical Formula pi*r 2 . . . Chỉ số dưới Chemical Formula H 2 O Bảng 3-1: Thẻ định dạng mức vật lý 3.3.5.2 Thẻ định dạng mức logic Thẻ định dạng mức logic là những thẻ mô tả “hiệu ứng cần thiết” của văn bản. Sự hiển thị thật sự do trình duyệt điều khiển. Những thẻ định dạng mức vật lý được các trình duyệt hiển thị như nhau. Những thẻ định dạng mức logic được hiển thị tùy theo trình duyệt mà tài liệu HTML được hiển thị. Thẻ logic Mô tả Ví dụ . . Nhấn mạnh văn bản Learning HTML This is good fun Sử dụng trong phần 0 trích của mã chương trình Learning HTML x = X + 1 Y = Y + 1 Sử dụng cho các biến
trong chương trình Learning html X Sử dụng cho các trích dẫn và tham chiếu Learning HTML It is the mark of an educated mind to be able to entertain a thought without accepting it Aristotle Bảng 3-2: Thẻ định dạng mức logic 3.3.6. Danh sách Danh sách dùng để nhóm dữ liệu một cách logic. Chúng ta có thể thêm các danh sách vào tài liệu HTML để nhóm các thông tin có liên quan lại với nhau. Ví dụ, Roses Sunflowers Orchids Apples Oranges Daffodils Mangoes Có thể được nhóm thành: Fr0uits Apples Mangoes Oranges Flowers Daffodils Orchids Roses Sunflowers Các loại danh sách mà bạn có thể chèn vào tài liệu HTML là: · Danh sách không thứ tự · Danh sách có thứ tự · Danh sách định nghĩa
3.3.6.1 Danh sách không thứ tự Đây là loại danh sách đơn giản nhất mà bạn có thể thêm vào tài liệu HTML. Danh sách không thứ tự là một “bulleted list”. Các mục được bắt đầu bằng dấu chấm tròn “bullet”. Danh sách không thứ tự được nằm trong cặp thẻ . Mỗi mục trong danh sách được đánh dấu bằng thẻ . LI được viết tắt của từ List Item. Thẻ kết thúc là tùy chọn (không bắt buộc). Ví dụ 6: Learning HTML Monday Tuesday Wednesday Thursday Friday Hình 3-6: Kết quả ví dụ 6 Chúng ta có thể tạo ra các danh sách lồng nhau để mô tả nhóm con của thông tin. Ví dụ 7: Learning HTML Monday Introduction to HTML
Creating Lists Tuesday Creating Tables Inserting Images Wednesday Thursday Friday Hình 3-7: Kết quả ví dụ 7 Thuộc tính TYPE có thể được dùng để định dạng các bullets để hiển thị cho các mục của danh sách. Thuộc tính Thẻ Ví dụ Bulleted và Learning HTML Monday Introduction to HTML Creating Lists
Tuesday Creating Tables Inserting Images Wednesday Thursday Friday Customized bullets SQUARE> Square bullets Learning HTML DISC> Sphere bullets Monday CIRCLE> Introduction to HTML Creating Lists Round bullets Tuesday Creating Tables Inserting Images Wednesday Creating Forms Working with Frames Thursday Friday Bảng 3-3: Thuộc tính Type Chú ý: Thuộc tính TYPE không được hiển thị trong Internet Explorer 3.3.6.2 Danh sách có thứ tự Danh sách có thứ tự nằm trong cặp thẻ . Danh sách có thứ tự cũng hiển thị các mục danh sách. Sự khác nhau là các mục danh sách hiển thị theo thứ tự được tạo ra một cách tự động. Ví dụ 8: Learning HTML
Monday Tuesday Wednesday Thursday Friday Hình 3-8: Kết quả ví dụ 8 Chúng ta có thể đặt các thuộc tính để định nghĩa hệ thống số mà được tạo ra cho các mục danh sách. Thuộc tính Thẻ Upper Roman Lower Roman Uppercase Lowercase Bắt đầu với một số khác lớn hơn 1 Bảng 3-4: Thông số cho mục danh sách Thuộc tính START xác định số khởi tạo ban đầu của danh sách. Monday Introduction to HTML Creating Lists Tuesday Ví dụ 9: Learning HTML
Creating Tables Inserting Images ting Forms Thursday Friday Crea> Working with Frames Thursday Friday Creating Forms Working with Frames Hình 3-9: Kết quả ví dụ 9 Chúng ta có thể lồng các loại danh sách lại với nhau. Có thể lồng các danh sách có thứ tự vào trong các danh sách không thứ tự và ngược lại.
Ví dụ 10: Learning HTML Monday Introduction to HTML Creating Lists Tuesday Creating Tables Inserting Images Wednesday Thursday Friday Hình 3-10: Kết quả ví dụ 10 3.3.6.3 Danh sách định nghĩa Danh sách định nghĩa được dùng để tạo ra một danh sách các điều khoản và các định nghĩa của chúng. Danh sách định nghĩa nằm trong cặp thẻ . Thẻ được dùng để chỉ ra điều khoản còn thẻ được dùng để chỉ ra định nghĩa cho điều khoản đó.
Ví dụ 11: Learning HTML Sunday The first day of the week HTML HyperText Markup Language Internet A network of networks TCP/IP Transmission Control Protocol / Internet Protocol Hình 3-11: Kết quả ví dụ 11 3.3.7. Thẻ kẻ đường ngang: Thẻ (horizontal rule) được dùng để kẻ một đường ngang trên trang. Những thuộc tính sau giúp điều khiển các đường nằm ngang. Nó chỉ có thẻ bắt đầu, không có thẻ kết thúc và không có nội dung. Thuộc tính Mô tả align Chỉ định vị trí của đường nằm ngang. Chúng ta có thể canh lề center(giữa)|right(phải)|left(trái). Ví dụ align=center width Chỉ độ dài của đường thẳng. Nó có thể xác định bằng các pixel hoặc tính theo
phần trăm. Mặc định là 100%, nghĩa là toàn bộ bề ngang của tài liệu. size Chỉ độ dày của đường thẳng và được xác định bằng các pixel. noshade Chỉ đường được hiển thị bằng màu đặc thay vì có bóng. Bảng 3-5: Thuộc tính thẻ HR Ví dụ 12: Welcome to HTML My first HTML document This is going to be real fun /BODY> Hình 3-12: Kết quả ví dụ 12 3.3.8. Sử dụng font Thẻ dùng để điều khiển sự hiển thị văn bản trên trang web. Chúng ta cũng có thể chỉ định các thuộc tính như kích thước, màu sắc, kiểu Chúng ta có thể đặt các thuộc tính cho cả tài liệu bằng cách đặt phần tử vào bên trong thẻ . Ngoài ra, thuộc tính FONT có thể đặt cho từng từ, từng phần và từng phần tử trong trang. Thuộc tính Mô tả COLOR Được dùng để chỉ màu của font. Chúng ta có thể dùng tên màu hoặc giá trị thập phân để xác định màu. SIZE Được dùng để chỉ kích thước của font. Chúng ta có thể xác định các kích thước
FONT từ 1 cho đến 7. Kích thước lớn nhất là 7 và nhỏ nhất là 1. Chúng ta có thể dùng một kích thước chuẩn và chỉ ra những kích thước tiếp theo liên quan đến kích thước chuẩn. Ví dụ, nếu kích thước chính là 3, thì SIZE=+4 sẽ tăng lên 7 SIZE=-1 sẽ giảm xuống 2 FACE Được dùng để chỉ định kiểu font (phông chữ) Bảng 3-6: Thuộc tính Fonts Các thuộc tính của FONT có thể kết hợp trong cùng một thẻ. Ví dụ 13: Welcome to HTML My first HTML document This is going to be real fun Hình 3-13: Kết quả của ví dụ 13 3.3.9. Sử dụng màu sắc Chúng ta có thể thêm màu vào trang và vào các phần tử trong trang. COLOR là thuộc tính có thể được sử dụng với nhiều phần tử như phần tử FONT và BODY. Ví dụ 14: Learning HTML
Welcome to HTML This is good fun Hình 3-14: Kết quả của ví dụ 14 Có 3 kiểu màu chính: đỏ, xanh và xanh da trời. Mỗi màu chính được xem như một bộ hai số của hệ 16. #RRGGBB Số thập lục phân 00 chỉ 0% của màu trong khi đó số thập lục phân FF chỉ 100% của màu. Giá trị cuối cùng là một mã sáu chữ số chỉ màu. Mã thập lục phân Màu #FF0000 Red #00FF00 Green #0000FF Blue #000000 Black #FFFFFF White Bảng 3-7: Mã màu 3.3.10. Sử dụng hình ảnh trong tài liệu HTML “Một bức tranh đáng giá ngàn từ”, tất nhiên điều này có thể áp dụng cho một trang web. Những hình ảnh được chèn vào trong trang web được gọi là những ảnh nội tuyến. Ảnh có thể là biểu tượng, bullet, ảnh, logo công ty và nhiều cái khác. Ngày nay có nhiều định dạng đồ họa đang được sử dụng. Tuy nhiên, trên Web có khác đôi chút. Ba định dạng đồ họa thông thường được hiển thị trên hầu hết các trình duyệt là: 3.3.10.1 Ảnh GIF (Graphics Interchange Format) (.GIF) GIF là định dạng thông thường nhất được dùng trong những tài liệu HTML. Những file GIF được định dạng không phụ thuộc vào định dạng nền và hỗ trợ 256 màu. Ưu điểm của các file GIF là khá dễ để chuyển tải, ngay cả kết nối sử dụng MODEM tốc độ chậm Có hai tiêu chuẩn cho các file .gif -87a và 89a (hỗ trợ trong suốt).
· Định dạng GIF xen kẽ(Interlaced GIF format): Một file ảnh thông thường hiển thị ảnh một lần một dòng. Mặc dù các ảnh xen kẽ được hiển thị một lần một dòng, nhưng thứ tự có thay đổi · Ảnh GIF trong suốt (Transparent GIF images): Ảnh GIF trong suốt là ảnh trong đó nền của ảnh cùng màu với trang web. Ví dụ các biểu tượng và bullet có nền trong suốt vì vậy chúng hợp với màu nền của tài liệu. 3.3.10.2 Ảnh JPEG (Joint Photographic Expert Group) (.JPEG) Cách nén JPEG là một lược đồ nén mất thông tin. Điều này có nghĩa là ảnh sau khi bị nén không giống như ảnh gốc. Tuy nhiên trong quá trình phát lại thì ảnh tốt gần như ảnh gốc. Khi bạn lưu một file với định dạng JPG, bạn có thể định tỉ lệ nén. Tỉ lệ càng cao thì ảnh càng ít giống ảnh gốc. JPEG hỗ trợ hơn 16 triệu màu và thường được sử dụng cho các ảnh có màu thực. Cả hai file ảnh dạng JPEG (đuôi mở rộng là .jpg) và các dạng GIF đều nén ảnh để đảm bảo chế độ chuyển tải qua internet được nhanh hơn. Ảnh JPG có thể được nén nhiều hơn nhưng chậm hơn trong quá trình hiển thị so với ảnh .GIF. Có lẽ đó là lý do tại sao ảnh .GIF được phổ biến trong tài liệu HTML. 3.3.10.3 PNG (Portable Network Graphics) Định dạng cho một file PNG là “lossless” (không mất thông tin). Trong nén “lossless”, dữ liệu ảnh được nén mà không bỏ chi tiết. Các file PNG hỗ trợ ảnh màu thực và dải màu xám. Các file PNG cũng có thể được nén và chuyển qua mạng. Khi quyết định định dạng đồ họa, chúng ta nên nhớ một vài yếu tố: · Chất lượng của ảnh – Chất lượng của ảnh có quan trọng trong quá trình hiển thị không? · Độ lớn dữ liệu – Kích cỡ file càng lớn thì thời gian truyền càng cao. · Các yêu cầu hiển thị - Ảnh hỗ trợ trong suốt, hiển thị tuần tự hay xen kẽ. 3.3.10.4 Chèn ảnh Thẻ IMG dùng để chèn những ảnh vào trong tài liệu HTML. Chúng ta cũng có thể đặt thẻ IMG tại vị trí mà ảnh được hiển thị. Thẻ IMG không có nội dung, nó hiển thị nội dung bằng cách xác định thuộc tính SRC. Cú pháp là: Trong đó SRC (source) là thuộc tính và giá trị là một URL, chỉ vị trí chính xác của file ảnh. Đôi khi, chỉ hình ảnh không thể nói lên tất cả. Chúng ta cần phải cung cấp cho người dùng một vài giới thiệu về mục đích của hình ảnh. Bạn có thể canh lề ảnh cùng với văn bản. Thuộc tính ALIGN của thẻ IMG có thể được sử dụng để điều chỉnh canh lề của ảnh với văn bản xung quanh. Trong đó, vị trí của ảnh có thể là trên(TOP), dưới(BOTTOM), ở giữa(MIDDLE), trái(LEFT) hoặc phải(RIGHT). Ví dụ 15: Inserting an Image
Inserting an Image Aligned at the bottom Aligned at the top Aligned in the middle Chú ý: file Flowers.jpg nằm trong cùng thư mục với file HTML nguồn. Hình 3-15: Kết quả ví dụ 15 Chú ý rằng một vài trình duyệt không hiển thị những ảnh đồ họa. Trong trường hợp này, chúng ta cần xác định một dòng chú thích thay thế trong tài liệu HTML. Thuộc tính ALT được sử dụng để chỉ nội dung ảnh của bạn. Ví dụ 16: Inserting an Image Inserting an Image
Hình 3-16: Kết quả ví dụ 16 (dòng văn bản giải thích hiển thị khi di chuyển chuột vào ảnh) Nền của trang cũng quan trọng như văn bản. Người ta thường sử dụng màu cho trang web, mục đích là làm cho nội dung được nổi bật. Chúng ta cũng có thể sử dụng ảnh để làm nền. Để làm điều đó, ta cần phải dùng thuộc tính BACKGROUND trong thẻ BODY. (Chỉ ra URL hoàn chỉnh của ảnh) Nếu ảnh nhỏ hơn phạm vi hiển thị của tài liệu thì ảnh được xếp kề nhau để lấp đầy toàn bộ vùng hiển thị . Ảnh thường cuộn theo văn bản khi người dùng kéo thanh cuộn trong trình duyệt. Nếu không muốn như vậy và thay vào đó ta muốn tạo ra hiệu ứng hình mờ, nghĩa là văn bản thì cuộn còn ảnh thì đứng yên, ta thiết lập thuộc tính BGPROPERTIES trong thẻ BODY có giá trị là FIXED Các ảnh được chèn vào tài liệu HTML cũng có thể sử dụng như siêu liên kết. Những ảnh như thế gọi là siêu ảnh. Khi người dùng kích vào ảnh, sẽ hiển thị tài liệu hoặc file được chỉ ra trong URL. Để làm điều này, ta cần lồng ảnh vào trong thẻ neo (anchor) 3.4. Tóm tắt bài học · Các phần tử Header được sử dụng để cung cấp tiêu đề cho những nội dung được hiển thị trên trang Web · Phần tử được sử dụng để hiển thị thông tin như là tác giả, địa chỉ và chữ ký cho tài liệu HTML · Chúng ta có thể trình bày lời trích dẫn bằng cách sử dụng phần tử BLOCKQUOTE
· Nếu bạn muốn một đoạn văn bản được hiển thị với phần định dạng trước thì bạn có thể sử dụng phần tử PRE · Phần tử SPAN được sử dụng để định nghĩa nội dung trong dòng trong khi phần tử DIV được dùng để định nghĩa nội dung ở mức khối (Block-level content) · Danh sách được sử dụng để nhóm dữ liệu một cách logic. Chúng có thể được thêm vào tài liệu HTML để nhóm các thông tin có liên quan lại với nhau · Thẻ được dùng để vẽ một đường ngang qua trang · Thẻ được dùng để điều khiển sự hiển thị văn bản trên trang Web · Chúng ta có thể đặt thuộc tính FONT cho toàn bộ tài liệu bằng cách sử dụng phần tử bên trong thẻ BODY · Màu có thể được thêm vào cho trang và cho các phần tử trên trang bằng cách sử dụng thuộc tính COLOR · Màu được xác định dưới ba màu chủ đạo: đỏ, xanh lục, xanh dương (Red, Green, Blue). Mỗi màu chính này được định nghĩa như là một số kết hợp từ hai số ở hệ thập lục phân · Những hình ảnh được chèn vào trong một trang web được gọi là hình ảnh trong dòng (In- line images). Những hình ảnh này có thể là những biểu tượng, bullets, những hình ảnh, những logo công ty, và nhiều thứ khác nữa. · Thẻ IMG được sử dụng để chèn hình ảnh vào trong một tài liệu HTML · Thuộc tính ALIGN của thẻ IMG có thể được sử dụng để điều chỉnh canh lề cho ảnh với những văn bản xung quanh · Đối với thuộc tính BACKGROUND của thẻ BODY, thường có thể sử dụng một ảnh đóng vai trò như một ảnh nền · Ảnh được chèn vào trong trang HTML mà nó cũng có thể phục vụ như là các liên kết. Những ảnh như vậy được gọi là siêu ảnh (hyperimage) 3.5. Ôn tập 1. Điền vào chỗ trống a. Màu được xác định bởi các màu chính là ___, ___ và___. b. ___ được sử dụng để nhóm các dữ liệu trên trang Web c. Ảnh được chèn vào trang Web được gọi là ảnh ___. d. Hai chuẩn đối với file .GIF là ___ và ___. e. Tên đầy đủ của PNG là ___. f. Thẻ ___ được sử dụng để chèn ảnh vào một tài liệu HTML. g. Tham số ___ được sử dụng để xác định đoạn chú thích cho một ảnh. 3.6. Tự thực hành 1. Viết một đoạn HTML cho trang Web với tiêu đề, “Using headings”. Thêm vào tiêu đề mức ba dòng chữ “My First HTML document” 2. Thêm một đoạn vào trang theo định dang dưới: Little Miss Muffet Sat on a Tuffet Eating her curds and whey There came a spider and sat down beside her And frightened Miss Muffet away
3. Tạo một danh sách định nghĩa: Peacock National bird of India Internet A network of networks HTML HyperText Markup Language 4. Tạo một danh sách như sau: 1. Introduction to HTML a. Introduction to the World Wide Web b. Introduction to HTML tags · Formatting text · Enhancing the text 2. Designing a Web Site i. Designing the page ii. Designing navigation iii. Creating Hyperlinks 5. Chèn ba ảnh vào tài liệu. Chèn ba đường thẳng xen kẽ giữa mỗi ảnh. Chương 4. Các thẻ cơ bản 4.1. Mục tiêu bài học: Kết thúc chương này, bạn có thể: · Sử dụng các thẻ cơ bản · Chèn hình ảnh Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận. 1. Tạo một thư mục, HTML-DHTML-JS-Examples trong ổ đĩa D:\ và lưu tất cả các file .html chỉ trong thư mục này. (Nếu không có đĩa D, hãy tạo trong ổ đĩa C:\) 2. Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”. 3. Gõ đoạn mã ở ví dụ 1 4. Kích vào File chọn Save As 5. Lưu file với đuôi .html trong thư mục D:\HTML-DHTML-JS-Examples. Chọn tên thích hợp, ví dụ , lab21 (Lab21 để biết đây là ví dụ 1 trong bài Lab 2) Hoặc 6. Lưu nó trong thư mục đăng nhập của mình 7. Chạy Internet Explorer. 8. Kích vào File → Open, chọn Browse và chọn file từ thư mục D:\HTML-DHTML-JS- Examples 4.2. Phần I – Thực hiện trong 1h30’ đầu: Ví dụ 1: Một đoạn mã HTML đặt tiêu đề ở giữa trình duyệt Aligning the heading at the center
ON LINE EXAM Kết quả của đoạn mã trên được minh họa như hình 4.1 ở dưới Hình 4-1: Kết quả ví dụ 1 Ví dụ 2: Đoạn mã HTML kết hợp thẻ font, thẻ ngắt, thẻ đoạn và các thuộc tính của chúng. HTML Code to incorporate different tags To specify the beginning of the paragraph and the end of paragraph, <P> and </P> tag is used. The paragraph tag displays a blank line both on the top and the bottom of the paragraph. Các thẻ được sử dụng trong đoạn mã HTML ở trên: Trong thẻ TITLE được hiển thị trên thanh tiêu đề của cửa sổ trình duyệt Thẻ có thể không cần chú ý. Việc bắt đầu một đoạn mới sẽ kết thúc đoạn trước đó. and
Đoạn đầu tiên được định dạng có font chữ Times New Roman và có cỡ chữ là 5. Đối với đoạn thứ hai thì được định dạng font chữ Arial và có cỡ chữ là 4 and Các thẻ trên chỉ áp dụng cho đoạn thứ nhất để hiển thị kiểu chữ đậm và nghiêng Thẻ này làm cho đoạn thứ hai được canh giữa Chú ý việc sử dụng các ký tự đặc biệt trong đoạn mã để hiển thị được các thẻ trong trình duyệt Hình 4.2 Kết quả hiển thị trên trình duyệt với việc định dạng đoạn Hình 4-2: Kết quả ví dụ 2 Ví dụ 3: Viết đoạn mã HTML để canh lề phải một khối văn bản bằng cách sử dụng thẻ DIV Aligning a Block of Content to the Right You can use a DIV tag to align a block of content to the right. The content can include anything you like, including tables, images, lists, and so on. Note, however, that right-aligned lists often do not look very neat. Kết quả hiển thị trên trình duyệt như hình 4.3
Hình 4-3: Kết quả ví dụ 3 Ví dụ 4: Tạo một dòng kẻ, với kích thước bằng nữa kích thước của cửa sổ và có độ dày là 5 pixels Horizontal Rule that is half the size of the window and with a thickness of 5 pixels Kết quả hiển thị như hình 4.4 Hình 4-4: Kết quả ví dụ 4 Ví dụ 5: Viết đoạn mã HTML để kết hợp tất cả các thẻ định dạng được thảo luận sau đây: This Is My 7 th Program Using HTML
H 2 O Is The Chemical Name For Water * * * * * * * * * * * * * * * This Text Will Appear With Strike Effect This Is My 7 th Program Using HTML H 2 O Is The Chemical Name For Water * * * * * * * * * * * * * * * This Text Will Appear With Strike Effect Chỉ số trên - . Cú pháp là: This Is My 5 th Program Using HTML Chỉ số dưới - . Cú pháp là: H 2 O Is The Chemical Name For Water Gạch ngang văn bản - . Thẻ STRIKE được sử dụng để hiển thị đường gạch ngang văn bản trong trình duyệt. Thẻ này thường được sử dụng để đánh dấu văn bản The syntax is: This Text Will Appear With Strike Effect Văn bản định dạng trước - Các thẻ và Nếu bạn muốn đoạn văn bản nào đó hiển thị trong cửa sổ trình duyệt với định dạng y như trong trình soạn thảo thì nên sử dụng thẻ định dạng văn bản trước. Kết quả hiển thị đoạn mã HTML trên như hình 4.5
Hình 4-5: Kết quả ví dụ 5 Ví dụ 6: Một danh sách có sắp xết bắt đầu từ C và được in hoa. Đoạn mã HTML sau sẽ hiển thị một danh sách với các ký tự viết hoa do thuộc tính TYPE được thiết lập là “A” và bắt đầu từ “C” vì giá trị bắt đầu là 3. Đó là danh sách được bắt đầu từ ký tự thứ 3 trở đi Countries AUSTRALIA SOUTH AFRICA ENGLAND Hình 4.6 Kết quả hiển thị ví dụ 6.
Hình 4-6: Kết quả ví dụ 6 Ví dụ 7: Để chèn một hình ảnh vào tài liệu HTML Hình 4-7: Kết quả ví dụ 7 Note: Nếu thời gian cho phép, hãy thử tất cả các ví dụ trong chương 3, chú ý đặc biệt đến danh sách và chèn hình ảnh vào tài liệu HTML Inserting an Image Inserting an Image
4.3. Phần II – Thực hiện trong 1h30’ tiếp theo: 1. Viết đoạn mã HTML để hiển thị văn bản sau với font chữ Impact, màu xám (gray) The human face is a bigger challenge. Gợi ý: sử dụng thẻ FONT. 2. Viết đoạn mã HTML để hiển thị một đường kẻ ngang với mày xanh lá cây (green) và độ rộng chỉ 25% Gợi ý: Sử dụng thẻ HR với thuộc tính WIDTH 3. Viết đoạn mã HTML hiển thị trang web với văn bản màu xanh và màu nền là trắng Gợi ý: Sử dụng thẻ BODY với thuộc tính TEXT và BGCOLOR. 4. Chèn một hình ảnh vào một tài liệu HTML. Cung cấp một đoạn chú thích cho hình đó. Gợi ý: Sử dụng thẻ IMG với thuột tính ALT 4.4. Tự thực hành 1. Viết đoạn mã HTML để hiển thị văn bản sau sử dụng chỉ số trên The Value of 2 to the power of 3 is: 23 = 8 2. Viết đoạn mã HTML để hiển thị văn bản sau sử dụng chỉ số dưới The Value of Log to the base 10 is: Log10 = 1 3. Viết đoạn mã HTML để chèn một hình ảnh vào trang web. Chú thích cho hình ảnh đó. Chương 5. Sử dụng bảng và lớp 5.1. Mục tiệu bài học: Kết thúc chương này, bạn có thể: · Biết cách sử dụng bảng (table). · Biết cách sử dụng lớp (layer). · Chèn các đối tượng đa phương tiện “Multimedia” vào tài liệu HTML 5.2. Giới thiệu Chúng ta đã học cách nhóm các dữ liệu có liên quan vào các danh sách, nhưng còn có một cách khác để điều khiển việc hiển thị văn bản trên trang web, bằng cách dùng các bảng. Trong chương này chúng ta sẽ học cách tạo bảng. Chúng ta cũng sẽ thảo luận về các lớp. Phần cuối của chương này sẽ nói về làm thế nào để chèn các điều khiển đa phương tiện “multimedia” vào bên trong tài liệu HTML. 5.2.1. Cách tạo bảng Chúng ta có thể sử dụng bảng để hiển thị dữ liệu dưới dạng các hàng và các cột. Bảng giúp cho chúng ta điều khiển, xác định và sắp xếp vị trí của văn bản và hình ảnh trên trang web, thay vì giao tất cả các việc đó cho trình duyệt.
Hình 5-1: Mô hình của bảng 5.2.1.1 Thẻ dùng để tạo bảng Thẻ được dùng để tạo bảng trong tài liệu HTML. Các thuộc tính của phần tử được áp dụng cho bảng, nhưng không cho dữ liệu hiển thị trên bảng. Đơn vị cơ bản của bảng là một ô và được định nghĩa bằng thẻ . Ví dụ 1: Using Tables Data Cell 1 Data Cell 2 Data Cell 3 Hình 5-2: Kết quả của ví dụ 1 Một hàng của bảng được định nghĩa bằng thẻ Ví dụ2:
Using Tables Data Cell 1 Data Cell 2 Data Cell 3 Data Cell 4 Data Cell 5 Data Cell 6 Hình 5-3: Kết quả của ví dụ 2 Các ô tạo thành một hàng. Các hàng tạo thành bảng. Điều này được nói đến trong cú pháp của HTML được sử dụng để tạo bảng. Thẻ TD được lồng trong thẻ TR. Thẻ TR được nằm trong cặp thẻ đóng và mở TABLE. Thuộc tính BORDER có thể được sử dụng để định nghĩa các ô và cấu trúc của bảng. thuộc tính này chỉ độ rộng của đường viền. Nếu giá trị được đặt là 0 thì đường viền sẽ không hiển thị. Ví dụ 3: Using Tables Data Cell 1 Data Cell 2
Data Cell 3 Data Cell 4 Data Cell 5 Data Cell 6 Hình 5-4: Kết quả của ví dụ 3 Mỗi cột trong bảng, phần tiêu đề có thể định nghĩa. Thẻ định nghĩa tiêu đề cho cột. Ví dụ: Employee Name Phần tử CAPTION được dùng để thêm vào một chú thích cho bảng. ở đây bạn sử dụng nó để mô tả bảng. Ví dụ, Creating a Table nằm ngay sau thẻ mở 5.2.1.2 Chèn hàng và cột Những thẻ và có thể được dùng để chèn theo thứ tự các hàng và các cột vào trong bảng. Ví dụ được mô tả bên dưới. Ví dụ 4: Using Tables Data Cell 1 Data Cell 2 Data Cell 3 New column
Data Cell 4 Data Cell 5 Data Cell 6 New Row Hình 5-5: Kết quả của ví dụ 4 5.2.1.3 Xóa hàng và cột Để xóa một hàng, xóa thẻ tương ứng cùng với tất cả các thẻ bên trong nó từ một file mã nguồn HTML. Tương tự, để xóa các cột Hãy xem hình 5.4. Để xóa dòng thứ hai, chúng ta cần xóa thẻ cho ô dữ liệu 4, 5 và 6 cùng với thẻ mà nó kèm theo những thẻ này từ file HTML nguồn. Để xóa cột cuối cùng, đó là New column, chúng ta cần xóa thẻ lập nên ô này Ví dụ 5: Using Tables Data Cell 1 Data Cell 2 Data Cell 3 New Row
Hình 5-6: Kết quả của ví dụ 5 5.2.1.4 Trộn ô: Kết hợp các cột hay dòng Đôi khi chúng ta muốn nối các dòng và các cột vào trong một ô. Như vậy, chúng ta tạo một cột để kéo rộng ra cho hơn một dòng, hay tạo ra một dòng để kéo rộng ra cho hơn một cột. Thuộc tính COLSPAN và ROWSPAN được sử dụng để tạo ra những ô mà chúng có thể kéo rộng ra cho hơn một dòng hay cột. Thuộc tính COLSPAN được sử dụng với thẻ , trong khi đó thuộc tính ROWSPAN được sử dụng với thẻ . Ví dụ 6: Using Tables Creating a Table Quarter 1 Quarter 2 Jan Feb March April May June 1000 550 240 1500 2765 1240
3000 2430 2500 1250 900 3400 Hình 5-7: Kết quả của ví dụ 6 Ví dụ 7: Using Tables Creating a Table NUTS BOLTS Hammers Quarter 1 Jan 2500 1000
1240 Feb 3000 2500 4000 March 3200 1000 2400 Hình 5-8: Kết quả của ví dụ 7 5.2.1.5 Định dạng cho ô Có thể chỉ định được vị trí của văn bản bên trong mỗi ô của bảng. Những thuộc tính canh lề ngang (ALIGN) và canh lề dọc (VALIGN) được sử dụng để điều khiển việc canh lề trong các ô của bảng. Thuộc tính ALIGN có thể có các giá trị: trái, phải, giữa, đều hai bên. Thuộc tính VALIGN có thể có các giá trị: trên, giữa và dưới Ngoài việc xác định vị trí nội dụng của các ô trong bảng, chúng ta cũng có thể thay đổi kích thước, màu sắc của bảng. Chúng ta có thể xác định chiều rộng của bảng. Đó là vùng trên màn hình mà bảng sẽ mở rộng ra. Thuộc tính WIDTH của thẻ TABLE sẽ thật sự cần thiết. Giá trị của thuộc tính WIDTH có thể là một định dạng phần trăm hay thậm chí là các điểm. Chẳng hạn, Điều này sẽ kéo rộng bảng đến 50% của màn hình
Nếu chúng ta muốn thêm một vài màu sắc cho bảng, chúng ta sử dụng thuộc tính BGCOLOR. Giá trị này có thể là tên của một màu hay là giá trị ở hệ thập lục phân. Ví dụ 8: Using Tables Data Cell 1 Data Cell 2 Data Cell 3 Data Cell 4 Data Cell 5 Data Cell 6 Hình 5-9: Kết quả của ví dụ 8 Nếu nội dung của văn bản trong ô nhỏ hơn không gian trong ô đó thì sẽ có không gian trống là khoảng cách giữa văn bản và đường viền của ô. CELLSPACING là không gian giữa các ô và CELLPADDING là không gian giữa đường viền ô của bảng với nội dung văn bản được đặt trong ô. Như đã mô tả ở trên, thuộc tính CELLSPACING định nghĩa không gian giữa các ô, tính theo điểm (pixel). Thuộc tính CELLPADDING định nghĩa những không gian bên trong ô của bảng Ví dụ 9: Using Tables
Data Cell 1 Data Cell 2 Data Cell 3 Data Cell 4 Data Cell 5 Data Cell 6 Hình 5-10 Kết quả của ví dụ 9 5.2.2. Lớp (Layer): Khi đặt vị trí cho một phần tử trên trang Web, chúng ta xác định tọa độ x và y. Tuy nhiên, chúng ta cũng có thể xác định tọa độ z. Như thế, trục tọa độ z là một đường ảo từ phía trước đến phía sau màn hình. Vì vậy, một phần tử có thể được đặt ở trên hay dưới phần tử khác trong lớp. Tọa độ z xác định thứ tự trong đó các phần tử được hiển thị Khái niệm về lớp có thể được đưa ra đối với một tài liệu HTML. Một lớp giống như một frame mà nó có thể chứa nội dung và được chỉ định vị trí ở nơi được yêu cầu. Trong phần tiếp theo sẽ thảo luận kỹ hơn về lớp. 5.2.2.1 Lớp là gì? Lớp là một phần tử có thể được thêm vào một trang Web. Chúng ta có thể xác định chính xác vị trí của một lớp trong trang Web. Netscape cung cấp một phần tử mà nó có thể được sử dụng để xác định vị trí nội dung trên trang Web. Lớp có tập thuộc tính riêng của nó có thể được truy xuất và lập trình. Các lớp có thể được lập trình thông qua script (tức là đoạn mã của một chương trình nhỏ) để tạo ra những trang động hay những trang có khả năng tương tác với nhau. Vì vậy, chúng ta có thể xác định vị trí các phần tử trên trang mà ta muốn thay vì phải di chuyển nó đến phần chức năng (functionality) được yêu cầu bởi mỗi trình duyệt. Thêm vào đó, chúng ta có thể kết nối các văn bản và hình ảnh lại với nhau để tạo ra một trang web sinh động và dễ đọc. Các hiệu ứng đặc biệt có thể được thêm vào trên một trang web mà không cần phải tăng kích thước của file lên nhiều lắm. Chúng ta có thể
thay đổi các phần của trang mà không phải thay đổi lại, thiết kế lại trang chủ, như thế, chúng ta có thể thay những nội dung của một tầng đặc biệt mà không phải hiệu chỉnh trang chủ. Cả Internet Explorer và Netscape Navigator đều cung cấp công nghệ lớp và mỗi nhà cung cấp đều có một cách riêng. Đối với Internet Explorer hỗ trợ mô hình CSS (Cascading Style Sheet – Mô hình thác nước). Khi chúng sử dụng những kiểu Bảng kiểu như thế này thì chúng ta có thể nhóm các thành phần của trang lại với nhau trong một Bảng kiểu hình thác nước. Bảng kiểu loại này có thể được đưa ra để chọn một hay tất cả các phần tử trong một tài liệu HTML. Những phần tử có thể được điều khiển thông qua VBScirpt hay JavaScript. Để tạo ra một tầng tài liệu chúng ta sẽ phải thay đổi thuộc tính của kiểu Bảng kiểu này. Netscape Navigator cũng hổ trợ việc sử dụng CSS, nhưng theo một cách khác. Chúng ta phải sử dụng thẻ do Netscape hỗ trợ. 5.2.2.2 Sử dụng các lớp Lớp được bàn ở đây như là một thực thể đơn của nội dung. Nó cũng được chỉ ra giống như bất kỳ một kiểu nào khác mà nó chỉ đến những phần tử bên trong một trang HTML. Vì vậy, nếu chúng ta muốn ứng dụng kiểu lớp cho tất cả những phần tử bên trong lớp, chúng ta có thể sử dụng những phần tử như DIV hay SPAN. Ví dụ 10: Grouping elements Layer 1 This is a paragraph element within division 1 Content for layer 1. Outside the division Division 2 This is a paragraph element within division 2 Content for layer 1.
Hình 5-11: Kết quả của ví dụ 10 Ví dụ 11: Using Layers Using Layers Layer 1 A layer is an element that can be added to a Web page.
Hình 5-12: Kết quả của ví dụ 11 5.2.3. Chèn Multimedia vào tài liệu HTML Một trong những nhân tố lớn nhất trong sự phát triển của web đó là sự tích hợp của các đa phương tiện(multimedia) bên trong những tài liệu HTML. Khi những phiên bản đầu tiên của HTML ra đời, nó cũng đã bao gồm các đối tượng liên quan đến hình ảnh vào trong một tài liệu để cho phép nhúng hình ảnh nội tuyến vào nội dung tài liệu. Sau đó, HTML được mở rộng để cho phép nhúng không chỉ là những ảnh tĩnh mà còn là âm thanh và video. Hiện nay, tất cả những tính năng đó được phép sử dụng để làm phong phú thêm cho các trang web. 5.2.3.1 Chèn ảnh động vào (.GIF) vào tài liệu HTML Trong chương 3, chúng ta vừa mới thảo luận thế nào là file GIF và chúng được đưa vào một tài liệu HTML bằng cách nào. Nhớ rằng thẻ được dùng để chèn một ảnh vào trong trang web. Ví dụ 12: Inserting an animated .GIF File Inserting an Image
Hình 5-13: Kết quả của ví dụ 12 Chú ý: trong ví dụ 12, coffeecup.gif là một ảnh động là file .gif, khi hiển thị trong trình duyệt thì nó hiển thị một luồng khói phía trên cốc cà phê. File này được đặt vào cùng thư mục với file HTML nguồn. Tuy nhiên, nó có thể được thay thế bởi các hình ảnh động khác 5.2.3.2 Chèn âm thanh vào tài liệu HTML Tính hấp dẫn của một trang Web tương tác đó là thường sử dụng tiếng “bip” khi người dùng kích hoạt đến một trang web khác. Một cách tùy chọn, một trang web sẽ yêu cầu kết hợp tiếng nhạc bên trong nó để làm cho trang web đó có tính hấp dẫn hơn. MIDI là một định dạng chuẩn của các file nhạc mà chúng được dùng trong tài liệu HTML. Các file MIDI chứa những nốt nhạc và các loại nhạc cụ cho các bản nhạc. Nhạc cụ điện tử trong card âm thanh mô phỏng tiếng nhạc. Nói cách khác, các file .wav và .au dùng để lưu âm thanh Để thêm vào âm thanh cho trang web, chúng ta phải sử dụng các file âm thanh (.wav hay .midi) trên hệ thống của chúng ta. Chẳng hạn như, Nếu chúng ta không xác định được đường dẫn thì trình duyệt sẽ tìm file mà ở đó trang web đang được định vị. Thuộc tính loop xác định số lần mà âm thanh sẽ được bật lên. Chú ý rằng phần tử BGSOUND không được hỗ trợ bởi Netscape. Nhạc MIDI như đã đề cập ở phần trước, chỉ là một tiếng nhạc tổng hợp. Tuy nhiên, nếu muốn thêm vào file nhạc của mình, chẳng hạn như giọng nói hay một bài hát đặc biệt khi trang web được chuyển đến, thì chúng ta cần phải sử dụng những file âm thanh đã được số hóa. Một file âm thanh được số hóa chứa những thông tin để sao chép lại một bản sao âm thanh đúng như file gốc của nó. Tần số tại những tâm thanh được đưa ra làm ví dụ chuẩn xác định được chất lượng của file âm thanh đó, tần suất cao hơn, chất lượng âm thanh tốt hơn. Điểm hạn chế đó là nó cũng sẽ làm gia tăng kích thước của file. Những file âm thanh được số hóa có thể được lưu trong hai định dạng, đó là file .au hay .wav Định dạng file .wav bắt đầu với hệ điều hành Windows. Nó có tỉ lệ nén thấp và kích thước file lại rất lớn. Còn định dạng file .au được tổ chức với những máy cài hệ điều hành Unix.
Có vẽ sẽ tốt hơn cho việc lưu trữ các file âm thanh được và nó có một tỉ lện nén cao hơn so với những file .wav Ví dụ 3: Inserting Sound Inserting sound Hình 5-14: Kết quả của ví dụ 13 Chú ý: Trong ví dụ 13, khi hiển thị trang web trong trình duyệt file nhạc đăng nhập Windows sẽ chạy. File windowLogonSound.wav được đặt trong cùng thư mục với file HTML nguồn. Tuy nhiên, nó có thể được thay thế bởi các file nhạc khác 5.2.3.3 Chèn Video vào tài liệu HTML Một file video có thể có phần mở rộng là: .avi, .asf, .ram hay là .ra. Để chèn một file video vào tài liệu HTML, thẻ có thể được sử dụng. Chẳng hạn như, Ví dụ 14: Inserting a Video file Inserting Video
Hình 5-15: Kết quả của ví dụ 14 Chú ý: Để xem kết quả 14, trình Media Player phải được cài đặt. File clock.avi có thể được thay thế bởi các file video khác 5.2.4. Chèn các Java Applets Bản thân trang HTML rất thụ động. Điều này có nghĩa là nội dung của chúng ít nhiều là tĩnh và không thay đổi trong một khoảng thời gian. Có một vài cách để tạo các chương trình tương tác trên Web, nhưng một trong những cách đáng chú ý nhất là sử dụng applet. Một applet là một chương trình được viết trong một ngôn ngữ giống như Java, đặc biệt là được thiết kế để làm việc trên Internet thông qua một trình duyệt Web. Một applet có thể được sử dụng cho các mục đích khác nhau chính từ những phương tiện giao tiếp dựa trên Web cho đến những việc thiết kế các giao diện đồ họa người dùng cho các ứng dụng back-end. Với việc sử dụng applet chúng ta có thể tạo ra các trò chơi đa phương tiện (multimedia game), các cuộc thi, và các chương trình tương tác kiểu như vậy cho Web. Một applet có thể được nhúng trong một trang HTML và được thực thi trên một trình duyệt Web có hỗ trợ Java. Ví dụ các trình duyệt Web có hỗ trợ Java là Internet Explorer 3.0 hoặc Netscape Navigator 3.0 Để hiển thị một applet, chúng ta cần tạo một trang HTML mà nó có thể nạp các file applet vào trong một trình duyệt. Chẳng hạn như: File HTML sử dụng thẻ Applet. Thẻ applet lần lượt trỏ đến đường dẫn của file applet như tham số đầu tiên của nó. Thẻ applet cũng có hai thuộc tính, đó là chiều rộng và chiều cao. Hai thuộc tính này sẽ xác định hướng của applet trên màn hình của trình duyệt Cũng có thể thông qua các tham số để đến được một applet bằng cách sử dụng thẻ trong file HTML. Tên của tham số được xác định bằng cách sử dụng thẻ và giá trị của nó được xác định bằng cách sử dụng thuộc tính giá trị trong bên trong thẻ. Ví dụ sau đây chỉ
ra rằng làm cách nào để file ảnh có thể được chuyển qua như là một tham số thông qua một file HTML đến một Applet Ví dụ 15: Inserting Applet in HTML Hình 5-16: Kết quả của ví dụ 15 Chú ý: Trong ví dụ 15, AppletDemo là một file Java Applet. File này có thể được thay thế bởi các file java applet khác 5.3. Tóm tắt bài học · Bảng cho chúng ta điều khiển vị trí của văn bản hay hình ảnh trên trang Web, thay vì để tùy ý trên trình duyệt · Thẻ được sử dụng để tạo một bảng trên tài liệu HTML · Thành phần cơ bản của một bảng là ô và được định nghĩa với thẻ · Một dòng của bảng được định nghĩa dùng thẻ · Thuộc tính BORDER có thể dùng để định nghĩa các ô và cấu trúc của bảng. Thuộc tính này xác định chiều rộng của đường viền · Phần tử CAPTION được sử dụng để thêm vào tiêu đề cho bảng. Phần mô tả của bảng có thể được đặt ở đây · Thẻ được sử dụng xác định phần tiêu đề cho mỗi cột
· Những thuộc tính COLSPAN và ROWSPAN được sử dụng tạo các ô để kéo rộng ra hơn một dòng hay một cột · Thuộc tính COLSPAN được sử dụng với thẻ , trong khi đó thuộc tính ROWSPAN được sử dụng với thẻ · Những thuộc tính canh lề ngang (ALIGN) và canh lề dọc(VALIGN) được sử dụng để điều khiển việc canh lề bên trong các ô của bảng. · Thuộc tính WIDTH của thẻ TABLE được dùng để xác định độ rộng của bảng · Nếu muốn thêm vào màu nào đó cho bảng, chúng ta sử dụng thuộc tính BGCOLOR · Cellspacing chỉ đến khoảng cách giữa các ô, Cellpadding chỉ đến khoảng cách giữa các đường viền của ô trong bảng và đoạn văn bản được định vị trong ô đó. · Lớp giống như frame, có thể chứa nội dung và được định vị ở nơi được yêu cầu · Netscape hỗ trợ phần tử mà nó có thể dùng để định vị nội dung trên trang Web · Một trong những nhân tố lớn nhất trong sự phát triển của Web đó là sự tích hợp các thuộc tính đa phương tiện bên trong tài liệu HTML · Phần tử được sử dụng để thêm vào âm thanh cho trang web · Thẻ được dùng để chèn một file video vào trong một tài liệu HTML · Một applet có thể được chèn vào trong một trang HTML và được xử lý trên trình duyệt có hỗ trợ Java 5.4. Ôn tập 1. Điền vào chỗ trống · Phần tử___CAPTION___ được dùng để cung cấp phần mô tả của một bảng. · Thẻ___TD___được dùng để định nghĩa một ô của bảng · Thuộc tính ___dùng để xác định vị trí nội dung của một ô trong bảng ở phía trên của ô đó · Thuộc tính _WIDTH___xác định diện tích mà bảng sẽ chiếm giữ trên trang · Những file___ chứa đựng các nốt nhạc và các loại nhạc cụ cho bảng hòa âm 2. Kiểm tra đúng hay sai · Thẻ TH được dùng để xác đinh tiêu đề cột cho một bảng.dung · Để ẩn đường viền giữa các ô bạn phải gán cho thuộc tính BORDER bằng 0 dung · Chúng ta có thể xác định nhiều hơn một thuộc tính canh lề giữa các ô dung · “Cellspacing” được xác định khoảng cách giữa các lề và nội dung của ô trong bảúngai · Thuộc tính COLSPAN được dùng trong thẻ TH. dung · Tần số mẫu âm thanh quyết định chất lượng của file âm thanh. sai 5.5. Tự thực hành 1. Tạo bảng như dưới: Using Tables Employee Designation Salary Name John Manager 4000 David Officer 2500