Session02 lab HTML Lập Trình Web Tĩnh
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 (559.73 KB, 10 trang )
Chương 2
Giới thiệu và các siêu liên kết
Mục tiêu bài học:
Kết thúc phần này, bạn có thể:
Viết những tài liệu HTML đơn giản
Sử dụng các siêu liên kết (Hyperlinks)
Sử dụng thẻ <META>
Sử dụng các ký tự đặc biệt trong HTML
hững b c đ r tr ng ch ơng này đ đ c chi tiết h
t ng uát c n phải thực hiện the
tr nh tự các b c
t cách c n th n Việc này đ c thực hiện đ r n luyện các ục tiêu đ đ c
h c à hi u
t cách h àn ch nh các c ng cụ Thực hiện các b c s u đ y
t cách c n th n
à the tr nh tự s u :
1. T th
tr ng th
2.
ục HTML- HTML- S-E
ục này ( ếu kh ng c đ
h y ch ơng tr nh
3.
đ n
4.
ch à
ples tr ng đ
: à l u t t cả các ile ht l ch
h y t tr ng đ
:\)
tep d b ng cách k ch à n t St rt
à ch n Access ries
dụ
ile ch n S e As
5. L u ile i đu i ht l tr ng th
ục : HTML- HTML- S-E
dụ l b (L b đ biết đ y là dụ tr ng bài L b
ples
h n tên th ch h p
H ặc
6. L u n tr ng th
7.
8.
ục đ ng nh p c
nh
h y Internet Explorer.
ch à
Examples
ile
pen ch n
r
se à ch n ile t
th
ục
:\HTML-DHTML-JS-
Phần I: (1.5 giờ)
Ví dụ 1: Đoạn mã HTML minh họa một thẻ kết nối
<HTML>
<HEAD>
<TITLE> First Linked Document </TITLE>
</HEAD>
<BODY>
<H1> TO OPEN THE NEW DOCUMENT <BR>
<A HREF="TEST.HTML">CLICK HERE </A>
{ PAGE }
</H1>
</BODY>
</HTML>
h ý : Tr c khi ch y đ n
này th ile TEST HTML phải tồn t i
i dung c n nh s u :
(M
t ile tep d
i g n i dung à l u i tên ile TEST HTML tr ng cùng th
ục c
ile nguồn
<HTML>
<HEAD>
<TITLE> A sample HTML Document </TITLE>
</HEAD>
<BODY>
<P> This is a sample html document
</BODY>
</HTML>
pháp :
<A HREF="TEST.HTML">CLICK HERE</A>
sẽ t
LI
TEST.HTML
ết uả c
HERE nh
t liên kết à khi k ch à liên kết này n sẽ đ
dụ nh h nh 2.1
Hình 2.1a : Kết quả ví dụ 1 (trước khi kích vào liên kết)
{ PAGE }
b n đến trang
Hình 2.1 b :
Kết quả của ví dụ 1(sau khi kích vào liên kết)
Ví dụ 2 : Cuộn đến vị trí trong cùng tài liệu
Tr ng đ n
đ định sẵn bốn ne
nch r đ
c định ngh nh s u :
Overview
Benefits
Features
Technical Specifications
<HTML>
<HEAD>
<TITLE>Linking in the Same Document </TITLE>
</HEAD>
<BODY>
<H1><CENTER> HUBS DETAILS </CENTER></H1>
<A HREF="#Overview">Overview</A><BR>
Hyperlinks to the named
<A HREF="#Benefits">Benefits</A><BR>
anchors in the same page
<A HREF="#Features">Features</A><BR>
<A HREF="#Technical Specifications">Technical
Specifications</A><BR>
<H2><A NAME="Overview"> Overview </H2><BR>
<P> BayStack SNMP, Advanced, and SA 10Base-T Stackable
Hubs from Bay Networks offer simple, scable solutions for
supporting small and growing Ethernet networks......
</P>
Anchor Name
<H2><A NAME="Benefits">Benefits</A></H2><BR>
<P>Scalable from 12 to 260 Nodes Baystack 10BASE-T
Hubs deliver a simple and cost-effective method for
starting and growing Ethernet networks......
</P>
<H2><A NAME="Features">Features</A></H2><BR>
{ PAGE }
<P>The BayStack 10BASE-T Hubs deliver simple,
scalable, plug-and play solutions for small and growing
Ethernet net-work environments.....
</P>
<H2><A NAME="Technical Specifications">Technical
Specifications</A></H2><BR>
<P>Technical Specifications for the BayStack 10BASE-T
Hubs are shown in Table 1.....</P>
</BODY>
</HTML>
ết uả c
v dụ hi n thị nh h nh
H nh
Hình 2.2 b :
{ PAGE }
: ết uả c
ụ
Kết quả của ví dụ 2 sau khi kích vào Overview
Hình 2.2 c :
Hình 2.2 d :
Kết quả của ví dụ 2 sau khi kích vào Benefits
Kết quả của ví dụ 2 sau khi kích vào Features
{ PAGE }
Hình 2.2 e :
Kết quả của Ví dụ 2 sau khi kích vào Technical Specifications
Ví dụ 3 : Dùng ký tự đặc biệt trong tài liệu HTML
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
<P><CODE>If A > B Then <BR> A = A - 1 </CODE>
<P><CODE>If A < B Then <BR> A = A + 1 </CODE>
<P> The above
statements used special characters
</BODY>
</HTML>
Hình 2.3 : Kết quả của ví dụ 3
{ PAGE }
Ví dụ 4 : Dùng phần tử <META>
<HTML>
<HEAD>
<META http-equiv="Refresh" content="2">
<TITLE> Using META Element </TITLE>
</HEAD>
<BODY>
<P>This page is refreshed after every 2 seconds
</BODY>
</HTML>
Hình 2.4 : Kết quả của ví dụ 4
hi tr ng trên (V dụ 4 hi n thị trên tr nh duyệt ch ý à th nh tr ng thái Tr ng
t ơi l i (n p l i s u ỗi h i gi y
h ý : ếu c thời gi n thử l i những
eb sẽ là
dụ tr ng ph n lý thuyết ch ơng
{ PAGE }
Phần II: (0.5 giờ)
1. Viết
t tr ng eb
tả
gi đ nh à các t nu i c b n
ch à liên kết M tả gi
đ nh n sẽ đ b n đến ph n
tả gi đ nh
hi k ch à liên kết M tả t nu i n
sẽ đ b n đến ph n
tả
t nu i c b n
Gợi ý : Sử dụng ne
nch r
à những ph n tử đ n
2. Viết c u lệnh HTML đ hi n thị dòng sau tr ng t tr ng eb
For more information, please send an e-mail to me,
"mailto:" }
Gợi ý : Đặt c u lệnh sau à tr ng ph n <
Y> c
ile HTML
<A HREF=MAILTO:”>
</A>
{ PAGE }
{
HYPERLINK
Tự thực hành
1. Viết đ n
2. Viết
HTML trỏ đến đ n
tb ll tr ng tr ng My ile ht l t tr ng irst ht l
t tài liệu HTML đ giải th ch cách dùng các ký tự đặc biệt.
{ PAGE }
This page is intentionally left blank
{ PAGE }
