Giáo trình HTML và thiết kế Website

164 trang phuongnguyen 2970

Download

Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình HTML và thiết kế Website", để 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_va_thiet_ke_website.pdf

Nội dung text: Giáo trình HTML và thiết kế Website

ỦY BAN NHÂN DÂN THÀNH PH Ố HÀ N ỘI SỞ BƯU CHÍNH VI ỄN THÔNG HÀ NỘI GIÁO TRÌNH HTML VÀ THI ẾT KẾ WEBSITE (Mã s ố giáo trình: 3CI3 ) HÀ N ỘI. 2005
LỜI M Ở ĐẦU Ngôn ng ữ Siêu v ăn b ản HTML ( Hyper Text Markup Language) là ngôn ng ữ bi ểu di ễn văn b ản cho phép ta đư a vào m ột v ăn b ản nhi ều thu ộc tính c ần thi ết để có th ể truy ền thông qu ảng bá trên m ạng toàn c ục WWW ( World Wide W eb). HTML cho phép ta đư a hình ảnh đồ họa vào v ăn b ản, thay đổi cách bày trí c ủa v ăn b ản, và t ạo nh ững tài li ệu siêu v ăn b ản có kh ả năng đối tho ại t ươ ng tác v ới ng ười dùng. HTML ch ủ yếu xoay quanh khái ni ệm “th ẻ” (tag) làm n ền t ảng. Một ví d ụ về tag là . H ầu h ết các ch ức n ăng trên HTML có th ẻ mở và th ẻ đóng t ạo thành một c ặp gi ới h ạn m ột đoạn v ăn b ản. Ví d ụ và là th ẻ “bold” ngh ĩa là ch ữ béo. Toàn b ộ đoạn v ăn b ản gi ữa và s ẽ được th ể hi ện d ưới d ạng ch ữ béo (hay ch ữ đậm) khi v ăn b ản đó được xem b ằng m ột trình duy ệt t ương ứng. Ví d ụ xin chào s ẽ được hi ện lên là xin chào . Để tạo m ột siêu v ăn b ản, ta có th ể dùng b ất c ứ một ch ươ ng trình so ạn th ảo nào (ví d ụ: NC-Norton Commander, EDIT - của DOS, NotePad hay Write - của Windows 3.x, WordPad c ủa Win95, WinWord 2.0 hay 6.0, FoxPro, Borland C++ IDE, Borland Pascal IDE, FrontPage, TextPad, v.v ), ch ỉ cần n ắm được các th ẻ của HTML, và khi ghi vào đĩa thì c ần l ưu d ưới d ạng file text. Tên file có đuôi m ở rộng là HTM (ho ặc HTML). Song có m ột h ạn ch ế là d ạng v ăn b ản khi ta so ạn v ới khi ta xem sau này (trên WWW) không gi ống nhau. Chính vì l ẽ đó mà nhi ều hãng tung ra ph ần m ềm so ạn siêu v ăn b ản What You See Is What You Get (WYSIWYG- cái ta th ấy c ũng là cái ta có được). Hãng Microsoft c ũng đã tung ra m ột ti ện ích được s ử dụng rộng rãi. Ngoài ra, còn có nhi ều ti ện ích chuy ển đổi t ừ dạng RTF (có th ể so ạn b ằng WinWord hay WordPad) sang HTML, hay các phiên b ản sau này của trình duy ệt Web nh ư NetScape có s ẵn luôn ch ức n ăng này. Các ti ện ích đó đều gi ống nhau ở ch ỗ cho phép ta gõ tr ực ti ếp các th ẻ vào v ăn b ản nh ưng c ũng có th ể dùng t ổ hợp c ủa thanh công c ụ (toolbar), h ộp tho ại (dialog), th ực đơ n (menu) hay danh sách các l ựa ch ọn (pop-up list). Để gạch d ưới đoạn v ăn b ản trong ví d ụ vừa rồi, ta có th ể gõ vào xin chào, dùng chu ột ch ọn, r ồi b ấm vào nút Underline trên thanh công c ụ. V ăn b ản s ẽ tự động được chuy ển thành xin chào ( ở đây thì và là c ặp m ở/đóng c ủa tag có ch ức n ăng gi ới h ạn đoạn v ăn b ản c ần được g ạch d ưới). 1
Ngày nay, do s ự phát tri ển nh ư thác l ũ c ủa m ạng toàn c ục, HTML c ũng ngày càng tr ở nên ph ức t ạp và hoàn thi ện h ơn để đáp ứng được nh ững yêu c ầu m ới n ảy sinh trong quá trình phát tri ển đó (nh ư âm thanh, hình ảnh động, v.v ). Ng ười ta gọi đó là nh ững phiên b ản c ủa HTML và đánh s ố để bi ểu th ị. HTML 2, HTML 2+, HTML 3, là để ch ỉ nh ững phiên b ản sau này. Một trong nh ững điểm m ạnh c ủa HTML là m ột v ăn b ản b ất k ỳ nếu tuân th ủ tiêu chu ẩn HTML đều có th ể hi ện lên màn hình hay in ra, tóm l ại là hi ểu được, b ởi bất k ỳ lo ại ph ần m ềm hay máy tính nào mà ng ười đọc có, không phân bi ệt trình duy ệt nào (NetScape trên Windows hay Lynx trên UNIX, thậm chí cho ng ười khi ếm th ị bằng ph ần m ềm đặc bi ệt). Ng ười ta còn đang tranh cãi nhi ều trên Internet v ề HTML “t ốt”. Định h ướng nguyên th ủy c ủa HTML là t ạo ra m ột ph ươ ng pháp v ạn n ăng để lưu gi ữ và th ể hi ện thông tin. Sau này ng ười ta coi HTML nh ư m ột ngôn ng ữ định h ướng n ội dung – “trong tài li ệu có gì” quan tr ọng h ơn nhi ều so v ới “tài li ệu có đẹp không”. Tác gi ả rất mong nh ận được s ự góp ý t ừ bạn đọc Xin chân thành c ảm ơn. 2
- Tên môn h ọc: HTML VÀ THI ẾT K Ế WEB - Mã s ố môn h ọc: 3CI3 - Th ời gian: Lý thuy ết + th ực hành 45T - Mục tiêu: Cung c ấp cho h ọc viên các ki ến th ức c ơ b ản liên quan đến ngôn ng ữ HTML và thi ết k ế Web. - Nh ững ki ến th ức c ần ph ải được trang b ị tr ước khi h ọc: Có ki ến th ức v ề sử dụng máy tính. - Nội dung môn h ọc: Ch ươ ng I: NH ỮNG KHÁI NI ỆM C Ơ S Ở. Ch ươ ng II: TRÌNH BÀY TRANG. Ch ươ ng III: DANH SÁCH VÀ B ẢNG TRONG HTML. Ch ươ ng IV: ĐƯ A HÌNH ẢNH VÀO TÀI LI ỆU HTML. Ch ươ ng V: CÁC M ỐI LIÊN K ẾT SIÊU V ĂN B ẢN. Ch ươ ng VI: BÀY TRÍ N ỀN VÀ KHUNG. Ch ươ ng VII: BI ỂU MẪU STYLE VÀ CASCADING STYLE SHEET. Ch ươ ng VIII: CÔNG C Ụ SO ẠN TH ẢO TR ỰC QUAN WEB (Microsoft FrontPage 2003) - Đối t ượng h ọc: Nh ững ng ười c ần bi ết các ki ến th ức c ơ b ản v ề HTML và Website để thi ết k ế Website t ĩnh. - Biên so ạn: Bộ môn Các h ệ th ống thông tin, Khoa Công ngh ệ thông tin, Tr ường ĐH Công Ngh ệ, ĐHQGHN. 3
MỤC L ỤC LỜI M Ở ĐẦU 1 CH ƯƠ NG I. NH ỮNG KHÁI NI ỆM C Ơ S Ở 9 I.1. World Wide Web là gì? 9 I.2. HTML là gì? 12 I.3. Các đặc điểm c ủa siêu v ăn b ản 13 I.3.1. Độc l ập v ới ph ần c ứng và ph ần m ềm 13 I.3.2. Độc l ập v ới khái ni ệm trang và th ứ tự các trang 14 I.3.3. Website và trang ch ủ - homepage 14 I.4. So ạn th ảo v ăn b ản - nh ững v ấn đề chung 15 I.4.1. Trang mã ngu ồn HTML và trang Web 15 I.4.2. Các th ẻ HTML 16 I.4.3. Các quy t ắc chung 17 I.4.4. C ấu trúc c ủa m ột tài li ệu HTML 18 I.4.5. Các ph ần t ử HTML (HTML element) 19 Bài t ập 19 CH ƯƠ NG II. TRÌNH BÀY TRANG 20 II.1. T ạo tiêu đề 20 II.2. Th ẻ trình bày trang 21 II.2.1. M ột s ố th ẻ chính 21 II.2.2. Các thu ộc tính c ủa th ẻ trình bày trang 25 Bài t ập 27 CH ƯƠ NG III. DANH SÁCH VÀ B ẢNG TRONG HTML 28 III.1. Các ki ểu danh sách 28 III.1.1. Danh sách không đánh s ố th ứ tự 28 III.1.2. Danh sách đánh s ố th ứ tự 29 III.1.3. Danh sách các định ngh ĩa 31 III.1.4. Danh sách ph ối h ợp, l ồng nhau 31 4
III.2. B ảng bi ểu 32 III.2.1. Khung c ấu trúc 32 III.2.2. M ột s ố lưu ý v ề bảng 33 III.2.3. Các ví d ụ 37 Bài t ập 40 CH ƯƠ NG IV. ĐƯ A HÌNH ẢNH VÀO TÀI LI ỆU HTML 41 IV.1. Hình ảnh t ĩnh 41 IV.1.1. T ệp ảnh 41 IV.1.2. Th ẻ 41 IV.2. Các thu ộc tính c ủa th ẻ chèn hình ảnh 41 IV.2.1. Thu ộc tính ALT 41 IV.2.2. Thu ộc tính WIDTH và HEIGHT 42 IV.2.3. Thu ộc tính ALIGN 43 IV.2.4. Thu ộc tính VSPACE và HSPACE 43 Bài t ập 44 CH ƯƠ NG V. CÁC M ỐI LIÊN K ẾT SIÊU V ĂN B ẢN 45 V.1. Th ẻ neo và m ối liên k ết 45 V.1.1. Thu ộc tính HREF 45 V.1.2. Liên k ết ra ngoài – External Links 45 V.1.3. Địa ch ỉ tuy ệt đối 46 V.1.4. Địa ch ỉ tươ ng đối 46 V.1.5. Liên k ết n ội t ại – Internal Link 46 V.2. Dùng hình ảnh làm đầu m ối liên k ết 47 V.2.1. Thay ch ữ bằng hình 47 V.2.2. Image Map - th ẻ AREA 47 V.3. Đư a âm thanh vào tài li ệu 48 V.3.1. Liên k ết đến t ệp âm thanh 48 V.3.2. T ạo âm thanh n ền 48 5
V.4. Đư a Video vào tài li ệu 49 V.4.1. Chèn t ệp Video 49 V.4.2. Nhúng t ệp video 49 Bài t ập 50 CH ƯƠ NG VI. BÀY TRÍ N ỀN VÀ KHUNG 51 VI.1. Màu n ền và v ăn b ản 51 VI.1.1. Đặt màu n ền 51 VI.1.2. Màu ch ữ của v ăn b ản 51 VI.1.3. Màu c ủa đầu m ối liên k ết - Thu ộc tính LINK, VLINK và ALINK 51 VI.1.4. Thu ộc tính và mã màu 52 VI.2. N ạp hình ảnh làm n ền cho trang v ăn b ản 53 VI.2.1. Thu ộc tính BACKGROUND 53 VI.2.2. Water mark 53 VI.2.3. Hãy ký tên vào tài li ệu c ủa mình 54 VI.3. Khung – Frames 55 VI.3.1. Trang trí khung 55 VI.3.2. Thành ph ần FRAMESET 56 VI.4. Thi ết l ập Target, th ẻ NOFRAME và IFRAME 59 VI.4.1. Thi ết l ập Target 59 VI.4.2. Th ẻ NOFRAMES 60 VI.4.2. Nhúng frame - th ẻ IFRAME 60 Bài t ập 61 CH ƯƠ NG VII. BI ỂU M ẪU STYLE VÀ CASCADING STYLE SHEET 62 VII.1. FORM 62 VII.1.1. FORM là gì? 62 VII.1.2.Các thành ph ần trong FORM 63 VII.1.3. Thêm tính c ấu trúc cho FORM 70 VII.2. Cascading style sheet 72 6
VII.2.1. Inline Style 72 VII.2.2. Gi ới thi ệu Style Sheet 74 VII.2.3. Javascript Style Sheet 75 VII.2.4. Thu ật ng ữ Style Sheet 77 VII.2.5. Các chú thích trong Style Sheet 92 VII.2.6. L ợi ích c ủa các Style Sheet 92 VII.2.7. K ết h ợp Style Sheet v ới HTML 93 VII.2.8. Th ứ tự ưu tiên c ủa các style (Cascading) 97 CH ƯƠ NG VIII. CÔNG C Ụ SO ẠN TH ẢO TR ỰC QUAN WEB (MICROSOFT FRONTPAGE 2003) 100 VIII.1. T ạo m ột trang Web 100 VIII.1.1. B ắt đầu s ử dụng FrontPage2003 100 VIII.1.2. T ạo m ột trang t ừ một template 101 VIII.1.3. T ạo và l ưu m ột trang m ới 102 VIII.1.4. T ạo m ột đề mục 103 VIII.1.5. Ch ọn font và màu 104 VIII.2. T ổ ch ức m ột trang v ới các liên k ết, danh sách và b ảng 107 VIII.2.1. Thêm m ột hyperlink vào m ột trang Web 107 VIII.2.2. T ạo m ột danh sách 110 VIII.2.3. T ổ ch ức m ột trang v ới các b ảng 112 VIII.2.4. Hi ển th ị hình ảnh trên m ột trang Web 120 VIII.2.5. T ạo m ột Web site m ới 133 VIII.2.5.Khai thác site m ới 135 VIII.3. Phát tri ển nhanh m ột site v ới các template 142 VIII.3.1. Ch ọn m ột template Web site 143 VIII.3.2. T ạo m ột Web site m ới 144 VIII.3.3. T ạo tùy bi ến Web site m ới c ủa ta 145 VIII.3.4. Thêm và lo ại b ỏ các l ời chú thích 146 7
VIII.3.5. Khai thác template Personal Web Site 147 VIII.3.6. Thêm m ột tem th ời gian vào m ột trang Web 148 VIII.3.7. L ưu các thay đổi sang m ột site 149 VIII.4. T ạo m ột site v ới s ự tr ợ giúp c ủa Wizard trong FrontPage 2003 150 VIII.4.1. M ở một wizard t ạo site 150 VIII.4.2. Nh ập m ột site hi ện có vào FrontPage 152 VIII.4.3. Ch ọn m ột ph ươ ng pháp import 152 VIII.4.4. Ch ọn v ị trí để lưu site 155 VIII.4.5. Thu th ập thông tin ph ản h ồi t ừ các khách tham quan Web site c ủa ta 156 VIII.4.6. L ưu thông tin ph ản h ồi c ủa khách tham quan sang m ột file 158 VIII.4.7. Nh ận thông tin ph ản h ồi c ủa khách tham quan b ằng email 160 Bài t ập 161 BẢNG CÁC T Ừ VI ẾT T ẮT 162 TÀI LI ỆU THAM KH ẢO 163 8
CH ƯƠ NG I. NH ỮNG KHÁI NI ỆM C Ơ S Ở I.1. World Wide Web là gì? World Wide Web (WWW) là m ột m ạng các tài nguyên thông tin. WWW dựa trên 3 c ơ ch ế để các tài nguyên này tr ở nên s ẵn dùng cho ng ười xem càng r ộng rãi nh ất càng t ốt: - Cơ ch ế đặt tên cùng d ạng đối v ới vi ệc định d ạng các tài nguyên trên WWW (nh ư các URL) - Các giao th ức, để truy nh ập t ới các tài nguyên qua WWW (nh ư HTTP) - Siêu v ăn b ản, để dễ dàng chuy ển đổi gi ữa các tài nguyên (nh ư HTML). Các ràng bu ộc gi ữa ba c ơ ch ế được nêu rõ d ưới đây Gi ới thi ệu v ề URL: Mọi tài nguyên s ẵn dùng trên WWW – tài li ệu HTML, ảnh, video clip, ch ươ ng trình, - có m ột địa ch ỉ mà có th ể được mã hóa b ởi m ột URL. Các URL th ường g ồm 3 ph ần: - Vi ệc đặt tên c ủa các c ơ ch ế dùng để truy nh ập tài nguyên - Tên c ủa máy tính lưu tr ữ (t ổ ch ức) tài nguyên - Tên c ủa b ản thân tài nguyên, nh ư m ột đường d ẫn Ví d ụ coi URL ch ỉ rõ trang W3C Technical Reports: URL này có th ể được đọc nh ư sau: Có m ột tài li ệu s ẵn dùng theo giao th ức HTTP, đang l ưu trong máy www.w3.org , có th ể truy nh ập theo đường d ẫn “ /TR ”. Các c ơ ch ế khác ta có th ể th ấy trong các tài li ệu HTML bao g ồm “ mailto ” đối v ới th ư điện t ử và “ ftp ” đối v ới FTP. Đây là m ột ví d ụ khác v ề URL. Ví d ụ này ám ch ỉ tới h ộp th ư (mailbox) c ủa ng ười dùng: . đây là v ăn b ản Mọi góp ý, xin g ửi th ư t ới Các định danh đoạn (fragment identifiers): 9
Một s ố URL ám ch ỉ tới vi ệc định v ị một tài nguyên. Ki ểu này c ủa URL k ết thúc v ới “ #” theo sau b ởi m ột d ấu hi ệu k ết n ối (g ọi là các định danh đoạn). Ví d ụ, đây là m ột URL đánh d ấu m ột móc tên là section_2: Các URL t ươ ng đối: Một URL t ươ ng đối không theo cơ ch ế đặt tên. Đường d ẫn c ủa nó th ường tham chi ếu t ới m ột tài nguyên trên cùng m ột máy nh ư tài li ệu hi ện t ại. Các URL tươ ng đối có th ể gồm các thành ph ần đường d ẫn t ươ ng đối (nh ư “ ” ngh ĩa là m ột mức trên trong c ấu trúc được định ngh ĩa b ởi đường d ẫn), và có th ể bao g ồm các dấu hi ệu đoạn. Các URL được gi ải quy ết để cho toàn các URL s ử dụng m ột URL g ốc. Nh ư một ví d ụ của gi ải pháp URL t ươ ng đối, gi ả sử chúng ta có URL g ốc “ ”. URL t ươ ng đối trong đánh d ấu d ưới đây cho m ột liên k ết siêu v ăn b ản: sẽ mở rộng thành URL đầy đủ “ ” trong khi URL tươ ng đối trong vi ệc đánh d ấu cho m ột ảnh dưới đây sẽ mở rộng thành URL đầy đủ “ ” Trong HTML, các URL được dùng để: - Liên k ết t ới tài li ệu ho ặc tài nguyên khác, (xem A và LINK) - Liên k ết t ới ki ểu d ạng bên ngoài ho ặc k ịch b ản (script) (xem LINK và SCRIPT ) - Gồm m ột ảnh, đối t ượng, ho ặc applet trong m ột trang, (xem IMG, OBJECT, APPLET và INPUT ) - Tạo m ột b ản d ồ ảnh (xem MAP và AREA ) - Tạo một form (xem FORM ) - Tạo m ột khung tài li ệu (xem FRAME và IFRAME ) - Trích d ẫn một ch ỉ dẫn bên ngoài (xem Q, BLOCKQUOTE, INS và DEL ) - Tham kh ảo các quy ước siêu d ữ li ệu mô t ả một tài li ệu (xem HEAD ) 10
Ngày nay ng ười ta dùng máy tính nh ư m ột công c ụ rất h ữu ích để truy nh ập Internet, ch ủ yếu là tìm ki ếm thông tin. Các thông tin này có th ể là các v ăn b ản, hình ảnh âm thanh hay thông tin đa ph ươ ng ti ện V ới giao di ện thân thi ện b ởi vi ệc s ử dụng các ký hi ệu, bi ểu t ượng r ất g ợi t ả gần gi ống v ới các hình ảnh đời th ường và ch ỉ cần nh ững thao tác đơ n gi ản ta đã có ngay thông tin c ần tìm ki ếm ở trước m ặt. Nhu c ầu s ử dụng máy tính để truy c ập Internet tìm ki ếm thông tin ngày càng nhi ều và ng ười s ử dụng máy tính có trình độ tin h ọc và ti ếng Anh để hi ểu các thông báo c ủa máy khác nhau. Làm th ế nào để mọi ng ười có th ể dễ dàng s ử dụng máy tính để truy cập Internet nh ư m ột công c ụ ph ục v ụ đắc l ực cho vi ệc tra c ứu tìm ki ếm thông tin trên m ạng thông tin r ộng l ớn nh ất toàn c ục. Vi ệc này tr ở nên d ễ dàng h ơn b ởi ý t ưởng siêu v ăn b ản (Hypertext). Siêu v ăn bản là các v ăn b ản “thông minh” có th ể giúp ng ười đọc tìm và cung c ấp cho h ọ các tài li ệu liên quan. Ng ười đọc không ph ải m ất công tìm ki ếm trong kho thông tin Internet vô t ận. Khái ni ệm siêu v ăn b ản do nhà tin h ọc Ted Nelson đề xu ất vào n ăm 1965 nh ư m ột ước m ơ (“Computer Dreams”) v ề kh ả năng c ủa máy tính trong t ươ ng lai. Ông hy v ọng v ề các máy tính có trí tu ệ nh ư con ng ười, bi ết cách truy tìm các thông tin c ần thi ết. Dự án th ực hi ện siêu v ăn b ản là c ủa m ột k ỹ sư tr ẻ ng ười Anh tên là Tim Berners – Lee. Sau khi t ốt nghi ệp Đại h ọc Oxfort (Anh) n ăm 1976, n ăm 1980 Tim đã vi ết m ột ch ươ ng trình mô ph ỏng m ối liên k ết hai chi ều b ất k ỳ trên m ột đồ th ị nh ư ki ểu liên k ết siêu v ăn b ản. N ăm 1989, trong khi làm vi ệc t ại Vi ện nghiên c ứu kỹ thu ật h ạt nhân châu Âu (CERN) t ại Berne (Th ụy s ỹ), th ấy các đồng nghi ệp r ất vất v ả trong vi ệc tra tài li ệu, Tim đã đư a ra m ột đề án l ưu tr ữ siêu v ăn b ản trên máy tính sao cho d ễ dàng tìm ki ếm tài li ệu h ơn. Trong th ế gi ới siêu v ăn b ản WWW, ng ười s ử dụng có th ể dễ dàng đi t ừ tài li ệu này sang tài li ệu khác thông qua các m ối liên k ết. Nh ư v ậy ta có th ể du l ịch trong xa l ộ thông tin phong phú trong khi v ẫn ng ồi t ại nhà. K ỹ thu ật siêu v ăn b ản 11
giúp cho ta không ph ải sang t ận Luvr ơ ở Paris mà v ẫn có th ể chiêm ng ưỡng được các ki ệt tác h ội h ọa. Chính nó đã góp ph ần t ạo ra b ước phát tri ển bùng n ổ của Internet trong nh ững n ăm g ần đây. I.2. HTML là gì? Để ph ổ bi ến thông tin trên toàn c ục, c ần m ột ngôn ng ữ ph ổ bi ến và d ễ hi ểu, một ki ểu vi ệc ph ổ bi ến ti ếng m ẹ đẻ mà toàn b ộ các máy tính có th ể hi ểu được. Ngôn ng ữ ph ổ bi ến dùng b ởi World Wide Web là HTML (Hyper Text Markup Language). HTML cho tác gi ả các ý ngh ĩa để: Ph ổ bi ến các tài li ệu tr ực tuy ến v ới các heading, v ăn b ản, b ảng, danh sách, ảnh, v.v Truy tìm thông tin tr ực tuy ến theo các liên k ết siêu v ăn b ản b ằng vi ệc kích vào m ột nút Thi ết k ế các định d ạng cho vi ệc ki ểm soát các giao d ịch (transaction) v ới các thi ết b ị từ xa, đối v ới ng ười dùng trong vi ệc tìm ki ếm thông tin, t ạo các s ản ph ẩm, đặt hàng,.v.v Bao g ồm spread-sheets, video clips, sound clips, và các ứng d ụng tr ực ti ếp khác trong các tài li ệu của h ọ. Các trang Web đầ y sinh độ ng mà b ạn th ấy trên World Wide Web là các trang siêu v ăn b ản đượ c vi ết b ằng ngôn ng ữ đánh d ấu siêu v ăn b ản hay HTML - Hyper Text Markup Language. HTML cho phép b ạn t ạo ra các trang ph ối h ợp hài hòa văn b ản thông th ườ ng v ới hình ảnh, âm thanh, video, các m ối liên k ết đế n các trang siêu v ăn b ản khác Tên g ọi ngôn ng ữ dánh d ấu siêu v ăn b ản ph ản ánh đúng th ực ch ất c ủa công cụ này: Đánh d ấu (Markup): HTML là ngôn ng ữ c ủa các th ẻ đánh d ấu - Tag. Các th ẻ này xác đị nh cách th ức trình bày đoạn v ăn b ản t ươ ng ứng trên màn hình. Ngôn ng ữ (Language): HTML là m ột ngôn ng ữ t ươ ng t ự nh ư các ngôn ng ữ lập trình, tuy nhiên đơ n gi ản h ơn. Nó có cú pháp ch ặt chẽ để vi ết các l ệnh th ực 12
hi ện vi ệc trình di ễn v ăn b ản. Các t ừ khoá có ý ngh ĩa xác đị nh đượ c c ộng đồ ng Internet th ừa nh ận và s ử d ụng. Ví d ụ b = bold, ul = unordered list, Văn b ản (Text): HTML đầ u tiên và tr ướ c h ết là để trình bày v ăn b ản và d ựa trên n ền t ảng là m ột v ăn b ản. Các thành ph ần khác nh ư hình ảnh, âm thanh, ho ạt hình đề u ph ải "c ắm neo" vào m ột đoạn v ăn b ản nào đó. Siêu v ăn b ản (Hyper): HTML cho phép liên k ết nhi ều trang v ăn bản r ải rác kh ắp n ơi trên Internet. Nó có tác d ụng che d ấu s ự ph ức t ạp c ủa Internet đố i v ới ng ườ i s ử d ụng. Ng ườ i dùng Internet có th ể đọ c v ăn b ản mà không c ần bi ết đế n v ăn bản đó n ằm ở đâu, h ệ th ống đượ c xây d ựng ph ức tạp nh ư th ế nào. HTML th ực s ự đã v ượ t ra ngoài khuôn kh ổ khái ni ệm v ăn b ản c ổ điển. I.3. Các đặc điểm c ủa siêu v ăn b ản I.3.1. Độc l ập v ới ph ần c ứng và ph ần m ềm HTML độ c l ập v ới ph ần c ứng và ph ần m ềm. M ột tài li ệu HTML đượ c vi ết bằng m ột ph ần m ềm so ạn th ảo c ụ th ể b ất k ỳ, trên m ột máy c ụ th ể nào đó đề u có th ể đọ c đượ c trên b ất kì m ột h ệ th ống t ươ ng thích nào. Điều này có ngh ĩa là các t ệp siêu v ăn b ản có th ể đượ c trình duy ệt hi ển th ị trên MAC hay PC tùy ý mà không ph ải s ửa ch ữa thay đổ i gì. Sở d ĩ có đượ c tính ch ất này là vì các th ẻ ch ỉ di ễn đạ t yêu c ầu c ần ph ải làm gì ch ứ không c ụ th ể c ần làm nh ư th ế nào. Cũng vì l ẽ đó mà b ạn không th ể ch ắc ch ắn trang tài li ệu siêu v ăn b ản c ủa bạn s ẽ hi ện lên màn hình chính xác là nh ư th ế nào vì còn tu ỳ theo trình duy ệt th ể hi ện các thành ph ần HTML ra sao . Trong th ực ti ễn, HTML ch ỉ th ực s ự độ c l ập đố i v ới ph ần c ứng, ch ưa hoàn toàn độ c lập đố i v ới ph ần m ềm. Ch ỉ ph ần c ốt lõi là chu ẩn hoá, còn các ph ần m ở rộng do t ừng nhà phát tri ển xây d ựng thì không hoàn toàn t ươ ng thích nhau. 13
I.3.2. Độc l ập v ới khái ni ệm trang và th ứ tự các trang Một tính ch ất n ữa là HTML độ c l ập v ới khái ni ệm trang. V ăn b ản đượ c trình bày tùy theo kích th ướ c c ủa cửa sổ hi ển th ị: cửa sổ r ộng b ề ngang thì s ẽ thu ng ắn hơn, c ửa sổ h ẹp b ề ngang thì s ẽ đượ c kéo dài ra để hi ển th ị cho h ết n ội dung. Độ dài c ủa v ăn b ản HTML th ực s ự không b ị h ạn ch ế. I.3.3. Website và trang ch ủ - homepage Một website là m ột bó các trang web liên k ết với nhau và liên k ết v ới các trang ở bên ngoài ch ằng ch ịt như m ạng nh ện. Hàng tri ệu Website liên k ết v ới nhau t ạo thành World Wide Web – WWW Có th ể t ưở ng t ượ ng nh ư m ột ng ọn núi nh ỏ các trang web m ỗi ngày m ột cao thêm, đượ c phát tri ển b ằng cách thêm vào nhi ều trang web lý thú khác n ữa Có th ể minh ho ạ hình ảnh c ủa m ột website nh ư trong hình v ẽ bên Trang ch ủ hay trang chính - 'home page' có th ể hi ểu là c ửa chính - 'front door' để thâm nh ập vào kho thông tin liên k ết ch ằng ch ịt ấy. Vậy home page là trang web mà b ộ duy ệt s ẽ m ở ra đầ u tiên m ỗi k hi ng ườ i dùng b ắt đầ u th ăm website. 14
I.4. So ạn th ảo v ăn b ản - nh ững v ấn đề chung I.4.1. Trang mã ngu ồn HTML và trang Web Trang mã ngu ồn HTML là m ột t ệp v ăn b ản bình th ườ ng g ồm các kí t ự ASCII, có th ể đượ c t ạo ra b ằng b ất c ứ trình soạn th ảo thông th ườ ng nào. Theo quy ướ c, t ất c ả các t ệp mã ngu ồn c ủa trang siêu v ăn b ản ph ải có đuôi là .html ho ặc .htm. Khi trình duy ệt (browser) đọ c trang mã ngu ồn HTML, nó s ẽ dịch các th ẻ lệnh và hi ển th ị lên màn hình máy tính thì ta th ườ ng g ọi là trang Web. Vậy trang web không t ồn t ại trên đĩ a c ứng c ủa máy tính cục b ộ. Nó là cái th ể hi ện c ủa trang mã ngu ồn qua vi ệc xử lý của trình duy ệt. Nh ư sau này ta s ẽ th ấy, các trình duy ệt khác nhau có th ể hi ển th ị cùng m ột trang mã ngu ồn không hoàn toàn gi ống nhau. Nói so ạn th ảo siêu v ăn b ản t ức là t ạo ra trang mã ngu ồn HTML đúng quy đị nh để độ duy ệt hi ểu đượ c và hi ển th ị đúng. Sử d ụng HTML để so ạn th ảo các trang siêu v ăn b ản, về nguyên t ắc c ũng không khác m ấy so v ới dùng các b ộ so ạn th ảo v ăn b ản thông th ườ ng . Ch ẳng h ạn, trong so ạn th ảo v ăn b ản thông th ườ ng, để làm n ổi b ật các tiêu đề ta ph ải đánh d ấu nó và ch ọn c ỡ to, c ăn chính gi ữa Ch ươ ng trình so ạn th ảo v ăn b ản s ẽ chèn các d ấu hi ệu thích h ợp (ta không nhìn th ấy đượ c) vào đầ u và cu ối đoạn tiêu đề đượ c ch ọn để th ể hi ện nó theo yêu c ầu. Với HTML c ũng t ươ ng t ự nh ư v ậy. Để làm n ổi b ật các tiêu đề ta cần đánh dấu điểm b ắt đầ u và điểm k ết thúc c ủa đoạn tiêu đề b ằng c ặp th ẻ Heading, ví d ụ . Bộ duy ệt s ẽ hi ển th ị đoạn này v ới c ỡ ch ữ to h ơn và c ăn chính gi ữa. Ví d ụ, dòng sau đây trong tài li ệu HTML Tiêu đề mức 1 sẽ đượ c trình duy ệt hi ển th ị thành Tiêu đề mức 1 15
Hi ện nay có nhi ều công c ụ so ạn th ảo siêu v ăn b ản m ạnh nh ư Microsoft FrontPage, Dream Weaver v ới giao di ện tr ực quan và t ự độ ng sinh mã HTML, cho phép so ạn th ảo siêu v ăn b ản nh ư so ạn th ảo thông th ườ ng . Tuy nhiên, vi ệc tìm hi ểu cú pháp c ủa HTML, n ắm v ững ý ngh ĩa c ủa các th ẻ khác nhau v ẫn r ất c ần thi ết để có th ể t ạo ra các trang Web độ ng, t ươ ng tác v ới ng ườ i s ử dụng, t ức là các ứng d ụng Web sau này . I.4.2. Các th ẻ HTML Các th ẻ dùng để báo cho trình duy ệt cách th ức trình bày v ăn b ản trên màn hình ho ặc dùng để chèn m ột m ối liên k ết đế n các trang khác , một đoạn ch ươ ng trình khác Mỗi th ẻ g ồm m ột t ừ khoá - KEYWORD - bao b ọc b ới hai d ấu "bé h ơn" ( ). Hầu h ết các l ệnh th ể hi ện b ằng m ột c ặp hai th ẻ: th ẻ m ở ( ) và th ẻ đóng ( ). D ấu g ạch chéo ("/") kí hi ệu th ẻ đóng. L ệnh s ẽ tác độ ng vào đoạn v ăn b ản n ằm gi ữa hai th ẻ. Đoạn v ăn b ản ch ịu tác động c ủa l ệnh Một s ố th ẻ không có c ặp, chúng đượ c g ọi là các th ẻ rỗng hay th ẻ đơ n. Ch ỉ có th ẻ m ở mà thôi. Nhi ều th ẻ có kèm các thu ộc tính (attribute), cung c ấp thêm các tham s ố chi ti ết h ơn cho vi ệc th ực hi ện l ệnh. Các thu ộc tính đượ c chia làm hai lo ại: thu ộc tính bắt bu ộc và thu ộc tính không b ắt bu ộc hay tu ỳ ch ọn. Một thu ộc tính là b ắt bu ộc n ếu nh ư ph ải có nó thì th ẻ l ệnh m ới th ực hi ện đượ c. Ví d ụ, để chèn m ột hình ảnh vào trang tài li ệu ta dùng th ẻ (Image). Tuy nhiên, c ần ch ỉ rõ cái ảnh nào s ẽ đượ c dán vào đây. Điều này đượ c thi ết l ập bằng thu ộc tính SRC=" địa ch ỉ của t ệp ảnh" . Thu ộc tính SRC là b ắt bu ộc ph ải có đố i v ới th ẻ . 16
I.4.3. Các quy t ắc chung Một s ố điều c ần l ưu ý khi so ạn th ảo siêu v ăn b ản b ằng HTML: - Nhi ều d ấu cách li ền nhau c ũng ch ỉ có tác d ụng nh ư m ột d ấu cách. B ạn ph ải s ử d ụng th ẻ để th ể hi ện nhi ều d ấu giãn cách li ền nhau. - Gõ Enter để xu ống dòng đượ c xem nh ư m ột d ấu cách, để xu ống hàng thì chúng ta ph ải s ử d ụng th ẻ t ươ ng ứng - Có th ể vi ết tên th ẻ không phân bi ệt ch ữ in th ường và in hoa. - Vì các kí t ự d ấu l ớn h ơn ">", d ấu nh ỏ h ơn " > “ " Ký t ự tr ắng & & Có th ể chèn các dòng bình lu ận, chú thích vào trang mã ngu ồn b ằng cách đặ t gi ữa c ặp d ấu chú thích . Trình duy ệt s ẽ b ỏ qua không xét đế n ph ần mã n ằm gi ữa c ặp d ấu đó: 17
I.4.4. C ấu trúc c ủa m ột tài li ệu HTML Mọi tài li ệu HTML đề u có khung c ấu trúc nh ư sau: Hãy xem trình duy ệt hi ển th ị tài li ệu trên nh ư th ế nào. D ĩ nhiên là m ột trang tr ắng ch ưa có n ội dung gì c ả ! Gi ữa c ặp th ẻ tiêu đề là dòng ch ữ s ẽ hi ện lên trên thanh tiêu đề c ủa c ửa s ổ khi trình duy ệt đọ c tài li ệu. N ếu b ỏ tr ống thì trình duy ệt s ẽ cho hi ện tên t ệp thay vào đó. Toàn b ộ n ội dung c ủa tài li ệu n ằm gi ữa hai th ẻ xác đị nh thân c ủa trang . Các dòng v ăn b ản, hình ảnh, âm thanh, video, các m ối liên kết t ạo nên trang Web đề u ph ải n ằm ở đây. Ví d ụ nh ư tài li ệu HTML đơ n gi ản d ướ i đây: Ch ỗ này là tiêu đề Toàn b ộ nội dung c ủa tài li ệu n ằm ở đây: Các đoạn văn b ản xen l ẫn hình ảnh, âm thanh, video, các liên kết đến v ị trí khác, tài li ệu khác Hãy xem trình duy ệt trình bày tài li ệu trên nh ư th ế nào. Nh ớ l ại r ằng nhi ều d ấu cách ch ỉ đượ c coi nh ư m ột, d ấu xu ống dòng ch ỉ đượ c th ể hi ện nh ư m ột d ấu cách nên tài li ệu trên hoàn toàn t ươ ng đươ ng v ới tài li ệu sau đây: Ch ỗ này là tiêu đề 18
Toàn b ộ nội dung c ủa tài li ệu n ằm ở đây: Các đoạn văn b ản xen lẫn hình ảnh, âm thanh, video, các liên kết đến v ị trí khác, tài li ệu khác Tuy nhiên, để d ễ theo dõi và phát hi ện l ỗi, nên trình bày nh ư trong v ăn b ản tr ướ c: dóng th ẳng c ột t ừng c ặp th ẻ, xu ống dòng khi c ần thi ết, đặ t các th ẻ vào n ơi hợp lý nh ất. I.4.5. Các ph ần tử HTML (HTML element) Một tài li ệu HTML t ạo nên t ừ nhi ều thành ph ần HTML. M ột thành ph ần HTML đượ c đánh d ấu b ằng m ột c ặp th ẻ m ở và th ẻ đóng. Các thành ph ần HTML có th ể c ấu trúc phân c ấp hình cây, thành ph ần "m ẹ" ch ứa nhi ều thành ph ần "con" khác l ồng bên trong nó. Có thành ph ần r ỗng, ch ỉ có th ẻ m ở. Để so ạn th ảo tài li ệu HTML đúng cú pháp, c ần n ắm v ững c ấu trúc c ủa t ừng thành ph ần HTML. Không gi ống nh ư khi l ập trình, n ếu b ạn m ắc l ỗi cú pháp HTLM s ẽ không có một thông báo l ỗi nào báo cho bi ết mà trình duy ệt s ẽ hi ểu l ầm và trình bày trang Web không nh ư b ạn mu ốn mà thôi. Bài t ập 1. Nêu các đặc điểm c ủa siêu v ăn b ản (HTML) 2. Th ế nào là trang Web? 19
CH ƯƠ NG II. TRÌNH BÀY TRANG II.1. T ạo tiêu đề Mở đầ u các trang v ăn b ản th ường là các tiêu đề c ần làm n ổi b ật t ừng ph ần của v ăn b ản nh ư Ch ươ ng, M ục, c ũng c ần có đề m ục rõ ràng khác v ới ph ần thân để ng ười đọ c theo dõi cho thu ận ti ện. Có 6 m ức tiêu đề trong HTML. Cách th ể hi ện các tiêu đề ph ụ thu ộc vào trình duy ệt nh ưng thông th ường thì: • Tiêu đề m ức 1 Th ẻ đị nh ngh ĩa có d ạng: Ví d ụ: Tiêu đề 1 cho ta tiêu đề tươ ng ứng Tiêu đề 1 • Tiêu đề m ức 2 Th ẻ đị nh ngh ĩa có d ạng: Ví d ụ: Tiêu đề 2 cho ta tiêu đề tươ ng ứng Tiêu đề 2 • Tiêu đề m ức 3 Th ẻ đị nh ngh ĩa có d ạng: Ví d ụ: Tiêu đề 3 cho ta tiêu đề tươ ng ứng Tiêu đề 3 • Tiêu đề m ức 4 Th ẻ đị nh ngh ĩa có d ạng: Ví d ụ: Tiêu đề 4 cho ta tiêu đề tươ ng ứng Tiêu đề 4 20
• Tiêu đề m ức 5 Th ẻ đị nh ngh ĩa có d ạng: Ví d ụ: Tiêu đề 5 cho ta tiêu đề tươ ng ứng Tiêu đề 5 • Tiêu đề m ức 6 Th ẻ đị nh ngh ĩa có d ạng: Ví d ụ: Tiêu đề 6 cho ta tiêu đề tươ ng ứng Tiêu đề 6 II.2. Th ẻ trình bày trang II.2.1. M ột s ố th ẻ chính Các thành ph ần trình bày trang để định dạng c ả m ột đoạn v ăn b ản và ph ải nằm trong ph ần thân c ủa tài li ệu. Có nhi ều th ẻ được s ử d ụng nh ưng trong tài li ệu này ch ỉ trình bày m ột s ố th ẻ trình bày chính: định d ạng ph ần đị a ch ỉ ( ), đoạn v ăn b ản ( ), xu ống dòng ( ), c ăn chính gi ữa ( ), đường k ẻ ngang ( ), đoạn v ăn b ản đã định d ạng s ẵn ( ), trích d ẫn ngu ồn tài li ệu ( ) a. Định d ạng ph ần địa ch ỉ Cho bi ết thông tin nh ư địa ch ỉ, danh thi ếp và tác gi ả, th ường đặt ở đầu hay cu ối tài li ệu. Th ẻ đị nh d ạng: Ví d ụ: Newsletter editor J.R. Brown JimquickPost Ne ưs, Jumquick, CT 01234 Tel (123) 456 7890 Kết qu ả thu được: 21
b. Đoạn v ăn b ản Th ẻ này dùng để xác đị nh m ột đoạn v ăn b ản. Th ẻ (Paragraph) có th ể dùng kèm thu ộc tính để ấn đị nh cách trình bày đoạn v ăn b ản. Ch ỉ là giới h ạn m ột đoạn paragraph, cách bày trí do các thành ph ần khác t ạo thành. Th ường ch ỉ có kho ảng tr ống kho ảng m ột dòng hay n ửa dòng tr ước paragraph, tr ừ khi n ằm trong ph ần đị a ch ỉ . M ột s ố trình duy ệt th ể hi ện dòng đầu c ủa paragraph th ụt vào. Th ẻ đị nh ngh ĩa d ạng: Một đoạn v ăn b ản r ỗng là m ột dòng tr ắng. Vì đầu dòng CR (Carriage Return) không có hi ệu l ực xu ống dòng m ới mà ch ỉ có tác d ụng nh ư m ột d ấu cách, do đó có th ể t ạo m ột dòng dãn cách (m ột dòng tr ắng) gi ữa các đoạn v ăn b ản c ần ph ải s ử d ụng th ẻ . Tr ường h ợp này ch ỉ c ần dùng th ẻ đơ n l ẻ, không c ần th ẻ đóng. Chú ý: một s ố th ẻ khác nh ư các th ẻ tiêu đề , , , dòng k ẻ ngang , danh sách, b ảng bi ểu, đã kèm luôn vi ệc xu ống dòng thành m ột đoạn v ăn bản m ới. Không c ần dùng thêm th ẻ tr ước và sau các th ẻ này. c. Xu ống dòng Th ẻ này dùng để xu ống dòng m ới. B ắt bu ộc xu ống dòng t ại v ị trí g ặp t ừ khóa này. Dòng m ới được c ăn l ề nh ư dòng được b ẻ tự động khi dòng đó quá dài Th ẻ đị nh ngh ĩa d ạng: Nếu không mu ốn chèn m ột dòng tr ắng mà ch ỉ đơn thu ần mu ốn xu ống dòng mới thì c ần s ử d ụng th ẻ (Break). Th ẻ Break không c ần có th ẻ đóng kèm theo. 22
d. Đường k ẻ ngang Th ẻ này t ạo ra đường k ẻ ngang (Horizontal Rule) ng ăn cách gi ữa các ph ần trong tài li ệu. Th ẻ đị nh ngh ĩa d ạng: Ví d ụ: February 8, 1995, CERN Kết qu ả thu được: e. C ăn chính gi ữa Th ẻ này dùng để căn ch ỉnh đoạn v ăn b ản ở gi ữa chi ều r ộng trang v ăn b ản. Th ẻ đị nh ngh ĩa d ạng: Th ẻ này c ũng có tác d ụng xu ống dòng khi k ết thúc đoạn v ăn b ản. f. Đoạn v ăn b ản đã định d ạng s ẵn Gi ới h ạn đoạn v ăn b ản đã được đị nh d ạng s ẵn (pre-formatted) c ần được th ể hi ện b ằng phông ch ữ có độ r ộng ký t ự không đổ i (do ph ải th ẳng c ột). N ếu không có thu ộc tính WIDTH đi cùng thì b ề r ộng m ặc đị nh là 80 ký t ự/dòng. B ề r ộng 40,80 và 132 được th ể hi ện t ối ưu, còn các b ề r ộng khác có th ể được làm tròn. Th ẻ đị nh ngh ĩa d ạng: Trong các thành ph ần tr ước: Dấu xu ống dòng s ẽ có ý ngh ĩa chuy ển sang dòng m ới (ch ứ không còn là d ấu cách) không dùng. N ếu nó s ẽ được coi nh ư xu ống dòng Được phép dùng các thành ph ần liên k ết nh ấn m ạnh Không được ch ứa các thành ph ần đị nh d ạng paragraph (tiêu đề, đị a ch ỉ, ) 23
Ký t ự TAB (có mã US-ASCII và ISO-8859-1 là 9) ph ải hi ểu là s ố d ấu cách nh ỏ nh ất sao cho đế n ký t ự ti ếp theo ở v ị trí là b ội c ủa 8. Tuy nhiên không nên dùng. Ví d ụ: Nguy ễn V ăn A Th ợ rèn Tr ần Th ị B Th ợ Sơn Kết qu ả thu được: Nguy ễn V ăn A Th ợ rèn Tr ần Th ị B Th ợ Sơn g. Trích d ẫn ngu ồn tài li ệu khác Dùng để trích d ẫn m ột đoạn v ăn b ản, th ường được th ể hi ện b ằng ch ữ nghiêng có c ăn l ề th ụt vào trong (nh ư m ột paragraph) và th ường có m ột dòng tr ống trên và d ưới. Th ẻ đị nh ngh ĩa d ạng: Ví d ụ: I think the poem ends Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembed. but I am not sure. Kết qu ả thu được: I think the poem ends Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembed. but I am not sure. 24
II.2.2. Các thu ộc tính c ủa th ẻ trình bày trang a. Thu ộc tính ALIGN c ủa th ẻ Paragraph Th ẻ dùng để xác đị nh m ột đoạn v ăn b ản (nh ư trình bày ở ph ần tr ước). Dưới đây ta tìm hi ểu k ỹ thêm m ột s ố các thu ộc tính kèm theo ( ALIGN ) c ủa nó. Có th ể c ăn l ề trái (left - mặc đị nh), c ăn gi ữa (center) ho ặc c ăn l ề ph ải (right). • Căn lề trái: Cả đoạn v ăn b ản được c ăn l ề trái c ủa trang. Ví d ụ: Có l ần tôi th ấy m ột ng ười đi Ch ẳng bi ết v ề đâu ngh ĩ ng ợi gì Chân b ước h ững h ờ theo bóng l ẻ Một mình làm c ả cu ộc phân ly Kết qu ả tr ả v ề m ột đoạn v ăn b ản được c ăn l ề bên trái nh ư sau: Có l ần tôi th ấy m ột ng ười đi Ch ẳng bi ết v ề đâu ngh ĩ ng ợi gì Chân b ước h ững h ờ theo bóng l ẻ Một mình làm c ả cu ộc phân ly • Căn gi ữa: Cả đoạn v ăn b ản được c ăn chính gi ữa trang. Ví d ụ: Có l ần tôi th ấy m ột ng ười đi Ch ẳng bi ết v ề đâu ngh ĩ ng ợi gì Chân b ước h ững h ờ theo bóng l ẻ Một mình làm c ả cu ộc phân ly Kết qu ả tr ả v ề m ột đoạn v ăn b ản được c ăn gi ữa nh ư sau: Có l ần tôi th ấy m ột ng ười đi Ch ẳng bi ết v ề đâu ngh ĩ ng ợi gì Chân b ước h ững h ờ theo bóng l ẻ Một mình làm c ả cu25 ộc phân ly
• Căn l ề ph ải: Cả đoạn v ăn b ản được c ăn l ề bên ph ải c ủa trang. Ví d ụ: Có l ần tôi th ấy m ột ng ười đi Ch ẳng bi ết v ề đâu ngh ĩ ng ợi gì Chân b ước h ững h ờ theo bóng l ẻ Một mình làm c ả cu ộc phân ly Kết qu ả tr ả v ề m ột đoạn v ăn b ản được c ăn l ề bên ph ải nh ư sau: Có l ần tôi th ấy m ột ng ười đi Ch ẳng bi ết v ề đâu ngh ĩ ng ợi gì Chân b ước h ững h ờ theo bóng l ẻ Một mình làm c ả cu ộc phân ly b. Thu ộc tính Clear c ủa th ẻ xu ống dòng Th ẻ xu ống dòng cũng có 3 thu ộc tính kèm theo nh ư sau: Các th ẻ được s ử d ụng khi chèn hình ảnh, để các dòng ch ữ xu ất hi ện bên d ưới, bên trái hay bên ph ải c ủa hình. c. Các ki ểu đường k ẻ ngang khác nhau Nh ư ở ph ần trên đã gi ới thi ệu, th ẻ tạo m ột đường k ẻ ngang ch ạy su ốt chi ều r ộng c ửa s ổ màn hình. Các đường k ẻ này có th ể được thay đổ i độ đậ m (m ảnh), ng ắn, dài, c ăn l ề trái, c ăn l ề ph ải, b ằng cách s ử d ụng các thu ộc tính c ủa chúng. Trong đó: 26
Th ẻ, thu ộc tính Miêu t ả Chèn dòng k ẻ ngang su ốt chi ều r ộng c ửa s ổ màn hình Thay đổi độ dài c ủa đường k ẻ, chi ếm n% độ rộng c ửa WIDTH = n% sổ màn hình. N ếu không có % đằng sau thì độ dài tính theo đơ n v ị pixcel SIZE = n Thay đổi độ đậm hay m ảnh c ủa đường k ẻ. n là s ố pixcel ALIGN=LEFT|RIGHT Căn l ề trái|ph ải. Đường k ẻ ngang m ặc định được c ăn chính gi ữa NOSHADE Không có bóng m ờ, đường k ẻ thành màu đen Bài t ập 1. Tiêu đề trong trang Web có m ấy m ức chính? 2. Nêu các thu ộc tính c ủa th ẻ Paragraph ( ). Hãy t ạo m ột trang web đơn gi ản trong đó có s ử d ụng tiêu đề m ức 2 và th ẻ Paragraph ( ). 3. Tạo m ột trang web đơn gi ản t ự gi ới thi ệu v ề mình, b ạn bao nhiêu tu ổi, b ạn làm gì, s ở thích c ủa b ạn. 27
CH ƯƠ NG III. DANH SÁCH VÀ B ẢNG TRONG HTML III.1. Các ki ểu danh sách Vi ệc li ệt kê danh sách s ẽ làm cho v ăn b ản tr ở nên sáng s ủa và d ễ theo dõi. Trong HTML có một s ố ki ểu danh sách nh ư danh sách đánh s ố th ứ t ự, danh sách không đánh s ố th ứ t ự, danh sách đị nh ngh ĩa, danh sách ki ểu b ảng ch ọn và danh sách ki ểu th ư m ục. Một s ố trình duy ệt không h ỗ tr ợ danh sách ki ểu b ảng ch ọn và danh sách ki ểu th ư m ục. III.1.1. Danh sách không đánh s ố th ứ tự Danh sách không đánh s ố th ứ t ự li ệt kê các m ục b ằng m ột ch ấm tròn ở đầ u mỗi m ục. Cú pháp: M ục th ứ 1 M ục th ứ 2 Cặp th ẻ đánh d ấu b ắt đầ u và k ết thúc danh sách. Nó có tác dụng lùi l ề trái danh sách vào sâu h ơn. Các th ẻ có tác d ụng th ể hi ện b ắt đầ u m ột dòng m ới v ới m ột ch ấm tròn. Ví d ụ: M ục th ứ 1 M ục th ứ 2 M ục th ứ 3 Kết qu ả tr ả v ề m ột danh sách sau: • Mục th ứ 1 • Mục th ứ 2 • Mục th ứ 3 28
Theo m ặc đị nh, m ỗi m ục thu ộc m ức th ứ nh ất c ủa danh sách không đánh s ố th ứ t ự b ắt đầ u b ằng m ột ch ấm tròn, còn m ỗi m ục thu ộc m ức th ứ hai s ẽ b ắt đầ u b ằng một vòng tròng. Ta vẫn có th ể thay đổ i b ằng cách s ử d ụng thu ộc tính TYPE Cú pháp: ho ặc Ví d ụ: M ục th ứ 1 M ục th ứ 2 M ục th ứ 3 Kết qu ả tr ả v ề m ột danh sách sau: o Mục th ứ 1 o Mục th ứ 2 o Mục th ứ 3 III.1.2. Danh sách đánh s ố th ứ tự Danh sách đánh s ố th ứ t ự gi ống nh ư danh sách không đánh s ố th ứ t ự nh ưng các ch ấm tròn ở đầ u mỗi m ục s ẽ được thay b ởi vi ệc đánh s ố th ứ t ự các m ục đó. Cú pháp: M ục th ứ 1 M ục th ứ 2 Cặp th ẻ đánh d ấu b ắt đầ u và k ết thúc danh sách. Nó có tác dụng lùi l ề trái danh sách vào sâu h ơn. 29
Các th ẻ có tác d ụng th ể hi ện b ắt đầu m ột dòng m ới v ới m ột s ố th ứ t ự tươ ng ứng. Ví d ụ: M ục th ứ 1 M ục th ứ 2 M ục th ứ 3 Kết qu ả tr ả v ề m ột danh sách sau: 1. Mục th ứ 1 2. Mục th ứ 2 3. Mục th ứ 3 Có th ể dùng thu ộc tính TYPE để l ựa ch ọn các cách đánh th ứ t ự khác nhau khi b ắt đầ u m ỗi m ục trong m ột danh sách có đánh s ố th ứ t ự: Ch ữ in hoa A,B,C, (TYPE=A) Ch ữ in th ường a,b,c, (TYPE=a) Ch ữ s ố La mã l ớn I,II,III, (TYPE=I) Ch ữ s ố La mã nh ỏ i, ii, iii, (TYPE=i) Số th ứ t ự 1,2,3,4, (TYPE=1) , đây là l ựa ch ọn m ặc đị nh Cú Pháp: Ho ặc Ví d ụ: M ục th ứ 1 M ục th ứ 2 M ục th ứ 3 30
Kết qu ả tr ả v ề m ột danh sách sau: I. Mục th ứ 1 II. Mục th ứ 2 III. Mục th ứ 3 III.1.3. Danh sách các định ngh ĩa Danh sách các định ngh ĩa trông gi ống nh ư m ột b ảng t ừ v ựng hay b ảng gi ải thích các thu ật ng ữ lùi vào trong. Cú pháp: ho ặc Ví d ụ: M ục th ứ 1 N ội dung m ục th ứ 1 M ục th ứ 2 N ội dung m ục th ứ 2 M ục th ứ 3 N ội dung m ục th ứ 3 Kết qu ả tr ả v ề m ột danh sách sau: Mục th ứ 1 Nội dung m ục th ứ 1 Mục th ứ 2 Nội dung m ục th ứ 2 Mục th ứ 3 Nội dung m ục th ứ 3 III.1.4. Danh sách ph ối h ợp, l ồng nhau Các ki ểu danh sách nêu trên đều có th ể l ồng nhau và l ồng nhau nhi ều m ức. Ví d ụ: 31
M ức 1 M ức 1.1 M ức 1.2 M ức 2 M ức 2.1 M ức 2.2 Kết qu ả tr ả v ề: • Mức 1 • Mức 1.1 • Mức 1.2 • Mức 2 • Mức 2.1 • Mức 2.2 III.2. B ảng bi ểu III.2.1. Khung c ấu trúc Gi ới h ạn b ảng: Định ngh ĩa m ột hàng: Định ngh ĩa m ột ô: Ô ch ứa tiêu đề: . (H=Header) Đầu đề c ủa b ảng: Cú pháp t ạo khung c ấu trúc của m ột b ảng: Tên c ột 1 Tên c ột 2 Ô 1 dòng 1 32
Ô 2 dòng 1 Ví d ụ: H ọ và tên L ớp Quê quán Bùi Thanh Trúc K50CA Hà N ội Nguy ễn Mai H ươ ng K50CB Thanh Hóa Kết qu ả thu được b ảng nh ư sau: Họ và tên Lớp Quê quán Bùi Thanh Trúc K50CA Hà N ội Nguy ễn Mai H ươ ng K50CB Thanh Hóa III.2.2. M ột s ố lưu ý v ề bảng Ô r ỗng thì không có đường bao. Mu ốn ô r ỗng có đường bao ph ải dùng d ấu cách không b ẻ dòng: ho ặc Có th ể l ợi d ụng ROWSPAN và COLSPAN để t ạo b ảng có ô ch ồng chéo lên nhau nh ưng không nên l ạm d ụng. 33
Đôi lúc hình ảnh n ằm ngoài ô ta mu ốn đưa hình ảnh đó vào. Nguyên nhân là do HTML được vi ết nh ư sau: Dấu xu ống dòng ở đây coi nh ư d ấu cách do đó có s ự ch ồng chéo hình ảnh với ký t ự tr ắng đó. Cách kh ắc ph ục nh ư sau: Mặc đị nh b ảng không có đường bao n ếu không đi v ới thu ộc tính BORDER . Bảng có các thu ộc tính sau: BORDER Để đị nh ngh ĩa m ột b ảng có đường bao. Tuy nhiên không làm ảnh h ưởng t ới độ r ộng c ủa b ảng. BORDER = Cho phép khai báo độ dày c ủa đường bao cho phép ch ỉnh đường bao ngoài đậm h ơn đường bao trong để d ễ nhìn h ơn, m ặt khác n ếu giá tr ị b ằng không l ại cho phép dành ch ỗ cho s ố li ệu bên trong, nh ất là đối v ới nh ững b ảng compact. CELLSPACING= Kho ảng cách gi ữa các ô. CELLPADDING= Kho ảng cách gi ữa n ội dung c ủa ô và đường bao. Cho ta b ảng compact nh ất có th ể có (dành t ất c ả cho n ội dung). WIDTH = Nếu đi cùng v ới thu ộc tính này có ý ngh ĩa mô t ả chi ều r ộng mong mu ốn c ủa b ảng (tính tuy ệt đố i b ằng pixels hay theo ph ần tr ăm so v ới b ề r ộng c ủa tài li ệu). Th ường thì trình duy ệt t ự tính toán sao cho b ảng được b ố trí h ợp lý. Dùng 34
thu ộc tính này b ắt bu ộc trình duy ệt c ố g ắng làm sao x ếp được các ô vào b ảng có b ề rộng mong mu ốn đó. Nếu đi cùng v ới hay lại có ý ngh ĩa t ươ ng t ự đố i v ới m ột ô. ROWSPAN Cho bi ết ô hi ện th ời chi ếm m ấy hàng c ủa b ảng, m ặc đị nh là 1. ALIGN Nếu n ằm trong nó có ý ngh ĩa đố i v ới đầ u đề c ủa hàng n ằm trên hay n ằm d ưới, có giá tr ị ho ặc TOP ho ặc BOTTOM (m ặc đị nh là TOP ). Nếu n ằm trong , hay có giá tr ị LEFT, CENTER hay RIGHT và điều khi ển vi ệc đặ t n ội dung c ủa ô c ăn bên trái, vào gi ữa ô hay c ăn bên ph ải. VALIGN Nếu n ằm trong , hay có th ể có các giá tr ị TOP, MIDDLE, BOTTOM hay BASELINE để điều khi ển vi ệc đặ t n ội dung c ủa ô lên trên, vào gi ữa (theo chi ều d ọc) hay xu ống d ưới và c ũng có th ể là t ất c ả cùng các ô trong hàng cùng c ăn theo m ột đường n ằm ngang. Có ngh ĩa là d ữ li ệu b ảng (Table Data), ch ỉ được xu ất hi ện trong m ột hàng của b ảng. M ỗi hàng không nh ất thi ết ph ải có cùng s ố ô vì dòng ng ắn h ơn s ẽ được ch ắp thêm ô r ỗng vào bên ph ải. M ỗi ô chỉ được ch ứa các thành ph ần bình th ường khác n ằm trong ph ần thân c ủa tài li ệu. Các thu ộc tính m ặc đị nh là: ALIGN=left và VALIGN=middle . Các m ặc đị nh này có th ể thay đổ i b ởi các thu ộc tính trong và l ại thay đổ i ti ếp b ởi thu ộc tính ALIGN ho ặc VALIGN khai báo riêng cho t ừng ô. Bình th ường m ặc đị nh thì n ội dung s ẽ được b ẻ dòng cho v ừa vào kh ổ r ộng c ủa t ừng ô. Dùng thu ộc tính NOWRAP trong để c ấm vi ệc đó. cũng có th ể ch ứa các thu ộc tính NOWRAP, COLSPAN và ROWSPAN. NOWRAP Nh ư nói ở trên, c ần th ận tr ọng khi dùng thu ộc tính này để phòng có ô quá r ộng. 35
COLSPAN Có th ể xu ất hi ện trong b ất k ỳ ô nào ( hay ) và ch ỉ r ằng ô đó bành tr ướng ra m ấy c ột c ủa b ảng, m ặc đị nh là 1. Có ngh ĩa là tiêu đề c ủa b ảng (Table Header), các ô này t ương t ự nh ư ô bình th ường khác được đị nh ngh ĩa b ằng , có điều font ch ữ đậ m và có thu ộc tính mặc đị nh là ALIGN=Center. cũng có th ể ch ứa thu ộc tính VALIGN, NOWRAP, COLSPAN và ROWSPAN. Đặt đầ u đề cho m ột b ảng nên ph ải nằm trong m ột c ặp song không được n ằm trong hàng hay c ột. Thu ộc tính m ặc đị nh là ALIGN=Top (đầu đề đặ t ở đầu b ảng), song có th ể đặ t là ALIGN=Bottom (cu ối b ảng). Đầ u đề có th ể ch ứa b ất kỳ thành ph ần nào m ột ô có th ể ch ứa và luôn được c ăn l ề vào gi ữa bảng (theo chi ều ngang) và có th ể c ũng có b ẻ dòng cho phù h ợp. Dưới đây là b ảng tóm t ắt li ệt kê các thu ộc tính c ủa th ẻ xây d ựng b ảng: Th ẻ/Thu ộc tính Ý ngh ĩa TABLE - Bắt đầu b ảng BORDER - Đặt khung n ổi 3D xung quanh b ảng. Đặt bảng. CELLPADDING - Đặt kích th ước c ủa m ột ô. BGCOLOR - Đặt màu n ền c ủa b ảng. B3/4t Đầu m ột dòng c ủa b ảng – Table row. B3/4t Đầu m ột ô c ủa b ảng (b ắt đầu c ột trong m ột bảng). Th ẻ gi ống nh ư nh ưng cho ch ữ đậm và căn chính gi ữa - (heading). Đặt tiêu đề (đầu đề) cho m ột b ảng Thu ộc tính dùng kèm bên trong các th ẻ , ALIGN=MIDDLE|RIGHT hay để căn l ề ch ữ trong m ột ô c ủa b ảng theo chi ều ngang VALIGN=TOP|BOTTOM Thu ộc tính dùng kèm các th ẻ , hay 36
để giãn m ột ô theo chi ều ngang chi ếm nhi ều c ột h ơn các ô trên dòng khác. WIDTH=n% Thu ộc tính dùng kèm các th ẻ hay để đặt độ rộng c ủa ô. Thu ộc tính dùng kèm các th ẻ hay để giãn COLSPAN=n một ô theo chi ều ngang chi ếm nhi ều c ột h ơn các ô trên dòng khác. Thu ộc tính dùng kèm các th ẻ hay để giãn ROWSPAN=n một ô theo chi ều đứng chi ếm nhi ều dòng h ơn các ô ở cột khác Kết thúc b ảng III.2.3. Các ví d ụ Ví d ụ m ột b ảng c ơ b ản g ồm 2 dòng và 3 c ột: A B C D E F Kết qu ả tr ả v ề: Ví d ụ m ột b ảng có Item 2 (tiêu th ức 2) chi ếm 2 hàng (dòng): Item 1 Item 2 Item 3 Item 4 Item 5 37
Kết qu ả tr ả v ề: Ví d ụ m ột b ảng có Item 1 (tiêu th ức 2) chi ếm 2 hàng (dòng): Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Kết qu ả tr ả v ề: Ví d ụ b ảng có Item 2 (tiêu th ức 2) chi ếm 2 c ột: Item 1 Item 2 Item 3 Item 4 Item 5 Kết qu ả tr ả v ề: 38
Ví d ụ m ột b ảng có tiêu đề: Head 1 Head 2 Head 3 D E F Kết qu ả tr ả v ề: Ví d ụ m ột b ảng có tiêu đề chi ếm 2 c ột: Head 1 Head 2 A B C D E F G H Kết qu ả tr ả v ề: 39
Bài t ập 1. Sửa ph ần gi ới thi ệu c ủa b ạn (bài t ập 3, ch ươ ng 2) sao cho các m ục đó đưa v ề dạng danh sách và li ệt kê 5 th ứ b ạn thích nh ất d ưới d ạng s ố. 2. Áp d ụng nh ững gì đã h ọc ở trên, hãy t ạo m ột danh sách nh ư sau: • Top level 1 • Top level 2 1. Second Level o Fact 1 o Fact 2 • Top level 3 3. Áp d ụng nh ững gì đã h ọc ở trên, hãy t ạo b ảng gi ống nh ư sau: Tổng k ết năm h ọc 2003 - 2004 Th ống kê HS gi ỏi HS khá HS trung bình Lớp 1A 35 4 0 Lớp 1B 20 10 12 Lớp 1C 5 25 20 40
CH ƯƠ NG IV. ĐƯ A HÌNH ẢNH VÀO TÀI LI ỆU HTML IV.1. Hình ảnh t ĩnh IV.1.1. T ệp ảnh Mỗi ảnh được l ưu gi ữ trong máy tính thành m ột t ệp riêng bi ệt. Tệp ảnh có nhi ều đị nh d ạng khác nhau, th ể hi ện qua ph ần m ở r ộng ( đuôi) c ủa tên t ệp: *.bmp, *.gif, *.jpeg, *.jpg, Tuy nhiên các trình duy ệt ch ỉ có th ể “hi ểu” được các t ệp ảnh d ưới d ạng GIF hay JPEG. Hình ảnh d ạng GIF được s ử d ụng r ộng rãi nh ất trên Internet, sau đó là đến các ảnh d ạng JPEG. IV.1.2. Th ẻ Cú pháp chèn ảnh vào trang Web: IMG (Image), thu ộc tính SRC (Source) là đường d ẫn đế n n ơi l ấy t ệp ảnh. Giá tr ị c ủa thu ộc tính SRC được gán b ằng URL là m ột đị a ch ỉ trên máy tính địa ph ươ ng hay trên Internet. Nó ch ỉ ra n ơi l ưu tr ữ t ệp ảnh c ần chèn vào. Địa ch ỉ URL báo cho trình duy ệt bi ết c ần l ấy t ệp ảnh ở đâu. Nếu t ệp ảnh n ằm ngay trên máy tính địa ph ươ ng thì c ần ghi rõ đường d ẫn Nếu t ệp ảnh l ấy t ừ m ột n ơi khác trên Internet thì ph ải ghi đầ y đủ đị a ch ỉ URL Ví d ụ: IV.2. Các thu ộc tính c ủa th ẻ chèn hình ảnh Trong th ẻ IMG còn có m ột s ố thu ộc tính khác nh ư: ALT, WIDTH, HEIGHT, ALIGN, VSPACE, HSPACE, BORDER IV.2.1. Thu ộc tính ALT Thu ộc tính ALT – ALTernative cho phép ta chèn m ột đoạn ch ữ thay th ế vào ch ỗ có hình và hi ện lên xâu chú thích khi đư a tr ỏ chu ột vào ảnh. Thu ộc tính này dùng trong tr ường h ợp trình duy ệt không hi ển th ị được hình ảnh thì s ẽ hi ện dòng văn b ản thay th ế. Làm nh ư vậy để nh ững ng ười s ử d ụng trình duy ệt không có kh ả 41
năng đọc ảnh hay đã t ắt ch ức n ăng đọ c ảnh để t ăng t ốc độ có th ể bi ết được đó là hình ảnh gì và h ọ có th ể ch ọn xem sau n ếu có th ời gian. Nên luôn s ử d ụng thu ộc tính này khi đư a hình ảnh vào trang Web vì nhi ều ng ười mu ốn có t ốc độ cao, l ướt nhanh qua các thông tin là chính đã t ắt ch ức n ăng đọc ảnh c ủa trình duy ệt v ẫn có th ể bi ết được ảnh đó mang n ội dung gì. Ví d ụ: Hi ện ảnh Ảnh (không hi ện lên) khi có và không s ử d ụng thu ộc tính ALT Nếu không s ử d ụng thu ộc tính ALT thì t ại ch ỗ có hình s ẽ hi ện t ừ IMAGE ho ặc bi ểu t ượng ảnh b ị khuy ết. IV.2.2. Thu ộc tính WIDTH và HEIGHT Thu ộc tính WIDTH và HEIGHT dùng để xác đị nh chi ều r ộng và chi ều cao c ủa ảnh. Giá tr ị này có th ể tính theo ph ần tr ăm (%) ho ặc pixel. Chú ý: Nếu đặ t chi ều r ộng và chi ều cao không chu ẩn s ẽ làm hình trong ảnh b ị co giãn méo đi. Để kh ắc ph ục nh ược điểm này, ta nên x ử lý ảnh để kích th ước phù hợp v ới yêu c ầu. Ví d ụ: 42
IV.2.3. Thu ộc tính ALIGN Thu ộc tính ALIGN cho phép ch ỉnh l ại v ị trí c ủa ảnh theo c ả hai chi ều ngang và chi ều d ọc. Theo chi ều d ọc: ALIGN=MIDDLE, ALIGN=TOP, ALIGN=BOTTOM ALIGN=TOP ALIGN=MIDDLE ALIGN=BOTTOM Theo chi ều ngang: ALIGN=LEFT, ALIGN=RIGHT ALIGN=LEFT ALIGN=RIGHT Nếu nh ư không có thu ộc tính này thì m ặc định ảnh được đặ t t ại đúng n ơi đặt th ẻ IMG dóng trên cùng dòng ch ữ, theo c ạnh d ưới c ủa khung nhìn. IV.2.4. Thu ộc tính VSPACE và HSPACE Khi s ử d ụng thu ộc tính ALIGN, ảnh được chèn vào dòng v ăn b ản v ới các ch ữ dính sát li ền. Thu ộc tính VSPACE và HSPACE dùng để t ạo kho ảng tr ống nh ỏ vi ền xung quanh ảnh (tính theo đơn v ị pixel). VSPACE=n Thêm kho ảng tr ống theo chi ều d ọc HSPACE=n Thêm kho ảng tr ống theo chi ều ngang Ví d ụ: 43
Bài t ập 1. Hãy cho bi ết t ại sao các ảnh d ưới đây có th ể được nhúng vào trong m ột tài li ệu HTML? Vi ết đoạn code được dùng để nhúng các ảnh đó. 2. Tạo m ột trang web và chèn các ảnh sao cho ảnh n ằm ở phía bên trái, và các đoạn v ăn b ản n ằm bên ph ải. 3. Tạo m ột trang web và chèn các ảnh sao cho ảnhh được c ăn giữa và các đoạn văn b ản n ằm ở trên ho ặc ở bên d ưới. 44
CH ƯƠ NG V. CÁC M ỐI LIÊN K ẾT SIÊU V ĂN B ẢN V.1. Th ẻ neo và m ối liên k ết Các liên k ết siêu v ăn b ản trong m ột tài li ệu HTML là để tham chi ếu đế n m ột tài li ệu khác hay m ột ph ần tài li ệu khác n ằm trong tài li ệu đó. Liên k ết siêu v ăn b ản g ồm có ba ph ần: giao th ức, cái neo và địa ch ỉ hay URL Để t ạo m ột m ối liên k ết thì vi ệc đầ u tiên c ần làm là thi ết l ập cái neo. C ặp th ẻ tạo neo là (Anchor). Th ẻ này có nhi ều thu ộc tính b ắt bu ộc ph ải xác đị nh rõ, ta s ẽ tìm hi ểu k ỹ h ơn ở ph ần sau. V.1.1. Thu ộc tính HREF HREF (Hypertext REFerence – tham chi ếu siêu v ăn b ản) được dùng để liên kết đế n: Một tài li ệu khác (external link) hay Một ph ần khác n ằm trong chính tài li ệu đang đọ c (internal link) Giao th ức để tham chi ếu HREF là HTTP. N ếu là liên k ết n ội t ại – internal link thì không c ần ph ải có ph ần giao th ức. V.1.2. Liên k ết ra ngoài – External Links Để liên k ết đế n m ột tài li ệu khác, ta c ần ph ải bi ết đị a ch ỉ URL c ủa tài li ệu đích. C ũng c ần ph ải ch ỉ ch ỗ, th ườ ng là m ột nhóm vài t ừ để làm đầ u m ối liên k ết. Nhóm t ừ này s ẽ đổ i màu để phân bi ệt, con chu ột tr ỏ vào s ẽ có hình bàn tay và khi nh ấn chu ột thì trang siêu v ăn b ản đích s ẽ đượ c hi ển th ị. Nên ch ọn các t ừ làm đầ u mối sao cho g ợi t ả và sao cho t ự nhiên, không ảnh hưởng đến n ội dung và ý ngh ĩa c ủa câu v ăn. Tránh s ử dụng l ặp đi l ặp l ại câu "nh ấn vào đây" khi t ạo đầ u m ối liên k ết. Cú pháp để t ạo ra m ột m ối liên k ết t ới tài li ệu khác - liên k ết ra ngoài - là nh ư sau: 45
V.1.3. Địa ch ỉ tuy ệt đối Khi liên k ết t ới m ột t ệp n ằm ở ngoài máy tính c ục b ộ ta ph ải nêu rõ giao th ức và đầ y đủ đị a ch ỉ URL c ủa t ệp đích. Ví d ụ: V.1.4. Địa ch ỉ tươ ng đối Nếu liên k ết đế n m ột t ệp ở ngay trên máy ch ủ c ủa bạn thì không c ần dùng đị a ch ỉ URL tuy ệt đố i mà dùng đị a ch ỉ t ươ ng đố i. Thay cho URL là tên t ệp cùng với đườ ng đẫ n đế n th ư m ục n ơi ch ứa t ệp đích. Ví d ụ: V.1.5. Liên k ết n ội t ại – Internal Link Cũng có th ể t ạo m ối liên k ết trong b ản thân tài li ệu siêu v ăn b ản, t ừ ph ần này đế n ph ần khác. Điều này r ất có ích khi tài li ệu có kích th ướ c l ớn. Ta có th ể t ạo m ục lục toàn b ộ nội dung trên ph ần đầ u trang g ồm tên các ch ươ ng và liên k ết t ừng tên ch ươ ng đế n ph ần n ội dung t ươ ng ứng. Để làm điều này, c ần đánh d ấu điểm đích - book mark- của liên k ết b ằng th ẻ neo còn trong th ẻ neo tại điểm đầ u c ủa m ối liên k ết thì thay URL b ằng tên nói trên. Lưu ý có thêm d ấu "#". Ví d ụ, để t ạo liên k ết n ội t ại t ừ đây nh ảy v ề đầ u trang ta c ần t ạo m ột book mark ở đầ u trang v ới tên là Top ch ẳng h ạn. Sau đó, t ạo th ẻ neo liên k ết ở dòng dướ i nh ư sau 46
V.2. Dùng hình ảnh làm đầu m ối liên k ết V.2.1. Thay ch ữ bằng hình Nh ư ở ph ần trên, c ấu trúc thành ph ần HTML m ối liên k ết siêu v ăn b ản là: V.2.2. Image Map - th ẻ AREA Th ử hình dung ta có m ột b ản đồ đị a lý hành chính. Khi nh ấn chu ột vào vùng di ện tích c ủa m ột t ỉnh thì m ột trang thông tin t ươ ng ứng v ới t ỉnh đó s ẽ hi ện ra. Đó chính là Image Map. Với Image Map, “ đầ u m ối liên k ết” là m ột vùng trên m ột hình ảnh có hình dạng tùy ý nào đó. Các công c ụ so ạn th ảo tr ực quan cho phép d ễ dàng t ạo Image Map. Một ví d ụ v ề mã ngu ồn HTML c ủa thành ph ần Image Map nh ư sau: Đoạn mã trên s ẽ t ạo 3 đầ u m ối liên k ết là ba vùng hình ch ữ nh ật (rect), hình tròn (circle) và hình tam giác (polygon) trên n ền ảnh image.gif. Khi nh ấn chu ột vào ph ạm vi 3 vùng này thì các t ệp t ươ ng ứng chapter1.html, chapter2.html và chapter3.html s ẽ được n ạp v ề để hi ển th ị. 47
V.3. Đư a âm thanh vào tài li ệu V.3.1. Liên k ết đến t ệp âm thanh Để chèn m ột đoạn âm thành vào tài li ệu HTML ta c ũng theo đúng quy t ắc tạo m ối liên k ết thông th ường. Trong th ẻ neo, t ại đị a điểm URL bây gi ờ là địa ch ỉ của t ệp âm thanh. Dưới đây là m ột ví d ụ v ề vi ệc chèn âm thành vào tài li ệu. Khi nh ấn chu ột vào m ối liên k ết này, t ệp âm thanh s ẽ được phát l ại. V.3.2. T ạo âm thanh n ền Không nh ững có th ể chèn t ệp âm thanh vào tài li ệu HTML mà còn có th ể nhúng âm thanh vào tài li ệu, ngh ĩa là âm thanh n ền phát ra khi trang tài li ệu b ắt đầ u hi ển th ị. Để nhúng âm thanh vào tài li ệu ta dùng th ẻ Trong đó: Thu ộc tính Mô t ả SRC=”URL” Đường d ẫn đến t ệp âm thanh HEIGHT=n Chi ều cao c ủa khung nhìn cho giao di ện điều khi ển c ủa ph ần m ềm phát âm thanh WIDTH=n Chi ều r ộng c ủa khung nhìn cho giao di ện điều khi ển c ủa ph ần m ềm phát âm thanh AUTOSTART=true|false Âm thanh t ự động được kích ho ạt khi b ắt đầu nạp tài li ệu hi ện th ị (nên đặt là true) LOOP=true|false Thi ết l ập vi ệc l ặp l ại nhi ều l ần hay ch ỉ một l ần Đặt th ẻ ở đâu thì khung nhìn c ủa giao di ện điều khi ển vi ệc phát tệp âm thanh xu ất hi ện ở đó. Ví d ụ: 48
V.4. Đư a Video vào tài li ệu V.4.1. Chèn t ệp Video Vi ệc chèn t ệp video vào tài li ệu HTML c ũng gi ống nh ư chèn t ệp âm thanh. Ví d ụ đoạn mã sau đây s ẽ chèn m ột đoạn phim video vào tài li ệu. Nó s ẽ t ạo ra m ột m ối liên k ết t ới t ệp video đã ch ọn và khi ta nh ấn chu ột vào m ối liên k ết thì sẽ được xem l ại t ệp video đó. Chú ý: Các t ệp video đề u có kích th ước khá l ớn nên hãy cân nh ắc v ề t ốc độ đường truy ền c ủa ng ười dùng. V.4.2. Nhúng t ệp video Th ẻ cũng dùng để nhúng t ệp video vào tài li ệu: Ví d ụ: Cũng t ươ ng t ự nh ư các thu ộc tính c ủa vi ệc chèn t ệp âm thanh: Thu ộc tính Mô t ả SRC=”URL” Tên và đường d ẫn đến t ệp video HEIGHT=n Chi ều cao c ủa khung hình chi ếu video WIDTH=n Chi ều r ộng c ủa khung hình chi ếu video Đặt cho video t ự ch ạy khi b ắt đầu n ạp tài li ệu AUTOPLAY=true|false (không b ắt bu ộc) Cho hi ện giao di ện điều khi ển c ủa ph ần m ềm CONTROLLER=true|flase video ở li ền ngay phía d ưới khung hình. Thu ộc tính này không b ắt bu ộc. M ặc định là true. LOOP=true|false Thi ết lập vi ệc l ặp l ại nhi ều l ần hay ch ỉ một l ần Vị trí đặ t th ẻ là n ơi xu ất hi ện khung hình video. 49
Bài t ập 1. Tạo m ột trang khác gi ới thi ệu chi ti ết h ơn v ề mình và có liên k ết t ới trang gi ới thi ệu chính c ủa mình. 2. Chèn 2 ảnh vào trong trang gi ới thi ệu chính sao cho khi click vào ảnh đó thì trang gi ới thi ệu chi ti ết được m ở ra. Yêu c ầu: ảnh th ứ nh ất s ử d ụng đường dẫn tuy ệt đố i, ảnh th ứ hai s ử d ụng đường d ẫn t ươ ng đối t ới trang c ần liên k ết. 3. Tạo m ột trang th ứ ba trong đó có chèn m ột đoạn Video clips ở gi ữa trang. 50
CH ƯƠ NG VI. BÀY TRÍ N ỀN VÀ KHUNG VI.1. Màu n ền và v ăn b ản VI.1.1. Đặt màu n ền Để văn b ản tr ở nên đẹp và h ấp d ẫn, đôi khi đặt n ền cho trang siêu v ăn b ản. Thu ộc tính BGCOLOR (Background Color) . Dùng thu ộc tính này kèm th ẻ để đặt màu n ền cho v ăn b ản. Cú pháp nh ư sau: Nội dung c ủa tài li ệu trong đó "#rrggbb" là red-green-blue , b ộ ba s ố hai ch ữ s ố h ệ đế m 16, xác đị nh mã màu. VI.1.2. Màu ch ữ của v ăn b ản Thu ộc tính TEXT . Thu ộc tính này để thi ết l ập màu cho các con ch ữ trong văn b ản, tr ừ các đầ u m ối liên k ết ph ải có màu khác đi. Nội dung c ủa tài li ệu VI.1.3. Màu c ủa đầu m ối liên k ết - Thu ộc tính LINK, VLINK và ALINK Ba thu ộc tính trên để đặ t màu c ủa các đầ u m ối siêu liên k ết. • LINK - đặ t màu hi ển th ị tr ướ c khi nh ấn chu ột vào để đế n th ăm đích liên k ết. • VLINK - Đặ t màu sau khi đích liên k ết đã đượ c đế n th ăm (visited ). • ALINK - đặ t màu khi b ạn kích ho ạt, đang nh ấn chu ột vào (active ). Các màu m ặc đị nh là: LINK=blue, VLINK=purple and ALINK=red Nội dung c ủa tài li ệu Kết h ợp cùng v ới nhau 51
Color Control Example Đây là m ột tài li ệu làm ví d ụ về thi ết đặt màu. Các ch ữ màu xám sáng trên n ền đen, và đầu tiên có màu vàng, chuy ển màu xanh lá cây sáng khi được kích ho ạt và có màu xanh nh ạt khi điểm đích đã được th ăm Lưu ý: Tổ h ợp màu nh ư trên ch ỉ đượ c thi ết đặ t m ột l ần cho toàn v ăn b ản. Hãy th ận tr ọng khi l ựu ch ọn để đả m b ảo d ễ đọ c, d ễ nhìn. VI.1.4. Thu ộc tính và mã màu Thu ộc tính Mô t ả BGCOLOR Đặ t màu n ền TEXT Đặ t màu các con ch ữ, tr ừ các m ối n ối. LINK Đặ t màu ban đầ u c ủa đầ u m ối liên k ết khi ch ưa kích ho ạt VLINK Đặ t màu đầ u m ối liên k ết khi đã th ăm đích ALINK Đặ t màu đầ u m ối liên k ết khi kích ho ạt Một vài mã màu hay dùng: Màu Mã black #000000 white #FFFFFF pale grey #DBDDE5 dark green #306020 green #405060 pale blue/green #00FFFF pale blue #A5D6F7 navy blue #000020 52
burgundy #800040 yellow #FFFF00 purple #601050 red #FF0000 orange red #FF2400 orange #FF7F00 neon blue #4D4DFF pale purple/orchid #9370DB maroon #8E236B scarlet #8C1717 pale purple #6B238E firebirch #8E2323 Tuy nhiên hi ện nay nhi ều trình duy ệt ch ấp nh ận dùng tên màu ti ếng Anh thay cho các chữ số r ất khó nh ớ ở trên. VI.2. N ạp hình ảnh làm n ền cho trang v ăn b ản VI.2.1. Thu ộc tính BACKGROUND Có th ể dùng thu ộc tính này để tạo m ột ảnh n ền cho trang tài li ệu siêu v ăn bản. Thay cho xác đị nh màu ta c ần ch ỉ ra tên t ệp hình ảnh kèm đườ ng d ẫn. Nội dung tài li ệu Ví d ụ: Khi dùng ảnh làm n ền cho trang Web c ần ph ải n ạp m ột t ệp hình ảnh. Nh ư ta đã bi ết t ệp ảnh th ườ ng có kích th ướ c l ớn, làm ch ậm vi ệc hi ển th ị trang tài li ệu. Do đó c ần ch ọn t ệp ảnh có kích th ướ c nh ỏ làm ảnh n ền. Toàn b ộ trang v ăn bản s ẽ đượ c "lát n ền" b ằng hình ảnh này nh ư ta lát n ền nhà b ằng g ạch hoa. VI.2.2. Water mark Nhi ều trang web có n ền trang trí g ắn ch ặt c ố đị nh, còn ph ần v ăn b ản s ẽ cu ộn trôi bên trên m ỗi khi ta di chuy ển thanh tr ượ t. Hi ệu ứng này đượ c t ạo ra nh ờ thi ết lập thêm thu ộc tính cho ảnh n ền là 53
bgproperties="fixed" Ví d ụ: VI.2.3. Hãy ký tên vào tài li ệu c ủa mình Một thông l ệ nên tuân theo là "kí tên" vào tài li ệu. Nó giúp cho ng ườ i đọ c bi ết đượ c nh ững thông tin t ối thi ểu v ề tác gi ả so ạn ra tài li ệu, th ời gian c ập nh ật Vi ệc đư a thêm đị a ch ỉ c ủa tài li ệu Web vào cu ối trang s ẽ giúp cho ng ườ i đọ c l ưu l ại đượ c xu ất x ứ c ủa trang tài li ệu. Đó là ch ưa nói đế n ý ngh ĩa quan tr ọng c ủa ph ần ch ữ kí này trong các tài li ệu chính th ức ho ặc có tính th ươ ng m ại. Ph ần ch ữ kí th ườ ng g ồm các thông tin sau: • Ngày kh ởi t ạo l ần đầ u. • Ngày s ửa ch ữa c ập nh ật g ần nh ất. • Tên (và e-mail) của tác gi ả • Tuyên b ố v ề b ản quy ền (n ếu c ần ) • URL Đoạn mã HTML c ủa ph ần ch ữ kí đạ i lo ại có th ể nh ư sau: Ngày vi ết: 20 September 1998 Ngày c ập nh ật: 20 October 2001 Tác giả: email: webmaster@vitti.vnu.edu.vn"> Copyright © Vi ện Đào t ạo công ngh ệ thông tin - VITTI, ĐHQG Hà n ội, 1998. URL: 54
Th ẻ là m ối liên k ết đế n d ịch v ụ th ư điện t ử, khi tr ỏ chu ột vào đây s ẽ kích hoạt dịch v ụ e-mail để g ửi đến đị a ch ỉ nêu sau l ệnh mailto . Hãy t ập thói quen thêm ch ữ kí vào tài li ệu c ủa mình! VI.3. Khung – Frames HTML có các th ẻ trình bày cho phép chia vùng hi ển th ị c ủa c ửa s ổ trình duy ệt thành nhi ều khung, m ỗi khung là m ột c ửa s ổ độ c lập, hi ển th ị m ột tài li ệu HTML khác nhau. Khung cho phép ng ườ i thiết k ế hi ển th ị đồ ng b ộ nhi ều tài li ệu HTML khác nhau để ti ện theo dõi, so sánh. Ví d ụ, trong khung bên trái hi ển th ị các nút b ấm, còn khung bên ph ải hi ển th ị tài li ệu t ươ ng ứng. VI.3.1. Trang trí khung Trang HTML th ực hi ện bày trí các khung (g ọi là frameset document ) có c ấu trúc khác trang thông th ườ ng, không có khung. Trang th ườ ng có 2 ph ần, HEAD và BODY . Trang bày trí khung có HEAD và FRAMESET thay cho BODY . Thành ph ần FRAMESET tổ ch ức các khung trong c ửa s ổ trình duy ệt. Nó c ũng có th ể ch ứa th ẻ NOFRAMES để x ử lí tr ườ ng h ợp trình duy ệt không h ỗ tr ợ frame. Các thành ph ần thông th ườ ng khác v ốn n ằm trong BODY không đượ c xu ất hi ện tr ướ c th ẻ m ở FRAMESET . N ếu không, thành ph ần FRAMESET sẽ b ị b ỏ qua. Ví d ụ: Dướ i đây là m ột ví dụ đơ n gi ản. A simple frameset document 55
This frameset document contains: Đoạn mã trên s ẽ t ạo 3 khung, đượ c bài trí nh ư d ướ i đây. Hình VI.1. Kết qu ả ch ạy đoạn code ví d ụ Khi trình duy ệt khách không h ỗ tr ợ khung thì các khung s ẽ không đượ c hi ển th ị mà thành ph ần NOFRAMES sẽ đượ c x ử lí. VI.3.2. Thành ph ần FRAMESET Th ẻ FRAMESET dùng để phân chia vùng hi ển th ị trong c ửa s ổ trình duy ệt thành các khung hình ch ữ nh ật. Mỗi khung hình ch ữ nh ật g ọi là m ột frame, đượ c đị nh ngh ĩa b ằng th ẻ FRAME . a. Các thu ộc tính và ví d ụ minh h ọa rows = Danh sách các độ cao c ủa các khung 56
Danh sách g ồm nhi ều ph ần t ử, cách nhau d ấu ph ẩy. M ỗi ph ần t ử xác đị nh độ cao (s ố dòng !) c ủa m ột khung. Chia chi ều đứ ng thành bao nhiêu khung thì danh sách có b ấy nhiêu ph ần t ử. Chi ều cao th ể hi ện b ằng - số pixel, - tỷ l ệ ph ần tr ăm chi ều cao màn hình - hay t ỷ l ệ ph ần chi ều cao còn l ại. Giá tr ị mặc đị nh là 100%, t ức ch ỉ có m ột khung theo chi ều ngang. cols = Danh sách các độ r ộng c ủa các khung. ý ngh ĩa t ươ ng t ự nh ư trên. Giá tr ị m ặc đị nh là 100%, t ức ch ỉ có m ột khung theo chi ều d ọc. Thu ộc tính row thi ết l ập vi ệc chia khung theo chi ều ngang trong m ột frameset. N ếu không đị nh ngh ĩa, thì các c ột trong khung s ẽ chi ếm toàn b ộ chi ều cao vùng hi ển th ị. Thu ộc tính cols thi ết l ập vi ệc chia khung theo chi ều đứ ng trong m ột frameset. N ếu không đị nh ngh ĩa, thì các dòng trong khung s ẽ chi ếm toàn b ộ chi ều rộng vùng hi ển th ị. Ph ối h ợp hai thu ộc tính s ẽ t ạo ra ô l ướ i các khung. Các ví d ụ. 1- Chia màn hình thành hai n ửa: n ửa trên và n ửa d ướ i: the rest of the definition 2- Chia màn hình thành 3 cột. C ột gi ữa r ộng 250 pixels. C ột đầ u chi ếm 25% c ủa ph ần còn l ại và c ột th ứ 3 chi ếm 75% c ủa ph ần độ r ộng còn l ại. the rest of the definition 3- Tạo l ướ i g ồm 2 x 3 = 6 khung. the rest of the definition 57
4- Chia chi ều đứ ng màn hình thành 4 khung. Khung th ứ nh ất chi ếm 30% c ủa chi ều cao vùng hi ển th ị. Khung th ứ hai có chi ều cao c ố đị nh 400 pixel. Dấu sao có ngh ĩa là hai khung th ứ 3, th ứ 4 chia nhau ph ần còn l ại. Khung th ứ 4 có chi ều cao là "2*", gấp đôi khung th ứ 3 (vì "*" t ươ ng đươ ng v ới 1*). Nếu chi ều cao vùng hi ển th ị là 1000 pixel thì độ cao c ủa các khung 1,2,3,4 lần l ượ t là: 300, 400, 100, 200 pixel !. the rest of the definition b. Chia khung l ồng nhau và thành ph ần FRAME Vi ệc chia khung có th ể l ồng nhau nhi ều m ức. Ví d ụ: chia chi ều r ộng thành 3 khung đứ ng, sau đó khung ở gi ữa l ại đượ c chia thành 2 ph ần trên và d ướ i. contents of first frame contents of second frame, first row contents of second frame, second row contents of third frame Th ẻ FRAME đị nh ngh ĩa m ột khung hình c ụ th ể (trong nhi ều khung hình c ủa frameset). Các thu ộc tính: name = Tên c ủa khung. Có th ể dùng tên này để làm đích c ủa m ối siêu liên k ết. src = URI Tr ỏ đế n trang tài li ệu sẽ hi ển th ị trong khung. 58
noresize Không cho phép co giãn l ại kích th ướ c scrolling = auto|yes|no Thi ết l ập thanh cu ộn. • auto: Xu ất hi ện thanh cu ộn khi c ần thi ết. Đây là giá tr ị m ặc đị nh. • yes: Luôn có thanh cu ộn. • no: Luôn không có thanh cu ộn. frameborder = 1|0 Thi ết l ập đườ ng biên. • 1: Có đườ ng biên gi ữa khung đang xét v ới các khung k ề nó. Đây là giá tr ị mặc đị nh. • 0: Không có đườ ng biên gi ữa khung đang xét v ới các khung k ề nó. marginwidth = s ố pixel Thi ết l ập độ r ộng l ề chi ều r ộng = kho ảng tr ống gi ữa ph ần hi ển th ị n ội dung và biên trái, biên ph ải. Giá tr ị m ặc đị nh tu ỳ theo bộ duy ệt. marginheight = s ố pixel Thi ết l ập độ r ộng l ề chi ều cao = kho ảng tr ống gi ữa ph ần hi ển th ị n ội dung và biên trên, biên d ướ i. Giá tr ị m ặc đị nh tu ỳ theo trình duy ệt. Lưu ý: Nội dung trong m ột frame không đượ c thu ộc v ề chính trang tài li ệu đị nh ngh ĩa frameset. VI.4. Thi ết l ập Target, th ẻ NOFRAME và IFRAME VI.4.1. Thi ết l ập Target Thu ộc tính target là để xác đị nh t ệp tài li ệu HTML s ẽ hi ển th ị trong khung. target = tên khung đích. Thi ết l ập tên c ủa khung mà tài li ệu s ẽ m ở ra trong khung đó. Thu ộc tính này dùng v ới các thành ph ần t ạo m ối liên k ết: (A, LINK) , image map ( AREA ), và FORM . 59
VI.4.2. Th ẻ NOFRAMES Thành ph ần NOFRAMES thi ết l ập n ội dung c ần hi ển th ị khi trình khách không h ỗ tr ợ frame ho ặc đã t ắt ch ức n ăng hi ển th ị frame. Thành ph ần NOFRAMES đặ t ở ph ần cu ối c ủa thành ph ần FRAMESET . Ví d ụ: A frameset document with NOFRAMES Here is the VI.4.2. Nhúng frame - th ẻ IFRAME Thành ph ần IFRAME cho phép ng ườ i thi ết k ế chèn m ột frame vào gi ữa m ột kh ối v ăn bản text và hi ển th ị m ột tài li ệu HTML khác bên trong. Thu ộc tính SRC thi ết l ập tài li ệu ngu ồn để hi ển th ị trong frame. Các thu ộc tính: name = tên. để tham chi ếu trong tài li ệu width = Độ r ộng c ủa inline frame. height = Độ cao c ủa inline frame. Ví d ụ: [Your user agent does not support frames or is currently configured not to display frames. However, you may visit ] 60
Inline frames m ặc đị nh là không co giãn đượ c, không c ần ph ải nêu rõ noresize. Bài t ập 1. Sửa trang gi ới thi ệu tóm t ắt v ề mình sao cho nền c ủa trang đó là m ột ảnh b ất kỳ, trang gi ới thi ệu chi ti ết có n ền màu xanh n ước bi ển nh ạt. 2. Dùng th ẻ IFRAME để nhúng trang th ứ 3 vào trong trang gi ới thi ệu tóm t ắt (trang ch ủ). 61
CH ƯƠ NG VII. BI ỂU M ẪU STYLE VÀ CASCADING STYLE SHEET VII.1. FORM VII.1.1. FORM là gì? a. Ch ức n ăng c ủa FORM Để m ở r ộng kh ả n ăng ph ục v ụ ng ườ i s ử d ụng, d ịch v ụ Web c ần ph ải s ử d ụng các ứng d ụng khác bên ngoài. Ví d ụ NSD yêu c ầu tìm ki ếm trong c ơ sở dữ li ệu, l ấy các thông tin t ức th ời, luôn đượ c c ập nh ật Để làm đượ c điều này d ịch v ụ Web ph ải chuy ển yêu c ầu c ủa NSD đế n m ột ứng d ụng khác. Ứng d ụng này s ẽ th ực hi ện yêu c ầu và tr ả l ại k ết qu ả cho Web server để chuy ển ti ếp đế n NSD. Form là m ột cách để chuy ển d ữ li ệu t ừ NSD đế n cho Web Server x ử lý. Forms đượ c s ử d ụng r ộng rãi trên WWW. Các forms r ất ti ện l ợi cho ng ườ i dùng điền các yêu c ầu tìm ki ếm, các bi ểu m ẫu điều tra, nh ập d ữ li ệu đầ u vào cho các ứng dụng Có nhi ều thành ph ần khác nhau (gọi là các điều khi ển control ) trong m ột form. Tu ỳ theo yêu c ầu giao ti ếp v ới NSD c ần ch ọn thành ph ần thích h ợp nh ất. Khi t ạo form b ạn c ũng c ần ph ải ch ỉ rõ cho máy ch ủ d ịch v ụ bi ết cách x ử lý form. Có nhi ều lo ại ch ươ ng trình ứng d ụng khác nhau trong máy ch ủ d ịch v ụ để làm vi ệc này: các ch ươ ng trình CGI, ISAPI, các script ASP, JSP, Java Bean, Servlet Tạo form là khâu đầ u tiên trong vi ệc xây d ựng giao ti ếp gi ữa NSD v ới các ứng d ụng Internet / Intranet. b. Thành ph ần c ủa FORM Cặp th ẻ để t ạo Form là . Mọi thành ph ần c ủa form nh ư s ẽ trình bày d ướ i đây đề u ph ải n ằm trong ph ạm vi gi ới h ạn b ởi c ặp th ẻ này. Công th ức khung để t ạo form là: Toàn bô ̣ ca ́c tha ̀nh phâ ̀n kha ́c bên trong form n ằm ở đây 62
Thu ộc tính METHOD ch ỉ ra ph ươ ng th ức trao đổ i d ữ li ệu gi ữa trình duy ệt Web và máy ch ủ Web. Có 2 ph ươ ng th ức là POST, GET . Đố i v ới form ph ươ ng th ức th ườ ng là POST . Thu ộc tính ACTION để thi ết l ập đị a ch ỉ URL c ủa ch ươ ng trình sẽ nh ận và x ử lý dữ li ệu g ửi t ừ form. VII.1.2.Các thành ph ần trong FORM Nh ư đã nêu trên, có nhi ều lo ại thành ph ần khác nhau trong m ột Form. Dướ i đây s ẽ trình bày l ần l ượ t nh ững điểm c ơ b ản nh ất. a. H ộp v ăn b ản – TextBox Hộp v ăn b ản là n ơi để gõ vào m ột d ữ li ệu ki ểu xâu kí t ự. H ộp v ăn b ản s ẽ đượ c hi ển th ị nh ư sau: Bottom of Form 1 Th ẻ để t ạo ra nó là: Trong đó TEXT là t ừ khoá ứng v ới ki ểu là Text box, Tên là tên c ủa h ộp v ăn bản này còn n là m ột s ố nguyên ch ỉ ra chi ều dài c ủa tr ườ ng. Tên ph ải duy nh ất trong trang, không đượ c trùng nhau. b. H ộp m ật kh ẩu – Password Hộp m ật kh ẩu là n ơi để gõ vào m ột m ật kh ẩu ki ểu xâu kí t ự. H ộp m ật kh ẩu đượ c hi ển th ị nh ư sau: Th ẻ để t ạo ra nó là: Trong đó PASSWORD là t ừ khoá để t ạo h ộp mật kh ẩu, n là s ố nguyên ch ỉ ra chi ều dài c ủa h ộp. Hộp m ật kh ẩu khác h ộp v ăn b ản ở ch ỗ khi gõ các kí t ự t ừ bàn phím thì nó không hi ển th ị kí t ự t ươ ng ứng trong khung mà thay b ằng các d ấu sao *. 63
Lưu ý: Vi ệc hi ển th ị kí t ự d ấu * để thay th ế ch ỉ có tác d ụng che gi ấu v ới ng ườ i nhìn t ại máy c ục b ộ. Password v ẫn đượ c g ửi vào m ạng d ướ i d ạng rõ, không mã hoá, có th ể b ị xem tr ộm. Nhi ệm v ụ mã là c ủa giao th ức m ạng. c. Vùng v ăn b ản – Text Windows Vùng v ăn b ản, để hi ển th ị nhi ều dòng v ăn b ản. Vùng v ăn b ản có d ạng nh ư sau: Công th ức vi ết là: Van ban hien thi trong đó, Tên vùng là tên c ủa vùng v ăn b ản, m và n là các s ố nguyên, ch ỉ ra chi ều cao và chi ều r ộng c ủa vùng v ăn b ản. N ếu b ạn để tr ống ph ần " đoạn v ăn b ản s ẽ hi ển th ị " thì s ẽ không có v ăn b ản nào xu ất hi ện trong c ửa s ổ. Ví d ụ: B ạn c ần ph ải th ường xuyên c ập nh ật các m ẫu virus m ới nh ất d. Các l ựa ch ọn – Radio Button Các nút ch ọn radio là m ột nhóm nút tròn, ch ỉ cho phép b ạn đượ c ch ọn m ột trong nhi ều nút. Nút radio có d ạng nh ư sau: Công th ức vi ết: Nhãn nút Trong đó RADIO là t ừ khoá ứng v ới ki ểu nút ch ọn Radio, nhãn nút i là xâu kí t ự sẽ xu ất hi ện c ạnh nút. Ví d ụ: 64
Đoạn mã để t ạo nút radio đầ u tiên - Mastercard - là: Master Card Trong ví d ụ trên, thu ộc tính NAME đượ c gán tr ị PAYMENT là tên nhóm nút Radio, g ồm 3 nút cho phép l ựa ch ọn m ột trong 3 cách thanh toán, thu ộc tính VALUE để nh ận k ết q ủa câu tr ả l ời ứng v ới l ựa ch ọn "Mastercard". L ưu ý phân bi ệt gi ữa Mastercard là giá tr ị c ủa l ựa ch ọn v ới Mastercard là nhãn nút, t ức c ụm ch ữ hi ện cạnh nút radio. Ta có th ể thay nhãn nút b ằng m ột xâu b ất kì, ví d ụ "Th ẻ tín d ụng MasterCard". Dĩ nhiên c ứ m ột nút radio l ại t ươ ng ứng v ới m ột dòng mã HTML nh ư trên. Lưu ý r ằng thu ộc tính NAME ph ải nh ư nhau cho toàn b ộ các nút radio c ủa cùng một nhóm. Trong ví d ụ trên thì t ất c ả các nút đề u ph ải cùng có NAME =[PAYMENT]. Trong m ột nhóm nút radio, m ột nút có th ể có thu ộc tính CHECKED , ngh ĩa là nó đượ c đánh d ấu ch ọn s ẵn khi m ở trang Web. e. Ô đánh d ấu – CheckBoxes Ô đánh d ấu, để đánh d ấu m ột ho ặc vài l ựa ch ọn. Ô dánh dấu có d ạng nh ư sau: Công th ức vi ết: Nhan o i Ví d ụ: 65
Khác v ới nút radio b ạn có th ể đánh d ấu ch ọn nhi ều ô đồ ng th ời trong cùng một nhóm ô đánh d ấu. Ví d ụ công th ức để t ạo ra checkbox đầ u tiên ở trên là: Overnight ý ngh ĩa c ủa các thu ộc tính cũng t ươ ng t ự nh ư c ủa nút radio. Trong m ột nhóm ô đánh d ấu, m ột s ố ô có th ể có thu ộc tính CHECKED và đượ c đánh d ấu ch ọn s ẵn khi m ở trang Web. f. Danh sách l ựa ch ọn – thành ph ần SELECT Công th ức để t ạo menu là: Menu item 1 Menu item 2 Menu item 3 Menu item 4 Menu item 5 Menu item 6 Menu item 7 Menu item 8 trong đó thu ộc tính SIZE xác đị nh s ố m ục ch ọn có th ể nhìn th ấy trong c ửa s ổ cu ộn. OPTION SELECTED xác đị nh l ựa ch ọn m ặc đị nh ban đầ u. Có th ể t ạo menu buông xu ống có d ạng nh ư sau n ếu ta đặt thu ộc tính SIZE=1 : Để t ạo b ảng ch ọn ki ểu này ch ỉ c ần b ỏ thu ộc tính SIZE trong đoạn mã trên. Mặc đị nh, danh sách ch ọn SELECT ch ỉ cho phép ch ọn m ột m ục ch ọn. Thu ộc tính MULTIPLE cho phép đánh d ấu ch ọn nhi ều m ục. g. H ộp ch ọn t ệp 66
Cho phép hi ển th ị h ộp ch ọn t ệp ho ặc nh ập tên t ệp tr ực ti ếp. Ví d ụ. Khi nh ấn chu ột vào nút Browse thì h ộp tho ại Choose File s ẽ m ở và cho phép ch ọn t ệp. Cách vi ết: Khi nh ập tên t ệp vào tr ườ ng text hay ch ọn t ệp (b ằng nút Browse) thì tên t ệp sẽ đượ c gán cho thu ộc tính VALUE của thành ph ần này. h. Nút Send và Clear Khi ng ườ i s ử d ụng đã điền xong thì ph ải ho ặc g ửi k ết qu ả đi, ho ặc xoá s ạch và điền l ại t ừ đầ u: Send - gửi k ết qu ả đi. Clear - xoá s ạch và làm l ại t ừ đầ u. Hai nút để làm vi ệc này có d ạng: Mã để t ạo ra hai nút này là: trong đó hai xâu kí t ự trong ngo ặc kép Send form, Clear form gán cho thu ộc tính VALUE sẽ hi ển th ị trên nút t ươ ng ứng. D ĩ nhiên ta có thay b ằng xâu nào khác tu ỳ ý, chẳng h ạn “g ửi đi”, “ điền l ại”. i. Nút nh ấn – Push Button Ngoài hai nút ki ểu "Submit" và "Reset" luôn g ắn v ới form và có ch ức n ăng quy đị nh tr ướ c nh ư trên, có th ể t ạo nút nh ấn để g ắn v ới nh ững hành độ ng x ử lí khác do ta t ự thi ết k ế. Mã ngu ồn để t ạo nút nh ấn t ổng quát ki ểu này là. Nhãn nút 67
Tên nút để tham chi ếu, còn nhãn nút là nhãn s ẽ hi ển th ị trên nút. N ếu mu ốn trang trí m ột bi ểu t ượ ng hay hình ảnh trên nút ch ỉ c ần thay th ế ph ần nhãn nút bằng hình ảnh. Lưu ý: ph ải cung c ấp dòng ch ữ thay th ế cho thành ph ần IMG . Không đượ c gắn m ột image map với thành ph ần IMG ch ứa trong m ột th ẻ BUTTON . Để g ắn các hàm ch ức n ăng x ử lí v ới m ột nút nh ấn, ta dùng các thu ộc tính v ề sự ki ện n ội t ại c ủa nút nh ư onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout Ph ần trình bày v ề Scripting sẽ nêu rõ v ấn đề này. j. Nút nh ấn b ằng hình ảnh Có th ể t ạo nút nh ấn tr ực ti ếp b ằng m ột hình ảnh. Khi nh ấn nút, form đượ c g ửi đi cùng v ới các to ạ độ x,y tính b ằng pixel, k ể từ góc trên - trái c ủa hình ảnh. Các s ố li ệu này đượ c g ửi đi d ướ i d ạng. name .x= x-value name .y= y-value ở đây name là giá tr ị c ủa thu ộc tính name của nút; x-value, y-value là các toạ độ . Nếu vi ệc x ử lí khác nhau ph ụ thu ộc to ạ độ c ủa điểm nh ấn chu ột mà trình khách không h ỗ tr ợ hình ảnh thì ph ải dùng gi ải pháp khác: dùng nhi ều button ho ặc image map và script. k. Các tr ường ẩn Các tr ườ ng ẩn không hi ển th ị trên form nh ưng đượ c dùng để g ửi thông tin cho Server. Ví d ụ: Đoạn mã trên để t ạo m ột liên k ết trên trang cho phép NSD nh ấn nút để t ới một trang Web t ại đị a ch ỉ URL nh ất đị nh nào đó ch ứ không ph ải dùng phím BACK. 68
Một ví d ụ n ữa là để điền t ự độ ng m ục Subject trong email có th ể dùng m ột tr ườ ng ẩn nh ư sau: Đoạn mã này điền xâu kí t ự đã gán cho thu ộc tính VALUE vào dòng ch ủ đề - subject trong email. l. Nhãn Th ẻ label Các nút đã có nhãn ng ầm đị nh, gán b ằng thu ộc tính value Các thành ph ần còn l ại nh ư text fields, checkboxes, radio buttons, menus không có nhãn ng ầm đị nh. Có th ể hi ển th ị m ột xâu kí t ự k ề bên thích h ợp để làm "nhãn" nh ư ta v ẫn làm ở trên. Tuy nhiên, đặ c t ả HTML có thành ph ần LABEL để gán nhãn cho các thành ph ần điều khi ển khác. Cặp th ẻ dùng để định ngh ĩa thành ph ần LABEL. Thu ộc tính FOR của th ẻ label Thu ộc tính này nh ằm gán nhãn cho thành ph ần điều khi ển tr ỏ b ởi Id. Id là tên đị nh danh c ủa thành ph ần điều khi ển. Nếu không có thu ộc tính for thì ng ầm đị nh là gán cho thành ph ần điều khi ển ch ứa trong c ặp th ẻ LABEL đang xét. Có th ể nhi ều h ơn m ột LABEL cho cùng m ột thành ph ần điều khi ển Ví d ụ: First Name Last Name 69
Gắn nhãn không dùng thu ộc tính FOR Để g ắn nhãn cho m ột thành ph ần điều khi ển mà không dùng thu ộc tính FOR , thành ph ần điều khi ẻn ph ải n ằm bên trong thành ph ần LABEL . Lúc này, m ột thành ph ần LABEL ch ỉ ch ứa m ột thành ph ần điều khi ển. Các ch ữ làm nhãn có th ể đặ t tr ướ c hay sau thành ph ần điều khi ển. Ví d ụ: gán nhãn cho 2 thành ph ần text field. First Name Last Name VII.1.3. Thêm tính c ấu trúc cho FORM a. FIELDSET và LEGEND Thành ph ần FIELDSET cho phép nhóm m ột s ố thành ph ần điều khi ển có liên quan v ới nhau. NSD d ễ hi ểu h ơn, còn ng ườ i thi ết k ế trang c ũng d ễ x ử lí di chuy ển focus h ơn. Thành ph ần LEGEND cho phép g ắn m ột dòng chú gi ải cho m ột FIELDSET Các thu ộc tính align = top|bottom|left|right • top: legend đặ t ở phía trên c ủa fieldset. Đây là giá tr ị m ặc đị nh. • bottom: legend đặ t ở phía d ướ i c ủa fieldset. • left: legend đặ t ở phía trái. • right: legend đặ t ở phía ph ải c ủa fieldset. Vi d ụ 70
Personal Information Last Name: First Name: Address: Medical History Smallpox Mumps Dizziness Sneezing Current Medication Are you currently taking any medication? Yes No If you are currently taking medication, please indicate it in the space below: Trình duy ệt s ẽ hi ển th ị nh ư sau: 71
Hình VII.1. Kết qu ả ví d ụ VII.2. Cascading style sheet Style Sheets là m ột đặ c tính quan tr ọng mà có th ể được dùng trong HTML động (Dynamic HTML). M ặc dù trang Web không th ật s ự c ần ph ải có m ột style sheet, nh ưng vi ệc dùng nó có nhi ều l ợi ích. Trong ph ần này, ta sẽ làm quen về công ngh ệ style sheet dùng để nâng cao vi ệc thi ết k ết và phát tri ển trang Web. VII.2.1. Inline Style Một đặ c tính quan tr ọng c ủa Dynamic HTML là các style động. Ta có th ể thay đổi style c ủa nhi ều ph ần t ử HTML trên trang sau khi nó được hi ển th ị trong trang. S ự thay đổ i có th ể th ể hi ện b ằng cách đáp l ại t ươ ng tác c ủa ng ười dùng ho ặc sự ki ện thay đổ i tr ạng thái (nh ư s ự ki ện thay đổi kích th ước). Có hai cách thay đổi style c ủa trang: Thay đổi style bên trong Vi ết các scripts để thay đổ i style Sử d ụng các inline style ta có th ể vi ết các style độ ng mà không ph ải vi ết thêm script vào trang. Một “inline style” là m ột style mà được gán vào m ột ph ần t ử đặ c bi ệt. Style không h ỗ tr ợ cho t ất c ả các ph ần t ử c ủa m ột ki ểu ho ặc m ột l ớp nào đó. M ột inline style được đị nh ngh ĩa dùng thu ộc tính STYLE cho tag c ủa các ph ần t ử. Ví d ụ, n ếu ta 72
mu ốn gán màu c ủa (Heading 1) thành màu đỏ, ta có th ể gán thu ộc tính STYLE của th ẻ H1 . Nếu ta mu ốn dùng script để s ửa m ột inline style b ất k ỳ lúc nào, khi đó ta ph ải dùng đối t ượng style (Style Object). Style Object h ỗ tr ợ m ọi thu ộc tính mà CSS h ỗ tr ợ cho các style. Để dùng thu ộc tính trong scrip: Lo ại b ỏ g ạch n ối t ừ tên thu ộc tính style CSS Thay đổi ch ữ đầ u tiên c ủa t ừ sau g ạch n ối thành ch ữ vi ết hoa Ví d ụ, thu ộc tính CSS font-weight thành fontWeight trong DHTML. Ho ặc text-align thành textAlign. Ta hãy xem m ột ví d ụ để xóa m ọi th ứ. Ta s ẽ dùng inline style để gán các thu ộc tính c ủa nhân t ố . Xem đoạn code d ưới đây trong Internet Explorer: Setting Properties This paragraph has an inline style applied to it This paragraph is displayed in the default style. Can you see the difference in this line 73
Hình VII.2. Sử dung Inline Style VII.2.2. Gi ới thi ệu Style Sheet Style sheet là n ơi mà ta qu ản lý và điều khi ển các style. Style sheet mô t ả di ện m ạo và vi ệc bi ểu di ễn c ủa m ột tài li ệu HTML nh ư nó s ẽ được đưa ra trên màn hình, ho ặc in ra ngoài. Trong th ực t ế, ta có th ể ngh ĩ v ề nó nh ư một khuôn m ẫu để căn c ứ vào các tài li ệu HTML của ta. Đặ c bi ệt ta cũng có th ể đị nh rõ v ị trí và s ự xu ất hi ện c ủa các ph ần t ử trên m ột trang và t ạo các hi ệu ứng đặ c bi ệt. Ví d ụ ta có th ể t ạo m ột style sheet đị nh ngh ĩa cho th ẻ là ch ữ béo và nghiêng và màu xanh. Ho ặc th ẻ ph ần t ử được đưa ra v ới màu đỏ v ới font Arial. Ta có th ể đị nh ngh ĩa thông tin style mà ta mu ốn trong m ột v ị trí – style sheet. Khi đó style sheet có th ể được liên k ết để t ất c ả các trang trong m ột Web site để t ạo một di ện m ạo thích h ợp, đồ ng nh ất qua site bên trong. Ta có th ể đị nh ngh ĩa nhi ều style sheet và liên k ết chúng thành m ột t ập nh ư nhau c ủa các trang Web để m ềm dẻo h ơn nhi ều trong khi t ạo các trang Web. Một trang Web có th ể không có style sheet, nếu không có style sheet được xác định, khi đó trình duy ệt s ẽ sử d ụng cách hi ển th ị theo quy ước ng ầm đị nh của nó. Ví d ụ, m ột th ẻ luôn được hi ển th ị cùng m ột định dạng, các đoạn và các l ề cũng nh ư v ậy. Dù sao vi ệc dùng style sheet ta có th ể xác đị nh cách mà th ẻ được hi ển th ị trong trình duy ệt. Về m ặt lý thuy ết, ta có th ể dùng b ất k ỳ công ngh ệ style sheet nào v ới HTML. Dù sao th ực t ế thì ch ỉ công ngh ệ Cascading Style Sheet (CSS) được các trình duy ệt 74
hỗ tr ợ t ốt. CSS là m ột chu ẩn được phát tri ển b ởi World Wide Web Consortium (th ường g ọi là “W3C”) dùng trong các trình duy ệt Web. VII.2.3. Javascript Style Sheet Netscape h ỗ tr ợ các cascading style sheet. Nó c ũng h ợ tr ợ style sheet mà được vi ết trông gi ống JavaScript và dùng mô hình đối t ượng tài li ệu – Document Object Model (DOM). Khi ra định ngh ĩa m ột style sheet ta có th ể khai báo ki ểu nh ư: “text/CSS” - - Trong tr ường h ợp này nó tìm cú pháp CSS. “text/JavaScript” – Trong tr ường h ợp này nó tìm cú pháp JavaScript style sheet. Khi dùng cú pháp JavaScript trong ph ần t ử , ta ph ải xác đị nh thu ộc tính các th ẻ c ủa đố i t ượng tài li ệu. Trong mô hình đối t ượng tài li ệu, các ph ần t ử HTML được đố i x ử nh ư các đối t ượng. M ột đố i t ượng có các thu ộc tính và có th ể được truy nh ập để đị nh ngh ĩa di ện m ạo và style c ủa ph ần t ử. M ột thu ộc tính tr ả v ề có th ể ho ạt độ ng nh ư m ột đố i tượng v ới m ột t ập các thu ộc tính. Ví d ụ, m ột trang Web được đố i x ử nh ư m ột đố i tượng tài li ệu. Đố i t ượng tài li ệu có m ột thu ộc tính các th ẻ. Thu ộc tính các th ẻ có một đố i t ượng H2. Đố i t ượng H2 có m ột thu ộc tính g ọi là color mà có th ể được truy nh ập và thay đổi khi được yêu c ầu. Document.tags.H2.color = “limegreen” Ví d ụ: tags.P.fontSize = “25pt”; tags.P.marginLeft = “15pt”; tags.H2.color = “hotpink”; This is an H2 element with a style applied This is a paragraph element 75
Tất c ả các ph ần t ử khác đề u th ừa k ế t ừ ph ần t ử . N ếu ta mu ốn cung cấp m ột style m ặc đị nh cho t ất c ả các ph ần t ử trong m ột tài li ệu, ta có th ể đặ t style yêu c ầu trong ph ần t ử . Đoạn mã sau ch ạy trên trình duy ệt netscape: Ví d ụ: tags.body.color=”red”; This is an H2 element This is a paragraph element Hình VII.3. Hỗ tr ợ m ột style bình th ường Ví d ụ: BODY {color:limegreen} 76
This is an H2 element This is a paragraph element Nếu ta ph ải đặ t nhi ều thu ộc tính cho m ột ph ần t ử, ta có th ể dùng cú pháp để rút ng ắn l ại mã: with (tags.P) { color=”hotpink”; fontStyle=”italic”; fontFamily=”helvetica”; fontSize=”20pt”; } This is a paragraph element VII.2.4. Thu ật ng ữ Style Sheet Một cascading style sheet đị nh ngh ĩa các style mà có th ể được cung c ấp cho các trang ho ặc các ph ần t ử trang. Lu ật style - - Một cascading style sheet là m ột t ập các lu ật. M ột lu ật định ngh ĩa định d ạng của tài li ệu. Ví d ụ, ta có th ể t ạo m ột lu ật style để quy đị nh t ất c ả các xu ất hi ện v ới màu xanh. Style Sheet - - là m ột danh sách các lu ật. Nó có th ể được nhúng vào trong tài li ệu HTML. Trong tr ường h ợp đó nó được g ọi là m ột style sheet nhúng. M ột style sheet c ũng có th ể được t ạo nh ư m ột file bên ngoài và liên k ết v ới tài li ệu HTML. Các lu ật style có th ể được cung c ấp để l ựa ch ọn các ph ần c ủa m ột trang Web. Ví d ụ, ta có th ể quy đị nh m ột đoạn v ăn b ản xu ất hi ện d ạng ch ữ đậm và nghiêng. Vi ệc này được g ọi là khai báo bên trong style (inline style declaration) nh ờ đó các style được cung c ấp để chia các ph ần t ử HTML trên một trang Web. 77
Các lu ật - - Một style sheet có th ể g ồm m ột ho ặc nhi ều lu ật. Ph ần đầ u c ủa lu ật được g ọi là Selector. M ỗi selector có cá thu ộc tính và các giá tr ị k ết h ợp v ới nó. Ví d ụ: A RuleSelector{Declarationsproperty: value; property: value; } Ph ần c ủa lu ật kèm theo bên trong các ngo ặc nh ọn được g ọi là Khai báo (Declaration). M ột khai báo có hai ph ần, ph ần tr ước d ấu hai ch ấm là thu ộc tính (Property) và ph ần sau d ấu hai ch ấm là giá trị (Value) c ủa thu ộc tính đó. Các khai báo phân chia ra b ởi d ấu ch ấm ph ẩy (;). Ta không c ần đặ t m ột d ấu ph ẩy ch ấm sau khai báo cu ối cùng. Ví d ụ: H1 {color:blue} H1 là Selector, color:blue là khai báo. Bên trong khai báo: {Thu ộc tính:Giá tr ị} Color là thu ộc tính, blue là giá tr ị. Ta có th ể đặ t m ỗi lu ật tách r ời bên trong các th ẻ STYLE . Trong tr ường h ợp đó các header c ủa ta sẽ được li ệt kê. Ví d ụ: H1{ color:limegreen } H1{ font-family: Arial } { color: limegreen } H2{ font-family:Arial } This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser 78
Ta cũng có th ể nhóm các lu ật. M ỗi khai báo được phân chia b ởi một d ấu ch ấm ph ẩy. Ví d ụ: H1, H2{ color: limegreen;font-family: Arial;} This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser Hình VII.4. Lu ật nhóm Các Selector Selector có th ể được đị nh ngh ĩa nh ư, “m ột xâu mà quy định các lu ật nào h ỗ tr ợ cho các ph ần t ử nào. Có hai ki ểu c ơ b ản c ủa các selector - Các selector đơ n gi ản (Simple selectors) - HTML Selectors - Class selectors 79
- ID Selectors - Các selector ng ữ cảnh (Contextual selectors) a. Các selector đơ n gi ản (Simple selectors) Sử d ụng d ễ nh ất. Nó mô t ả m ột ph ần t ử không k ể v ị trí c ủa nó trong c ấu trúc tài li ệu. Quy đị nh H1 là m ột selector đơn gi ản. Ví d ụ: H1 {color:blue} HTML Selector Seletor này s ử d ụng các tên c ủa các ph ần t ử HTML. Ch ỉ khác là ta lo ại b ỏ các móc nh ọn. Nh ư v ậy, th ẻ HTML tr ở thành P. Trong ví d ụ d ưới đây, trong khi định ngh ĩa style, ph ần t ử P không có các móc nh ọn. Điều này b ởi vì, ph ần t ử HTML được đố i x ử nh ư m ột selector. Ví d ụ: P{font-style:italic; font-weight:bold;color:limegreen} Ở đây các n ội dung c ủa được xác đị nh. Ph ần t ử được đố i x ử nh ư một ph ần t ử HTML. This selectors use the names of HTML elements. The only fifference is that you remove the brackets. Hình VII.5. Sử d ụng m ột HTML selector 80
Class Selector Các selector này dùng thu ộc tính CLASS của các ph ần t ử HTML. M ọi ph ần tử, mà th ấy được, có m ột thu ộc tính CLASS mà được dùng để gán m ột quy đị nh. Thay vì ta có th ể gán m ột quy đị nh lớp cho nhi ều ph ần t ử c ủa m ột ki ểu đơn khi ta mu ốn hi ển th ị nhi ều màu khác nhau. Trong tr ường h ợp đó ta sẽ dùng m ột quy đị nh lớp cho . CLASS Selector được b ắt đầu v ới m ột d ấu ch ấm (.) g ọi là ký t ự c ờ (flag), theo sau b ởi ‘tên l ớp’ c ủa selector. S ẽ t ốt h ơn để ch ọn các tên l ớp theo m ục đích hơn là m ột tên mà mô t ả màu ho ặc style c ủa h ọ. Ví d ụ, ta có th ể mu ốn đoạn A xu ất hi ện d ạng ch ữ nghiêng, các đoạn khác xu ất hi ện v ới style khác, trong tr ường h ợp đó đoạn A có th ể có m ột quy đị nh l ớp.slant. Ví d ụ: .water { color: blue } .danger { color: red } test water test danger no style italic Hình VII.6. Sử d ụng CLASS selector 81
Ví d ụ: classes.water.all.color = “blue” classes.danger.all.color = “red” test water test danger no style italic Khi dùng cú pháp JavaScript, ta không th ể dùng g ạch nối bên trong các tên lớp. B ởi vì JavaScript đọc g ạch n ối nh ư m ột dấu tr ừ (-) mà là m ột toán t ử JavaScript. Các tên l ớp không th ể g ồm b ất k ỳ toán tử JavaScript nào. Khi định ngh ĩa m ột style class: Ta có th ể xác đị nh các ph ần t ử HTML nào có th ể dùng style này Ta có th ể dùng t ừ khóa t ất c ả để cho t ất c ả các ph ần t ử có th ể dùng nó. Ví d ụ: all.hotpink {color:hotpink;} P.BLUE {color: blue; font-weight:bold;} H5.red1 {color:red; font-weight:bold;} This paragraph is blue. This paragraph does not use the class BLUE. This is an H5 element that tried to use the red1 class This paragraph is hotpink. This is an H5 element that has been allowed to use hotpink style. 82
Hình VII.7. Xác định các ph ần t ử Ví d ụ: classes.HOTPINK.all.color=”hotpink”; classes.BLUE.P.color = “blue”; classes.BLUE.P.fontWeight = “bold”; classes.red1.H5.color = “red”; classes.red1.H5.fontWeight = “bold”; This paragraph is blue. This paragraph does not use the class BLUE. This an H5 element that tried to use the red1 class This paragraph is hot pink. This is an H5 element that has been allowed to use hotpink style. 83
ID Selector Một ID Selector dùng thu ộc tính ID c ủa m ột ph ần t ử HTML. M ột ID selector được dùng để cung c ấp m ột style cho m ột ph ần t ử cụ th ể trên trang Web. Ví d ụ, ta có th ể dùng m ột ID selector để cung c ấp cho m ột tiêu đề . Không có ngh ĩa là cùng m ột style s ẽ được cung c ấp cho s ự ki ện khác c ủa m ột ph ần t ử trên cùng một trang, tr ừ khi ch ỉ rõ. Nó t ươ ng t ự nh ư vi ệc dùng m ột inline style do đó m ột style được cung c ấp cho m ột ph ần t ử xác định. M ột ID selector được b ắt đầ u b ởi một d ấu th ăng (#). Khi dùng cú pháp JavaScript, ta ph ải dùng thu ộc tính ID. Ví d ụ: ID Selectors #control {color: red} Fire is this colour This paragraph has no style applied Hình VII.8. Sử d ụng ID selector 84
Ví d ụ: Combining ID and Class Selectors .forest {color: green } .danger {color: red } #control {color: blue } green things fire hazards more green things more fire hazards things that burn things that don’t burn water 85
Hình VII.9. Kết h ợp ID và Class selector Ví d ụ: Combining ID and Class Selectors With (classes.forest.all) { Color = “green”; } With (classes.danger.all){ Color = “red”; } idss.control.color = “blue”; green things fire hazards more green things more fire hazards 86