Giáo án - Bài giảng: Công nghệ thông tin: Làm thế nào để trở thành lập trình viên Website chuyên nghiệp? (tài liệu)

THIEÁT KEÁ WEB
THIEÁT KEÁ WEBTHIEÁT KEÁ WEB
THIEÁT KEÁ WEB

Lưu hành nội bộ

2010
Tài liệu tham khảo Môn Thiết kế Web
Trang 2
MỤC LỤC
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
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.1.1 HTML 19
3.1.2 HEAD 19
3.1.3 TITLE 19
3.1.4 BODY 19
3.2 CÁC THẺ ĐỊNH DẠNG KHỐI 20
3.2.1 THẺ P 20
3.2.2 CÁC THẺ ĐỊNH DẠNG ĐỀ MỤC H1/H2/H3/H4/H5/H6 20
3.2.3 THẺ XUỐNG DÒNG BR 21
3.2.4 THẺ PRE 21
3.3 CÁC THẺ ĐỊNH DẠNG DANH SÁCH 21
3.3.1 DANH SÁCH THÔNG THƯỜNG 21
3.4 CÁC THẺ ĐỊNH DẠNG KÝ TỰ 22

3.4.1 CÁC THẺ ĐỊNH DẠNG IN KÝ TỰ 22
3.4.2 CĂN LỀ VĂN BẢN TRONG TRANG WEB 23
3.4.3 CÁC KÝ TỰ ĐẶC BIỆT 24
3.4.4 SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ CÁC TRANG WEB 24
3.4.5 CHỌN KIỂU CHỮ CHO VĂN BẢN 26
3.4.6 KHÁI NIỆM VĂN BẢN SIÊU LIÊN KẾT 26
3.4.7 ĐỊA CHỈ TƯƠNG ĐỐI 27
3.4.8 KẾT NỐI MAILTO 28
3.4.9 VẼ MỘT ĐƯỜNG THẲNG NẰM NGANG 28
3.5 CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH 29
3.5.1 GIỚI THIỆU 29
3.5.2 ĐƯA ÂM THANH VÀO MỘT TÀI LIỆU HTML 30
3.5.3 CHÈN MỘT HÌNH ẢNH, MỘT ĐOẠN VIDEO VÀO TÀI LIỆU HTML 30
3.6 CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU 31
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
Tài liệu tham khảo Môn Thiết kế Web
Trang 3
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 60
4.2.6 Thuộc tính Background trong CSS 60
4.2.7 Thuộc tính Margin trong CSS 61
BÀI THỰC HÀNH CHƯƠNG 4 62
CHƯƠNG 5. THIẾT KẾ WEB DÙNG FORM VÀ JAVASCRIPT 69
5.1 HTML FORM 70
5.1.1 TẠO FORM 70
5.1.2 TẠO MỘT DANH SÁCH LỰA CHỌN 70
5.1.3 TẠO HỘP SOẠN THẢO VĂN BẢN 71
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
BÀI THỰC HÀNH CHƯƠNG 5 75
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 97
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
6.7 FRAMESET 109
6.8 CASCADE STYLE SHEET- TEMPLATE 111
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

Tài liệu tham khảo Môn Thiết kế Web
Trang 4

CH
CHCH
CHÖÔ
ÖÔÖÔ
ÖÔNG
NGNG
NG 1
1 1
1
KHÁI QUÁT CHUNG VỀ INTERNET
Tóm tắt

Mục tiêu Các mục chính
Bài tập
bắt buộc
Bài tập
làm thêm
Kết thúc bài học này
cung cấp học viên kiến
thức về mạng Internet …

- Khái niệm mạng Internet
- Các dịch vụ cơ bản : www, ftp,
email,…

Tài liệu tham khảo Môn Thiết kế Web
Trang 5
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ức
TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất cả các
má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ốc
gia 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ùng
trê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ài
nguyên trên Web. URL được sử dụng để nhận dạng các trang và các tài nguyên trên
Web.
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ác
phầ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ác
yê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ình

duyệt định dạng thông tin do máy chủ gửi về và hiển thi chúng.

Tài liệu tham khảo Môn Thiết kế Web
Trang 6


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
Tài liệu tham khảo Môn Thiết kế Web
Trang 7

CHÖÔ
CHÖÔCHÖÔ
CHÖÔNG
NG NG
NG 2
22
2


CÁC BƯỚC THIẾT KẾ WEB

Tóm tắt

Mục tiêu Các mục chính
Bài tập
bắt buộc
Bài tập
làm thêm
Kết thúc bài học này
cung cấp học viên kiến
thức về các bước khi
thiết kế một Website …

2.1 Mục tiêu của website
cần thiết kế
2.2 Chiến lược thiết kế
2.3 Thiết kế giao diện
Dựa vào bài tập
trong phần cuối
Chương 2.
Dựa vào bài tập
trong phần cuối
Chương 2.

Tài liệu tham khảo Môn Thiết kế Web
Trang 8

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ột
website 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ăng
củ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ịch
quả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ện
như 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ạn
muố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 cho
mọ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ếm
mộ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ông
thườ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ởi
hầ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ó đã được

hoà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ào
bạ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ữa
cho 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ách
cho bạn.
Tài liệu tham khảo Môn Thiết kế Web
Trang 9

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 cho
cô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 website
hiệ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ững
ngườ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êu
chí 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ũng
khiế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ên
nghiệ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ười
dù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ại
hì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ân
rằ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ủa

website 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 dung
website. 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 truy
cậ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ều
hơ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ên
website. 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

Tài liệu tham khảo Môn Thiết kế Web
Trang 10
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 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. Đã mấy lần bạn ngồi
trướ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ưa
là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ạn
chư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ết

nà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àm
thiế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ủa
họ?
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ế được
mộ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ả định
rằ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ạo
mộ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ảm
hứ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ệc
tì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ác
thiế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ên
máy tính. Các trang gallery thường để hình ảnh thu nhỏ và thường không có mấy tác
dụ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ại
nhữ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ệc
dạ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ạn
cầ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ều
Tài liệu tham khảo Môn Thiết kế Web

Trang 11
thiế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ột
trang 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ệc
ngồ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ững
thiế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ều
khô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ôm
sau 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ảm
thấ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ói
quen 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 quen
nê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ảm
hứ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 web
quá đẹ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 ảnh
hưở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 web
của mình
Tài liệu tham khảo Môn Thiết kế Web
Trang 12

• 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 cho
trang 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áy
trong 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ân
tá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ạn
nghĩ 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ông
gian, 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ụng
hình ảnh cụ thể gì, màu sắc cụ thể cho tiêu đề của bài viết,…

Tài liệu tham khảo Môn Thiết kế Web
Trang 13

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ủa
trang 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ủa
bà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 trang

web 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ài
nổ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 định
như 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 vector
hay 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êng
bạ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ài
kinh nghiệm trong việc bắt đầu xây dựng mẫu (”prototype”) cho thiết kế của mình.

Tài liệu tham khảo Môn Thiết kế Web
Trang 14
Xây dựng khung nội dung (Phần 2)

Nhắc lại
Trước khi bắt đầu, sẽ không là thừa để nhắc lại những gì chúng ta đã có được từ những bước
trước đó.
Cảm hứng
Ở bước 1 - sau khi xem những thiết kế của người khác, bạn đã bắt đầu có được cái “hứng” để
xây dựng một trang web cho riêng mình. Một lần nữa không thể không nhắc lại tầm quan

trọng của “cảm hứng”. “Cảm hứng” không thể tự nhiên xuất hiện chỉ vì bạn xác định rằng
mình cần có một trang web riêng, mặc dù đó chính là lý do khiến bạn đi tìm cảm hứng.
Không giống như trong các lĩnh vực nghệ thuật khác bạn vốn không biết được khi nào thì cảm
hứng sẽ đến với mình, trong thiết kế bạn hoàn toàn có thể thực hiện quá trình gọi là “đi tìm
cảm hứng” mà tôi đã mô tả ở trên.
“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ắt
tay 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ó được
cá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ậm
chí đô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ều
quan 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ốn
thiế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ình
khá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à trang
AllWomenTalks 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âm
hồ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
Tài liệu tham khảo Môn Thiết kế Web
Trang 15
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ếu
nhì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ường
gọ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ạn
lờ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ông
cầ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ải
quan 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ủa
trang 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ình
phâ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ái
cá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ợp
vớ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ội
dung 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.
Tài liệu tham khảo Môn Thiết kế Web
Trang 16

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ới
cá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ế trang
web 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ẽ ảnh
hưở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ẽ được
hì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ện
thì 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 khi
lự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ủa
bạ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ột
trong 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ộng
cho 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 danh
mụ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.

Tài liệu tham khảo Môn Thiết kế Web
Trang 17
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 đưa
tiê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ững
trang 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ật
nhanh để 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ực
hiệ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ên
bả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ạn
biể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ác
cao 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ực

hiệ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àm
việ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ậy
bạ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ọng
trong 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ững
bạ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 trong
bướ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 (web
hay ứ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.




BAØI THÖÏC HAØNH CHÖÔNG 2
BAØI THÖÏC HAØNH CHÖÔNG 2BAØI THÖÏC HAØNH CHÖÔNG 2
BAØI THÖÏC HAØ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.

Tài liệu tham khảo Môn Thiết kế Web
Trang 18

CHÖÔ
CHÖÔCHÖÔ
CHÖÔNG
NG NG
NG 3
33
3


HTML CĂN BẢN

Tóm tắt

Mục tiêu Các mục chính
Bài tập
bắt buộc
Bài tập
làm thêm
Kết thúc bài học này cung
cấp học viên kiến thức về
các thẻ HTML căn bản
trong việc thiết kế giao
diện Web …

3.1 Các thẻ định dạng cấu trúc dữ liệu

3.2 Các thẻ định dạng khối
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

Tài liệu tham khảo Môn Thiết kế Web
Trang 19
<HTML>
Toàn bộ nội của tài liệu được đặt ở đây
</HTML>
<TITLE>Tiêu đề của tài liệu</TITLE>
<BODY>
phần nội dung của tài liệu được đặt ở đây
</BODY>
3.1 CÁC THẺ ĐỊNH DẠNG CẤU TRÚC DỮ LIỆU
3.1.1 HTML
Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng các
thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.
Cú pháp:



Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <HTML> như những tập tin văn bản bình
thường.
3.1.2 HEAD
Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.
Cú pháp:
3.1.3 TITLE
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ

phạm vi giới hạn bởi cặp thẻ <HEAD>.
Cú pháp:


3.1.4 BODY
Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body) của tài
liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài
liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu Những thông tin này được
đặt ở phần tham số của thẻ.
Cú pháp:

Trên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều
thuộc tính được sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính:
<HEAD>
Phần mở đầu (HEADER) của tài liệu được đặt ở đây
</HEAD>

Tài liệu tham khảo Môn Thiết kế Web
Trang 20
<HTML>
<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
hoạt;
Như vậy một tài liệu HTML cơ bản có cấu trúc như sau:


3.2 CÁC THẺ ĐỊNH DẠNG KHỐI
3.2.1 THẺ P
Thẻ <P> được sử dụng để định dạng một đoạn văn bản.
Cú pháp:
3.2.2 CÁC THẺ ĐỊNH DẠNG ĐỀ MỤC H1/H2/H3/H4/H5/H6
HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic,
tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình duyệt
này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là
cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có
kích thước nhỏ hơn văn bản thông thường.
<P>Nội dung đoạn văn bản</P>

Tài liệu tham khảo Môn Thiết kế Web
Trang 21

Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:
<H1> </H1> Định dạng đề mục cấp 1
<H2> </H2> Định dạng đề mục cấp 2
<H3> </H3> Định dạng đề mục cấp 3
<H4> </H4> Định dạng đề mục cấp 4
<H5> </H5> Định dạng đề mục cấp 5
<H6> </H6> Định dạng đề mục cấp 6
3.2.3 THẺ XUỐNG DÒNG BR
Thẻ này không có thẻ kết thúc tương ứng (</BR>), nó có tác dụng chuyển sang dòng mới.
Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, các
khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng trắng.
Để 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ống
dò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ình
duyệt sẽ không coi chúng như dấu cách)
Cú pháp:

3.3 CÁC THẺ ĐỊNH DẠNG DANH SÁCH
3.3.1 DANH SÁCH THÔNG THƯỜNG
Cú pháp:
Có 4 kiểu danh sá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>
Tài liệu tham khảo Môn Thiết kế Web
Trang 22
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).

3.4 CÁC THẺ ĐỊNH DẠNG KÝ TỰ
3.4.1 CÁC THẺ ĐỊNH DẠNG IN KÝ TỰ
Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch
chân cho các ký tự, văn bản khi được thể hiện trên trình duyệt.

<B> </B>
<STRONG> </STRONG>
In chữ đậm
<I> </I>
<EM> </EM>
In chữ nghiêng
<U> </U>

In chữ gạch chân
<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>

Tài liệu tham khảo Môn Thiết kế Web
Trang 23
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>

Tài liệu tham khảo Môn Thiết kế Web
Trang 24
3.4.3 CÁC KÝ TỰ ĐẶC BIỆT
Ký tự & được sử dụng để chỉ chuỗi ký tự đi sau được xem là một thực thể duy nhất. Ký tự ;
được sử dụng để tách các ký tự trong một từ.

Ký tự Mã ASCII Tên chuỗi
< &#060 &lt
> &#062 &gt
& &#038 &amp
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 khi
vớ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:

Màu sắc Giá trị Tên tiếng Anh
Đỏ
Đỏ sẫm

Xanh lá cây
Xanh nhạt
Xanh nước biển
Vàng
Vàng nhạt
Trắng
Đen
Xám
Nâu
#FF0000
#8B0000
#00FF00
#90EE90
#0000FF
#FFFF00
#FFFFE0
#FFFFFF
#000000
#808080
#A52A2A
RED
DARKRED
GREEN
LIGHTGREEN
BLUE
YELLOW
LIGHTYELLOW
WHITE
BLACK
GRAY

BROWN
Tài liệu tham khảo Môn Thiết kế Web
Trang 25
Tím
Tím nhạt
Hồng
Da cam
Màu đồng phục hải quân

#FF00FF
#EE82EE
#FFC0CB
#FFA500
#000080
#4169E1
#7FFFD4
MAGENTA
VIOLET
PINK
ORANGE
NAVY
ROYALBLUE
AQUAMARINE

Cú pháp:

<BODY
LINK = color
ALINK = color
VLINK = color

BACKGROUND = url
BGCOLOR = color
TEXT = color
TOPMARGIN = pixels
RIGHTMARGIN = pixels
LEFTMARGIN = pixels
>
phần nội dung của tài liệu được đặt ở đây

</BODY>

Sau đây là ý nghĩa các tham số của thẻ BODY:

Các tham số ý nghĩa
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