›
›

Bài giảng Internet - Phần 6

pdf 162 trang Đức Chiến 04/01/2024 1850
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Internet - Phần 6", để 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:

  • pdfbai_giang_internet_phan_6.pdf

Nội dung text: Bài giảng Internet - Phần 6

  1. 6. Ngôn ngữ HTML
  2. 6. Ngôn ngữ HTML Tài liệu tham khảo 1. Tự học HTML và XHTML trong 24 giờ. Lê Minh Phương 2. Những bài thực hành HTML Đinh Xuân Lâm 3. Thiết kế quảng cáo và tiếp thị trên web HTML. Ngọc Anh Thư Press 4. Thiết kế và xuất bản trang Web với HTML. NXB Thống Kê Lê Anh Nhật 82
  3. 6. Ngôn ngữ HTML 6.1. Bài Mở Đầu 1. HTML là gì? HyperText Markup Language (HTML) – Ngôn ngữ đánh dấu siêu văn bản. Bao gồm các đoạn mã chuẩn với các quy ước được thiết kế để tạo các trang Web và được hiển thị bởi các trình duyệt Web. Lê Anh Nhật 83
  4. 6. Ngôn ngữ HTML 6.1. Bài Mở Đầu Web Page (Trang Web): Là tài liệu HTML. Web site: Là một số các trang Web liên kết với nhau. World Wide Web (www): Là dịch vụ toàn cầu của Internet mà HTML là nền tảng. Lê Anh Nhật 84
  5. 6. Ngôn ngữ HTML 6.1. Bài Mở Đầu 2. Những ứng dụng của HTML  HTML là nền tảng của World Wide Web, một dịch vụ toàn cầu của Internet.  HTML để thiết kế Web trên mạng Internet, tạo tài liệu, gửi cáo thị cho các công ty, cá nhân. Lê Anh Nhật 85
  6. 6. Ngôn ngữ HTML 6.1. Bài Mở Đầu 3. Trình soạn thảo trong quá trình học  Sử dụng trình soạn thảo NotePad có sẵn trong Windows. Start\Programs\Accessories\NotePad  Hoặc một trình soạn thảo bất kỳ trong windows.  FrontPage, DreamWare, Visual Studio Lê Anh Nhật 86
  7. 6. Ngôn ngữ HTML 6.1. Bài Mở Đầu 4. Những vấn đề cần quan tâm khi thiết kế Web  Tổ chức tài liệu: tựa đề, tiêu đề, đoạn văn, đường kẻ ngang, danh sách, bảng.  Thu ngắn văn bản.  Bố trí hình ảnh nhỏ gọn, hợp lý. Lê Anh Nhật 87
  8. 6. Ngôn ngữ HTML 6.2. Tạo chương trình đầu tiên 1.1 Tạo một trang Web mới. - Mở môi trường mà bạn muốn soạn thảo tài liệu HTML - Sử dụng chương trình soạn thảo NotePad: Start -> Program -> Accessories -> NotePad. •Chú ý: + Khi ghi tài liệu HTML vào ổ đĩa nhớ ghi đầy đủ phần mở rộng + Nếu sử dụng môi trường soạn thảo là NotePad trên Windows thì ghi ghi tài liệu HTML vào ổ đĩa fải chọn Encoding là UTF-8 để hiển thị tiếng việt. Lê Anh Nhật 88
  9. 6. Ngôn ngữ HTML 6.2. Tạo chương trình đầu tiên 1.2. Tag (thẻ) HTML là gì? Khi moät Web browser hieån thò moät trang Wed, Web Browser seõ ñoïc töø moät file vaên baûn ñôn giaûn vaø tìm kieám nhöõng ñoaïn maõ ñaëc bieät hay nhöõng Tag ñöôïc ñaùnh daáu bôûi kyù hieäu . * Tag mang thoâng tin String of text Trong đó: : tag bắt đầu. : tag kết thúc. * Tag roãng: Lê Anh Nhật 89
  10. Tag  Ví dụ: Chúc mừng bạn đến với HTML Tag Chúc bạn học tốt! Tag kết thúc Lê Anh Nhật 90
  11. 1.3. Cấu trúc cơ bản của một trang HTML tiêu đề trang Văn bản hiển thị. Lê Anh Nhật 91
  12. 1.4. Tag chú thích. .  Thẻ Lê Anh Nhật 92
  13. 1.5. Hiển thị tài liệu trong Web Browser 1.6. Tạo trang Web đầu tiên  Mở chương trình soạn thảo NotePad.  Sử dụng phông đánh tiếng việt: Unicode  Soạn thảo đoạn mã sau: Lê Anh Nhật 93
  14. Học tập HTML Chúc mừng bạn đã tạo được trang web đầu tiên! Lê Anh Nhật 94
  15.  Lưu lại với tên “MoDau.html” (vào trong thư mục của mình), với phần Encoding là UTF-8.  Lưu ý: phần mở rộng có thể là html hoặc htm đều được.  Vào thư mục của mình chạy tệp HTML mà ta vừa tạo, xem kết quả nhận được. Lê Anh Nhật 95
  16. Lê Anh Nhật 96
  17. 6. Thực hành Thiết kế một trang HTML giới thiệu về bản thân. Lê Anh Nhật 97
  18. Chương 2 Điều chỉnh 1 tài liệu HTML 2.1. Nạp tài liệu trong Web browse 2.1.1.Tạo sự thay đổi trong tài liệu HTML Vào thư mục làm việc, mở tệp html của mình. Mở trình soạn thảo NotePad. Từ thực đơn File, dùng Open để mở tệp mình đã làm. Từ đó thêm, bớt, sửa đổi văn bản trong đó. Lưu trở lại. Lê Anh Nhật 98
  19. 2.1.2.Nạp lại tài liệu trong Web browser  Trở lại thư mục làm việc, mở lại tệp đã sửa, quan sát, so sánh với trang Web đã mở lúc đầu về sự thay đổi. Lê Anh Nhật 99
  20. 2.1.3. Thực hành Đều chỉnh lại tài liệu HTML của mình, tạo một một trang HTML giới thiệu về một vài thành viên của lớp. Lê Anh Nhật 100
  21. 2.2. 6 mức tiêu đề 2.2.1. Những tiêu đề của HTML Tag tiêu đề: Nội dung hiển thị N là số nguyên từ 1 đến 6. Ví dụ: Tiêu đề thứ 3 Tiêu đề nhỏ nhất Lê Anh Nhật 101
  22.  Để tiêu đề ở giữa: Tiêu đề  Để tiêu đề bên phải: Tiêu đề • Ví dụ Lê Anh Nhật 102
  23. 2.2.2. Đặt những tiêu đề vào tài liệu html  Ví dụ đoạn mã sau vào trong phần thân Tiêu đề lớn nhất Tiêu đề lớn thứ hai Tiêu đề thứ 3 Tiêu đề thứ 4 Tiêu đề thứ 5 Tiêu đề nhỏ nhất Lê Anh Nhật 103
  24.  Lưu tài liệu lại với phần mở rộng là htm.  Mở thư mục làm việc để mở trang html của mình mới làm. Xem sự hiển thị 6 mức tiêu đề. Lê Anh Nhật 104
  25. 2.2.3. Thực hành Tạo một trang tài liệu html giới thiệu về bản thân, trong đó có dùng các tiêu đề để nhấn mạnh từng phần tài liệu. Lê Anh Nhật 105
  26. 2.3.Chia văn bản ra thành nhiều đoạn 2.3.1. Chia đoạn trong HTML  Tag chia đoạn:  Khi gặp Web browser sẽ chèn một dòng trống và bắt đầu một đoạn mới.  Tag không cần tag kết thúc ( ). Lê Anh Nhật 106
  27.  2.3.1. Căn chỉnh đoạn  Tag : align=align_type dùng chỉ định căn đoạn mới, align_type là center hoặc right.  Ví dụ: Chữ ở giữa Chữ bên phải Lê Anh Nhật 107
  28. 2.3.2. Chèn các dấu chia đoạn  Sử dụng tag để tạo một trang HTML, trong đó có các đoạn văn bản riêng biệt.  Dùng Web browser để kiểm tra công việc của mình.  Ví dụ Lê Anh Nhật 108
  29. 2.4. Đường kẻ ngang 2.4.1. Tạo đường kẻ ngang  Tag hard rule : chèn một đường thẳng trong trang html.  Tag : đẩy văn bản xuống dòng, nhưng không chèn thêm dòng trống.  Tag đoạn văn bản : Toàn bộ đoạn văn bản thụt vào ở đầu dòng.  Ví dụ Lê Anh Nhật 109
  30. 2.4.2. Định dạng thuộc tính cho đường kẻ. Thuoäc tính Moâ taû Size Thieát laäp ñoä daøy cuûa ñöôøng keû ngang Width Taïo ñoä roäng(pixel) hay tyû leä phaàn traêm cuûa ñöôøng thaúng so vôùi ñoä roäng cuûa cöûa soå Browser Align Caên leà cho ñöôøng thaúng (Left, right, center) Noshade Thay ñoåi theå hieän cuûa ñöôøng keû ngang khoâng coù boùng Theâm thuoäc tính vaøo ñöôøng thaúng Lê Anh Nhật 110
  31. Ví dụ size of hard ruler tag style trong HTML Không dùng width Width = 100, size = 12, color = #800000 Width = 200, size = 20, color = #808080 Width = 50%, size = 40, color = red Width = 50%, size = 40, color = blue Chúc các bạn thành công!!! Lê Anh Nhật 111
  32. 2.4.3.Thực hành Tạo một trang tài liệu html giới thiệu về mình, các bạn trong lớp. Trong đó có dùng tiêu đề, các tag vừa học để phân mảng từng phần. • Dùng “<” để viết ra ký tự “ ”. Lê Anh Nhật 112
  33. 2.5.Làm việc với các kiểu mẫu 2.5.1. Các Tag style của HTML  Tag Chữ đậm .  Tag Chữ nghiêng .  Tag Chữ gạch chân .  Tag Chữ gạch giữa .  Tag Chữ đánh máy . Ví dụ Lê Anh Nhật 113
  34. Sử dụng style Chia đoạn trong HTML Vì một thế giới ngày mai. Vì tương lai của mỗi chúng ta Hãy cố gắng học bạn ơi Hà Nội, ngày 14/3/2007. Chúc các bạn thành công!!! Lê Anh Nhật 114
  35. 2.5.2.Tag định dạng logic  Tag đậm logic type Dòng này đậm  Tag nghiêng logic type Dòng này nghiêng  Tag gạch ngang logic type Dòng này gạch giữa Lê Anh Nhật 115
  36.  Tag kiểu đánh máy logic type Chữ đánh máy  Tag chỉ số trên x y > xy  Tag chỉ số dưới x 2 > x2  Ví dụ Lê Anh Nhật 116
  37. 2.5.2. Áp dụng tag style vào trong tài liệu html  Chúng ta có thể áp dụng linh hoạt các tag , , , , , để tạo các kiểu khác, như: đậm nghiêng, chữ đánh máy nghiêng, chữ đánh máy đậm Lê Anh Nhật 117
  38. 3.5.3.Thực hành Tạo một trang tài liệu html giới thiệu về mình, các bạn trong lớp. Trong đó có dùng các tag style vừa học nhấn mạnh từng phần. Web mẫu Lê Anh Nhật 118
  39. 2.6.Danh sách 2.6.1.Danh sách không có thứ tự  Sử dụng tag : cho một danh sách các mục với những ký hiệu được đánh dấu phía trước.  Tag chỉ ra từng mục cho một danh sách. Doøng 1 Doøng 2 Doøng 3 Lê Anh Nhật 119
  40.  Ví dụ, ta có đoạn mã sau: Ngô Thị An. Lê Xuân Châu. Vũ Đức Chiến. Nguyễn Đức Đại. Lê Anh Nhật 120
  41. Ta thêm thuộc tính type = circle/square/disk vào trong tag : Thuoäc tính Moâ taû Type = disk Daáu hình troøn Type = square .Daáu hình vuoâng Type = circle  Daáu hình troøn môû Lê Anh Nhật 121
  42. Ví dụ:  Ngô Thị An. Lê Xuân Châu.  Ngô Thị An. Lê Xuân Châu.  Ngô Thị An. Lê Xuân Châu. Lê Anh Nhật 122
  43. 2.6.2. Danh sách có thứ tự  Là danh sách được Web browser đánh thứ tự từ 1 cho đến kết thúc danh sách.  Dùng tag  : N là chỉ định số bắt đầu. ‘*’ có thể là: a, A, i. I. Doøng 1 Doøng 2 Doøng 3 Lê Anh Nhật 123
  44.  Ví dụ, ta có đoạn mã sau: Ngô Thị An. Lê Xuân Châu. Vũ Đức Chiến. Nguyễn Đức Đại. Lê Anh Nhật 124
  45. Đánh các dạng đánh số thứ tự Thuoäc tính Moâ taû Type = A Thieát laäp kyù töï chöõ hoa. Type = a Thieát laäp kyù töï chöõ thöôøng Type = I Thieát laäp chöõ soá La maõ daïng chöõ hoa Type = i Thieát laäp chöõ soá La maõ daïng chöõ thöôøng Type = 1 Thieát laäp kieåu soá Start = n Taïo giaù trò baét ñaàu cuûa danh saùch laø n Lê Anh Nhật 125
  46.  Ví dụ, ta có đoạn mã sau: Ngô Thị An. Lê Xuân Châu. Vũ Đức Chiến. Nguyễn Đức Đại. Lê Anh Nhật 126
  47. Tag duøng ñeå ñònh daïng danh saùch coù thöù töï: Dòng 1 Dòng 2 Dòng 3 - Neáu khoâng coù Start = n thì giaù trò baét ñaàu cuûa danh saùch laø 1 hoaëc laø soá thöù töï ñaøu tieân. - Muoán thay ñoåi giaù trò cuûa töøng phaàn töû rieâng bieät, duøng Type = n vaø thuoäc tính Value= giaù trò trong Tag thì phaàn coøn laïi cuûa danh saùch seõ ñöôïc ñònh daïng vaø ñaùnh soá thöù töï töø phaàn töû naøy. Lê Anh Nhật 127
  48. 2.6.3.Danh sách các định nghĩa  Nằm giữa các tag .  Dùng với để chỉ định mẫu cần định nghĩa.  Dùng để chỉ định nghĩa cho mẫu xác định bởi . Lê Anh Nhật 128
  49. Caùc Tag söû duïng ñeå ñònh nghóa nhö sau: Thuaät ngöõ caàn ñònh nghóa Lôøi dieãn giaûi Thuaät ngöõ caàn ñònh nghóa Lôøi dieãn giaûi . - Thuaät ngöõ caàn ñònh nghóa: Coá ñònh treân moät doøng - Lôøi dieãn giaûi: Coù theå laø ñoaïn vaên vieát treân nhieàu doøng - Trong danh saùch coù theå coù hoaëc khoâng lôøi dieãn giaûi (töùc laø coù hoaëc khoâng Tag DD sau Tag DT) Lê Anh Nhật 129
  50.  Ví dụ, ta có đoạn mã sau: Tình yêu Tình yêu là bát bún riêu Bao nhiêu sợi bún bấy nhiêu sợi tình. HTML Ngôn ngữ để thiết kế trang web tĩnh. C++ Ngôn ngữ lập trình hướng đối tượng. Là ngôn ngữ lập trình khó học. Lê Anh Nhật 130
  51. 2.6.4.Danh sách lồng nhau  Danh sách có thứ tự, không thứ tự và danh sách định nghĩa có thể lồng vào nhau theo nhiều mức độ khác nhau.  Ngoài lồng các danh sách lại với nhau, ta con có thể trộn lẫn các loại danh sách. Lê Anh Nhật 131
  52. – Ví dụ, ta có đoạn mã sau: Ngô Thị An. Là nữ. Nghỉ học ngày 7-3 Phạm Hồng Duyên Đi học chăm chỉ. Hát hay. Múa giỏi. Lê Anh Nhật 132
  53. 2.6.6.Thực hành 1. Tạo trang web chứa danh sách lớp. 2. Tạo một trang tài liệu html giới thiệu về trường, lớp, bạn bè Trong đó có sử dụng các danh sách không thứ tự, danh sách có thứ tự, danh sách lồng nhau Lê Anh Nhật 133
  54. 2.7. Chèn ký tự đặc biệt. 2.7.1. Ký tự đặc biệt &xxxx; Trong ñoù xxxx laø teân maõ (code name) cho kí töï ñaëc bieät ñoù. Ví dụ: é eù r r © © Ù UØ ® ® Lê Anh Nhật 134
  55. 2.7.2.Caùc daáu nhaán. < thay cho & thay cho & Ví dụ Mã Kết quả a < b a CSDL coâ giaùo & sinh vieân coâ giaùo & sinh vieân Lê Anh Nhật 135
  56. 2.7.3. Nhöõng khoaûng troáng theâm vaøo   Ví duï: A B C D E A  B  C  D  E  Keát quaû hieån thò: A B C D E Lê Anh Nhật 136
  57. Chương 3 Thêm hình ảnh vào trang Web 3.1. Các dạng hình ảnh của web • Có nhiều dạng tệp tin hình ảnh: PICT, GIF, TIFF, BMP, JPEG, • Dạng chuẩn có thể hiển thị trong một trang web là Gif. • Dạng hình ảnh khác sử dụng trong web là Jpeg. Lê Anh Nhật 137
  58. 3.2 Vài điểm cần biết khi sử dụng đồ hoạ  Kích thước hình ảnh càng nhỏ càng tốt, nên nhỏ hơn 100Kb.  Các hình ảnh không nên rộng hơn 480 điểm và cao hơn 300 điểm.  Hình ảnh là những thứ tạo thêm nghĩa cho tài liệu.  Một hình ảnh nhỏ có thể xuất hiện nhiều lần trong một trang mà chỉ bị chậm rất ít thời gian. Lê Anh Nhật 138
  59. 3.3. Đưa hình ảnh vào trang web  Nên để các hình ảnh vào một thư mục riêng (Ví dụ như thư mục Image). •Cú pháp: Trong đó FileName.gif là tên một hình ảnh dạng gif hoặc jpg ñeå ôû cuøng thö muïc vôùi taøi lieäu HTML Lê Anh Nhật 139
  60. • Ví dụ: Lê Anh Nhật 140
  61.  Để hình ảnh xuất hiện riêng một dòng, ta chỉ cần thêm tag .  Ví dụ: Lê Anh Nhật 141
  62. 3.4. Định dạng hình ảnh 3.4.1. Chieàu cao, chieàu roäng cuûa hình aûnh. Tag: Trong ñoù X laø chieàu roäng vaø Y laø chieàu cao cuûa hình aûnh ñöôïc tính baèng soá ñieåm (pixel). –Khi thêm hai thuộc tính Width và height giúp cho web hiển thị nhanh hơn. Lê Anh Nhật 142
  63.  Ví dụ: Lê Anh Nhật 143
  64. 3.4.2. Mô tả hình ảnh  Tag coù daïng: Ngöôøi söû duïng Browser vaãn xem ñöôïc hình aûnh thì khi ñöa troû chuoät ñeán hình aûnh seõ xuaát hieän “Doøng moâ taû hình aûnh” . Ví duï: Lê Anh Nhật 144
  65. 3.4.4. Sắp xếp hình ảnh so với văn bản bao quanh Chèn ảnh vào giữa thì làm thế nào? Lê Anh Nhật 145
  66.  Tag trước tag Kiểu sắp xếp: Left: hình ảnh chèn vào bên trái văn bản Center: hình ảnh chèn vào giữa văn bản Right: hình ảnh chèn vào bên phải văn bản Lê Anh Nhật 146
  67. 3.4.4.Sắp xếp trong hàng của văn bản và hình ảnh Trong đó:  Value có các giá trị sau:  Top: Chỉnh đáy của dòng văn bản ngang với đỉnh của ảnh.  Middle: Chỉnh đáy của dòng văn bản nằm khoảng giữa ảnh.  Bottom: Chỉnh đáy của dòng văn bản bằng với đáy của ảnh. (luôn mặc định) Lê Anh Nhật 147
  68.  Ví dụ: ee Lê Anh Nhật 148
  69.  Ví dụ: Lê Anh Nhật 149
  70.  Ví dụ: Lê Anh Nhật 150
  71.  Ngoài ra ta có thể thêm từ khóa align=right/left vào trong tag .  Để có viền khung hoặc không, ta sử dụng khoá Border=N trong tag . Trong đó N là số nguyên lớn hơn hoặc bằng 0, chỉ độ dày của viền khung. Lê Anh Nhật 151
  72.  Ví dụ Lê Anh Nhật 152
  73.  Ví dụ Lê Anh Nhật 153
  74. 7. Thực hành Tạo một trang tài liệu html chứa các hình ảnh ngộ nghĩnh + các lời bình vui vẻ. Lê Anh Nhật 154
  75. Chương 4 Liên kết và URL 4.1. Hoạt động của các liên kết - Caùc lieân keát ñöôïc bieåu thò bôûi chöõ maàu xanh coù gaïch döôùi goïi laø caùc anchor. - Ñeå taïo caùc lieân keát: Tag (anchor). - Ñeå chæ ñòa chæ lieân keát ñeán ta duøng thuoäc tính HREF = cuûa Tag Lê Anh Nhật 155
  76. 4.2.Thế nào là URL  URL-Uniform Resource Locator-Địa chỉ tài nguyên thống nhất.  URL là địa chỉ của trang web, khi kích chuột thường nó chuyển đến các tài liệu liên quan. Lê Anh Nhật 156
  77. 4.3. Cấu trúc của URL – URL-Uniform Resource Locator-Địa chỉ tài nguyên thống nhất. – URL là địahhhu chỉ của trang web, khi kích chuột thường nó chuyển đến các tài liệu liên quan.  URL bao gồm hai phần chính: giao thức (protocol) và đích truy cập (target).  Giao thức chung trên web là http://, giao thức này nhận các tài liệu html.  Ngoài ra còn các giao thức khác như: Gopher://, ftp:// và telnet://. Lê Anh Nhật 157
  78. URL tương đối: là URL trỏ đến trang thuộc cùng side với trang hiện hành, chỉ khác nhau tên tập tin. URL tuyệt đối: là URL trỏ đến trang riêng biệt từ bất cứ đâu trên internet. Lê Anh Nhật 158
  79. 4.4. Các dạng liên kết  Liên kết đến tập tin cục bộ a) Liên kết đến tập tin cục bộ • Là liên kết đơn giản nhất để mở tập tin html trong cùng một thư mục. Có dạng: Lê Anh Nhật 159
  80. • Ví dụ: có đoạn mã Lê Anh Nhật 160
  81. b) Liên kết Anchor đến một hình ảnh  Đoạn mã lệnh:  Web browser sẽ tự động gọi hình ảnh về. Lê Anh Nhật 161
  82. Ví dụ, đoạn mã lệnh sau: Lê Anh Nhật 162
  83.  Để web browser mở văn bản, hình ảnh ở một trang web mới. Ta sử dụng từ khoá target=“_blank” trong tag Lê Anh Nhật 163
  84. 3. Liên kết đến các side Internet bên ngoài • Dạng đầy đủ: • Ví dụ có đoạn mã Lê Anh Nhật 164
  85. 4.4.3. Liên kết đến các phần của trang a) Anchor được đặt tên • Anchor được đặt tên là một dấu hiệu tham khảo ẩn cho một phần của tập tin html. • Được sử dụng để tạo liên kết đến phần khác của một trang khi trang đó dài. Lê Anh Nhật 165
  86.  Dạng html cho việc cho việc tạo anchor  Ví dụ: b) Viết một liên kết đến một Anchor được đặt tên.  Dạng html:  Ví dụ (tệp Bai8_3.html) Lê Anh Nhật 166
  87.  Liên kết này thường dùng để xây dựng mục lục. c) Thêm liên kết tới Anchor được đặt tên trong tài liệu khác  Dạng mã:  Ví dụ: có đoạn mã Lê Anh Nhật 167
  88. 4.4.4. Liên kết đến hình ảnh a)Button siêu liên kết Ta cũng có thể gắn hình ảnh thay cho các text hyperlink. Để làm điều này, ta đặt tag hình ảnh vào trong phần siêu văn bản của tag Anchor. Ví dụ: trong đó có đoạn mã Lê Anh Nhật 168
  89. 4.4.5. Thực hành  Tạo vài trang html để chúng liên kết với nhau, đưa vào các hình ảnh minh hoạ, các liên kết hình ảnh, tạo menu cho trang chính  Bắt đầu làm bài tập lớn được rồi. Lê Anh Nhật 169
  90. 4.5. Danh thiếp và địa chỉ liên kết đến Email 4.5.1.Dạng tag address  Ở cuối một trang web thường cung cấp thông tin về tác giả và tài liệu. Và cũng có thể gửi Email cho tác giả. Ta có thể sử dụng tag Đánh địa chỉ ở đây Lê Anh Nhật 170
  91. Các dòng text trong đoạn tag này là chữ có kiểu nghiêng.  Chú ý: trong tag này ta vẫn có thể sử dụng các tag khác, ví dụ như Lê Anh Nhật 171
  92.  Ví dụ ta có đoạn mã sau: Theo thông tin của Lê Anh Nhật , điện thoại 0912.844.866 Lê Anh Nhật 172
  93. 4.5.2. Liên kết đến Email  Để người đọc có thể gửi Email cho tác giả, ta chỉ cần thêm liên kết siêu văn bản, trong đó có sử dụng từ khoá “mailto:”. Lê Anh Nhật 173
  94.  Ví dụ: trong đó có đoạn mã: E-mail: Lê Anh Nhật 174
  95. 4.5.3. Lieân keát ñeán moät FTP site FTP site: duøng ñeå sao cheùp taäp tin giöõa caùc maùy tính vôùi nhau. Nhöõng ngöôøi söû duïng FTP truy caäp vaøo moät maùy tính töø xa ñeå laáy moïi thöù maø hoï caàn. Taïo lieân keát: Ví duï: Lê Anh Nhật 175
  96. 4.5.4. Thực hành Thêm các địa chỉ và liên kết Email vào các tài liệu của mình đã làm ở các bài trước. Lê Anh Nhật 176
  97. Chương 5. Trang trí cho văn bản 5.1. Mầu sắc và cẩu trúc nền 5.1.1. Cơ bản về màu sắc  Trong một web browser, ta có thể sử dụng 256 màu của hệ thống để tạo màu cho chữ hoặc nền văn bản.  Mỗi một màu được xác định dựa trên các giá trị RED-GREEN-BLUE (RGB) của nó.  R,G,B lấy giá trị từ 0 đến 255. Lê Anh Nhật 177
  98.  Thay vì xác định màu theo dạng tương tự "123,211,143" thì mỗi số xác định theo kiểu thập phân se được chuyển sang hệ 16.  Chỉ còn số dạng: "xxyyzz", trong đó:  xx là trị của màu Red.  yy là trị của màu Green.  zz là trị của màu Blue. Lê Anh Nhật 178
  99.  Ví dụ một số màu: Màu có số 008000 Màu có số FFFF00 Màu có số FF0000 Màu có số 008080 Màu có số 800000 Màu có số 808080 Màu có số 00FFFF Lê Anh Nhật 179
  100. MAÀU VGA treân Windows Xanh döông saùng Aqua Xanh da trôøi Blue Xaùm Gray Xanh laù caây Lime Tím than Navy Tím ñoû purple Traéng White Ñen Black Tím fuchsia Xanh Green Ñoû red Vaøng yellow Lê Anh Nhật 180
  101. 5.1.2. Màu nền cố định • Ta điều chỉnh tag như sau: • trong đó XXYYZZ là dạng biểu diễn thập lục phân của màu được chỉ định. • Ví dụ Lê Anh Nhật 181
  102.  Màu của chữ và những siêu văn bản: Ta sử dụng dạng:  Trong đó: TEXT là màu chữ, LINK là màu của mục liên kết siêu văn bản, VLINK là màu của mục liên kết siêu văn bản đã xem.  Chú ý: thứ tự của các mục trong tag không quan trọng. Lê Anh Nhật 182
  103. 5.1.3. Cấu trúc nền  Ta có thể sử dụng tệp hình ảnh nhỏ để làm nền cho trang web. (dạng gif, jpg)  Chú ý:  Kích cỡ tệp ảnh nên nhỏ.  Chọn màu chữ và màu nền tương phản.  Nhược điểm: thời gian nạp trang web sẽ chập hơn. Lê Anh Nhật 183
  104.  Dạng HTML cho nền hình ảnh di chuyển theo khi cuốn trang web:  Ví dụ  Dạng sau cho một nền đứng yên: Lê Anh Nhật 184
  105.  Thực hành Thêm màu nền, ảnh nền, màu chữ vào các trang web của bạn. Lê Anh Nhật 185
  106. 5.2. Trang trí cho văn bản 5.2.1. Kích cỡ phông chữ  Tag:  trong đó N là cỡ chữ có giá trị từ 1 đến 7. * Giá trị Font chữ mặc định là 3 Lê Anh Nhật 186
  107. •Moät caùch söû duïng khaùc cuûa Tag Font laø: Doøng vaên baûn Doøng vaên baûn Caùc giaù trò +N hoaëc-N cho bieát ñoä dòch chuyeån (offset) so vôùi kích côû phoâng hieän taïi. Lê Anh Nhật 187
  108.  Ngoài ra còn có các tag: > Chữ to. > Chữ nhỏ. (tag này ít dùng vì thiếu linh hoạt)  Cách khác để sử dụng: > Dịch chuyển font hiện tại lên 1. > Dịch chuển font hiện tại xuống 2. Lê Anh Nhật 188
  109.  Font cơ sở: Tag basefont không có tag đóng, nó vẫn là cỡ phông cơ sở cho đến khi gặp một tag khác xuất hiện.  Ví dụ Lê Anh Nhật 189
  110. 5.2.2. Màu của phông chữ  Ta có thể bổ sung thêm thuộc tính màu vào trong tag : Có thể thay #xxyyzz bằng tên một số màu cơ bản: red, aqua, blue, gray, lime, Ví dụ Lê Anh Nhật 190
  111. 5.2.3. Dạng phông text  Chú ý: nên sử dụng các dạng phông thông dụng của máy tính. Lê Anh Nhật 191
  112.  Ví dụ:  Thực hành: Tạo trang web riêng của bạn. Tạo trang web của nhóm. Lê Anh Nhật 192
  113. 5.3. Easy hard rulers 5.3.1. Độ dày của đường  Ta đã học tag cho kết quả là một đường thẳng ngang màn hình. Lê Anh Nhật 193
  114.  Ta có thể tăng độ dày của đường với tham số N: trong đó N là một số chỉ độ dày.  Ví dụ: Lê Anh Nhật 194
  115. 5.3.2. Độ rộng của đường  Ta sử dụng tham số width  Cú pháp: hoặc trong đó N là số điểm của đường thẳng, Z% là tỉ lệ phần trăm của trang hiện hành. Lê Anh Nhật 195
  116. Có thể thêm tham số align="left", align="right". để căn chỉnh đường kẻ * Màu sắc của đường kẻ  Ta thêm tham số color = #xxyyzz. * Đường kẻ không có bóng  Ta thêm từ khoá noshade sau tag hr.  Ví dụ: Lê Anh Nhật 196
  117.  Thực hành Thêm vào trang web của bạn các đường thẳng vừa mới học. Lê Anh Nhật 197
  118. 5.4. Xét thêm về sự chỉnh lề 5.4.1. Sự chỉnh lề văn bản  ta có thể dùng tag: text vẫn có tác dụng là căn đoạn văn bản ở giữa. Lê Anh Nhật 198
  119.  tag xoá đi sự sắp xếp:    Lê Anh Nhật 199
  120. 5.4.2. Chỉnh lề và sắp xếp văn bản  Còn một tag nữa cũng để chỉnh lề văn bản: text text text  Ví dụ Lê Anh Nhật 200
  121. 5.5. Nhạc nền – Chèn video 5.5.1. Nhạc nền : định nhạc nền cho trang tài liệu.  Cú pháp:  url: chỉ định tệp tin nhạc có định dạng wav, au, midi.  n: số lần lặp lại bài hát, n=-1 sẽ lặp cho đến đóng trang web. Lê Anh Nhật 201
  122.  Chú ý: tag được đặt sau phần và trước tag . Hoặc trong .  Ví dụ: Background Sound Enjoy my sound. Lê Anh Nhật 202
  123. 5.5.2. Chèn Video Ta có thể nhúng file video (*.avi, *.mpg, *.mwv) vào tài liệu html, ta thêm thuộc tính dynscr=“filename” vào trong tag  Ví dụ: Lê Anh Nhật 203
  124.  ngữ pháp:   Học viên tự tìm hiểu về các thuộc tính.  Ví dụ Lê Anh Nhật 204
  125. 5.5.3.Tạo một dòng chữ chạy trên màn hình trang web  Ngữ pháp: Lê Anh Nhật 205
  126.  Học viên tự tìm hiểu ý nghĩa các thuộc tính của .  Ví dụ Lê Anh Nhật 206
  127. Chương 6. Bảng (Table) 6.1. Những tag cơ bản của bảng text text Lê Anh Nhật 207
  128.  Ví vụ: tạo một bảng 2 hàng, 2 cột Hàng 1, cột 1 Hàng 1, cột 2 Hàng 2, cột 1 Hàng 2, cột 2 Lê Anh Nhật 208
  129. 6.2. có những thộc tính sau:  border = n: tạo viền xung quanh bảng.  cellpadding = N: cho biết có bao nhiêu khoảng trắng giữa khối bên trong phần tử và vách ngăn.  cellspacing = M: Cho biết độ rộng của những đường bên trong bảng để chia các phần tử. Lê Anh Nhật 209
  130.  width = n | n%, height = m | m% : định trước kích thước rộng/cao cho bảng.  align = left | right: Cho phép bảng dóng lề trái hoặc phải.  valign = top | bottom: để chỉnh lề trên hoặc giữa hoặc dưới.  bgcolor = #xxyyzz: thiết lập màu nền của bảng. Lê Anh Nhật 210
  131.  bordercolor = #xxyyzz: thiết lập màu viền cho bảng. bordercolorlight = #xxyyzz : thiết lập màu nhạt hơn cho viền bảng 3 chiều. bordercolordark = #xxyyzz : thiết lập màu đậm hơn cho viền bảng 3 chiều.  background = " image.gif|jpg": thiết lập nền cho các ô văn bản là hình ảnh với địa chỉ của nó. Lê Anh Nhật 211
  132. 6.3.  Đặc tả dòng của bảng, số dòng của bảng bằng số phần tử trong cặp .  Một số thuộc tính:  align = left | center | right: để chỉnh lề trái/giữa/phải.  valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới. Lê Anh Nhật 212
  133. bgcolor: đặc tả màu nền của hàng. bordercolor: đặc tả màu viền của bảng. bordercolorlight: thiết lập màu nhạt hơn cho màu viền 3 chiều. bordercolordark: thiết lập màu đậm hơn cho màu viền 3 chiều. Lê Anh Nhật 213
  134. 6.4.  Đại diện cho ô dữ liệu trong bảng, ô dữ liệu phải xuất hiện trong hàng của bảng.  align = left | center | right: để chỉnh lề trái/giữa/phải dữ liệu trong ô.  valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới dữ liệu trong ô.  width = n | n%: đặc tả độ rộng của ô.  hight = n | n%: đặc tả chiều cao của ô. Lê Anh Nhật 214
  135.  colspan = N: Tạo một ô bằng N ô liền kề theo dòng.  rowspan = M: Tạo một ô bằng M ô liền nhau theo cột. ngoài ra còn có các thuộc tính:  bgcolor = #xxyyzz.  bordercolor = #xxyyzz.  bordercolorlight = #xxyyzz.  bordercolordark = #xxyyzz.  background = " image ". Lê Anh Nhật 215
  136. 6.5.  cũng giống tag nhưng thường dùng cho tiêu đề của bảng, dòng text sẽ được viết chữ đậm và căn giữa ô.  có những thuộc tính sau:  align = left | center | right: để chỉnh lề trái/giữa/phải dữ liệu trong ô. Lê Anh Nhật 216
  137. valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới dữ liệu trong ô.  width = n | n%: đặc tả độ rộng của ô.  hight = n | n%: đặc tả chiều cao của ô.  nowrap: thiết lập cho những ô không muốn có dòng nào bị gãy để dữ liệu vừa khít với ô tiêu đề.  colspan = n: đặc tả số cột của bảng mà ô này sẽ trộn lại thành 1. (mặc định = 1) Lê Anh Nhật 217
  138.  rowspan: đặc tả số hàng của bảng mà ô này sẽ trộn lại thành một. (mặc định=1)  bgcolor = #xxyyzz.  bordercolor = #xxyyzz.  bordercolorlight = #xxyyzz.  bordercolordark = #xxyyzz.  background = " image ". Lê Anh Nhật 218
  139. • Ví dụ 6.6. Thực hành:  Sử dụng bảng biểu để thiết kế giao diện cho trang chính của web. Lê Anh Nhật 219
  140. Chương 7. Frame 7.1. Giới thiệu frame Frame mở rộng khả năng hiển thị trang web bằng cách cho phép chia miền hiển thị thành nhiều vùng. Mỗi vùng như vậy được gọi là frame và có những đặc điểm sau:  Nó có thể truy cập tới một URL một cách độc lập với các frame khác.  Mỗi frame có thể đặt tên, dùng làm đích trong liên kết.  Nó có thể tự thay đổi kích thước khung nhìn, hoặc có thể không thay đổi đối với người sử dụng. Lê Anh Nhật 220
  141. Lê Anh Nhật 221
  142. * Cú pháp Frame  Cấu trúc cơ bản: Lê Anh Nhật 222
  143. 7.2. Thẻ Frameset  rows: chỉ chia hàng, tuỳ theo tham số.  cols: chỉ chia cột, tuỳ theo tham số.  border: độ dày đường viền.  framespacing: khoảng cách các frame. Lê Anh Nhật 223
  144. n1, n2, m1, m2, : là giá trị thuộc tính được tính bằng điểm hoặc phần trăm tương đối. Và có thể là dấu '*', frame tương ứng sẽ tự động điều chỉnh. N: là độ dày tương ứng với các thuộc tính. frameborder: thiết lập đường viền cho toàn bộ tập frame, có giá trị yes hoặc no. Lê Anh Nhật 224
  145. Ví dụ: chia thành 2 hàng, hàng thứ nhất chiếm 30% màn hình, còn lại là hàng thứ 2. chia 3 cột, cột thứ 2 có độ rộng 100 điểm, các cột còn lại sẽ tự động phân chia. : đặt đường viền, khoảng cách, Lê Anh Nhật 225
  146. 7.3. Thẻ frame  Cú pháp: Lê Anh Nhật 226
  147. noresize: nếu có thuộc tính này thì người sử dụng không thể thay đổi kích thước hiển thị frame. name: gán một tên cho một frame, nó có thể làm đích cho các liên kết từ các tài liệu khác. with: chiều rộng frame. height: chiều cao frame. scrolling: đặt thuộc tính thanh cuốn. Lê Anh Nhật 227
  148. Ví dụ: tạo trang web có 4 frame như sau: Lê Anh Nhật 228
  149. Tệp "frame_index.html" vi du ve frame index Xin lỗi, trình duyệt không trợ giúp frame Lê Anh Nhật 229
  150. Tệp "frame_content.html" vi du ve frame content MỤC LỤC Lê Anh Nhật 230
  151. 7.4. Thực hành tự do Lê Anh Nhật 231
  152. Lê Anh Nhật 232
  153. Chương 8. FORM 8.1. Form Form cho phép bạn nhận thông tin hay phản hồi từ người dùng. Tạo Form: Action = “URL”> yêu cầu thông tin bằng một trong nhiều cách khác nhau : nhận giá trị trị Post hoặc Get Lê Anh Nhật 233
  154. 8.2. Trường văn bản và các thuộc tính. > Text Cho phép người dùng nhập nhiều dòng văn bản vào Form với số dòng và số cột cần hiển thị. Text: Hướng dẫn người sử dụng nhập dữ liệu. Value: OFF (giá trị mặc định) nếu không dùng Wrap. Lê Anh Nhật 234
  155. 8.3. Text Box. Cho phép người dùng nhập một đoạn văn bản có chiều dài Size và chiều dài tối đa cho đoạn văn bản là MaxLength (Size < MaxLength) Lê Anh Nhật 235
  156. 8.4. Password Khi nhập dữ liệu vào thì các ký tự được dấu đi và thay vào đó là những ký tự “*” hay “x” tuỳ thuộc vào trình duyệt. Lê Anh Nhật 236
  157. 8.5. Check Box String Tuỳ chọn này được dùng khi có nhiều giá trị cho một tuỳ chọn. Muốn xác định trạng thái mặc định của checkBox là đánh dấu hoặc không đánh dấu thì thêm một trong hai giá trị: Checked hoặc UnChecked String: Là xâu thông báo lựa chọn. Lê Anh Nhật 237
  158. 8.6. Radio Button String Cho phép người dùng lựa chọn trong các tuỳ chọn được định trước. Thuộc tính Name phải giống nhau và thuộc tính Value phải khác nhau Lê Anh Nhật 238
  159. 8.7. Trường Hidden. Được thiết kế để truyền (ngầm) giá trị đến Web Server và Script. Giá trị truyền thường là một từ khoá, giá trị kiểm tra hay một chuỗi bất kỳ Lê Anh Nhật 239
  160. 8.8. Submit Button. Dùng để chuyển dữ liệu trên Form mà người sử dụng đã nhập sang một trang mới. String: Là dòng chữ ghi trên nút, nếu không có Value thì mặt định là Submit ghi trên nút Lê Anh Nhật 240
  161. 8.9. Reset Button. Dùng để xoá dữ liệu trên Form mà người sử dụng đã nhập, khởi động lại cho các phần tử trên Form. String: Là dòng chữ ghi trên nút, nếu không có Value thì mặt định là Reset ghi trên nút Lê Anh Nhật 241
  162. 8.10. ComboBox và ListBox. Multiple > String String String . - : Định nghĩa một phần tử trong danh sách. -Multiple: Cho phép người dùng chọn cùng một lúc nhiều giá trị. Lê Anh Nhật 242