Menu Học Tập

Giải bài tập SGK: Bài 7: HTML và cấu trúc trang web – Tin học 12

Mục lục [Ẩn]

Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó

Câu hỏi mở đầu trang 39Hoạt động 1 trang 39Câu hỏi củng cố mục 1 trang…Hoạt động 2 trang 41Câu hỏi củng cố mục 2 trang…Hoạt động 3 trang 43Câu hỏi củng cố mục 3 trang…Luyện tập trang 44Vận dụng trang 44

Câu hỏi mở đầu trang 39

Đề bài: Các em đã được làm quen với khái niệm website và trang web. Tuy nhiên, có thể các em vẫn muốn biết:

  • 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?

Lời giải:

  • Cấu trúc trang web: trang web thực chất là một tệp văn bản có phần mở rộng .html hoặc .htm, chứa nội dung và các thẻ đánh dấu HTML để định dạng.
  • Có thể lập trình để tạo trang web. “Mã nguồn” của trang web chính là tệp HTML – gồm phần văn bản (text) và các thẻ đánh dấu HTML nằm trong cặp dấu <, >.
  • Quan hệ với ngôn ngữ HTML: trang web được thiết lập theo ngôn ngữ HTML (Hypertext Markup Language – ngôn ngữ đánh dấu siêu văn bản). HTML là bộ quy tắc dùng để thiết lập cấu trúc và hiển thị nội dung trang web.
  • Quan hệ với trình duyệt web: trình duyệt (như Cốc Cốc, Firefox, Chrome) là phần mềm có chức năng đọc tệp HTML và hiển thị nội dung trang web theo đúng định dạng đã được thiết lập.

1. Trang web và HTML

Hoạt động 1 trang 39

Đề bài: 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.

Lời giải:

Nhận xét về mã nguồn của trang web:

  • Mã nguồn là một tệp văn bản thuần (chứa các dòng chữ, kí tự).
  • Nội dung tệp gồm hai phần: phần văn bản (text) hiển thị trên trang và các kí tự đánh dấu đặc biệt nằm trong cặp dấu <, > (gọi là thẻ HTML).
  • Có các thẻ như <html>, <head>, <title>, <body>, <div>, <h1>, <p>, <hr>,…
  • Thẻ HTML dùng để xác định phần tử HTML – các phần tử này định dạng thông tin trong trang web.
  • Trình duyệt sẽ đọc tệp mã nguồn và hiển thị nội dung trang web theo các định dạng đã được thiết lập bởi thẻ HTML.

Câu hỏi củng cố mục 1 trang 41

Đề bài:

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

Lời giải:

Tệp văn bản trong Hình 7.1 có 9 phần tử HTML, bao gồm:

<html>, <head>, <title>, <body>, <div>, <h1>, <p> (đầu tiên), <hr> (thẻ đơn), <p> (cuối cùng).

Lưu ý:

  • Dòng <!DOCTYPE html> không phải là phần tử HTML (chỉ là dòng khai báo kiểu tệp).
  • Dòng <!-- dòng kẻ ngang --> là chú thích, không phải phần tử HTML.

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

Lời giải:

Giống nhau: đều là thành phần của tệp HTML, dùng để định dạng và hiển thị nội dung trang web.

Khác nhau:

Tiêu chí Thẻ HTML (tag) Phần tử HTML (element)
Khái niệm Kí hiệu đánh dấu nằm trong cặp dấu <, > Toàn bộ thẻ và nội dung của thẻ
Cấu tạo Chỉ gồm phần tên thẻ, ví dụ: <p>, </p> Gồm thẻ bắt đầu + nội dung + thẻ kết thúc
Ví dụ <p>, </p> <p>Đây là đoạn văn bản.</p>

2. Cấu trúc cơ bản của một tệp HTML

Hoạt động 2 trang 41

Đề bài: 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?

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Tên trang Web</title>
  </head>
  <body>
    <div>
      <h1>Trang Web và HTML </h1>
      <p>Đây là dòng đầu tiên</p>
      <hr>
      <p>Đây là dòng cuối cùng </p>
    </div>
    <p> Trang này được lập bởi<em> nhóm bạn bè</em> </p>
  </body>
</html>

Lời giải:

Nhận xét về cấu trúc chung của một trang web:

  • Dòng đầu tiên <!DOCTYPE html> khai báo tệp có định dạng HTML.
  • Phần tử <html> là phần tử gốc, bao bọc toàn bộ nội dung trang web.
  • Bên trong <html> có hai phần tử con chính:
    • <head>: chứa thông tin chung của trang, gồm các phần tử như <meta> (mã hoá kí tự), <title> (tên trang web hiển thị trên tab).
    • <body>: chứa toàn bộ nội dung hiển thị của trang, gồm các phần tử như <div>, <h1>, <p>, <hr>, <em>,…
  • Các phần tử HTML có thể lồng nhau (quan hệ cha – con) tạo thành cấu trúc dạng cây.

Câu hỏi củng cố mục 2 trang 43

Đề bài:

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

<p>Thông tin này in <b>đậm</b>, in <i>nghiêng</i>, in <u>gạch dưới</u>, in bình thường.</p>

Lời giải:

Sơ đồ cây của đoạn HTML trên:

  • p (gốc)
    • b (đậm)
    • i (nghiêng)
    • u (gạch dưới)

Giải thích:

  • Phần tử <p> là gốc của cây.
  • Ba phần tử <b>, <i>, <u> là con của <p>, nằm ngang hàng nhau.
  • Phần văn bản “Thông tin này in”, “in bình thường.” nằm trực tiếp trong <p>, không tạo phần tử con.

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

Lời giải:

  • Cây HTML có duy nhất 1 phần tử gốc, đó là phần tử <html>.
  • Phần tử <html> chứa tất cả các phần tử HTML còn lại của trang web.

3. Phần mềm soạn thảo HTML

Hoạt động 3 trang 43

Đề bài: Hãy tìm hiểu những phần mềm có thể dùng để soạn thảo tệp HTML. Thảo luận để tìm ra cách soạn thảo tệp HTML hợp lí nhất.

Lời giải:

Một số phần mềm có thể dùng để soạn thảo tệp HTML:

  • Notepad: phần mềm soạn thảo văn bản đơn giản, có sẵn trên Windows.
  • TextEdit: tương tự Notepad, có sẵn trên MacOS.
  • Notepad++: phần mềm chuyên nghiệp, miễn phí, mã nguồn mở, hỗ trợ tô màu cú pháp HTML.
  • Sublime Text: phần mềm chuyên nghiệp, có phiên bản cơ bản miễn phí.
  • Trang web soạn thảo HTML trực tuyến: như w3schools.com, tutorialspoint.com,…

Cách soạn thảo hợp lí nhất:

  • Dùng phần mềm chuyên nghiệp (Notepad++, Sublime Text) vì có tô màu cú pháp, hỗ trợ số dòng, gợi ý mã → giúp dễ đọc, dễ phát hiện lỗi.
  • Hoặc dùng trang web hỗ trợ soạn thảo HTML trực tuyến để vừa soạn thảo, vừa xem trực tiếp kết quả hiển thị trên trình duyệt.

Câu hỏi củng cố mục 3 trang 44

Đề bài:

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.

Lời giải:

Nhóm Tên phần mềm
Phần mềm soạn thảo HTML a) Notepad, c) Sublime Text, f) Notepad++
Trình duyệt web b) Opera, d) Chrome, e) Cốc Cốc, g) FireFox, h) Microsoft Edge

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)?

Lời giải:

Phần mềm chuyên nghiệp (Notepad++, Sublime Text):

  • Tô màu cú pháp (syntax highlighting): thẻ, thuộc tính, chú thích có màu khác nhau → dễ đọc, dễ phân biệt.
  • Hiển thị số dòng: tiện cho việc gỡ lỗi (debug).
  • Hỗ trợ nhiều ngôn ngữ lập trình khác nhau, có thể tự động nhận diện và gợi ý.
  • Hỗ trợ gõ tắt, tự hoàn thành mã, ít bị sai sót.

Phần mềm soạn thảo văn bản thông thường (Notepad):

  • Chỉ soạn thảo văn bản thuần, không tô màu cú pháp.
  • Không có số dòng, khó gỡ lỗi khi tệp dài.
  • Không có gợi ý mã → dễ sai sót cú pháp.

→ Với việc soạn thảo HTML, phần mềm chuyên nghiệp thuận tiện hơn rất nhiều.

Luyện tập

Luyện tập trang 44

Đề bài:

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.

Lời giải:

Các thẻ đơn trong HTML không thể chứa nội dung bên trong nên không thể có phần tử con. Ví dụ:

  • <hr> hoặc <hr/>: thẻ tạo dòng kẻ ngang.
  • <br> hoặc <br/>: thẻ ngắt dòng (xuống dòng).
  • <img>: thẻ chèn hình ảnh.
  • <meta>: thẻ khai báo thông tin bổ sung của trang.

→ Các phần tử này chỉ có thẻ bắt đầu, không có thẻ kết thúc và không thể chứa phần tử HTML khác bên trong.

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.

Lời giải (ví dụ tham khảo):

Nội dung văn bản: Bài thơ ngắn.

Tệp HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bài thơ</title>
  </head>
  <body>
    <h1>Bánh trôi nước</h1>
    <p>Thân em vừa trắng lại vừa tròn</p>
    <p>Bảy nổi ba chìm với nước non</p>
    <p>Rắn nát mặc dầu tay kẻ nặn</p>
    <p>Mà em vẫn giữ tấm lòng son</p>
  </body>
</html>

Cây thông tin các phần tử HTML:

  • html (gốc)
    • head
      • meta
      • title
    • body
      • h1
      • p
      • p
      • p
      • p

Vận dụng

Vận dụng trang 44

Đề bài:

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

Lời giải:

Một số trang web hỗ trợ soạn thảo HTML trực tuyến:

  • w3schools.com – có mục “Try it Yourself” cho phép soạn thảo và xem kết quả ngay.
  • tutorialspoint.com – hỗ trợ soạn thảo và chạy thử HTML.
  • JSFiddle (jsfiddle.net) – soạn thảo HTML, CSS, JavaScript và xem kết quả trực tiếp.
  • CodePen (codepen.io) – trang cộng đồng chia sẻ và soạn thảo mã HTML.
  • PlayCode (playcode.io) – môi trường soạn thảo và chạy mã web trực tuyến.

Các trang này chỉ cần trình duyệt và kết nối Internet, không cần cài đặt phần mềm.

2. Sử dụng phần mềm soạn thảo HTML để tạo trang web có nội dung như Hình 7.7. Lưu ý rằng thẻ <img> với tính năng thể hiện ảnh trên trang web có cú pháp:

<img 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 hiển thị.

Lời giải:

Hình 7.7 mô tả Lịch sử phát triển HTML, gồm các đoạn văn giới thiệu và một hình ảnh sơ đồ minh hoạ của Tim Berners-Lee.

Tệp HTML tham khảo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lịch sử phát triển HTML</title>
  </head>
  <body>
    <h1>Lịch sử phát triển HTML</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 hoạ 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="sodo.jpg">
    <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>

Lưu ý khi dùng thẻ <img>:

  • Thẻ <img> là thẻ đơn, không có thẻ kết thúc.
  • Thuộc tính src chỉ định đường dẫn tệp ảnh. Nếu tệp ảnh (ví dụ sodo.jpg) nằm cùng thư mục với tệp HTML thì chỉ cần ghi tên tệp; nếu ở thư mục khác thì cần ghi đường dẫn đầy đủ.
  • Có thể chỉnh kích thước ảnh bằng thuộc tính width và height, ví dụ: <img src="sodo.jpg" width="500">.

Cách thực hiện:

  • Bước 1: Chuẩn bị tệp ảnh sơ đồ (đặt tên là sodo.jpg) trong cùng thư mục với tệp HTML.
  • Bước 2: Mở phần mềm soạn thảo (Notepad++, Sublime Text hoặc trang web trực tuyến), gõ nội dung tệp HTML như trên.
  • Bước 3: Lưu tệp với tên có đuôi .html (ví dụ lichsu-html.html).
  • Bước 4: Mở tệp bằng trình duyệt web để xem kết quả.
Thầy Phạm Thành Danh

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa

Giải bài tập SGK: Bài 28: Thực hành tổng hợp – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 27: Biểu mẫu trên trang web – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 26: Liên kết và thanh điều hướng – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 25: Xây dựng phần thân và chân trang web – Tin học 12 ( 12/07 )

Giải bài tập SGK: Bài 24: Xây dựng phần đầu trang web – Tin học 12 ( 12/07 )