Giáo án Khoa học máy tính 12 Kết nối bài 7: HTML và cấu trúc trang web
Giáo án bài 7: HTML và cấu trúc trang web sách Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức. Được thiết kế theo công văn 5512, chi tiết, đầy đủ. Giáo án là bản word, có thể tải về và dễ dàng chỉnh sửa. Bộ giáo án có đầy đủ các bài trong học kì 1 + học kì 2 của Tin học 12 kết nối tri thức. Kéo xuống dưới để tham khảo chi tiết.
Xem: => Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Xem video về mẫu Giáo án Khoa học máy tính 12 Kết nối bài 7: HTML và cấu trúc trang web
Các tài liệu bổ trợ khác
Xem toàn bộ: Giáo án khoa học máy tính 12 kết nối tri thức đủ cả năm
Ngày soạn:…/…/…
Ngày dạy:…/…/…
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
(2 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.
2. Năng lực
Năng lực chung:
Năng lực học tập, tự học: HS biết tự tìm kiếm, chuẩn bị và lựa chọn tài liệu, phương tiện học tập trước giờ học, quá trình tự giác tham gia các và thực hiện các hoạt động học tập cá nhân trong giờ học ở trên lớp,…
Năng lực giao tiếp và hợp tác: Khả năng phân công và phối hợp thực hiện nhiệm vụ học tập.
Năng lực giải quyết vấn đề sáng tạo: HS đưa ra các phương án trả lời cho câu hỏi, bài tập xử lý tình huống, vận dụng kiến thức, kĩ năng của bài học để giải quyết vấn đề thường gặp.
Năng lực Tin học:
Hiểu khái niệm và chức năng của ngôn ngữ HTML.
Hiểu cấu trúc thẻ HTML, phần tử HTML, nhận dạng được thẻ HTML và phần tử HTML trong ví dụ cụ thể.
Hiểu và giải thích được cấu trúc trang web.
Biết về các phần mềm soạn thảo HTML, các ưu nhược điểm của từng phần mềm, từ đó lựa chọn được phần mềm soạn thảo phù hợp với nhiệm vụ và điều kiện thực tế.
3. Phẩm chất
Hình thành ý thức trách nhiệm khi làm việc nhóm. Rèn tính cẩn thận, kiên trì, chăm chỉ học hỏi để hoàn thành nhiệm vụ được giao.
II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU
GV: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, bài trình chiếu (Slide), máy chiếu, phòng máy tính có kết nối Internet, một số tệp HTML có cấu trúc đầy đủ.
HS: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, vở ghi, máy tính.
III. TIẾN TRÌNH DẠY HỌC
A. HOẠT ĐỘNG KHỞI ĐỘNG
a) Mục tiêu:
- Khơi gợi nhu cầu tìm hiểu bản chất của một vấn đề quen thuộc, từ đó HS thấy được sự cần thiết phải tìm hiểu các kiến thức mới bổ sung cho hiểu biết của bản thân.
- Tạo không khí hứng khởi khi bắt đầu tiết học.
b) Nội dung: HS dựa vào hiểu biết để trả lời các câu hỏi.
c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời câu hỏi GV đưa ra.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ:
- GV chia lớp thành 4 nhóm học tập, cho HS xem video về HTML, sau đó nêu câu hỏi Khởi động SGK trang 39 cho các nhóm thảo luận:
https://www.youtube.com/watch?v=xKuJrmlCdig
Các em đã được làm quen với khái niệm website và trang web, cũng có thể em đã biết cách sử dụng phần mềm để tạo ra các trang web với nội dung đa dạng và phong phú, hình thức trình bày đẹp.
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?
Em hãy tìm câu trả lời.
Bước 2: HS thực hiện nhiệm vụ học tập:
- Các nhóm HS thảo luận về đoạn video mà GV cho xem và trả lời câu hỏi.
- GV quan sát quá trình các nhóm thảo luận, giải đáp thắc mắc nếu HS chưa rõ.
Bước 3: Báo cáo kết quả hoạt động, thảo luận.
- GV mời một số nhóm báo cáo kết quả thảo luận.
Gợi ý trả lời:
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.
Mã nguồn của các trang web được viết bằng ngôn ngữ HTML.
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.
- GV chiếu slide cho HS thấy được một số trình duyệt web phổ biến hiện nay.
Một số trình duyệt web phổ biến
- Các nhóm khác lắng nghe và góp ý.
Bước 4: Đánh giá kết quả thực hiện:
GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: HTML đóng vai trò là bước đệm không thể thiếu trong hành trình khám phá thế giới lập trình dành cho người mới. Đơn giản nhưng mạnh mẽ, HTML là ngôn ngữ đánh dấu siêu văn bản, mở cánh cửa đầu tiên để bắt đầu sáng tạo trên không gian web. Vậy để hiểu rõ hơn về cấu trúc và sức mạnh của HTML, chúng ta sẽ cùng nhau đến với Bài 7: HTML và cấu trúc trang web.
B. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Tìm hiểu ngôn ngữ HTML và trang web
a) Mục tiêu: Giúp HS nhận biết được một số khái niệm, định nghĩa về trang web, thẻ HTML và phần tử HTML.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Trang web và HTML, kết hợp với những hiểu biết thực tiễn để thực hiện nhiệm vụ.
c) Sản phẩm: Một số khái niệm, định nghĩa về trang web, thẻ HTML và phần tử HTML.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | ||||||||||||
a) Thẻ đánh dấu HTML Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc Hoạt động 1 - Tìm hiểu ngôn ngữ HTML và trang web SGK trang 39 và trả lời câu hỏ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. 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 - GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi: + 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? 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 1a SGK tr. 39 – 40 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 1 tr.39 SGK: Đây là mã nguồn của trang web được viết bằng ngôn ngữ HTML. Nó bao gồm các thành phần như 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. 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. | 1. TRANG WEB VÀ HTML - HTML là viết tắt của cụm từ Hypertext Markup Language (ngôn ngữ đánh dấu siêu văn bản), là một bộ quy tắc dùng để thiết lập cấu trúc và hiển thị nội dung trang web. - Trang web được thiết lập từ các tệp văn bản thường có phần mở rộng là .html hoặc .htm được gọi là trang HTML. - Nội dung trên trang HTML bao gồm phần văn bản (text) và các kí tự đánh dấu đặc biệt nằm trong cặp dấu “<”, “>”. Các kí tự này được gọi là thẻ đánh dấu (còn gọi là thẻ HTML hay tag). - Một số thẻ đánh dấu HTML trong ví dụ ở Hình 7.1b là <head>, <body>, <h1>, <p>, <div>,… 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. - Cấu trúc: Thẻ đánh dấu HTML được viết trong cặp dấu “<”, “>”.
- 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ẻ <em> được lồng bên trong thẻ <p>: + 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ẻ <p>, 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 </p>. + 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 <tên thẻ> hoặc <tên thẻ/>, ví dụ <hr/> (dòng kẻ ngang), <br/> (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. | ||||||||||||
b) Phần tử HTML Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS hoạt động cá nhân và đặt câu hỏi: + 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 <head>, <body> và <div> trong ví dụ ở Hình 7.1b? - 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 củng cố kiến thức tr.41 SGK: Câu 1. Tệp văn bản trong Hình 7.1 có bao nhiêu phần tử HTML? Câu 2. Nêu sự giống và khác nhau giữa thẻ HTML và phần tử HTML. 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 1b SGK tr.40 – 41 và 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: - HS lần lượt trả lời các câu hỏi và nhận xét lẫn nhau. Hướng dẫn trả lời Câu hỏi củng cố kiến tr.41 SGK: Câu 1. Tệp văn bản trong Hình 7.1 có 9 phần tử HTML. Câu 2. 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. 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: 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. | b) Phần tử HTML - Khái niệm: Phần tử HTML (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. - Lưu ý: 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. - Trong ví dụ ở Hình 7.1b: + Hai phần tử <head> và <body> rời nhau. + Phần tử <div> 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. - Lưu ý: + Dòng đầu tiên của mỗi tệp HTML có dạng <!DOCTYPE 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ử HTML đặc biệt có ý nghĩa chú thích trong tệp HTML có dạng: |
Hoạt động 2: Tìm hiểu cấu trúc cơ bản của một tệp HTML
a) Mục tiêu: HS nắm được cấu trúc trang web.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. Cấu trúc cơ bản của một tệp HTML để thực hiện nhiệm vụ.
c) Sản phẩm: Cấu trúc trang web.
d) Tổ chức thực hiện:
--------------- Còn tiếp ---------------
Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II
Hệ thống có đầy đủ các tài liệu:
- Giáo án word (400k)
- Giáo án Powerpoint (500k)
- Trắc nghiệm theo cấu trúc mới (250k)
- Đề thi cấu trúc mới: ma trận, đáp án, thang điểm..(250k)
- Phiếu trắc nghiệm câu trả lời ngắn (250k)
- Trắc nghiệm đúng sai (250k)
- Lý thuyết bài học và kiến thức trọng tâm (200k)
- File word giải bài tập sgk (150k)
- Phiếu bài tập để học sinh luyện kiến thức (200k)
- .....
- Các tài liệu được bổ sung liên tục để 30/01 có đủ cả năm
Nâng cấp lên VIP đê tải tất cả ở tài liệu trên
- Phí nâng cấp VIP: 800k
=> Chỉ gửi 450k. Tải về dùng thực tế. Nếu hài lòng, 1 ngày sau mới gửi phí còn lại
Cách tải hoặc nâng cấp:
- Bước 1: Chuyển phí vào STK: 1214136868686 - cty Fidutech - MB(QR)
- Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận tài liệu
Xem toàn bộ: Giáo án khoa học máy tính 12 kết nối tri thức đủ cả năm
ĐẦY ĐỦ GIÁO ÁN CÁC BỘ SÁCH KHÁC
GIÁO ÁN WORD LỚP 12 KẾT NỐI TRI THỨC
Giáo án toán 12 kết nối tri thức
Giáo án đại số 12 kết nối tri thức
Giáo án hình học 12 kết nối tri thức
Giáo án vật lí 12 kết nối tri thức
Giáo án hoá học 12 kết nối tri thức
Giáo án sinh học 12 kết nối tri thức
Giáo án ngữ văn 12 kết nối tri thức
Giáo án lịch sử 12 kết nối tri thức
Giáo án địa lí 12 kết nối tri thức
Giáo án kinh tế pháp luật 12 kết nối tri thức
Giáo án Công nghệ Điện - điện tử 12 kết nối tri thức
Giáo án Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Giáo án Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức
Giáo án thể dục 12 bóng rổ kết nối tri thức
Giáo án thể dục 12 cầu lông kết nối tri thức
Giáo án thể dục 12 bóng chuyền kết nối tri thức
Giáo án mĩ thuật 12 kết nối tri thức
Giáo án âm nhạc 12 kết nối tri thức
Giáo án hoạt động trải nghiệm hướng nghiệp 12 kết nối tri thức
GIÁO ÁN POWERPOINT LỚP 12 KẾT NỐI TRI THỨC
Giáo án Powerpoint Toán 12 kết nối tri thức
Giáo án Powerpoint hình học 12 kết nối tri thức
Giáo án Powerpoint đại số 12 kết nối tri thức
Giáo án powerpoint vật lí 12 kết nối tri thức
Giáo án powerpoint ngữ văn 12 kết nối tri thức
Giáo án powerpoint địa lí 12 kết nối tri thức
Giáo án powerpoint lịch sử 12 kết nối tri thức
Giáo án powerpoint địa lí 12 kết nối tri thức
Giáo án Powerpoint Kinh tế pháp luật 12 kết nối tri thức
Giáo án Powerpoint Mĩ thuật 12 kết nối tri thức
Giáo án Powerpoint Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức
Giáo án Powerpoint Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Giáo án powerpoint Công nghệ 12 Điện - điện tử kết nối tri thức
Giáo án powerpoint Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án powerpoint hoạt động trải nghiệm hướng nghiệp 12 kết nối tri thức
GIÁO ÁN CHUYÊN ĐỀ LỚP 12 KẾT NỐI TRI THỨC
Giáo án chuyên đề toán 12 kết nối tri thức
Giáo án chuyên đề vật lí 12 kết nối tri thức
Giáo án chuyên đề hoá học 12 kết nối tri thức
Giáo án chuyên đề sinh học 12 kết nối tri thức
Giáo án chuyên đề ngữ văn 12 kết nối tri thức
Giáo án chuyên đề lịch sử 12 kết nối tri thức
Giáo án chuyên đề địa lí 12 kết nối tri thứ
Giáo án chuyên đề kinh tế pháp luật 12 kết nối tri thức
Giáo án chuyên đề Công nghệ 12 Công nghệ điện - điện tử kết nối tri thức
Giáo án chuyên đề Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án chuyên đề Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Giáo án chuyên đề Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức
GIÁO ÁN POWERPOINT CHUYÊN ĐỀ LỚP 12 KẾT NỐI TRI THỨC
Giáo án powerpoint chuyên đề ngữ văn 12 kết nối tri thức
Giáo án Powerpoint chuyên đề Kinh tế pháp luật 12 kết nối tri thức
GIÁO ÁN DẠY THÊM LỚP 12 KẾT NỐI TRI THỨC
Giáo án dạy thêm ngữ văn 12 kết nối tri thức
Giáo án powerpoint dạy thêm ngữ văn 12 kết nối tri thức
Giáo án dạy thêm toán 12 kết nối tri thức
Giáo án powerpoint dạy thêm toán 12 kết nối tri thức