tai lieu thiet ke web

2.1 MỤC TIÊU CỦA WEBSITE CẦN THIẾT KẾPhác thảo mục tiêu, ý tưởng sẽ giúp bạn sẽ không chỉ học được làm thế nào để tạo mộtwebsite mà còn tạo ra sự thành công về mặt tài chính trong khi cu

THIẾT KẾ WEB

ThS Thái Kim Phụng

Lưu hành nội bộ

CHƯƠNG 1 KHÁI QUÁT CHUNG VỀ INTERNET 4

CHƯƠNG 2 CÁC BƯỚC THIẾT KẾ WEB 7

2.1 MỤC TIÊU CỦA WEBSITE CẦN THIẾT KẾ 8

2.2 CHIẾN LƯỢC THIẾT KẾ 9

2.3 THIẾT KẾ GIAO DIỆN 9

17

BÀI THỰC HÀNH CHƯƠNG 2 17

CHƯƠNG 3 HTML CĂN BẢN 18

3.1 CÁC THẺ ĐỊNH DẠNG CẤU TRÚC DỮ LIỆU 19

3.2 CÁC THẺ ĐỊNH DẠNG KHỐI 20

3.3 CÁC THẺ ĐỊNH DẠNG DANH SÁCH 21

3.4 CÁC THẺ ĐỊNH DẠNG KÝ TỰ 22

3.5 CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH 29

3.6 CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU 31

33

BÀI THỰC HÀNH CHƯƠNG 3 33

CHƯƠNG 4 CSS (Cascading Style Sheets) 46

4.1 KHÁI NIỆM CSS 47

4.1.1 CSS là gì? 47

4.1.2 Tại sao CSS? 47

4.1.3 Học CSS cần những gì? 47

4.1.4 Cú pháp CSS 48

4.1.5 Đơn vị CSS 49

4.1.6 Vị trí đặt CSS 50

4.1.7 Sự ưu tiên 52

4.2 MỘT SỐ ĐẶC TÍNH CƠ BẢN VỀ CSS 54

4.2.1 Thuộc tính Border trong CSS 54

4.2.2 Thuộc tính Font trong CSS 56

4.2.3 Thuộc tính List trong CSS 58

4.2.4 Thuộc tính Text trong CSS 59

4.2.5 Thuộc tính Padding trong CSS 59

4.2.6 Thuộc tính Background trong CSS 60

4.2.7 Thuộc tính Margin trong CSS 61

61

BÀI THỰC HÀNH CHƯƠNG 4 61

CHƯƠNG 5 THIẾT KẾ WEB DÙNG FORM VÀ JAVASCRIPT 69

5.1 HTML FORM 70

5.2 CĂN BẢN VỀ NGÔN NGỮ JAVASCRIPT 71

5.2.1 Tổng quan Java Script 71

5.2.2 Sự kiện trong html và java script 73

74

BÀI THỰC HÀNH CHƯƠNG 5 74

CHƯƠNG 6 THIẾT KẾ WEB SỬ DỤNG DREAMWEAVER 95

6.1 ĐỊNH DẠNG WEBPAGE 96

6.2 TABLE 97

6.3 FORM 99

6.4 LAYER 102

6.5 FLASH BUTTON, FLASH TEXT, ROLLOVER IMAGES, JUMP MENU 104

6.6 BỔ SUNG MULTIMEDIA CHO TRANG WEB (ÂM THANH, PHIM ẢNH) 107

BÀI THỰC HÀNH CHƯƠNG 6 114

CHƯƠNG 7 ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE 126

7.1 ĐĂNG KÝ HOST 127

7.2 THIẾT KẾ MỘT SỐ WEBSITE MẪU 128

Mạng là một nhóm các máy tính kết nối với nhau Internet là mạng của các mạng Giao thứcTCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất cả cácmáy tính trên thế giới.

Hình 1.1: Internet

World Wide Web là một tập con của Internet Nó bắt đầu như là đề án nghiên cứu cấp quốcgia tại phòng nghiên cứu CERN ở Thụy Sĩ Ngày nay, nó cung cấp thông tin cho người dùngtrên toàn thế giới

WWW hoạt động dựa trên 3 cơ chế để đưa các tài nguyên có giá trị đến với người dùng Đólà:

o Giao thức: Người dùng tuân theo các giao thức này để truy cập tài nguyên trên Web.HyperText Transfer Protocol(HTTP) là giao thức được WWW sử dụng

o Địa chỉ: WWW tuân theo một cách thức đặt tên thống nhất để truy cập vào các tàinguyên trên Web URL được sử dụng để nhận dạng các trang và các tài nguyên trênWeb

o HTML: Ngôn ngữ đánh dấu siêu văn bản (HTML) được sử dụng để tạo các tài liệu cóthể truy cập trên Web Tài liệu HTML được tạo ra bằng cách sử dụng các thẻ và cácphần tử của HTML File được lưu trên Web server với đuôi htm hoặc html

Khi bạn sử dụng trình duyệt để yêu cầu một số thông tin nào đó, Web server sẽ đáp ứng cácyêu cầu đó Nó gửi thông tin được yêu cầu đến trình duyệt dưới dạng các trang web Trìnhduyệt định dạng thông tin do máy chủ gửi về và hiển thi chúng

Hình 1.2: Trình duyệt yêu cầu đến máy chủ

Hình 1.3: Một số trình duyệt phổ dụng

Dựa vào bài tập trong phần cuối Chương 2.

2.1 MỤC TIÊU CỦA WEBSITE CẦN THIẾT KẾ

Phác thảo mục tiêu, ý tưởng sẽ giúp bạn sẽ không chỉ học được làm thế nào để tạo mộtwebsite mà còn tạo ra sự thành công về mặt tài chính trong khi cung cấp nội dung giá trị vàđổi mới tới các khách hàng của bạn

Bước 1: Nội dung trang web của bạn là gì?

Bạn có thể nghĩ về câu hỏi này quá nhiều tới mức bạn có thể có được câu trả lời rất rõ ràng.Nhưng chức năng và cảm nhận về trang web phải phù hợp với nội dung Bố cục và chức năngcủa trang web dễ thực hiện hơn khi bạn hiểu tường tậng về nội dung trang web của mình

Bước 2: Hãy chú trọng vào bố cục và tính thiết thực của trang web

Hãy ưu tiên thanh toán cho bất kỳ những gói hosting (lưu trữ website) hoặc các chiến dịchquảng cáo, cũng như có một cái nhìn tổng thể về nội dung trang web sẽ là gì và được thể hiệnnhư thế nào Điều gì sẽ là ý tưởng chính trên trang web của bạn? Nó sẽ được thảo luận nhưthế nào? Bạn có thể chọn bổ sung cho chủ đề của mình qua những bài báo, các blog, hoạt ảnh,hình ảnh hoặc là sự kết hợp của tất cả những cái này.Nó có phải là định dạng phù hợp mà bạnmuốn sử dụng cho nội dung trang web không? Bạn có thể tạo một website như thế nào để sẽthu hút được độc giả theo mong đợi của mình?

Bước 3: Hãy tìm một dịch vụ hosting có thể cung cấp tất cả tính năng mà bạn cần

Từ những điều đã nói ở trên, bạn nên có một danh sách đầy đủ các chức năng bạn cần như:mẫu thư điện tử, khảo sát và bình chọn, thư viện ảnh, thông tin phải đăng nhập, các blog và cảnhững tính năng khác Hãy nghiên cứu kỹ các gói hosting và tìm lấy một gói chào hàng chomọi thứ bạn cần Nếu bạn không chắc chắn làm thế nào để tạo một website thì hãy tìm kiếmmột máy chủ có hệ thống hỗ trợ vững chắc, hoặc nhờ hỗ trợ kỹ thuật chính thức hoặc các diễnđàn tích cực

Bước 4: Đừng để bất cứ ai truy cập vào trang web của bạn khi nó chưa thực sự sẵn sàng

Mọi người ghét điều hướng truy cập tới một trang xuất hiện banner “đang triển khai” Thôngthường, một trang đang triển khai thì không bao giờ hoàn tất và nó gần như bị bỏ quên Bởihầu hết mọi người không trở lại nhìn khi các trang “đang triển khai” đó nữa dù nó đã đượchoàn tất

Bước 5: Hãy đảm bảo trang web của bạn được truy cập nhiều khi nó thực sự sẵn sàng.

Bạn không chỉ cần nghĩ xem làm thế nào để thiết kế website tốt nhất, mà còn làm thế nào đểtiếp thị được một website tới độc giả theo mong đợi của mình Hãy hoạch định làm thế nàobạn sẽ sử dụng những cơ hội tiếp thị miễn phí chẳng hạn như các diễn đàn, các liên kết tương

hỗ cũng như có được các blogger đến với trang web của bạn Hãy tạo thêm một kế hoạch nữacho các chương trình quảng cáo được thanh toán mà chính chúng sẽ giúp duy trì ngân sáchcho bạn

2.2 CHIẾN LƯỢC THIẾT KẾ

Bất cứ điều gì bạn đang cố gắng để tiến hành thiết kế website, cho dù nếu là quảng cáo chocông ty hay bán sản phẩm thì mục tiêu chính vẫn là giành được lưu lượng truy cập

Khi thiết kế một trang web mới cho công ty, dù website đó lớn hay nhỏ thì điều quan trọng làkhiến mọi người luôn trở lại với trang web của bạn Quan điểm của mỗi người về một websitehiệu quả có sự khác nhau Một số người có thể quan trọng về giao diện web trong khi nhữngngười khác lại quan tâm đến sự tiện ích nhiều hơn Nếu bạn có thể đáp ứng được những tiêuchí sau thì trang web của bạn thật đã có sự vượt trội trong rừng website

Giao diện website

Không ai muốn nhìn một website có giao diện kém thu hút nhưng nếu nó quá sặc sỡ thì cũngkhiến khách truy cập rời bỏ Việc tìm thấy một sự hài hoà tốt giữa chúng là chìa khoá để có

bản thiết kế website hiệu quả Màu sắc có thể được sử dụng để thể hiện cảm xúc tình cảm

của con người cũng như có thể khuyến khích họ mua hàng Các nhà thiết kế web chuyênnghiệp đã sử dụng tâm lý màu nhằm truyền tải những lời thông điệp khác nhau tới ngườidùng Một bản thiết kế đừng nên quá phức tạp hay khó hiểu và cũng nên phù hợp với loạihình kinh doanh cũng như sản phẩm hoặc dịch vụ mà bạn mời chào

Mục đích trang web

Trước khi phát triển một trang web bạn cần phải đặt ra các mục tiêu và hãy tự hỏi bản thânrằng bạn muốn mọi người có được lợi ích như thế nào từ trang web của bạn Nội dung củawebsite nên luôn được cập nhật Rất dễ nhận thấy khi website chưa được cập nhật Điều này

có phản ánh không hay về công ty bởi vì trang chủ như là bản tóm tắt chung nội dungwebsite Bạn cũng cần có một nội dung website phản ánh được mục tiêu chính và những gìbạn đang cố gắng làm

Tính tiện ích

Internet cung cấp vô vàn thông tin nên khó giành được sự chú ý của mọi người cũng như giữ

họ trên trang web của bạn Một trong những điều khiến người truy cập hay rời bỏ nhất là tiệních nghèo nàn Một trang web cần được đơn giản và dễ sử dụng Điều hướng nên dễ dàng truycập tới được mọi trang trên website Khách truy cập sẽ không bao giờ phải kích chuột nhiềuhơn 4 lần để vào một trang cụ thể Một quy tắc chung của hầu hết các chuyên gia thiết kế web

là không nên để khách truy cập nhấp chuột quá 2 lần khi truy cập tới bất kỳ trang nào trênwebsite Cấu trúc điều hướng phức tạp sẽ nhanh chóng làm mất khách truy cập và họ sẽ rời bỏnếu họ không thể tìm thấy những điều mà họ đang tìm kiếm Bạn hãy nhớ đến một điều nữa làcác nhà cung cấp dịch vụ của bạn

2.3 THIẾT KẾ GIAO DIỆN

Bạn đã gặp rất nhiều trang web đẹp và giờ đây bạn muốn thiết kế một trang web riêng cho mình Bạn cũng có chút khiếu về thẩm mỹ và cũng biết đôi chút về việc thiết kế web, nhưng bạn chưa bao giờ từng tự mình thiết kế ra một trang web hoàn chỉnh

Đi tìm cảm hứng và hình thành ý tưởng (phần 1)

Bạn đã gặp rất nhiều trang web đẹp và giờ đây bạn muốn thiết kế một trang web riêng chomình Bạn cũng có chút khiếu về thẩm mỹ và cũng biết đôi chút về việc thiết kế web, nhưngbạn chưa bao giờ từng tự mình thiết kế ra một trang web hoàn chỉnh Đã mấy lần bạn ngồitrước máy tính, quyết định sẽ làm cho mình một trang web - để rồi cả mấy tiếng sau vẫn chưalàm được gì? Bạn thật sự chẳng biết phải bắt đầu từ đâu cả…

Trong mọi việc, bước đầu tiên bao giờ cũng là bước khó nhất Điều đó càng đúng với nếu bạnchưa có kinh nghiệm và không biết gì nhiều về những việc mà mình sẽ làm Trong bài viếtnày sẽ giúp bạn trả lời một một câu hỏi rất hay thường gặp ở những người mới bắt đầu làmthiết kế web là làm thế nào để lấy cảm hứng và ý tưởng của những trang web thiết kế đẹp màbạn thích để tạo ra thiết kế riêng cho mình mà không rơi vào tình huống sao chép thiết kế củahọ?

Tuy nhiên, phải nói trước, nếu bạn hi vọng đọc xong bài viết này sẽ giúp bạn thiết kế đượcmột trang web hoàn chỉnh thì tôi e rằng sẽ làm bạn thất vọng Trong bài viết, tôi sẽ giả địnhrằng các bạn đã có kiến thức về viết mã cho web cũng như đã sử dụng tương đối thành thạomột phần mềm đồ họa nào đó Điều bạn cần chỉ là một hướng đi để bắt đầu - và tớ hi vọng từnhững kinh nghiệm của mình sẽ giúp cho các bạn có được một hướng đi đúng

Vậy bước đầu tiên sẽ là gì? Bước đầu tiên tuy khó để nghĩ ra, nhưng thường lại là bước dễnhất và chẳng mấy ngạc nhiên một khi bạn đã biết về nó:

Bước 1: Tìm nguồn cảm hứng

Quá trình này trong thuật ngữ của dân thiết kế gọi là “get inspired” Việc có được cảm hứng

là một điều rất quan trọng trong những ngành nghệ thuật liên quan đến quá trình sáng tạo.Trong âm nhạc, nguồn cảm hứng có thể là từ một cảm xúc chợt đến trong một buổi chiều;Trong thơ, nó có thể bắt nguồn từ một cảnh quang thiên nhiên Còn trong thiết kế, nguồn cảmhứng đến từ … những thiết kế khác Chính vì vậy, không giống như trong thơ và nhạc việctìm được nguồn cảm hứng thường đến một cách ngẫu nhiên và có phần may mắn, trong thiết

kế, bạn có thể tự mình đi tìm nguồn cảm hứng Hãy vào các trang sưu tầm và giới thiệu cácthiết kế đẹp như CSSBeauty, CSS Vault, Design Shake và bạn sẽ thấy có rất nhiều thiết kế rấtđẹp từ khắp nơi trên thế giới Một vài điều đáng chú ý:

• Hãy chụp và lưu lại màn hình của các trang web mà bạn thích vào một thư mục trênmáy tính Các trang gallery thường để hình ảnh thu nhỏ và thường không có mấy tácdụng trong việc giúp bạn thấy được cái đẹp của thiết kế Việc lưu lại hình ảnh ở độphân giải thực không những sẽ đem lại cho bạn sự chi tiết mà còn giúp bạn xem lạinhững thiết kế này dễ dàng hơn về sau mà không cần phải mở trình duyệt ra

• Ở bước này, bạn không cần phải nghĩ về thiết kế “tương lai” của mình mà hãy cứ việcdạo quanh một vòng và thưởng thức những thiết kế của người khác Tuy nhiên, bạncần xác định rõ trang web mà mình sẽ thiết kế là thuộc phân mục nào Có rất nhiềuthiết kế đẹp, nhưng không phải thiết kế nào cũng phù hợp với mục đích của bạn Ví dụnhư phong cách thiết kế của một trang web doanh nghiệp sẽ không phù hợp với mộttrang blog cá nhân Việc xác định rõ ngay từ đầu sẽ giúp bạn bỏ qua rất nhanh những

thiết kế không phù hợp (những gallery ở trên thường có đến hàng trăm thiết kế, việcngồi xem hết từng cái là không thể)

Nếu bạn xác định rằng mình đang thiết kế giao diện cho blog, bạn sẽ dễ dàng bỏ qua nhữngthiết kế như bên phải, trong khi dành nhiều chú ý hơn đến những thiết kế cho phép nhiềukhông gian để hiển thị bài viết như trong hình bên trái

• Đừng ngồi quá lâu để xem cùng một lúc Hãy dành thời gian làm việc khác, để hômsau xem tiếp Lý do là thường thì một khi xem quá lâu, càng về sau bạn sẽ càng cảmthấy mệt mỏi và khi đó dường như mọi thiết kế đều trở nên “nhàm nhàm” giống nhưnhau - mặc dù nếu bạn xem nó ngay từ lúc đầu thì bạn lại thấy nó đẹp Vì vậy, sẽ là lýtưởng nếu mỗi ngày bạn chỉ xem vài ba thiết kế và đó là lý do tại sao bạn nên có thóiquen sưu tầm thiết kế đẹp mỗi ngày - để đến lúc cần thì đã có sẵn những thiết kế màbạn thích Nếu bạn xác định mình sẽ đi theo nghề thiết kế web, đó là một thói quennên học

Vậy khi nào thì bạn nên dừng lại? Khi nào thì bạn biết rằng mình đã tìm được nguồn cảmhứng? Rất khó để trả lời được câu hỏi này Sẽ có những lúc mà bạn bắt gặp một trang webquá đẹp mà bạn chỉ muốn dừng lại và bắt tay ngay vào việc thiết kế một trang web tương tự.Nhưng trừ khi bạn muốn sao chép nguyên xi thiết kế của họ (mà như vậy thì đã chẳng gọi làthiết kế), cảm hứng từ một thiết kế như vậy sẽ không đủ để giúp bạn có thể làm nên thiết kếcủa riêng mình - mặc dù bạn có thể chắc chắn là thiết kế đó sẽ đóng vai trò rất quan trọng ảnhhưởng đến thiết kế của bạn Vậy nên, lời khuyên của tôi là hãy chỉ dừng lại khi:

• Bạn đã có được ít nhất 10 - 20 thiết kế mà bạn cảm thấy đẹp và phù hợp với trang webcủa mình

• Có ít nhất một trang thiết kế mà nó khiến bạn chỉ muốn copy nguyên xi của nó về (dùrằng mục đích của bạn không phải là như vậy)

Khi đó, bạn có thể bắt đầu chuyển sang bước thứ 2:

Bước 2: Định hình ý tưởng

Sau khi đã chọn được khoảng 10-20 thiết kế trong bước 1 và bước đầu có cái “cảm hứng” đểquyết định sẽ thiết kế cho riêng mình một trang web, bạn sẽ cần phải định hình ý tưởng chotrang web của mình Hãy ngồi duyệt lại những ảnh chụp trang web mà bạn đã lưu vào máytrong bước 1:

• Cách tốt nhất trong quá trình này là dùng tính năng Slideshow của phần mềm quản lýảnh (ví dụ như Picasa) vì nó sẽ chỉ hiển thị một ảnh trên toàn màn hình (giúp bạn đỡ bịphân tán) cũng như nó cho phép bạn nhanh chóng chuyển qua những hình khác

Xem giao diện toàn màn hình sử dụng tính năng slideshow của Picasa giúp bạn tránh bị phântán

• Ghi chú xuống một mảnh giấy nhỏ những điểm mà bạn thích về một thiết kế mà bạnnghĩ rằng mình muốn có trong thiết kế của mình Điều rất quan trọng là bạn hãy để ýđến ý tưởng chứ không phải chi tiết của thiết kế Điều đó có nghĩa là bạn nên ghi lại ýtưởng sử dụng mây làm hình ảnh ở đầu trang và cỏ ở cuối trang tạo cảm giác về khônggian, nhưng bạn không nên copy hình ảnh mà họ sử dụng Những gì bạn cần đề ý:cách sử dụng màu sắc, hình thức bố cục, cách sắp xếp nội dung, và thậm chí cách cách

mà họ làm viền cho hình ảnh,… Những gì bạn không nên để ý: trang web đó sử dụnghình ảnh cụ thể gì, màu sắc cụ thể cho tiêu đề của bài viết,…

Bạn thấy gì từ một trong những thiết kế ban đầu của trang web All Women’s Talk? Một vàiđiểm cần ghi lại: cách sử dụng màu đơn và cách họ chọn màu thể hiện nội dung nữ tính củatrang web Bạn cũng có thể ghi lại cách mà họ đặt chủ đề của bài viết ngay trước tiêu đề củabài viết và làm nổi bật nó bằng cách tô màu nền cho nó Cái cách mà họ chia diện tích trangweb thành 2 nữa - một để liệt kê những bài viết chính và bên kia để hiển thị danh sách các bàinổi bật và danh sách phân mục Những gì bạn không nên chép lại: hình ảnh bông hoa họ sửdụng trong hầu như tất cả các thành phần trên trang web.

Sau bước này, bạn sẽ có một ý tưởng tương đối rõ ràng (ít ra là không mơ hồ không xác địnhnhư trước) về trang web của mình Trang web sẽ có thiết kế đơn giản và sạch sẽ hay là nó sẽ

sử dụng nhiều hình ảnh đồ họa? Bạn sẽ sử dụng nhiều màu sắc tạo cảm giác tươi trẻ hay sẽchọn tông màu đơn lẻ mà sang trọng? Trang web sẽ có bố cục 3 cột hay 2 cột? Bạn thâm chí

sẽ xác định được những câu hỏi tương đối chi tiết như liệu mình sẽ sử dụng hình ảnh vectorhay sẽ sử dụng ảnh chụp để làm trang trí?

Đừng quá lo lắng về việc liệu bạn có đang copy thiết kế của người khác hay không Miễn làbạn không có ý định đó và bạn có ít nhất 10 - 20 thiết kế để tham khảo thì tôi đảm bảo khi bắtđầu đi vào thiết kế bạn sẽ không gặp phải trường hợp bạn copy thiết kế của người khác Bạn

sẽ ngạc nhiên khi sang bước 4, khi mà bạn bắt đầu xây dựng mẫu cho thiết kế của mình,những ý tưởng ban đầu mà bạn ghi chép lại ở bước này sẽ tự biến đổi thành thiết kế của riêngbạn

Kết thúc (Phần 1)

Tất nhiên, không phải cứ là thiết kế đẹp thì nhất thiết nó sẽ phù hợp với nội dung của bạn.Trong bài kế tiếp, tớ sẽ thảo luận về việc kết hợp giữa nội dung và thiết kế, cũng như một vàikinh nghiệm trong việc bắt đầu xây dựng mẫu (”prototype”) cho thiết kế của mình

Xây dựng khung nội dung (Phần 2)

“Cảm hứng” là gì? Đó là một sự thôi thúc mà một khi cảm nhận được nó, bạn chỉ muốn bắttay vào làm ngay và ước như đừng có gì làm gián đoạn quá trình đó Một khi bạn đã có đượccái gọi là “cảm hứng” đó thì mọi thứ dường như đều tự nhiên xuất hiện - như nó đã có sẵn từtrước đó vậy Bạn hoàn toàn có thể đánh mất cái cảm hứng của mình một cách nhanh chóng -

và điều này rất thường hay xảy ra nếu như bạn bị gián đoạn giữa bước 1 và bước 2 và thậmchí đôi khi là giữa quá trình thiết kế chi tiết Tôi sẽ nói thêm về điều này ở sau, nhưng điềuquan trọng bạn nên nhớ là bạn hoàn toàn có thể tìm lại được nó với một chút thời gian tạm xa

nó rồi quay lại bước 1

Ý tưởng

Từ những trang web mà bạn đã xem, bước đầu bạn đã ghi nhận những điểm mà mình muốnthiết kế của mình thể hiện Mặc dù bạn có thể không nhận ra, chính trong quá trình xem vàchọn lọc những điểm nhấn mà bạn thích từ những thiết kế của người khác, bạn đã tự mìnhkhám phá chính mình Tại sao bạn thích và ghi lại cái cách phối màu mà trangAllWomenTalks sử dụng? Tôi có thể tự tin để khẳng định rằng bạn là một cô gái với một tâmhồn lãng mạn, nữ tính và thậm chí… thích sử uỷ mị

Bước 3: Xây dựng khung nội dung

Thế nào gọi là xây dựng khung nội dung? Đó là quá trình đi tìm câu trả lời cho câu hỏi - nếunhìn từ xa, bố cục trang web của bạn sẽ trông như thế nào Thuật ngữ trong thiết kế thườnggọi quá trình này là “prototyping” - tức xây dựng mô hình mẫu Một bức hình có thể thay vạnlời giải thích - đây là cái gọi là “khung nội dung”.

Mục đích của việc thiết kế khung giao diện không phải là để tạo ra giao diện - bạn đơn giản làtạo một mô hình “thô” của giao diện Bạn không cần quan tâm về màu sắc Bạn cũng khôngcần quan tâm về những biểu tượng cụ thể được sử dụng là gì Nói tóm lại, bạn không phảiquan tâm về những chi tiết nhỏ của thiết kế mà chỉ cần tập trung vào bức tranh tổng thể củatrang web (tưởng tượng nếu bạn đứng cách xa màn hình 5 mét và nhìn trang web của mình sẽnhư thế nào - chắc chắn bạn sẽ không thấy cụ thể nội dung mà chỉ thấy bố cục của nó)

Nếu theo đúng bài bản, việc thiết kế khung nội dung đòi hỏi bạn phải trải qua một quá trìnhphân tích và tìm hiểu rất chi tiết về nội dung và tương tác thực tế với người dùng - như cáicách mà 37 Signals giới thiệu về quá trình họ thiết kế một mẫu hiển thị thông tin đơn giản của

hệ thống Tuy nhiên, việc áp dụng một quá trình “khoa học” như vậy có lẽ là không phù hợpvới phần lớn những trang web nhỏ và đôi khi khiến người thiết kế mới bắt đầu rất nản và có

xu hướng bỏ qua khi không thấy được hiệu quả trực tiếp của nó Vậy nên tôi sẽ tóm tắt nóthành 2 bước chính:

• Xác định và phân loại nội dung sẽ xuất hiện Ví dụ như nếu đó là một trang blog thìthường sẽ có những đối tượng chính sau: Tiêu đề, danh sách các phân mục, cột nộidung bài viết, các liên kết bạn bè Tuỳ theo mục đích cụ thể, bạn có thể có thêm nhữngđối tượng nội dung khác - ví dụ như những phản hồi gần đây nhất, cột ghi chép nhanh,

…

• Sắp xếp những đối tượng nội dung này theo từng khối

Một trong những quyết định quan trọng nhất mà bạn sẽ phải lựa chọn trong bước này chính là

về bố cục trình bày thông tin - trang web sẽ được chia làm 1 cột, 2 cột hay 3 cột (phổ biến vớicác trang nội dung) Kinh nghiệm của tôi cho thấy rằng dường như tất cả các thiết kế trangweb nội dung đều bắt đầu từ quyết định lựa chọn số cột để trình bày nội dung và nó sẽ ảnhhưởng rất nhiều đến những quyết định cụ thể sau đó Thông thường thì thông tin này sẽ đượchình thành từ 2 bước trước đó - nhưng nếu bạn đã có sẵn ý tưởng từ trước về bố cục giao diệnthì bạn vẫn có thể hoàn toàn thực hiện nó trước Để giúp các bạn có thêm thông tin trước khilựa chọn - đặc biệt là nếu bạn thiết kế cho blog của mình - bạn có thể thử trả lời câu hỏi Bạn

đã có sẵn nhiều nội dung chưa?

Nếu bạn chỉ mới bắt đầu viết mà chọn cho mình một giao diện 3 cột sẽ khiến trang web củabạn trở nên trống trải Trong tình huống đó, có lẽ bạn nên thử tìm một thiết kế đơn giản 2 cộttrong thời gian tích luỹ nội dung - và đến khi đã có tương đối nhiều những bài viết thì bạn cóthể chuyển sang giao diện 3 cột Thực tế là nếu bạn thiết kế blog thì nên cực kỳ hạn chế việc

sử dụng giao diện 3 cột ngay cả khi đã có nhiều nội dung Với độ phân giải của màn hình ởViệt Nam phần lớn chỉ giới hạn ở 1024 x 768, bạn thường sẽ chỉ có tối đa là 950px bề rộngcho 3 cột Trong blog, cột nội dung chính thường sẽ chiếm ít nhất một nủa bề rộng - tức bạn

sẽ chỉ còn khoảng 400px cho 2 cột nội dung còn lại sau khi đã trừ đi các khoảng cách canh lềdừa các cột và với 2 cạnh của cửa sổ trình duyệt Bạn có thể sẽ nhét được tiêu đề các danhmục và vài liên kết ngắn ở một trong 2 cột đó, nhưng chắc chắn phần còn lại sẽ không đủ đểđưa các nội dung lớn

Các trang chủ báo chí (như VietnamNet) có thể sử dụng giao diện 3 cột bởi họ chỉ cần đưatiêu đề ngắn của các bản tin trong mỗi cột - nhưng điều đó không áp dụng được với nhữngtrang blog.

Để kết thúc, sau đây là một vài kinh nghiệm có thể giúp bạn trong quá trình này:

• Không dùng phần mềm để vẽ Ở giai đoạn này, bạn cần có khả năng vẽ và xoá thậtnhanh để chuyển hoá và thử nghiệm những ý tưởng nảy sinh trong quá trình này Sửdụng phần mềm dù đơn giản và dễ sử dụng đến mấy cũng sẽ đòi hỏi bạn phải thựchiện nhiều thao tác kỹ thuật

• Bạn có thể sử dụng bút chì, một cục tẩy và vài tờ giấy - nhưng tốt nhất theo tôi vẫn là

có một tấm bảng và vài cây bút lông màu khác nhau Không chỉ việc xoá và vẽ lại trênbảng dễ hơn rất nhiều so với trên giấy, tôi có cảm giác rằng khi bạn đang đứng và vẽtrên bảng, khả năng “sáng tạo” của bạn sẽ được tăng cường

• Những thành phần duy nhất mà bạn cần vẽ có lẽ sẽ chỉ là những hình chữ nhật Bạnbiểu diễn danh sách phân mục bằng một cái hộp, cột nội dung bằng một cái hộp kháccao và to hơn,…

• Hãy để những bảng vẽ của bạn xuất hiện trước mắt bạn vài ngày Điều này dễ thựchiện nếu bạn có một tấm bảng vẽ - chỉ cần bạn không xoá thì mỗi ngày dù đang làmviệc khác bạn cũng sẽ thấy nó - và đôi khi trong những lúc không tập trung như vậybạn sẽ có được những ý tưởng chỉnh sửa đáng giá

• Mặc dù chỉ là bản vẻ khung thô, nhìn từ xa bạn phải cảm thấy được cái giao diện vàhài lòng với nó Nếu nhìn vào bố cục mà bạn cảm thấy còn hơi “khó chịu” thì chứng

tỏ nó chưa đạt tiêu chuẩn về bố cục Nên nhớ, mặc dù ở giao diện thực tế, người dùng

sẽ không chỉ thấy nội dung như những cái hộp nhưng trong tiềm thức của bộ não nội dung sẽ được thể hiện như những cái hộp và nó đóng một phần rất quan trọngtrong nhận thức của người dùng về giao diện để họ quyết định có thích nó hay không Nói chung là những quyết định mà bạn lựa chọn ở bước này mặc dù rất chung chung nhưng

-sẽ có ảnh hưởng rất lớn một khi bạn bắt đầu chuyển sang quá trình thiết kế chi tiết Nhữngbạn mới bắt đầu làm quen với việc thiết kế thường dễ dàng bỏ qua bước này bởi thấy nókhông cần thiết, nhưng sự thật là nếu bạn làm tốt nó, những quyết định được đưa ra trongbước này sẽ giúp bạn giảm rất nhiều thời gian sắp xếp và chỉnh sửa trong quá trình thiết kếchi tiết Còn nếu bạn đã có ý định phát triển theo hướng thiết kế giao diện người dùng (webhay ứng dụng phần mềm) thì có lẽ đây là một quá trình bắt buộc dù bạn có muốn hay không -hãy thực hành với những thiết kế nhỏ và đơn giản để tích luỹ kinh nghiệm cho mình

BÀI THỰC HÀNH CHƯƠNG 2

1 Hãy thiết kế khung mẫu cho những website trong đồ án

2 Hãy thiết kế khung mẫu cho website thương mại

3 Hãy thiết kế khung mẫu cho website giải trí

4 Hãy thiết kế khung mẫu cho blog

Kết thúc bài học này cung

3.3 Các thẻ định dạng danh sách 3.4 Các thẻ định dạng ký tự 3.5 Các thẻ chèn âm thanh, hình ảnh 3.6 Các thẻ định dạng bảng biểu

Dựa vào bài tập trong phần cuối Chương 3.

Dựa vào bài tập trong phần cuối Chương 3.

Mục tiêu Các mục chính Bài tập bắt Bài tập làm

buộc thêm

<HEAD>

<TITLE>Tiêu đề của tài liệu</TITLE>

</HEAD>

<BODY Các tham số nếu có>

Nội dung của tài liệu

</BODY>

</HTML>

BACKGROUND= Đặt một ảnh nào đó làm ảnh nền (background) cho

văn bản Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lát kín bằng nhiều ảnh.

BGCOLOR= Đặt màu nền cho trang khi hiển thị Nếu cả hai tham

số BACKGROUND và BGCOLOR cùng có giá trị thì

trình duyệt sẽ hiển thị màu nền trước, sau đó mới tải ảnh lên phía trên.

TEXT= Xác định màu chữ của văn bản, kể cả các đề mục.

ALINK=,VLINK=,LINK= Xác định màu sắc cho các siêu liên kết trong văn

bản Tương ứng, alink (active link) là liên kết đang

được kích hoạt - tức là khi đã được kích chuột lên;

vlink (visited link) chỉ liên kết đã từng được kích

Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:

<P>Nội dung đoạn văn bản</P>

Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ <BR>

3.2.4 THẺ PRE

Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ <PRE> Văn bản ởgiữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào, ví dụ dấu xuốngdòng trong đoạn văn bản giới hạn bởi thẻ <PRE> sẽ có ý nghĩa chuyển sang dòng mới (trìnhduyệt sẽ không coi chúng như dấu cách)

•` Danh sách không sắp xếp ( hay không đánh số) <UL>

• Danh sách có sắp xếp (hay có đánh số) <OL>, mỗi mục trong danh sách được

sắp xếp thứ tự

• Danh sách thực đơn <MENU>

• Danh sách phân cấp <DIR>

<PRE>Văn bản đã được định dạng</PRE>

<UL>

<LI> Mục thứ nhất

<LI> Mục thứ hai

</UL>

Với nhiều trình duyệt, danh sách phân cấp và danh sách thực đơn giống danh sách khôngđánh số, có thể dùng lẫn với nhau Với thẻ OL ta có cú pháp sau:

trong đó:

TYPE =1 Các mục được sắp xếp theo thứ tự 1, 2, 3

=a Các mục được sắp xếp theo thứ tự a, b, c

=A Các mục được sắp xếp theo thứ tự A, B, C

=i Các mục được sắp xếp theo thứ tự i, ii, iii

=I Các mục được sắp xếp theo thứ tự I, II, III

Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách.

Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi mục

trong danh sách Thuộc tính này có thể nhận các giá trị : disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông).

<DFN> Đánh dấu đoạn văn bản giữa hai thẻ này là

định nghĩa của một từ Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó.

<S> </S>

<STRIKE> </STRIKE>

In chữ bị gạch ngang.

<BIG> </BIG> In chữ lớn hơn bình thường bằng cách tăng

kích thước font hiện thời lên một Việc sử dụng

các thẻ <BIG>lồng nhau tạo ra hiệu ứng chữ

tăng dần Tuy nhiên đối với mỗi trình duyệt có

<OL TYPE=1/a/A/i/I>

<LI>Muc thu nhat

<LI>Muc thu hai

<LI>Muc thu ba

</OL>

giới hạn về kích thước đối với mỗi font chữ,

vượt quá giới hạn này, các thẻ <BIG> sẽ

không có ý nghĩa.

<SMALL> </SMALL> In chữ nhỏ hơn bình thường bằng cách giảm

kích thước font hiện thời đi một Việc sử dụng

các thẻ <SMALL>lồng nhau tạo ra hiệu ứng

chữ giảm dần Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ

<SMALL> sẽ không có ý nghĩa.

<SUP> </SUP> Định dạng chỉ số trên (SuperScript)

<SUB> </SUB> Định dạng chỉ số dưới (SubScript)

<BASEFONT> Định nghĩa kích thước font chữ được sử dụng

cho đến hết văn bản Thẻ này chỉ có một tham

số size= xác định cỡ chữ Thẻ <BASEFONT> không có thẻ kết thúc.

<FONT> </FONT> Chọn kiểu chữ hiển thị Trong thẻ này có thể

đặt hai tham số size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ Kích thước có thể là tuyệt đối (nhận giá trị

từ 1 đến 7) hoặc tương đối (+2,-4 ) so với font chữ hiện tại.

3.4.2 CĂN LỀ VĂN BẢN TRONG TRANG WEB

Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để

trang Web có được một bố cục đẹp Một số các thẻ định dạng như P, Hn, IMG đều có tham

số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi của các thẻ đó.

Các giá trị cho tham số ALIGN:

LEFT Căn lề trái CENTER Căn giữa trang RIGHT Căn lề phải

Ngoài ra, chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản

Cú pháp:

<CENTER>Văn bản sẽ được căn giữa trang</CENTER>

3.4.4 SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ CÁC TRANG WEB

Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green),Xanh nước biển (Blue) Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ

số 16) có định dạng như sau:

#RRGGBB

trong đó:

RR - là giá trị màu Đỏ

GG - là giá trị màu Xanh lá cây

BB - là giá trị màu Xanh nước biển

Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color= Sau dấu bằng có thể là giátrị RGB hay tên tiếng Anh của màu Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khivới giá trị RGB ta có thể chỉ tới 256 màu

Sau đây là một số giá trị màu cơ bản:

YELLOWLIGHTYELLOWWHITE

BLACKGRAYBROWN

LINK Chỉ định màu của văn bản siêu liên kết

ALINK Chỉ định màu của văn bản siêu liên kết đang đang chọn

VLINK Chỉ định màu của văn bản siêu liên kết đã từng mở

BACKGROUND Chỉ định địa chỉ của ảnh dùng làm nền

BGCOLOR Chỉ định màu nền

TEXT Chỉ định màu của văn bản trong tài liệu

SCROLL YES/NO - Xác định có hay không thanh cuộn

TOPMARGIN Lề trên

RIGHTMARGIN Lề phải

LEFTMARGIN Lề trái

3.4.5 CHỌN KIỂU CHỮ CHO VĂN BẢN

3.4.6 KHÁI NIỆM VĂN BẢN SIÊU LIÊN KẾT

Văn bản siêu liên kết hay còn gọi là siêu văn bản là một từ, một cụm từ hay một câu trên trangWeb được dùng để liên kết tới một trang Web khác Siêu văn bản là môi trường trong đó chứacác liên kết (link) của các thông tin Do WWW cấu thành từ nhiều hệ thống khác nhau, cầnphải có một quy tắc đặt tên thống nhất cho tất cả các văn bản trên Web Quy tắc đặt tên đó làURL (Universal Resource Locator)

Các thành phần của URL được minh hoạ ở hình trên

• Dịch vụ: Là thành phần bắt buộc của URL Nó xác định cách thức trình duyệt của máy

khách liên lạc với máy phục vụ như thế nào để nhận dữ liệu Có nhiều dịch vụ như http, wais, ftp, gopher, telnet

• Tên hệ thống : Là thành phần bắt buộc của URL Có thể là tên miền đầy đủ của máy

phục vụ hoặc chỉ là một phần tên đầy đủ – trường hợp này xảy ra khi văn bản được yêu cầuvẫn nằm trên miền của bạn Tuy nhiên nên sử dụng đường dẫn đầy đủ

• Cổng : Không là thành phần bắt buộc của URL Cổng là địa chỉ socket của mạng dành cho

một giao thức cụ thể Giao thức http ngầm định nối với cổng 8080

• Đường dẫn thư mục : Là thành phần bắt buộc của URL Phải chỉ ra đường dẫn tới file

yêu cầu khi kết nối với bất kỳ hệ thống nào Có thể đường dẫn trong URL khác với đường dẫnthực sự trong hệ thống máy phục vụ Tuy nhiên có thể rút gọn đường dẫn bằng cách đặt biệtdanh (alias) Các thư mục trong đường dẫn cách nhau bởi dấu gạch chéo (/)

• Tên file : Không là thành phần bắt buộc của URL Thông thường máy phục vụ được cấu

hình sao cho nếu không chỉ ra tên file thì sẽ trả về file ngầm định trên thư mục được yêu cầu

File này thường có tên là index.html, index.htm, default.html hay default.htm Nếu cũngkhông có các file này thì thường kết quả trả về là danh sách liệt kê các file hay thư mục controng thư mục được yêu cầu

• Các tham số : Không là thành phần bắt buộc của URL Nếu URL là yêu cầu tìm kiếm trên

một cơ sở dữ liệu thì truy vấn sẽ gắn vào URL, đó chính là đoạn mã đằng sau dấu chấm hỏi(?) URL cũng có thể trả lại thông tin được thu thập từ form Trong trường hợp dấu thăng (#)xuất hiện đoạn mã đằng sau là tên của một vị trí (location) trong file được chỉ ra

Để tạo ra một siêu văn bản chúng ta sử dụng thẻ <A>

Cú pháp:

<A

HREF = url NAME = name

NAME Đặt tên cho vị trí đặt thẻ.

TABLEINDEX Thứ tự di chuyển khi ấn phím Tab

TITLE Văn bản hiển thị khi di chuột trên siêu liên

kết.

TARGET Mở trang Web được liên trong một cửa sổ

mới (_blank) hoặc trong cửa sổ hiện tại (_self), trong một frame (tên frame).

3.4.7 ĐỊA CHỈ TƯƠNG ĐỐI

URL được trình bày ở trên là URL tuyệt đối Ngoài ra còn có URL tương đối hay còn gọi làURL không đầy đủ Địa chỉ tương đối sử dụng sự khác biệt tương đối giữa văn bản hiện thời

và văn bản cần tham chiếu tới Các thành phần trong URL được ngăn cách bằng ký tự ngăncách (ký tự gạch chéo /) Để tạo ra URL tương đối, đầu tiên phải sử dụng ký tự ngăn cách.URL đầy đủ hiện tại sẽ được sử dụng để tạo nên URL đầy đủ mới Nguyên tắc là các thànhphần bên trái dấu ngăn cách của URL hiện tại được giữ nguyên, các thành phần bên phải đượcthay thế bằng thành phần URL tương đối Chú ý rằng trình duyệt không gửi URL tương đối,

nó bổ sung vào URL cơ sở đã xác định trước thành phần URL tương đối xác định sau thuộc

tính href= Ký tự đầu tiên sau dấu bằng sẽ xác định các thành phần nào của URL hiện tại sẽtham gia để tạo nên URL mới.

Ví dụ, nếu URL đầy đủ là: http://www.hugo.com.vn/HTML/index.htm thì:

• Dấu hai chấm ( : ) chỉ dịch vụ giữ nguyên nhưng thay đổi phần còn lại Ví dụ

://www.fpt.com/ sẽ tải trang chủ của máy phục vụ www.fpt.com với cùng dịch vụ http

• Dấu gạch chéo ( / ) chỉ dịch vụ và máy phục vụ giữ nguyên nhưng toàn bộ đường

dẫn thay đổi Ví dụ /Javascript/index.htm sẽ tải file index.htm của thư mục Javascript

trên máy phục vụ www.hugo.com.vn

• Không có dấu phân cách chỉ có tên file là thay đổi Ví dụ index1.htm sẽ tải file

index1.htm ở trong thư mục HTML của máy phục vụ hugo.com.vn

• Dấu thăng ( # ): chỉ dịch vụ, máy phuc vụ, đường dẫn và cả tên file giữ nguyên, chỉ

thay đổi vị trí trong file

Do đường dẫn được xem là đơn vị độc lập nên có thể sử dụng phương pháp đường dẫn tươngđối như trong UNIX hay MS-DOS (tức là . chỉ thư mục hiện tại còn chỉ thư mục cha củathư mục hiện tại)

URL cơ sở có thể được xác định bằng thẻ <BASE>

3.4.8 KẾT NỐI MAILTO

Nếu đặt thuộc tính href= của thẻ <a> giá trị mailto:address@domain thì khi kích hoạt kết nối

sẽ kích hoạt chức năng thư điện tử của trình duyệt

WIDTH = width

>

Ý nghĩa các tham số:

ALIGN Căn lề (căn trái, căn phải, căn giữa)

COLOR Đặt màu cho đường thẳng

NOSHADE Không có bóng

WIDTH Chiều dài (tính theo pixel hoặc % của bề rộng cửa sổ

Image/GIF gif Viết tắt của Graphics Interchange Format Khuôn

dạng này xuất hiện khi mọi người có nhu cầu trao đổi ảnh trên nhiều hệ thống khác nhau Nó được sử dụng trên tất cả các hệ thống hỗ trợ giao diện đồ hoạ Định dạng GIF là định dạng chuẩn cho mọi trình duyệt WEB Nhược điểm của nó là chỉ thể hiện được 256 màu.

Mở rộng của chuẩn này là GIF89, được thêm nhiều chức năng cho các ứng dụng đặc biệt như làm ảnh nền trong suốt - tức là ảnh có thể nổi bằng cách làm màu nền giống với màu nền của trình duyệt.

Image/JPEG jpeg Viết tắt của Joint Photographic Expert Group Là

khuôn dạng ảnh khác nhưng có thêm khả năng nén.Ưu điểm nổi bật của khuôn dạng này là lưu trữ được hàng triệu màu và độ nén cao nên kích thước file ảnh nhỏ hơn và thời gian download nhanh hơn.

Nó là cơ sở cho khuôn dạng MPEG Tất cả các trình duyệt đều có khả năng xem ảnh JPEG

Image/TIFF tiff Viết tắt của Tagged Image File Format Được

Microsoft thiết kế để quét ảnh từ máy quét cũng như tạo các ấn phẩm.

Text/HTML HTML, htm

PostScript eps, ps Được tạo ra để hiển thị và in các văn bản có chất

lượng cao.

Adobe Acrobat pdf Viết tắt của Portable Document Format Acrobat cũng

sử dụng các siêu liên kết ngay trong văn bản cũng

giống như HTML Từ phiên bản 2.0, các sản phẩm

của Acrobat cho phép liên kết giữa nhiều văn bản Ưu điểm lớn nhất của nó là khả năng WYSISYG.

Video/MPEG mpeg Viết tắt của Motion Picture Expert Group, là định dạng

dành cho các loại phim (video) Đây là khuôn dạng thông dụng nhất dành cho phim trên WEB.

Video/AVI avi Là khuôn dnạg phim do Microsoft đưa ra.

Video/QuickTime mov Do Apple Computer đưa ra, chuẩn video này được

cho là có nhiều ưu điểm hơn MPEG và AVI Mặc dù

đã được tích hợp vào nhiều trình duyệt nhưng vẫn chưa phổ biến bằng hai loại định dạng trên.

Sound/AU au

Sound/MIDI mid Là khuôn dạng dành cho âm nhạc điện tử hết sức

thông dụng được nhiều trình duyệt trên các hệ thống khác nhau hỗ trợ File Midi được tổng hợp số hoá trực tiếp từ máy tính.

Sound/RealAudio ram Định dạng audio theo dòng Một bất tiện khi sử dụng

các định dạng khác là file âm thanh thường có kích thước lớn - do vậy thời gian tải xuống lâu, Trái lại audio dòng bắt đầu chơi ngay khi tải được một phần file trong khi vẫn tải về các phần khác.Mặc dù file theo định dạng này không nhỏ hơn so với các định dạng khác song chính khả năng dòng đã khiến định dạng này phù hợp với khả năng chơi ngay lập tức.

VRML vrml Viết tắt của Virtual Reality Modeling Language Các

file theo định dạng này cũng giống như HTML Tuy

nhiên do trình duyệt có thể hiển thị được cửa sổ 3 chiều nên người xem có thể cảm nhận được cảm giác ba chiều.

3.5.2 ĐƯA ÂM THANH VÀO MỘT TÀI LIỆU HTML

Cú pháp:

<BGSOUND

SRC = url LOOP = n

>

Thẻ này không có thẻ kết thúc tương ứng (</BGSOUND>) Để chơi lặp lại vô hạn cần chỉ

định LOOP = -1 hoặc LOOP = INFINITE Thẻ BGSOUND phải được đặt trong phần

mở đầu (tức là nằm trong cặp thẻ HEAD)

3.5.3 CHÈN MỘT HÌNH ẢNH, MỘT ĐOẠN VIDEO VÀO TÀI LIỆU HTML

Để chèn một file ảnh (.jpg, gif, bmp) hoặc video (.mpg, avi) vào tài liệu HTML, bạn có thể

ALIGN = TOP/ MIDDLE/

BOTTOM/ LEFT/ RIGHT

Căn hàng văn bản bao quanh ảnh

ALT = text Chỉ định văn bản sẽ được hiển thị nếu chức năng

show picture của browser bị tắt đi hay hiển thị thay thế cho ảnh trên những trình duyệt không có khả năng hiển thị đồ hoạ Văn bản này còn được gọi là nhãn của ảnh Đối với trình duyệt có khả năng hỗ trợ đồ hoạ, dòng văn bản này sẽ hiện lên khi di chuột qua ảnh hay được hiển thị trong vùng của ảnh nếu ảnh chưa được tải về hết Chú ý phải đặt văn bản trong hai dấu nháy kép nếu triong văn bản chứa dấu cách hay các ký tự đặc biệt - trong trường hợp ngược lại có thể bỏ dấu nháy kép.

BORDER = n Đặt kích thước đường viền được vẽ quanh ảnh

(tính theo pixel).

SRC = url Địa chỉ của file ảnh cần chèn vào tài liệu.

WIDTH/HEIGHT Chỉ định kích thước của ảnh được hiển thị.

HSPACE/VSPACE Chỉ định khoảng trống xung quanh hình ảnh (tính

theo pixel) theo bốn phía trên, dưới, trái, phải.

TITLE = title Văn bản sẽ hiển thị khi con chuột trỏ trên ảnh

DYNSRC = url Địa chỉ của file video.

START =

FILEOPEN/MOUSEOVER

Chỉ định file video sẽ được chơi khi tài liệu được

mở hay khi trỏ con chuột vào nó Có thể kết hợp

cả hai giá trị này nhưng phải phân cách chúng bởi dấu phẩy.

LOOP = n/INFINITE Chỉ định số lần chơi Nếu LOOP = INFINITE thì

file video sẽ được chơi vô hạn lần.

3.6 CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU

Sau đây là các thẻ tạo bảng chính:

<TABLE> </TABLE> Định nghĩa một bảng

<TR> </TR> Định nghĩa một hàng trong bảng

<TD> </TD> Định nghĩa một ô trong hàng

<TH> </TH> Định nghĩa ô chứa tiêu đề của cột

<CAPTION> </CAPTION> Tiêu đề của bảng

ALIGN = LEFT / CENTER / RIGHT

VALIGN = TOP / MIDDLE / BOTTOM

Ý nghĩa các tham số:

ALIGN / VALIGN Căn lề cho bảng và nội dung trong mỗi ô.

BORDER Kích thước đường kẻ chia ô trong bảng, được đo

theo pixel Giá trị 0 có nghĩa là không xác định lề, giữa các ô trong bảng chỉ có một khoảng trắng nhỏ

để phân biệt Nếu chỉ để border thì ngầm định border=1 Với những bảng có cấu trúc phức tạp, nên đặt lề để người xem có thể phân biệt rõ các dòng và cột.

BORDERCOLOR Màu đường kẻ

BORDERCOLORDARK

BORDERCOLORLIGHT

Màu phía tối và phía sáng cho đường kẻ nổi.

BACKGROUND Địa chỉ tới tập ảnh dùng làm nền cho bảng

BGCOLOR Màu nền

CELLSPACING Khoảng cách giữa các ô trong bảng

CELLPADDING Khoảng cách giữa nội dung và đường kẻ trong mỗi ô

của bảng.

COLSPAN Chỉ định ô sẽ kéo dài trong bao nhiêu cột

ROWSPAN Chỉ định ô sẽ kéo dài trong bao nhiêu hàng

BÀI THỰC HÀNH CHƯƠNG 3

Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ Hãy thực hiện theo các bước dưới đây một cách cẩn thận.

1 Tạo thư mục HTML-Examples trong ổ đĩa D:\ và lưu tất cả các file htm chỉ trong thư mục này.

(Nếu không có đĩa D, hãy tạo trong ổ đĩa C:\)

2. Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”.

3 Gõ đoạn mã vào tài liệu

4 Kích vào File chọn Save As

5 Lưu file với đuôi htm trong thư mục D:\HTML-Examples.

6 Chạy Internet Explorer.

7 Kích vào File → Open, chọn Browse và chọn file từ thư mục D:\HTML-Examples

BÀI TẬP 1

1/ Tạo trang web Headings.htm (sử dụng Tag Hn, từ Heading1 đến Heading6)

2/ Tạo trang web HeadingCenter.htm (Phối hợp các Tag)

3/ Tạo trang web Alignment.htm (Phối hợp các Tag)

4/ Tạo trang web Emphasis.htm

6/

3/ Sử dụng các tag đã học để tạo 1 trang Web cho riêng bạn (MySite.htm)

Nội dung: Tự giới thiệu và Các trang Web ưa thích (tạo các HyperLink)

4/ Tạo trang Web sau (InternalLink)

http://www.google.com for Googlehttp://www.altavista.com for Altavistahttp://www.Yahoo.com for Yahoo

BÀI TẬP 3 (Image)

1/ Image1.htm

2/ Image2.htm

Hướng dẫn: thêm vào dòng lệnh

<body background = images/background.gif>

4/ Horizontal.htm

5/