Ngôn ngữ HTML nâng cao dành cho những người thiết kế Web chuyên nghiệp

HTML NÂNG CAO... Siêu liên kết... Liên kết trong và liên kết ngoài... chuột vào hình ảnh... Thẻ liên kết hình ảnh... Thẻ liên kết âm thanh  Thẻ  Cho phép người soạn thả

HTML NÂNG CAO

Siêu liên kết

Giới thiệu siêu liên kết

 Các dạng liên kết

 Liên kết trong là liên kết đến các phần trong

cùng tài liệu hoặc cùng một web site

 Liên kết ngoài là liên kết đến các trang trên

các web site khác hoặc máy chủ khác

Liên kết trong và liên kết ngoài

Liên kết

 Đường dẫn tuyệt đối

 Đường dẫn tương đối

Tạo siêu liên kết

hai thành phần :

 Địa chỉ đầy đủ hoặc URL của file được kết nối

 Điểm nóng cung cấp cho liên kết Điểm nóng này có thể là một dòng văn bản hoặc hình ảnh

Thẻ siêu liên kết

 Thẻ <A>: Thuộc tính HREF

 Cú pháp của HREF là :

<A HREF = protocol://host.domain:port/path/filename>

Hypertext </A>

 Protocol xác định loại giao thức

 Host.domain là địa chỉ Internet của máy chủ

 Port là cổng phục vụ của máy chủ đích

 HyperText là văn bản hay hình ảnh mà user cần nhấp vào để kích hoạt liên kết

Giao thức

 <A HREF="http:// "> liên kết với một website

 <A HREF="ftp:// "> liên kết với một FTP site

 <A HREF="mailto: "> liên kết với 1 địa chỉ để gởi mail

 <A HREF="file#local"> liên kết với một vị trí trong trang web

 <A HREF=“filename”> liên kết download file

 Ví dụ:

<A HREF=“index.htm#Dinhvi”>Local</A>

<A HREF=“http://fithou.edu.vn”>KhoaCNTH</A>

<A HREF=“mailto: ntqnhu@hou.edu.vn”> E-mail to us</A>

<A HREF=“vanban.doc”> Download this file</A>

Thẻ siêu liên kết

 Thẻ <A> : thuộc tính NAME

Thẻ siêu liên kết

 Thẻ <A> : thuộc tính TARGET

 Cú pháp: <A Target=“ ”> </A>

 Thuộc tính Target dùng để chỉ định cho trình duyệt nạp đối tượng liên kết vào 1 cửa sổ chỉ định

 Các lựa chọn của target :

 _blank ( cửa sổ mới ),

 _self ( nạp vào cửa sổ này ) mặc định

 _parent ( nạp vào cửa sổ được mở gần nhất ),

 _top ( nạp vào cửa sổ được mở xa nhất ),

frame có tên này )

Thẻ liên kết âm thanh

Thẻ <BGSOUND>

 Cú pháp:

<BGSOUND SRC=“URL” LOOP=“n”>

 Liên kết một trang web tới một file âm thanh, trình duyệt sẽ chạy file này khi trang web được mở lên

 File âm thanh phải ở dạng MIDI, AU hay WAV

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

 SRC : địa chỉ file âm thanh

 LOOP : chỉ định số vòng lặp , với INFINITE hoặc

-Thẻ liên kết video

 file.avi là đường dẫn đến tập tin phim

 filename là đường dẫn chỉ đến tập tin hình ảnh (*.gif,

*.jpg)

 Hình ảnh dùng tạm thời trong khi chờ đợi tập tin phim kia được tải về

chuột vào hình ảnh

Thẻ liên kết hình ảnh

Thẻ liên kết âm thanh

 Thẻ <EMBED>

 Cho phép người soạn thảo chèn liên kết trực tiếp vào trang web

 Cú pháp:

<EMBED SRC=“URL" WIDTH=“n" HEIGHT=“m" AUTOSTART=“ " LOOP=“ “ HIDDEN=“”>

 Các thuộc tính của thẻ EMBED :

 SRC : địa chỉ file âm thanh

 WIDTH/HEIGHT chỉ ra kích thước của thanh điều khiển, bằng số pixel hay giá trị tương đối (%)

 AUTOSTART chỉ định cho trình duyệt có tự động chơi bản nhạc (true) hay không (false)

 LOOP chỉ định cho trình duyệt có lặp lại bản nhạc này (true) hay không (false)

 HIDDEN dùng để làm ẩn thanh điều khiển này (true)

Tạo danh sách

Tạo danh sách

Chú giải cho yếu tố 2

Danh sách kiểu thực đơn

<menu>

<li>Yếu tố 1

<li>Yếu tố 2 ••Yếu tố 1 Yếu tố 2

Thẻ TABLE

 Thẻ <TABLE> </TABLE>: Tạo bảng

trong trang web

 Dùng bảng trình bày rất tiện lợi, dễ dàng cho việc tìm kiếm

 Có thể đưa văn bản, hình ảnh, danh sách

và thậm chí có thể chèn thêm vào đó một bảng mới

 Bảng HTML cũng có các chức năng trình bày, định dạng, đường biên như bảng trong

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

 border=“value”: kích thước đường biên (value=0: không

có đường biên)

 cellspacing=“value”: khoảng cách giữa các ô (giá trị mặc

định là 2)

 cellpadding=“value”: khoảng trắng giữa đường biên và ô

(giá trị mặc định là 1)

 width=“value”: độ rộng bảng tính bằng pixels hoặc % độ

rộng cửa sổ hiển thị

 height =“value”: độ cao bảng tính bằng pixels hoặc % độ

cao cửa sổ hiển thị

 align=“left/right/center/justify”: canh lề trái/phải/giữa/đều

 valign=“top/bottom/midle”: canh lề trên/dưới/giữa

 bgcolor=“name”: màu nền cho bảng

 bordercolor=“name”: màu đường biên bảng

Định dạng dữ liệu bảng

 Thẻ <tr>: tạo dòng

 Thẻ <td>: Tạo cột

 Thẻ <th>: Tạo dòng tiêu đề cột (in đậm, canh giữa)

 Thẻ <caption>: Tạo tiêu đề cho toàn bộ bảng,

tiêu đề được căn giữa

 Cả 3 thẻ <tr>, <th>, <td> ngoài các thuộc tính tương tự thẻ <table>, còn có các thuộc tính sau:

 colspan=n :Mở rộng cột thành n cột

Định dạng dữ liệu bảng

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<body bgcolor = lavender>

<table border="1" width="100%" cellpadding="0" cellspacing="0">

<caption> Thời khóa biểu</caption>

<tr>

<th>Ca 1</td>

<td>Cơ sở lập trình</td>

<td>Tư tưởng Hồ Chí Minh</td> <td>Tiếng Anh 3</td>

<td>Kiến trúc máy tính</td> <td>Ngôn ngữ thiết kế web</td>

<td>Điện tử kỹ thuật số</td> <td>Mạng và truyền thông</td>

</tr>

<tr>

<th>Ca 2</td>

<td>Cơ sở lập trình</td>

<td>Tư tưởng Hồ Chí Minh</td> <td>Tiếng Anh 3</td>

<td>Kiến trúc máy tính</td> <td>Ngôn ngữ thiết kế web</td>

<td>Điện tử kỹ thuật số</td> <td>Mạng và truyền thông</td>

</tr>

</table>

 Có định dạng tiêu đề, có định dạng chữ

code HTML (Không được dùng tool, phải tự gõ code)