Bai - Ngon Ngu HTML

Ngôn ngữ HTML
1
Mục tiêu
⚫Hiểu khái niệm về HTML
⚫Nắm được cách sử dụng và gắn kết các
thẻ (tags) HTML để xây dựng một trang
web tĩnh
⚫Biết cách bố trí, sắp xếp hợp lý giữa các
đối tượng trên trang web
Nội dung
⚫Giới thiệu về HTML
⚫Cấu trúc của 1 tài liệu HTML
⚫Các thẻ (tags) cơ bản
⚫Các thẻ danh sách
⚫Thẻ liên kết trang
⚫Thẻ tạo bảng
3
Nội dung
4
Giới thiệu về HTML
⚫HTML = HyperText Markup Language –
Ngôn ngữ đánh dấu siêu văn bản – Ngôn
ngữ cơ bản nhất để xây dựng các trang
web.
⚫HTML Do Tim Berner Lee phát minh và
được W3C (World Wide Web Consortium)
đưa thành chuẩn năm 1994.
5
⚫HTML sử dụng các tập ký hiệu đánh dấu
thường được là các thẻ (tags) để định
dạng cách hiển thị dữ liệu.
⚫Các trình duyệt thường không báo lỗi cú
pháp cho ngôn ngữ HTML. Nếu viết sai cú
pháp chỉ dẫn đến kết quả hiển thị không
đúng với dự định.
6
⚫ Tập tin HTML có nội dung dưới dạng text bao gồm các
thẻ (tags) nhỏ
⚫ Các thẻ hiển thị nói cho trình duyệt biết nó phải hiển thị
trang đó như thế nào
⚫ Có nhiều trình soạn thảo HTML cho phép người sử dụng
soạn thảo trực quan, kết quả sinh ra HTML tương ứng
như:
 Microsoft Expression Web
 Notepad, Notepad ++
 Microsoft FrontPage
 Macromedia Dreamweaver
…
7
⚫Lưu lại với tên tập tin:
vidu1.html hoặc
vidu1.htm
⚫Mở lại bằng trình duyệt web hay double
click vào tập tin đã lưu.
8
Giới thiệu về HTML – Ví dụ
Mã HTML Hiển thị trên trình duyệt
This is webpage This is webpage
<b> This is webpage </b> This is webpage
⚫Ví dụ trên cho thấy, cùng một dữ liệu là

dòng văn bản “This is webpage”, nhưng
khi ta sử dụng định dạng của thẻ <b> ở
dòng thứ 2, kết quả hiển thị sẽ khác
9
⚫ Hầu hết các tag của HTML đều có thẻ bắt đầu
(thẻ mở) và thẻ kết thúc (thẻ đóng) tương ứng.
⚫ Thẻ kết thúc tương tự thẻ bắt đầu chỉ khác nhau
là thêm ký tự “/” vào trước nó.
⚫ Thẻ mở và thẻ đóng đều được đặt trong dấu:
<thẻ mở> dữ liệu </thẻ đóng>
thẻ mở = thẻ đóng
10
⚫ Các thẻ không phân biệt chữ hoa và thường:
<HTML> tương <Html> đương <html>
⚫ Bỏ qua các khoảng trắng thừa và các dấu ngắt
dòng, xuống dòng giữa văn bản dữ liệu và các
thẻ, ví dụ:
Đoạn 1 Đoạn 2 Đoạn 3
Xin chào Xin chào tất cả Xin chào tất cả
tất cả các bạn các bạn các bạn lớp
lớp K08406 lớp K08406 K08406
→ Xin chào tất cả các bạn lớp K08406

11
Nội dung
12
Cấu trúc của 1 tài liệu HTML
<HTML>
<HEAD>
<TITLE> Đây là tiêu đề của trang web </TITLE>
</HEAD>
<BODY>
Xin chào tất cả các bạn
</BODY>
</HTML>
13
14
15
Cấu trúc của 1 tài liệu HTML – Tag
⚫Một thẻ (tag) thường có 3 phần:
Tên của thẻ: dùng để nhận dạng chức năng
của thẻ
Thuộc tính của thẻ: dùng để nhận biết dữ liệu
được hiển thị như thế nào.
Giá trị của thuộc tính thẻ
⚫Ví dụ:
Mã HTML Hiển thị trên trình duyệt
<FONT FACE=“Arial” SIZE=“4”> This is This is a webpage
a webpage </FONT>
16
Nội dung
17
Thẻ Heading
Thẻ mở Thẻ đóng Mục đích
<H1> </H1> Định dạng dòng văn bảng
theo phân cấp các đề mục.
<H2> </H2> Kích thước của ký tự nhỏ
dần từ 1 đến 6
<H3> </H3> Sau mỗi thẻ, văn bản tự
động xuống dòng
<H4> </H4> Thuộc tính:
align=“cách căn chỉnh lề”:
<H5> </H5> left, right, center, justify
<H6> </H6> 18
Các tags trong nội dung trang HTML
<Body> </Body> Nội dung của trang Web
 Chú thích của trang HTML

<P> </P> Khai báo một đoạn văn
bản, chèn một ký tự xuống
dòng và một dòng trống.
Thuộc tính:
align=“cách căn chỉnh lề”:
left, right, center, justify
19
Các tags định dạng ký tự
⚫ Chọn phông chữ và định dạng chữ:
<B> </B> In đậm
<I> </I> In nghiêng

<U> </U> Gạch dưới
<TT> </TT> Chữ có độ rộng cố định
20
<SUB> </SUB> Subscript, VD: số 2 trong H2O
<SUP> <SUP> Supperscript VD: số 2 trong

X2
21
<FONT> </FONT> Định dạng kích thước, màu

sắc, kiểu chữ,….
⚫ Cú pháp như sau:

<FONT face = ??? size = ??? color = ??? … </FONT>
VD: <FONT face = “Arial” size = “4pt” color = “red” </FONT>

(Xem ví dụ 1) 22
Ví dụ 1:
23
Ví dụ 1: hiển thị trên trình duyệt
24
Trang trí hình ảnh
⚫Để chèn hình ảnh vào trang HTML ta dùng
thẻ <IMG>
Lưu ý: thẻ này không có thẻ đóng.
Các thuộc tính của thẻ:
⚫SRC: qui định tên tập tin ảnh
⚫HEIGHT: chiều cao của ảnh
⚫WIDTH: chiều rộng của ảnh
⚫ALT: qui định một chuổi ký tự thay thế cho ảnh trong
trường hợp ảnh không hiển thị ra
⚫ALIGN: canh chỉnh left, right, center
(Xem ví dụ 2)
25
Ví dụ 2:
26
27
Màu sắc và bố cục nền của trang
⚫Giá trị màu được ghi bằng tổ hợp:
RRGGBB
RR: red
GG: green
BB: blue
⚫Mỗi thành phần màu được ghi bằng số
thập lục phân (hệ đếm 16) từ 00 đến FF
Giá trị thấp nhất là 000000 là màu đen
Giá trị cao nhất là FFFFFF là màu trắng
Hoặc ta có thể dùng các tên màu có định nghĩa
sẵn như : red (đỏ), yellow (vàng),…. 28
Giá trị màu được xác định:
#RRGGBB
RR: Màu đỏ
GG: Màu xanh lá cây
BB: Màu xanh nước biển
Giá trị màu trong hệ thập lục phân 0->F
Ví dụ:
#0000FF
#FF0000
#00FF00
#112233
29
Màu sắc Giá trị Tên tiếng Anh
Đỏ #FF0000 RED
Đỏ sẫm #8B0000 DARKRED
Xanh lá cây #00FF00 GREEN
#90EE90 LIGHTGREEN
Xanh nhạt
#0000FF BLUE
Xanh nước biển
#FFFF00 YELLOW
Vàng #FFFFE0 LIGHTYELLOW
Vàng nhạt #FFFFFF WHITE
Trắng #000000 BLACK
Đen #808080 GRAY
Xám #A52A2A BROWN
Nâu #FF00FF MAGENTA
#EE82EE VIOLET
Tím
#FFC0CB PINK
Tím nhạt
#FFA500 ORANGE
Hồng #000080 NAVY
Da cam #4169E1 ROYALBLUE
30
Màu đồng phục hải quân #7FFFD4 AQUAMARINE
http://www.w3schools.com/tags/ref_colornames.asp
31
<body>
<font color="#FF0000">Màu đỏ
bằng số </font><br>
<font color="red">Màu đỏ bằng
chữ </font><br>
<font color="green">
<h2>Mau GREEN </h2>
</font><br>
<font color="blue">Mau BLUE
</font><br>
<font color="#112233">Mau
"112233" </font><br>
</body> 32
⚫Màu nền, màu chữ được đặt tương ứng
nhờ vào các biến thuộc tính BGCOLOR,
TEXT. (Xem ví dụ 2)
⚫Ngoài ra ta có thể đặt hình nền cho trang
nhờ vào biến thuộc tính BACKGROUND
Lưu ý: chép ảnh cần dùng làm hình nền vào
cùng tập tin HTML. (Xem ví dụ 3, 4)
33
Ví dụ 3: BGCOLOR
34
Ví dụ 3: BGCOLOR
35
Ví dụ 4: BACKGROUND
36
Ví dụ 4: BACKGROUND
37
Nội dung

38
Định dạng danh sách các đề mục
⚫HTML hỗ trợ việc trình bày các đề mục với
dạng các nút hay đánh số thứ tự
Dạng đánh số thứ tự Dạng các nút
(Ordered list - OL) (Unordered List – UL)
1. Mục 1 ⚫Mục 1
39
⚫HTML hỗ trợ việc trình bày các đề mục với
các nút hay đánh số thứ tự
Danh sách đề mục đánh số thứ tự <OL>
⚫Mỗi mục danh sách bắt đầu bằng <LI>
⚫Cú pháp: <OL Type = kiểu đánh số>
Kiểu đánh số Kiểu ký tự dùng để đánh số thứ tự
I Dùng chữ số la mã I, II, III, ....

i (mặc định) Dùng chữ số thường 1,2,3,...
A Dùng ký tự A, B, C, ...
a Dùng ký tự a,b,c, ...
40
<body> ⚫ Click xem ví dụ
<h4> An Ordered List:</h4>

<ol type = I>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
⚫ Các danh sách không có số thứ tự <UL>: mặc
định là các bullet, có thể dùng thuộc tính Type
để đổi dạng khác
 Cú pháp: <UL Type = kiểu danh sách>
 Mỗi mục danh sách bắt đầu bằng <LI>
Kiểu danh sách Kiểu bullet dùng đánh dấu
Square Bullet là hình vuông đầy.

Circle Bullet là hình tròn rỗng.
Disc (mặt định) Bullet là hình tròn đầy.
42
<h4> An Unordered
List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
⚫ Danh sách đề mục có ⚫ Click xem ví dụ
diễn giải bắt đầu là
<DL> kết thúc </DL> <body>
trong đó mỗi mục trong
<dl>
danh sách <DT> là từ
<dt>Coffee</dt>
khoá, <DD> là diễn giải.
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
Ví dụ 5: dạng danh sách đề mục
<p>An ordered list:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>An unordered list:</p>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
45
Nội dung
46
Liên kết (link) trang
⚫Đặc điểm của HTML có thể liên kết các
trang khác nhau hoặc các phần nằm trong
cùng trang lại với nhau bằng cách dùng
tag <A> và </A>
⚫Ta gọi:
Đối tượng sử dụng để kích chuột vào là: Đối
tượng liên kết. Đối tượng có thể là: văn bản,
hình ảnh.
Địa chỉ nội dung sẽ được hiện ra là Đích liên
kết
47
Các thuộc tính:
⚫href=“đích liên kết”: Nếu trong cùng web nên sử
dụng đường dẫn tương đối.
⚫target=“tên cửa sổ đích”. Có một số tên đặc biệt:
• _self: cửa sổ hiện tại
• _blank: cửa sổ mới
Liên kết trang được thực hiện bằng tag <A>
</A> với nhiều cấp độ khác nhau:
48
Liên kết với một phần khác nằm trong cùng
trang hiện hành:
⚫Đặt tên ở đầu của các phần sẽ được liên kết đến:
<A Name=“#Giới thiệu”><H1>1. Giới thiệu</H1></A>
⚫Ở mỗi điểm liên kết được đặt bằng từ khoá:
Hãy đọc trước <A HREF=“#Giới thiệu”> phần giới
thiệu </A> để biết nội dung môn học.
49
Liên kết với một phần nằm trong trang khác (được
lưu trữ cùng thư mục với trang hiện hành):
⚫Đặt tên ở đầu của các phần sẽ được liên kết đến:
VD: <A Name=“#Giới thiệu”><H1>1. Giới thiệu
</H1></A>
⚫Trong trang HTML khác ở điểm liên kết được đặt bằng từ
khoá:
VD: Hãy đọc trước <A HREF=“GioiThieu.HTML#Giới
thiệu”>phần giới thiệu</A> để biết nội dung môn học.
50
⚫Liên kết đến địa chỉ website hay một trang
cụ thể trên website (ta chỉ cần ghi trực
tiếp địa chỉ của trang cần liên kết đến)
Các trang web liên kết:
<P><A HREF=“http://wwwut.edu.vn”> Trang web Đại
học Giao Thông Vận Tải Thành Phố Hồ Chí Minh
</A></P>
<P><A HREF=“http://www.google.com”> Google
</A></P>
(Xem ví dụ 6)
51
Liên kết đến địa chỉ Email:
Các trang web liên kết:
<P><A HREF=“maito:vinh.cao@ut.edu.vn”> Cao Hữu
Vinh</A></P>
52
Ví dụ 6:
53
Nội dung
54
Tạo bảng trong HTML
⚫ Để tạo một bảng ta dùng tag:
<TABLE> …….. </TABLE>
⚫ Các thuộc tính:
CAPTION: định nghĩa tiêu đề cho bảng
BORDER=“số”: kích thước đường viền. Đặt bằng 0
(mặc định): không có đường viền.
WIDTH=“rộng”, HEIGHT=“cao”: độ rộng và độ cao
của bảng. Có thể đặt theo 2 cách:
⚫ n: (n là số) Quy định độ rộng, cao là n pixels
⚫ n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng
chứa bảng.
55
⚫ Để tạo một bảng ta dùng tag:
<TABLE> …….. </TABLE>
⚫ Các thuộc tính:
CELLSPACING=“số”: Khoảng cách giữa 2 ô liên tiếp
CELLPADDING=“số”: Khoảng cách từ góc ô đến nội
dung ô
BGCOLOR=“màu”: màu nền của bảng
BACKGROUND=“địa_chỉ_ảnh”: Địa chỉ của file ảnh
làm nền cho bảng. Nên sử dụng đường dẫn tương
đối nếu có thể.
56
⚫ Để tạo dòng cho bảng dùng tag <tr>…</tr>
Ghi chú: bảng có bao nhiêu dòng thì có bấy
nhiêu cặp thẻ này
⚫ Tạo ô:
Ô tiêu đề của bảng: <th>…</th>
Ô dữ liệu: <td>…</td>
Tổng số thẻ <td> và <th> bằng số ô của bảng. Dòng có
bao nhiêu ô thì có bấy nhiêu thẻ <td> và/hoặc <th> nằm
trong cặp thẻ <tr>…</tr> tương ứng
Chú ý: Để có được một ô trống trong bảng (ô không có
dữ liệu) thì cần đặt nội dung ô là:
(Xem ví dụ 7)
57
Ví dụ 7:
58
Ví dụ 7:
59
Khung (Frame)
⚫Cho phép chia một trang web làm nhiều

phần, mỗi phần chứa nội dung của 1 trang
web khác
60
Khung
⚫Tạo trang web chứa các khung:
Thay thẻ <body>…</body> bằng:
<frameset>
các khung
</frameset>
<noframes>
nội dung trong trường hợp trình
duyệt không hỗ trợ khung
</noframes>
(xem ví dụ 8)
61
Ví dụ 8:
62
Ví dụ 8:
63
Khung
⚫Một số thuộc tính của <frameset>

rows = “n1, n2, … nk” hoặc cols = “n1,
n2, … nk”: Quy định có k dòng (hoặc cột), độ
rộng dòng (cột) thứ i là ni. ni là số, có thể thay
bằng *: phần còn lại
frameborder = yes hoặc no
framespacing = “n”: Khoảng cách giữa 2
khung
64
Hình thức tạo một Frameset
⚫Tạo một trang leftframe hiển thị danh sách

các link đến các website
⚫Tạo một trang frameset liên kết với trang
leftframe để hiển thị theo mong muốn.
(Xem ví dụ ViDuFrameSet.html và
FrameSet.html)
65
Soạn thảo trang ViDuFrameSet.html
66
Soạn thảo trang FrameSet.html
67
68
Thẻ <marquee>
⚫Thẻ <marquee> sẽ làm chạy hầu hết các

đối tượng trong thẻ như: chữ, hình ảnh,
các định dạng khác.
⚫Cú pháp như sau:
<marquee> đối tượng chạy </marquee>
69
Thẻ <marquee>
⚫Thuộc tính direction (hướng chạy):

Mặc định các đối tượng sẽ chạy từ phải sang
trái. Tuy nhiên ta có thể thay đổi hướng chạy.
Các giá trị của thuộc tính: down, left, right, up
⚫Thuộc tính behavior (kiểu chạy):
Slide: chạy 1 lần rồi dừng
Scroll : chạy bình thường
Alternate: chạy qua rồi chạy lại
70
Thẻ <marquee>
⚫Thuộc tính scrollamount (tốc độ chạy):

Giúp tăng hay giảm tốc độ chạy, thuộc tính này
nhận giá trị chạy là số nguyên
⚫Thuộc tính loop (chế độ lặp):
Lặp 1 lần: loop = 1
Lặp liên tục: loop = -1
71
Ví dụ thẻ <marquee>
<body>
<marquee direction = "right" behavior = "scroll" loop = -1
scrollamount = 10> Chạy từ phải qua, kiểu chạy scroll, lặp liên tục,
tốc độ chạy 10 </marquee>
<marquee direction = "left" behavior = "slide" loop = 1

scrollamount = 10> Chạy từ trái qua, kiểu chạy slide, lặp 1 lần, tốc
độ chạy 10 </marquee>
<marquee direction = "down" behavior = "scroll" loop = -1

scrollamount = 10> <p align="center"> Chạy từ trên xuống, kiểu
chạy scroll, lặp liên tục, tốc độ chạy 10 </p></marquee>
<marquee direction = "up" behavior = "alternate" loop = 1

scrollamount = 10> <p align="center"> Chạy từ dưới lên, kiểu chạy
alternate, lặp 1 lần, tốc độ chạy 10 </p></marquee>
72
</body>

Bai - Ngon Ngu HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bai - Ngon Ngu HTML

Uploaded by

Copyright:

Available Formats

Ngôn ngữ HTML

⚫Ví dụ trên cho thấy, cùng một dữ liệu là

→ Xin chào tất cả các bạn lớp K08406

<Body> </Body> Nội dung của trang Web

Chú thích của trang HTML

⚫ Chọn phông chữ và định dạng chữ:

Thẻ mở Thẻ đóng Mục đích

<B> </B> In đậm

<I> </I> In nghiêng

⚫ Chọn phông chữ và định dạng chữ:

Thẻ mở Thẻ đóng Mục đích

<SUB> </SUB> Subscript, VD: số 2 trong H2O

<SUP> <SUP> Supperscript VD: số 2 trong

Thẻ mở Thẻ đóng Mục đích

<FONT> </FONT> Định dạng kích thước, màu

⚫ Cú pháp như sau:

VD: <FONT face = “Arial” size = “4pt” color = “red” </FONT>

⚫Giới thiệu về HTML

Kiểu đánh số Kiểu ký tự dùng để đánh số thứ tự

I Dùng chữ số la mã I, II, III, ....

<h4> An Ordered List:</h4>

Kiểu danh sách Kiểu bullet dùng đánh dấu

Square Bullet là hình vuông đầy.

<p>An unordered list:</p>

⚫Cho phép chia một trang web làm nhiều

⚫Một số thuộc tính của <frameset>

⚫Tạo một trang leftframe hiển thị danh sách

⚫Thẻ <marquee> sẽ làm chạy hầu hết các

<marquee> đối tượng chạy </marquee>

⚫Thuộc tính direction (hướng chạy):

⚫Thuộc tính scrollamount (tốc độ chạy):

<marquee direction = "left" behavior = "slide" loop = 1

<marquee direction = "down" behavior = "scroll" loop = -1

<marquee direction = "up" behavior = "alternate" loop = 1

You might also like