Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở đi Và kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Trang 1Chươ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 ục HTML- HTML- S-E ples tr ng đ : à l u t t cả các ile ht l ch
tr ng th ục này ( ếu kh ng c đ h y t tr ng đ :\)
2 h y ch ơng tr nh tep d b ng cách k ch à n t St rt à ch n Access ries
3 đ n dụ
4 ch à ile ch n S e As
5 L u ile i đu i ht l tr ng th ục : HTML- HTML- S-E ples h n tên th ch h p
dụ l b (L b đ biết đ y là dụ tr ng bài L b
H ặc
6 L u n tr ng th ục đ ng nh p c nh
7 h y Internet Explorer
8 ch à ile pen ch n r se à ch n ile t th ục :\HTML-DHTML-JS-Examples
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>
Trang 2
</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 HERE nh t liên kết à khi k ch à liên kết này n sẽ đ b n đến trang TEST.HTML
ết uả c 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)
Trang 3Hì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>
<A HREF="#Benefits">Benefits</A><BR>
<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>
<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>
Hyperlinks to the named anchors in the same page
Anchor Name
Trang 4
<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 : ết uả c ụ
Hình 2.2 b : Kết quả của ví dụ 2 sau khi kích vào Overview
Trang 5Hình 2.2 c : Kết quả của ví dụ 2 sau khi kích vào Benefits
Hình 2.2 d : Kết quả của ví dụ 2 sau khi kích vào Features
Trang 6
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
Trang 7Ví 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 eb sẽ là
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 dụ tr ng ph n lý thuyết ch ơng
Trang 8
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, { HYPERLINK
"mailto:Garywilson@MyCompany.com" }
Gợi ý : Đặt c u lệnh sau à tr ng ph n < Y> c ile HTML
<A HREF=MAILTO:Garywilson@MyCompany.com”>
Garywilson@MyCompany.com </A>
Trang 9Tự thực hành
1 Viết đ n HTML trỏ đến đ n tb ll tr ng tr ng My ile ht l t tr ng irst ht l
2 Viết t tài liệu HTML đ giải th ch cách dùng các ký tự đặc biệt
Trang 10
This page is intentionally left blank
