Bài giảng HTML ngôn ngữ đánh dấu siêu văn bản Trịnh Công Duy
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 (451.98 KB, 28 trang )
HTML
HTML
Ngôn ngữ đánh dấu
Ngôn ngữ đánh dấu
siêu văn bản
siêu văn bản
TRỊNH CÔNG DUY
TRỊNH CÔNG DUY
Website:
Website:
Khái quát
Khái quát
-
Tạo lập trang Web là một vấn đề đơn giản, chỉ
cần đánh văn bản vào rồi chèn thêm các ký hiệu
đánh dấu, gọi là thẻ có dạng như sau:
<TAG>văn bản chịu tác động</TAG>
-
Tập tin HTML luôn bắt đầu bằng thẻ <HTML> và
kết thúc bằng </HTML>
-
Các file web tỉnh luôn có phần mở rộng là *.htm
hay *.html nhằm báo cho trình duyệt biết mà
thực thi.
-
Các file web tỉnh không cần Server khi chạy, chỉ
cần nhấn đôi vào là đã có thể thực thi.
Tổng quan trang web Html
Tổng quan trang web Html
-
Các trang Web khác nhau, tẻ nhạt hay sinh động,
vô nghĩa hoặc rất cần thiết, nhưng tất cả đều có
cùng một cấu trúc cơ sở, nên đa số các trình
duyệt đang chạy trên hầu hết các kiểu máy tính
đều có thể hiển thị thành công hầu hết các trang
Web .
Cấu trúc căn bản của trang web
Cấu trúc căn bản của trang web
<HTML>
<HEAD>
<TITLE>Tiêu đề
</TITLE>
</HEAD>
<BODY tham s >ố
N i dung c a trang Webộ ủ
</BODY>
</HTML>
I Các thẻ định cấu trúc tài liệu
Cặp thẻ này đợc sử dụng để xác nhận một tài liệu là tài liệu
HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn
bộ nội dung của tài liệu đợc đặt giữa cặp thẻ này.
Cú pháp:
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ
nh những tệp tin văn bản bình thờng.
<HTML>
N i dung
</HTML>
Thẻ đợc dùng để xác định phần mở đầu cho tài
liệu
Cú pháp:
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của
tài liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn
bởi cặp thẻ <>.
Cú pháp:
<TITLE>Tiờu </ TITLE>
<HEAD>
Ph n u
</HEAD>
Thẻ này đợc sử dụng để xác định phần nội dung chính
của tài liệu - phần thân (body) của tài liệu. Trong phần
thân có thể chứa các thông tin định dạng nhất định để đặt
ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết,
đặt lề cho trang tài liệu Những thông tin này đợc đặt ở
phần tham số của thẻ.
Cú pháp:
<>
phần nội dung của tài liệu đợc đặt ở đây
</>
!"#!$%&''''(')
HTML hç trî 6 møc ®Ò môc
<> <'>
®Þnh d¹ng ®Ò môc cÊp 1
<> <'>
®Þnh d¹ng ®Ò môc cÊp 2
<> <'>
®Þnh d¹ng ®Ò môc cÊp 3
<> <'>
®Þnh d¹ng ®Ò môc cÊp 4
<(> <'(>
®Þnh d¹ng ®Ò môc cÊp 5
<)> <')>
®Þnh d¹ng ®Ò môc cÊp 6
!"#!$*+!$",!$
Khi gặp thẻ này văn bản tự xuống dòng
-. V i th n y v n b n s k t thúc một đoạn và
xuống hàng (Khoảng cách của văn bàn mới và văn bản cũ lớn hơn
bình thờng)
/. V i th n y v n b n s xuống hàng giống nh ta
gõ Enter
Ví dụ
Cng ho xó hi ch ngha Vit nam<BR> c lp - T do - Hnh
phỳc<P>n xin vic
Kt qu
Cng ho xó hi ch ngha Vit nam
c lp - T do - Hnh phỳc
n xin vic
012!$3!$!$
Đường kẻ ngang chủ yếu được dùng để phân định
một trang Web thành những phần có tính logic và dễ nhìn
4!$+ !5ồ 6 7+ 5ế ả
<HR>]
<HR SIZE=10>]
<HR NOSHADE>]
<HR WIDTH=40>]
<HR COLOR=“#FF0000">]
II. C¸c thÎ ®Þnh d¹ng v¨n b¶n
8 '8…
•
Cho phÐp ®Þnh d¹ng v¨n b¶n b»ng c¸c cÊu tróc cña
chóng.
•
Có ph¸p: 89:$!;thuéc tÝnh> '8…
C¸c gi¸ trÞ cho tham sè <=:
RIGHT
JUSTIFY
LEFT
CENTER
>?"&!$@+ABC!$:D3DEFG
Một màu đợ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:
#//<<
trong đó:
// - là giá trị màu Đỏ.
<< - là giá trị màu Xanh lá cây.
- là giá trị màu Xanh nớc biển.
Màu sắc có thể đợc xác định qua thuộc tính G$C9CB;
hay C9CB;. Sau dấu bằng có thể là giá trị RGB hay tên
tiếng Anh của màu
B¶ng mµu
@+A <:B H!:D!$!
DDá
DDá sÉm
Xanh l¸ c©y
Xanh nh¹t
Xanh níc biÓn
Vµng
Vµng nh¹t
Tr¾ng
DDen
X¸m
N©u
TÝm
TÝm nh¹t
Hång
Da cam
Mµu ®ång phôc hai qu©n
IJJKKKK
ILKKKK
IKKJJKK
IMKMK
IKKKKJJ
IJJJJKK
IJJJJK
IJJJJJJ
IKKKKKK
ILKLKLK
I(
IJJKKJJ
IL
IJJK
IJJ(KK
IKKKKLK
RED
DARKRED
GREEN
LIGHTGREEN
BLUE
YELLOW
LIGHTYELLOW
WHITE
BLACK
GRAY
BROWN
MAGENTA
VIOLET
PINK
ORANGE
NAVY
II. Các thẻ định dạng văn bản
0 !"#!$3NO.
Sau đây là các thẻ đợc sử dụng để quy định các thuộc
tính nh in nghiêng, in đậm, gạch chân cho các ký tự,
văn bản khi đợc thể hiện trên trình duyệt
<> </>
<>/=<>
</>/=<>
In đậm
<> </>
<> </>
In nghiêng
<P> </P>
In gạch chân
<>P-> </>P->
Chỉ số trên (SuperScript)
<>P> </>P>
Chỉ số dới (SubScript)
2.3. Q!3:R+SCTU!GV!
WXX.
J=
J ;font-name
/ ;color
>Y ;n
'J=
III. C¸c thÎ ®Þnh d¹ng danh s¸ch
4!$+ !5ồ 6 7+ 5ế ả
555
Y u t 1]]] ế ố
Y u t 2]]] ế ố
Y u t 3]]] ế ố
'5
1. Y u t 1] ế ố
2. Y u t 2] ế ố
3. Y u t 3] ế ố
1. Danh sách có trật tự
Danh sách có trật tự tự động đánh số từng thành tố của d/s.
2. Danh sách không có trật tự
Danh sách không có trật tự đánh dấu (chẳng hạn các núm tròn)
cho từng yếu tố của danh sách.
Mã ngu nồ K t qu ế ả
<UL>
<LI>Y u t ế ố
1
<LI>Y u t ế ố
2
<LI>Y u t ế ố
3
</UL>
o
Y u t 1 ế ố
o
Y u t 2 ế ố
o
Y u t 3 ế ố
4!$+ !5ồ 6 7+ 5ế ả
<DL>
<DT>Yếu tố 1
<DD>Chú giải cho yếu tố 1
<DT>Yếu tố 2
<DD>Chú giải cho yếu tố 2
</DL>
Yếu tố 1
Chú giải cho yếu tố 1
Yếu tố 2
Chú giải cho yếu tố 2
3. Danh sách định nghĩa
Mỗi yếu tố của danh sách bao gồm hai thành phần:
Tiêu đề được căn lề phía trái (chỉ ra bởi thẻ <DT>)
Phần giải nghĩa được căn lề thụt hơn sang phía phải
(chỉ ra bởi thẻ <DD>)
4!$+ !5ồ 6 7+ 5ế ả
<MENU>
<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3
</MENU>
· Yếu tố 1
· Yếu tố 2
· Yếu tố 3
4. Danh sách kiểu thực đơn
Mỗi yếu tố của danh sách được cấp một chỉ số chẳng
hạn như dấu tròn. Trông rất giống danh sách không có trật tự
IV. Liên kết siêu văn bản
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
X.''F9GT!+F"+T!.LKLK'Z":B'":B'":B':!"F*IXFBKK
T&
H![
!$
\!$
012!$
"]!
H!^:9F
_G:D!_
- URL đợc trình bày ở trên là URL tuyệt đối.
- URL tơng đối hay còn gọi là URL không đầy đủ.
- 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.
- 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.
0 `1a!$:
G#C9:H!3D:H+TU!GV!BC!$
§Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ
Có ph¸p:
<A
HREF = url
NAME = name
TABINDEX = n
TITLE = title
TARGET = _blank / _self
>
siªu v¨n b¶n
</A>
Ví dụ:
nhan <a href="">vao day</a>
de kiem tra mail
N!$b.
HREF
Địa chỉ của trang Web được liên
kết, là một URL nào đó.
NAME
Đặt tên cho vị trí đặt thẻ.
TABLEINDEX
Thứ tự di chuyển khi ấn phím
Tab
TITLE
Văn bản hiển thị khi di chuột trên
siêu liên kết.
TARGET
Mở trang Web được liên trong
một cửa sổ mới (_blank) hoặc
trong cửa sổ hiện tại (_self)
#C9:H!3D D! `:9
Nếu đặt thuộc tính href= của thẻ <a> giá trị
:9C.""BFc"C:!thì 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ớ d:
Trang WEB này đợc
BF^;mailto:
WEBMASTER
d bảo trì
IV. Chèn các thẻ âm thanh, hình ảnh
(<:e::[+
Liên kết với file đa phơng tiện cũng tơng tự nh liên kết
bình thờng. Tuy vậy phải đặt tên đúng cho file đa phơng
tiện. Phần mở rộng của file phải cho biết kiểu của file
(01f!T@Cg@:9:[+
Cú pháp:
Thẻ này không có thẻ kết thúc tơng ứng (</<>P=>). Để
chơi lặp lại vô hạn cần chỉ định - = -1 hoặc - =
INFINITE. Thẻ <>P= phải đợc đặt trong phần mở đầu
(tức là nằm trong cặp thẻ HEAD).
<>P=
>/;+B9
-;!
