Giáo án tích hợp - danh sách trong HTML pptx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (179.48 KB, 7 trang )
GIÁO ÁN SỐ: 01 Thời gian thực hiện:…4 tiết……
Tên bài học trước: Cấu trúc và nguyên tắc trong
HTML
Thực hiện từ ngày:17/3/2011.
Tên bài:
DANH SÁCH TRONG HTML
A-CHUẨN BỊ
1. Mục tiêu bài học:
Sau khi học xong bài học này học sinh có khả năng:
- Mô tả được cú pháp tạo danh sách.
- Thiết kế được trang web có các kiểu danh sách: không theo thứ tự, theo thứ tự, định
nghĩa.
- Tạo hứng thú, long say mê của học sinh đối với môn học.
- Có thái độ nghiêm túc trong giờ học, chấp hành đúng nội quy phòng máy.
- Có trách nhiệm bảo vệ trang thiết bị trong phòng máy.
2. Đồ dùng và trang thiết bị dạy học:
- Máy vi tính
- Phần mềm Adobe Dreamweaver CS5.
- Máy chiếu.
- Bảng, phấn.
3. Hình thức tổ chức dạy học:
- Tập trung học sinh học lí thuyết và hướng dẫn đầu tiết.
- Thực hành cá nhân.
B-CÁC BƯỚC LÊN LỚP
1. Ổn định lớp:
- Chào: 30s.
- Điểm danh: vắng:…………….có mặt:…………… 2p.
2. Kiểm tra bài cũ: (10p)
Dự kiến số học sinh kiểm tra:
Tên Nguyễn Văn A Hoàng Thị C
Điểm
Câu hỏi:
Câu 1: Nêu cấu trúc một trang HTML?
Câu 2: Nêu một số nguyên tắc trong HTML?
Đáp án:
Câu 1:
<html>
<head>
<title>tiêu đề</title>
</head>
<body>
Nội dung
</body>
</html>
Câu 2:
• Tên tag không phân biệt chữ hoa và chữ thường.
• Giá trị của thuộc tính nên được đặt trong dấu nháy đơn
hoặc dấu nháy kép (thường dùng).
• Các tag html có thể lồng nhau.
• HTML sẽ hiện thị đúng 1 kí tự khoảng trắng giữa các từ
trong vùng nội dung của HTML element
• Còn kí tự tab, kí tự xuống dòng sẽ được bỏ qua.
=> Không sử dụng những kí tự này để định vị nội dung của
trang web.
3. Thực hiện bài học:
TT NỘI DUNG HOẠT ĐỘNG DẠY HỌC THỜI
GIAN
GV HS
1 DẪN NHẬP:
- Đặt vấn đề vào bài.
- Đưa ra một trang
web có sử dụng
danh sách.
- Quan sát.
5p
4,5p
-Tên bài: “DANH SÁCH TRONG
HTML”
- Đặt câu hỏi:
Muốn tạo được
1 trang web như
thế này, chúng ta
phải làm gì?
- Nhận xét.
-Ghi tên bài lên
bảng.
- Lắng nghe,
trả lời câu
hỏi.
-Ghi chép.
30s
2 GIỚI THIỆU CHỦ ĐỀ
- Nội dung bài học.
- Mục tiêu.
- Nêu nội dung
của bài học.
- Chiếu mục tiêu
và giảng giải.
- Lắng nghe.
- Quan sát,
lắng nghe.
3p
3 GIẢI QUYẾT VẤN ĐỀ
1. Định nghĩa.
Danh sách trong HTML được
hiểu là một list các đối tượng
được hiển thị theo cùng một
kiểu giống nhau.
2. Các loại danh sách.
2.1. Danh sách không theo thứ tự:
2.1.1. Khái niệm.
Danh sách không theo thứ
tự là một danh sách các mục.
Danh sách của các mục sẽ
được đánh dấu bởi những
bullet (dạng như gạch đầu
dòng nhưng là một vòng tròn
màu đen).
2.1.2. Code.
<ul>
<li>Danh sách
một</li>
<li>Danh sách
(Chiếu slide 3 )
Nêu khái niệm
Phân tích khái niệm
Chiếu slide
- Quan sát,
ghi chép.
Lắng nghe
Quan sát
162p
3p
30p
5p
5p
hai</li>
</ul>
2.1.3. Ví dụ.
<ul>
<li>Khoa SPKT</li>
<li>Khoa CNTT</li>
</ul>
*Kết quả:
• Khoa SPKT
• Khoa CNTT
2.1.4. Áp dụng.
Cho bài tập:
Bạn hãy hiển thị trên trang
web nội dung sau
Một số môn chuyên ngành
CNTT
• Cơ sở lập trình 1
• Thiết kế web
• Tin học đại cương
• Cấu trúc dũ liệu
2.1.5.
2.2. Danh sách theo thứ tự:
2.2.1. Khái niệm.
Danh sách theo thứ tự
cũng là một dạng danh
sách của các mục. Nhưng
những mục trong đó được
đánh dấu bởi số. Một danh
sách theo thứ tự bắt đầu
với thẻ <ol>. Mỗi mục
được bắt đầu với thẻ <li>.
2.2.2. Code.
<ol>
<li>Danh sách 1</li>
<li>Danh sách 2</li>
</ol>
2.2.3. Ví dụ.
<ol>
<li>Khoa SPKT</li>
<li>Khoa CNTT</li>
</ol>
*Kết quả:
1. Khoa SPKT
2. Khoa CNTT
2.2.4. Áp dụng.
Bạn hãy hiển thị trên trang
web nội dung sau
Sử dụng phần mềm
Adobe
Dreamweaver CS5
Cho ví dụ chạy
chương trình và
phân tích
( Chiếu slide )
(Chiếu slide)
Nêu khái niệm
Phân tích khái niệm
Chiếu slide
Sử dụng phần mềm
Adobe
Dreamweaver CS5
Nhập đoạn code
chạy chương trình
và phân tích
Chiếu Slide
Làm theo
Xem kết quả
Thực hành
Lắng nghe
Quan sát,lắng
nghe
Thực hành theo
Xem kết quả
Thực hành
10p
10p
32p
7p
5p
10p
10p
Các thành phố trực thuộc
TW Việt Nam:
1. Hà Nội
I. Hải Phòng
i. Đà Nẵng
A. TP HCM
a. Cần Thơ
2.3. Danh sách định nghĩa:
2.3.1. Khái niệm.
Một danh sách dạng
định nghĩa không phải là
danh sách của các hạng
mục. Nó là một danh
sách của các thuật ngữ
và những lời giải thích
của thuật ngữ đó. Một
danh sách định nghĩa bắt
đầu với thẻ <dl>. Mỗi
một thuật ngữ được bắt
đầu với thẻ <dt>. Mỗi
định nghĩa trong danh
sách định nghĩa được bắt
đầu bằng thẻ <dd>.
2.3.2. Code.
<dl>
<dt>Danh sách 1</dt>
<dd>Mô tả 1</dd>
<dt>Danh sách 2</dt>
<dd>Mô tả 2</dd>
</dl>
2.3.3. Ví dụ.
<dl>
<dt> Danh sách
không theo thứ
tự</dt>
<dd> Các mục sẽ
được đánh dấu bởi
những bullet </dd>
<dt> Danh sách
theo thứ tự</dt>
<dd> Các mục
được đánh dấu bởi
số</dd>
<dt> Danh sách
định nghĩa</dt>
<dd>
Danh sách của
các thuật ngữ và
những lời giải
Nêu khái niệm
Phân tích
(Chiếu slide)
Phân tích cấu trúc
Sử dụng phần mềm
Adobe
Dreamweaver CS5
Nhập đoạn code
chạy chương trình
và phân tích
Lắng nghe,chép
bài
Lắng nghe
Làm theo các
bước, xem kết
quả
35p
5p
5p
15p
thích của thuật
ngữ đó</dd>
</dl>
*Kết quả:
Danh sách không theo thứ
tự
Các mục sẽ được
đánh dấu bởi những
bullet
Danh sách theo thứ tự
Các mục được đánh
dấu bởi số
Danh sách định nghĩa
Danh sách của các
thuật ngữ và những
lời giải thích của
thuật ngữ đó
2.3.4. Áp dụng.
Hãy hiển thị nội dung và
format văn bản như sau:
Toán CC A1
Toán CC A3
Vật lý A1
Vật lý A3
2.4. Bài tập tổng hợp:
Hãy tạo một trang HTML
trong đó có chứa các kiểu
danh sách vừa học.
(Chiếu slide)
(Chiếu slide).
Thực hành.
Thực hành.
10p
40p
4 KẾT THÚC VẤN ĐỀ
- Củng cố kiến thức:
- Củng cố kĩ năng rèn luyện:
- Chiếu câu hỏi.
- Phát phiếu kiểm tra
(trắc nghiệm).
- Chiếu đáp án.
- Nhận xét kết quả
bài kiểm tra.
- Nhận xét kết quả
buổi học.
- Quan sát, lắng
nghe.
- Nhận phiếu
kiểm tra và làm
bài.
- Quan sát, lắng
nghe, ghi nhớ.
- Lắng nghe, ghi
nhớ.
- Lắng nghe,
ghi nhớ.
20p
2p
5p
3p
4p
3p
3p
5 HƯỚNG DẪN TỰ HỌC Ôn tập và ghi nhớ cú pháp tạo danh
sách trong HTML.
5p
4. Rút kinh nghiệm tổ chức thực hiện
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
……………………………………
TRƯỞNG KHOA/ TRƯỞNG BỘ MÔN Ngày …tháng …năm…
………………………………………… GIÁO VIÊN
…………
