Giáo trình Thiết kế web (Nghề: Công nghệ thông tin - Cao đẳng) - Trường Cao đẳng Cộng đồng Đồng Tháp

ỦY BAN NHÂN DÂN TỈNH ĐỒNG THÁP
TRƯỜNG CAO ĐẲNG CỘNG ĐỒNG ĐỒNG THÁP

GIÁO TRÌNH
MƠN HỌC: THIẾT KẾ WEB
NGÀNH, NGHỀ: CƠNG NGHỆ THƠNG TIN
TRÌNH ĐỘ: CAO ĐẲNG
(Ban hành kèm theo Quyết định số
/QĐ-CĐCĐ ngày tháng
năm 20…
của Hiệu trưởng trường Cao đẳng Cộng đồng Đồng Tháp)

Đồng Tháp, năm 2017


TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thơng tin có thể được phép
dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh
thiếu lành mạnh sẽ bị nghiêm cấm.

i


LỜI NÓI ĐẦU
Các ứng dụng web đã và đang ảnh hƣởng trực tiếp đến các hoạt động và thói quen sinh
hoạt hàng ngày của mỗi ngƣời, từ sinh viên, ngƣời nội trợ cho đến giới văn phòng và
doanh nhân.
Lợi nhuận cao thu đƣợc từ việc kinh doanh các ứng dụng web đã thu hút các công ty
phần mềm chuyển hƣớng sang lĩnh vực này. Điều này mở ra nhiều cơ hội việc làm cho
những ai thực sự quan tâm và yêu thích lĩnh vực thiết kế web.

Bài giảng bao gồm các chƣơng sau:
 Chƣơng 1: GIỚI THIỆU INTERNET
 Chƣơng 2: CÁC BƢỚC THIẾT KẾ WEBSITE
 Chƣơng 3: HTML
 Chƣơng 4: CSS VÀ JAVASRIPT
 Chƣơng 5: ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE
Cuối cùng, xin gửi lời cảm ơn chân thành nhất đến chúng ta bè, đồng nghiệp đã có
những ý kiến đóng góp sâu sắc cho bài giảng này. Mọi ý kiến đóng góp xin vui lịng
gửi đến địa chỉ mail: . Xin chân thành cảm ơn!
Đồng Tháp, ngày 09 tháng 04 năm 2015
Tác giả

Phan Quốc Cƣờng

Trang i


MỤC LỤC
LỜI NĨI ĐẦU ..................................................................................................................i
MỤC LỤC ........................................................................................................................ii
DANH MỤC CÁC HÌNH ...............................................................................................iv
Chƣơng 1 .......................................................................................................................... 1
GIỚI THIỆU INTERNET ................................................................................................ 1
1.1

Giới thiệu những khái niệm............................................................................... 1

1.1.1 Khái niệm về Internet ...................................................................................... 1
1.1.2 Khái niệm về World Wide Web ...................................................................... 2
1.2

Thuật ngữ Internet ............................................................................................. 3

1.2.1 Webpage .......................................................................................................... 3
1.2.2 Website ............................................................................................................ 3
1.2.3 Homepage - Trang chủ .................................................................................... 3
1.2.4 Website tĩnh..................................................................................................... 3
1.2.5 Website động ................................................................................................... 3
1.2.6 Tên miền .......................................................................................................... 4
1.2.7 Máy chủ ........................................................................................................... 4
1.2.8 URL ................................................................................................................. 4
1.2.9 Trình duyệt web .............................................................................................. 4
CÂU HỎI ƠN TẬP CHƢƠNG 1..................................................................................... 6
Chƣơng 2 .......................................................................................................................... 7
CÁC BƢỚC THIẾT KẾ WEBSITE ................................................................................ 7
2.1

Mục đích của website cần thiết kế .................................................................... 7

2.2

Chiến lƣợc thiết kế ............................................................................................ 8

2.3

Thiết kế giao diện .............................................................................................. 9

CÂU HỎI ÔN TẬP CHƢƠNG 2................................................................................... 15
Chƣơng 3 ........................................................................................................................ 16
HTML............................................................................................................................. 16

Trang ii


3.1

Giới thiệu HTML ............................................................................................ 16

3.2

Trình soạn thảo HTML.................................................................................... 19

3.3

Các thuộc tính trong HTML (HTML Attributes) ............................................ 22

3.4

HTML Headings.............................................................................................. 25

3.5

HTML Paragraphs ........................................................................................... 26

3.6

Các thẻ định dạng ............................................................................................ 28

3.6.1 HTML Style .................................................................................................. 28
3.6.2 HTML Formatting ......................................................................................... 32

3.7

HTML Comments ........................................................................................... 37

3.8

HTML Links.................................................................................................... 38

3.9

HTML Images ................................................................................................. 41

3.10

HTML Tables .................................................................................................. 43

3.11

HTML Lists ..................................................................................................... 45

3.12

Thẻ <div> ........................................................................................................ 49

3.13

HTML Iframes ................................................................................................ 50

3.14

HTML Forms .................................................................................................. 51

CÂU HỎI ÔN TẬP CHƢƠNG 3................................................................................... 56
Chƣơng 4 ........................................................................................................................ 76
CSS VÀ JAVASCRIPT ................................................................................................. 76
4.1

Giới thiệu CSS ................................................................................................. 76

4.2

Một số đặc tính cơ bản của CSS...................................................................... 79

4.3

Giới thiệu ngôn ngữ JavaScript ....................................................................... 90

CÂU HỎI ÔN TẬP CHƢƠNG 4................................................................................... 95
Chƣơng 5 ...................................................................................................................... 107
ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE ....................................................................... 107
5.1 Đăng ký tên miền (domain) miễn phí ............................................................... 107
5.1.1 Tên miền tiếng việt ....................................................................................... 107
5.1.2 Tên miền miễn phí .TK ................................................................................. 108

Trang iii


5.1.3 Tên miền miễn phí uni.me ............................................................................ 109
5.1.4 Tên miền VN.EE ........................................................................................... 110
5.2 Đăng ký host miễn phí ...................................................................................... 111

5.2.1 Đăng ký host miễn phí với freeservers ......................................................... 111
5.2.2 Đăng ký host miễn phí với Hostinger ........................................................... 114
CÂU HỎI ƠN TẬP CHƢƠNG 5................................................................................. 117
TÀI LIỆU THAM KHẢO ............................................................................................ 118

DANH MỤC CÁC HÌNH

Trang iv


Hình 1 – Mơ hình Internet ................................................................................................ 2
Hình 2 – Bố cục website ................................................................................................ 13
Hình 3 – Độ phân giải màn hình .................................................................................... 14
Hình 4 – Soạn thảo HTML trong Notepad .................................................................... 20
Hình 5 – Đặt tên và chọn kiểu mã hóa cho tập tin HTML trong Notepad..................... 21
Hình 6 – Kết quả hiển thị trên trình duyệt Google Chrome ........................................... 22
Hình 7 – Tra cứu tên miền tiếng Việt .......................................................................... 107
Hình 8 – Tên miền miễn phí .TK ................................................................................. 108
Hình 9 – Đăng ký tên miền .TK ................................................................................... 109
Hình 10 – Trang uni.me ............................................................................................... 109
Hình 11 – Đăng ký tài khoản tại uni.me ...................................................................... 110
Hình 12 – Tên miền VN.EE ......................................................................................... 111
Hình 13 – Website freeservers ..................................................................................... 111
Hình 14 – Chọn gói cƣớc miễn phí .............................................................................. 112
Hình 15 – Đăng ký thơng tin trên freeservers .............................................................. 113
Hình 16 – Freeserver cung cấp một số lựa chọn xây dựng website ............................. 113
Hình 17 – Đăng ký tài khoản tại Hostinger ................................................................. 114
Hình 18 – Gói hosting miễn phí ................................................................................... 114
Hình 19 – Chọn gói hosting miễn phí của Hostinger ................................................... 115
Hình 20 – Form đăng ký tên miền trên Hostinger ....................................................... 116

Trang v


Chƣơng 1
GIỚI THIỆU INTERNET
MỤC ĐÍCH
Cung cấp những kiến thức tổng quát về Internet, giúp sinh viên hiểu đƣợc các khái
niệm và thuật ngữ về Internet.
Nhiệm vụ tự học và tài liệu tham khảo của sinh viên trong chƣơng 1
Để đạt đƣợc mục đích đề ra trong chƣơng 1, sinh viên phải thực hiện tốt các yêu cầu
sau đây:
 Phải đọc trƣớc nội dung Chƣơng 1 trong quyển bài giảng này trƣớc khi lên lớp
1.1 Giới thiệu những khái niệm
1.1.1 Khái niệm về Internet
Internet là một tập hợp của các máy tính đƣợc liên kết nối lại với nhau thơng qua hệ
thống dây cáp mạng và đƣờng điện thoại trên toàn thế giới với mục đích trao đổi, chia
sẻ dữ liệu và thông tin. Bất cứ nguời nào trên hệ thống cũng có thể tiếp cận và xem
thơng tin từ bất cứ một máy tính nào trên hệ thống này hay hệ thống khác.
Trƣớc đây mạng Internet đƣợc sử dụng chủ yếu ở các tổ chức chính phủ và trong các
trƣờng học. Ngày nay mạng Internet đã đƣợc sử dụng bởi hàng tỷ ngƣời bao gồm cả cá
nhân các doanh nghiệp lớn, nhỏ, các trƣờng học và tất nhiên là nhà nƣớc và các tổ chức
chính phủ. Phần chủ yếu nhất của mạng Internet là World Wide Web.
Mạng Internet là của chung điều đó có nghĩa là khơng ai thực sự sở hữu nó với tƣ cách
cá nhân. Mỗi phần nhỏ của mạng đƣợc quản lý bởi các tổ chức khác nhau nhƣng không
ai không một thực thể nào cũng nhƣ khơng một trung tâm máy tính nào nắm quyền
điều khiển mạng. Mỗi phần của mạng đƣợc liên kết với nhau theo một cách thức nhằm
tạo nên một mạng toàn cầu.

Trang 1

Internet là một mạng toàn cầu bao gồm nhiều mạng LAN (Local Area Network), MAN
(Metropolitan Area Network) và WAN (Wide Area Network) trên thế giới kết nối với
nhau. Mỗi mạng thành viên này đƣợc kết nối vào Internet thông qua một router.

Hình 1 – Mơ hình Internet

1.1.2 Khái niệm về World Wide Web
Word Wide Web đƣợc gọi tắt là Web - là mạng lƣới nguồn thông tin cho phép mọi
ngƣời khai thác thông tin qua một số công cụ hoặc là chƣơng trình hoạt động dƣới các
giao thức mạng. World Wide Web là một trong số các dịch vụ của Internet nhằm giúp
cho việc trao đổi thông tin trở nên thuận tiện và dễ dàng.
Sở dĩ Web trở nên phổ biến vì Web cung cấp cho ngƣời sử dụng khả năng truy cập dễ
dàng từ đó ngƣời sử dụng có thể khai thác các thông tin đa dạng trên Internet bao gồm
phần, hình ảnh thậm chí cả âm thanh và video nghĩa là những gì mà chúng ta có thể
cảm nhận đƣợc, vì thế Web đơi khi cịn đƣợc gọi là đa phƣơng tiện của mạng Internet.
Thông tin đƣợc biểu diễn bằng “website” mà chúng ta có thể nhìn thấy trên màn hình
máy tính. Mọi thơng tin đều có thể hiển thị trên website đó, kể cả âm thanh, hình ảnh
động, nhƣng vấn đề lý thú nhất của Web nằm ở khía cạnh khác, đó là website mà
chúng ta nhìn thấy trên màn hình máy tính có khả năng liên kết với những website
khác, dẫn chúng ta đến những nguồn thông tin khác.

Trang 2


Khả năng này của Web có đƣợc là nhờ thơng qua các “siêu liên kết” (hyperlink), siêu
liên kết về bản chất là địa chỉ trỏ tới nguồn thông tin (website) nằm đâu đó trên
Internet. Bằng những siêu liên kết này, các website có thể liên kết với nhau thành một
mạng chằng chịt, trang này trỏ tới trang khác, cho phép mọi ngƣời chu du trên biển cả

thông tin.
1.2 Thuật ngữ Internet
1.2.1 Webpage
Webpage là một website, tức một tập tin có đi .htm hay .html. Đó là một tập tin viết
bằng mã code HTML chứa các siêu liên kết (hyperlink) đến các trang khác. Trên
website ngồi thành phần chữ nó cịn có thể chứa các thành phần khác nhƣ hình ảnh,
nhạc, video...
1.2.2 Website
Website là tập hợp những website liên kết với nhau bằng các siêu liên kết. Website
đƣợc đƣa vào mạng Internet để hoà cùng các website khác, mọi ngƣời trên khắp thế
giới đều có thể truy cập đƣợc vào website để lấy thông tin.
1.2.3 Homepage - Trang chủ
Homepage - Trang chủ, là trang đầu tiên xuất hiện khi website đƣợc truy cập. Trang
chủ thƣờng chứa các thông tin căn bản nhất của website và các liên kết đến các trang
chuyên đề. Trang chủ có thể có các tên nhƣ index.htm, default.htm.
1.2.4 Website tĩnh
Web tĩnh là website chỉ đơn thuần mô tả thông tin và thông tin này không thƣờng
xuyên đƣợc cập nhật hoặc thay đổi nội dung theo thời gian.
1.2.5 Website động
Web động là website có các đƣờng liên kết đến cơ sở dữ liệu Database. Khi chọn một
liên kết, một thành phần trong cơ sở dữ liệu sẽ xuất hiện nhƣ thể có một website mới.

Trang 3


1.2.6 Tên miền
Mục đích chính của tên miền là để cung cấp một hình thức đại diện, hay nói cách khác,
dùng những tên dễ nhận biết, thay cho những tài nguyên Internet mà đa số đƣợc đánh
địa chỉ bằng số. Cách nhìn trừu tƣợng này cho phép bất kỳ tài nguyên nào (ở đây
là website) đều có thể đƣợc di chuyển đến một địa chỉ vật lý khác trong cấu trúc liên

kết địa chỉ mạng, có thể là tồn cầu hoặc chỉ cục bộ trong một mạng intranet, mà trên
thực tế là đang làm thay đổi địa chỉ IP. Việc dịch từ tên miền sang địa chỉ IP (và ngƣợc
lại) do hệ thống DNS trên toàn cầu thực hiện.
Với việc cho phép sử dụng địa chỉ dạng chữ cái không trùng nhau thay cho dãy số, tên
miền cho phép ngƣời dùng Internet dễ tìm kiếm, liên lạc với các website và bất kỳ dịch
vụ liên lạc dựa trên IP nào khác. Tính uyển chuyển của hệ thống tên miền cho phép
nhiều địa chỉ IP có thể đƣợc gán vào một tên miền, hoặc nhiều tên miền đều cùng chỉ
đến một địa chỉ IP. Điều này có nghĩa là một máy chủ có thể có nhiều vai trị (nhƣ lƣu
trữ nhiều website độc lập) hoặc cùng một vai trị có thể đƣợc trải ra trên nhiều máy
chủ.
1.2.7 Máy chủ
Máy chủ, máy phục vụ hay hệ thống cuối là một máy tính đƣợc nối mạng, có IP tĩnh,
có năng lực xử lý cao và trên máy đó ngƣời ta cài đặt các phần mềm để phục vụ cho
các máy tính khác (máy trạm) truy cập để yêu cầu cung cấp các dịch vụ và tài nguyên.
1.2.8 URL
URL, viết tắt của Uniform Resource Locator, đƣợc dùng để tham chiếu tới tài nguyên
trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên
khác nhau đƣợc tham chiếu tới bằng địa chỉ, chính là URL, cịn đƣợc gọi là địa chỉ web
hay là liên kết mạng (hay ngắn gọn là liên kết).
1.2.9 Trình duyệt web
Trình duyệt web là một phần mềm ứng dụng cho phép ngƣời sử dụng xem và tƣơng tác
với các phần, hình ảnh, đoạn phim, nhạc, trị chơi và các thơng tin khác ở trên một

Trang 4


website của một địa chỉ web trên mạng toàn cầu hoặc mạng nội bộ. Phần và hình ảnh
trên một website có thể chứa siêu liên kết tới các website khác của cùng một địa chỉ
web hoặc địa chỉ web khác.
Trình duyệt web cho phép ngƣời sử dụng truy cập các thơng tin trên các website một

cách nhanh chóng và dễ dàng thơng qua các liên kết đó. Trình duyệt web đọc định
dạng HTML để hiển thị, do vậy một website có thể hiển thị khác nhau trên các trình
duyệt khác nhau.

Trang 5


CÂU HỎI ƠN TẬP CHƢƠNG 1
1. Trình bày khái niệm về Internet?
2. Trình bày khái niệm về World Wide Web (www)?
3. Phân biệt Webpage và Website?
4. Tên miền là gì?
5. Phân biệt website tĩnh và website động?

Trang 6


Chƣơng 2
CÁC BƢỚC THIẾT KẾ WEBSITE
MỤC ĐÍCH
Giới thiệu các qui tắc và các bƣớc thiết kế một website, giúp sinh viên hiểu đƣợc qui
trình thiết kế một website nhƣ thế nào.
Nhiệm vụ tự học và tài liệu tham khảo của sinh viên trong chƣơng 2
Để đạt đƣợc mục đích đề ra trong chƣơng 2, sinh viên phải thực hiện tốt các yêu cầu
sau đây:
 Xem trƣớc đề cƣơng chi tiết của Chƣơng 2 để biết đƣợc mục đích, nội dung sẽ
đƣợc trình bày trong chƣơng này
2.1 Mục đích của website cần thiết kế
Việc xác định đƣợc mục đích trƣớc khi tiến hành thiết kế một website đóng vai trị rất
quan trọng đối với sự thành cơng của website đó. Phần bên dƣới sẽ trình bày các bƣớc

cho việc xác định mục đích của website cần thiết kế:
Bƣớc 1: Nội dung website của chúng ta là gì?
Đây là câu hỏi mà chúng ta cần phải dành thời gian suy nghĩ để có thể có đƣợc câu trả
lời rất rõ ràng. Bố cục và chức năng của website sẽ dễ thực hiện hơn khi chúng ta hiểu
tƣờng tận về nội dung website 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 website
Ở bƣớc này chúng ta cần đặt ra những câu hỏi: Ý tƣởng chính trên website của mình là
gì? Định dạng phù hợp nào mà chúng ta muốn sử dụng cho nội dung website của
mình? Chúng ta có thể tạo ra một website nhƣ thế nào để sẽ thu hút đƣợc ngƣời dùng
theo mong đợi của mình?

Trang 7


Ý tƣởng chính trên website của mình
là gì?

Định dạng phù hợp nào mà chúng ta
muốn sử dụng cho nội dung website
của mình?
Chúng ta có thể tạo ra một website
nhƣ thế nào để sẽ thu hút đƣợc ngƣời
dùng theo mong đợi của mình?

2.2 Chiến lƣợc thiết kế
Bất cứ điều gì chúng ta cố gắng để tiến hành thiết kế website thì mục tiêu chính vẫn là
có đƣợc lƣợng truy cập cao vào website mà mình xây dựng. Khi thiết kế một website
mới dù website đó lớn hay nhỏ thì điều quan trọng nhất là làm sao để mọi ngƣời luôn
trở lại với website của mình. 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. Những tiêu chí sau sẽ giúp của chúng ta
có đƣợc sự vƣợt trội trong rừng website hiện nay.
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ó q sặc sỡ thì
cũng khơng phải là hay. Việc tìm thấy một sự hài hồ tốt giữa chúng là chìa khố để có
bản thiết kế website hiệu quả. 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 website mà
chúng ta muốn hƣớng đến.

Trang 8


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 website của chúng ta. 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 website 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.
2.3 Thiết kế giao diện
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 chúng ta 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. Phần này sẽ giúp chúng ta 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 website thiết kế đẹp mà chúng ta 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ọ. 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 chúng ta đã biết về nó:
Bƣớc 1: Tìm nguồn cảm hứng
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ơ văn 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

Trang 9


một cách ngẫu nhiên và có phần may mắn, trong thiết kế, chúng ta có thể tự mình đi
tìm nguồn cảm hứng:


Hãy chụp và lƣu lại màn hình của các website mà chúng ta 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 chúng ta 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 chúng ta sự chi tiết mà
còn giúp chúng ta 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, chúng ta 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, chúng ta cần xác định rõ website mà mình sẽ thiết kế là thuộc phân mục
nào. Có rất nhiều 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 chúng ta. Ví dụ nhƣ phong cách thiết kế của một website 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 chúng ta 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ể).



Đừ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 chúng ta
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 có vẻ
giống nhƣ nhau - mặc dù nếu chúng ta xem nó ngay từ lúc đầu thì chúng ta lại thấy
nó đẹp. Vì vậy, sẽ là lý tƣởng nếu mỗi ngày chúng ta chỉ xem vài ba thiết kế và đó
là lý do tại sao chúng ta 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à chúng ta thích. Nếu chúng ta 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ì chúng ta nên dừng lại? Khi nào thì chúng ta 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à chúng ta bắt
gặp một website quá đẹp mà chúng ta chỉ muốn dừng lại và bắt tay ngay vào việc thiết

Trang 10


kế một website tƣơng tự. Nhƣng trừ khi chúng ta muốn sao chép nguyên si 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 chúng ta có thể làm nên thiết kế của riêng mình - mặc dù chúng ta 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
chúng ta. Vậy nên, lời khuyên của là hãy chỉ dừng lại khi:


Chúng ta đã có đƣợc ít nhất 10 - 20 thiết kế mà chúng ta cảm thấy đẹp và phù

hợp với website của mình



Có ít nhất một trang thiết kế mà nó khiến chúng ta chỉ muốn sao chép nguyên si
của nó về (dù rằng mục đích của chúng ta khơng phải là nhƣ vậy)

Khi đó, chúng ta 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ảm hứng để
quyết định sẽ thiết kế cho riêng mình một website, chúng ta sẽ cần phải định hình ý
tƣởng cho website của mình. Hãy ngồi duyệt lại những ảnh chụp website mà chúng ta
đã lƣu vào máy trong bƣớc 1, ghi chú xuống một mảnh giấy nhỏ những điểm mà chúng
ta thích về một thiết kế mà chúng ta nghĩ rằng mình muốn có trong thiết kế của mình.

Điều rất quan trọng là chúng ta hãy để ý đến ý tƣởng chứ không phải chi tiết của thiết
kế. Điều đó có nghĩa là chúng ta 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 chúng ta không nên sao
chép hình ảnh mà họ sử dụng. Những gì chúng ta 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ì chúng ta khơng nên để ý: website đó sử dụng hình ảnh cụ thể gì, màu
sắc cụ thể cho tiêu đề của bài viết.
Sau bƣớc này, chúng ta 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ề website của mình. Website 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? Chúng ta sẽ sử dụng nhiều màu
Trang 11


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? Website sẽ có bố
cục 3 cột hay 2 cột? Chúng ta 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í?
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à q trình đi tìm câu trả lời cho câu hỏi
- nếu nhìn từ xa, bố cục website của chúng ta 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 - chúng ta
đơn giản là tạo một mơ hình “thô” của giao diện. Chúng ta không cần quan tâm về màu
sắc. Chúng ta 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, chúng ta 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 website (tƣởng tƣợng nếu chúng ta đứng cách
xa màn hình 5 mét và nhìn website của mình sẽ nhƣ thế nào - chắc chắn chúng ta sẽ
không thấy cụ thể nội dung mà chỉ thấy bố cục của nó). Có hai 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 chúng ta bè. Tuỳ theo mục đích cụ thể, chúng ta 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.

Trang 12


Hình 2 – Bố cục website

Một trong những quyết định quan trọng nhất mà chúng ta 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 - website 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 cho thấy rằng dƣờng nhƣ tất cả các
thiết kế website 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ừ hai bƣớc trƣớc đó - nhƣng nếu đã có sẵn ý
tƣởng từ trƣớc về bố cục giao diện thì chúng ta vẫn có thể hồn tồn thực hiện nó
trƣớc.

Nếu chúng ta 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
website của chúng ta trở nên trống trải. Trong tình huống đó, có lẽ chúng ta 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ì chúng ta có thể chuyển sang giao diện 3 cột. Thực tế là nếu
chúng ta 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, chúng
ta 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

Trang 13


thƣờng sẽ chiếm ít nhất một nủa bề rộng - tức chúng ta 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. Chúng ta 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.

Hình 3 – Độ phân giải màn hình

Các trang chủ báo chí có thể sử dụng giao diện ba 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.

Trang 14


CÂU HỎI ƠN TẬP CHƢƠNG 2
1. Trình bày các bƣớc để tìm ra mục đích của website cần thiết kế?
2. Trình bày các bƣớc để xây dựng chiến lƣợc thiết kế web?
3. Trình bày các bƣớc thiết kế giao diện?

Trang 15


Chƣơng 3
HTML
MỤC ĐÍCH
Cung cấp sinh viên kiến thức về các thẻ HTML căn bản trong thiết kế giao diện web.
Nhiệm vụ tự học và tài liệu tham khảo của sinh viên trong chƣơng 3
Để đạt đƣợc mục đích đề ra trong chƣơng 3, sinh viên phải thực hiện tốt các yêu cầu
sau đây:
 Phải đọc trƣớc nội dung Chƣơng 3 trong quyển bài giảng này trƣớc khi lên lớp.
3.1 Giới thiệu HTML
HTML là một ngôn ngữ đánh dấu cho việc mô tả các tài liệu web (web documents), cụ
thể nhƣ sau:
 HTML là viết tắt của Hyper Text Markup Language
 Ngôn ngữ đánh dấu là một tập hợp các thẻ đánh dấu
 Tài liệu HTML đƣợc mô tả bằng các thẻ HTML
 Mỗi thẻ HTML mô tả nội dung tài liệu khác nhau

Ví dụ:

Trong đó:
 Việc khai báo DOCTYPE định nghĩa kiểu tài liệu HTML
Trang 16


 Các phần giữa <html> và </ html> mô tả một tài liệu HTML
 Các phần giữa <head> và </ head> cung cấp thông tin về tài liệu
 Các phần giữa <title> và </ title> cung cấp một tiêu đề cho tài liệu
 Các phần giữa <body> và </ body> mô tả nội dung trang
 Các phần giữa

và </ h1> mô tả một đề mục
 Các phần giữa

và </ p> mô tả một đoạn văn bản
Sử dụng cách này, trình duyệt web có thể hiển thị một tài liệu với một tiêu đề và đoạn
văn.
Thẻ HTML
 Thẻ HTML là các từ khóa đƣợc bao quanh bởi dấu ngoặc nhọn nhƣ trình bày
bên dƣới:
<tagname> nội dung </ tagname>
 Thẻ HTML thông thƣờng đi theo cặp nhƣ

và </ p>
 Thẻ đầu tiên trong một cặp là bắt đầu từ khóa, các từ khóa thứ hai là thẻ kết thúc
 Các từ khóa kết thúc đƣợc viết nhƣ thế bắt đầu từ khóa, nhƣng với một dấu gạch
chéo trƣớc tên thẻ
Lƣu ý: Thẻ bắt đầu thƣờng đƣợc gọi là thẻ mở. Các từ khóa kết thúc thƣờng đƣợc
gọi là thẻ đóng.
Cấu trúc trang HTML
Dƣới đây là cấu trúc trang HTML:

Trang 17

Lƣu ý: Chỉ có phần <body> (phần màu trắng phía trên) đƣợc hiển thị bởi trình
duyệt.
Khai báo <DOCTYPE!>
Các <! DOCTYPE> khai giúp trình duyệt để hiển thị một trang web một cách chính
xác. Có nhiều loại tài liệu khác nhau trên web. Để hiển thị một tài liệu một cách chính
xác, trình duyệt phải biết cả hai loại và phiên bản. Việc khai báo DOCTYPE không
phân biệt chữ hoa hay chữ thƣờng. Tất cả các trƣờng hợp sau đều đƣợc chấp nhận:
<! DOCTYPE html>
<! DOCTYPE HTML>
<! DOCTYPE html>
<! DOCTYPE html>

Trang 18