Bài tập 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)
Bạn đang xem trước 20 trang tài liệu Bài tập Lập trình Web - Chương 1: HTML, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
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. nội dung tiêu đề : Hiển thị nội dung
tiêu đề của trang web trên thanh tiêu đề của trình
duyệt
3. <body bgcolor= “màu nền” text= “màu chữ” background=
“hình nền”>
4. nội dung của header
: Tiêu đề
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. <FONT Face=“fontName1, fontName2, fontName3”
size=“value” color=“rrggbb”> Nội dung hiển
thị: định dạng font chữ.
10. <img src=“URL” alt=“Text” width=“giá_trị”
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
16. Cách chèn các ký tự đặc biệt
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ự , , 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
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 , , , , và các tag định dạng để trình bày trang
web.
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.html:
Trang home.html tạo liên kết slide show liên kết đến slide1.html
ế
Home
Slide2
.html
Slide3.
html
Slide5
.html
Slide6
.html
Slide1
.html
Slide4
.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
Thomas Gates” được thay đổi qua mỗi trang từ slide2.html đến slide6.html
slide2.html slide3.html slide4.html slide5.html slide6.html
slide2.jpg slide3.jpg slide4.jpg slide5.jpg slide6.jpg
If I Were a Rich
Man sung by
Thomas Gates
Matchmaker
(L:R) Karen
Unger, Rachel
Paulson, Lucy
Davis, Judy
French,
Catherine Lewis
Fiddler Cast #2
(Front Row):
Olivia Young,
Angela Unger
The Bottle
Dance (L:R)
Tim Lewis,
Paul Richtoven,
Peter Levin
Fiddler Full
Cast #1
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:
• 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
Bài 5:
Image Maps
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
Image Maps
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.
Logo 4 trang liên kết
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 element
Hint:
1. Create the HTML5 with and other tags.
2. Using and tags to create an auto complete list.
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)
<input type="text" name="txtName" value="" size="20" maxlength="20"
placeholder="Thanh Van">.
In additional, the autocomplete attribute specifies whether or not an input field should
have autocomplete enabled (autocomplete="on|off").
Bài 5:
The tag is new in HTML5. Using the tag to insert a video, such as a
movie clip or other video streams to a web page. Note that, currently, there are 3
supported video formats for the element: MP4, WebM, and Ogg.
