thẻ này được sử dụng để tạo một khu vực chứa tất cả các liên kết vào trang web.. văn bản đậm văn bản mã máy tính định nghĩa viết tắt văn bản lớn văn bản bàn phím định nghĩa viết tắt
Trang 1LÀM VIỆC VỚI HTML
1 Giới thiệu về HTML:
HTML (Hypertext Markup Language) là một ngôn ngữ được sử dụng rộng rãi trên
Internet, đó là một ngôn ngữ đánh dấu siêu văn bản
- Siêu văn bản: đề cập đến cách thức mà trong đó các trang web (tài liệu HTML) liên
kết với nhau Khi bạn nhấp vào một liên kết trong một trang web, bạn đã sử dụng
một siêu văn bản
- Ngôn ngữ đánh dấu: mô tả hoạt động của HTML Với một ngôn ngữ đánh dấu, bạn
chỉ đơn giản là “đánh dấu” một tài liệu văn bản với các thẻ trong trong trang web sẽ
được hiển thị như thế nào
Ban đầu HTML được phát triển với mục đích xác định cấu trúc của tài liệu như tiêu đề,
đoạn văn, danh sách, và do đó nó có tạo điều kiện thuận lợi cho việc chia sẻ thông tin khoa
học giữ những nhà nghiên cứu
2 Tạo một tài liệu HTML:
Để tạo được một tài liệu HTML, bạn chỉ cẩn: một trình soạn thảo văn bản đơn giản và
một trình duyệt web
Cấu trúc một phần tử thể hiện cách hiển thị trong trang web:
BỐ CỤC TÀI LIỆU HTML
<html> Định nghĩa một tài liệu HTML Ta có thể đặt thuộc tính xác định xhtml:
xmlns="http://www.w3.org/1999/xhtml"
<head> Định nghĩa phần thông tin của tài liệu html
<body> Định nghĩa phần thân của tài liệu html Ta có thể đặt các thuộc tính:
alink để đặt màu cho đối tượng liên kết trong tài liệu
bgcolor đặt màu nền cho tài liệu
backgroun
d đặt hình nền cho tài liệu.
link đặt màu cho đối tượng được liên kết thường xuyên trong tài liệu.
color đặt màu cho văn bản hiển thị trong tài liệu
vlink đặt màu cho các liên kết truy cập trong tài liệu
Cấu trúc:
<html>
<head>
Nơi dùng để viết các thông tin của tài liệu;
</head>
<body>
Nơi viết phần thân của tài liệu;
</body>
</html>
THÔNG TIN TÀI LIỆU
Là phần tử có chứa các nội dung tiêu đề của trang web Nó nằm trong phần <head> của tài liệu Trong nó có thể có một số phần tử:
<title> xác định tiêu đề cho trang web Nội dung của thẻ là một dòng văn bản, được
hiển thị trên thanh tiêu đề của một cửa sổ trình duyệt
<base> thẻ này được sử dụng để tạo một khu vực chứa tất cả các liên kết vào trang web
<object> được dùng để thêm các đối tượng vào tài liệu như phim, nhạc, flash
<link> được sử dụng để liên kết đến một tập tin bên ngoài, chẳng hạn như tập tin css
hay javascript
<style> được sử dụng để thêm bộ các quy tắc css vào trong tài liệu
<script> được sử dụng đối với JavaScript hoặc VBScript vào trong tài liệu
<meta> để mô tả các thông tin về tài liệu như từ khóa và mô tả, đặc biệt hữu ích cho các
ứng dụng tìm kiếm Nó có các thuộc tính sau:
name tên thuộc tính Nó có thể là: include, keywords, description,
author, revised, generator
content xác định giá trị của thuộc tính
scheme xác định một chương trình sử dụng để giải thích giá trị của
thuộc tính (như khai báo trong thuộc tính content)
http-equiv xác định tiêu đề tin nhắn trả về như làm mới trang hoặc thiết
lập một cookie
Ví dụ
<head>
<title> thẻ HTML cơ bản </title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML cơ bản Tags" />
<base href="http://www.tutorialspoint.com" />
<link rel="stylesheet" type="text/css" href="tp.css" />
<script type="text/javascript">
_uacct = "UA-232293";
urchinTracker ();
</script>
</head>
PHÂN KHỐI TRONG HTML
- Phân khối phần tử HTML: hầu hết các phần tử HTML được định nghĩa là phân khối phần
tử hoặc phần tử nội tuyến Khối phần từ thông thường được bắt đầu và kết thúc với một dòng mới khi hiển thị trong một cửa sổ trình duyệt Ví dụ như các phần tử:
<h1> đến <h6> tạo dòng tiêu đề trong tài liệu html Ta có thể đặt thuộc tính align để canh
lề cho dòng tiêu đề
<p /> để ngắt đoạn cho tài liệu Ta có thể canh lề align cho đoạn văn.
<hr /> dùng để tạo ra một dòng ngang trong một trang HTML Nó bao gồm các
thuộc tính Nó có các thuộc tính:
align canh lề cho đường ngang
noshade đường ngang nét đồng nhất hay rỗng ở giữa
size kích cỡ chiều cao của đường ngang
width kích cỡ chiều dài của đường ngang
Trang 2<br /> để ngắt dòng cho tài liệu.
<table> được trình bày cụ thể dưới đây
- Phân dòng phần tử HTML: là phần tử xuất hiện trong một dòng mà không nhất thiết hiển
thị ra trong một dòng mới trong trình duyệt
Ví dụ:
∙ Các phần tử định dạng văn bản
∙ Các phần tử <td>, <img>, <a>
- Phần tử <div> và <span>:
- Phần tử <div>: là một phần tử mức khối
được sử dụng như là một phần tử HTML
khác Phần tử đó không có chức năng gì đặc
biệt ngoài việc nó là một yếu tố khối cấp mà
trình duyệt sẽ hiển thị nó với ký tự ngắt dòng
trước và sau nó Nhưng khi thiết lập các
thuộc tính style cho nó, nó sẽ định dạng một
khối lớn nội dung trong nó Hiện nay phần tử
này được sử dụng phổ biến để bố trí tài liệu
thay vì phải sử dụng phần tử <table> như
xưa Nó có thuộc tính canh lề align
- Phần tử <span>: là một phần tử ngoại
tuyến được sử dụng như một phần tử HTML
áp dụng cho văn bản Và nó không có chức năng gì đặc biệt Nhưng khi sử dụng cùng với css, nó góp phần thiết lập thuộc tính style cho một bộ phận văn bản trong đoạn văn
<!DOCTYPE html>
<html>
<body>
<h3>Tiêu đề</h3>
<p>Một đoạn.</p>
<div style="color:#00FF00">
<h3>Tiêu đề</h3>
<p>Một đoạn.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>My mother has <span style="color:lightblue;font-weight:bold">xanh lơ</span> màu mắt con người <span
style="color:darkolivegreen;font-weight:bold">xanh lam</span>
mắt.</p>
</body>
</html>
ĐỊNH DẠNG VĂN BẢN
Các phần tử định dạng văn bản chỉ ra cách hiển thị văn bản trong cửa sổ trình duyệt Web
<b> văn bản đậm <code> văn bản mã máy tính <abbr> định nghĩa viết tắt
<big> văn bản lớn <kbd> văn bản bàn phím <acronym> định nghĩa viết tắt
<em> văn bản nhấn mạnh <samp> văn bản mã máy <address> văn bản bản quyền
<i> văn bản nghiêng <tt> văn bản đánh máy <bdo> văn bản định hướng
<small> văn bản nhỏ <var> định nghĩa biến <blockquote> báo giá dài
<strong> văn bản mạnh mẽ <pre> VB định dạng sẵn <q> báo giá ngắn
<sub> văn bản lên trên <ín> văn bản chèn vào <cite> văn bản trích dẫn
<sup> văn bản xuống dưới <del> văn bản xóa <dfn> Định nghĩa thuật ngữ
SIÊU LIÊN KÊT VÀ CHÈN ẢNH VÀO WEBSITE
Siêu liên kết là những phần tử bên trong tài liệu mà liên kết đến một vị trí hoặc đến một tài
liệu hoàn toàn khác Khi ta click vào siêu liên kết nó sẽ nhảy đến vị trí cần liên kết đến
- Liên kết trong: là liên kết kết nối đến các phần trong cùng một tài liệu hoặc cùng
một website
- Liên kết ngoài: là liên kết kết nối đến các trang trên các website khác hoặc máy chủ khác
Để tạo siêu liên kết, cần xác định 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
Sử dụng siêu liên kết: Thẻ <a> được sử dụng để xác định văn bản hay hình ảnh sẽ dùng làm
siêu liên kết trong tài liệu HTML Thuộc tính href (tham chiếu siêu văn bản) được dùng để
chỉ ra địa chỉ, URL của tài liệu hay file được liên kết Cú pháp:
<a href=protocol://host.domain: port/path/filename>Hypertext</a>
Trong đó:
- Protocol: giao thức sử dụng Ta có một số loại giao thức như http (truyền siêu văn
bản); telnet (mở một phiên telnet); gopher (tìm kiếm file); ftp (giao thức truyền file); mailto (gửi thư điện tử).
- Host.domain: Địa chỉ Internet của máy chủ.
- Port: Cổng phục vụ của máy chủ đích.
- path/filename: Đường dẫn tới file.
- Hypertext: Văn bản hay hình ảnh mà người dùng cần click vào để kích hoạt liên kết. Ngoài ra thẻ <a> còn một số thuộc tính khác như:
coords xác định tọa độ của một liên kết
title tiêu đề liên kết
hreflang chỉ định ngôn ngữ của các tài liệu liên quan
name chỉ định tên của neo trong liên kết đến một điểm xác định của trang
rel xác định mối quan hệ giữa tài liệu hiện hành và tài liệu liên kết
rev xác định mối quan hệ giữa các tài liệu liên kết và tài liệu hiện tại
shape chỉ định hình dạng của một liên kết Nó có thể nhận giá trị default (mặc định),
rect (hình chữ nhật), circle (hình tròn), poly (hình đa giác).
target chỉ định nơi để mở các tài liệu liên kết Nó có thể nhận giá trị:
_blank _parent _self _top framename
1 Liên kết văn bản:
Liên kết đến một tài liệu khác
- Giả sử ta có hai tài liệu trên đĩa cứng cục
bộ doc1.html và doc2.html Ta tạo liên kết
từ doc1 sang doc2 như sau:
<a href=”doc2.html”>Tới doc2</a>
- Khi tới tài liệu khác ta nên cung cấp một đường dẫn để quay lại
- Lưu ý: khi các file ở cùng thư mục ta dùng đường dẫn tương đối, khi ở khác thư mục, ta dùng đường dẫn tuyệt đối
Sử dụng email
- Cú pháp:
<a href=
mailto://this_person@mymail.com> Vào mail </a>
Ví dụ:
<a href=
mailto://mai0214cs@yahoo.com> Liên hệ </a>
Liên kết đến một điễm xác định trong cùng tài liệu
- Khi click vào một đề tài nào đó (Topic
Liên kết đến một điểm xác định
ở tài liệu khác
- Khi click vào một đề tài nào đó (Topic
Trang 3name) thì các chi tiết (marker) ở môt phần
khác của tài liệu được hiển thị
Cú pháp:
<a href=”#marker”>Topic name</a>
Tại điểm cần liên kết đến ta đặt:
<a name=”marker”></a>
name) thì các chi tiết (marker) ở môt phần khác của tài liệu khác được hiển thị
Cú pháp:
<a href=”doc2.html#marker”>
Topic name </a>
Tại điểm cần liên kết đến ta đặt ở trang doc2:
<a name=”marker”></a>
2 Bản đồ ảnh: là hình ảnh trong đó các vùng khác nhau hoạt động như các liên kết HTML
cung cấp 3 phần tử để tạo một bản đồ hình ảnh
- Phần tử <map> xác định bản đồ hình ảnh Nó cung cấp
thuộc tính name để chỉ rõ tên của bản đồ hình ảnh
- Phần tử <area> chỉ rõ tọa độ ở khu vực bên trong hình
ảnh sẽ hoạt động như một siêu liên kết và hình dạng của
bản đồ hình ảnh Nó có các thuộc tính:
alt chỉ rõ văn bản được thay thế nếu bản đồ hình
ảnh không xuất hiện
href chỉ rõ url của trang cần liên kết đến trong bản
đồ ảnh
shape chỉ ra hình dạng có thể chọn Nó có thể nhận
giá trị:
default mặc định
rect hình chữ nhật
circle hình tròn
poly hình đa giác
coords chỉ ra tọa độ của khu vực có thể bấm, nó phụ
thuộc vào hình dạng được chỉ ra cho bản đồ
hình ảnh
center_x, center_y, radius Hình tròn
left_x, top_y, right_x, bottom_y Hình chữ nhật
target chỉ ra nơi liên kết được mở
- Phần tử <img>: chọn ảnh làm bản đồ ảnh Nó gồm các
thuộc tính:
src chỉ ra đường dẫn đến hình ảnh
alt văn bản thay thế hình ảnh khi không xuất hiện.
userma
p nói đến tên bản đồ hình ảnh.
align canh lề cho hình ảnh
border chiều rộng đường viền bao quanh hình ảnh
width xác định chiều rộng hình ảnh
height xác định chiều cao hình ảnh
hspace xác định khoảng trắng bên phải và bên trái
của hình ảnh
vspace xác định khoảng trắng bên trên và bên dưới
của hình ảnh
<!DOCTYPE html>
<html>
<body>
<p>Click vào hành tinh:</p>
<img src="planets.gif"
width="145"
height="126"
alt="Planets"
usemap="#planetmap" />
<map name="planetmap">
<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm" />
<area shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.htm" />
<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
</body>
</html>
Với một tấm ảnh planets.gif
thích hợp với bản đồ ảnh
ismap chỉ định kết nối đến một hình ảnh như một
bản đồ hình ảnh phía máy chủ Nó nhận giá trị ismap
longdes c
chỉ định url của một hình ành chứa mô tả
về hình ảnh
DANH SÁCH Danh sách không thứ tự Danh sách có thứ tự Danh sách định nghĩa
- Là danh sách liệt kê các mục bằng ký hiệu chấm tròn trước mỗi mục
- Phần tử <ul> đánh dấu việc
bắt đầu và kết thúc danh sách
- Phần tử <li> có tác dụng
thể hiện việc bắt đầu và kết thúc mỗi mục bằng dấu chấm tròn Ta có thể thay đổi dấu chấm tròn bằng các ký hiệu khác bằng cách sử dụng
thuộc tính type:
- là danh sách liệt kê các mục theo thứ tự số thay đổi qua các mục
- Phần tử <ol> đánh dấu việc
bắt đầu và kết thúc danh sách
- Phần tử <li> có tác dụng
thể hiện việc bắt đầu và kết thúc mỗi mục bằng số thứ tự
Ta có thể thay đổi số thứ tự bằng các ký hiệu khác bằng
cách sử dụng thuộc tính type:
I I,II,III
i i,ii,iii
Để bắt đầu từ số n trở lên ta
dùng <ol start=n> </ol>
- là một danh sách giống như một bảng từ vựng và bảng giải thích thuật ngữ lùi vào trong
- Phần tử <dl> đánh dấu bắt
đầu và kết thúc danh sách
- Phần tử <dt> chỉ ra thuật
ngữ cần định nghĩa
- Phần tử <dd> chỉ thuật ngữ
dùng để định nghĩa
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd> đồ uống đen </dd>
<dt>Milk</dt> <dd> đồ uống trắng </dd>
</dl>
Ta có thể kết hợp các loại danh sách trên
BẢNG BIỂU
<table> Phần tử <table> dùng để đánh dấu vị trí bắt đầu và kết thúc của một bảng.
Nó có các thuộc tính:
- align: dùng để canh lề cho toàn bộ bảng
- bgcolor: dùng để canh lề cho toàn bộ bảng
- border: dùng để xác định độ dày đường viền bao quanh bảng.
- cellpadding: dùng để xác định khoảng cách từ viền ô vào nội dung trong
ô
- cellspacing: xác định khoảng cách giữa các ô trong bảng.
- frame xác định tạo đường biên ngăn cách các ô Nó có thể nhận các giá
trị:
above : phía trên hsides : trên và dưới lhs : phía trái
Trang 4below : phía dưới vsides : trái và phải rhs : phía phải void : không hiển thị box : bao cả 4 bên border : bao cả 4 bên
- rules: thước kẻ phân định các phần của bảng theo:
none : không hiển thị đường groups :giữa các nhóm hàng, cột rows : giữa các hàng all :tất cả các hàng và cột cols : giữa các cột
- summany: dùng để tóm nội dung của bảng, nó không được hiện trong
trình duyệt nhưng có thể đọc bởi màn hình
- width: xác định độ rộng của bảng.
Những thẻ dưới đây là thẻ con của thẻ <table>.
<caption> dùng để tạo phần tiêu đề mô tả cho bảng Nó thường nằm ngay dưới thẻ mở
<table>.
<th> dùng để tạo các dòng tiêu đề cho bảng Nó thường nằm ngay ở dòng đầu
tiên của bảng và nó được in đậm hơn
abbr tóm tắt nội dung của nhóm
align canh lề ngang cho dòng
valign canh lề dọc cho dòng
axis phân loại các ô trong tiêu đề
bgcolor xác định màu nền cho dòng tiêu đề
colspan ghép các ô trên cùng một hàng
rowspan ghép các ô trên cùng một cột
width thiết lập chiều rộng của dòng
height thiết lập chiều cao của dòng
scope thiết lập mối liên hệ giữa các hàng, cột, nhón
nowrap thiết lập hiển thị nếu phần tử bên trong không được hiển thị
<tr> dùng để định nghĩa một dòng trong bảng Ta có thể đặt cho nó các thuộc
tính sau align, valign, bgcolor.
<td> dùng để định nghĩa một ô trong bảng, trong các dòng Ta có thể đặt các
thuộc tính abbr, align, valign, axis, bgcolor, colspan, rowspan, headers, width, height, nowrap, scope
<col>
<colgroup> Nhóm các cột trong bảng để đặt cho một số thuộc tính nào đó như align, valign, width, span.
<thead> Nhóm phần tiêu đề của bảng
<tfoot> Nhóm phần chân của bảng
<tbody> Nhóm phần thân của bảng
<!DOCTYPE html>
<html>
<body>
<table width="100%" border="1">
<colgroup span="2" style="background-color:#FF0000;"></colgroup>
<colgroup style="background-color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>
BIỂU MẪU
- Phần tử <form> dùng để định nghĩa được biểu mẫu Nó bao gồm các thuộc tính:
action xác định nơi giữ dữ liệu khi biểu mẫu được gửi đi
accept chỉ định loại tập tin được máy chủ chấp nhận (khi gửi tập tin lên)
accept-charset chỉ định danh sách các bảng mã ký tự được máy chủ chấp nhận
enctype xác định cách thức mã hóa dữ liệu khi nó được gửi lên máy chủ
method phương thức HTTP khi gửi dữ liệu lên là GET hay POST
name đặt tên của biểu mẫu
target Nơi nhận phản hồi sau khi gửi biểu mẫu
- Phần tử <input /> dùng để cho phép người dùng nhập dữ liệu vào Nó thường nằm trong phần tử <form> Nó bao gồm các thuộc tính:
type Chọn kiểu nhập của phần tử
button: nút gửi biểu mẫu text: nhập văn bản một dòng submit: nút gửi biểu mẫu password: nhập văn bản mã hóa reset: nhập lại biểu mẫu checkbox: hộp kiểm nhiều lựa
chọn
image: tạo nút bằng hình ảnh radio: hộp chọn cho phép một
lựa chọn và có cùng tên
file: nút tải file lên hidden: ẩn phần tử
accept chỉ định loại tập tin mà máy chủ chấp nhận
align canh lề cho phần tử nếu là kiểu image
alt văn bản thay thế nếu hình ảnh trong kiểu image không xuất hiện
checked chỉ định một phần tử được chọn nếu là kiểu checkbox hoặc radio
disabled không cho phép người dùng lựa chọn
maxlength xác định chiều dài tối đa của phần tử nếu kiểu là text hoặc password
name tên của phần tử <input>
readonly chỉ cho phép người dùng đọc
src chỉ định đường dẫn của hình ảnh nếu kiểu là image
Ví dụ:
<!DOCTYPE html>
<html>
<body>
Trang 5<form action="form_action.asp">
First name: <input type="text" name="FirstName" value="Mickey"
/><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>Click the "Submit" button and the input will be sent to a page on
the server called "form_action.asp".</p>
</body>
</html>
- Phần tử <select> cho phép tạo một hộp chọn sổ xuống Nó có các thuộc tính:
disabled Vô hiệu hóa việc lựa chọn
multiple Cho phép có nhiều lựa chọn cùng lúc
size Kích cỡ số tùy chọn của phần tử
Trong phần tử này có các phần tử con là:
+ Phần tử <optgroup> cho phép nhóm các lựa chọn vào cùng kiểu.
+ Phần tử <option> dùng để định nghĩa một tùy chọn.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>
Ngoài ra ta còn sử dụng một vài phần tử khác như:
<textarea> định nghĩa một biểu mẫu cho phép nhập nhiều dòng Nó có các thuộc
tinhs:
cols Chiều rộng của phần tử
rows Số dòng hiển thị khi nhập
disabled Vô hiệu hóa việc nhập phần tử
name tên của phần tử
readonly chỉ cho phép đọc
<label> tạo một nhãn cho phần tử <input>
<fieldset> tạo một khung bao quanh biểu mẫu
<legend> Tạo một tiêu đề cho phần tử <fieldset>
<select> tạo một hộp chọn sổ xuống
<optgroup> t
<option>
<button> tạo một nút button
KHUNG
- Phần tử <frameset> dùng để bố trí các khung hình trong từng trang web.
- Phần tử <frame> dùng để bố trí một khung hình trong frameset.
Cả hai phần tử trên giờ ít sử dụng vì nó ảnh hưởng tiêu cực đến trang Web
- Phần tử <iframe> dùng để hiển thị một trang web này trong một trang web khác Trong
xhtml một khung có thể bị dỡ bỏ nên ta nên sử dụng trong thuộc tính css Các thuộc tính của phần tử này là:
align canh lề cho khung hình
frameborder xác định có đặt đường viền bao quanh hay không Nhận giá trị là 1 hay 0
height xác định chiều cao của khung hình
width xác định chiều rộng của khung hình
marginheight xác định khoảng trắng bên trên và dưới khung hình
marginwidth xác định khoảng trắng bên trái và phải khung hình
scrolling xác định xem có để thanh cuộn vào khung hình hay không Nó có thể nhận
giá trị là yes, no, auto
name xác định tên của khung hình
src xác định trang web hiển thị trong khung hình
longdesc xác định một đường dẫn mô tả trang hiển thị trong khung
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
CHÈN ĐỐI TƯỢNG VÀO TÀI LIỆU HTML
- Phần tử <embed> cho phép bạn chèn một video vào trang web.
<embed src=”đường_dẫn_đến_video” width=”chiều_rộng” height=”chiều cao” />
- Phần tử <bgsound> cho phép bạn chèn âm thanh vào trang web.
<embed src=”đường_dẫn_đến_file_âm_thanh” loop=”số_lần_phát_lại” />
- Phần tử <object> dùng để nhúng đối tượng như video, audio, flash, tập tin dữ liệu, một
trang web vào trong một trang web
Một số thuộc tính:
+ classid: là một chuỗi giá trị chỉ ra một bộ định danh lớp (class) duy nhất cho đối tượng
Lưu ý: chuỗi classid cho các điều khiển Microsoft ActiveX đã đăng ký là một chuỗi 32 bit có dạng “clsid:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX” Ví dụ:
* Thiết lập chương trình mặc định: {2559a1f7-21d7-11d4-bdaf-00c04f60b9f0}
* Flash video: {D27CDB6E-AE6D-11cf-96B8-444553540000}
* Windows Media Player 6.4 {22D6F312-B0F6-11D0-94AB-0080C74C7E95}
+ data:Chỉ ra một URL đến dữ liệu của đối tượng.
+ type:Chỉ ra dạng dữ liệu của dữ liệu được chỉ ra trong thuộc tính DATA.
Ví dụ:
Trang 6<OBJECT data=“http://www.w3c.org” type=“text/html” width=350
height=“140”> This is the home page of W3C site.</OBJECT>
- Phần tử <param> là phần tử rỗng dùng để thiết lập các giá trị cho các thuộc tính của đối
tượng lúc thực thi (run-time), là lúc đối tượng đã được tải vào trong trang Web Thuộc tính
của PARAM
+ name: Chỉ ra tên của tham số, tên này đã được định nghĩa trước cho đối tượng.
+ value: Giá trị cho tham số
Ví dụ:
<OBJECT type=“audio/x-wav” width=350 height=“140”>
<PARAM name=“src” value=“ding.wav”>
<PARAM name=“autoplay” value=“true”>
</OBJECT>
CÁC THUỘC TÍNH CƠ BẢN CỦA HTML
Các thuộc tính cơ bản của HTML được áp dụng cho hầu hết tất cả các phần tử HTML:
- Thuộc tính cốt lõi: Áp dụng cho hầu hết các phần tử, ngoại trừ: <base>, <head>, <html>,
<meta>, <param>, <script>, <style>, và <title>
class Chỉ định một hoặc nhiều classname cho phần tử, nó được sử dụng nhiều
trong CSS hay jQuery
id Chỉ định một id duy nhất cho phần tử
style Chỉ định thuộc tính CSS áp dụng cho phần tử
title Chỉ định thông tin thêm về phần tử
- Thuộc tính ngôn ngữ: Áp dụng cho hầu hết các phần tử, ngoại trừ: <base>, <br>,<frame>,
<frameset>, <hr>, <iframe>, <param>, và <script>
dir Chỉ định hướng hiển thị văn bản cho phần tử Có các giá trị:
- ltr: phải qua trái
- rtl: trái qua phải
lang Chỉ định ngôn ngữ hiển thị nội dung phần tử
xml:lang Chỉ định ngôn ngữ hiển thị nội dung phần tử (đối với tài liệu XHTML)
- Thuộc tính bàn phím:
accesskey Chỉ định một phím tắt để kích hoạt, tiêu điểm vào phần tử
tabindex Chỉ định thứ tự tab vào một phần tử
THUỘC TÍNH SỰ KIỆN
Thuộc tính sự kiện được thêm vào khi một sự kiện được kích hoạt trong một trình duyệt thì
một kịch bản JavaScript được thực hiện:
- Sự kiện tải file: được sử dụng với các phần tử <body> hay <frameset>
onload Kịch bản được chạy khi một tài liệu được tải
onunload Kịch bản được chạy khi quá trình load tài liệu bị dừng
- Sự kiện Form:
onfocus Kịch bản được chạy khi một phần tử nhận tiêu điểm
onblur Kịch bản được chạy khi một phần tử mất tiêu điểm
onchange Kịch bản được chạy khi một phần tử thay đổi
onreset Kịch bản được chạy khi biểu mẫu được thiết lập lại
onselect Kịch bản được chạy với phần tử được chọn
onsubmit Kịch bản được chạy khi form được gửi đi
- Sự kiện hình ảnh: được sử dụng với phần tử <img>
onabort Kịch bản được chạy khi tải một hình ảnh bị gián đoạn
- Sự kiện bàn phím: được sử dụng với hầu hết các phần tử ngoại trừ base, bdo, br, frame,
frameset, head, html, iframe, meta, param, script, style, và title
onkeydown Kịch bản được chạy khi một phím được nhấn
onkeypress Kịch bản được chạy khi một phím được nhấn và thả ra
onkeyup Kịch bản được chạy khi một phím được thả ra
- Sự kiện chuột: được sử dụng với hầu hết các phần tử, ngoại trừ: base, bdo, br, frame,
frameset, head, html, iframe, meta, param, script, style, và title
onclick Kịch bản được chạy khi click chuột
ondblclick Kịch bản được chạy khi click đúp chuột
onmousedown Kịch bản được chạy khi chuột được nhấn
onmousemove Kịch bản được chạy khi di chuyển chuột vào một điểm
onmouseout Kịch bản được chạy khi di chuyển chuột khỏi một phần tử
onmouseover Kịch bản được chạy khi di chuyển chuột vào một phần tử
onmouseup Kịch bản được chạy khi nhả chuột
BỐ CỤC WEBSITE
Để tạo ra giao diện của một Website cho trang Web có ba cách bằng cách sử dụng phần tử
<div>, <table> và <frame>
<!DOCTYPE html>
<html>
<body>
<div id="container"
style="width:500px">
<div id="header"
style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Banner</h1></div>
<div id="menu"
style="background-color:#FFD700;height:200px;width :100px;float:left;">
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Banner</h1>
</td>
</tr>
<tr valign="top">
<td style="background- color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
Trang 7<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content"
style="background-color:#EEEEEE;height:200px;width
:400px;float:left;">
Noi dung</div>
<div id="footer"
style="background-
color:#FFA500;clear:both;text-align:center;">
Ban quyen Web </div>
</div>
</body>
</html>
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:4 00px;text-align:top;">
Noi dung</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Ban quyen Web</td>
</tr>
</table>
</body>
</html>
Giả lớp được dùng để thêm một hiệu ứng đặc biệt cho phần tử chọn:
bộ_chọn : tên_giả_lớp {thuộc_tính : giá_trị;}
Các loại tên giả lớp như:
:link chọn tât cả các liên kết viếng thăm thường xuyên
:visited chọn tất cả các liên kết đã truy cập
:active chọn tất cả liên kết hoạt động
:hover chọn liên kết khi re chuột lên
:focus chọn phần tử <input> nhận tiêu điểm
:first-letter chọn chữ cái đầu tiên của mọi phần tử <p>
:first-line chọn dòng đầu tiên của tất cả các phần tử <p>
:first-child chọn tất cả các phần tử <p> là phần tử con đầu tiên của nó
:before chèn nội dung trước mọi phần tử <p>
:after chèn nội dung sau mọi phần tử <p>
: lang(language) chọn tất cả các phần tử <p> với một giá trị thuộc tính lang(language).
Trang 81 Khái niệm:
DHTML là viết tắt của Dymanic HTML là một ngôn ngữ hoặc một tiêu chuẩn Web, đó là sự
kết hợp của HTML, Javascript, DOM và CSS
W3C cung cấp 4 tiêu chuẩn hỗ trợ cho việc xây dựng trang web động
- Hỗ trợ JavaScript: đây à ngôn ngữ kịch bản phổ biến nhất trên Internet, và nó có thể
hoạt động trong tất cả các trình duyệt DHTML sử dụng JavaScript để kiểm soát,
truy cập các thao tác của phần tử HTML
- Hỗ trợ Document Object Model (DOM): là một mô hình đối tượng tài liệu, nó định
nghĩa các tiêu chuẩn để truy cập và thao tác với tài liệu HTML, và DHTML sử dụng
nó để truy cập và thao tác với các phần tử HTML
- Hỗ trợ sự kiện HTML: là một phần của DOM DHTML sử dụng nó để tạo ra các
phản ứng các sự kiện từ người dùng
- Hỗ trợ kiểu mẫu (CSS): dùng để định nghĩa cách hiển thị các phần tử trong trang
HTML DHTML và DOM sử dụng nó để thay đổi kiểu cách và vị trí của phần tử
trong tài liệu HTML
2 JavaScript: dùng để tạo ra nội dung HTML động.
- Câu lệnh document.write() được sử dụng để viết ra một trang web
- Để thay đổi nội dung hoặc các thuộc tính của phần tử HTML:
+ Để thay đổi nội dung của một phần tử HTML:
document.getElementById(id).innerHTML= nội_dung_mới;
+ Để thay đổi thuộc tính của một phần tử HTML:
document.getElementById(id).thuộc_tính= giá_trị_mới;
- JavaScript cũng có thể được thực thi khi một sự kiện xảy ra, như là việc khi người dùng
nhấp vào một phần tử HTML
- JavaScript cũng có thể được dùng để thay đổi kiểu style của phần tử HTML
3 DOM HTML: là mô hình đối tượng tài liệu HTML; một giao diện lập trình tiêu chuẩn
cho HTML; nền tảng ngôn ngữ độc lập; theo tiêu chuẩn W3C HTML DOM xác định đối
tượng và thuộc tính của tất cả các phần tử HTML và giao thức để tiếp cận chúng Tóm lại
DOM HTML đưa ra tiêu chuẩn làm thế nào để có thể truy cập, thay đổi, thêm hoặc xóa các
phần tử HTML
Thay đổi một phần tử HTML Thay đổi một thuộc tính HTML
<!DOCTYPE html>
<html>
<body>
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script type="text/javascript">
document.getElementById("he ader").innerHTML="New Header";
</script>
</body>
</html>
<img id="image"
src="smiley.gif">
<script type="text/javascript">
document.getElementById("ima ge").src="landscape.jpg";
</script>
</body>
</html>
4 Sự kiện HTML: có thể được kích hoạt các hoạt động trong trình duyệt Khi người dùng
tạo ra một sử kiện trên một phần tử nào đó, một đoạn mã JavaScript được thực hiện
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function changetext(id) {
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>
5 CSS:
JavaScript và HTML DOM có thể được sử dụng để thay đổi kiểu cách của bất kỳ một phần
tử HTML nào
Thay đổi style của phần tử HTML hiện tại Thay đổi style của phần tử HTML cụ thể
Để thay đổi style của phần tử HTML hiện tại,
ta sử dụng câu lệnh:
this.style.thuộc_tính = giá_trị_mới;
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.style.color=
'red'">Click Me!</h1>
</body>
</html>
Để thay đổi style của một phần tử HTML cụ thể, ta dùng câu lệnh:
document.getElementById(id).style = giá_trị_mới;
<!DOCTYPE html>
<html>
<body>
<h1 id="h1"
onclick="document.getElementB yId('h1').style.color='red'"> Click Me!</h1>
</body>
</html>
