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úcchươ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ẻ
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, ví dụ , 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

Phần I – Thực hiện trong 1h30’ đầu:
Ví dụ 1: Đoạn mã HTML minh họa một thẻ liên kết

TO OPEN THE NEW DOCUMENT

CLICK HERE

Chú ý: 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)

This is a sample html document



Cú pháp:

CLICK HERE

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ụ 1 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)




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

Trong đoạn mã đã định sẵn bốn neo “anchor” được định nghĩa như sau:

Overview
Benefits
Features
Technical Specifications

HUBS DETAILS

Overview

Benefits

Features

Technical Specifications

Overview

BayStack SNMP, Advanced, and SA 10Base-T Stackable Hubs from Bay Networks offer simple, scable solutions for supporting small and growing Ethernet networks......

Benefits

Scalable from 12 to 260 Nodes Baystack 10BASE-T Hubs deliver a simple and cost-effective method for starting and growing Ethernet networks......

Features

The BayStack 10BASE-T Hubs deliver simple, scalable, plug-and play solutions for small and growing Ethernet net-work environments.....

Technical Specifications

Technical Specifications for the BayStack 10BASE-T Hubs are shown in Table 1.....

Kết quả của ví dụ 2 hiển thị như hình 2.2




Hình 2.2 a: Kết quả của ví vụ 2



Hình 2.2 b: Kết quả của ví dụ 2 sau khi kích vào Overview