Bài giảng Thiết kế web với HTML

Nội dung text: Bài giảng Thiết kế web với HTML

1. Các thẻ HTML cơ bản • Các thẻ HTML cơ bản (viết bằng Notepad hay Wordpad và lưu lại dưới dạng đuôi mở rộng .htm) Tạo một trang web hiển thị bên cạnh đoạn mã HTML. Thiết kế web với HTML 11
2. Bài 1 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 để hiThiểếnt k thế webị tivớiế HTMLng việt. 12
3. 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: Thiết kế web với HTML 13
4. 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 Thiết kế web với HTML 14
5. * Web browser – Là trình duyệt Web, ví dụ: Microsoft Internet Explorer, FireFox, Opera, Netscape Thiết kế web với HTML 15
6. 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ị. Thiết kế web với HTML 16
7. 1.4. Tag chú thích. . • Thẻ Thiết kế web với HTML 17
8. 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: Thiết kế web với HTML 18
9. Học tập HTML Chúc mừng bạn đã tạo được trang web đầu tiên! Thiết kế web với HTML 19
10. • 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. Thiết kế web với HTML 20
11. Thiết kế web với HTML 21
12. 6. Thực hành Thiết kế một trang HTML giới thiệu về bản thân. Thiết kế web với HTML 22
13. 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. Thiết kế web với HTML 23
14. 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. Thiết kế web với HTML 24
15. 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. Thiết kế web với HTML 25
16. 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ị * là số nguyên từ 1 đến 6. Ví dụ: Tiêu đề thứ 3 Tiêu đề nhỏ nhất Thiết kế web với HTML 26
17. • Để tiêu đề ở giữa: Tiêu đề • Để tiêu đề bên phải: Tiêu đề • Ví dụ Thiết kế web với HTML 27
18. 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 Thiết kế web với HTML 28
19. • 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 đề. Thiết kế web với HTML 29
20. 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. Thiết kế web với HTML 30
21. 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 ( ). Thiết kế web với HTML 31
22. • 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 Thiết kế web với HTML 32
23. 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ụ Thiết kế web với HTML 33
24. 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ụ Thiết kế web với HTML 34
25. 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 Thiết kế web với HTML 35
26. 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!!! Thiết kế web với HTML 36
27. 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ự “ ”. Thiết kế web với HTML 37
28. 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ụ Thiết kế web với HTML 38
29. 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!!! Thiết kế web với HTML 39
30. 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 Thiết kế web với HTML 40
31. • 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ụ Thiết kế web với HTML 41
32. 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 Thiết kế web với HTML 42
33. 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 Thiết kế web với HTML 43
34. 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 Thiết kế web với HTML 44
35. • Ví dụ, ta có đoạn mã sau: Ngô Thị An. Lê Xuân Châu. Vũ Đức Chiến. Nguyễn Đức Đại. Thiết kế web với HTML 45
36. 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ôû Thiết kế web với HTML 46
37. 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. Thiết kế web với HTML 47
38. 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 Thiết kế web với HTML 48
39. • Ví dụ, ta có đoạn mã sau: Ngô Thị An. Lê Xuân Châu. Vũ Đức Chiến. Nguyễn Đức Đại. Thiết kế web với HTML 49
40. Đá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 Thiết kế web với HTML 50
41. • Ví dụ, ta có đoạn mã sau: Ngô Thị An. Lê Xuân Châu. Vũ Đức Chiến. Nguyễn Đức Đại. Thiết kế web với HTML 51
42. 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. Thiết kế web với HTML 52
43. 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 . Thiết kế web với HTML 53
44. 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) Thiết kế web với HTML 54
45. • 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. Thiết kế web với HTML 55
46. 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. Thiết kế web với HTML 56
47. – 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. Thiết kế web với HTML 57
48. 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 Thiết kế web với HTML 58
49. 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Ø ® ® Thiết kế web với HTML 59
50. 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 Thiết kế web với HTML 60
51. 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 Thiết kế web với HTML 61
52. 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. Thiết kế web với HTML 62
53. 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. Thiết kế web với HTML 63
54. 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 Thiết kế web với HTML 64
55. • Ví dụ: Thiết kế web với HTML 65
56. • Để hình ảnh xuất hiện riêng một dòng, ta chỉ cần thêm tag . • Ví dụ: Thiết kế web với HTML 66
57. 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. Thiết kế web với HTML 67
58. • Ví dụ: Thiết kế web với HTML 68
59. 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ï: Thiết kế web với HTML 69
60. 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? Thiết kế web với HTML 70
61. • 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 Thiết kế web với HTML 71
62. 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) Thiết kế web với HTML 72
63. • Ví dụ: ee Thiết kế web với HTML 73
64. • Ví dụ: Thiết kế web với HTML 74
65. • Ví dụ: Thiết kế web với HTML 75
66. • 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. Thiết kế web với HTML 76
67. • Ví dụ Thiết kế web với HTML 77
68. • Ví dụ Thiết kế web với HTML 78
69. 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ẻ. Thiết kế web với HTML 79
70. 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 Thiết kế web với HTML 80
71. 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. Thiết kế web với HTML 81
72. 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://. Thiết kế web với HTML 82
73. – 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. Thiết kế web với HTML 83
74. 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: Thiết kế web với HTML 84
75. • Ví dụ: có đoạn mã Thiết kế web với HTML 85
76. 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ề. Thiết kế web với HTML 86
77. – Ví dụ, đoạn mã lệnh sau: Thiết kế web với HTML 87
78. • Để 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 Thiết kế web với HTML 88
79. 3. Liên kết đến các side Internet bên ngoài • Dạng đầy đủ: • Ví dụ có đoạn mã Thiết kế web với HTML 89
80. 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. Thiết kế web với HTML 90
81. – 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) Thiết kế web với HTML 91