HocKhaThư viện lời giải bài tập

Giải Tin học 12 - Định hướng khoa học máy tính trang 46

Lời giải chi tiết SGK Lớp 12 · Môn Tin Học · Trang 46–47

Nguon: Tin Hoc 12 KHMT (trang 46 – 47)
⚠️ Lưu ý: Ảnh gửi lên là nội dung trang 44 – 45 (Bài 7 – HTML và cấu trúc trang web). Mình giải đầy đủ toàn bộ câu hỏi, phần Luyện tập và Vận dụng có trong hai trang này.

🔍 Kiến thức cần nhớ

Phần c) trình bày cách soạn thảo HTML trực tuyến:

  • Có thể soạn thảo tệp HTML bằng nhiều phần mềm khác nhau, hoặc soạn thảo trực tuyến và kiểm tra kết quả ngay trên trình duyệt.
  • Giao diện soạn thảo trực tuyến (Hình 7.6): khung bên trái để gõ mã HTML, nháy nút Run để xem kết quả hiển thị ở khung bên phải.
  • Một số trang hỗ trợ soạn thảo HTML trực tuyến: w3schools.com, tutorialspoint.com,...

Một số thẻ cơ bản (qua ví dụ Hình 7.6):

  • : khai báo loại tài liệu là HTML.
  • : phần tử gốc chứa toàn bộ trang.
  • : chứa thông tin về trang (như , </code>).</li><li><code><title></code>: tên trang web hiển thị trên thanh tiêu đề/tab.</li><li><code><body></code>: chứa nội dung hiển thị của trang.</li><li><code><h1></code>: tiêu đề lớn; <code><p></code>: đoạn văn; <code><hr></code>: đường kẻ ngang; <code><em></code>: nhấn mạnh (in nghiêng); <code><div></code>: khối gộp nhóm các phần tử.</li></ul> <p>Lịch sử phát triển HTML (Hình 7.7):</p> <ul><li>Chuẩn HTML do nhà vật lí Tim Berners-Lee đưa ra lần đầu vào những năm 1990 tại Trung tâm Vật lí Hạt nhân CERN.</li><li>Phiên bản đầu tiên thiết lập cuối năm 1991, tên "Các thẻ HTML".</li><li>Phiên bản hiện tại là HTML5, ra đời năm 2014.</li></ul> <blockquote>💡 <strong>Mẹo nhớ:</strong> Cấu trúc trang HTML luôn theo bộ khung: html → (head, body). Trong đó head chứa thông tin "ẩn", body chứa nội dung "hiện".</blockquote> <h3>⚙️ Bài tập</h3> <h4>Câu 1</h4> <p><strong>Đề bài:</strong> 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.</p> <h5>Cách 1 — Phân loại theo chức năng</h5> <p>Phân biệt theo công dụng của từng phần mềm:</p> <ul><li><strong>Phần mềm soạn thảo HTML</strong> (dùng để gõ và biên soạn mã HTML): viết, chỉnh sửa tệp văn bản chứa mã nguồn.</li><li><strong>Trình duyệt web</strong> (dùng để mở và hiển thị trang web): đọc tệp HTML và hiển thị thành trang web.</li></ul> <p>Kết quả:</p> <div class="table-wrap"><table><thead><tr><th>Phần mềm soạn thảo HTML</th><th>Trình duyệt web</th></tr></thead><tbody><tr><td>a) Notepad</td><td>b) Opera</td></tr><tr><td>c) Sublime Text</td><td>d) Chrome</td></tr><tr><td>f) Notepad++</td><td>e) Cốc Cốc</td></tr><tr><td>g) FireFox</td></tr><tr><td>h) Microsoft Edge</td></tr></tbody></table></div> <ul><li>Nhóm soạn thảo HTML: <strong>a) Notepad, c) Sublime Text, f) Notepad++</strong>.</li><li>Nhóm trình duyệt web: <strong>b) Opera, d) Chrome, e) Cốc Cốc, g) FireFox, h) Microsoft Edge</strong>.</li></ul> <h5>Cách 2 — Mẹo nhận diện nhanh</h5> <p>Đặt câu hỏi: "Phần mềm này dùng để gõ chữ/mã hay để lướt web?"</p> <ul><li>Nếu là chương trình quen thuộc để duyệt Internet hằng ngày (mở trang, gõ địa chỉ web) thì là trình duyệt: Opera, Chrome, Cốc Cốc, FireFox, Microsoft Edge.</li><li>Phần còn lại là công cụ soạn thảo: Notepad, Sublime Text, Notepad++.</li></ul> <blockquote>⚠️ <strong>Lưu ý thi:</strong> Notepad là phần mềm soạn thảo văn bản thông thường nhưng vẫn dùng được để gõ HTML, nên xếp vào nhóm soạn thảo HTML. Đừng nhầm Notepad là trình duyệt.</blockquote> <h4>Câu 2</h4> <p><strong>Đề bài:</strong> 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)?</p> <h5>Cách 1 — So sánh theo tính năng hỗ trợ lập trình</h5> <p>Phần mềm soạn thảo văn bản thông thường (Notepad):</p> <ul><li>Chỉ hiển thị văn bản thuần, không phân biệt thẻ HTML với nội dung.</li><li>Không tô màu cú pháp, không gợi ý, không báo lỗi.</li><li>Phù hợp với văn bản đơn giản, không tối ưu cho việc viết mã.</li></ul> <p>Phần mềm chuyên nghiệp (Notepad++, Sublime Text):</p> <ul><li><strong>Tô màu cú pháp (syntax highlighting):</strong> các thẻ, thuộc tính, nội dung được hiển thị bằng màu khác nhau, dễ đọc và dễ phát hiện lỗi.</li><li><strong>Tự động hoàn thành / gợi ý (auto-complete):</strong> gợi ý tên thẻ, tự đóng thẻ.</li><li><strong>Đánh số dòng, thụt lề tự động, gập khối mã (code folding):</strong> giúp nhìn rõ cấu trúc lồng nhau của các phần tử.</li><li>Hỗ trợ tìm kiếm – thay thế nâng cao, mở nhiều tệp cùng lúc.</li></ul> <h5>Cách 2 — Kết luận tổng quát</h5> <p>Cả hai đều có thể tạo ra tệp HTML giống hệt nhau (vì HTML chỉ là văn bản thuần). Khác biệt nằm ở <strong>sự tiện lợi và hiệu quả khi viết mã</strong>: phần mềm chuyên nghiệp giúp viết nhanh hơn, ít sai sót hơn và dễ kiểm soát cấu trúc trang web hơn, đặc biệt khi mã dài và phức tạp.</p> <blockquote>💡 <strong>Mẹo nhớ:</strong> Kết quả cuối cùng (tệp HTML) là như nhau; phần mềm chuyên nghiệp chỉ giúp quá trình viết "dễ thở" hơn.</blockquote> <h3>⚙️ LUYỆN TẬP</h3> <h4>Câu 1</h4> <p><strong>Đề bài:</strong> 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.</p> <h5>Cách 1 — Dựa vào các phần tử rỗng (empty elements)</h5> <p>Phần tử "rỗng" là phần tử không có nội dung, không có thẻ đóng, nên <strong>không thể chứa phần tử con</strong> bên trong. Ví dụ:</p> <ul><li><code><hr></code>: đường kẻ ngang. Không có nội dung, không thể đặt phần tử khác bên trong.</li><li><code><br></code>: ngắt dòng. Cũng là phần tử rỗng.</li><li><code><img></code>: chèn ảnh. Có cú pháp <code><img src="tên tệp ảnh"></code>, không có thẻ đóng nên không lồng được phần tử con.</li><li><code><meta></code>: khai báo thông tin, là phần tử rỗng.</li></ul> <p>Vậy ví dụ điển hình về phần tử không thể lồng (không thể làm "cha"): <code><hr></code>, <code><br></code>, <code><img></code>, <code><meta></code>.</p> <h5>Cách 2 — Dựa vào quy tắc lồng không hợp lệ</h5> <p>Ngoài phần tử rỗng, còn có những phần tử mà về cú pháp <strong>không được phép lồng cùng loại hoặc lồng phần tử khối vào trong</strong>. Ví dụ:</p> <ul><li>Thẻ <code><p></code> (đoạn văn) không được chứa một thẻ <code><p></code> khác, cũng không được chứa các phần tử khối như <code><div></code>. Nếu viết <code><p>...<p>...</p></p></code> thì trình duyệt sẽ tự tách ra, không tạo quan hệ cha – con như mong muốn.</li></ul> <blockquote>⚠️ <strong>Lưu ý thi:</strong> Dễ nhớ nhất là <code><hr></code>, <code><br></code>, <code><img></code> – đây là các phần tử rỗng, chắc chắn không thể có con.</blockquote> <h4>Câu 2</h4> <p><strong>Đề bài:</strong> 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.</p> <h5>Cách 1 — Soạn thảo theo cấu trúc chuẩn</h5> <p>Chọn văn bản đơn giản: một đoạn giới thiệu bản thân. Tệp HTML:</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Giới thiệu bản thân

    Giới thiệu bản thân

    Em tên là Nam, học sinh lớp 12.

    Em thích học môn Tin học.

    Cây thông tin các phần tử HTML của trang web trên:

    html
├── head
│   ├── meta
│   └── title
└── body
    ├── h1
    ├── p
    ├── hr
    └── p
        └── em

    Giải thích cây:

    • html là phần tử gốc (cha của tất cả).
    • html có hai con: head và body.
    • head có con là meta và title.
    • body có các con: h1, p, hr, p; trong đó p thứ hai có con là em.
    Cách 2 — Vẽ cây theo từng cấp lồng nhau

    Đọc mã từ ngoài vào trong, mỗi lần một thẻ mở nằm bên trong thẻ khác thì nó là "con":

    • Cấp 0: html
    • Cấp 1: head, body
    • Cấp 2 (con của head): meta, title; (con của body): h1, p, hr, p
    • Cấp 3 (con của thẻ p thứ hai): em

    Cách này giúp em kiểm tra: phần tử rỗng (meta, hr) luôn là lá (không có con).

    💡 Mẹo nhớ: Vẽ cây HTML giống vẽ sơ đồ gia phả: thẻ bao ngoài là "cha", thẻ nằm bên trong là "con".

    ⚙️ VẬN DỤNG

    Câu 1

    Đề bài: Em hãy tìm trên mạng các trang web hỗ trợ soạn thảo HTML trực tuyến.

    Cách 1 — Tra cứu theo từ khoá

    Mở trình duyệt và tìm kiếm với các từ khoá: "online HTML editor", "trình soạn thảo HTML trực tuyến". Một số trang phổ biến:

    • w3schools.com (mục Tryit Editor): gõ mã bên trái, nháy Run để xem kết quả bên phải.
    • tutorialspoint.com (mục Online HTML Editor / Coding Ground).
    • codepen.io: soạn thảo HTML, CSS, JavaScript và xem kết quả trực tiếp.
    • jsfiddle.net, playcode.io: cùng chức năng tương tự.
    Cách 2 — Cách sử dụng chung

    Các trang này có giao diện giống Hình 7.6: một khung để gõ mã, một khung hiển thị kết quả, kèm nút chạy (Run). Em chỉ cần máy tính có kết nối Internet và một trình duyệt chuẩn (Cốc Cốc, FireFox, Chrome, Microsoft Edge) là dùng được, không cần cài thêm phần mềm.

    Câu 2

    Đề bài: 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 (về lịch sử phát triển HTML). Lưu ý thẻ thể hiện ảnh có cú pháp , trong đó "tên tệp ảnh" là đường dẫn của tệp hình ảnh cần đưa lên trang.

    Cách 1 — Soạn thảo trang web kèm nội dung và ảnh

    Giả sử em đã lưu ảnh sơ đồ của Hình 7.7 với tên lichsu_html.png cùng thư mục với tệp HTML. Soạn tệp như sau:

    

  
    
    Lịch sử phát triển HTML
  
  
    
    Lịch sử phát triển HTML
    

    
    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.
    

    
    Ý 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.
    

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

    

    
    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.
    

    
    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.
    

    
    Phiên bản hiện tại là HTML5 ra đời năm 2014.
    Cách 2 — Các bước thực hiện trên máy
    1. Mở phần mềm soạn thảo (Notepad++, Sublime Text hoặc trang trực tuyến như w3schools).
    2. Gõ mã HTML như trên.
    3. Chuẩn bị ảnh sơ đồ (chụp/tải Hình 7.7) và lưu cùng thư mục, đặt tên trùng với giá trị trong thuộc tính src.
    4. Lưu tệp với phần mở rộng .html, ví dụ lichsu.html.
    5. Mở tệp bằng trình duyệt để kiểm tra: phần văn bản hiển thị đúng và ảnh hiện ra.
    ⚠️ Lưu ý thi: Thẻ là phần tử rỗng nên không có thẻ đóng . Giá trị trong src phải đúng tên và đúng đường dẫn của tệp ảnh, nếu sai thì ảnh sẽ không hiển thị (chỉ thấy biểu tượng ảnh hỏng).
    🎯 Ghi nhớ: - Tệp HTML là văn bản thuần, soạn được bằng nhiều phần mềm; phần mềm chuyên nghiệp giúp viết nhanh và ít lỗi nhờ tô màu cú pháp, gợi ý, đánh số dòng. - Các phần tử rỗng như
    ,
    , , không có thẻ đóng nên không thể chứa phần tử con. - Cấu trúc trang luôn theo khung html → (head, body); vẽ cây thông tin theo quan hệ cha – con của các thẻ lồng nhau. - HTML do Tim Berners-Lee khởi xướng tại CERN (1991), phiên bản hiện tại là HTML5 (2014).
Chế độ đọc sách →