BAI 6 - XAY DUNG WEBSERVER CO BAN TREN ESP8266.pdf

14/09/2021
1
ĐIỆN THÔNG MINH E-SMART
Điện tử thông minh dành cho mọi người

14/09/2021
2
Copyright by Điện thông minh E-smart

14/09/2021
3
Website trên internet:
-Hosting: nơi cung cấp dịch vụ và lưu trữ web
-Tên miền: tên truy cập của một trang web
Lưu trữ source web
Xử lý qua giao thức HTTP/ Websocket
Phân phối nội dung
Địa chỉ IP cố định trên INTERNET

14/09/2021
4
Lưu trữ source web
Xử lý qua giao thức HTTP/ Websocket
Phân phối nội dung
Địa chỉ IP cố định trong mạng LAN

14/09/2021
5
Thêm thư viện, khai
báo đối tượng
webserver và biến chứa
mã nguồn web
1
Thiết lập nhận request
và trả responce đến
client
2 Khởi tạo web server
Lắng nghe request
từ client
3

14/09/2021
6
<!DOCTYPE.html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
Định dạng CSS
</style>
<meta charset="utf-8">
</head>
<body>
<h1>This is a Heading</h1>
<input type="button" value="ON">
<input type="button" value="OFF">
<script type=“text/javascript”>
Chương trình javascript
</script>
</body>
</html>
Giao diện web
trong thẻ
<body>
1
Định dạng css
trong thẻ
<style>
2
Code javascript
trong thẻ
<script>
3

14/09/2021
7
Chạy trong tác vụ nền
trên trình duyệt web

14/09/2021
8
1. <html>: Thẻ mở đầu của trang HTML
2. <head> </head>: Thẻ chứa các thẻ trong phần đầu của trang HTML
3. <title> </title>: Tiêu đề trang web
4. <meta>: Mô tả tổng quát về nội dung trang web
5. <script> </script>: Dùng để nhúng các tập tin javascript
6. <style> </style>: Dùng để bao bọc một nội dung về css
7. <body> </body>: Thẻ chứa nội dung chính của website
8. <h1></h1>: Thẻ để hiện tiêu đề của một vấn đề nào đó
9. <div> </div>: Thẻ này thường dùng để chứa nội dung
10. <span> </span>: Thẻ chứa nội dung

14/09/2021
9
11. <span> </span>: Thẻ chứa nội dung
12. <p> </p>: Thẻ chứa nội dung (đoạn văn)
13. <center> </center>: Thẻ canh giữa các đối tượng nằm bên trong
14. <a> </a>: Thẻ tạo link
15. <input>: Thẻ phần tử nhập liệu
16. <br>: Thẻ xuống hàng
17. <hr>: Thẻ tạo đường kẻ ngang
18. <b> </b>: Tạo chữ đậm
19. <i> </i>: Tạo chữ nghiêng
20. <u> </u>: Tạo chữ gạch dưới

14/09/2021
10
<input type=“tham số”>
Text: kiểu nhập dữ liệu văn bản thông thường
Password: kiểu mật khẩu
Radio: kiểu dữ liệu dạng lựa chọn, chọn 1 trong nhiều
Button: kiểu nút nhấn
Checkbox: kiểu lựa chọn, chọn 1 hoặc nhiều giá trị

14/09/2021
11

14/09/2021
12
CSS cục bộ
CSS nội tuyến
CSS ngoại tuyến

14/09/2021
13
Lệnh Ý nghĩa lệnh
font-size: size; Cỡ chữ
font-family: font_name; Font chữ
font-weight: bold; In đậm
font-style: italic; In nghiêng
color: your_color; Màu chữ
background-color: your_color; Màu nền
background-image:url(your image); Hình nền
width: n; Chiều rộng
height: n; Chiều cao
text-align: alignment; Canh lề theo chiều ngang
line-height: n; Canh lề theo chiều dọc
text-decoration: underline; Gạch chân
border: color width style; – width là độ
dày – style là solid / dotted,…
Tạo đường viền

14/09/2021
14
Sự kiện người
dùng
Mô tả
onclick xảy ra khi bấm chuột vào phần tử
onload xảy ra khi phần tử được tải
onchange xảy ra khi thay đổi nội dung phần
tử trong form như khi chọn select,
khi người dùng bấm radio, áp
dụng cho các phần tử (input,
select, textarea)
Chương trình con
thực hiện lệnh khi có
sự kiện onclick
Thêm lệnh bắt sự
kiện onclick
1
2

14/09/2021
15
Ghi giá trị html ra 1 vị trí id:
document.getElementById("vị trí id").innerHTML=value;
Gán id để đánh dấu
nơi cần ghi
Ghi giá trị html ra
id đã đánh dấu khi
có sự kiện onclick

14/09/2021
16
Ghi giá trị ra vị trí id:
document.getElementById("id vị trí").value = "value";
Gán id để đánh dấu
nơi cần ghi
Ghi giá trị ra id đã
đánh dấu khi có sự
kiện onclick

14/09/2021
17
Đọc giá trị từ 1 vị trí id:
var value = document.getElementById ("id vị trí"). value;
Đọc giá trị 1 thuộc tính css từ vị trí id:

14/09/2021
18
Hiển thị/ẩn 1 vị trí id trên html:
document.getElementById("id vị trí").style.display = "thông số";
Thông số
None: ẩn đối tượng
Block: hiển thị đối tượng
Thay đổi màu nền 1 vị trí id:
document.getElementById ("id vị trí"). style.background = "màu sắc";

BAI 6 - XAY DUNG WEBSERVER CO BAN TREN ESP8266.pdf

Recommended

Recommended

More Related Content

Similar to BAI 6 - XAY DUNG WEBSERVER CO BAN TREN ESP8266.pdf

Similar to BAI 6 - XAY DUNG WEBSERVER CO BAN TREN ESP8266.pdf (17)

More from diptrnhth

More from diptrnhth (6)

Recently uploaded

Recently uploaded (20)

BAI 6 - XAY DUNG WEBSERVER CO BAN TREN ESP8266.pdf