Tài liệu CHƯƠNG 3: NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN doc

Khái niệm HTML hay HyperText Markup Language là ngôn ngữ đánh dấu siêu văn bản, đây làmột ngôn ngữ thông dụng được định dạng để báo cho trình duyệt Web – WebBrowser làm thế nào để hiện t

Trang 1

CHƯƠNG 3: NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML – HYPER TEXT MAKEUP LANGUAGE

I Khái niệm

HTML hay HyperText Markup Language là ngôn ngữ đánh dấu siêu văn bản, đây làmột ngôn ngữ thông dụng được định dạng để báo cho trình duyệt Web – WebBrowser làm thế nào để hiện thị một trang Web trên màn hình máy tính Ngônngữ HTML không phải là một ngôn ngữ lập trình, HTML gọi là ngôn ngữ chỉ vì nó gồmcác tập hợp nhỏ các nhóm ký tự theo một quy tắc mà chúng ta dùng để quy định kiểu dáng,

vị trí, cách thức của văn bản, ảnh, âm thanh hay bất cứ một đối tượng nào khác cùng với sựliên kết giữa chúng Các trang viết bằng ngôn ngữ HTML có cấu trúc như sau:

Thông tin được đặt giữa hai dấu tag <body> và

</body> là nội dung của trang Web </body>

</html>

Một tài liệu HTML gồm hai phần riêng biệt là phần đầu (head) và phần thân (body) Phần đầu chứa đựng những thông tin về tài liệu và không được hiển thị lên trên màn hình Phần thân chứa đựng mọi thứ

trình bày lên trên màn hình như là một phần của trang Web Toàn bộcông việc để thành lập một trang HTML nằm trong cặp tag <html> …

</html> Bên trong cặp tag <html> … </html> là cặp tag <head>…

</head> và sau đó là cặp tag <body>… </body>

Lưu ý:

− Tag <title>… </title> được đặt ở giữa hai cặp tag

<head>… </head> ý nghĩa của cặp tag <title>… </title>

được sử dụng để nhận dạng của một tài liệu và được hiển thịtrên thanh tiêu đề của cửa sổ Browser

− Tag chú thích được bao bởi <! blah blah blah >

Dòng văn bản giữa những tag này KHÔNG được hiển thị trong

Trang 2

trang Web, tag này dùng để đặt những thông tin ghi chú hoặcgiải thích làm rõ thêm ý nghĩa cho nội dung trang Web Khi trangWeb có nhiều thông tin và trở nên phức tạp thì chúng ta cần phải

sử dụng những tag này để minh hoạ và chú thích

II Ý nghĩa của các Tag HTML

1 Các thẻ mở rộng trong phần thẻ tag <HTML> và thẻ tag <HEAD>

a Thẻ tag <HTML>

Đây là thẻ chính yếu của tập tin dạng HTML, thẻ <HTML>đánh dấu điểm bắt đầu và chấm dứt nội dung của một tậptin dạng html

<head>

<title> Tên tiêu đề giới thiệu tập tin

</title>

</head>

 Phần mở rộng trong thẻ tag <head>

Trong nội dung thẻ tag <head> có thể chứa cácthành phần sau:

− Thẻ tag <base> dùng để khai báo một địa chỉ

cơ bản cho tập tin dạng html

− Thẻ tag <title> dùng để đặt tên tiêu đề cho

Trang 3

Lưu ý: Hình nền phải có dạng thức *.gif hay *.jpg, nếu

dùng trình duyệt Web Internet Explorer sẽ hổ trợ thêmdạng *.bmp

Trang 4

− BGCOLOR: Xác lập màu nền cho trang Web

Hệ màu được thiết lập theo hệ thập lục phân

Trình duyệt Web Netscape có thể xác lập 140 màu theo hệ thập lục như sau:

Trang 5

Màu hiển thị Số thập lục

phân

Màu hiển thị Số thập lục

phân

lightgoldenrodye

llow

Trang 6

Trang 7

Màu hiển thị Màu hiển thị Màu hiển thị Màu hiển thị

− TEXT: Thuộc tính này chỉ định màu cho văn bản

thường trong tập tin html

Trang 8

<title>Test </title>

</head>

<body bgcolor="yellow" text="blue">

<p> Chao mung cac ban den voi lop hoc Thuong mai dien tu va Ung dung Internet </p>

</body>

</html>

Hiển thị trên trình duyệt Web

− LINK, VLINK và ALINK: Các thuộc tính này dùng

chỉ định màu cho các dòng văn bản là đối tượngchủ cho mối nối liên kết

Trong đó LINK là liên kết chưa xem VLINK là liên kết đã xem

ALINK là liên kết đang xem

Trang 9

Lưu ý: Mặc định là LINK=blue (#0000FF), VLINK=purple (#800080) và ALINK=red (#FF0000)

Cách thức xác lập màu giống BGCOLOR và TEXT

− LEFTMARGIN: Thuộc tính này dùng để canh lề

Lưu ý: X là một số nguyên, được tính bằng số lượng pixel

từ bên trái sang

Trang 10

− TOPMARGIN: Thuộc tính này dùng để canh lề bên

Lưu ý: X là một số nguyên, được tính bằng số lượng pixel

từ trên xuống dưới

Trang 11

2 Các thẻ định nghĩa đoạn văn bản, kiểu chữ

a Thẻ tag P: Định nghĩa đoạn văn bản.

Cú pháp: <P> nội dung đoạn văn bản </P>

 Các thuộc tính của thẻ P

− <P ALIGN=LEFT> </P>: Tất cả nội dùng nằm giữa

tag này sẽ được canh về bên phía trái lề trang web Đây cũng là thẻmặc định

− <P ALIGN=CENTER> </P>: Tất cả nội dung nằm giữa hai tag này sẽ được canh giữa

− <P ALIGN=RIGHT> </P>: Tất cả nội dung nằm

giữa hai tag này sẽ được canh phải

Trang 12

<p> Day la noi dung doan text thu 1 </p><br>

<p> Day la noi dung doan text thu 2 </p><br>

Trang 13

c Thẻ tag H: Quy định kích cỡ của tiêu đề.

<H1> Tieu de co chu lon nhat (H1) </H1><br>

<H2> Tieu de co chu lon thu hai (H2) </H2><br>

<H3> Tieu de co chu lon thu ba (H3) </H3><br>

<H4> Tieu de co chu lon thu tu (H4) </H4><br>

<H5> Tieu de co chu lon thu nam (H5) </H5><br>

<H6> Tieu de co chu nho nhat</H6>

</body>

</html>

Trang 14

<p> Phan text chu khong to dam </p><br>

<p><b> Phan text chu to dam </b></p>

</body>

</html>

Trang 15

e Thẻ tag I: Hiển thị chữ in nghiêng.

<p> Phan text chu khong in nghieng </p><br>

<p><i> Phan text chu in nghieng </i></p>

</body>

</html>

Trang 16

f Thẻ tag U: Hiển thị chữ gạch chân.

<p> Phan text chu khong gach chan </p><br>

<p><u> Phan text chu gach chan </u></p>

</body>

</html>

Trang 17

g Thẻ tag FONT: Quy định font chữ.

Cú pháp: <FONT FACE=”tên font” COLOR=”mã màu hoặc tên màu”size=”số nguyên”>

Một số tên font thông dụng: .VnTime; .VnTimeH; .VnArial;.VnArialH;.VnAvant;

Mã nguồn

<html>

<head>

<title>Test </title>

</head>

<body>

<p> <font face="Arial" color="#000000" size="2">

Trang 18

Phần text có font Arial theo chuẩn Unicode, cỡ chữ bằng 2, màu đen </font> </p><br>

</body>

</html>

h Thẻ tag Sub: Hiển thị chữ nhỏ chỉ số dưới.

Trang 19

Mã nguồn

<html>

<head>

<title>Test</title>

Trang 20

i Thẻ tag Sup: Hiển thị chữ nhỏ chỉ số trên.

Trang 21

</head>

<body>

<font face="Arial" color="blue" size="3"> Phan testfont chu Arial theo chuan Unicode, co chu bang 3, mauxanh</font><font face="Arial" color="red" size="2"><sup>Chi so tren</sup></font>

Trang 22

</html>

j Thẻ tag DL: Dùng để định nghĩa một danh sách.

Trang 23

</DL>

Trang 24

Mã nguồn

<html>

<head>

</head>

<body>

<DL><B><I>De muc danh sach</I></B>

<DT>Danh sach muc 1</DT>

<DD>Danh sach muc 2</DD>

<DT>Danh sach muc 1</DT>

<DD>Danh sach muc 2</DD>

Trang 25

k Thẻ tag UL: Tạo danh sách có bullets

Trang 26

<LI>Text2</LI>

<LI>Test3</LI>

Trang 27

a Thẻ tag OL: Tạo danh sách có đánh số theo thứ tự.

Cú pháp:

Trang 28

<LI>Text2</LI>

<LI>Test3</LI>

Trang 29

b Thẻ tag HR: Tạo đường gạch ngang để phân cách các đoạntrong trang Web

− <HR ALIGN=left/right/center>: Canh lề trái,phải và giữa

− <HR COLOR=”#rrggbb”>: Chỉ định màu giốngBGCOLOR

Ví dụ: tạo đường gạch ngang có độ rộng bằng 10 và có màuxanh

Trang 30

c.

Thẻ tag CENTER: Đoạn văn bản nằm giữa tag này sẽ được định dạng canh giữa so

với lề trái và lề phải

Trang 32

trước, khi trình duyệt Web hiển thị trang Web nằm giữa hai tag này sẽđược định dạng canh giữa so với lề trái và lề phải

Thẻ này chỉ được hỗ trợ riêng cho trình duyệt Internet Explorer, các trình duyệtWeb khác không hỗ trợ thẻ này

Cú pháp:

< MARQUEE>Nội dung dòng chữ chạy nằm ở đây< /MARQUEE>

 Các thuộc tính của thẻ MARQUEE:

− ALIGN="left/right/top/middle/bottom": Canhdòng văn bản so với khung chứa văn bản đó

− BEHAVIOR="scroll/slide/alternate": Chỉ định kiểuchữ chạy

+ SCROLL: Dòng chữ chạy theo một hướngnhất định và lập đi lập lại quá trình đó.Đây là thuộc tính mặc nhiên

− <FONT FACE=”tên font” COLOR=”mã màu hoặc tên màu”size=”số nguyên”>

Trang 34

3 Các thẻ định nghĩa hình ảnh, âm thanh

a Thẻ tag IMG: Thẻ này dùng để chèn một hình ảnh vào tập

tin html

Cú pháp:

 Các thuộc tính của thẻ IMG

− ALIGN="left/right/top/texttop/middle/absmiddle/baseline/bottom/absbottom": Thuộc tính này dùng để

so hàng hình ảnh với các dòng văn bản trong web

− ALT="Alternative Text": Thuộc tính này cho hiển thịmột dòng văn bản thay thế cho tập tin hình ảnhtrong trường hợp trình duyệt Web đang ở trong chế

độ không hiển thị được hình ảnh Dòng văn bản nàycũng hiển thị theo dạng ToolTip khi dời Mouse đếnhình

− SRC="URL of image": Chỉ định địa chỉ tập tin hìnhchèn vào trang Web

− WIDTH=”value”/ HEIGHT=”value”: Chỉ định khoảngcách dành sẳn cho hình trong khi trình duyệt Webnạp toàn bộ hình

− BORDER=”value”: Chỉ định cho hiển thị đường viềnbao quanh hình ảnh Giá trị value là số nguyêndương

− VSPACE=”value” HSPACE=”value”: Quy địnhkhoảng trống giữa hình và đoạn văn bản VSPACEcho trên và dưới hình, HSPACE cho trái và phải hình.Giá trị value được tính theo đơn vị pixel

Trang 35

Thẻ tag BGSOUND: Thẻ này dùng để liên kết trang Web với

một tập tin hình ảnh, khi trình duyệt Web hiển thị trang Webthì cũng đồng thời phát ra tập tin âm thanh Tập tin âm thanhphải thuộc một trong các dạng *.wav, *.au hoặc *.midi

Cú pháp:

 Các thuộc tính của thẻ BGSOUND

</body>

</html>

Trang 36

− SRC: Chỉ định điạ chỉ file âm thanh

− LOOP=n: Chỉ định số dòng lập lại Nếu n=-1 hayLOOP=INFINITE là cho lập liên tục

CHƯƠNG 4: GIỚI THIỆU FRONT PAGE 2002

Có rất nhiều chương trình để tạo một trang Web như Frontpage, Hotdog, Dreamweaver Trong chương này sẽ giới thiệu với các bạn sử dụng và làm quen với chương trìnhFrontpage 2002, trong chương này chúng ta sẽ học:

• Mở FrontPage

• Tạo trang Web

• Làm việc với văn bản và liên kết

Khi mở Frontpage 2002, giống như bất cứ một chương trình soạn thảo nào, chúng ta

sẽ thấy một loạt các công cụ phía trên Các công cụ này có thể cho hiển thị hoặc khôngbằng cách click chuột phải lên thanh công cụ rồi chọn loại công cụ cần hiển thị Nếu đây làlần đầu tiên bạn mở FrontPage, một trang trắng được tạo ra sẵn

Trang 37

 Nếu FrontPage được sử dụng để hiệu chỉnh một Web site nào đó, nó sẽ tự động mởWeb site đó mỗi lần khởi động.

 Đề đóng Web site: vào menu File, chọn Close Web

Cửa sổ Frontpage

Đây là hình ảnh của một trang Web được mở bằng Frontpage

Trang 38

Các thành phần Mô tả

Title Bar Hiển thị tên của trang Web và vị trí của trang

Trang 39

Trang Website

Ask a Question Box Hổ trợ người sử dụng khi cần hướng dẫn thực hiện

các thao tác

Scroll Bars Dùng để di chuyển trên trang hiện hành

Status Bar Thanh trạng thái, thường dung để quan sát đích

của các liên kết

Page View Panes Các khung hiển thị trang: Gồm 3 chế độ normal,

html và preview

Progress Indicator Chỉ thị của tiến trình

Estimated Download Time Thời gian tải trang ước lượng

Thanh công cụ Standard và Formating Các thanh công cụ thường sử dụng

II Tạo trang Web – Tạo trang chủ

Trang chủ là cánh cuả để đi vào web site cuả bạn Nó chứa thông tin về nội dung vàcác vấn đề người đọc có thể quan tâm Trên trang chủ thường có chứa các liên kết đến cáctrang khác Cách thức tạo mới một trang chủ như sau:

2 Trên trang trắng trong chế độ View Page, nhập Chào mừng các bạn đến với Microsoft Front Page 2002! Và nhấn ENTER Giống như trong Word nhấn

enter có nghĩa là xuống hàng

3 Kế tiếp nhập đoạn sau Đây là chương trình dùng để thiết kế trang Web cho những người không chuyên Dùng Front Page chúng ta có thể tạo được một trang Web rất nhanh chóng, đơn giản và không tốn nhiều công sức.

Giả sử nội dung cuả Web site đã được chuẩn bị sẵn, chúng ta có thể đưa các tài liệu

đã có vào trong các trang Web mà không cần phải gõ lại

Trang 40

Kế tiếp ta sẽ đưa một ảnh vào trong trang Web Trong ví dụ này ta sẽ nhập vào hìnhsau:

III Chèn Hình ảnh và Tập tin

Thực hiện chèn hình vào trang chủ

1 Vào menu Insert, chọn Picture, và bấm From File FrontPage hiển thị ra hộp thoại Picture.

2 Tại hộp Look In, Chọn ổ đĩa và thư mục chứa hình

3 Chọn tên hình có tên cpu, bấm nút Insert.

4 Nhấn ENTER đề xuống hàng

Trang 41

Nếu chúng ta chỉ chèn hình và chữ vào trang chủ thì người dùng không thề dichuyển đến các trang khác Muốn tạo ra các đối tượng có thể bấm chuột vào được, taphải gán các liên kết vào các đối tượng đó.

Trang 42

Một liên kết là một địa chỉ cuả một trang khác ở trong phạm vi Website hoặc trênInternet.

Tạo ra một liên kết có nghĩa là cho phép người dùng di chuyển đến một trang khácbằng cách bấm chuột vào đối tượng đó

IV Tạo liên kết từ hình ảnh.

1 Trên trang chủ, bấm chọn hình mới thêm vào

2 Vào menu Insert, chọn Hyperlink (hoặc bấm Ctrl+K) FrontPage hiển thị hộp thoại Insert Hyperlink Trong hộp thoại này ta sẽ đưa vào đích của liên kết.

3 Trong hộp Address, nhập www.intel.com.

Lưu ý

− Frontpage sẽ tự động thêm tiếp đầu ngữ http HTTP là tên tắt cuả HypertextTransfer Protocol Đây chính là một giao thức Internet để cho các trình duyệt có thểtruy xuất thông tin từ Web server

− Trong ví dụ trên khi người dùng bấm vào hình họ sẽ được chuyển đến trangchủ của Intel

4 Chọn OK để kết thúc tạo liên kết

1 Nhấn Ctrl+Home để trở về đấu trang.

2 Trong menu Insert, Chọn Picture, và chọn From File.

Trang 43

3 Nhấp đúp vào tên tập tin hình logo.gif FrontPage sẽ chèn hìnhvào vị trí hiện hành.

4 Nhấn ENTER để đưa dòng tiêu đề xuống hàng

 Canh giữa văn bản và hình ảnh.

Để canh giữa các thành phần trên một trang chúng ta thực hiện như sau:

1 Vào menu Edit, chọn Select All.

2 Vào menu Format, chọn Paragraph.

3 Trong danh sách Alignment, chọn Center, sau đó nhấn OK.

4 Bấm tạ bất kỳ vị trí nào trên trang để thôi chọn

 Lưu trang hiện hành

1 Vào menu File, chọn Save As Trong hộp thoại Save As, chọn My Documents trong cây thư mục.

2 Tại vị trí hộp Page Title, bấm nút Change Title.

3 Trong hộp Set Page Title, gõ Home Page và bấm OK.

4 Trong hộp File Name, gõ homepage, và bấm Save.

Hiển thị các thẻ HTML trên trang hiện hành.

• Trong Page view , chọn Reveal Tags trong menu View

• FrontPage hiển thị cách biểu diễn các thẻ HTML Điềunày thật sự có ích nếu người sử dụng biết về mã HTML

• Để che giấu các thẻ, bấm Reveal Tags trên menu View

một lần nữa

Tiêu đề	Chương 3: Ngôn Ngữ Đánh Dấu Siêu Văn Bản
Trường học	Đại học Sư phạm Hà Nội
Chuyên ngành	Thương mại điện tử và Ứng dụng Internet
Thể loại	Giáo trình
Năm xuất bản	N/A
Thành phố	Hà Nội

Định dạng
Số trang	68
Dung lượng	7,3 MB