Giáo trình HTML và thiết kế Web (Phần 2)

CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN

V.1. Thẻ neo và mối liên kết

Các liên kết siêu văn bản trong một tài liệu HTML là để tham chiếu đến một

tài liệu khác hay một phần tài liệu khác nằm trong tài liệu đó.

Liên kết siêu văn bản gồm có ba phần: giao thức, cái neo và địa chỉ hay URL

Để tạo một mối liên kết thì việc đầu tiên cần làm là thiết lập cái neo. Cặp thẻ

tạo neo là (Anchor). Thẻ này có nhiều thuộc tính bắt buộc phải xác định

rõ, ta sẽ tìm hiểu kỹ hơn ở phần sau.

V.1.1. Thuộc tính HREF

HREF (Hypertext REFerence – tham chiếu siêu văn bản) được dùng để liên

kết đến:

Một tài liệu khác (external link) hay

Một phần khác nằm trong chính tài liệu đang đọc (internal link)

Giao thức để tham chiếu HREF là HTTP. Nếu là liên kết nội tại – internal link

thì không cần phải có phần giao thức.

pdf 119 trang phuongnguyen 6280
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình HTML và thiết kế Web (Phần 2)", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

Tóm tắt nội dung tài liệu: Giáo trình HTML và thiết kế Web (Phần 2)

Giáo trình HTML và thiết kế Web (Phần 2)
 44 
CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN 
V.1. Thẻ neo và mối liên kết 
Các liên kết siêu văn bản trong một tài liệu HTML là để tham chiếu đến một 
tài liệu khác hay một phần tài liệu khác nằm trong tài liệu đó. 
Liên kết siêu văn bản gồm có ba phần: giao thức, cái neo và địa chỉ hay URL 
Để tạo một mối liên kết thì việc đầu tiên cần làm là thiết lập cái neo. Cặp thẻ 
tạo neo là  (Anchor). Thẻ này có nhiều thuộc tính bắt buộc phải xác định 
rõ, ta sẽ tìm hiểu kỹ hơn ở phần sau. 
V.1.1. Thuộc tính HREF 
HREF (Hypertext REFerence – tham chiếu siêu văn bản) được dùng để liên 
kết đến: 
Một tài liệu khác (external link) hay 
Một phần khác nằm trong chính tài liệu đang đọc (internal link) 
Giao thức để tham chiếu HREF là HTTP. Nếu là liên kết nội tại – internal link 
thì không cần phải có phần giao thức. 
V.1.2. Liên kết ra ngoài – External Links 
Để liên kết đến một tài liệu khác, ta cần phải biết địa chỉ URL của tài liệu 
đích. Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết. 
Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi 
nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị. 
Nên chọn các từ làm đầu mối sao cho gợi tả và sao cho tự nhiên, không ảnh 
hưởng đến nội dung và ý nghĩa của câu văn. Tránh sử dụng lặp đi lặp lại câu "nhấn 
vào đây" khi tạo đầu mối liên kết. 
Cú pháp để tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài - là 
như sau: 
 Nhóm từ đầu mối liên kết 
 45 
V.1.3. Địa chỉ tuyệt đối 
Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức 
và đầy đủ địa chỉ URL của tệp đích. 
... 
Ví dụ: 
ĐHQG Hà Nội 
Victorian 
Subject Associations on Internet 
V.1.4. Địa chỉ tương đối 
Nếu liên kết đến một tệp ở ngay trên máy chủ của bạn thì không cần dùng 
địa chỉ URL tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng 
với đường đẫn đến thư mục nơi chứa tệp đích. 
... 
Ví dụ: 
Ví dụ 1 
V.1.5. Liên kết nội tại – Internal Link 
Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này 
đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục 
lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên 
chương đến phần nội dung tương ứng. 
Để làm điều này, cần đánh dấu điểm đích - book mark- của liên kết bằng thẻ neo 
còn trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng tên nói trên. 
Lưu ý có thêm dấu "#". 
Ví dụ, để tạo liên kết nội tại từ đây nhảy về đầu trang ta cần tạo một book 
mark ở đầu trang với tên là Top chẳng hạn. Sau đó, tạo thẻ neo liên kết ở dòng 
dưới như sau 
 46 
 về đầu trang 
V.2. Dùng hình ảnh làm đầu mối liên kết 
V.2.1. Thay chữ bằng hình 
Như ở phần trên, cấu trúc thành phần HTML mối liên kết siêu văn bản là: 
Để thay “đầu mối liên kết” bởi một biểu tượng, hay một hình ảnh... Ta chỉ 
cần chèn một hình ảnh hay biểu tượng đó vào vị trí của “đầu mối liên kết”. 
Ví dụ: 
V.2.2. Image Map - thẻ AREA 
Thử hình dung ta có một bản đồ địa lý hành chính. Khi nhấn chuột vào vùng 
diện tích của một tỉnh thì một trang thông tin tương ứng với tỉnh đó sẽ hiện ra. Đó 
chính là Image Map. 
Với Image Map, “đầu mối liên kết” là một vùng trên một hình ảnh có hình 
dạng tùy ý nào đó. 
Các công cụ soạn thảo trực quan cho phép dễ dàng tạo Image Map. 
Một ví dụ về mã nguồn HTML của thành phần Image Map như sau: 
<AREA HREF=”chapter1.html” SHAPE=”rect” coords=”6, 22, 167, 
169”> 
<AREA HREF=”chapter2.html” SHAPE=”circle” coords=”259, 106, 
36”> 
<AREA HREF=”chapter3.html” SHAPE=”polygon” coords=”123, 196, 
56, 211, 278, 201”> 
<IMG BORDER=”0” SRC=”image.gif” WIDTH=”400” HEIGHT=”600” 
USEMAP=”#Map01”> 
Đoạn mã trên sẽ tạo 3 đầu mối liên kết là ba vùng hình chữ nhật (rect), hình 
tròn (circle) và hình tam giác (polygon) trên nền ảnh image.gif. Khi nhấn chuột vào 
phạm vi 3 vùng này thì các tệp tương ứng chapter1.html, chapter2.html và 
chapter3.html sẽ được nạp về để hiển thị. 
 47 
V.3. Đưa âm thanh vào tài liệu 
V.3.1. Liên kết đến tệp âm thanh 
Để chèn một đoạn âm thành vào tài liệu HTML ta cũng theo đúng quy tắc 
tạo mối liên kết thông thường. Trong thẻ neo, tại địa điểm URL bây giờ là địa chỉ 
của tệp âm thanh. 
Dưới đây là một ví dụ về việc chèn âm thành vào tài liệu. Khi nhấn chuột 
vào mối liên kết này, tệp âm thanh sẽ được phát lại. 
Papa 
V.3.2. Tạo âm thanh nền 
Không những có thể chèn tệp âm thanh vào tài liệu HTML mà còn có thể 
nhúng âm thanh vào tài liệu, nghĩa là âm thanh nền phát ra khi trang tài liệu bắt đầu 
hiển thị. 
Để nhúng âm thanh vào tài liệu ta dùng thẻ 
<EMBED SRC=”URL” HEIGHT=”n” WIDTH=”n’ 
AUTOSTART=true|false LOOP=true|false> 
Trong đó: 
Thuộc tính Mô tả 
SRC=”URL” Đường dẫn đến tệp âm thanh 
HEIGHT=n 
Chiều cao của khung nhìn cho giao diện điều 
khiển của phần mềm phát âm thanh 
WIDTH=n 
Chiều rộng của khung nhìn cho giao diện điều 
khiển của phần mềm phát âm thanh 
AUTOSTART=true|false
Âm thanh tự động được kích hoạt khi bắt đầu 
nạp tài liệu hiện thị (nên đặt là true) 
LOOP=true|false Thiết lập việc lặp lại nhiều lần hay chỉ một lần 
Đặt thẻ ở đâu thì khung nhìn của giao diện điều khiển việc phát 
tệp âm thanh xuất hiện ở đó. 
Ví dụ: 
<EMBED SRD=”music/papa.rmi” HEIGHT=50 WIDTH=200 
AUTOSTART=true LOOP=true> 
 48 
V.4. Đưa Video vào tài liệu 
V.4.1. Chèn tệp Video 
Việc chèn tệp video vào tài liệu HTML cũng giống như chèn tệp âm thanh. 
Ví dụ đoạn mã sau đây sẽ chèn một đoạn phim video vào tài liệu. Nó sẽ tạo 
ra một mối liên kết tới tệp video đã chọn và khi ta nhấn chuột vào mối liên kết thì 
sẽ được xem lại tệp video đó. 
Film 
Chú ý: Các tệp video đều có kích thước khá lớn nên hãy cân nhắc về tốc độ 
đường truyền của người dùng. 
V.4.2. Nhúng tệp video 
Thẻ cũng dùng để nhúng tệp video vào tài liệu: 
Ví dụ: 
Cũng tương tự như các thuộc tính của việc chèn tệp âm thanh: 
Thuộc tính Mô tả 
SRC=”URL” Tên và đường dẫn đến tệp video 
HEIGHT=n Chiều cao của khung hình chiếu video 
WIDTH=n Chiều rộng của khung hình chiếu video 
AUTOPLAY=true|false 
Đặt cho video tự chạy khi bắt đầu nạp tài liệu 
(không bắt buộc) 
CONTROLLER=true|flase
Cho hiện giao diện điều khiển của phần mềm 
video ở liền ngay phía dưới khung hình. Thuộc 
tính này không bắt buộc. Mặc định là true. 
LOOP=true|false Thiết lập việc lặp lại nhiều lần hay chỉ một lần 
Vị trí đặt thẻ là nơi xuất hiện khung hình video. 
 49 
Bài tập 
1. Tạo một trang khác giới thiệu chi tiết hơn về mình và có liên kết tới trang 
giới thiệu chính của mình. 
2. Chèn 2 ảnh vào trong trang giới thiệu chính sao cho khi click vào ảnh đó thì 
trang giới thiệu chi tiết được mở ra. Yêu cầu: ảnh thứ nhất sử dụng đường 
dẫn tuyệt đối, ảnh thứ hai sử dụng đường dẫn tương đối tới trang cần liên kết. 
3. Tạo một trang thứ ba trong đó có chèn một đoạn Video clips ở giữa trang. 
 50 
CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG 
VI.1. Màu nền và văn bản 
VI.1.1. Đặt màu nền 
Để văn bản trở nên đẹp và hấp dẫn, đôi khi đặt nền cho trang siêu văn bản. 
Thuộc tính BGCOLOR (Background Color). Dùng thuộc tính này kèm 
thẻ để đặt màu nền cho văn bản. Cú pháp như sau: 
Nội dung của tài liệu 
trong đó "#rrggbb" là red-green-blue, bộ ba số hai chữ số hệ đếm 16, xác định mã 
màu. 
VI.1.2. Màu chữ của văn bản 
Thuộc tính TEXT. Thuộc tính này để thiết lập màu cho các con chữ trong 
văn bản, trừ các đầu mối liên kết phải có màu khác đi. 
Nội dung của tài liệu 
 ́
VI.1.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK 
Ba thuộc tính trên để đặt màu của các đầu mối siêu liên kết. 
 LINK - đặt màu hiển thị trước khi nhấn chuột vào để đến thăm đích liên kết. 
 VLINK - Đặt màu sau khi đích liên kết đã được đến thăm (visited . 
 ALINK - đặt màu khi bạn kích hoạt, đang nhấn chuột vào (active 
Các màu mặc định là: LINK=blue, VLINK=purple and ALINK=red 
Nội dung của tài liệu 
Kết hợp cùng với nhau 
 51 
Color Control Example 
<BODY BGCOLOR="#000000" TEXT="#F0F0F0" LINK="#FFFF00" 
VLINK="#22AA22" ALINK="#0077FF"> 
Đây là một tài liệu làm ví dụ về thiết đặt màu. Các 
chữ màu xám sáng trên nền đen, và <A 
HREF="nowhere.htm">đầu mối liên kết đầu tiên có màu 
vàng, chuyển màu xanh lá cây sáng khi được kích hoạt và 
có màu xanh nhạt khi điểm đích đã được thăm 
Lưu ý: Tổ hợp màu như trên chỉ được thiết đặt một lần cho toàn văn bản. 
Hãy thận trọng khi lựu chọn để đảm bảo dễ đọc, dễ nhìn. 
VI.1.4. Thuộc tính và mã màu 
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" 
VLINK="#rrggbb" ALINK="#rrggbb"> 
Thuộc tính Mô tả 
BGCOLOR Đặt màu nền 
TEXT Đặt màu các con chữ, trừ các mối nối. 
LINK 
Đặt màu ban đầu của đầu mối liên kết khi chưa kích 
hoạt 
VLINK Đặt màu đầu mối liên kết khi đã thăm đích 
ALINK Đặt màu đầu mối liên kết khi kích hoạt 
Một vài mã màu hay dùng: 
Màu Mã 
black #000000 
white #FFFFFF 
pale grey #DBDDE5 
dark green #306020 
green #405060 
pale blue/green #00FFFF 
pale blue #A5D6F7 
navy blue #000020 
 52 
burgundy #800040 
yellow #FFFF00 
purple #601050 
red #FF0000 
orange red #FF2400 
orange #FF7F00 
neon blue #4D4DFF 
pale purple/orchid #9370DB 
maroon #8E236B 
scarlet #8C1717 
pale purple #6B238E 
firebirch #8E2323 
Tuy nhiên hiện nay nhiều trình duyệt chấp nhận dùng tên màu tiếng Anh 
thay cho các chữ số rất khó nhớ ở trên. 
VI.2. Nạp hình ảnh làm nền cho trang văn bản 
VI.2.1. Thuộc tính BACKGROUND 
Có thể dùng thuộc tính này để tạo một ảnh nền cho trang tài liệu siêu văn bản. 
Thay cho xác định màu ta cần chỉ ra tên tệp hình ảnh kèm đường dẫn. 
Nội dung tài liệu 
 ́
Ví dụ: 
Khi dùng ảnh làm nền cho trang Web cần phải nạp một tệp hình ảnh. Như ta 
đã biết tệp ảnh thường có kích thước lớn, làm chậm việc hiển thị trang tài liệu. Do 
đó cần chọn tệp ảnh có kích thước nhỏ làm ảnh nền. Toàn bộ trang văn bản sẽ được 
"lát nền" bằng hình ảnh này như ta lát nền nhà bằng gạch hoa. 
VI.2.2. Water mark 
Nhiều trang web có nền trang trí gắn chặt cố định, còn phần văn bản sẽ cuộn 
trôi bên trên mỗi khi ta di chuyển thanh trượt. Hiệu ứng này được tạo ra nhờ thiết 
lập thêm thuộc tính cho ảnh nền là 
 53 
bgproperties="fixed" 
Ví dụ: 
<BODY BACKGROUND="images/backgnd.gif" 
bgproperties="fixed"> 
VI.2.3. Hãy ký tên vào tài liệu của mình 
Một thông lệ nên tuân theo là "kí tên" vào tài liệu. Nó giúp cho người đọc 
biết được những thông tin tối thiểu về tác giả soạn ra tài liệu, thời gian cập nhật... 
Việc đưa thêm địa chỉ của tài liệu Web vào cuối trang sẽ giúp cho người đọc lưu lại 
được xuất xứ của trang tài liệu. Đó là chưa nói đến ý nghĩa quan trọng của phần 
chữ kí này trong các tài liệu chính thức hoặc có tính thương mại. 
Phần chữ kí thường gồm các thông tin sau: 
 Ngày khởi tạo lần đầu. 
 Ngày sửa chữa cập nhật gần nhất. 
 Tên (và e-mail) của tác giả 
 Tuyên bố về bản quyền (nếu cần ) 
 URL 
Đoạn mã HTML của phần chữ kí đại loại có thể như sau: 
Ngày viết: 20 September 1998 
Ngày cập nhật: 20 October 2001 
Tác giả: 
Nguyễn Văn Hùng email: 
webmaster@vitti.vnu.edu.vn"> 
Copyright © Viện Đào tạo công nghệ thông tin - 
VITTI, ĐHQG Hà nội, 1998. 
URL:  
 ́
 54 
Thẻ ... 
 là mối liên kết đến dịch vụ thư điện tử, khi trỏ chuột vào đây sẽ kích hoạt 
dịch vụ e-mail để gửi đến địa chỉ nêu sau lệnh mailto. 
Hãy tập thói quen thêm chữ kí vào tài liệu của mình! 
VI.3. Khung – Frames 
HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình 
duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu 
HTML khác nhau. 
Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác 
nhau để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn 
khung bên phải hiển thị tài liệu tương ứng. 
VI.3.1. Trang trí khung 
Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu 
trúc khác trang thông thường, không có khung. 
Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và 
FRAMESET thay cho BODY. 
Thành phần FRAMESET tổ chức các khung trong cửa sổ trình duyệt. Nó cũng 
có thể chứa thẻ NOFRAMES để xử lí trường hợp trình duyệt không hỗ trợ frame. 
Các thành phần thông thường khác vốn nằm trong BODY không được xuất 
hiện trước thẻ mở FRAMESET. Nếu không, thành phần FRAMESET sẽ bị bỏ qua. 
Ví dụ: 
Dưới đây là một ví dụ đơn giản. 
A simple frameset document 
 55 
 This frameset document contains: 
 ..... 
Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây. 
Hình VI.1. Kết quả chạy đoạn code ví dụ 
Khi trình duyệt khách không hỗ trợ khung thì các khung sẽ không được hiển 
thị mà thành phần NOFRAMES sẽ được xử lí. 
VI.3.2. Thành phần FRAMESET 
Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt 
thành các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được 
định nghĩa bằng thẻ FRAME. 
a. Các thuộc tính và ví dụ minh họa 
rows = Danh sách các độ cao của các khung 
 56 
 Danh sách gồm nhiều phần tử, cách nhau dấu phẩy. Mỗi phần tử xác định độ 
cao (số dòng !) của một khung. Chia chiều đứng thành bao nhiêu khung thì danh 
sách có bấy nhiêu phần tử. 
Chiều cao thể hiện bằng 
- số pixel, 
- tỷ lệ phần trăm chiều cao màn hình 
- hay tỷ lệ phần chiều cao còn lại. 
Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang. 
cols = Danh sách các độ rộng của các khung. 
ý nghĩa tương tự như trên. 
Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc. 
Thuộc tính row thiết lập việc chia khung theo chiều ngang trong một 
frameset. Nếu không định nghĩa, thì các cột trong khung sẽ chiếm toàn bộ chiều 
cao vùng hiển thị. 
Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset. 
Nếu không định nghĩa, thì các dòng trong khung sẽ chiếm toàn bộ chiều rộng vùng 
hiển thị. 
Phối hợp hai thuộc tính sẽ tạo ra ô lưới các khung. 
Các ví dụ. 
1- Chia màn hình thành hai nửa: nửa trên và nửa dưới: 
...the rest of the definition... 
2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột đầu chiếm 25% của 
phần còn lại và cột thứ 3 chiếm 75% của phần độ rộng còn lại. 
...the rest of the definition... 
3- Tạo lưới gồm 2 x 3 = 6 khung. 
...the rest of the definition... 
 57 
4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất chiếm 30% của chiều 
cao vùng hiển thị. Khung thứ hai có chiều cao cố định 400 pixel. Dấu sao có nghĩa 
là hai khung thứ 3, thứ 4 chia nhau phần còn lại. Khung thứ 4 có chiều cao là "2*", 
gấp đôi khung thứ 3 (vì "*" tương đương với 1*). 
Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của các khung 1,2,3,4 
lần lượt là: 300, 400, 100, 200 pixel !. 
...the rest of the definition... 
b. Chia khung lồng nhau và thành phần FRAME 
Việc chia khung có thể lồng nhau nhiều mức. 
Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được 
chia thành 2 phần trên và dưới. 
 ...contents of first frame... 
 ...contents of second frame, first row... 
 ...contents of second frame, second row... 
 ...contents of third frame... ...  cho một thư mục 
mới nơi các file của site sẽ được lưu trữ. 
4. Để chọn một thư mục khác, click nút Browse. Hộp thoại New Web Site 
Location sẽ xuất hiện. Sử dụng hộp thoại này để tìm kiếm và mở thư mục nơi 
ta sẽ lưu trữ các Web site mà ta sẽ làm việc trên đó bằng FrontPage. 
5. Mỗi site FrontPage phải được cung cấp thư mục riêng của nó. Để tạo một thư 
mục cho site được nhập vào này, click nút Create New Folder. Hộp thoại 
New Folder xuất hiện. 
6. Cho thư mục một tên trong Name và click OK. 
7. Trong hộp thoại New Web Site Location, click nút Open. Thư mục được liệt 
kê trong hộp thoại danh sách Specify the Location of the New Website trong 
Import Web Wizard. 
8. Click OK. Import Web Wizard mở ra. 
VIII.4.3. Chọn một phương pháp import 
Câu hỏi đầu tiên được hỏi bởi Import Web Site Wizard là cách để truy tìm 
site, như được trình bày ở hình dưới 
 152 
Hình VIII.32. Import Web Site Wizard 
Một site có thể được nhập theo năm cách, phụ thuộc vào vị trí của nó và kiểu 
truy cập nào mà ta có đối với vị trí đó: 
 FrontPage Server Extensions hoặc SharePoint Servicess, một kỹ thuật 
hiệu quả đòi hỏi một Web server được trang bị với một trong những tính 
năng này. 
 FPT (File Transfer Protocol), cách phổ biến nhất mà các file được trao 
đổi trên Internet. 
 HTTP (HyperTExxt Transfer Protocol), một cách để truy tìm các trang 
Web và các file khác vốn có thể truy xuất trên một mạng cục bộ. 
 WebDAV, một hệ thống tạo nội dung Web ít phổ biến hơn các phương 
pháp khác. 
Cách tốt nhất để nhập một site là sử dụng FrontPage Server Extensions hoặc 
SharePoint Services bởi vì điều này có thể truy tìm các trang và các file khác được 
đưa vào một Web site ngay cả nếu chúng không được trình bày trực tiếp cho các 
khách tham quan. 
Khi ta sử dụng FrontPage để tạo một Web site, nó sẽ làm việc với nhiều file 
ở hậu cảnh trong suốt quá trình chuẩn bị một trang. Ví dụ, nếu site của ta sử dụng 
một theme, sẽ có hơn hai chục file đồ họa và các thư mục con của nó. Những file 
này không bao giờ được biểu diễn trực tiếp cho những người tham quan site của ta. 
 153 
Thay vào đó, chúng được sử dụng bởi FrontPage để tạo các nút hover, đồ họa và 
định dạng các trang. 
Bằng cách sử dụng các server extension hoặc SharePoint Servicers, wizard 
cũng có thể nhập các site con (subsite) – các Web site được chứa bên trong các thư 
mục của một site khác. (Ví dụ, một Web site trong thư mục C:\My 
Sites\Sports\baseball). 
Nếu site để nhập nằm trên một phần mở rộng Web server hoặc SharePoint, ta 
có thể sử dụng chúng để nhập Web site này và toàn bộ site con của nó: 
1. Chọn FrontPage Server Extensions hoặc SharePoint Services. 
2. Nhập địa chỉ Web của trang chủ Web thuộc site vào trong trường text 
Web Site Location. 
Để đưa vào các site con, chọn hộp kiểm Include Subsites. 
Nếu site mà ta muốn nhập nằm trên máy tính của ta (hoặc trong một thư mục 
ở máy tính khác trên mạng của ta), ta có thể sao chép nó từ thư mục đó: 
1. Chọn tùy chọn File System và click đúp Browse. Hộp thoại New Publish 
Location xuất hiện. Sử dụng hộp thoại này để tìm và chọn thư mục chính 
của Web site (thư mục nơi trang chủ của nó được lưu trữ). 
2. Chọn thư mục và click Open. Thư mục được hiển thị trong trường text 
Web Site Location. 
3. Để nhập các site con cùng một lúc (nếu có), chọn hộp kiểm Include 
Subsites. 
Nếu site nằm trên một Web server mà ta có thể truy cập bằng cách sử dụng 
File Transfer Protocol (FTP), một tiêu chuẩn chung cho việc trao đổi các file với 
một Internet server, ta có thể sử dụng FTP account của ta để nhập site. Sau đây là 
cách thực hiện: 
1. Chọn FTP. 
2. Trong trường text Web Site Location, nhập địa chỉ của FTP server. Bởi vì 
nó đang sử dụng FTP, địa chỉ sẽ có ftp:// đứng trước thay vì http:// 
3. Trong trường Root Directory, gõ nhập vị trí và tên của thư mục mà ta chứa 
trang chủ của site. 
 154 
4. Nếu server đòi hỏi Passive FTP, click hộp kiểm Use Passive FTP. 
Nếu ta không thể tận dụng các phần mở rộng hoặc SharePoint, thì FTP là lựa 
chọn tốt nhất trong các tùy chọn còn lại. 
Nếu site nằm trên một Web server mà không được trang bị các phần mở rộng 
hoặc SharePoint (hoặc nếu ta không biết), ta có thể lưu các file bằng việc truy tìm 
chúng từ Web bằng cách sử dụng HTTP. 
Tùy chọn HTTP không hiệu quả bằng các phần mở rộng, SharePoint, hoặc 
FTP - chỉ lấy các trang được liên kết công cộng từ trang chủ. Nó cũng bỏ qua các 
file được sử dụng để tạo các trang đó, chẳng hạn như các theme FrontPage và 
những file khác vốn được sử dụng để tạo site. 
Tuy nhiên, biện pháp sau cùng là HTTP có thể được sử dụng để nhập site: 
1. Chọn HTTP. 
2. Nhập địa chỉ Web của trang chủ thuộc site trong trường text Web Site 
Location. FrontPage tỷ mỉ về địa chỉ: Thay vì sử dụng một địa chỉ chính 
chẳng hạn như www.example.com, nó cụ thể hơn và cũng tham chiếu tên 
của trang chủ (nói cách khác, một địa chỉ nào như 
www.example.com/index.html). 
3. Sau khi chọn một trong những phương pháp import, click Next để tiếp tục. 
Wizard được cập nhật để phản ảnh sự lựa chọn của ta. 
4. Nếu ta đang nhập một site từ một vị trí được bảo vệ bởi password, một 
hộp thoại Name and Password Required mở ra. Sử dụng các trường Name 
và Pasword để cung cấp thông tin đăng nhập của ta, và sau đó click OK. 
Sau khi chọn một phương pháp nhập, click Next. 
VIII.4.4. Chọn vị trí để lưu site 
Câu hỏi kế tiếp mà wizard có thể đặt ra là nơi để lưu site. Bởi vì ta đã chọn 
một thư mục, nó xuất hiện trong trường text trường Local Copy Location, trường 
này được tắt để ta không thể thay đổi nó. 
Tuy nhiên, có một cách để thay đổi một thực hiện một thay đổi nếu ta thay 
đổi ý định và chọn một thư mục khác: 
1. Hủy chọn hộp kiểm Add to Current Web Site. Trường Location Copy 
Location và nút Browse trở nên được chọn. 
 155 
2. Click nút Browse. Hộp thoại New Page Location xuất hiện. Sử dụng hộp 
thoại này để chọn (hoặc tạo) một thư mục mới nơi mà các file của site sẽ 
được lưu. 
3. Chọn thư mục và click Open. Hộp thoại đóng lại, đưa ta trở về wizard. 
4. Chọn hộp Add to Current Web Site. Click Next để đi đến câu hỏi kế tiếp. 
VIII.4.5. Thu thập thông tin phản hồi từ các khách tham quan Web site 
của ta 
Một trong những form dễ nhất để tạo là một trang phản hồi - một vị trí 
trong site của ta nơi những khách tham quan có thể gửi cho ta một lời nhận xét 
góp ý riêng tư. Điều này cung cấp một dịch vụ tiện lợi cho những khách tham 
quan của ta và có một ưu điểm thư hai – nó cho phép ta bỏ qua địa chỉ email 
của ta từ site của ta. 
Tại sao điều này lại hữu dụng? Khi ta bắt đầu xuất Web, bất kỳ địa chỉ email 
mà ta đặt trên một trang sẽ nhanh chóng được phát hiện bởi các spammer - những 
người tiếp thị email tạp nhạp lắp đầy các inbox bằng những lời đề nghị mang tính 
thương mại không cần thiết. 
Để tìm các địa chỉ để thêm vào các danh sách thư tín của họ, cá spammer 
thường xuyên sử dụng phần mềm để truy tìm các trang trên World Wide Web. Điều 
mà ta chắc chắn không thể tránh khỏi là site của ta sẽ được tìm thấy nhanh chóng 
bởi những chương trình này - thường là trong một thời gian ngắn từ một đến hai 
tuần. 
Bằng cách đặt một trang phản hồi thay vì địa chỉ của ta trên site của ta, ta sẽ 
giảm đi lượng spam mà ta nhận được. 
Để thêm một trang phản hồi vào site của ta, hãy thực hiện các bước sau: 
1. Mở site (nếu nó chưa được mở) và trên menu Standard chọn File New. 
Khung New mở nằm dọc theo cửa sổ biên soạn. 
2. Click hyperlink More Page Templates. Hộp thoại Page Templates mở ra, 
hiển thị các trang mà ta có thể tạo bằng cách sử dụng các template hoặc 
wizard. 
3. Chọn biểu tượng Feedback Form và click OK. Một trang phản hồi tạo sử 
dụng các màu, text và nền giống với phần còn lại của site. Nó mở trong 
cửa sổ biên soạn. Một đường chấm chấm biểu thị các đường viền của form. 
Mỗi phần của form phải được đặt trong đường biên soạn này. Ở đầu trang, 
 156 
một đoạn được tô màu đỏ tía mô tả form và cung cấp một số thông tin 
hướng dẫn về cách nó được sử dụng. Text này là một lời bình chú, text 
giải thích xuất hiện chỉ trong cửa sổ biên soạn của FrontPage chứ không 
phải khi một trang được xem trong một trình duyệt Web. (Để kiểm tra 
điều này, click nút Preview ben dưới cửa sổ biên soạn). 
Hình VIII.33. Hiệu chỉnh một trang phản hồi 
4. Để xóa lời chú thích, click nó một lần và nhấn phím Delete. 
5. Nếu ta muốn thay đổi cách diễn đạt của một câu hỏi, hiệu chỉnh nó như ta 
thường thực hiện đối với bất kỳ text khác trong FrontPage: Nhấp con trỏ 
trên trường và sử dụng bàn phím để thêm hoặc loại bỏ các thông tin. 
6. Việc định vị và định dạng các thành phần khác nhau của form cũng có thể 
được thay đổi giống như bất kỳ phần khác của một trang Web. 
7. Để xóa bất kỳ phần của form, kéo chuột lên trên nó và nhấn phím Delete 
Khi một trang phản hồi được tạo ra, FrontPage xác lập nó để lưu các câu trả 
lời sang file feedback.txt trong thư mục _private của Web site. 
 157 
Để thực thi điều này, ta phải xuất site của ta lên một Web server được trang bị 
bằng FrontPage Server Extensions hoặc SharePoint Servers, những cải tiến nhằm 
giúp những người sử dụng FrontPage thêm các tính năng đặc biệt (giống như vậy) 
vào các site của họ. 
Vào thời điểm này, ta có thể thay đổi cách thông tin phản hồi của khách tham 
quan được lưu như thế nào. Nó có thể được lưu sang một file theo nhiều dạng khác 
nhau hoặc gửi đến ta bằng một email. 
VIII.4.6. Lưu thông tin phản hồi của khách tham quan sang một file 
Những câu trả lời được thu thập trên một form có thể được lưu trữ trong một 
file trên Web server của ta theo ba dạng khác nhau: 
- Text - Dạng này có thể được xem trong một bộ biên soạn text hoặc được tải 
trong một chương trình cơ sở dữ liệu và trang bảng tính, chẳng hạn như 
Microsoft Acccess và Microsoft Excel. 
- HTML - Dạng này có thể được đọc bằng một trình duyệt. 
- XML – Đây là một dạng phổ biến cho dữ liệu được tích hợp rộng rãi vào 
FrontPage 2003 và các chương trình còn lại của bộ Office. 
Để lưu thông tin phản hồi sang một file, hãy thực hiện những bước sau đây: 
1. Click phải ở bất cứ nơi nào trong các đường viền của form - đường chấm 
chấm được minh họa ban đầu ở hình trên. 
2. Chọn Form Properties từ menu ngữ cảnh. Hộp thoại Properties xuất hiện 
như được minh họa trong hình dưới. 
 158 
Hình VIII.34. Chọn cách lưu thông tin phản hồi của khách 
3. Thông tin phản hồi của khách tham quan sẽ được lưu dưới dạng text. Để 
chọn một dạng khác, click nút Options. Hộp thoại Saving Results xuất hiện. 
4. Sử dụng hộp File Format xổ xuống để chọn một dạng cho thông tin phản 
hồi: 
 Để giúp ta đọc dễ dàng với Microsoft Excel và những chương trình cơ 
sở dữ liệu khác, hãy chọn Text Data-base Using Comma as a 
Separator. Điều này tạo một file text với phần mở rộng tên file.csv. 
 Để đọc nó bằng một trình duyệt Web, một lựa chọn tốt là HTML hoặc 
Formatted Text Within HTML. Điều này tạo ra một file.html vốn sử 
dụng cùng một định dạng với các trang Web mà ta tạo bằng 
ForntPage. 
 Để lưu theo dạng XML, chọn XML. Điều này tạo ra một file.xml. 
5. Click OK. 
6. Để chọn thư mục nơi file sẽ được lưu trữ ở đó, click nút Browse. Hộp 
thoại Current Web site xuất hiện. Sử dụng hộp thoại này để chọn một 
trong những thư mục trên site của ta. 
7. Click OK để đóng hộp thoại Form Properties. 
Form sẽ được xác lập để lưu trữ các thông điệp phản hồi trong một file được 
chỉ định. Nếu file này không hiện hữu khi một người nào đó sử dụng form phản hồi 
sẽ được tạo ra. 
 159 
VIII.4.7. Nhận thông tin phản hồi của khách tham quan bằng email 
Thông tin phản hồi cũng có thể được gửi đến ta bằng email thay vì được lưu 
trong một site của ta. 
Khi nó được gửi đến, nó trông giống như sau: 
Message Type: Suggestion 
Subject: Web Site 
Username: Sam Snett 
UserEmail: snett@samspublishing.com 
ContractRequested: ContacRequested 
Date: 22 Aug 2003 
Time: 21:19:30 
Comments: 
In this thing on? 
Trong email, các câu trả lời khác nhau trên form phản hồi được hiển thị trên 
các dòng riêng biệt. Trong ví dụ này, Sam Snett với địa chỉ email 
snett@samspublishing.com đã gửi một đề nghị với chủ đề “Web Site”. Mail 
hiển thị ở cuối. Sam đặt câu hỏi, “Is this thing on?” 
Thư phản hồi bắt nguồn từ một địa chỉ tự động trả lời được thiết lập bởi Web 
host của ta - ta có thể thay đổi địa chỉ này thành địa chỉ của người đang liên lạc với 
ta như một mô tả ở phần kế tiếp. 
Để gửi các trả lời phản hồi đến một địa chỉ email, hãy thực hiện các bước sau: 
1. Click chuột phải ở bất cứ nơi nào trong form và chọn Form Properties từ 
menu tắt vừa xuất hiện. Hộp thoại Form Properties mở ra. 
2. Nhập một địa chỉ email trong trường text E-mail Address. Địa chỉ này 
phải là địa chỉ email của ta hoặc địa chỉ của một người đang trả lời thư 
cho site của ta. 
3. Xóa bất kỳ text trong hộp Filename. Thông tin phản hồi sẽ được gửi bằng 
thư bằng cách sử dụng dạng của ví dụ SamSnett. Để chọn một dạng khác, 
click nút Options. Hộp thoại Saving Result xuất hiện. 
4. Click tab Email Result để đưa nó lên phía trước. 
5. Chọn một dạng trong hộp Email Format thả xuống. Các tùy chọn có sẵn 
giống như cá tùy chọn dành cho các file. Email phản hồi được cung cấp 
dòng chủ đề “Data posted to form 1”, theo sau là địa chỉ Web của trang 
phản hồi. 
 160 
6. Để xác lập một dòng chủ đề khác và giúp dễ dàng tìm những email này, 
hãy gõ nhập nó trong trường text Subject Line. 
7. Để tận dụng địa chỉ email của người đã điền đầy đủ thông tin vào form, 
nhập text UserEmail trong trường text Reply-To Line và chọn hộp kiểm 
Form Field Name nằm ngay kế bên nó (xem hình dưới). 
Hình VIII.35. Hộp thoại Saving Result 
Click OK để đóng hộp thoại Saving Results, và sau đó click OK để đóng hộp 
thoại Form Properties. 
Khi lưu kết quả của một form dưới dạng email, FrontPage có thể hiển thị một 
hộp thoại chỉ định rằng form không thể gửi kết quả bằng email và hỏi xem địa chỉ 
email có nên được loại bỏ hay không. 
Nếu ta biết rằng Web server của ta cung cấp các server Extensions hoặc 
SharePoint, hãy click No để giữ lại địa chỉ email và bỏ qua lời cảnh báo. Sau khi ta 
xuất trang phản hồi, nó sẽ hoạt động một cách chính xác. 
Bài tập 
1. Thay vì tự viết các thẻ HTML, hãy dùng công cụ FrontPage để tạo tất cả các 
trang Web cho các bài tập ở những chương trước. 
 161 
BẢNG CÁC TỪ VIẾT TẮT 
Browser: trình duyệt là chương trình đọc nội dung của file XML và hiển thị 
thông tin của file lên trên màn hình. 
Cascading Style Sheets: một ngôn ngữ khai báo cách hiển thị các phần tử 
trong file XML. 
Style sheet: là cách gọi tắt của Cascading Style Sheets nhưng nó ám chỉ đến 
một file chứa các khai báo style.7 
HTML: Hyper Text Markup Language. 
WWW: World Wide Web 
Markup: Đánh dấu 
Language: Ngôn ngữ 
Text: Văn bản 
Rect: Hình chữ nhật 
Circle: Hình tròn 
Polygon: Hình tam giác 
Transparency: Độ trong suốt 
 162 
TÀI LIỆU THAM KHẢO 
[1] 24 bài tự học thiết kế Web với Front Page 2003, Thuận Thành, NXB Thanh 
niên. 
[2] HTML, DHTML and JavaScript, Aptech WorldWide’s book. 

File đính kèm:

  • pdfgiao_trinh_html_va_thiet_ke_web_phan_2.pdf