Một số khác là các Web site cá nhân, cung cấp các thông tin cho những ai quan tãm.. 165 Chương 13 GIỚI THIỆU TRANG KlỂU XẾP LỚP Cascading Síyle Sheet Những thuận \di trong việc sử dụng c
Trang 2T Ở S Á C H T I N H Ọ C C H Ấ T l ư ợ n g c a o E L I G R O U P
NHÓM TẤ C GIẢ ELICOM
C h l O V V O R L D W I D E W E B
NHÀ X U Ấ T BẢN HÀ NỘI
Trang 3, D V - D V 1 8
Mã số : - 51 - 449 - 2000
Trang 4L Ờ I G I Ớ I T H I Ệ U
Bất cứ ai cũng có thể viết một Web site riồng của mình và đưa lên Internet Một số Web site chuyên dành cho mục đích kinh doanh, thương mại với các dịch vụ buôn bán Một số khác là các Web site cá nhân, cung cấp các thông tin cho những ai quan tãm C ò n bạn đã quyết định Web site của mình thuộc loại nào chưa ? C h o dù chưa, thì bạn cũng nên biết rằng : Tất cả các trang Web đều được viết bằng H T M L (Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản)
H T M L cho phép bạn định dạng vãn bản, bổ sung đồ họa, âm thanh và hình ảnh video, và lưu nó vào file Text Only hoặc A S C II mà mọi máy tính đều đọc được B í quyết của ngôn ngữ này chính là các thẻ, các từ khóa nằm giữa 2 dấu lớn hơn (>) và nhỏ hơn (<) Trong khi có nhiều chương trình phần mềm tạo mã H T M L cho bạn, thì việc tự học H T M L giúp bạn không bao giờ bị hạn c h ế ò
các tính năng của chương trình Th ay vào đó, bạn sẽ có khả năng bổ sung mọi thứ mà không phải khắc phục những phức tạp của phần mểm, hay phải chờ đc^ các cập nhật của phần mềm.
Với cuốn " N g ô n n g ữ H T M L 4 c h o W o r ỉ d W i d e W e b \ g i^ thiệu phiên bản mới nhất
về H T M L, bạn sỗ tự tin tạo những trang Web rỊêng của chính mình Bằng những chỉ dẫn chi tiết, tỉ
mỉ và dễ hiểu, kèm theo những hình ảnh minh họa thiết thực, cuốn sách sẽ giúp bạn cảm thấy dễ dàng khi tiến hành tạo trang Web, dù cho bạn m ớ ì tạo trang Web lần đầu và chưa có vốn kiến thức
gì về H T M L cả Nếu đã biết đôi chút về H T M L , thì đây thực sự là một cuốn sách tham khảo quý giá giúp bạn thực hiện hoàn hảo ỷ tưởng của mình.
N H Ó M T Á C G IẢ E L I C O M
Trang 5MỤC LỤC
XÂY DỰNG CÁC KHỐI HTML
Tao íàì liệu H TM L 9
Các thẻ H TM L 9
Thuộc tín h 9
Giá trị 9
Dấu nháy 10
Chữ hoa và chữ thường 10
Thẻ lồng 10
Cách khoảng 11
Các ký tự đặc biệt 11
Tôn rú e 12
Các địa chỉ U R L 13
U R L tuyệt đố i 13
U R L tham chiếu 14
Chương 2. BẮT ĐẦU XÂY DỰNG TRANG WEB Thiết kế s ite 16
Tổ chức F ì ỉ g 17
Tạo một trang Web mcrt 17
Bắt đầu tạo trang Web 18
Tạo nền 18
Tạo tiẽu đề? 19
Tổ chức trang 20
Bắt đầu một đoạn vàn bản m âi 21
Lưu trang Web 21
Hiển thị trang trong trình duyệt t 23
Chương 3 ĐỊNH DẠNG VÀN BẢN Các thẻ không được chấp nhận 24
Thay đổi phông chữ 25
Đặt chữ đậm hoặc nghiêng 25
Chọn cỡ mặc địnn cho văn bản 26
Thay đổi cỡ chữ 27
Chọn màu mặc định cho văn bản 28
Thay đổi màu vàn bản 29
Tạo chỉ số ừên và chỉ số á ư ở i. 30
Gạch bỏ hoặc gạch chân ván bản 30
Sử dụng phông đơn cách 31
Tạo văn bản nhấp nháy -■ 32
Bổ sung chú giải cho văn bản 33
Chương 4 TẠO ẢNH WEB Chương trình xử lý ả n h 34
Định dạng 34
Màu sắc 34
Tính trong suốt 35
Tốc độ 35
Hoạt ảnh 3 6 Khai thác ảnh 36
Làm nhỏ ảnh 37
Xuất ảnh G1F từ Photoshop 38
Sử dụng các màu an toàn cho trình duyệt 40
Chuyển sang các màu an toàn cho trình duyệt 41 Giảm số màu 42
Tạo tính trong su ố t 43
Để tạo lớp trong suốt.* 43
Để chuyển một số màu thành trong suốt 43
Đẩ tạo vùng trong suốt ; 44
Tạo tính trong suốt g iả 44
Trộn lẫn các ảnh GIF 45
Tạo ảnh GIF 46
T ạ o ả n h JP E G 4 7 Làm mờ ảnh để trỢ giúp nén J P E G 48
Tạo ảnh v<^ độ phân giải thấp 49
T ạ o ỉile P N G 50
Chương 5 SỬ DỤNG ẢNH Chèn ảnh vào trang 51
Đưa ra chú thích 52
Chl dmh kích cở để hiển thị ảnh nhanh hơn 53
Kết nối biểu tượng vcí ảnh ngoài 54
Để sử dụng ảnh vcft độ phân giải thấp 55
Dàn văn bản quanh ảnh * 56
Dừng quá trình dàn văn bản 57
Bổ sung khoảng trống xung quanh ảnh 58
Chia tỷ lệ ảnh 59
Dóng ả n h 60
Sử dụng Banner (đầu đề chữ lớn suốt dọc trang báo) 61
Bổ sung dòng kẻ ngang 62
Trang 6Chương 6
BÓ CỤ C TRANG
Sử dụng màu nền 63
Sử dụng ảnh nền 64
Đặt một phần tử vào giữa trang 64
Chỉ định lề trang 65
Tạo ngắt dòng 66
Kết hỢp các dòng nhau 67
Tạo ngắt dòng theo ý muốn 67
Chỉ định khoảng trống giữa các đoạn văn bản 68
Tạo thụt ỉề 69
Tạó thụt lề (theo danh sách) 69
Tạo khối khoảng trống 70
Sử dụng các điểm ảnh đệm 71
Sử dụng khối ừích dẫn 72
Đặt một cụm từ vào ngoặc kép 73
Tạo cột 73
Sử dụng văn bản dầ định dạng 74
Sắp xếp các phần tử thành lớp 75
Chương 7 KẾT NÓI Tạo kết nối tới trang Web khác 78
Tạo kết nối anchor 79
Kết nối tóft một anchor riêng biệt 80
Mở kết nối trong một ctte sổ riêng biệt 81
Thiê^ lập Target mặc đinh 82
Tạo các loại kết nối khác 83
Tổ hợp phím tắt cho kết nối 84
Thiết lập thứ tự tab cho các kỗ't nối 85
Sử dụng ảnh để tạo nhã n cho kết nối 86
Phân chia ảnh thành các vùng clickable (có thể nhấn) 87
Tạo ánh xạ ảnh trên máy khách 87
Sử dụng ánh xạ ảnh trên máy chủ 89
Thay đổi màu kết nối 89
Chương 8 DANH SÁCH Tạo danh sách có thứ tự 91
Tạo danh sách không có thữ tự 92
Tạo danh sách ^Ịnh nghĩa 94
Tạo các danh sách ỉồng nhau 95
Chương 9 BẢNG Sắp xếp ừang 96
Tạo bảng đơn giản 97
Bổ-sung đường viền 98
Thay đổi màu dường viền 98
Thiết ỉập độ rộng 99
Đặt bảng vào giữa trang 100
Dàn văn bản xung quanh bảng 101
Bổ sung khoảng trống xung quanh bảng 102
Mở rộng một ô qua nhiều c ộ t 103
Mở rộng một ô qua nhiều trang 103
Căn lề nội dung ô 104
Điều khiển khoảng ừống trong ô 105
Lồng một bảng vào một bảng khác 106
Thay đổi màu của ô 108
Sử dụng ảnh nền 109
Phân chia bảng thành các nhóm cột 109
Phân chia bảng thành các phần tử nằm nganglio Chọn đường viền cần hiển thị 111
Điều khiển các ngắt dòng trong l ô .113
Tăng tốc độ hiển thị bảng 114
Chương ĩ Ồ KHUNG Tạo sơ đồ khung đơn giản 115
Tạo các khung thành cột 117
Tạo khung thành những hàng và cột 117
Kết hỢp các sơ đồ khung 118
Tạo một khung nội tuyến 119
Điều chỉnh lể và khung 120
Ân, hiện thanh cuộn 121
Điều chỉnh màu đường viền 121
Điều chỉnh đường viền khung 122
Giữ kích cỡ khung không bị thay đổi bởỉ ngưcổ truy nhập 123
Mở các kết nối trong từhg khung cụ th ể 124
Mở kết nối tại một vị trỉ đặc biệt 125
Thay đổi target mặc định 126
Các sơ đồ khung lồng nhau 127
Tạo chú giải cho khung 128
Chương 11 BIỂU MẪU Các script C G I 129
Các chức năng của script 130
Bảo mật 130
Tìm kiếm script 131
Sử dụng nhữhg script kèm ửieo cuốn sách này 132
Chuẩn bị script 132
Tậo biểu mẫu 133
Gừi giữ liệu của biểu mẫu qua Email 133
Dùng dịch vụ quản lý Em ail 134
Tạo hộp văn bản 135
Trang 7Tạo hộp mật khẩu 136
Tạo những vùng vàn bản lớn hơ n 137
Tạo nút Radio 138
Tao hộp kiểm 139
Tạo M enu 139
Cho phép người truy nhập tải File lên mạng 140
Các trường ẩ n 142
Bổ sung các trường ẩn cho biểu mẫu 142
Tạo nút đệ trình 143
Khởi động lại biểu m ẫ u 144
Sử dụng ảnh để đệ trình dữ liệu 146
Tổ chức các phần tử trong biểu m ẫu 146
Gán nhã n cho các phần tử của biểu m ẫu 147
Thiết lập thứ tự T a b 148
Bổ sung các tổ hợp phím tắt 149
Vò hiệu hóa các phần tử của biểu m ẫu 150
Giừcho phần tử không bị thay đổi 150
Chương 12 ĐA PHƯƠNG TIỆN (MULTIMEDIA) Các ứng dụrìQ trỢ giúp và các trình plug-in 152
Các ảnh không được hỗ trỢ 153
Âm thanh 154
Tìm kiếm âm thanh 154
Nhúng âm thanh vào trang W cb 155
Bổ sung kết nối tới âm thanh 156
Bổ sung âm thanh nền cho Expỉorer 157
Tạo các fìlc RealMedia 158
Tạo MetaPile ReaỉMedia 159
Kết nối âm thanh tới RealMedia 160
Nhúng file RealMcdia vào trang Web 160
Hinh ảnh Video 162
Bổ sung hình ảnh Video bồn ngoài vào trang Web 162
Bổ sung hình ảnh Video bên trong 163
Bổ sung hình ảnh Vidco bên trong cho Expỉorer 164
Tạo Marquec 165
Dưa các Applet vào trang 165
Chương 13 GIỚI THIỆU TRANG KlỂU XẾP LỚP (Cascading Síyle Sheet) Những thuận \di trong việc sử dụng các trang kiểu dáng 167
Nhược điểm của các trang kiểu dáng 168
Cấu trúc kiểu dáng 169
Chương 14 THIẾT LẠP t r a n g k i ể u d á n g Tạo trang kiểu dáng trong 170
Tạo trang kiểu dáng ngoài 171
Áp dụng các kiểu dáng cục bộ 173
Định nghĩa kiểu dáng cho các lớp 174
Chỉ định các thẻ riêng biệt 174
Tạo thẻ HTML tùy biến 175
Tạo thẻ HTML cấp độ khối tùy biến 176
Sử dụng thẻ HTML cấp độ khối tùy biến 176
Tạo thẻ HTML nội tuyến tùy biến 177
Sử dụng thẻ HTML nội tuyến tùy biến 178
Định nghĩa kiểu dáng cho các kết nối 178
Chương 15 ĐỊNH DẠNG VĂN BAN THEO KlỂU DÁNG Chọn họ phông chữ 180
Gắn phông chữ vào trang 181
Tạo chữ nghiêng 182
Tạo chữ đậm 182
Thiết Ịập kích cỡ phông 183
Thiết lập độ cao dòng 184
Thiết lập đồng thời toàn bộ các giá trị cho phông chữ 184
Đặt màu văn bản 185
Thay đổi nền văn bản 186
Điều khiển khoảng cách 186
Đẩ chỉ định khoảng cách giữa các từ 186
Để chỉ định khoảng cách giữa các chữ cái 187 Để thụt lề ĩ 187
Thiết lập thuộc tính khoảng trống trắng 187
Căn lề văn bản 188
Gạch chân các dòng chữ 189
Làm nhấp nháy dòng văn bản 189
Thay đổi kiểu chữ 190
Chương 16 B ố CỤC KIỂU DÁNG Di chuyển các phần tử khỏi vị trí ban đầu 192
Định vị tuyệt đối các phần tử 193
Định vị ba chiều các phần tử 194
Ân và hiện các phần tử 195
Thiết lập chiều cao và độ rộng cho phần tử 196
Thiết lập đường viền 196
Bổ sung khoảng trống đệm xung quanh phần tử 197
Đặt lề quanh một phần tử 198
Để căn lề các phần tử theo chiều dọc 199
Dàn văn bản quanh các phần tử 199
Dừng việc dàn vàn bản 200
Thay đổi màu tiền cảnh 201
Trang 8Thay đổi nền 202
Xử lý phần nội dung bị tràn 202
Cắt xén phần tử 203
Thiết lập thuộc tính danh sách 204
Chỉ định các ngắt trang 205
Chương ĩ 7 SCRĨPT Bố sung script tự động 206
Gọi t ô i một script tự động bên ngoài 207
Khởi động một script 208
Tạo nút để thực hiện script 209
An script trong các trình duyệt cũ 210
Bổ sung thông tin chú giải 211
Thiết đặt ngôn ngữ script mặc định 212
Chương 18 JAVASCRIPT - NHỮNG ĐĨỂU c ơ BẢN Bổ sung các thông số về ngày tháng 213
Thay đổi nhã n trạng thái của kết nối 214
Dùng một kết nối thay đổi nhiều khung 215
Nạp ảnh vào vùng nhớ truy cập nhanh 216
Thay đổi ảnh khi người truy nhập hướng con trỏ tới 216
Điều khiển kích cỡ một cửa sổ m ới 217
Chương 19 CÁC CHI TIẾT PHỤ Lấy cảm hứhg từ những trang Web khác 219
Mật khẩu bảo mật cho trang Web 220
Tạo counter 220
Tăng hiệu suất các kết nối mailto 221
Chia ảnh thành những phần nhỏ 222
Dùng bảng tạo nút 223
Sử dụng ảnh tạo đường viền cho bảng 224
Tạo chữ hoa trang t r ỉ 225
Sử dụng các đường kẻ dọc 226
Gán nhã n cho các piiần tử trang W cb 226
Tạo biểu diễn tniợt hình (Slide Show) tự động 228 ChươTìg 20 KIỂM TRA MÃ NGƯỔN Trình duyệt hiển thị của nguồn 229
Hiển thị tốt trong Explorer nhưng không hiển thị trong Netscape 230
Hiển thị tốt trong trình duyệt nảy nhưng không tốt trong trình duyệt kh ác 231
Ảnh không xuất hiện 232
Vẫn bị mắc kẹt ? 233
Chương 21 CÔNG BÓ TRANG WEB TRÊN MẠNG Chạy thử trang 234
Tìm kiếm máy chủ cho site 235
Đăng ký một tên Domain riêng 236
Chuyển các íììe lên máy chủ 237
Để thiết lập w s - FTP nhằm chuyển các fiỉc HTML dưới dạng text (theo mẫu ASC n) 236
Để định nghĩa các thuộc íính cho 1 sitc FPT mói 236
Để chuyển các file tới máy chủ bằng W S-FPT 238
Để truyền các íile HTML tới máy chủ bằng Fetch 239
Truyền các fiỉe tới A O L 240
Chương 22 THU HÚT NGƯỜỈ TRUY NHẬP Giúp ĨÌQƯỜÌ truy nhập tìm thấy trang Web của bạn 241
Vận dụng phần tóm tắt trang 242
Sử dụng các thông tin khác 242
Hạn chế việc truy nhập vào trang 243
Tạo một trang thu hút người truy nhập 244
Đệ trình site tói site tìm kiếm 246
Để xuất hiện ở đầu danh sách các kết quả tìm kiếm 246
Các kỹ thuật khác trong việc xuất bản site 247
Phụ lục Phụ lục A Các công cụ H LM T 248
Phụ lục B Các ký hiệu đặc biệt 251
Phụ lục c Các màu theo hệ đếm 1 6 255
Phụ lục D HTML và tính tương thích 258
Trang 9Xây dựng các khối HTML
Tạo tài iiệu HTML
Bạn có thể tạo tài liệu H T M L bằng bất cứ trình soạn thảo hoặc xử lý vãn bản nào, bao gồm các trìnn soạn thảo cơ bản như TeachText hoặc SimpleText trên máy Mac, NotePad hoặc WordPad trong Windows, được cung cấp miễn phí kèm theo các phần mềm hệ thốnơ tương ứng Bạn cũng có thể mua một trình soạn thảo trang Web, như PageMill hoặc Dreamweaver, sau
đó sử dụng thông tin trong sách này để tạo trang Web theo cách bạn muốn.
Các thẻ HTML
Các thẻ H T M L là những lệnh được viết giữci các
ký hiệu nhỏ hơn (<) và lớn hơn (>), còn được gọi là
dấu ngoặc nhọn, chúng xác định phương thức hiển thị
vãn bản của trình duyệt (hình 1.1) Có nhiều kiểu
đóng và mở cho các thẻ (nhưng không phải tất cả), và
nội dung văn bản được tác động sẽ nằm giữa hai thẻ,
Cả hai thẻ đóng và mở đều sử dụng cùng một từ lệnh
(command word), nhưng thẻ đóng nằm sau một kv
hiệu gạch chéo tiến (/).
Thuộc tính
Nhiều thẻ có những thuộc tính đặc biệt để đưa
ra những tùy chon khár nhau cho nội dung văn bản
Thuộc tính được đưa vào qìữă từ lệnh và dấu so sánh
lớn hơn cuối cùng (hình 1.2) Thông thường, bạn có
thể sử dụng nhiều thuộc xinh trong một thẻ đơn, chỉ
cần viết từ lệnh này sau từ lệnh kia - theo bất cứ trật
tự nào - vớì một dấu cách giữci các từ lệnh.
Giá trị •
Các thuộc tính thường có giá trị theo lượt
Trong một số trường hợp, bạn phải chọn giá tri từ
một nhóm lựa chọn nhố V í dụ, ửiuộc tính C L E A R
cho thẻ B R có thẻ mang giá trị của left, right hoặc aỉl
Bất cứ giá tn nào khác được gán sẽ bị bỏ qua
(hình 1.3).
Thẻ mở Nội dung văn bản chứa trong thẻ
Thẻ đóng
<B>Đig Boy</B> toma^
Phần văn bản phụ cặn Càc dấu ngoặc nhọn Dấu gạch chéo tiến
Hình 1.1 Lưu dổ cùa mội thé HTML Chú ý là không
c ó k h o ả n g tr ố n g g iữ a n ộ i dunt> uàn b 'r ì uà các d ấ u
ngoộc nhọn hay các dấu so ;;ánh Như oậv, pí.án uđn
bán phụ cận (nằm ngoài hai thẻ) - ĩrong ui dụ này íâ íừ
omato ■ không chịu tác dộng của thỏ.
Dấu cách Thuộc tính
< B B I|B O R D E R >
Thẻ
Hình ỉ 2 Một số thê có th ể dặt thêm ccc thuộc tính
íùy chọn d ể xác dịnh rỏ hcfn định dạng mong muốn.
Giá frị Của CLEAP
<BRCl£A[Êíeft>
Hình 1.3 Một số thẻ, vĩ dụ như thé BR trên ctâọ, có các thuộc tính chỉ nhận những giá trị nhất dinh mà bạn chỉ có th ể chọn m ót trong số chúng Những giá trị chỉ gốm một từ không cổn phải dặt trong ngoộc kép.
Trang 10C ác thuộc tính khác thường khắt khe hơn đối
với kiểu giá trị V í dụ, thuộc tính H S P A C E của thẻ
IMG chỉ chấp nhận giá trị là số nguyên, thuộc tính
S R C của thẻ IMG chỉ chấp nhân các địa chỉ U R L làm
giá trị (hình 1.4).
Dâ'u nháy
Nhìn chung, nên đặt các giá trị trong dấu nháy
thẳng "" (không phải là dấu nháy cong “ Tuy nhiên,
có thể bỏ qua các dấu nháy nếu giá trị chỉ bao gồm
các ký tự (A-Z, a-z), các con SC’ (0-9), dấu nối (-), hoặc
dấu chấm (.) Lậ p trình viên có kinh nghiệm thường
sử dụng dấu nháy đối với các địa chỉ U R L để đảm bảo
máy chủ k h ô n g hiểu sai chúng.
Ch ữ h o a và chữthưòng
Trong cuốn sách này, mã H TM L được trình
bày bằng chữ hoa chỉ là để ph-ân biệt chúng với phần
nội dung còn lại Bạn không nhất thiết phải làm theo
các ví dụ, trừ khi thấy chúng thuận tiện cho việc lập
trình Trình duyệt sẽ nhận ra mã H TM L bất kể bạn
gõ chữ hoa, chừ thường hay pha trộn cả hai.
Mặc dù vậy, X H T M L - củng giống HTM L,
nhưng thuộc “XMLese" - lại phân biệt chữ hoa và chữ
thường Tuy nhiên, bạn chỉ cần lưu ý điều này khi tạo
các tài liệu XM L.
Thẻ lồng
Nếu muốn chỉnh sửcầ nội dung trang với nhiều
thẻ (\Ấ dụ, bổ sung đ ịn h dạnq chữ nghiêng cho một từ
trong tiêu đề), bạn cần clhií ý hai điều Thứ nhất,
không phải bất kỳ thẻ nào cũng có thể chứa mọi loại
thẻ khác Theo luật chung, những thẻ có tác động tới
toàn bộ đoạn văn bản (được xem là thẻ ở cấp độ
khối), có thể chứa các thẻ tác động tới từng từ hoặc
chữ riêng biệt (tức là những thẻ ở mức nội tuyến),
nhưng không có khả nàn-g ngược lại Thứ hai, trật tự
cũng phải ứng với thể mở chưa được đóng cuối cùng
đứng trước nó Nghĩa là, mếu A rồi B, thì phải / B rồi
SRC là một thuộc tính của IMG
^Giá trị của SRC
<IMG SRC'=**image.gif"' HSPACE=5> HSPACE cũng là một thuộc tính của IMG'
Giá trị của HSPACE
Hình 1.4 M ộ t số thẻ, như thẻ IMG trônc/đy có t h ế có nhiéu thuộc tính, trong dó mỗi thuộc tính có m ột giá trị riêng Chú ỷ rằng, trong khi những tên Ịỉìe như imagc.giỊ thường dặt giữa hai ngoặc kép thì các giá í r ị
s ố - c h ẳ n g h ạ n n h ư 5 ' h o ặ c c á c g i á t r ị c h ỉ g ồ m m ộ t t ừ ,
klìồng kàm theo các ký hiệu dặc biệt, không cẩn phải Jõt trong ngoặc kép.
Chính xác (không có dòng nào chồng chéo lên nhau)
<H1>Big Boy <l>tomato</lx/H1>
<H1>Big Boy <l>tomato</H1x/l> Không chính xác (các cặp thẻ chổng chéo lên nhau)
Hình 1.5 Đ ế cĩảm bấo các thẻ ciược ìồng vào nhau
c h in h x á c hở y nốỉ môi cập thỏ bới m ộ t đường kẻ C ậ p thc này cần tránh chổng chóo lên cặp thc k ia ; cặp thẻ bổn trong phái nèm hoàn toàn ở trong cùa cồp thẻ boo
ngay bôn ngoàin ó