Tạo đề online từ PDF/Word Trộn đề thi Nhập mã Ngân hàng đề thi

Bài giảng Tin học 12 HTML và cấu trúc trang web

Bài giảng

Bài giảng Tin học 12 HTML và cấu trúc trang web

A

AdminTin họcLớp 129 lượt thi

Bắt đầu ngay

Bắt đầu ngay

33 câu hỏi

Hiển thị đáp án

1. Slide nội dung

• 1 điểm

BÀI 7.
HTML VÀ CẤU TRÚC
TRANG WEB

2. Slide nội dung

• 1 điểm

Cấu trúc trang web dưới dạng HTML

3. Slide nội dung

• 1 điểm

Nội dung nhập

4. Slide nội dung

• 1 điểm

1. TRANG WEB VÀ HTML

Trang web

Trang nguồn (mã nguồn)

5. Slide nội dung

• 1 điểm

1. TRANG WEB VÀ HTML
Ngôn ngữ html
Ngôn ngữ HTML
(HyperText Markup
Trang html
Language): ngôn ngữ
đánh dấu siêu văn
bản, được sử dụng để Phần tử html
tạo trang web
Thẻ html (tag)

6. Slide nội dung

• 1 điểm

1. TRANG WEB VÀ HTML

Ngôn ngữ HTML
(HyperText Markup
Language): ngôn ngữ
đánh dấu siêu văn
bản, được sử dụng để
tạo trang web

Trang web được tạo bởi
ngôn ngữ html có phần
mở rộng .html
hoặc .htm và được hiển
thị bởi trình duyệt web

7. Slide nội dung

• 1 điểm

1. TRANG WEB VÀ HTML

Ngôn ngữ HTML
(HyperText Markup
Language): ngôn ngữ Thẻ html (tag)
đánh dấu siêu văn
bản, được sử dụng để Phần tử html
tạo trang web

Trang được viết bằng ngôn
ngữ html gọi là trang html.
Trang html gồm có các phần
tử html. Mỗi phần tử html
gồm có nội dung được đánh
dấu bởi các thẻ html (tag)

8. Slide nội dung

• 1 điểm

1. TRANG WEB VÀ HTML

a) Thẻ đánh dấu HTML (tag)

• Được viết trong cặp dấu “<“, “>”
• Không phân biệt chữ hoa chữ thường
• Thẻ đôi: có thẻ bắt đầu (opening tag) và thẻ kết
thúc (closing tag)
<p> … </p>
• Thẻ đơn: chỉ có thẻ bắt đầu
<hr> hoặc <hr/>
• Có thể kèm các thông tin thuộc tính
<p style=“color:red”> Đây là dòng đầu tiên </p>
• Các thẻ có thể lồng nhau
<body><div><p> … </p></div></body>

9. Slide nội dung

• 1 điểm

1. TRANG WEB VÀ HTML

b) Phần tử HTML (element)

• Phần tử HTML: thẻ + nội dung của thẻ
(thẻ có chức năng định dạng nội dung)
§ Thẻ đôi: <tên thẻ>Nội dung</tên thẻ>
<h1>Trang Web và HTML</h1>
§ Thẻ đơn: <tên thẻ>
<hr>
§ Thẻ lồng nhau:
<tên thẻ cha>
<tên thẻ con>Nội dung </tên thẻ con>
</tên thẻ cha>
<head><title>Tên trang
Web</title></head>
• Tệp HTML: tập hợp các phần tử HTML

10. Slide nội dung

• 1 điểm

1. TRANG WEB VÀ HTML

b) Phần tử HTML (element)

• Trình duyệt: hiển thị nội dung theo đúng
định dạng được thiết lập bởi thẻ HTML

11. Slide nội dung

• 1 điểm

1. Tệp văn bản trong Hình 7.1 có bao nhiêu phần tử HTML?

• Tệp văn bản trong Hình 7.1 có 9 phần tử HTML

12. Slide nội dung

• 1 điểm

2. Nêu sự giống và khác nhau giữa thẻ HTML và phần tử HTML

Giống nhau:
• Đều là thành phần cơ bản của trang HTML
• Có tác dụng định dạng nội dung văn bản của trang web
Khác nhau:
§ Cấu tạo:
• Thẻ HTML: từ khóa của ngôn ngữ HTML
• Phần tử HTML: bao gồm thẻ và nội dung văn bản chịu tác động của
thẻ
§ Chức năng:
• Thẻ HTML: xác định một định dạng cụ thể
• Phần tử HTML: đơn vị định dạng của toàn bộ trang web

13. Slide nội dung

• 1 điểm

2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML

html

head body

meta title div p

h1 p hr p em

14. Slide nội dung

• 1 điểm

2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML

html

Cấu trúc hình cây:
head body
• Gốc cây: phần tử <html>
meta title div p • Quan hệ cha-con: các phần tử lồng nhau

h1 p hr p em

15. Slide nội dung

• 1 điểm

1. Vẽ sơ đồ cây của đoạn văn bản HTML sau:

p

b i u

16. Slide nội dung

• 1 điểm

2. Cây HTML có bao nhiêu phần tử gốc?

• Cây HTML có một phần tử gốc là <html>

17. Slide nội dung

• 1 điểm

3. PHẦN MỀM SOẠN THẢO HTML

a) Phần mềm Notepad

• Khởi động phần mềm
Notepad
• Nhập nội dung trang html
vào Notepad
• Lưu tệp với định dạng html
(đuôi .html)

18. Slide nội dung

• 1 điểm

3. PHẦN MỀM SOẠN THẢO HTML

b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở
Phần mềm Notepad++

Phần mềm Sublime Text

19. Slide nội dung

• 1 điểm

3. PHẦN MỀM SOẠN THẢO HTML

b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở
Phần mềm Notepad++

Phần mềm Sublime Text

20. Slide nội dung

• 1 điểm

3. PHẦN MỀM SOẠN THẢO HTML

21. Slide nội dung

• 1 điểm

3. PHẦN MỀM SOẠN THẢO HTML

c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến

22. Slide nội dung

• 1 điểm

3. PHẦN MỀM SOẠN THẢO HTML

c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến

23. Slide nội dung

• 1 điểm

1. Xếp các tên sau vào hai nhóm: phần mềm soạn thảo HTML và trình
duyệt web:
a) Notepad b) Opera c) Sublime Text d)Chrome
e) Cốc Cốc f) Notepad ++ g) FireFox h) Microsoft Edge

• Phần mềm soạn thảo HTML: a, c, f
• Trình duyệt web: b, d, e, g, h

24. Slide nội dung

• 1 điểm

2. Em có nhận xét gì về sự khác biệt khi soạn thảo HTML giữa các phần
mềm chuyên nghiệp (ví dụ Notepad ++, Sublime Text) và phần mềm
soạn thảo văn bản thông thường (ví dụ Notepad)?

§ Trong phần mềm chuyên nghiệp thì văn bản nguồn HTML sẽ tự động
tô màu các thẻ HTML và thuộc tính của nó, còn phần mềm soạn thảo
bình thường thì không có tính năng đó.
§ Các phần mềm soạn thảo chuyên nghiệp có thể có thêm các tính năng
sau:
• Hỗ trợ tự động điền để hoàn thiện việc nhập thẻ
• Hỗ trợ nhập tự động thẻ
• Hỗ trợ chế độ nhập như trong các phần mềm soạn thảo hiện đại

25. Slide nội dung

• 1 điểm

LUYỆN TẬP

1. Tìm ví dụ về phần tử HTML không thể lồng, tức là không
thể có quan hệ cha-con trong cây thông tin của trang web.

• Các thẻ như h1, h2, h3, p, … không thể lồng nhau
• Các thẻ như b, u, i, em, strong, … cũng không thể lồng nhau

26. Slide nội dung

• 1 điểm

LUYỆN TẬP
2. Chọn một văn bản đơn giản. Soạn thảo tệp HTML để hiển thị nội dung văn
bản đó. Vẽ cây thông tin các phần tử HTML của trang web vừa soạn thảo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> Ca dao Việt Nam
<title>Luyện Tập Bài 2</title>
</head>
<body> Trong đầm gì đẹp bằng sen
<h3 align="center">Ca dao Việt Nam</h3> Lá xanh bông trắng lại chen nhụy vàng
<p align="center"> Nhụy vàng bông trắng lá xanh
Trong đầm gì đẹp bằng sen<br> Gần bùn mà chẳng hôi tanh mùi bùn
Lá xanh bông trắng lại chen nhụy vàng<br>
Nhụy vàng bông trắng lá xanh<br>
Gần bùn mà chẳng hôi tanh mùi bùn
</p>
</body>
</html>

27. Slide nội dung

• 1 điểm

LUYỆN TẬP
2. Chọn một văn bản đơn giản. Soạn thảo tệp HTML để hiển thị nội dung văn
bản đó. Vẽ cây thông tin các phần tử HTML của trang web vừa soạn thảo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Luyện Tập Bài 2</title>
</head>
<body>
<h3 align="center">Ca dao Việt Nam</h3>
<p align="center">
Trong đầm gì đẹp bằng sen<br>
Lá xanh bông trắng lại chen nhụy vàng<br>
Nhụy vàng bông trắng lá xanh<br>
Gần bùn mà chẳng hôi tanh mùi bùn
</p>
</body>
</html>

28. Slide nội dung

• 1 điểm

LUYỆN TẬP
2. Chọn một văn bản đơn giản. Soạn thảo tệp HTML để hiển thị nội dung văn
bản đó. Vẽ cây thông tin các phần tử HTML của trang web vừa soạn thảo.

29. Slide nội dung

• 1 điểm

VẬN DỤNG

1. Em hãy tìm trên mạng các trang web hỗ trợ soạn thảo HTML
trực tuyến.

Một số trang web phổ biến cung cấp các công cụ soạn thảo HTML
trực tuyến:
• https://www.w3schools.com
• https://onlinehtmleditor.dev
• https://htmlcodeeditor.com
• https://jsfiddle.net
• https://jsbin.com
• https://replit.com

30. Slide nội dung

• 1 điểm

VẬN DỤNG

2. Sử dụng phần mềm soạn thảo
HTML và soạn thảo trang web có nội
dung như Hình 7.7. Lưu ý rằng thẻ
<image> với tính năng thể hiện ảnh
trên trang web có cú pháp: <image
src=“tên tệp ảnh”>, trong đó “tên tệp
ảnh” chính là đường dẫn của tệp hình
ảnh cần đưa lên trang.

31. Slide nội dung

• 1 điểm

VẬN DỤNG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lịch sử phát triển HTML</title>
</head>
<body>
<h1><strong>Lịch sử phát triển HTML</strong></h1>
<p>Các chuẩn HTML của trang web hiện nay được nhà vật lý Tim Berners-Lee đưa ra lần đầu tiên vào những
năm 1990 của thế kỷ XX tại trung tâm vật lý hạt nhân CERN.</p>
<p>Ý tưởng ban đầu của Berners-Lee là muốn thiết lập một chuẩn chung để thể hiện và chia sẻ các văn bản có
thể trao đổi bên trong cơ quan CERN.</p>
<p>Hình ảnh sau là sơ đồ thông tin mà Tim Berners-Lee đưa ra lần đầu tiên để minh họa cho ý tưởng của
mình. Trong sơ đồ này lần đầu tiên xuất hiện cụm từ “hypertext” (siêu văn bản).</p>
<img src="Lichsu-html.png">
<p>Phiên bản đầu tiên của HTML được thiết lập vào cuối năm 1991 mang tên “các thẻ HTML” văn bản này
do chính Tim Berners-Lee biên soạn.</p>
<p>Từ đó các phiên bản tiếp theo của HTML lần lượt ra đời cùng với sự phát triển của công nghệ internet.</p>
<p>Phiên bản hiện tại là HTML5, ra đời năm 2014.</p>
</body>
</html>

32. Slide nội dung

• 1 điểm

Soạn thảo trang web có nội dung “Lịch sử phát triển HTML”

33. Slide nội dung

• 1 điểm

THANK YOU!

Gợi ý cho bạn

33 câu hỏi9 lượt thi

Đề thiTin học - Lớp 12

Giải SBT Tin học 12 Khoa học máy tính Kết nối tri thức Bài 7. HTML và cấu trúc trang Web

33 câu hỏi9 lượt thi

Đề thiTin học - Lớp 12

15 câu Trắc nghiệm Tin học 12 Kết nối tri thức Bài 7 có đáp án

33 câu hỏi9 lượt thi

Đề thiTin học - Lớp 12

Giải SGK Tin 12 KNTT Bài 7. HTML và cấu trúc trang web có đáp án