Bài giảng Thiết kế Web cơ bản

TRƯỜNG ĐẠI HỌC NHA TRANG

TRUNG TÂM NC&PT CÔNG NGHỆ PHẦN MỀM

Baøi giaûng

THIEÁT KEÁ WEB CÔ BAÛN

NHA TRANG, 11/2008

MỤC LỤC

Chương 1. GIỚI THIỆU MẠNG INTERNET ................................................................................4

1.1.

1.2.

1.3.

Lịch sử mạng Internet...........................................................................................................4

Một số khái niệm và thuật ngữ thông dụn g ........................................................................4

Một số yêu cầu khi soạn thảo web .......................................................................................5

1.3.1. Một số yêu cầu .........................................................................................................................5

1.3.2. Tổ chức Websit e ......................................................................................................................5

1.3.3. Qui ước đặt tên fil e ..................................................................................................................6

Chương 2. THIẾT KẾ TRANG WEB VỚI HTM L ........................................................................8

2.1.

2.2.

Giới thiệu ngôn ngữ HTML .................................................................................................8

Một số thẻ cơ bản của HTML ..............................................................................................9

2.2.1. Định dạng trang .......................................................................................................................9

2.2.2. Định dạng đoạn văn bản (paragraph) ....................................................................................11

2.2.3. Định dạng ký t ự .....................................................................................................................13

2.2.4. Định dạng siêu liên kết (hyperlink ).......................................................................................14

2.2.5. Thẻ định dạng danh sách liệt kê (List) ..................................................................................15

Định dạng bảng biểu (Tables) ............................................................................................17

Chèn âm thanh, hình, phim ảnh .......................................................................................19

Định dạng một số ký tự đặc biệt ........................................................................................20

Chuyển hướng trang tự độn g .............................................................................................20

Frame ...................................................................................................................................20

Form .....................................................................................................................................22

2.7.1. Tạo form ................................................................................................................................22

2.7.2. Tạo các đối tượng trên for m ..................................................................................................23

Chương 3. THIẾT KẾ TRANG WEB BẰNG FRONTPAGE XP...............................................27

3.1.

3.2.

Giới thiệu ..............................................................................................................................27

Các thao tác chính khi soạn thảo một trang web .............................................................27

3.2.1. Tạo trang web mới .................................................................................................................27

3.2.2. Lưu trang web........................................................................................................................27

3.2.3. Mở trang web đã có :..............................................................................................................28

3.2.4. Xem trước kết quả hiển thị của trang web đang thiết kế :......................................................28

3.3.

3.4.

Định dạn g .............................................................................................................................28

3.3.1. Định dạng trang .....................................................................................................................28

3.3.2. Định dạng ký t ự .....................................................................................................................29

3.3.3. Định dạng đoạn văn bả n ........................................................................................................30

3.3.4. Định dạng bullet and numbering ...........................................................................................30

Chèn các đối tượng vào trang web ....................................................................................30

3.4.1. Chèn một file văn bản ............................................................................................................30

3.4.2. Chèn ký tự đặt biệt .................................................................................................................30

3.4.3. Chèn đường kẻ ngang (Horizontal line )................................................................................30

3.4.4. Chèn thời gian cập nhậ t .........................................................................................................31

3.4.5. Chèn hình ảnh vào trang web ................................................................................................31

3.5.

3.6.

Tạo liên kết (Hyperlink) .....................................................................................................31

3.5.1. Tạo liên kết trong cùng một trang (Bookmark).....................................................................32

3.5.2. Tạo liên kết giữa các trang (Hyperlink).................................................................................32

3.5.3. Tạo liên kết dạng bản đồ ảnh .................................................................................................33

3.5.4. Thay đổi liên kế t ....................................................................................................................34

3.5.5. Xóa liên kết ............................................................................................................................34

Một số hiệu ứng đặc biệt .....................................................................................................34

3.6.1. Tạo chữ cuộn (Marquee) .......................................................................................................34

3.6.2. Hiển thị số lần truy cập trang web (Hit counter )...................................................................35

2

3.7.

Bảng biểu (Table) ................................................................................................................35

3.7.1. Tạo bảng ................................................................................................................................35

3.7.2. Chèn bảng biểu, hàng, cột: ....................................................................................................37

3.7.3. Xóa hàng, cột, ô:....................................................................................................................38

3.7.4. Gộp, chia ô: ...........................................................................................................................38

3.8.

3.9.

Khung (Frames) ..................................................................................................................39

3.8.1. Sơ lược về frame....................................................................................................................39

3.8.2. Tạo frame...............................................................................................................................39

3.8.3. Quản lý fram e ........................................................................................................................40

Forms....................................................................................................................................42

3.9.1. Tạo form ................................................................................................................................42

3.9.2. Tạo các đối tượng trên for m ..................................................................................................42

3.10. Giới thiệu một số phần mềm hỗ trợ thiết kế we b .............................................................47

Chương 4. ĐƯA WEBSITE LÊN MẠNG INTERNET................................................................52

4.1.

4.2.

Giới thiệu về uploa d ............................................................................................................52

Đăng ký tên miền miễn phí với website namezer o ...........................................................53

BÀI TẬP THỰC HÀN H ..................................................................................................................54

PHỤ LỤC. BẢY BƯỚC THIẾT KẾ TRANG WEB ẤN TƯỢNG VÀ HIỆU QUẢ ..................58

TÀI LIỆU THAM KHẢO ...............................................................................................................62

3

Chương 1. GIỚI THIỆU MẠNG INTERNET

1.1. Lịch sử mạng Internet

Mạng Internet ban đầu được biết dưới tên là ARPANET do tổ chức Advanced

Research Projects Agency (ARPA) của Mỹ thiết lập năm 1969. Mục đích chính của

mạng này là tạo cơ sở cho các máy tính nghiên cứu của các trường đại học có thể kết

nối và trao đổi với nhau.

Mạng Internet và ngày nay đã trở thành mạng toàn cầu kết nối hàng trăm triệu

người trên thế giới. Mạng máy tính toàn cầu Internet có thể được xem như là mạng của

tất cả các mạng (network of networks), trong đó người dùng tại bất cứ máy tính nào

nếu được phép đều có thể truy cập tới các thông tin của các máy khác.

Về mặt vật lí, mạng Internet sử dụng một phần của toàn bộ các tài nguyên của

các mạng viễn thông công cộng đang tồn tại (public telecommunication networks). Về

mặt kĩ thuật, mạng Internet sử dụng tập các giao thức gọi chung là TCP/IP

(Transmission Control Protocol/Internet Protocol). Hai mô phỏng của công nghệ mạng

Internet là intranet and extranet cũng sử dụng các giao thức này. Sự ra đời của giao

thức HTTP và HMTL đã đánh dấu một bước ngoặc mới trong việc sử dụng Internet.

Cho tới năm 1990 các dịch vụ cơ bản của Internet vẫn chỉ là e-mail, listserv, telnet, và

ftp. Năm 1992, Tim Berners-Lee, một nhà vật lí học tại CERN đã phát triển các giao

thức cho World Wide Web (WWW). Trong khi tìm kiếm cách để liên kết các tài liệu

khoa học lại với nhau, anh ta đã tạo ra Hypertext Markup Language (HTML), một tập

con của Standard Generalized Markup Language (SGML). Từ một chuẩn cho các tài

liệu văn bản, HTML ngày nay có thể chứa hình ảnh, âm thanh, video, và cho phép

phát triển các ứng dụng thông qua Common Gateway Interface (CGI), ASP, JSP, PHP,

Java Servlet,....

1.2. Một số khái niệm và thuật ngữ thông dụng

- Internet: Mạng máy tính toàn cầu kết nối các mạng máy tính khắp nơi trên thế

giới. Tập các giao thức được dùng gọi chung là TCP/IP.

- Intranet: Mạng cục bộ có kiến trúc tương tự mạng Internet.

- Website: Tập hợp các trang web. Website của các tổ chức hay cá nhân trên

mạng bao gồm tập hợp các trang web liên quan đến tổ chức này.

- Webpage: Là trang web. Có thể hiển thị các thông tin dưới dạng văn bản, hình

ảnh, âm thanh, ...

- Web browser: Trình duyệt web, dùng để hiển thị các trang web. Các web

browser thông dụng hiện nay là Internet Explorer của công ty Microsoft và

Netscape Navigator của công ty Netscape.

- Homepage: Trang chủ hay còn gọi là trang nhà. Thường là trang đầu tiên (mặc

định) khi truy cập một website.

4

- Hyperlink: siêu liên kết. Dùng để liên kết các trang web và dịch vụ của các

website trên Internet.

- IAP (Internet Access Provider): Nhà cung cấp đường truyền Internet.

- ISP (Internet Service Provider): Nhà cung cấp dịch vụ Internet. Thông thường,

ta phải thông qua một ISP nào đó để đăng kí dịch vụ truy cập Internet qua mạng

điện thoại. Các nhà cung cấp ISP hiện nay tại Việt Nam là VDC, FPT,

SaigonNet, NetNam, ...

- Search engines: Máy tìm kiếm. Do số lượng các trang web trên Internet rất lớn

nên các máy tìm kiếm sẽ hỗ trợ cho ta khi cần truy tìm các trang web liên quan

tới vấn đề mà ta quan tâm trong tập hợp khổng lồ các trang web này. Các máy

tìm kiếm thông dụng hiện nay là Yahoo, Google, Altavista, ...

- HTTP, FTP, SMTP, POP3, ...: Đây là các giao thức được dùng cho các dịch

vụ web, ftp, email trên Internet.

1.3. Một số yêu cầu khi soạn thảo web

1.3.1. Một số yêu cầu

Để giảm thời gian chờ đợi của người sử dụng, ta nên:

- Chuyển đổi dạng của các file ảnh, file *.jpg có kích thước nhỏ hơn file *.gif.

- Nén file âm thanh, file .mp3 có kích thước nhỏ hơn file *.wav

- Nén những file tài liệu sẽ tải xuống.

- Chọn màu tương phản cho màu nền và màu văn bản.

- Nếu đưa hình ảnh vào làm nền thì phải sử dụng hình phù hợp, nên tránh sử

dụng hình có độ phân giải cao.

- Hãy tạo nhiều trang web, không nên tạo một trang dài để người sử dụng chỉ

tải những phần muốn xem, không cần phải đợi quá lâu để tải toàn bộ nội dung

trang web.

1.3.2. Tổ chức Website

Để thuận tiện cho việc xuất bản (publish) website sau này, trước tiên nên tập

trung tất cả các thành phần của website vào một thư mục, ví dụ như C:\MyWebSite.

Trong thư mục này, tổ chức một số thư mục con như images dùng để lưu các hình ảnh,

db dùng để lưu các tập tin cơ sở dữ liệu, …

Sau khi tạo xong thư mục có cấu trúc như trên, trong FrontPage ta tạo mới một

website trỏ đến thư mục D:\MyWebSite bằng cách chọn trên thực đơn chức năng

5

File/New/More Web site templates, sau đó gõ vào đường dẫn D:\MyWebSite trong ô

của mục Options/Specify the location of the new web.

Với việc tạo website này, mỗi khi ta soạn thảo mới bất kì tập tin nào, mặc định

nó sẽ được lưu trong thư mục này. Ngoài ra, ta có thể chỉ định bảng mã UTF-8 là bảng

mã được dùng mặc định khi tạo mới các tập tin bằng cách chọn trên thực đơn chức

năng Tools/Site Settings/Language.

1.3.3. Qui ước đặt tên file

Khi tạo website trên máy sử dụng hệ điều hành Windows hay Macintosh rồi gởi

nó đến server Unix, lỗi mất liên kết thường xảy ra, để tránh trường hợp này ta nên đặt

tên file theo những quy tắc sau đây để phù hợp với cả Windows, Macintosh và Unix:

6

• Đặt tên file theo quy ước Dos 8.3 hay 8.4: An toàn nhất là dùng tên file theo

quy ước 8+3 (tên file 8 ký tự, phần mở rộng 3 ký tự) và không dùng ký tự đặc

biệt nào trừ dấu gạch dưới (thí dụ: image_1.htm). Đây là tên file được nhận

diện bởi mọi hệ điều hành đang có.

• index.html: Tên file chính hay file đầu tiên của website nên được đặt là

index.html vì server Unix đòi hỏi file nầy phải có phần mở rộng là html thay

vì htm như các trang khác. Các Server Windows và Macintosh cũng chấp

nhận tên file như vậy làm file chính.

• Chữ hoa và chữ thường: Windows và Macintosh không quan tâm tới việc

phân biệt chữ hoa và chữ thường trong tên file cũng như trong mã liên kết

html. Nhưng Unix lại phân biệt chính xác chữ hoa, chữ thường trong tên file

và đòi hỏi các liên kết mã html phải chính xác như vậy. Ví dụ: tên file là danh

sach.html mà gõ trong lệnh liên kết là DanhSach.html là không được và cũng

có sự phân biệt giữa htm và html.

• Dấu cách (khoảng trắng) trong tên file: Windows và Macintosh cho phép

trong tên file có khoảng trắng nhưng Unix thì lại không cho phép nên để

tương thích nhiều hệ điều hành, nên đặt tên file không có khoảng trắng, sử

dụng dấu gạch dưới để dể phân biệt. Ví dụ: Nên đặt tên file là

“danh_sach.htm” thay vì “danh sach.htm”.

Chú ý: Tên file nên đặt theo kiểu chữ thường và dùng toàn bộ chữ thường trong

mã liên kết nội bộ và dùng địa chỉ tương đối. Ví dụ: ../quanly/danhsach.html

7

Chương 2. THIẾT KẾ TRANG WEB VỚI HTML

2.1. Giới thiệu ngôn ngữ HTML

HTML là ngôn ngữ dùng để xây dựng trang web. Nó mô tả cách thức mà dữ liệu

được hiển thị thông qua tập các kí hiệu đánh dấu thường được gọi là tag (thẻ). Các tag

này được bao quanh bởi các dấu “<” “>”. Ví dụ: <HTML>, </BODY>, <IMG> là

các tag HTML. Một trang web thông thường gồm có hai thành phần chính đó là: dữ

liệu của trang web (ví dụ như văn bản, hình ảnh, âm thanh, ...) và các tag HTML dùng

để mô tả cách thức mà các dữ liệu này được hiển thị. Khi một trang web được tải về

trình duyệt, trình duyệt sẽ căn cứ vào các tag HTML để định dạng dữ liệu được hiển

thị.

Ví dụ: Cùng một dữ liệu là dòng văn bản “Chào các bạn”. Tuy nhiên nếu có thêm

định dạng của tag ở dòng thứ hai, hình thức hiển thị dữ liệu sẽ khác.

Mã HTML

Chào các bạn

Chào các bạn

Kết quả hiển thị trên trình duyệt

Chào các bạn

Đa số các tag của HTML đều có tag bắt đầu và tag kết thúc tương ứng. Tag kết

thúc tương ứng với một tag chỉ khác ở chỗ có thêm kí tự “/”.

Ví dụ: tag <HTML> có tag kết thúc tương ứng là </HTML>.

Các tag không phân biệt chữ thường và chữ hoa. Nghĩa là các tag <html>,

<Html> và <HTML> là như nhau.

Trong quá trình đọc trang web để hiển thị, trình duyệt sẽ bỏ qua các khoảng trắng

thừa và các dấu ngắt dòng giữa văn bản dữ liệu và các tag.

Ví dụ:

Mã HTML

Kết quả hiển thị trên trình duyệt

Chào các bạn

Chào

các bạn

Chào các bạn

Chào các

bạn

Chào các bạn

Chào

các

Chào các bạn

bạn

Khi bắt đầu soạn thảo một trang web, các tag cơ bản sau sẽ đóng vai trò là khung

cho việc định nghĩa một trang HTML. Xét ví dụ của một trang HTML đơn giản sau:

<HTML>

<HEAD>

</HEAD>

8

<BODY>

Chào các bạn !

</BODY>

</HTML>

- <HTML> </HTML>: Định nghĩa phạm vi của văn bản HTML.

- <HEAD> </HEAD>: Định nghĩa các mô tả về trang HTML. Các thông tin

này sẽ không hiển thị dưới dạng nội dung của trang web.

- <TITLE> </TITLE>: Mô tả tiêu đề của trang. Tiêu đề của trang web thường

được hiển thị như là tiêu đề của cửa sổ hiển thị trang web. Thông tin này cũng

có thể được dùng bởi một số máy tìm kiếm để xây dựng chỉ mục các trang

web.

- <BODY> </BODY>: Xác định vùng thân của trang web. Đây là phần mà các

dữ liệu cùng với các tag HTML sẽ được dùng để định dạng nội dung của

trang web.

Một tag thông thường bao gồm hai thành phần: tên của tag (dùng để cho biết tag

này định nghĩa cái gì) và thuộc tính của tag (dùng để cho biết dữ liệu được hiển thị

như thế nào).

Ví dụ: Thay đổi các thuộc tính FACE và SIZE của tag

Kết quả hiển thị trên trình

Mã HTML

duyệt

Chào các

bạn

Chào các bạn

<FONT FACE="Times New Roman"

SIZE="4"> Chào các bạn

Chào các bạn

2.2. Một số thẻ cơ bản của HTML

2.2.1. Định dạng trang

Định dạng trang thông thường bao gồm các thông tin về tiêu đề trang, bảng mã kí

tự được dùng, màu nền, ảnh nền, hình nền, màu văn bản, màu cho các liên kết… Các

thuộc tính này được đưa vào thẻ <BODY> như sau:

<BODY

LINK

ALINK

VLINK

= color

BACKGROUND = url (tên file nền)

BGCOLOR

TEXT

= color

9

TOPMARGIN

= pixels

RIGHTMARGIN = pixels

LEFTMARGIN = pixels

>

phần nội dung của trang web đượ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

TEXT

SCROLL

Chỉ định màu nền

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

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

Lề trên

TOPMARGIN

RIGHTMARGIN Lề phải

LEFTMARGIN Lề trái

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.

Một số giá trị màu cơ bản:

Màu sắc

Giá trị

#FF0000

Tên tiếng Anh

RED

Đỏ

Đỏ sẫm

#8B0000

#00FF00

#90EE90

#0000FF

DARKRED

GREEN

Xanh lá cây

Xanh nhạt

LIGHTGREEN

BLUE

Xanh nước biển

10

Vàng

#FFFF00

#FFFFE0

#FFFFFF

#000000

#808080

#A52A2A

#FF00FF

#EE82EE

#FFC0CB

#FFA500

YELLOW

LIGHTYELLOW

WHITE

Vàng nhạt

Trắng

Đen

BLACK

Xám

GRAY

Nâu

BROWN

MAGENTA

VIOLET

PINK

Tím

Tím nhạt

Hồng

Da cam

ORANGE

NAVY

Màu đồng phục hải quân #000080

Để đặt tiêu đề cho trang web, ta dùng tag <TITLE>.

Để đặt bảng mã mà trang web dùng, ta sử dụng thiết lập các thông số cho tag

<META>. Ví dụ thiết lập sau: <META HTTPEQUIV=" Content-Type"

CONTENT="text/html; charset=utf-8"> cho biết trang web sẽ dùng bảng mã

Unicode-UTF-8.

Ví dụ: Thiết kế trang web có tiêu đề là “Chào mừng các bạn đến với Trung tâm

Nghiên cứu và Phát triển Công nghệ Phần mềm”, màu nền cho trang web là màu

đỏ, màu chữ là màu trắng và dùng bảng mã Unicode-UTF-8.

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=utf-8">

<TITLE> Chào mừng các bạn đến với trung tâm Nghiên cứu và Phát triển Công

nghệ Phần mềm </TITLE>

</HEAD>

</BODY>

</HTML>

2.2.2. Định dạng đoạn văn bản (paragraph)

Thẻ (Patagraph): định dạng phân đoạn.

Thuộc tính: ALIGN dùng để canh chỉnh dữ liệu của đoạn, gồm :

o LEFT (trái),

o RIGHT (phải)

o CENTER (canh giữa)

o JUSTIFY (canh đều hai bên).

11

Ví dụ: Đặt các thuộc tính canh chỉnh cho tag bằng cách lần lượt gán thuộc tính

ALIGN trong tag này các giá trị “LEFT”, “CENTER”, “RIGHT” như sau:

Chào các bạn

Chào các bạn

Chào các bạn

Thẻ : Xuống dòng trong một đoạn văn bản.

Ví dụ:

Họ tên: Nguyễn Thủy Đoan Trang

Nghề nghiệp: Giảng viên

Địa chỉ: Khoa CNTT – Đại học Nha Trang

Kết quả hiển thị trên trình duyệt

Họ tên: Nguyễn Thủy Đoan Trang

Nghề nghiệp: Giảng viên

Địa chỉ: Khoa CNTT – Đại học Nha Trang

Nếu mã HTML là:

Họ tên: Nguyễn Thủy Đoan Trang

Nghề nghiệp: Giảng viên

Địa chỉ: Khoa CNTT – Đại học Nha Trang

thì kết quả trình duyệt không thể xuống dòng theo ý muốn:

Kết quả hiển thị trên trình duyệt

Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang

Thẻ <HR> (Hard Rule): Chèn vào một đường thẳng. Thuộc tính:

- number = n: độ dày của đường được tính bằng điểm, n = 1, 2, 3, 4.

- width = number/percent: chiều rộng của đường, tính theo điểm hay tỷ lệ phần

trăm, thuông thường từ: 1%..100%.

- align = left/ center/ right: canh lề văn bản

- color = màu sắc của đường thẳng.

thường dùng để canh chỉnh vị trí và màu của đường kẻ này tương ứng là ALIGN

và COLOR.

Ví dụ:

Trung tâm NC & PT Công nghệ Phần mềm

Đào tạo

12

Nghiên cứu

- <PRE>: Văn bản ở giữa hai thẻ này sẽ được hiển thị giống hệt như khi chúng được

gõ vào, như dấu xuống dòng giữa hai thẻ này sẽ có ý nghĩa chuyển sang dòng mới.

Ví dụ:

Mã HTML

Kết quả hiển thị trên trình duyệt

Chào các

bạn

<PRE> Chào

bạn

<pre>

các

2.2.3. Định dạng 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.

...

In chữ đậm

...

...

In chữ nghiêng

...

...

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 đó.

In chữ bị gạch ngang.

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ó 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.

...

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ẻ

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ẻ sẽ không có ý nghĩa.

...

...

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

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

Đị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.

...

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à

13

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.

Thuộc tính COLOR dùng trong các tag thường được định nghĩa bằng tên qui ước

(ví dụ như RED: màu đỏ, BLUE: màu xanh da trời, ...) hoặc mã RGB dưới dạng 3 chữ

số hệ 16 bắt đầu bằng dấu # (ví dụ như #FF0000).

Ví dụ: Định dạng đoạn văn bản với font Tahoma, in đậm, kích thước +2 (10pt), màu

đỏ:

Trung tâm NC & PT

Công nghệ Phần mềm

2.2.4. Định dạng siêu liên kết (hyperlink)

Tag <A> được dùng để đặt một hyperlink. Đoạn văn bản (hay hình ảnh, ...) nằm

giữa các tag <A> và </A> sẽ đóng vai trò hyperlink. Thông thường, con trỏ chuột sẽ

thay đổi hình dạng (thường là hình bàn tay) khi di chuyển ngang qua đoạn văn bản

này. Một hyperlink cho phép liên kết tới một vị trí khác ngay bên trong trang web

chứa hyperlink (liên kết nội) hoặc tới một trang web khác (liên kết ngoại). Để tạo một

liên kết nội, ta cần thực hiện hai bước:

- Bước 1: Đánh dấu vị trí (bookmark) của nơi cần liên kết bằng thuộc tính

NAME.

- Bước 2: Tạo hyperlink đến vị trí vừa được đánh dấu, sử dụng thuộc tính

HREF.

o Liên kết nội: # trong mục HREF

Để liên kết tới các trang web khác: Điền địa chỉ URL của trang web vào mục

HREF.

Ví dụ: Minh họa việc tạo liên kết nội để khi người dùng nhấn vào hyperlink

“Đến chương 1” thì trình duyệt sẽ chuyển đến vị trí của Chương 1 trong cùng trang

web.

Mã HTML

Kết quả hiển thị trên trình duyệt

<A HREF="#Chapter1"> Đến chương Đến chương 1

1</A>

…

...

…

...

Chương 1

<A NAME="Chapter1"> Chương 1</A>

Ví dụ: Minh họa việc tạo liên kết ngoại:

Mã HTML

Ý nghĩa

<A HREF="http://www.google.com.vn"> Google </A>

Liên kết đến trang ở máy

chủ khác

<A HREF="Chao.htm"> Trang chủ </A>

Liên kết đến trang khác

14

trong cùng thư mục

<A HREF="javascript:window.open()"> Click here</A> Gọi một hàm JavaScript

<A HREF="FlashGet.zip"> Download </A>

Hiển thị cửa sổ tải tập tin

về.

Một số giá trị có thể được dùng để gán cho thuộc tính TARGET của tag <A> là:

Giá trị của

Ý nghĩa

TARGET

Name

_blank

Nạp trang web trong cửa sổ hoặc FRAME có tên là name

Nạp trang web vào một cửa sổ trống mới. Cửa sổ mới này không có

tên.

_parent

_self

Nạp trang web vào cửa sổ cha gần nhất của trang web hiện hành.

Nạp trang web vào cùng cửa sổ với trang web hiện hành. Ðây là giá

trị mặc định của hyperlink.

_top

Nạp trang web vào cửa sổ cao nhât (topmost).

Để tạo một liên kết đến tập tin âm thanh, hình hay phim ảnh ta dùng:

Chú ý: Liên kết đến file chứa trong thư mục không cùng cấp với file gốc, ta phải chỉ

đường dẫn:

- Lên thư mục cấp cao hơn hoặc thư mục cùng cấp khác: 1 bậc: ../; 2 bậc : ../../

- Xuống cấp thấp hơn: chỉ tiếp đường dẫn bắt đầu từ thư mục hiện hành là thư

mục chứa file gốc (file đang thiết kế).

2.2.5. Thẻ định dạng danh sách liệt kê (List)

Có 3 dạng thể hiện danh sách sau đây:

- Danh sách không sắp xếp theo thứ tự

- Danh sách sắp xếp theo thứ tự

- Kết hợp 2 loại danh sách trên

a. Định dạnh danh sách không có thứ tự: (Unordered List - UL )

- Thẻ <ul>…</ul> đánh dấu sự bắt đầu và kết thúc danh sách, đầu mỗi mục

của danh sách phải đặt tag <li> (list)

- Thuộc tính:

o Type = Square/ Circle/ Disc (hình vuông đầy, hình vuông rỗng, chấm

đen – mặc định)

15

Ví dụ:

Mã HTML

Kết quả hiển thị trên trình duyệt

<ul>

• Mục thứ ba

• Mục thứ hai

• Mục thứ ba

<li> Mục thứ

nhất

<li> Mục thứ hai

<li> Mục thứ ba

</ul>

b. Định dạng danh sách có thứ tự (Ordered List - OL)

- Thẻ <ol>.

- Thuộc tính:

o Type = “a”/ “A”/ “i”/ “I”/ “1” (a, b…/ A, B.../ i, ii... / I, II.../ 1,2..-mặc

định)

Ví dụ:

Mã HTML

<ol>

Kết quả hiển thị trên trình duyệt

1. Mục thứ ba

2. Mục thứ hai

3. Mục thứ ba

<li> Mục thứ

nhất

<li> Mục thứ hai

<li> Mục thứ ba

</ol>

c. Các danh sách lồng nhau:

Ví dụ:

Mã HTML

Kết quả hiển thị trên trình duyệt

<ol>

1. Chương 1

2. Chương 2

• Bài 1

<li> Chương 1

<li> Chương 2

<ul>

• Bài 2

<li> Bài 1

<li> Bài 2

<li> Bài 3

<li> Bài 4

</ul>

• Bài 3

• Bài 4

3. Chương 3

<li> Chương 3

</ol>

16

2.3. Định dạng bảng biểu (Tables)

- Thẻ <table> được dùng để định dạng bảng cùng với các thẻ <tr>, <td> để

định dạng các dòng, cột.

- Thuộc tính:

Thuộc tính

Ý nghĩa

Boder

= number

Kích thước đường viền bảng (1, 2, 3,...)

Khoảng cách giữa các ô (mặc định là 2)

Khoảng cách đường viền và ô (mặc định là 2)

Độ rộng bảng tính theo pixels, hay phần trăm của

cửa sổ hiển thị

Cellspascing = number

Cellpadding = number

Width

= number/percent

Height

Align

= number/percent

= left/ right/ center

Độ cao bảng

Canh lề trái, phải, giữa theo chiều ngang

Valign

= top/ bottom/ middle Canh lề trên, dưới, giữa theo chiều dọc

Bgcolor = màu

Chỉ định màu nền cho bảng

Bordercolor = màu

Background = tên file nền

Chỉ định màu cho đường viền bảng

Chỉ định file hình ảnh dùng làm nền cho bảng

- Ví dụ:

<td> dòng 1 cột 1

<td> dòng 1 cột 2

<td> dòng 1 cột 3

</tr><!hết dòng 1>

<td> dòng 2 cột 1

<td> dòng 2 cột 2

<td> dòng 2 cột 3

</tr><!hết dòng 2>

</table>

Kết quả hiển thị trên trình duyệt:

17

Để trộn (merge)/tách (split) các dòng hoặc cột lại với nhau ta dùng các thuộc tính

tương ứng là ROWSPAN hoặc COLSPAN.

Ví dụ sau minh họa trong một bảng vừa có sự trộn/tách trên dòng và cột:

<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0"

WIDTH="310">

<TR>

MSSV</TD>

Họ và tên</TD>

</TR>

<TR>

</TR>

<TR>

<TD WIDTH="123">Nguyễn Hạ </TD>

</TR>

</TABLE>

Kết quả hiển thị trên trình duyệt:

Có hai cách để thiết lập bề rộng (WIDTH) của một cell hoặc một bảng, đó là tính

theo % và tính theo pixel. Trong nhiều trường hợp, việc đặt theo % sẽ làm cho kích

thước bảng thay đổi tùy theo dữ liệu

và độ phân giải của màn hình máy người dùng, do đó để đảm bảo tính nhất quán trong

hiển thị dữ liệu của bảng, nên chọn cách tính theo pixel.

Trong thiết kế trang web, các bảng biểu đóng vai trò rất quan trọng vì nó là công

cụ chính dùng để thể hiện các trình bày phức tạp của trang web. Hiện nay, các phần

mềm hỗ trợ soạn thảo trang web

18

hỗ trợ vẫn chưa tốt các thao tác phức tạp trên bảng biểu. Do đó, cách tốt nhất là kết

hợp cả hai. Nghĩa là, ngoài việc sử dụng các phần mềm này để phát sinh bảng biểu

một cách trực quan, ta phải sử dụng mã HTML để can thiệp khi các phần mềm này

không đáp ứng nổi các trình bày phức tạp nhất là khi có các bảng vừa lồng vào nhau,

các dòng cột trộn/tách nhiều lần, ...

2.4. Chèn âm thanh, hình, phim ảnh

2.4.1. Chèn hình và phim ảnh:

- Thẻ <IMG> được dùng để chèn một ảnh hoặc một video clip vào trong một

trang web. Các định dạng tập tin ảnh và video sau được hỗ trợ trên Internet

Explorer: *.avi, *.bmp, *.emf, *.gif, *.jpg, *.jpeg, *.mov, *.mpg, *.mpeg,

*.png, *.wmf, ...

- Thuộc tính:

o Scr

= “path/ filename”: Chỉ định địa chỉ file hình muốn chèn

(source)

o Border = n : Hiển thị đường viền bao quanh hình ảnh.

o Align : Xác định vị trí của văn bản so với hình ảnh:

▪ Top: Vị trí cao nhất của ảnh sẽ nằm ngang bằng với các đối tượng

nằm trên cùng một dòng.

▪ Middle: Tâm của hình ảnh sẽ nằm ngang bằng với vị trí của dòng

chứa nó.

▪ Bottom (mặc định): vị trí thấp nhất của ảnh sẽ nằm ngang bằng

với vị trí của dòng chứa nó.

Nếu muốn canh chỉnh hình ảnh, dùng thẻ

o Alt: ghi chú về hình ảnh, được dùng khi ta muốn đưa chuột đến hình ảnh

thì có dòng chữ như tooltip hiển thị bên dưới.

▪ Ví dụ: <Img scr = “trungtam.bmp” align = top alt = “hình ảnh

một buổi họp”>

o Width = chiều rộng (tính theo điểm hay theo tỷ lệ phần trăm)

o Height = chiều cao (tính theo điểm hay theo tỷ lệ phần trăm)

Đối với phim ảnh, thuộc tính loop = n: xác định số lần lặp của phim.

Ví dụ: TRUNG TÂM NGHIÊN CỨU

VÀ PHÁT TRIỂN CÔNG NGHỆ PHẦN MỀM

19

Đối với trang web không chứa hình ảnh, thì nội dung văn bản sẽ được hiển thị

sau này nằm toàn bộ trong trang web. Tuy nhiên với trang web có chứa hình ảnh, hình

ảnh sẽ là một tập tin độc lập với tập tin chứa trang web. Tag <IMG> dùng trong trang

web để thông báo cho trình duyệt đọc tập tin ảnh và hiển thị tại vị trí đặt tag này.

2.4.2. Chèn âm thanh nền:

- Thẻ <bgsound > được dùng để tải tự động tập tin âm thanh khi người dùng

nạp trang web vào trình duyệt. Sử dụng file *.wav, *.mid, *. mp3.

- Thuộc tính:

o Scr

= “path/ filename”: Chỉ định địa chỉ file âm thanh muốn chèn

(source)

o Loop = n: xác định số lần lặp

2.5. Định dạng một số ký tự đặc biệt

HTML sử dụng các kí tự đặc biệt (ví dụ như “<” và “>” để đánh dấu các tag, ...),

do đó để hiển thị các kí tự đặc biệt này, ta phải dùng các nhóm kí tự thay thế sau:

Kí tự cần hiển thị

Mã thay thế

<

>

&

“

<

>

&

"

&pound, &yen

&frac14, &frac12, &frac34

&divide, &deg

khoảng trắng

¢, #, ¥ &cent,

1/2 , 1/3, 3 /4

÷, °

®, ©

&reg, &copy

2.6. Chuyển hướng trang tự động

Để định nghĩa một trang sẽ tự động chuyển sang một địa chỉ khác sau một khoảng

thời gian định trước, ta chèn ngay sau tag <HTML> một tag như sau:

<META

HTTP-

QUIV="Refresh"CONTENT="3;url=D:\VD_WEB\gioithieu.htm">

Trang web chứa tag trên sẽ tự động chuyển sang trang mới D:\VD_WEB\gioithieu.htm

sau khoảng thời gian là 3 giây.

2.7. Frame

Nội dung hiển thị trên trình duyệt có thể được tích hợp từ nhiều cửa sổ khác

nhau, mỗi cửa sổ chứa một URL tương ứng với một trang web. Ví dụ sau cho ta thấy

có ba cửa sổ, một cửa sổ chứa thực đơn nằm ngang, một cửa sổ chứa thực đơn bên trái

20