Giáo án Tin học ứng dụng 12 chân trời Bài F1: HTML và trang web

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 3 – 4 HS và trả lời các câu hỏi:

+ Siêu văn bản (Hypertext) là gì?

+ Trang web có phải là siêu văn bản không? Ngôn ngữ nào được sử dụng để tạo ra trang web?

+ HTML là gì? 

+ Hiện nay, phiên bản HTML nào đang được sử dụng phổ biến nhất?

+ Một trang web bao gồm những thành phần nào?

+ Mỗi phần tử HTML được thể hiện như thế nào?

- GV trình bày về cách kết xuất trang web của các trình duyệt phổ biến hiện nay.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.101 SGK:

Câu 1. Em hãy kể tên một ngôn ngữ đánh dấu dùng để tạo ra trang web và cho biết phiên bản hiện nay của ngôn ngữ này.

Câu 2. Các trình duyệt khác nhau có thể kết xuất một trang web tương tự nhau không?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1 SGK tr.101 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.68 SGK:

Câu 1. Ngôn ngữ đánh dấu dùng để tạo trang web là HTML và phiên bản hiện nay là 5.3. 

Câu 2. Về cơ bản, các trình duyệt khác nhau đều kết xuất trang web dưới dạng HTML. Tuy nhiên, các trình duyệt có thể hiển thị trang web khác nhau do các yếu tố như:

+ Do người lập trình từ phía server dùng các lệnh kiểm tra người dùng sử dụng trình duyệt gì để kết nối đến trang web, khi đó sẽ nhận được các lệnh HTML khác nhau tương ứng với mỗi trình duyệt.

+ Cách các trình duyệt nhận dạng và hiển thị thẻ HTML.

+ Thiết bị sử dụng để kết nối đến trang web.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận:

HTML là ngôn ngữ đánh dấu dùng để thiết kế siêu văn bản hiển thị trong trình duyệt web.

1. Giới thiệu ngôn ngữ HTML

- Siêu văn bản (Hypertext) là tài liệu điện tử đa phương tiện chứa văn bản, hình ảnh, âm thanh, video và siêu liên kết. Trong đó, siêu liên kết giúp người đọc dễ dàng truy cập đến nội dung khác hoặc siêu văn bản khác.

- Mỗi trang web là một siêu văn bản được tạo ra bằng ngôn ngữ HTML (HyperText Markup Language). 

- HTML là ngôn ngữ đánh dấu được phát triển bởi Tim Berners-Lee, Robert Cailliau và các cộng sự vào năm 1989, dùng để trình bày cấu trúc, nội dung và hình thức của trang web. 

- Hiện nay, HTML5 là phiên bản thông dụng, giúp tạo ra trang web có tính tương tác cao và giúp hiển thị trang web trên các thiết bị thông minh.

- Thành phần của một trang web bao gồm văn bản, hình ảnh, âm thanh, video và các nội dung khác đều được định dạng bằng các phần tử HTML tương ứng. 

- Mỗi phần tử HTML được thể hiện bằng một thẻ (tag) và có thể đính kèm các thuộc tính (attribute).

- Khi người dùng truy cập trang web, trình duyệt sẽ tải xuống mã HTML tương ứng và sử dụng mã này để kết xuất nội dung, hình thức của trang web. 

- Các trình duyệt phổ biến hiện nay như Microsoft Edge, Google Chrome, Mozilla Firefox, Safari,... đều có hỗ trợ ngôn ngữ HTML.

Ví dụ: Trang chủ của trang web https://vnnic.vn/ hiển thị giống nhau trong hai trình duyệt Microsoft Edge (Hình 2a) và Mozilla Firefox (Hình 2b) vì hai trình duyệt này đều có hỗ trợ ngôn ngữ HTML và kết xuất các thành phần của trang web theo cùng một cách.

Hình 2a. Trang web https://vnnic.vn/ trong Microsoft Edge

Hình 2b. Trang web https://vnnic.vn/

trong Mozilla Firefox

Hình 2. Trang chủ của trang web https://vnnic.vn/ trong trình duyệt Microsoft Edge và Mozilla Firefox

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 3 – 4 HS và trả lời các câu hỏi: 

+ Mỗi phần tử HTML bao gồm những thành phần cơ bản nào?

+ Các phần tử HTML được đánh dấu như thế nào?

+ Mỗi thẻ được viết trong cặp dấu gì?

- GV giới thiệu phần mềm Visual Studio Code và hướng dẫn HS cách tạo tệp mới.

- GV tiếp tục đặt câu hỏi cho các nhóm thảo luận:

+ Em hãy quan sát Hình 3 SGK tr.102 và trình bày cấu trúc của một trang web cơ bản được viết bằng ngôn ngữ HTML.

+ Khi sử dụng nhiều thẻ HTML lồng nhau, cần lưu ý điều gì?

- GV giới thiệu một số phần tử HTML chỉ có thẻ mở.

- GV tiếp tục đặt câu hỏi cho các nhóm thảo luận:

+ Em hãy quan sát Hình 5 SGK tr.103 và cho biết thẻ <hr> có chức năng gì?

+ Thẻ HTML có bắt buộc phải có thuộc tính không? Nếu có thuộc tính thì mỗi thẻ HTML có thể có nhiều thuộc tính được không?

+ Thuộc tính được đặt ở vị trí nào?

+ Em hãy quan sát Hình 6 SGK tr.104 và cho biết thuộc tính bgcolor có chức năng gì?

+ Em hãy quan sát Hình 7 SGK tr.104 và cho biết thẻ <input> có chức năng và những thuộc tính gì?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.104 – 105 SGK:

Câu 1. Em hãy truy cập trang web https://chantroisangtao.vn/, quan sát và nhận xét về bố cục trình bày của trang web này.

Câu 2. Chọn câu trả lời đúng cho câu hỏi dưới đây.

Phần nội dung hiển thị trên thanh tiêu đề của cửa sổ trình duyệt được đặt trong cặp

thẻ HTML nào?

A.  <head></head>.

C.  <title></title>.

B.  <html></html>.

D.  <body></body>.

Câu 3. Cách viết thẻ HTML có nhiều thuộc tính sau đây đúng hay sai?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.102 – 104 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.104 – 105 SGK:

Câu 1. Nhận xét về bố cục trình bày của trang web:

+ Chuẩn mực và gọn gàng:

• Trang web có bố cục gọn gàng, không quá nhiều thông tin đè lên nhau.

• Các phần được sắp xếp theo thứ tự logic, giúp người dùng dễ dàng tìm kiếm thông tin.

+ Thanh điều hướng:

• Thanh menu ở phía trên trang web chứa các mục chính như “Sách giáo khoa”, “Hành trang số”, “Phân loại”,…

• Thanh menu giúp người dùng dễ dàng di chuyển giữa các phần khác nhau của trang.

+ Thiết kế hình ảnh và biểu đồ:

• Trang web sử dụng hình ảnh và biểu đồ để minh họa thông tin về các bộ sách giáo khoa.

• Các hình ảnh được lựa chọn kỹ lưỡng, tạo ấn tượng cho người xem.

+ Phần chia sẻ thông tin:

…………………

2. Cấu trúc, nội dung trang web và các phần tử HTML

- Mỗi phần tử HTML có hai thành phần cơ bản là thẻ và thuộc tính:

- Phần lớn các phần tử được đánh dấu bằng một cặp thẻ gồm:

+ Thẻ mở (< >).

+ Thẻ đóng (</ >). 

- Một số ít khác chỉ đánh dấu bằng thẻ mở. 

- Để viết mã lệnh HTML, em có thể sử dụng các trình soạn thảo văn bản phổ biến như Visual Studio Code, Sublime Text, Atom,... Các ví dụ minh hoạ trong chủ đề này được viết bằng chương trình Visual Studio Code:

Tải và cài đặt phần mềm từ địa chỉ https://code.visualstudio.com/

- Cách tạo tệp mới trong phần mềm Visual Studio Code: 

+ Trên thanh công cụ, chọn File  New Text File.

+ Gõ tổ hợp phím Ctrl + N.

- Trước khi gõ mã lệnh, lưu tệp với tên portfolio.html, trong đó:

+ portfolio là phần tên chính.

+ .html là phần tên mở rộng.

- Cấu trúc của một trang web cơ bản:

Hình 3. Cấu trúc của một 
trang web cơ bản

+ <!DOCTYPE html>: khai báo với trình duyệt rằng trang web sử dụng HTML5.

+ Cặp thẻ <html></html>: 

• Chứa toàn bộ nội dung trang web. 

• Giúp trình duyệt nhận biết đây là một tài liệu được viết bằng ngôn ngữ HTML.

• Tất cả thẻ khác đều nằm bên trong cặp thẻ này.

+ Cặp thẻ <head></head>: chứa các phần mở đầu của trang web nhằm cung cấp thông tin của trang web cho trình duyệt và các công cụ tìm kiếm trên Internet. 

Ví dụ: 

• Thẻ <meta charset="utf-8">: giúp trình duyệt nhận biết trang web sử dụng utf-8, là bảng mã Unicode được dùng phổ biến dành cho các trang web.

• Cặp thẻ <title></title>: định nghĩa tiêu đề của trang web, hiển thị trên thanh tiêu đề hoặc cửa sổ của trình duyệt.

+ Cặp thẻ <body></body>: định nghĩa phần nội dung chính của trang web. Trong Hình 3, phần nội dung chính gồm:

• Cặp thẻ <h1></h1>: định nghĩa đề mục có cấp độ lớn nhất trong trang web. 

• Cặp thẻ <p></p>: định nghĩa một đoạn văn bản.

+ Nội dung đặt trong cặp kí hiệu <!-- --> là phần ghi chú, trình duyệt sẽ không hiển thị lên trang web.

- Lưu ý: Khi sử dụng nhiều thẻ HTML lồng nhau, phải đóng thẻ bên trong trước, đóng thẻ bên ngoài sau.

Ví dụ: Trong Hình 4, thẻ <strong> bên trong thẻ <p> nên phải đóng thẻ </strong> trước, đóng thẻ </p> sau. 

Hình 4. Minh họa các thẻ HTML 
lồng nhau

- Một số phần tử chỉ có thẻ mở: <br>, <hr>, <img>,…

Ví dụ: 

+ Thẻ <hr> dùng để tạo ra đường ngăn cách nằm ngang, phân tách các nội dung trong trang web.