Tài liệu về HTML căn bản potx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (261.62 KB, 8 trang )
LÀ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=" /><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="" />
<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.
<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://>
Vào mail </a>
Ví dụ:
<a href=
mailto://>
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
name) 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
tùy chọn
Đa giác
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:
square ■
disc ●
circle ○
- 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:
A ABC
a abc
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
below : 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.
size cỡ của phần tử.
src chỉ định đường dẫn của hình ảnh nếu kiểu là image.
value giá trị của phần tử.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<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.
name Tên của phần tử
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="">
<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ụ:
<OBJECT data=“” 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 />
<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).
DHTML
1. 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>
