BÀI TẬP TUẦN 01-02-03 MÔN LẬP TRÌNH WEB
Chương 1: HTML
Mục tiêu:
Hiểu rõ và áp dụng được cách làm việc của 1 ứng dụng web. Xây dựng được trang web dùng mã HTML cơ bản
Yêu cầu:
Tất cả các bài tập lưu trong thư mục: T:\MaSV_HoTen\Tuan010203\ Trong thư mục Tuan010203 có 2 thư mục con: Images chứa hình, HTML chứa
trang html
Sử dụng Notepad để soạn thảo trang html Cuối mỗi buổi thực hành, SV phải nén (.rar hoặc .zip) thư mục làm bài và nộp
lại bài tập đã thực hiện trong buổi đó.
Bài tập bắt buộc của Tuần 01, 02, 03, GV sẽ công bố cuối giờ. Bài tập bắt buộc sẽ gửi vào email dtthuha79@gmail.com với Subject và tập tin nén kèm theo: DHCNTT9A_LTWeb_TUANYY_HOTENSINHVIEN (trong đó YY sẽ là 01)
MODULE 1: CÁC TAG CƠ BẢN
Mục đích:
- Sử dụng Web editor soạn thảo được 1 We page đơn giản. - Sử dụng thành thạo các tag cơ bản, các thuộc tính
Các bước thực hiện: Bước 1: Mở Web editor (Notepad, Notepad ++) Bước 2: Tạo New File soạn thảo Web page theo cấu trúc:
Bước 3: Lưu file: Đặt tên file với phần mở rộng .html
Bước 4: Mở trình duyệt (Chrome, IE), Mở trang .html Các tag cơ bản:
1. 2.
5.
: ngắt đoạn Enter
6.
: xuống dòng chưa hết đoạn Shift Enter
7. , , : in đậm, in nghiêng, gạch chân text
8.
: thêm đường kẻ ngang 9. Nội dung hiển thị: định dạng font chữ.
10.
height=“giá_trị” border=“giá_trị”>: chèn hình vào Web page
11. Nội dung: nội dung văn bản hạ xuống 12. Nội dung nội dung văn bản lên cao 13.
- : Tạo danh sách có thứ tự
- …
- … …
14.
- : Tạo danh sách không có thứ tự
- …
- … …
15.
- : Tạo danh sách dạng từ điển
Bài 1:
Tạo trang web Euler.html, sử dụng hình ảnh và dữ liệu trong thư mục
Module1/bai1.txt. Sử dụng các tag cơ bản như ,
, , , , ,
,
, , ,Bài 2:
Tạo trang torte.html, hình ảnh và dữ liệu trong thư mục Module1/bai2.txt. sử dụng các tag cơ bản, thực hiện việc tạo danh sách có thứ tự
- ,
-
MODULE 2: LINKS – IMAGES - MAPS
Mục tiêu:
- Thực hiện tạo trang web với các tag cơ bản như module 1 - Thực hiện các liên kết trong cùng 1 trang hoặc các trang web với nhau (liên kết
nội, ngoại)
- Chèn hình ảnh và sử dụng liên kết từng phần hình ảnh (images map)
Bài 1:
Tạo trang web Resume.html, dữ liệu và hình trong thư mục Module1/bai1.txt. Sử dụng các tag
, Thêm vào phần cuối trang Resume.html có nội dung, sau đó tạo liên kết cho các mục:
– References đến trang Reference.html. – Comments on my work liên kết đến trang Comments.html
Mô hình liên kết các trang:
ế
Nội dung của 2 trang Refer.html và Comments.html như sau:
Bài 2: (image links)
Home
Slide1 .html Slide2 .html Slide3. html Slide6 .html Slide5 .html Slide4 .html Home.html:
Trang home.html tạo liên kết slide show liên kết đến slide1.html
Trên trang slide1.html các hình ảnh có ý nghĩa liên kết tương ứng:
- home.jpg, start.jpg, back.jpg, forward.jpg, end.jpg -
thumb1.jpg, thumb2.jpg, thumb3.jpg, thumb4.jpg, thumb5.jpg, thumb6.jpg
- Hình ảnh chính là slide1.jpg: “Do You Love Me? sung by Deb Ingalls and
slide6.html slide6.jpg Fiddler Full Cast #1
slide2.html slide2.jpg If I Were a Rich Man sung by Thomas Gates
slide4.html slide4.jpg Fiddler Cast #2 (Front Row): Olivia Young, Angela Unger
slide5.html slide5.jpg The Bottle Dance (L:R) Tim Lewis, Paul Richtoven, Peter Levin
slide3.html slide3.jpg Matchmaker (L:R) Karen Unger, Rachel Paulson, Lucy Davis, Judy French, Catherine Lewis
Thomas Gates” được thay đổi qua mỗi trang từ slide2.html đến slide6.html
Bài 3: image maps
Tạo trang web Expo.html như hình mẫu bên dưới, dữ liệu trong thư mục
Module2\bai3.txt. Với yêu cầu liên kết như sau:
Image Maps
• Bryd Hall (Text và Image Maps) liên kết đến trang Bryd.html • Mitchell Theatre (Text và Image Maps) liên kết đến trang Mitchell.html • Astronomy Classrooms (Text và Image Maps) liên kết trang Brinkman.html
Bài 4:
Tạo trang web Jaction.html, các file liên kết và dữ liệu trong thư mục Module2\bai4.txt
Image Maps
Bài 5:
Image Maps
Tạo website SFSF.html, sử dụng dữ liệu và hình trong thư mục Module2\bai5.txt
• • • Image map1: link đến trang Forrest.html Image map2: link đến trang Charnas.html Image map3: link đến trang Unwin.html
Bài 6:
Tạo Web Breakfast.html, dữ liệu và hình trong thư mục Module2\bai6.txt. Image
map cho hình ảnh với 3 phần liên kết như sau:
• Breakfast trỏ đến Breakfast.html • Lunch trỏ đến Lunch.html • Dinner trỏ đến Dinner.html
Thực hiện định dạng tương tự cho 2 trang Lunch.html và Dinner.html
MODULE 3: TABLE Mục tiêu:
- Tạo trang web chứa các bảng nội dung - Sử dụng table định dạng bố cục cho một số trang đơn giản
Bài 1: Table
Tạo lại một trang MAA1.html, sử dụng dữ liệu trong Module3/bai1.txt, sử dụng
và thuộc tính rowspan, colspan
Bài 2: Thiết kế trang web The Gargoyle.html, sử dụng dữ liệu trong Module3/bai2.txt sử dụng
lồng nhau
Bài 3: Tạo trang Dunston.html, sử dụng dữ liệu trong Module3/bai3.txt, sử dụng
lồng nhau,
MODULE 4: Layout HTML5
Mục tiêu:
Sử dụng các thành phần mới (header, section, aside, nav, footer) của HTML5 thiết lập layout các website như sau:
Bài 1:
Tạo một website Colorado.html có dạng
Logo.html
Link.html
Hompage.html Our Philosophy.html Climbing Lessons.html Petit Grepon.html Lumpy Ridge.html North Face.html Kiener's.html The Diamond.html Eldorado.html
Bài 2:
Thiết kế website Doccentric.hmtl, hình ảnh và dữ liệu trong thư mục Module4\bai2.
4 trang liên kết Logo
Image Maps
Trong đó liên kết hình cho 4 hotspot:
Bài 3:
Thiết kế website Travel Scotland.html. Dữ liệu và hình trong thư mục Module4\bai3
MODULE 5: FORM
Bài 1:
Tạo trang Register.htm
Bài 2:
Thiết kế trang form Online Classifield.html
Bài 3:
Thiết kế trang travelreport.html:
Bài 4:
Thiết kế trang Register.html
HTML5:
Bài 1:
Create a webpage in order to define additional details that the user can view or hide.
Hint:
Bài 2:
Create an Autocomplete List with an and the new
Hint:
1. Create the HTML5 with and other tags.
2. Using and
Bài 3:
Using the
attribute to create the following form. (The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form) Bài 4:
Create the following form using new HTML5 types
Hint:
With the input type = text, we can use the placeholder attribute to specify a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format)
name="txtName" value="" size="20" maxlength="20"
.
In additional, the autocomplete attribute specifies whether or not an input field should have autocomplete enabled (autocomplete="on|off").
Bài 5:
The
Tài liệu liên quan
Tài liêu mới
Chịu trách nhiệm nội dung: Nguyễn Công HàDoanh nghiệp quản lý: Công ty TNHH Tài Liệu trực tuyến Vi Na - GCN ĐKDN: 0307893603Địa chỉ: 54A Nơ Trang Long, P. Bình Thạnh, TP.HCM - Điện thoại: 0283 5102 888 - Email: info@tailieu.vnGiấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015
- , các ký tự đặc biệt
thư mục Module1/demo
Bài 3:
Tạo trang Macbeth.html, hình ảnh và dữ liệu trong thư mục Module1/bai3.txt. sử dụng các tag cơ bản, thực hiện việc tạo danh sách dạng từ vựng
![Tài liệu ôn tập môn Lập trình web 1 [mới nhất/chuẩn nhất]](https://cdn.tailieu.vn/images/document/thumbnail/2025/20251208/hongqua8@gmail.com/135x160/8251765185573.jpg)
