Giáo án tích hợp AI Tin học 12 THUD Bài 7 HTML và cấu trúc trang web
- 0 / 0
-
(Tài liệu chưa được thẩm định)
Nguồn:
Người gửi: Hoàng Trọng Kỳ Anh
Ngày gửi: 17h:32' 14-10-2026
Dung lượng: 15.7 MB
Số lượt tải: 9
Nguồn:
Người gửi: Hoàng Trọng Kỳ Anh
Ngày gửi: 17h:32' 14-10-2026
Dung lượng: 15.7 MB
Số lượt tải: 9
Số lượt thích:
0 người
CHÀO MỪNG CÁC EM
ĐẾN VỚI
BÀI HỌC HÔM NAY!
KHỞI ĐỘNG
• Các trang web thực chất có cấu trúc như thế
nào?
• Có thể “lập trình” để tạo ra được các trang web
hay không? Nếu lập trình được thì “mã nguồn”
của trang web là gì?
• Các trang web có quan hệ như thế nào với ngôn ngữ
HTML?
• Trang web và trình duyệt web có quan hệ như thế nào?
W
ha
t
is
HT
M
L?
Các trang web thực chất
được tạo ra từ các tệp
văn bản.
Có thể “lập trình” để tạo ra được
các trang web với “mã nguồn” là
các tệp văn bản tương ứng với
các trang web.
Trình duyệt web là một ứng dụng cho phép người dùng truy
cập và xem các trang web trên Internet.
Mã nguồn của các trang
web được viết bằng
ngôn ngữ HTML.
Một số trình duyệt phổ biến hiện nay
Safari
Firefox
Chrome
Edge
Opera
W
ha
t
is
HT
M
L?
CHỦ ĐỀ 4: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP
CỦA MÁY TÍNH
BÀI 7. HTML
VÀ CẤU TRÚC TRANG WEB
NỘI DUNG BÀI HỌC
01
02
03
Trang web và HTML
Cấu trúc cơ bản
Phần mềm soạn thảo
của một tệp HTML
HTML
W
ha
t
is
HT
M
L?
01.
TRANG WEB VÀ HTML
Hoạt động 1
Tìm hiểu ngôn ngữ HTML và trang web
Các trang web mà em vẫn thường xem được hiển thị bởi trình duyệt web (ví dụ: Cốc cốc,
FireFox, Chrome). Thực chất chúng được tạo ra từ các tệp văn bản. Các tệp văn bản này được
gọi là trang nguồn (hay mã nguồn) của trang web tương ứng. Quan sát Hình 7.1 và nêu nhận
xét về mã nguồn của trang web.
a. Trang web hiển thị bởi trình duyệt
b. Tệp văn bản nguồn
Hình 7.1. Trang web và tệp văn bản nguồn
W
ha
t
is
HT
M
L?
Hướng dẫn trả lời
• Mã nguồn của trang web được viết bằng
ngôn ngữ HTML.
• Bao gồm các thành phần: tiêu đề trang, thẻ
div để nhóm các phần tử, các thẻ h1 và p để
định dạng tiêu đề và đoạn văn bản, và thẻ hr
để tạo dòng kẻ ngang.
• Mã nguồn này xác định cấu trúc và nội dung
của trang web và được trình duyệt dùng để
hiển thị trang web theo đúng định dạng đã
được thiết lập.
Đọc thông tin trong SGK và trả lời các câu hỏi sau đây:
• HTML là gì?
• Trang web như thế nào được gọi là trang HTML?
• Em hãy quan sát Hình 7.1b và cho biết nội dung trên trang HTML bao gồm
những phần nào?
• Liệt kê một số thẻ đánh dấu HTML trong ví dụ ở Hình 7.1b.
• Thẻ đánh dấu HTML là gì?
• Thẻ đánh dấu HTML có cấu trúc như thế nào?
W
ha
t
is
HT
M
L?
Hypertext Markup
Là một bộ quy tắc dùng để
Trang web có phần mở
Language (ngôn ngữ
thiết lập cấu trúc và hiển
rộng là .html hoặc .htm
đánh dấu siêu văn bản).
thị nội dung trang web.
được gọi là trang HTML.
Nội dung: văn bản, kí tự
Các kí tự đặc biệt đó được
Một
đặc biệt đặc biệt nằm
gọi là (còn gọi là thẻ HTML
, ,,
ĐẾN VỚI
BÀI HỌC HÔM NAY!
KHỞI ĐỘNG
• Các trang web thực chất có cấu trúc như thế
nào?
• Có thể “lập trình” để tạo ra được các trang web
hay không? Nếu lập trình được thì “mã nguồn”
của trang web là gì?
• Các trang web có quan hệ như thế nào với ngôn ngữ
HTML?
• Trang web và trình duyệt web có quan hệ như thế nào?
W
ha
t
is
HT
M
L?
Các trang web thực chất
được tạo ra từ các tệp
văn bản.
Có thể “lập trình” để tạo ra được
các trang web với “mã nguồn” là
các tệp văn bản tương ứng với
các trang web.
Trình duyệt web là một ứng dụng cho phép người dùng truy
cập và xem các trang web trên Internet.
Mã nguồn của các trang
web được viết bằng
ngôn ngữ HTML.
Một số trình duyệt phổ biến hiện nay
Safari
Firefox
Chrome
Edge
Opera
W
ha
t
is
HT
M
L?
CHỦ ĐỀ 4: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP
CỦA MÁY TÍNH
BÀI 7. HTML
VÀ CẤU TRÚC TRANG WEB
NỘI DUNG BÀI HỌC
01
02
03
Trang web và HTML
Cấu trúc cơ bản
Phần mềm soạn thảo
của một tệp HTML
HTML
W
ha
t
is
HT
M
L?
01.
TRANG WEB VÀ HTML
Hoạt động 1
Tìm hiểu ngôn ngữ HTML và trang web
Các trang web mà em vẫn thường xem được hiển thị bởi trình duyệt web (ví dụ: Cốc cốc,
FireFox, Chrome). Thực chất chúng được tạo ra từ các tệp văn bản. Các tệp văn bản này được
gọi là trang nguồn (hay mã nguồn) của trang web tương ứng. Quan sát Hình 7.1 và nêu nhận
xét về mã nguồn của trang web.
a. Trang web hiển thị bởi trình duyệt
b. Tệp văn bản nguồn
Hình 7.1. Trang web và tệp văn bản nguồn
W
ha
t
is
HT
M
L?
Hướng dẫn trả lời
• Mã nguồn của trang web được viết bằng
ngôn ngữ HTML.
• Bao gồm các thành phần: tiêu đề trang, thẻ
div để nhóm các phần tử, các thẻ h1 và p để
định dạng tiêu đề và đoạn văn bản, và thẻ hr
để tạo dòng kẻ ngang.
• Mã nguồn này xác định cấu trúc và nội dung
của trang web và được trình duyệt dùng để
hiển thị trang web theo đúng định dạng đã
được thiết lập.
Đọc thông tin trong SGK và trả lời các câu hỏi sau đây:
• HTML là gì?
• Trang web như thế nào được gọi là trang HTML?
• Em hãy quan sát Hình 7.1b và cho biết nội dung trên trang HTML bao gồm
những phần nào?
• Liệt kê một số thẻ đánh dấu HTML trong ví dụ ở Hình 7.1b.
• Thẻ đánh dấu HTML là gì?
• Thẻ đánh dấu HTML có cấu trúc như thế nào?
W
ha
t
is
HT
M
L?
Hypertext Markup
Là một bộ quy tắc dùng để
Trang web có phần mở
Language (ngôn ngữ
thiết lập cấu trúc và hiển
rộng là .html hoặc .htm
đánh dấu siêu văn bản).
thị nội dung trang web.
được gọi là trang HTML.
Nội dung: văn bản, kí tự
Các kí tự đặc biệt đó được
Một
đặc biệt đặc biệt nằm
gọi là (còn gọi là thẻ HTML
, ,
,
trong cặp dấu “<”, “>”.
hay tag).
,
,…
số
thẻ
HTML:
a. Thẻ đánh dấu HTML
Khái niệm
Thẻ đánh dấu HTML (tag) là các thành phần chính tạo thành ngôn ngữ
đánh dấu siêu văn bản.
Mỗi loại thẻ có một tên riêng và có ý nghĩa nhất định trong định dạng nội
dung của trang web.
W
ha
t
is
HT
M
L?
Cấu trúc: Thẻ đánh dấu HTML được viết trong cặp dấu “<”, “>”.
Thẻ
Ý nghĩa thẻ
Mã HTML
Hiển thị trên trình duyệt
p
Đoạn văn bản
h1
Đây
là
tiêu
đề
Đây là tiêu đề 1
LƯU Ý
Tên thẻ HTML không phân biệt chữ hoa, chữ thường nhưng mặc định tên
thẻ được viết chữ thường.
Các thẻ có thể lồng nhau.
Ví dụ: Thẻ được lồng bên trong thẻ
LƯU Ý
Có một số loại thẻ đơn, tức là chỉ có thẻ bắt đầu. Các thẻ đơn thường có
dạng hoặc
(dòng kẻ ngang),
(ngắt
xuống dòng),…
• HTML và trình duyệt không nhận biết được nhiều dấu cách.
• Nếu gõ nhiều dấu cách máy sẽ hiểu là chỉ có một dấu cách.
• Trình duyệt cũng không nhận biết dấu xuống dòng khi người dùng nhấn
phím Enter trong quá trình soạn thảo.
W
ha
t
is
HT
M
L?
b. Phần tử HTML
Đọc thông tin trong SGK để trả lời các câu hỏi sau đây:
• Phần tử HTML là gì?
• Phần tử HTML có ý nghĩa như thế nào
đối với trang web?
• Em có nhận xét gì về vị trí của các phần
tử HTML , và
số
thẻ
HTML:
a. Thẻ đánh dấu HTML
Khái niệm
Thẻ đánh dấu HTML (tag) là các thành phần chính tạo thành ngôn ngữ
đánh dấu siêu văn bản.
Mỗi loại thẻ có một tên riêng và có ý nghĩa nhất định trong định dạng nội
dung của trang web.
W
ha
t
is
HT
M
L?
Cấu trúc: Thẻ đánh dấu HTML được viết trong cặp dấu “<”, “>”.
Thẻ
Ý nghĩa thẻ
Mã HTML
Hiển thị trên trình duyệt
Đây là đoạn văn
Đây là đoạn văn bản.
bản.
p
Đoạn văn bản
h1
Đây
Tiêu đề 1 của văn bản
1
là
tiêu
đề
Đây là tiêu đề 1
LƯU Ý
Tên thẻ HTML không phân biệt chữ hoa, chữ thường nhưng mặc định tên
thẻ được viết chữ thường.
Các thẻ có thể lồng nhau.
Ví dụ: Thẻ được lồng bên trong thẻ
:
W
ha
t
is
HT
M
L?
LƯU Ý
Mỗi thẻ có thể đi kèm các thông tin thuộc tính của thẻ.
Ví dụ: Thuộc tính màu được gán thêm cho thẻ
, do đó toàn bộ đoạn văn bản
này có màu đỏ khi hiển thị trên trình duyệt:
Phần lớn các thẻ đều là thẻ đôi, tức là có thể bắt đầu (opening tag) và thẻ
kết thúc (closing tag). Vị trí kết thúc thẻ có thêm dấu “/” chẳng hạn
LƯU Ý
Có một số loại thẻ đơn, tức là chỉ có thẻ bắt đầu. Các thẻ đơn thường có
dạng
(dòng kẻ ngang),
(ngắt
xuống dòng),…
• HTML và trình duyệt không nhận biết được nhiều dấu cách.
• Nếu gõ nhiều dấu cách máy sẽ hiểu là chỉ có một dấu cách.
• Trình duyệt cũng không nhận biết dấu xuống dòng khi người dùng nhấn
phím Enter trong quá trình soạn thảo.
W
ha
t
is
HT
M
L?
b. Phần tử HTML
Đọc thông tin trong SGK để trả lời các câu hỏi sau đây:
• Phần tử HTML là gì?
• Phần tử HTML có ý nghĩa như thế nào
đối với trang web?
• Em có nhận xét gì về vị trí của các phần
tử HTML , và
trong
ví dụ ở Hình 7.1b?
Hình 7.1b. Tệp văn bản nguồn
Phần tử
Element
Là khái niệm cơ bản của trang HTML. Thông thường, một phần tử được định nghĩa
bởi thẻ bắt đầu, thẻ kết thúc và phần nội dung nằm giữa cặp thẻ này.
Vị trí bắt đầu
Nội dung
Vị trí kết thúc
nội dung của phần tử HTML
Phần tử HTML
W
ha
t
is
HT
M
L?
Các thẻ đơn cùng với nội dung của nó cũng được gọi là phần tử HTML.
Phần tử HTML có thể
hiểu là toàn bộ phần thẻ
và nội dung của thẻ.
Mỗi tệp HTML là tập hợp
các phần tử HTML.
Ý nghĩa: Các phần tử HTML đóng vai trò quan trọng tạo nên cấu trúc và
nội dung của trang web.
Nhận xét
• Hai phần tử và rời
nhau.
• Phần tử
ví dụ ở Hình 7.1b?
Hình 7.1b. Tệp văn bản nguồn
Phần tử
Element
Là khái niệm cơ bản của trang HTML. Thông thường, một phần tử được định nghĩa
bởi thẻ bắt đầu, thẻ kết thúc và phần nội dung nằm giữa cặp thẻ này.
Vị trí bắt đầu
Nội dung
Vị trí kết thúc
Phần tử HTML
W
ha
t
is
HT
M
L?
Các thẻ đơn cùng với nội dung của nó cũng được gọi là phần tử HTML.
Phần tử HTML có thể
hiểu là toàn bộ phần thẻ
và nội dung của thẻ.
Mỗi tệp HTML là tập hợp
các phần tử HTML.
Ý nghĩa: Các phần tử HTML đóng vai trò quan trọng tạo nên cấu trúc và
nội dung của trang web.
Nhận xét
• Hai phần tử và rời
nhau.
• Phần tử
chứa bên trong bốn
phần tử HTML khác.
Các phần tử HTML có thể độc lập,
rời nhau hoặc lồng nhau.
Hình 7.1b. Tệp văn bản nguồn
W
ha
t
is
HT
M
L?
LƯU Ý
Dòng đầu tiên của mỗi tệp HTML có dạng có vai
trò thông báo kiểu của tệp là html và không được xem là phần tử
HTML.
Phần tử HTML đặc biệt có ý nghĩa chú thích trong tệp HTML có dạng:
CÂU HỎI CỦNG CỐ KIẾN THỨC
Câu 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.
Hình 7.1b. Tệp văn bản nguồn
W
ha
t
is
HT
M
L?
Câu 2. Nêu sự giống và khác nhau giữa thẻ HTML và phần tử
HTML.
Giống nhau
• Đều là các khái niệm cơ bản liên
quan đến trang web.
• Đều là các thành phần cơ bản của các
trang web.
• Đều có tác dụng định dạng nội dung
văn bản của trang web.
Khác nhau
• Thẻ HTML là các từ khoá đặc biệt đóng vai trò cốt lõi của ngôn ngữ HTML. Phần tử
HTML bao gồm cả thẻ HTML và nội dung văn bản chịu tác động của thẻ này.
• Thẻ HTML có tác dụng xác định một định dạng cụ thể. Phần tử HTML đóng vai trò
các đơn vị định dạng của toàn bộ trang web.
W
ha
t
is
HT
M
L?
KẾT LUẬN
• Trang web được thiết lập theo một ngôn ngữ có
cấu trúc đặc biệt gọi là ngôn ngữ đánh dấu siêu
văn bản HTML.
• Các tệp HTML là tệp văn bản được cấu tạo từ
các phần tử HTML.
• Mỗi phần tử HTML gồm nội dung được đánh
dấu bởi các thẻ (HTML tag) có tính năng điều
khiển hoặc định dạng nội dung. Trình duyệt có
chức năng hiển thị nội dung trang web theo
đúng định dạng được thiết lập.
02.
CẤU TRÚC CƠ BẢN CỦA MỘT
TỆP HTML
W
ha
t
is
HT
M
L?
Hoạt động 2
Tìm hiểu cấu trúc cơ bản của một tệp HTML
Quan sát tệp HTML sau, em có nhận xét gì về cấu trúc chung của một trang web?
Hình 7.2. Cấu trúc tệp HTML
Nhận xét về cấu trúc của một trang web
Dòng đầu tiên của
mỗi tệp HTML có
dạng
html> có vai trò thông
báo kiểu của tệp là
html và không được
xem là phần tử HTML.
Phần tử chứa
Phần tử chứa
toàn bộ nội dung của
nội dung hiển thị của
trang web.
trang web.
Phần tử chứa
các phần tử có liên
Các phần tử HTML
quan chung đến toàn
khác.
bộ trang web.
W
ha
t
is
HT
M
L?
Mỗi tệp HTML bao gồm nhiều phần tử HTML, các phần
tử HTML có thể lồng nhau.
Quan hệ lồng nhau
Sơ đồ cây
Cha – con
Hình 7.3. Cấu trúc cơ bản của một
tệp HTML
CẤU TRÚC CỦA MỘT TỆP HTML
1
Dòng đầu tiên, có thể coi là dòng khai báo html của tệp.
2
Phần tử :
Là bắt buộc, là phần tử gốc và
chứa tất cả các phần tử HTML
còn lại của trang web.
Là phần tử gốc
(root)
Thường chứa hai
phần
tử
con
và .
W
ha
t
is
HT
M
L?
CẤU TRÚC CỦA MỘT TỆP HTML
3
Phần tử :
Chứa các phần tử có liên quan
chung đến toàn bộ trang web.
4
Trong thường có phần tử
và một số phần tử khác<br>như <meta>, <style> và <script>.<br><br>Phần tử <body> chứa tất cả các phần tử còn lại là thông tin của trang web<br><br>CẤU TRÚC CỦA MỘT TỆP HTML<br>5<br><br>Phần tử <meta>:<br><br>Nằm trong phần tử <head>.<br><br>Ví dụ: Trong Hình 7.3, phần tử<br>hoá văn bản trên trang web theo mã UTF-8.<br><br>Mô tả các thông tin bổ sung của<br>trang web<br><br>mô tả cách mã<br><br>W<br><br>ha<br>t<br><br>is<br><br>HT<br>M<br><br>L?<br><br>CẤU TRÚC CỦA MỘT TỆP HTML<br>6<br><br>Phần tử <title>:<br><br>Nằm trong phần tử<br><br>Mô tả tên của trang<br><br><head>.<br><br>web hiện thời.<br><br>7<br><br>Phải là văn bản thường và<br>không được phép chứa các<br>phần tử con.<br><br>Nhóm các thẻ định dạng văn bản thường dùng là các thẻ tiêu đề theo thứ<br>tự giảm cấp dần là <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Thẻ <p> mô tả một<br>đoạn văn bản hoàn chỉnh.<br><br>LƯU Ý<br>HTML không nhận biết kí tự xuống dòng (nhấn phím Enter) để kết<br>thúc đoạn văn bản (paragraph) như các phần mềm soạn thảo văn<br>bản thông thường.<br>Cấu trúc chung của một<br>trang web có thể hình dung<br>như một cây thông tin.<br>Hình 7.4. Cây thông tin của trang web ở<br>hình 7.2 </div>
</div>
</div>
</div>
</div>
<div align="center" style="position:relative;">
</div>
<div id="comments" class="comments">
<div style="display:none;" class="form_error" id="error_for_cm_content"> ↓ ↓</div>
</div>
<form method="post" action="/"><input type="hidden" name="entry_id" id="entry_id" value="15166601" /><textarea name="cm_content" id="cm_content"></textarea>
<input id="send" style="display:none" type="button" onclick="$("send").disabled=true; tinyMCE.triggerSave(); new Ajax.Updater('comments', '/present/insertcomment', {asynchronous:true, evalScripts:false, method:'POST', onComplete:function(request, json){$("send").disabled=false; if ($("insertOk")!=undefined) tinyMCE.get("cm_content").setContent("");}, parameters:Form.serialize(this.form)}); return false;" name="send" value="Gửi ý kiến" />
<script type="text/javascript">
//<![CDATA[
$("send").disabled = true;
function summitRemote() {
Modalbox.hide();
sendButton = $("send");
sendButton.disabled = false;
sendButton.onclick(sendButton);
sendButton.style.display = "block";
$("send2").style.display = "none";
}
//]]>
</script> <span id='send2'><a onclick="Modalbox.show('https://baigiang.violet.vn/user/login/ret/javascript%253AsummitRemote%2528%2529/modalbox/1', {title:'Bạn phải đăng nhập để thực hiện công việc này'}); return false;" href="#">Gửi ý kiến</a></span>
</form>
<br>
<div class="document docgroup">
<h2>Hãy thử nhiều lựa chọn khác</h2>
<div class="content">
<li onmouseover="this.className='over'" onmouseout="this.className=''"><a href="/entry/showglobal/entry_id/15155450"><img src="https://d2.violet.vn/uploads/thumbnails/present/5/488/706/thumbnail.jpg" alt="Thumbnail" /></a><label><a href="/entry/showglobal/entry_id/15155450">Tin học 12, liên hệ nhận trọn bộ</a></label></li><li onmouseover="this.className='over'" onmouseout="this.className=''"><a href="/entry/showglobal/entry_id/14556601"><img src="https://d2.violet.vn/uploads/thumbnails/present/5/334/216/thumbnail.jpg" alt="Thumbnail" /></a><label><a href="/entry/showglobal/entry_id/14556601">Bài 7. HTML và cấu trúc trang web</a></label></li><li onmouseover="this.className='over'" onmouseout="this.className=''"><a href="/entry/showglobal/entry_id/14557085"><img src="https://d2.violet.vn/uploads/thumbnails/present/5/334/381/thumbnail.jpg" alt="Thumbnail" /></a><label><a href="/entry/showglobal/entry_id/14557085">Bài 1 Làm quen với Trí tuệ nhân tạo</a></label></li><li onmouseover="this.className='over'" onmouseout="this.className=''"><a href="/entry/showglobal/entry_id/13957646"><img src="https://d2.violet.vn/uploads/thumbnails/present/5/236/335/thumbnail.jpg" alt="Thumbnail" /></a><label><a href="/entry/showglobal/entry_id/13957646">TN Tin học 12. Bài 1, 2</a></label></li><li onmouseover="this.className='over'" onmouseout="this.className=''"><a href="/entry/showglobal/entry_id/13914179"><img src="https://d2.violet.vn/uploads/thumbnails/present/5/228/885/thumbnail.jpg" alt="Thumbnail" /></a><label><a href="/entry/showglobal/entry_id/13914179">01-A-Bài 01-Giới thiệu trí tuệ nhân tạo</a></label></li><li onmouseover="this.className='over'" onmouseout="this.className=''"><a href="/entry/showglobal/entry_id/13957624"><img src="https://d2.violet.vn/uploads/thumbnails/present/5/236/314/thumbnail.jpg" alt="Thumbnail" /></a><label><a href="/entry/showglobal/entry_id/13957624">TN Tin học 12. Bài 1, 2</a></label></li> <hr>
<center><b><a href="/lesson/ngoai-chuong-trinh-sgk-8657272--1.html">Còn nữa...</a></b></center>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div id="footer" style="text-align: center;">
©2008-2017 Thư viện trực tuyến ViOLET <br>Đơn vị chủ quản: Công ty Cổ phần Mạng giáo dục Bạch Kim - ĐT: 04.66745632 <br>Giấy phép mạng xã hội số 16/GXN-TTĐT cấp ngày 13 tháng 2 năm 2012 </div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="/plugins/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="https://d4.violet.vn/uploads/blogs/12/js/jcat241028145932.js"></script>
<script>setCategory(8657272);
tinyMCE.init({
mode: "exact",
language: "vi",
elements: "cm_content",
plugins: "table,advimage,advlink,flash",
theme: "advanced",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_path_location: "bottom",
theme_advanced_buttons1: "justifyleft,justifycenter,justifyright,justifyfull,separator,bold,italic,strikethrough,separator,sub,sup,separator,charmap",
theme_advanced_buttons2: "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,image,flash,separator,cleanup,removeformat,separator,code",
theme_advanced_buttons3: "tablecontrols",
extended_valid_elements: "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]",
relative_urls: false,
debug: false
,
entity_encoding: "raw",
plugins:"emotions,equation",
theme_advanced_buttons1: "fontsizeselect,|,justifyleft,justifycenter,justifyright,justifyfull,|,bold,italic,|,emotions,link,unlink,|,equation",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
height:150,width:548
});topMenu = new cssMenu("chromemenu", "bottom");
cat_tree=new dhtmlXTreeObject("smpltree_box","100%","auto",0);
cat_tree.setImagePath("/plugins/dhtmlx/images/");
cat_tree.setOnClickHandler(function(id){treeOpenContent(id);});
cat_tree.loadXMLString(g_category);
initSearchLesson(lesson_data, document.getElementById("search-input"), document.getElementById("search-list"),
document.getElementById("back-button"), document.getElementById("back-button-menu"),
function(key, category, lesson) {location.href = "/present/searchresult/subject/" + category + (lesson? "/lesson/" + lesson: "") + "/key/" + encodeURI(key)});
</script>
phần tử HTML khác.
Các phần tử HTML có thể độc lập,
rời nhau hoặc lồng nhau.
Hình 7.1b. Tệp văn bản nguồn
W
ha
t
is
HT
M
L?
LƯU Ý
Dòng đầu tiên của mỗi tệp HTML có dạng có vai
trò thông báo kiểu của tệp là html và không được xem là phần tử
HTML.
Phần tử HTML đặc biệt có ý nghĩa chú thích trong tệp HTML có dạng:
CÂU HỎI CỦNG CỐ KIẾN THỨC
Câu 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.
Hình 7.1b. Tệp văn bản nguồn
W
ha
t
is
HT
M
L?
Câu 2. Nêu sự giống và khác nhau giữa thẻ HTML và phần tử
HTML.
Giống nhau
• Đều là các khái niệm cơ bản liên
quan đến trang web.
• Đều là các thành phần cơ bản của các
trang web.
• Đều có tác dụng định dạng nội dung
văn bản của trang web.
Khác nhau
• Thẻ HTML là các từ khoá đặc biệt đóng vai trò cốt lõi của ngôn ngữ HTML. Phần tử
HTML bao gồm cả thẻ HTML và nội dung văn bản chịu tác động của thẻ này.
• Thẻ HTML có tác dụng xác định một định dạng cụ thể. Phần tử HTML đóng vai trò
các đơn vị định dạng của toàn bộ trang web.
W
ha
t
is
HT
M
L?
KẾT LUẬN
• Trang web được thiết lập theo một ngôn ngữ có
cấu trúc đặc biệt gọi là ngôn ngữ đánh dấu siêu
văn bản HTML.
• Các tệp HTML là tệp văn bản được cấu tạo từ
các phần tử HTML.
• Mỗi phần tử HTML gồm nội dung được đánh
dấu bởi các thẻ (HTML tag) có tính năng điều
khiển hoặc định dạng nội dung. Trình duyệt có
chức năng hiển thị nội dung trang web theo
đúng định dạng được thiết lập.
02.
CẤU TRÚC CƠ BẢN CỦA MỘT
TỆP HTML
W
ha
t
is
HT
M
L?
Hoạt động 2
Tìm hiểu cấu trúc cơ bản của một tệp HTML
Quan sát tệp HTML sau, em có nhận xét gì về cấu trúc chung của một trang web?
Hình 7.2. Cấu trúc tệp HTML
Nhận xét về cấu trúc của một trang web
Dòng đầu tiên của
mỗi tệp HTML có
dạng
html> có vai trò thông
báo kiểu của tệp là
html và không được
xem là phần tử HTML.
Phần tử chứa
Phần tử chứa
toàn bộ nội dung của
nội dung hiển thị của
trang web.
trang web.
Phần tử chứa
các phần tử có liên
Các phần tử HTML
quan chung đến toàn
khác.
bộ trang web.
W
ha
t
is
HT
M
L?
Mỗi tệp HTML bao gồm nhiều phần tử HTML, các phần
tử HTML có thể lồng nhau.
Quan hệ lồng nhau
Sơ đồ cây
Cha – con
Hình 7.3. Cấu trúc cơ bản của một
tệp HTML
CẤU TRÚC CỦA MỘT TỆP HTML
1
Dòng đầu tiên, có thể coi là dòng khai báo html của tệp.
2
Phần tử :
Là bắt buộc, là phần tử gốc và
chứa tất cả các phần tử HTML
còn lại của trang web.
Là phần tử gốc
(root)
Thường chứa hai
phần
tử
con
và .
W
ha
t
is
HT
M
L?
CẤU TRÚC CỦA MỘT TỆP HTML
3
Phần tử :
Chứa các phần tử có liên quan
chung đến toàn bộ trang web.
4
Trong thường có phần tử
Các ý kiến mới nhất