Giáo trình thiết kế web (nghề tin học ứng dụng trình độ cao đẳng)

GIỚI THIỆU VỀ NGÔNNGỮ HTML HTML tiếng Anh, viết tắt cho HyperText Markup Language, hay 1a "Ng6n ngữ Đánh dấu Siêu văn bản" là một ngôn ngữ đánh dấu được thiết kế ra dé tạo nên các trang

25/03/2019 cia Higu truémg Truong Cao ding GTVT Trung wong I

TUYEN BO BAN QUYEN

"Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dẫn đùng cho các mục đích về đào tạo và tham khảo

Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh

thiểu lành mạnh sẽ bị nghiêm cắm

Mã tài liệu: THUD - MH22

LOINOI DAU

'Ngày nay, khi Internet đã trở nên quen thuộc và gần gũi với con người trong

xã hội, thậm chí là công cụ không thế thiếu trong cuộc sống hiện đại thì việc đưa thông tin quảng bá, tìm kiếm thông tin, giao dịch mua bán trên Internet là những

hoạt động thường xuyên của các dân cư mạng Chính vì vậy nhu cầu thiết kế được những trang web hấp dẫn, thu hút nhiều người truy cập là mục tiêu và mơ ước của rất nhiều người

“Xuất phát từ nhu cầu đó, cuốn giáo trình trước hết sẽ cung cấp cho người đọc những kiến thức cơ bản nhất, hiểu được cấu tạo và cách thiết kế một trang web đơn

giản Bên cạnh đó là những lời khuyên để giúp những người mới bước chân vào chưa có kinh nghiệm, có được định hướng, từ đó tạo ra những trang web có giao diện đẹp, phù hợp với tiêu chí, mục đích của trang web và thu hút nhiều người xem

Đồng thời cuốn giáo trình này cung cấp cho các em học sinh sinh viên những kiến thức về Thương mại điện tử, hiện đang là một trong những phương thức kinh

doanh mang lại nhiều lợi ích cho nhân loại và là phương thức kinh doanh đại diện

cho nền kinh tế trì thức

Giáo trình “ Thiết kế Website" không những sử dụng làm giáo trình nội bộ

trong Nhà trường mà còn được sử dụng cho việc giảng dạy và học tập của giảng viên, học sinh - sinh viên ngành Tìn học ứng dụng trình độ Cao đẳng - Trường Cao đẳng nghề GTVT Trung ương I

Giáo trình Thiết kế Website là tập hợp nhiều giáo trình căn bản gồm:

Chương I: Thiết kế website bằng ngôn ngữ HTML

Chương 2: Thiết kế website bằng chương trình Microsoft FrontPage

Chương 3: Thiết kế website bằng Dreamwearer

Mặc dầu có rất nhiều cố gắng khi biên soạn, nhưng không thể tránh khỏi những sai sót, vì vậy rất mong nhận được sự góp ý của độc giả để giáo trình hoàn thiện hơn

Xin chân thành cảm ơn!

NHÓM BIÊN SOẠN

MỤC LỤC

CHƯƠNG I: GIỚI THIỆU NGÔN NGỮ HTML

1 GIGI THIEU VE NGON NGU HTML

2 CAC THE ĐỊNH CẤU TRUC TAI LIEU

.d Sử dụng màu sắc trong thiết kế trang web

© Chọn kiểu chữ cho văn bản

£ Khái niệm văn bản siêu liên kết

ø Địa chỉ tương đối

6 CAC THE CHEN AM THANH HINH ANH

a Giới thiệu

b Đưa âm thanh vào một tài

Chèn một hình ảnh vào tài liệu HTML

7 CAC THE BINH DANG BANG BIEU

1 GIỚI THIỆU CHƯƠNG TRÌNH MICROSOFT FRONTPAGE

a Giới thiệu về Microsoft frontpage

b Các thanh công cụ

¢ Phương thức xem trang

2 TẠO BỘ WEB ĐƠN GIẢN

a Thao tác tạo bộ web đơn giản

b Các thao tác tạo trang web

¢ Tạo liên kết các trang web đơn

d Xuất bản bộ web

3 CÁC THAO TÁC TRÊN BỘ WEB

a Tạo mới bộ web,

b Tạo mới trang wel

¢ Dinh dang header, footer

d Xem bộ web bằng trình duyệt

Chèn nội dung văn bản vào trang web

Chèn hình ảnh vào trang web

Chen bang vio trang wel

Chen các công cụ đặc biệt vào trang web

e Siêu liên kết

5 TAO MAU WEB THIET KE CO SAN

a Tgo nhanh một bộ web cá nhân

b Thay đổi chỉ tiết thành phần Them

e Đối tên tập tin

6 TAO BIEU MAU FORM

ø Thay tên Submit, Reset

h Cách gửi biểu mẫu

7 TẠO KHUNG TRANG WEB

¢ Noi dung trong khung

d Hiệu chỉnh trong khung

CHUONG III: THIET KE WEB BANG DREAMWEAVER

1 GIOI THIEU CHUNG VE DREAMWEAVER

2 THIET KE WEB BANG DREAMWEAVER

a Lập kế hoạch thiết kế web

b Nhập nội dung và định dạng văn bản

¢ Hinh ảnh trong trang web

d Làm việc với bảng

e HTML động

f Biểu mẫu

ø Behavior

h Chia khung với Frames

i Quan If va sir dung Assets

CHƯƠNG I: GIỚI THIỆU NGÔN NGỮ HTML,

1 GIỚI THIỆU VỀ NGÔNNGỮ HTML

HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay 1a "Ng6n ngữ

Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra dé tạo nên các

trang web với các mẫu thông tin được trình bày trên World Wide Web HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn Internet

do 16 chire World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay, HTML đang được phát triển tiếp với phiên bản HTMLS hứa hẹn mang lại diện mạo mới cho Web

Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý

bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản - có

thể gõ vào ngay từ những dòng đầu tiên- cho đến những công cụ xuất bản 'WYSIWYG phức tạp

HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày

2 CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU

a Thé HTML

Một trang HTML sẽ được đánh dấu bắt đầu bằng thẻ <HTML> và kết thúc bởi

thé </HTML> Nhu vay, các nội dung đặt ngoài cặp thẻ này đều không hợp lệ Thẻ

<HTML> được gọi là thẻ mở, thé </HTML> duge goi là thẻ đóng Bên trong hai

thẻ này, bạn có thể khai báo và sử dụng hầu hết các thẻ HTML khác

Cấu trúc : <HTML> </HTML> Hoặc <html> </html>

Phần đầu: Phần dau bat dau bing thé <HEAD> và kết thúc bởi thẻ</HEAD> 'Phần này chứa tiêu đẻ hiễn thị trên thanh điều hướng của trangWeb Tiêu đề là phần

khá quan trọng Các mốc được dùng để đánh dấu một Website, trình duyệt sử dụng

tiêu đề để lưu trữ các mốc này Do đó,khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từkhoá chính yếu cho việc tìm kiếm

Cấu trúc : <HEAD> </HEAD> Hoặc <head: </head>

10

€ Thẻ TITLE

Nội dung được hiện thị trên thanh tiêu đề

Cấu trúc: <TITLE> Nội dung tiêu đề </TITLE> hoặc <title> </title>

Dữ liệu của website được viết vào trong thẻ này

Phần thân: Phần này nằm sau phần tiêu đề Phần thân bao gồm văn

ban,hinh anh va céc liên kết mà bạn muốn hiển thị trên trang Web của minh Phan thin bat dau bing the <BODY> va két thiic bing thé </BODY>

<title>Tiéu 4é trang Web</title>

<b>pay lâ trang Web đầu

'Ví dụ, bạn muốn căn lề cho đoạn văn bản, bạn có thể sử dụng thuộc tính align của

thé <p> Giá trị của thuộc tính align có bốn giá trị: center/justify/left/right

~ _ Center: Căn đoạn văn bản ra giữa

~_ Justify: Căn đoạn văn bản sang đều 2 bên

~ _ Left; Căn đoạn văn bản sang bên trái

~ _ Right: Căn đoạn văn bản sang bên phải

<p align="justify">pay là đoạn văn thứ nhất ví dụ về

cách sử dụng các ký hiệu đặc biệt trong HTML và được canh lễ

bằng thuộc tính align của thè á1t;p&gt;</p>

<p al‡gn="right">Đây là đoạn văn thứ hai ví dụ về cách sử dụng các ký hiệu đặc biệt trong HTML scopy? va duge canh 18 bằng thugc tinh align của thẻ §1t;p&gt;</p>

HTML định nghĩa sẵn sáu cấp độ của tiêu đề: <h1> </h1>, <h2> </h2>,

„ <h6> </h6> với độ lớn giảm dần từ h1 đến h6 Kết thúc thẻ tiêu đề, nội dung trình bày cũng tự động xuống dòng

12

Dùng để xuống dòng doạn văn bản, ngoài thẻ <BR> thì thẻ <p>chúng ta vừa nói

ở trên cũng có tác dụng tương tự như thẻ <br>

~_ Chú ý: Thế <BR> chỉ có thẻ mở, không có thẻ đóng

d Thé PRE

13

Để giới hạn đoạn văn bản được định đạng sẵn bạn có thể sử dụng thé <PRE>

'Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh

vào, ví dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ <PRE> sẽ có ý nghĩa chuyển sang dòng mới (trình duyệt sẽ không coi chúng như dấu cách)

~_ <li></li> viết tắt của chữ "list item" có nghĩa là mục của danh sách

Danh sách sau đây gọi là danh sách có thứ tự:

<li>Cá lóc kho tiêu</li>

<li>Cá rô kho tộ</li>

<li>Cá thu chiên xoài bằm</li>

<li>Cá điêu hồng nấu ngót</li>

<ul></ul> là viết tắt của chữ: anordered list có nghĩa là danh sách không có thứ tự

<li></li> viét tit cia chữ: list item có nghĩa là mục của danh sách

Danh sách sau đây gọi là danh sách không có thứ tự:

“Thuộc tính Thế

Upper Roman <li type= I>

Lower Roman <li type =>

Uppercase | <li type=A >

Lowercase <li type = a>

Bat đầu với một số khác lớn hon 1 <ol start=n>

<LI> Creating forms</li>

<LI> Working with Frames<li>

</OL>

c Cấu trúc thẻ danh sách có thứ tự và không có thứ tực

Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau Cấu trúc phải theo các nguyên tắc sau đây:

~_ Lúc nào cũng phải tổn tại 1 cặp thẻ, không thể thiếu một trong 2:

+ Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>

+ Đối với danh sách không có thứ tự, phải tổn tại cặp thẻ: <ul></ul>, <li></li>

l6

~_ Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất

<li></li>

= Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên

không được chứa một số thẻ sau đây: <html></html>, <meta></meta>,

<body></body>, <title></title>, <link></link> Và một số thẻ không nên chứa nhu: <style></style>, <script></script>

<U><B>Chữ in đậm và được gạch chân</B></U><BR>

<I><U>Chữ in nghiêng và được gạch chân<lI></U>

</BODY>

</HTML>

Kết quả hiện thị

18

Chữ in đâm và được gach chan

Chữ in nghiêng và được gạch chân,

b Căn lề văn bản trong trang web

Trong trình bày trang web luôn luôn phải chú ý đến việc căn lề các văn bản đê

trang website có được bồ cục đẹp Một số các thẻ định dạng đều có thuộc tính tham

số align cho phép bạn căn lề các văn bản năm trong phạm vi giới hạn của các thẻ

định dạnh đó

Giá trị của thuộc tính align có bốn giá trị: center/justify/lefright

+ Center: Cin đoạn văn bản ra giữa

~_ Justify: Căn đoạn văn bản sang đều 2 bên

+ Left: Cin đoạn văn bản sang bên trái

~ _ Right: Căn đoạn văn bản sang bên phải

World Wide Web còn viết tắt là WWW, là một dịch vụ Internet, được xây dựng trên một tập các giao thức thông dụng, nó cho phép cấu hình các máy tính server theo một cách đặc biệt để phân phối các bản tin trên mạng theo một cách thức chuẩn

</P>

</BODY>

</HTML>

Kết quả hiện thị trên trình duyệt

WORLD WIDE WEB

World Wide Web còn viết tất là WWW, là một dịch vụ Internet, được xây

“dựng trên một tập các giao thức thông dụng, nó cho phép cấu hình các mấy,

tính server theo muột cách đặc biệt để phân phối cáo bản tin trên mạng theo

'Ngoài ra chúng ta có thẻ CENTER để căn giữa trang một số văn bản

ii php: <CENTER> Van ban se duoc can giua trang<(CENTER>

Thời gian trôi qua mau chi còn những kỷ niệm<BR>

Kỷ niệm thân yêu ơi sẽ còn nhớ mãi tiéng thay cô<BR>

20

Bạn bè mến thương ơi sẽ còn nhớ mãi lúc giận hòn<BR>

Để rồi mai chia xa lòng chợt dâng niềm thiết tha<BR>

Nhớ bạn bè, nhớ mái trường xưa <BR>

Mong ước kỷ niệm xưa

“Thời gian trôi qua rnau chỉ còn những kỷ niệm

Kỷ niệm thân yêu ơi sẽ oòn nhớ rnãi tiếng thầy cô

‘Ban be mén thưng ơi sẽ còn nhớ mãi lúc giận hờn

Để rồi mai chia xa lòng chợt dâng niềm thiết tha

Nhớ bạn bè, nhớ rmấi trường xưa

e Các ký tự đặc biệt

Trong ngôn ngữ HTML, một số ký tự đặc biệt bạn không thể gõ từ bàn phím Ví

dụ nếu chỉ gõ khoảng cách giữa các từ là một ký tự khoảng trắng hay nhiều ký tự khoảng trắng thì kết quả hiển thị lên trình duyệt là như nhau Vì vậy, nếu bạn muốn

có nhiều khoảng trắng liên tục thì phải thực hiện gọi mã HTML cho ký hiệu đặc biệt Sau đây là bảng liệt kê một số ký hiệu đặc biệt thường dùng:

" > ươg: ®

d Sử dụng màu sắc trong thiết kế trang web

Một màu sắc được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh

lá cây (Green), Xanh nước biển (Blue) Trong HTML một giá trị mầu là một số

nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau:

#RRGGBB trong đó:

RR: Giá trị màu đỏ

G: Giá trị màu xanh lá cây

'BB: Là giá trị màu xanh nước biển

Bang mau co ban _

Đhe | Xanh | #0000FE Naa

Nay | pi | #o00R00 y | Xem

“hanh | HERE

Trắng | “EEEEEE Rule | D4ía | 4800080 Bạc | CoCOC

Yetlow | Vàng | #EEEFoA | a Neve | sorry | SI

Có thể sử dụng các giá trị màu nói trên để quy định màu trữ , màu nền cho trang web Cú pháp đầy đủ của thẻ BODY cho phép ta đặt ảnh nền , màu nễn , màu

chữ, màu văn bản siêu liên kết, hay đặt lễ cho văn bản

Link Chi dinh mau ciia van ban siéu liên kết

Alink Chi định màu của văn bản siêu liên kết đang đang chọn

Viink Chỉ định màu của văn bản siêu liên kết đã từng mở

Background “Chỉ định địa chỉ của ảnh dùng làm nên

Text “Chỉ định màu của văn bản trong tài liệu

2

Text color: YELLOW<BR>

Background color: ROYALBLUE

“Trong ví dụ này, chúng ta sẽ sử dụng tệp ảnh bground1.giƒ:

để làm nền cho trang Web của mình

</BODY>

</HTML>

'Kết quả hiện thị

25

lữ Eee

Java va World Wide Web

ao kholing thoi gian World Wide Web ra đời ở Phòng thí nghiệm

‘Vat lf hat tai Thuy Sĩ thì một sông ty đóng tại California, có tên gọi

‘Sun Mierosygterna, cũng lao vào cuộc phiêu hi với công nghệ mới

của họ Mặe dù đượo tiến hành riêng và với những mụe đích hoàn

toàn kháo nhau, World W dc Web và Java của San đã sát cánh bên

"nhau trong gần bén nim sau, và cùng tạo nên một sự hứa hẹn về

một suộc cách mạng tin học thứ hai: Web tương táo thựo

e Chọn kiểu chữ cho văn bản

Để có được một trang Web đẹp ngoài các công việc như thiết kế bổ cục, trang trí

hình ảnh, thì việc lựa chọn các kiểu chữ phù hợp cho từng nội dung văn bản cần trình bày là rất quan trọng Để chọn phông chữ hiển thị cho một văn bản

bạn có thê sử dụng thẻ FONT (tuy nhiên để trình duyệt có thể hiển thị đúng phông

chữ quy định thì yêu cầu hệ thống phải được cải đặt phông chữ đó)

Font-name: Là tên của fone chit

Color: Là màu của chữ

N: Kích thước của fone chữ

26

<FONT FACE="Arial” COLOR=#0000FF SIZE=4>

Đây là phông chit VnArial

</FONT>

Day là phông chữ VnTime

Đây là phông chữ VnArial

1 Khái niệm văn bản siêu liên kết

'Văn bản siêu liên kết hay còn gọi là siêu văn bản là một từ, một cụm từ hay một câu trên trang Web được dùng để liên kết tới một trang Web khác Khi chúng ta nhấn chuột lên một siêu văn bản, lập tức trình duyệt Web sẽ cho mé trang Web được liên kết với siêu văn bản đó Thông thường các siêu văn bản sẽ có màu sắc phân biệt với các văn bản bình thường (chúng ta có thể chỉ định màu sắc này) và được gach chân, khi con chuột di chuyển trên một siêu văn bản nó sẽ có hình dang một bàn tay

Siêu liên kết ~ Hyperlink ~ là mối liên kết

văn bản Có 3 loại siêu liên kết;

lừa hai phần tử thông tỉn trong một siêu

Liên kết trong (Internal link): liên kết

các phần tử thông tin trong cùng một He

tài liệu

Tình 1-3-1: Liên kết trong

Liên kết ngoài (External link): liên kết

đến một tài liệu khác, tài liệu được liên

kết tới có thể nằm trong cùng một

'Website hoặc liên kết ra Website khác

ink

inh 1-3-2: Liên kết ngoài

Liên kết có thể thực thi được =

(Executable): liên kết gọi thực thi một

chương trình hoặc một đoạn mã lệnh

Liên kết này cho phép truy xuất đến cơ

Đôi khi nội dung trang Web quá dài, chiếm nhiều trang màn hình, nhưng các

phần nội dung lại có mối liên hệ chặt chẽ, Khi đó ta cần đặt các liên kết để khi cần

người dùng có thể click chọn phần nội dung họ quan tâm mà không cần phải kéo

thanh trượt dé tìm kiếm đoạn đó

Để thực hiện điều này, trước tiên cần định nghĩa vị trí đích — nơi sẽ được liên kết

đến, ta sử dụng thé <a> </a> theo cú pháp:

<a name="TenViTr{”> Chuỗi xác định vị trí đích </a>

Khi đã cổ các vị trí đích, bạn chí cần tạo liên kết để người dùng click vào theo cả pháp:

<ã href=#TenU: Từ hiển thị liên kết </a>

| Sigu liga két— Hyperlink ~ à mối liên kết giữa hai phần tử thông tin trong một siêu văn

bản Có 3 loại siêu liên kết:

e Liên kết có thể thực thị được (Executsble)

“Trong 46

| |

er

Liên kết trong (Intemal link): lién két céc phi tử thông tin trong cùng một tải liều

Hình anh minh họa liên kết trong:

=n

Liên kết neoài (External link): liên kết đến một tài liêu khác tài liêu được liên kết tới —

29

‘URL cé thé là địa chỉ tương đối hoặc tuyệt đối, có thể là đường dẫn đến một tập

tin HTML khác trong cùng một Website hay địa chỉ của một Website khác

30

Target là thuộc tính quy định cách mở liên kết Mặc định là mở trên chính trang

hiện hành _parent / _sef Nếu bạn muốn hiển thị nội dung sắp được liên kết đến

trong một khung nào đó (định nghĩa khung sẽ được nói rõ ở phần sau) thì hãy đặt

target chính bằng tên khung

‘Vi dụ 1-3-2: Liên kết ngoài

31

(Vi) 1-32 - Moca Firefox Lo ines)

|B Most Visited ("] Getting Started

O Disable dh Cookiess|7 CSS+| LL Forms i Images: @

g Địa chỉ tương đối

URL được trình bày ở trên là URL tuyệt đối Ngoài ra còn có URL tương đối hay còn gọi là URL không đầy đủ Địa chỉ tương đối sử dụng sự khác biệt tương đối

giữa văn bản hiện thời và văn bản cần tham chiếu tới Các thành phần trong URL

được ngăn cách bằng ký tự ngăn cách (ký tự gạch chéo /) Đề tạo ra URL tương đối, đầu tiên phải sử dụng ký tự ngăn cách URL đầy đủ hiện tại sẽ được sử dụng để tạo nên URL đầy đủ mới Nguyên tắc là các thành phần bên trái dấu ngăn cách của

URL hiện tại được giữ nguyên, các thành phần bên phải được thay thế bằng thành

phần URL tương đối Chú ý rằng trình duyệt không gửi URL tương đối, nó bổ sung vào URL cơ sở được xác định trước thành phần URL tương đối xác định sau thuộc tinh href= Ký tự đầu tiên sau dấu bằng sẽ xác định các thành phần nào cla URL hiện tại sẽ tham gia để tạo nên URL mới

‘Vi dy, néu URL day di 1a: http://it-department.vnuh.edu vi/HTML/index.htm thì:

~ Dấu hai chấm (:) chỉ dịch vụ giữ nguyên nhưng thay đổi phần còn lại Ví dụ

trang chủ của máy phục vụ www.fpt.com với cùng dịch vụ

Ví dụ /JavascripUindex.htm sé tai file index.htm của thư myc

~ Không có dấu phân cách chỉ có tên file là thay đổi Ví đụ index.htm sé tai file index.htm ở trong thư mục HTML của máy phục vụ www.it-

deparument.vnuh.edu.vn

~ Dấu thăng (#): chỉ dịch vụ, máy phuc vụ, đường dẫn và cả tên file giữ nguyên, chỉ

thay đổi vị trí trong file

Do đường dẫn được xem là đơn vị độc lập nên có thể sử dụng phương pháp đường dẫn tương đối như trong UNIX hay MS-DOS (tức là chỉ thư mục hiện tại còn chỉ thư mục cha của thư mục hiện tại)

URL cơ sở có thể được xác định bằng thẻ <BASE>

h, Két néi mailto

Nếu đặt thuộc tinh href= cita thé <a> gid trj mailto:address@domain thi khi kích

hoạt kết nối sẽ kích hoạt chức năng thư điện tử của trình duyệt

¡ Vẽ đường thẳng năm ngang

Để vẽ một đường thằng nằm ngang phân chia các phần trong một trang Web, chúng ta sir dung thé HR

Color Dit mau cho đường thẳng

Width Chiều dài

Chú ý: Thẻ này giống như thẻ BR không có thẻ kết thúc

Vi du:

<HTML>

<HEAD><TITLE>Vé didng thang</TITLE><HEAD>

<BODY BGCOLOR="WHITE" TEXT="NAVY">

<HI>Web Browser</HI>

<HR ALIGN="LEFT" COLOR:

<P>

Web Browser là chương trình có khả năng thực hiện một số chức năng cơ bản nào

đó, chẳng hạn như tìm kiểm và mở các trang Web, hiển thị các trang Web theo

b Đưa âm thanh vào một tài liệu HTML

Âm thanh trên Web cũng được phân làm hai loại: âm thanh nền cho Web và âm

thanh được mở trên Web như một trình hát nhạc

Đối với âm thanh nền hay còn gọi là nhạc nền, khi trang Web vừa được tải lên sẽ

xuất hiện âm thanh chạy ngầm bên trong Bạn cần khai báo thẻ này trong phần

“<head> của trang Web với tên thẻ là <bgsound>, đây là một thẻ đơn Tuy nhiên không phải trình duyệt nào cũng hỗ trợ loại thẻ HTML này

URL là đường dẫn đến tập tin làm âm thanh nền cho Web, file âm thanh có đuôi:

*.mepg, *.avi, *.mov, *.au, *.mid, *,mp3

n là số lần lặp lại của file âm thanh, n = -1 nếu muốn lặp lại vô tận

Trường hợp bạn muốn mở tập tin âm thanh trên Web với một trình hát nhạc, bạn có thể sử dụng cặp thẻ <embed> </embed>

Trong đó:

URL là đường dẫn đến tip tin âm thanh

Autostart: tùy chỉnh chế độ phát tự động (true) hay chờ nhắn nút play (false)

Loop: thiết lập chế độ tự động phát lại (true) hay không phát lại (false)

Hidden: cho phép ẩn chương trình hát nhạc (true) hay hiển thị trình hát nhạc trên

'Web (false), mặc định hidden = “false” Đối với một số trình duyệt không hỗ trợ thẻ

<bgsound> ban có thé cho phát nhạc nền bằng cách cho chế độ hidden = “true”, Width và height là hai thuộc tinh chỉ định độ rộng và chiều cao của chương trình hát nhạc trên Web

Ngoài ra, nếu bạn muốn chèn các tập tin flash hoặc phim ảnh lên Web, thẻ

<embed> vin cé thể thực hiện tốt Tuy nhiên, do các tập tin này có những thông số đặc biệt và tùy theo ý định hiển thị, bạn cần kết hợp thêm cặp thẻ <object>

</object> dé được hỗ trợ thêm nhiều thuộc tính hiển thị hơn

Ví dụ 1-3-9: chèn âm thanh bằng <bgsound> vi <embed>

<embed src="AMTHANH/nhac2.mp3" autostart="false"

loop="false" width="200" height="100" ></enbed>

-ÏZIL(Ô 88x =) Errsee DDe Ba See=s @|

c Chèn một hình ảnh vào tài liệu HTML,

Hình ảnh trên Web được phân làm hai dạng Dạng thứ nhất là hình ảnh làm nên,

tức là chúng ta có thể viết chữ lên hình Ở dạng này, chúng ta có thể chèn hình trong thuộc tính background của một số thẻ hỗ trợ ảnh nền như <body>, <table>, <td>, Dạng thứ hai, hình ảnh được xem như một đối tượng trên Web, nó chiếm một vị trí trên Web như một nội dung của trang Trong trường hợp này, chúng ta dùng thẻ

<img>, đây là một thẻ HTML đơn với cú pháp như sau:

'URL: là đường dẫn đến tập tin hình ảnh cần đưa lên Web

Lefi/right/top/middle/bottom: canh lề cho ảnh; absbottom/absmiddle/texttop: canh

lề cho văn bản xung quanh hình,Chuỗi trong tile sẽ hiển thị khi đưa con trỏ chuột

vào hình

Số/phần trăm trong width và height chỉ định độ lớn của ảnh tương ứng theo chiều rộng và chiều cao Nếu bỏ qua hai thuộc tính này, trình duyệt sẽ hiển thị hình ảnh với kích thước thật của ảnh

Chuỗi trong alt sé được hiển thị thay cho hình khi hình không được hỗ trợ hiển thị lên Web

37

Nếu muốn hình ảnh có đường viễn, bạn nhập n là một số nguyên dương Mặc định n

là 0, nghĩa là ảnh không có đường viễn

Website hoa viên cây cảnh

<img align="absmiddie" sre=*hinhanh/hoasi

border="3">

Website hoa viên cây cảnh

<img align="tep" szc="hinhanh/hoasu.jpg"

tring" width="100" height="130"><br>

“The <”me> chèn được các tập tin ảnh dạng *.jpg, *.jpeg, *.gif, *.png

“Trong hình, lần chèn ảnh thứ 3, ảnh có phần mở rộng là tif không được hỗ trợ hiển thị nên dòng chữ trong thuộc tính alt sẽ được hiển thị thay thế ảnh được gọi trong sre Trong trường hợp bạn gọi một hình ảnh không được hỗ trợ hiển thị bởi trình duyệt, nhưng không sử đụng thuộc tính alt thi tai vi tri gọi hình, sẽ hiễn thị

(© ovate Cooter 7 Cế LẢ Hernr id ager Ö ienmeber Đi Mecsterexer // 0o ⁄Z Rese Tech,

Wedske hoa viên cây

“Trang Vidul-2-8.html

38

7 CÁC THẺ ĐỊNH DẠNG BẢNG BIẾU

a Tạo bằng

Khi bạn muốn thiết kế bảng dữ liệu trên trang Wrb, bạn cần phải khai báo thẻ

“<table> Sau khi khai báo thé này, bạn phải khai báo các thẻ dòng <tr> và thẻ cột

<td> hoặc <th> Trong đó, <th> sẽ xác định nội dung bên trong nó là tiêu đẻ, tức là

nội dung mặc định được in đậm và canh giữa

Cấu trúc gọi bang:

'Thuộc tính trong thé bing <table>

Khi thiết lập một bảng biểu trên Web, ban cần chú ý đến các thuộc tính sau day:

39

“Thuộc tính LÝ nghĩa

Khởi tạo bảng với đường viễn (mặc định là không có đường viễn,

Pa bonder= 0")

cellpadding Khoảng cách từ nội đụng trong ô đến đường viễn

cihgerg Khoảng cách giữa các ô trong bang

diện “Canh lề cho bảng (center, left, right)

width “Xác định chiều rộng cho toàn bảng

“Xác định chiễu cao cho bảng Tuy nhiền khí thiết kế bang, ban chi cin

height ‘quan tâm đến chiều rộng chứ không quan tâm đến chiều cao, bởi vi

chiều cao của bảng phụ thuộc vảo dữ liệu bạn có

edo (Chén ảnh nền cho bảng,

bgcolor ˆTô màu nền cho bảng

Tô mâu đường viễn cho bảng Lưu ý một số trình duyệt không hỗ trợ

bendernoler hiển thị màu viền

id id nhận dạng dùng để phân biệt các báng dữ liệu trên cũng một trang

= “Tô màu nền cho dòng Lưu ý, trong dòng chỉ cỏ thể tổ màu nền chứ

không thể gọi ảnh nên cho dong

Tô mâu đường viễn dòng, Lưu ỷ một số trình duyệt không hỗ trợ hiển

bordereolor thị mều viễn

“Thuộc tính trong các thể ô / cột <th>, <td>

Sau đây là một số thuộc tính thường dùng cho ô / cột:

background Goi anh nén cho 6

bgcolor 'Tô mâu nền cho 6

'Tô màu đường viễn cho ô Lưu ý một số trình duyệt không hỗ trợ hiển

tøBteoioe thị mẫu viễn

= Gém cột Ta cổ colspar= "n" với n là số cột muốn thành một 6

rowspan 'Gôm hàng, Ta có rowspan= *n” với n là s6 dong mudn thanh mot 6

id 4 nhận dạng để phân bigt gita céc 6

width “Xác định chiều rộng của õ

“Xác định chiều cao của ð Tuy nhiên, đổi với /cộtthỉ ta thường ít

beight quan tâm đến chiều cao vì chiễu cao của ö / cột chính bằng chiễu cao

4