Thực hành phần giới thiệu và các siêu liên kết
Kết thúc chương 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 Các bước trong ...
Kết thúc chương 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
Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.
- Tạo thư mục HTML-DHTML-JS-Examples trong ổ đĩa D: và lưu tất cả các file .html chỉ trong thư mục này. (Nếu không có đĩa D, hãy tạo trong ổ đĩa C:)
- Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”.
- Gõ đoạn mã ở ví dụ 1
- Kích vào File chọn Save As
- Lưu file với đuôi .html trong thư mục D:HTML-DHTML-JS-Examples. Chọn tên thích hợp,
lab21 (Lab21 để biết đây là ví dụ 1 trong bài Lab 2)
Hoặc
- Lưu nó trong thư mục đăng nhập của mình
- Chạy Internet Explorer.
- Kích vào File → Open, chọn Browse và chọn file từ thư mục D:HTML-DHTML-JS-Examples
Thực hiện trong 1h30’ đầu
Đoạn mã HTML minh họa một thẻ liên kết <a>
<HTML>
<HEAD>
<TITLE> First Linked Document </TITLE>
</HEAD>
<BODY>
<H1>TO OPEN THE NEW DOCUMENT <BR>
<A HREF="TEST.HTML">CLICK HERE </A>
</H1>
</BODY>
</HTML>
Trước khi chạy đoạn mã này thì file TEST.HTML phải tồn tại. Nội dung của nó như sau: (Mở một file Notepad mới gõ nội dung và lưu với tên file TEST.HTML trong cùng thư mục của file nguồn)
<HTML>
<HEAD>
<TITLE> A sample HTML Document </TITLE>
</HEAD>
<BODY>
<P> This is a sample html document
</BODY>
</HTML>
Cú pháp:
<A HREF="TEST.HTML">CLICK HERE</A>
Nó sẽ tạo “CLICK HERE” như một liên kết và khi kích vào liên kết này nó sẽ đưa bạn đến trang TEST.HTML
Kết quả của ví dụ 2 hiển thị như hình 1:
Kết quả ví dụ 2 (trước khi kích vào liên kết)
Kết quả của ví dụ 2 (sau khi kích vào liên kết)
Trong đoạn mã đã định sẵn bốn neo “anchor” được định nghĩa như sau:
- 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>
<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>
Kết quả của ví dụ 3 hiển thị như hình 3
Kết quả của ví vụ 3
Kết quả của ví dụ 3 sau khi kích vào Overview
Kết quả của ví dụ 3 sau khi kích vào Benefits
Kết quả của ví dụ 3 sau khi kích vào Features
Kết quả của Ví dụ 3 sau khi kích vào Technical Specifications<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>
Kết quả của ví dụ 4<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>
Kết quả của ví dụ 5Khi trang trên (Ví dụ 4) hiển thị trên trình duyệt, chú ý vào thanh trạng thái. Trang web sẽ làm tươi lại (nạp lại) sau mỗi hai giây
Thực hiện trong 1h30’ tiếp theo
- Viết một trang web mô tả về gia đình và các vật nuôi của bạn. Kích vào liên kết “Mô tả gia đình” nó sẽ đưa bạn đến phần mô tả về gia đình . Khi kích vào liên kết “Mô tả vật nuôi“ nó sẽ đưa bạn đến phần mô tả về vật nuôi của bạn.
Gợi ý: Sử dụng neo “anchor” và những phần tử “đoạn”
- Viết câu lệnh HTML để hiển thị dòng sau trong một trang web.
For more information, please send an e-mail to me, Garywilson@MyCompany.com
Gợi ý: Đặt câu lệnh sau vào trong phần <BODY> của file HTML.
<A HREF=MAILTO:Garywilson@MyCompany.com"> Garywilson@MyCompany.com </A>
- Viết đoạn mã HTML trỏ đến đoạn “Football” trong trang MyFile.html từ trang First.html (<A href=”ten tai lieu can mo #ten diem neo can den”>)
- Viết một tài liệu HTML để giải thích cách dùng các ký tự đặc biệt.
