Bài 2. HTML - Final

HỌC VIỆN KỸ THUẬT MẬT MÃ
KHOA ATTT
NGÔN NGỮ HTML
1
Mục tiêu
• Kiến thức:
– Các thành phần của nội dung web
– Các thành phần và các thẻ cơ bản của HTML
• Kỹ năng: biết cách tạo một trang web
tĩnh sử dụng HTML
2
Tài liệu tham khảo
• https://www.w3schools.com/html/default.
asp
3
Web Browser
4
Nội dung web
• Một trang web bao gồm một tập các
đối tượng tài liệu được
– khai báo bằng HTML
– tổ chức lưu trữ theo cấu trúc DOM
– định dạng hiển thị bởi CSS
– quản lý bởi javascript
5
NỘI DUNG
1. Giới thiệu chung về HTML
2. Các thành phần cơ bản của HTML
3. Các thẻ cơ bản trong HTML
4. HTML 5
1.
6
HTML: HyperText Markup Language
• Ngôn ngữ đánh dấu siêu văn bản.
• Dùng để khai báo các đối tượng tài liệu
– Các đối tượng nội dung: Input text, text
area, radio button, check box, list box,
button, submit, hidden, hyperlink, text,
image, …
– Các đối tượng định dạng: font, italic, bold,…
7
NỘI DUNG
4. HTML 5
1.
8
Các thẻ HTML
 Các đối tượng tài liệu được khai báo bởi
các thẻ HTML
 Thẻ đôi: <tenThe thuoctinh1=“giatri1”
thuoctinh2=“giatri2” …> Các đối tượng
bên trong/con</tenThe>.
 Thẻ đơn: <tenThe thuoctinh1=“giatri1”
thuoctinh2=“giatri2” …/>.
 Ví dụ:
 <p> text text text </p>
 <img src=“pic.png" />
9
Cấu trúc trang HTML
<!DOCTYPE html>
<html>
<head>
<title> Tiêu đề </title>
<meta …>
<link …>
<script …>
</head>
<body>
Các đối tượng tài liệu được khai báo bởi các thẻ HTML

</body>
</html>
10
Đặt bảng mã ký tự cho trang
<head>
…
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
…
</head>
11
Đặt logo trên thanh địa chỉ trình duyệt
<head>
…
<link rel="Shortcut Icon“ href = “logo.ico"
/>
…
</head>
12
NỘI DUNG
4. HTML 5
1.
13
Các thẻ cơ bản trong HTML
• Các thẻ định dạng  Siêu liên kết

văn bản  Liên kết
• Hiển thị ảnh  Bảng
• Hiển thị audio/video  Các điều khiển
• Đường kẻ ngang  Tập khung
Form
• Danh sách

14
Các thẻ định dạng văn bản
• Tạo đầu mục
• Làm đậm, nghiêng, gạch chân, gạch
ngang
• Thay đổi font chữ
• Xuống dòng
• Ngắt đoạn
• Mũ trên, mũ dưới
• Dấu cách
• Ký tự đặc biệt
15
Tạo đầu mục: <hi> </hi>, i = 1, 2, …
16
Làm đậm: <b> </b>
17
Làm nghiêng: <i> </i>
18
Kết hợp nhiều thẻ: Thẻ lồng nhau
19
Gạch chân: <u> </u>
20
Gạch ngang: <s> </s>
21
Mũ trên <sup> </sup>
22
Mũ dưới: <sub> </sub>
23
Thay đổi font: <font> </font>
24
Ngắt dòng: <br>
25
Tạo đoạn văn: <p> </p>
26
Ký tự đặc biệt: &name; &#code
27
Ký tự đặc biệt: &name; &#code
28
Ví dụ trang văn bản
29
• Hiển thị  Các điều khiển
audio/video  Tập khung
• Đường kẻ ngang  Form
• Danh sách
30
Hiển thị ảnh: <img src = …>
31
Hiển thị audio/video: <embed>
32
Tạo đường kẻ ngang: <hr>
33

 Các điều khiển
• Hiển thị audio/video
 Tập khung
• Danh sách
34
Danh sách có thứ tự <ol>
35
Danh sách không thứ tự <ul>
36
Danh sách định nghĩa <dl>
37
 Form
• Danh sách
38
Tạo siêu liên kết: <a href=…></a>
39
Tạo siêu liên kết: <a href = …></a>
40
 Form
• Danh sách
41
Tạo điểm đánh dấu và liên kết đến điểm dánh dấu <a name=…></a>
• Tạo điểm đánh dấu

<a name=“bookmark1”><a>
• Tạo liên kết đến điểm đánh dấu
<a href=“#name”>Chuyển đến điểm
đánh dấu</a>
42
Tạo điểm đánh dấu và liên kết đến điểm dánh dấu <a name=…></a>
• Tạo điểm đánh dấu ở Trangmoi.htm

<a name=“bookmark1”><a>
• Tạo liên kết đến điểm đánh dấu
<a href=“trangmoi.htm#name”>Sang
trang mới và chuyển đến điểm đánh dấu
trên trang mới</a>
43
 Tập khung
• Đường kẻ ngang
 Form
• Danh sách
44
Tạo bảng: <table>…</table>
45
Tạo bảng: Đường viền
46
Tạo bảng: Đường viền 1 nét
47
Tạo bảng: Tô màu
48
Tạo bảng: Căn lề chữ
49
Tạo bảng: Trộn cột…
50
Tạo bảng: Trộn cột…
51
Tạo bảng: Trộn cột
52
Tạo bảng: Trộn hàng
53
Tạo bảng: Bảng hoàn chỉnh
54
Tạo bảng: Cách chữ
55
 Tập khung
 Form
• Danh sách
56
Tạo điều khiển nút bấm
57
Tạo điều khiển nút kiểm
58
Tạo điều khiển radio
59
Tạo điều khiển ô chữ
60
Tạo điều khiển ô mật khẩu
61
Tạo điều khiển ô văn bản
62
Tạo điều khiển danh sách (đơn chọn)
63
Tạo điều khiển danh sách (đa chọn)
64
Tạo điều khiển nhãn
65
Tạo điều khiển upload tệp
66
Tạo điều khiển phân đoạn
67
Khoanh vùng có nhãn
68
Tạo điều khiển ẩn
69
 Tập khung
 Form
• Danh sách
70
Khung nội tại <iframe> …
• Khung nội tại (iframe) cho phép nhúng
các trang (con) trong trang (cha)
71
Khung nội tại <iframe>
72
Tạo tập khung (frameset)…
• Frameset (tập khung) được sử dụng để chia màn hình
client thành nhiều vùng khác nhau, mỗi vùng cho hiển thị
một trang riêng.
• Ví dụ: Chia màn hình thành 2 frames theochiều ngang
<frameset rows="80,*" frameborder="NO"
border="0" framespacing="0">
<frame src=“Defaut.htm“ name="topFrame"
scrolling="NO“ noresize >
<frame src=“Trang2.htm“ name="mainFrame">
</frameset>
73
Tạo tập khung
74
Ví dụ: Sử dụng frameset để xây dựng cấu trúc trang
Một cấu trúc trang điển hình
75
Sử dụng frameset để xây dựng cấu trúc trang …
Trước hết, chia màn hình thành 3 frames theo chiều ngang
76
Sử dụng frameset để xây dựng cấu trúc trang …
Tiếp theo, chia frame thứ 2 (giữa) thành hai frames theo
chiều dọc
77
Sử dụng frameset để xây dựng cấu trúc trang
Đặt các trang vào các frames (thuộc tính src của frame)
78
• Hiển thị  Các điều khiển
audio/video  Tập khung
• Danh sách
79
Tạo Form
• Một Form được sử dụng để quản lý các điều khiển web (các
đối tượng tài liệu).
• Client muốn gửi các giá trị do người dùng nhập vào các điều
khiển phải để các điều khiển này vào Form và đệ trình
(submit) Form lên Server.
• Khi một Form được đệ trình lên Server, tất cả các điều khiển
trên Form đó đều được đệ trình.
• Một trang web có thể có nhiều form khác nhau (thông
thường chỉ cần sử dụng 1 form/trang)
80
Tạo Form…
81
Tạo Form…
82
Tạo Form…
83
Tạo Form…
84
Tạo Form…
85
Tạo Form
86
NỘI DUNG
4. HTML 5
1.
87
Sự phát triển của HTML: HTML5
• HTML 4 được sử dụng từ 1999
• HTML 5 đang được đề xuất, tương lai
sẽ thành chuẩn
• Các trình duyệt chính (Safari, Chrome,
Firefox, Opera, Internet Explorer) hỗ trợ
dần HTML 5
88
89
90
Các luật cho HTML 5
• Các đặc trưng mới dựa trên HTML, CSS,
DOM và javascript
• Giảm các plugin
• Xử lý lỗi tốt hơn
• Nhiều đánh dấu thay cho kịch bản
• Độc lập thiết bị.
91
Các đặc trưng mới
• Đối tượng <canvas> cho độ họa 2D
• Đối tượng <video> và <audio> cho
media
• Các đối tượng theo nội dung như
<article>, <footer>, <header>, <nav>,
<section>
• Các điều khiển form mới như calendar,
date, time, email, url, search
• Hỗ trợ lưu trữ cục bộ
92
Đối tượng nhập màu
93
Đối tượng nhập ngày
94
Đối tượng nhập giờ
95
Đối tượng nhập ngày giờ
96
Đối tượng nhập ngày giờ địa phương
97
Đối tượng nhập tuần
98
Đối tượng nhập email
99
Đối tượng nhập tháng
100
Đối tượng nhập số
101
Đối tượng nhập giá trị trong khoảng
102
Đối tượng nhập nội dung tìm kiếm
103
Đối tượng nhập điện thoại
104
Đối tượng nhập URL
105
Đối tượng tự động hoàn chỉnh nhập
106
Đối tượng tạo khóa
107
Đối tượng ra
108
Đối tượng video
109
Điều khiển chạy video
110
Đối tượng audio
111
Lưu trữ web: localStorage
112
Lưu trữ web: sessionStorage
113
Sử dụng đệm
• Đệm giúp tăng tốc độ, giảm tải cho server, cho phép duyệt
offline
• Đặt thuộc tính manifest cho html
<html manifest=“cache.appcache">
• Tạo tệp .appcache
CACHE MANIFEST
# Các tệp được đặt cache
/theme.css
/logo.gif
/main.js
NETWORK:
#Các tệp không được đặt cache
login.php
FALLBACK:
#Tệp thay thế khi có lỗi
/html/ /offline.html 114
Web worker
• Chương trình javascript chạy nền
• Định nghĩa web worker ở tệp .js
– Sử dụng postMessage(obj); để đưa thông báo ra trang HTML
• Tạo web worker

if(typeof(Worker)!=="undefined") {
if(typeof(w)=="undefined") {
w=new Worker("workers.js");
}
w.onmessage = function (event) {
//access event.data;
};
}
• Dừng web worker

w.terminate();
115
Sự kiện server gửi
• Tạo đối tượng nhận sự kiện server gửi
if(typeof(EventSource)!=="undefined") {
var source=new EventSource("sse.php");
source.onmessage=function(event) {
//access event.data
};
}
• Mã phía server
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo “\n\n”;
echo "data: whatever you want to send to client.\n\n";
flush();
?>
116
The End!
117

Bài 2. HTML - Final

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

Bài 2. HTML - Final

Uploaded by

Copyright:

Available Formats

HỌC VIỆN KỸ THUẬT MẬT MÃ

NGÔN NGỮ HTML

1. Giới thiệu chung về HTML

2. Các thành phần cơ bản của HTML

3. Các thẻ cơ bản trong HTML

1. Giới thiệu chung về HTML

2. Các thành phần cơ bản của HTML

3. Các thẻ cơ bản trong HTML

1. Giới thiệu chung về HTML

2. Các thành phần cơ bản của HTML

3. Các thẻ cơ bản trong HTML

• Các thẻ định dạng  Siêu liên kết

• Các thẻ định dạng  Siêu liên kết

• Tạo điểm đánh dấu

• Tạo điểm đánh dấu ở Trangmoi.htm

Một cấu trúc trang điển hình

1. Giới thiệu chung về HTML

2. Các thành phần cơ bản của HTML

3. Các thẻ cơ bản trong HTML

• Tạo web worker

• Dừng web worker

You might also like