ngôn ngữ đánh dấu siêu văn bản-html thiết kế web bằng frontpage 2000
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (816.69 KB, 24 trang )
NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN-HTML
THIẾT KẾ WEB BẰNG FRONTPAGE 2000
MỘT SỐ KHÁI NIỆM
- HyperText (Siêu văn bản) là một loại văn bản thông thường nhưng lại chứa một hay
nhiều tham chiếu tới các văn bản khác.
- Web page (Trang web): Là trang văn bản điện tử được tạo bởi ngôn ngữ HTML
(HyperText Markup Languange). Trang web có thể chứa hình ảnh, âm thanh, video,
- Web site: Là tập hợp các trang web có cấu trúc, có quan hệ với nhau và được liên kết
với nhau thông quan các siêu liên kết (Hyperlink).
- Web browser (Trình duyệt web): Là chương trình dùng hiển thị
các trang web. Ví dụ,
Internet Explorer, Netscape.
- Web server (Phục vụ web): Là một máy tính chứa dữ liệu mà web browser có thể truy
cập thông qua nghi thức HTTP.
- Nghi thức HTTP (HyperText Transfer Protocol): Nghi thức sử dụng trong dịch vụ
web dùng trao đổi thông tin giữa web browser và web server.
- URL (Uniform Resource Locator)-Bộ định vị đồng dạng: Là một vị trí hoặc một địa
chỉ để xác định thông tin trên Inte
Ví dụ:
A. NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN (HTML)
HTML là ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language), được sử
dụng để tạo các trang Web. Các trang Web được hiển thị nhờ vào m
ột trình duyệt Web (Web
Browser)
Tài liệu (Document) HTML được lưu dưới dạng siêu văn bản, có phần mở rộng là
*.htm hoặc *.html
1
Các thông tin trên Web được tổ chức theo dạng có cấu trúc. Các cấu trúc này được
định nghĩa thông qua các thẻ (Tag)
Thí dụ: <Title>Tựa đề của trang Web</title>
I. CÂU LỆNH CỦA HTML
Câu lệnh của HTML gọi là các thẻ (Tag)
Các thẻ bắt đầu bằng dấu "<" và kết thúc bằng dấu ">"
Các thẻ dùng đánh dấu phần văn bản được lựa chọn để hiển thị theo một dạng nhất
định nào đó
Có 2 dạng thẻ: Thẻ đơn và thẻ đôi
- Thẻ đôi: Văn bản được chứa giữa thẻ bắt đầu "<" và thẻ kết thúc ">". Thẻ kết thúc thì
được đặt dấu "/" trước tên thẻ:
<Tên-thẻ> Văn bản chứa ở đây </tên-thẻ>
- Thẻ đơn: Dùng để đánh dấu sự thay đổi trong cấu trúc văn bản, không có thẻ kết thúc,
thí dụ:
<br> để
xuống dòng
II. MỘT SỐ THẺ (TAG) THƯỜNG DÙNG TRONG NGÔN NGỮ HTML
Cấu trúc của một trang văn bản HTML gồm 3 phần:
<HTML>, </HTML>: mở đầu và kết thúc một chương trình
<HEAD><TITLE>, </TITLE></HEAD>: mở đầu và kết thúc phần đầu chương trình
<BODY>, </BODY>: mở đầu và kết thúc thân chương trình
Chẳng hạn:
<HTML>
<HEAD><TITLE>Tựa đề thí dụ</TITLE></HEAD>
<BODY>
Các thành phần của HTML
</BODY>
</HTML>
Thẻ ở mức cao nhất là <html>. Một tài liệu HTML sẽ bắ
t đầu bằng thẻ <html> và kết
thúc bằng </html>
Tất cả nội dung còn lại (văn bản, hình ảnh, ) đều nằm trong cặp thẻ <html> và </html>:
<html>
.
.
</html>
Sau thẻ <html> sẽ là <head> và <body>. Mỗi thẻ này đều có thẻ kết thúc.
Giữa cặp thẻ <head> sẽ là <title> và </title>, dùng đặt tựa cho trang Web. Toàn bộ
cấu trúc một tài liệu HTML sẽ là:
<html>
<head>
<title>This is a Title</title>
</head>
<body>
2
Tất cả thông tin trong trang Web
</body>
</html>
1.
2.
3.
4.
Thẻ <HTML>
Thẻ chính yếu của file HTML. Đánh dấu điểm bắt đầu và chấm dứt nội dung của file.
Thí dụ:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
Nội dung file gồm có 2 phần là <HEAD> và <BODY>
</HTML>
Thẻ <HEAD>
Nội dung nằm giữa thẻ nầy là phần tiêu đề của trang Web. Chúng không hiển thị khi
trình Browse đọc file.
<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>
Trong đó: <TITLE>: Đặt tên tiêu đề cho tài liệu.
Thẻ
<BODY>
Đây là thẻ chứa nội dung chính của file HTML. Dạng thức tổng quát như sau:
<BODY>
The rest of the document included here
</BODY>
Các thuộc tính:
BACKGROUND: Dùng chỉ định file hình ảnh làm nền:
<BODY BACKGROUND="imagename.gif">
Rest of the document goes here
</BODY>
Hình nền phải có dạng thức GIF hay JPG. Nếu dùng Internet Explorer sẽ hổ trợ thêm
dạng BMP.
BGCOLOR: Xác lập màu cho nền:
<BODY BGCOLOR="#rrggbb"> Rest of document goes here </BODY>
Với "#rrggbb" là giá trị hexadecimal (thập lục) red-green-blue
Thẻ <HR>
Đường gạch ngang để phân cách các đoạn trong trang Web.
Thuộc tính:
<HR SIZE=number>: Chỉ định kích thướ
c.
<HR WIDTH=number/percent>: Chỉ định độ rộng
<HR ALIGN=left/right/center>: So lề
<HR NOSHADE>: Không bóng
<HR COLOR>=name/#rrggbb: Chỉ định màu giống BGCOLOR
3
Thí dụ:
<HR>
<HR SIZE="5">
<HR WIDTH="50%">
<HR WIDTH="50%" ALIGN="right">
<HR WIDTH="50%" ALIGN="center" NOSHADE>
5.
6.
7.
Thẻ <Hn> (n=1 6)
HTML có 6 mức chuẩn cho tiêu đề (heading). Xác lập bằng các thẻ từ <H1> cho đến
<H6>.
Thí dụ:
<H1>This is a first level heading heading</H1>
<H2>This is a second level heading</H2>
Kết quả:
This is a first level heading heading
This is a second level heading
Bạn có thể sử dụng thuộc tính ALIGN để canh lề cho tiêu đề.
Thí dụ:
<H1 ALIGN=center>This is a centred heading</H1>
Thẻ <P>
Định dạng cho 1 đoạn văn bản (paragraph).
Thí dụ:
<P>The paragraph element is used to denote paragraph blocks</P>
<P>This would be the second paragraph.</P>
Hiển thị:
The paragraph element is used to denote paragraph blocks
This would be the second paragraph.
Thuộc tính:
ALIGN=left/center/right:
Thí dụ:
<P ALIGN=LEFT> </P> Có nghĩa: Tất cả text trong paragraph nầy sẽ được canh về
bên trái lề trang. Đây cũng là mặc định.
<P ALIGN=CENTER> </P> Canh giữa
<P ALIGN=RIGHT> </P> Canh phải
Thẻ <BR>
Thẻ nầy dùng để ngắt một đoạn văn và xuống hàng mới.
Thí dụ:
<P>
Mary had a little lamb<BR>
It's fleece was white as snow<BR>
Everywhere that Mary went<BR>
She was followed by a little lamb.
4
Hiển thị:
Mary had a little lamb
It's fleece was white as snow
Everywhere that Mary went
She was followed by a little lamb.
8. Các thẻ định dạng văn: <B>, <I>, <U>
• Thẻ <B>: Thẻ làm đậm (bold) dòng văn bản.
Thí dụ:
The instructions <B>must be read</B> before continuing.
Khi hiển thị sẽ có dạng sau :
The instructions must be read before continuing.
• Thẻ <I>: Thẻ làm nghiên (Italic) dòng văn bản.
Thí dụ:
The instructions <I>must be read</I> before continuing.
Khi hiển thị sẽ có dạng sau :
The instructions must be read before continuing.
• Thẻ <U>: Thẻ gạch dưới (Underline) dòng văn bản.
Thí dụ:
The instructions <U>must be read</U> before continuing.
Khi hiể
n thị sẽ có dạng sau :
The instructions
must be read before continuing.
9. Danh sách phân loại
Đây là một danh sách có thể được sử dụng để nhóm các yếu tố hoặc ý kiến tương tự.
Chúng ta có thể dễ dàng đọc lướt qua các danh sách và ghi nhớ các yếu tố tương ứng.
HTML cung cấp một nhóm khá đa dạng các kiểu danh sách khác nhau. Mỗi loại danh
sách này có một cấu trúc định dạng riêng. Chúng bao gồm:
• Danh sách có trật tự
Sắp xếp văn bản theo kiểu danh sách. Thường đ
i chung với <LI> (list item).
Mã nguồn
Kết quả
<OL>
<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3
</OL>
1. Yếu tố 1
2. Yếu tố 2
3. Yếu tố 3
Thuộc tính:
TYPE:
Chỉ định cách đặt ký hiệu đầu dòng:
(TYPE=A) - Chữ hoa. Thí dụ: A, B, C
(TYPE=a) - Chữ thường. Thí dụ: a, b, c
5
(TYPE=I) - Số La Mã hoa. Thí dụ: I, II, III
(TYPE=i) - Số La Mã thường. Thí dụ: i, ii, iii
(TYPE=1) - Số á Rập (mặc định). Thí dụ: 1, 2, 3
START:
Khai báo số dùng làm mặc định và sẽ được chuyển đổi qua TYPE trước khi hiển thị.
Chẳng hạn, START=5 sẽ được hiển thị là 'E', 'e', 'V', 'v', hay '5' theo TYPE.
Thí dụ :
Mã nguồn
Kết quả
<OL TYPE=a START=3>
<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3
</OL>
c. Yếu tố 1
d. Yếu tố 2
d. Yếu tố 3
• Danh sách không có trật tự
Danh sách không có trật tự đánh dấu (chẳng hạn các núm tròn) cho từng yếu tố của danh
sách.
Mã nguồn
Kết quả
<UL>
<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3
</UL>
• Yếu tố 1
• Yếu tố 2
• Yếu tố 3
• Danh sách định nghĩa
Mỗi yếu tố của danh sách bao gồm hai thành phần:
Tiêu đề được căn lề phía trái (chỉ ra bởi thẻ <DT>)
Phần giải nghĩa được căn lề thụt hơn sang phía phải (chỉ ra bởi thẻ <DD>)
Mã nguồn
Kết quả
<DL>
<DT>Yếu tố 1
<DD>Chú giải cho yếu tố 1
<DT>Yếu tố 2
<DD>Chú giải cho yếu tố 2
</DL>
Yếu tố 1
Chú giải cho yếu tố 1
Yếu tố 2
Chú giải cho yếu tố 2
10. Siêu liên kết- Thẻ <a>
Một đặc tính quan trọng nhất của ngôn ngữ HTML và Web là liên kết. Liên kết cho phép
người dùng nhảy từ vị trí này đến vị trí khác trong cùng trang Web hay trang Web khác.
Để thực hiện được điều này, người ta sử dụng thẻ <a>. Đây là thẻ xác lập cho việc liên
kết.
Các thuộc tính của thẻ nầy như sau:
HREF:
6
Thuộc tính HREF chỉ định địa chỉ liên kết, dòng văn bản sau dấu = là địa chỉ đối tượng
liên kết (được bao trong cặp ""). Dòng văn bản giữa dấu <A> và </A> là đối tượng chủ
của mối nối liên kết. Khi bạn kích chuột vào đối tượng chủ trong trình Browse, bạn sẽ
được chuyển đến đối tượng liên kết.
Thí dụ:
<A HREF=" HTMLib site</A> for updated
info on the HTMLib.
Trong thí dụ, nếu bạn kích vào dòng "The HTMLib Site" . Bạn s
ẽ chuyển đến địa chỉ
Bạn có thể thêm "#identifier" để chỉ định chuyển đến 1 vị trí được quy định sẳn trong đối
tượng liên kết.
Thí dụ:
The <A HREF="document.html#glossary">glossary</A> defines terms used in the
document.
Trong thí dụ, chọn "glossary" sẽ được chuyển đến tài liệu document.html, ngay tại vị trí
tên glossary trong tài liệu nầy.
Thí dụ vài thẻ liên kết sau:
<A HREF="http:// "> Liên kết với 1 Web Site.
<A HREF="ftp:// "> Với 1 Ftp Site.
<A HREF="mailto: "> Với 1 địa chỉ gởi Mail. Liên kết nầy sẽ kích ho
ạt chương trình
Mail và tự động điền địa chỉ vào mục To dùm bạn. Bạn có thể khai báo luôn cả chủ đề thư
(?subject).
Thí dụ:
<A HREF="mailto:">link text</A>
NAME:
Thuộc tính NAME cho phép bạn đánh dấu vị trí để làm đích cho các tài liệu khác liên kết
qua.
Thí dụ:
<A NAME="coffee">Coffee</A> is an example of
An example of this is <A HREF="#coffee">coffee</A>.
Các tài liệu khác có thể liên kết với tài liệu nầy ngay tại vị trí đã xác định.
<A NAME="drinks.html#coffee">
TARGET:
Trình duyệt - Browser có thể nạp đối tượ
ng liên kết vào 1 cửa sổ chỉ định bằng thẻ nầy.
Nếu cửa sổ nầy chưa có, trình Browse sẽ mở 1 cửa sổ mới. Chủ yếu thẻ nầy dùng cho
frames.
Dạng chung: <A HREF="url.html" TARGET="window_name">Link text</A>
window_name: Là tên đặt cho Frame.
Khi bạn bấm vào dòng "Link text", trang "url.html" sẽ được nạp vào frame có tên chỉ
định.
11. Hình ảnh trong trang Web- Thẻ <IMG>
Bạn có thể chèn các file hình vào tài liệu HTML
7
Một số thuộc tính:
ALIGN="left/right/top/texttop/middle/absmiddle/baseline/bottom/absbottom": So
hàng hình ảnh với Text (canh lề).
ALT="Alternative Text": Cho hiển thị 1 dòng text thay thế cho file hình trong
trường hợp trình Browse đang ở trong chế độ không hiển thị hình ảnh. Dòng Text nầy
cũng hiển thị theo dạng ToolTip khi dời Mouse đến hình.
Thí dụ:
<IMG SRC="star.gif" ALT="Warning:"> Be sure to read these instructions.
SRC="URL of image": Chỉ định điạ chỉ file hình chèn vào trang Web.
<IMG SRC="warning.gif">Be sure to read these instructions.
WIDTH=value/ HEIGHT=value: Chỉ định khoảng cách dành sẳn cho hình trong khi
trình Browse nạp toàn bộ hình.
Chẳng hạ
n, hình thứ 2 có đọ rộng gấp đôi hình thức 1:
BORDER=value: Chỉ định cho hiển thị đường viền bao quanh hình ảnh. Bạn có thể
chọn "0" để hiển thị đường viền màu xanh khi có liên kết.
Thí dụ:
<IMG SRC="hiquality.gif" LOWSRC="lowquality.gif">
Đầu tiên trình Browse sẽ hiển thị file hình "lowquality.gif". Sau khi nạp hoàn tất cả trang,
trình Browse sẽ nạp file hình chính thức vào thay thế.
12. Thẻ <TABLE>
Tạo bảng trong trang Web.
Thuộc tính:
BORDER="value": Điều khiển việ
c hiển thị và kích thước đường viền. Nếu giá trị
=0 là không có viền.
CELLSPACING="value": Chỉ định khoảng cách giữa các ô. Giá trị mặc định là 2.
CELLPADDING="value": Chỉ định khoảng trắng giữa đường viền và ô. Giá trị mặc
định là 1
WIDTH="value or percent": Chỉ định độ rộng bảng tính theo pixels, hay % của cửa
sổ hiển thị.
HEIGHT="value or percent": Chỉ định độ cao bảng.
ALIGN="left/right": Canh lề trái, phải.
VALIGN="top/bottom": Canh lề trên, dưới.
BGCOLOR="#rrggbb|colour name": Chỉ định màu nền cho bảng.
BORDERCOLOR="#rrggbb|colour name": Chỉ định màu cho đường viền của bảng.
8
BORDERCOLORLIGHT="#rrggbb|colour name": Chỉ định màu cho phần được
chiếu sáng của đường viền.
BORDERCOLORDARK="#rrggbb|colour name": Chỉ định màu cho phần bị tối
của đường viền.
BACKGROUND="URL of image": Chỉ định file hình ảnh dùng làm nền cho bảng.
13.
14.
15.
Thẻ <TD>
Định dạng cho dữ liệu trong bảng (Table data). Chỉ định nầy có giá trị cho ô dử liệu.
Thuộc tính:
ALIGN="left/center/right". VALIGN="top/middle/bottom/baseline": Canh lề cho
Text trong ô (so với ô).
WIDTH="value_or_percent"/ HEIGHT="value_or_percent": Chỉ định kích thước
cho ô. Bạ
n chỉ cần xác lập cho 1 ô chuẩn theo hàng hay cột, các ô khác sẽ giống như vậy.
COLSPAN="value": Mở rộng ô theo cột. Giá trị mặc nhiên là 1.
ROWSPAN="value": Mở rộng ô theo hàng.
BGCOLOR="#rrggbb|colour name"/ BORDERCOLOR="#rrggbb|colour name"/
BORDERCOLORLIGHT="#rrggbb|colour name"/
BORDERCOLORDARK="#rrggbb|colour name"/ BACKGROUND="URL of
image":
Chỉ định màu cho nền ô, đường viền ô, hình nền ô. Cách xác lập giống như bảng.
Thẻ <TR>
Xác lập cho hàng (table row).
Thuộc tính và cách xác lập giống như ô <TD> và bảng <TABLE>.
Thẻ <TH>: Tạo dòng tiêu đề
Một số thí dụ về cách tạo bảng:
Thí dụ 1:
TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Hiển thị:
A B C
D E F
Thí dụ 2:
TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
9
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Hiển thị:
Head1
Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H
Thí dụ 3:
<TABLE BORDER>
<TR> <! ROW 1, TABLE 1 >
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <! ROW 1, TABLE 2 >
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <! ROW 2, TABLE 2 >
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <! ROW 2, TABLE 1 >
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
Hiển thị:
3
A B
1 2
C D
10
4 5 6
16. Tạo khung (FRAME) trong tài liệu HTML
• <FRAME>:
Có 9 thuộc tính: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING,
NORESIZE, FRAMEBORDER, FRAMESPACING and BORDERCOLOR.
SRC="url": Chỉ định file sẽ được hiển thị trong Frame.
NAME="frame_name": Đặt tên cho Frame. Tên nầy dùng làm đích khi cần hiển thị
file trong 1 Frame nhất định.
Thí dụ: <A HREF="URL" TARGET="frame_name">
Theo mặc nhiên các Frame sẽ không có tên.
MARGINWIDTH="value"/ MARGINHEIGHT="value": Chỉ định giá trị tính bằng
Pixels cho lề trái, phải (Width) và trên, dưới (Height).
SCROLLING="yes/no/auto": Chỉ định cho thanh cuộn cửa sổ trong trường hợp nội
dung vượt quá sức chứa c
ủa Frame.
NORESIZE: Theo mặc nhiên, tất cả Frame có thể điều chỉnh được kích thước. Thuộc
tính nầy không cho điều chỉnh.
FRAMEBORDER="yes/no/0": Chỉ định việc hiển thị khung viền cho Frame. Chọn
"yes/0" cho Internet Explorer và "yes/no" cho Netscape.
FRAMESPACING="value": Chỉ định khoảng cách giữa các Frame. Tính theo Pixels.
Thí dụ: <FRAME FRAMESPACING="40" >
• <FRAMESET>:
Đây là thẻ chính của Frame.Các thuộc tính như sau:
ROWS="row_height_value_list": Chỉ định chiều dọc Frame theo Pixels, phần trăm
hay tỷ lệ.
Thí dụ: Tạ
o 3 Frame theo chiều dọc, Frame đầu tiên có kích thước 20% cửa sổ,
Frame 2 có kích thước 100 pixels và Frame 3 dùng toàn bộ khoảng trống còn lại của cửa
sổ.
<FRAMESET ROWS="20%, 100, *">
Thí dụ: Chia 2 Frame có kích thước 1/4 và 3/4 cửa sổ.
<FRAMESET ROWS="25%, 75%"> Hay <FRAMESET ROWS="*, 3*">
COLS="column_width_list": Giống như ROWS nhưng tính theo chiều ngang.
BORDER="pixel value": Kích thước đường viền
BORDERCOLOR="#rrggbb hay colour name": Chỉ định màu cho đường viền
Thí dụ:
<HTML>
<HEAD>
<TITLE>The HTML Reference Library - HTMLib</TITLE>
</HEAD>
<HTML>
<HEAD>
11
<TITLE>The HTML Reference Library - HTMLib</TITLE>
</HEAD>
1 <FRAMESET COLS="25%,*">
2 <FRAMESET ROWS="100, *">
3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="no" NAME="buttons">
4 <FRAME SRC="qr.htm" NORESIZE SCROLLING="yes" NAME="QR">
5 </FRAMESET>
6 <FRAMESET ROWS="75, *">
7 <FRAME SRC="title.htm" NORESIZE SCROLLING="no" NAME="TITLE">
8 <FRAME SRC="intro.htm" NORESIZE SCROLLING="auto" NAME="main">
9 </FRAMESET>
10 </FRAMESET>
</HTML>
</HTML>
Các Frame trên được hiển thị như sau:
Số thứ tự dòng chỉ để phân tích, không có trong file:
1 <FRAMESET COLS="25%,*"> : Chia 2 Frame 1, 2 theo chiều ngang có kích thước
1=25% và 2=75%.
2 <FRAMESET ROWS="100,*"> : Trong Frame 1 chia thành 2 Frame 3, 4 theo chiều
dọc. Có kích thước 3=100 pixels chiều cao, 4=kích thước Frame 1 còn lại.
3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="yes"
NAME="buttons"> : Chỉ định file sẽ nạp vào Frame 3 là buttons.htm. Frame nầy không
cho resizing và luôn luôn hiển thị thanh cuộn. Tên Frame là BUTTONS
4 <FRAME SRC="qr.htm" NORESIZE SCROLLING="yes" NAME="QR"> :
Giống dòng 3, nạp vào Frame 4 file qr.htm. Frame nầy có tên là QR.
5 </FRAMESET> : Dòng nầy dùng kết thúc FRAMESET trong dòng 2.
6 <FRAMESET ROWS="75,*"> : Dòng nầy chia Frame 2 còn lại thành 2 Frame 5, 6 có
kích thước 5=75 pixels, 6=khoảng trống còn lại.
7 <FRAME SRC="title.htm" NORESIZE SCROLLING="no" NAME="TITLE"> :
Nạp file vào Frame 5, không Resize, không thanh cuộn. Đặt tên cho Frame 5 là TITLE.
8 <FRAME SRC="intro.htm" NORESIZE SCROLLING="auto" NAME="main"> :
Giống như trên như
ng có tên là MAIN và thanh cuộn tự động xuất hiện nếu cần thiết.
12
9 </FRAMESET> : Đóng FRAMESET trong dòng 6
10 </FRAMESET> : Đóng FRAMESET trong dòng 1
Khi cần nạp liên kết vào Frame nào bạn chỉ cần dùng thuộc tính Target="tên Frame".
Thí dụ:
<A HREF="qr.htm#QRM" TARGET="QR">
<IMG SRC="images/m.gif" BORDER="0" WIDTH="17" HEIGHT="17" ALT="M">
</A>
Hiển thị vị trí #QRM của file qr.htm trong Frame có tên QR khi bấm vào hình m.gif
B. THIẾT KẾ WEB BẰNG FRONTPAGE 2000
1. CÀI ĐẶT FRONTPAGE 2000
FrontPage 2000 là ứng dụng trong bộ Microsoft Office 2000. Khi cài đặt Office 2000,
ta chỉ việc chọn FrontPage 2000 để có thêm ứng dụng này trong hệ điều hành Windows.
Để mở FrontPage 2000, chọn Start->Program->Microsoft FrontPage
2. TẠO WEB SITE
-
Sau khi mở FrontPage 2000, để tao web site chọn File->New->Web
- Lựa chọn One Page Web và thư mục trên máy tính để tao web site. Sau đó nhấp vào
OK để tạo một web site mới:
13
- Hiện tại FrontPage 2000, sẽ mở một trang trắng, có dạng như sau:
- Nhấp vào nút Navigation View:
- Bạn sẽ thấy cấu trúc của web site hiện hành
Bạn thấy chỉ có một trang web trên web site hiện hành gọi là Home Page. Trang web
này có tên là index.htm (thông thường phần mở rộng là *.htm hoặc *.html).
Nhấp chuột phải vào Home Page và chọn Properties nếu bạn muốn biết tên và vị trí
của file này.
- Để tạo trang web mới, nhấp chuột phải vào Home Page và chọn New Page
14
- Bạn có thể đổi tên tựa (title) của các trang web bằng cách nhấp chuột phải vào nó và
chọn Rename.
- Để sửa trang web (Home Page) chẳng hạn, nhấp double vào trang đó và gõ nội dung:
Chúng ta thấy trên cửa sổ FrontPage 2000 có 3 chế độ hiển thị. Thông thường ta soạn
thảo trực tiếp ở chế độ NORMAL. Khi soạn thảo FrontPage 2000 tự sinh mã thành và ta có
thể thấy ở chế độ HTML. PREVIEW để hiển thị thử như trên trình duyệt web.
3. SỬ DỤNG THEME
Nếu muốn thay đổi “diện mạo” của toàn bộ web site hay một vài trang web, bạn có thể
sử dụng Theme từ menu Format:
15
Khi đó bạn có thể chọn bất cứ Theme nào nếu thấy “được mắt”.
Ngoài các theme có sẵn khi cài đặt FrontPage 2000, ta có thể tự thiết kế hay chỉnh sửa
một số các đối tượng trên theme hiện hành. Để làm điều này, bạn nhấp chọn Modify:
4. THÊM HÌNH ẢNH VÀO TRANG WEB
Để xen hình ảnh vào trang web, bạn hãy chọn Insert->Picture->From File
16
Nếu ảnh đã tồn tại trong thư mục của web site, bạn chỉ việc chọn nó; Nếu ảnh ở một vị
trí khác, nhấp vào
để chọn ảnh ở một nơi bất kỳ trên máy của bạn
- Để xen hình ảnh vào trang web, bạn đặt con trỏ ngay vị trí cần xen
- Hình ảnh lưu trên trang web thường ở 2 dạng
o JPG: Ảnh muốn lưu có hơn 256 màu
o GIF: Ảnh cần lưu có ít hơn 256 màu
Ví dụ xen vào ảnh:
- Ta có thể thay đổi kích thước của ảnh bằng cách nhấp chọn ảnh và drag một trong 8
nút bao quanh ảnh
- Nếu ảnh được xen từ Clip art (hoặc ảnh không phải dạng GIF, JPG), khi lưu trang web
nó sẽ tự động chuyển về dạng GIF hoặc JPG
- Thuộc tính của ảnh:
o Để thay đổi thuộc tính của ảnh, nhấp chuột phải vào ảnh và chọn Picture
Properties, hộp hội tho
ại Picture Properties xuất hiện như sau:
17
o Ở tab General:
Picture Source: Cho biết vị trí của ảnh
Alternative Representations->Text: Để hiển thị thông tin về ảnh đó mỗi
khi đưa chuột đến, ví dụ:
o Ở tab Appearance:
Layout: Để canh lề, xác định đường viền xung quanh ảnh
Size: Xác định kích thước ảnh thay vì drag chuột
5. TẠO SIÊU LIÊN KẾT
Siêu liên kết (Hyperlink) dùng để liên kết đến vị trí khác trong web. Có 2 dạng liên
kết:
- Liên kết trong: Là liên kết đến vị trí khác trong cùng trang web
- Liên kết ngoài: Là liên kết đến trang web khác (hoặc một vị trí của trang web khác)
Để tạo liên kết, ta làm như sau:
o Chọn đối t
ượng làm liên kết (có thể là văn bản hoặc hình ảnh)
o Từ menu Insert, chọn Hyperlink
o Nếu đích đến của liên kết thuộc web site của bạn, chọn file từ “Look in”;
Ngược lại chọn một trong tác vụ dưới đây:
18
Bookmarks
Hoặc chọn
một trong
các nút này
Hoặc gõ
tên file
Chọn file liên kết tại các
vị trí này
Bookmarks được sử dụng để tạo liên kết đến một vị trí bất kỳ trong trang web. Người
ta thường sử dụng để “nhảy” về đầu một trang trong trang web lớn bằng nhiều trang màn
hình.
- Để thêm bookmarks ta làm như sau:
o Lựa chọn văn bản hoặc hình ảnh làm đích đến của liên kết
o Từ menu Insert, chọn Bookmarks, gõ vào tên Bookmarks, sau đó chọn OK
- Sau khi tạo Bookmarks, tạo liên kết đến Bookmarks đó:
o Chọn văn bản hoặc hình ảnh làm liên kết
o Từ menu Insert, chọn Hyperlink
o Ta chọn tên Bookmarks từ cửa sổ Edit Hyperlink
19
6. TẠO BẢNG TRONG TRANG WEB
Bảng (table) là phương tiện giúp ta trình bày thông tin trên web được rõ ràng và hấp
dẫn hơn. Để thêm bảng vào trang web, ta thực hiện như sau:
- Chọn Table->Insert->Table
- Chọn số dòng và số cột của bảng từ mục Size:
- Ở mục Layout, cần xác định một số thuộc tính:
o Alignment: Xác định vị trí của bảng
o Border size: Độ dày của đường viền
o Cell padding: Khoảng cách giữa đường viền và ô (cell)
o Cell spacing: Khoảng cách giưuã các ô
o Specify width: Xác định độ rộng của bảng (bằng pixel hoặc bằng phần trăm)
Ví dụ về bảng: Tạo bảng 1 dòng, 4 cột
20
Nhấp chuột phải vào bảng và chọn Table properties, sau đó xác định lại Borders,
Cell Padding và Cell Spacing.
Với bảng này, khi ta xen ảnh và văn bản vào,
do độ cao của các ảnh không bằng nhau nên văn
bảng không được thẳng hàng. Để giải quyết vấn đề
này, ta cần thêm một hàng cho bảng, bằng cách chọn
Table->Insert->Rows or Columns vaÌ lựa chọn
thêm một dòng.
Thực hiện thao tác cắt, dán để được trang như
dưới đây:
7. TẠO KHUNG (FRAME)
21
* Tạo khung :
Khung trang là dạng trang web đặc biệt dùng để chia cửa sổ ra thành nhiều khung
khác nhau.
Để tạo khung trang, từ cửa sổ FrontPage 2000:
- Chọn File->New và nhấp vào mục Frames Pages
- Chọn một kiểu Frame, khi đó FrontPage 2000 sẽ hiển thị trước cho chúng ta xem:
- Khi thực hiện chọn OK, khung trang màn hình sau sẽ xuất hiện:
22
Mỗi khung có 2 nút chọn:
o Set Initial Page: Để lựa chọn một trang web có sẵn làm khung
o New Page: Tạo trang mới cho khung đó
Khi lưu lại, mỗi khung sẽ là một trang web + một trang web cho khung trang. Ví dụ,
khung trang trên sẽ gồm 4 trang web.
Trên khung trang ta có thể thay đổi độ rộng cho các khung rất đơn giản bằng cách drag
chuột.
*
Tạo liên kết cho khung :
Trên khung trang, thường các danh mục được bố trí bên trái. Đó là các mục được liên
kết đến các trang web khác. Khi nhấp vào, nội dung sẽ được hiển thị ở khung bên phải. Để
làm điều này, khi tạo liên kết cần chú ý:
o Ở cửa sổ Edit Hyperlink, chọn mục Target frame:
Nhấp chọn
Target frame
o Sau đó, chọn Page Dèfault (main)
Chọn New
Windows để mở
cửa sổ mới
Ở bất kỳ khung nào, khi tạo liên kết, nếu chọn thuộc tính của Target Frame là New
Windows thì liên kết đó sẽmơr ra một cửa sổ mới khi được nhấp vào
*
Chia khung thành nhiều khung khác :
23
Sau khi chia khung, bạn có thể cắt khung (split frame) thành nhiều khung nhỏ theo
chiều ngang hay chiều dọc.
o Kích chọn khung cần cắt
o Từ menu Frame chọn Split Frame
o Chọn kiểu cắt (ngang hoặc dọc)
*
Xóa khung :
o Chọn khung cần xóa
o Chọn Delete Frame từ menu Frame
* Thuộc tính của khung :
Để thay đổi các thuộc tính của khung, nhấp chuột phải vào khung và chọn Frame
Properties:
24
