Tài liệu Bài tập tuần 1, 2, 3 môn Lập trình web nhằm giúp học viên 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. Mời các bạn cùng tham khảo nội dung chi tiết tài liệu. Hi vọng tài liệu sẽ là nguồn tư liệu bổ ích cho các bạn đang theo học học phần này.
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õ áp dụng cách làm việc ứng dụng web Xây dựng trang web dùng mã HTML Yêu cầu: Tất tập lưu thư mục: T:\MaSV_HoTen\Tuan010203\ Trong thư mục Tuan010203 có 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 buổi thực hành, SV phải nén (.rar zip) thư mục làm nộp lại tập thực buổi Bài tập bắt buộc Tuần 01, 02, 03, GV công bố cuối Bài tập bắt buộc gửi vào email dtthuha79@gmail.com với Subject tập tin nén kèm theo: DHCNTT9A_LTWeb_TUANYY_HOTENSINHVIEN (trong YY 01) MODULE 1: CÁC TAG CƠ BẢN Mục đích: - Sử dụng Web editor soạn thảo We page đơn giản - Sử dụng thành thạo tag bản, 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 bản: nội dung tiêu đề : Hiển thị nội dung tiêu đề trang web tiêu đề trình duyệt … nội dung header : Tiêu đề: ngắt đoạn Enter : xuống dòng chưa hết đoạn Shift Enter , , : in đậm, in nghiêng, gạch chân text : thêm đường kẻ ngang Nội dung hiển thị: định dạng font chữ 10 : chèn hình vào Web page 11 Nội dung: nội dung văn hạ xuống 12 Nội dung nội dung văn lên cao 13
- : Tạo danh sách có thứ tự
- …
- … …
- : Tạo danh sách khơng có thứ tự
- …
- … …
, , , , Bài 2: Tạo trang torte.html, hình ảnh liệu thư mục Module1/bai2.txt sử dụng tag bản, thực việc tạo danh sách có thứ tự
- ,
- , ký tự đặc biệt thư mục Module1/demo Bài 3: Tạo trang Macbeth.html, hình ảnh liệu thư mục Module1/bai3.txt sử dụng tag bản, thực việc tạo danh sách dạng từ vựng MODULE 2: LINKS – IMAGES - MAPS Mục tiêu: - Thực tạo trang web với tag module Thực liên kết trang trang web với (liên kết nội, ngoại) Chèn hình ảnh sử dụng liên kết phần hình ảnh (images map) Bài 1: Tạo trang web Resume.html, liệu hình thư mục Module1/bai1.txt Sử dụng tag ,
- , , , 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 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 trang: Nội dung trang Refer.html Comments.html sau: ế Bài 2: (image links) Home Home.html: Slide1 html Slide2 html Slide3 html Slide4 html Trang home.html tạo liên kết slide show liên kết đến slide1.html Slide5 html Slide6 html Trên trang slide1.html 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 slide1.jpg: “Do You Love Me? sung by Deb Ingalls and Thomas Gates” thay đổi qua trang từ slide2.html đến slide6.html slide2.html slide2.jpg If I Were a Rich Man sung by Thomas Gates slide3.html slide3.jpg Matchmaker (L:R) Karen Unger, Rachel Paulson, Lucy Davis, Judy French, Catherine Lewis 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 slide6.html slide6.jpg Fiddler Full Cast #1 Bài 3: image maps Tạo trang web Expo.html hình mẫu bên dưới, liệu thư mục Module2\bai3.txt Với yêu cầu liên kết sau: • • • Bryd Hall (Text Image Maps) liên kết đến trang Bryd.html Mitchell Theatre (Text Image Maps) liên kết đến trang Mitchell.html Astronomy Classrooms (Text Image Maps) liên kết trang Brinkman.html Image Maps Bài 4: Tạo trang web Jaction.html, file liên kết liệu thư mục Module2\bai4.txt Image Maps Bài 5: Tạo website SFSF.html, sử dụng liệu hình thư mục Module2\bai5.txt Image Maps • • • 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, liệu hình thư mục Module2\bai6.txt Image map cho hình ảnh với phần liên kết sau: • Breakfast trỏ đến Breakfast.html • Lunch trỏ đến Lunch.html • Dinner trỏ đến Dinner.html Thực định dạng tương tự cho trang Lunch.html Dinner.html MODULE 3: TABLE Mục tiêu: - Tạo trang web chứa bảng nội dung - Sử dụng table định dạng bố cục cho số trang đơn giản Bài 1: Table Tạo lại trang MAA1.html, sử dụng liệu Module3/bai1.txt, sử dụng thuộc tính rowspan, colspan Bài 2: Thiết kế trang web The Gargoyle.html, sử dụng liệu Module3/bai2.txt sử dụng lồng Bài 3: Tạo trang Dunston.html, sử dụng liệu Module3/bai3.txt, sử dụng lồng nhau, MODULE 4: Layout HTML5 Mục tiêu: Sử dụng thành phần (header, section, aside, nav, footer) HTML5 thiết lập layout website sau: Bài 1: Tạo 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 liệu thư mục Module4\bai2 Logo trang liên kết Image Maps Trong liên kết hình cho hotspot: Bài 3: Thiết kế website Travel Scotland.html Dữ liệu hình 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: Create the HTML5 with and other tags 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) 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 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 supported video formats for the element: MP4, WebM, and Ogg ... tính rowspan, colspan Bài 2: Thiết kế trang web The Gargoyle.html, sử dụng liệu Module3/bai2.txt sử dụng lồng Bài 3: Tạo trang Dunston.html, sử dụng liệu Module3/bai3.txt, sử dụng ... Module4ai3 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:... Diamond.html Eldorado.html Bài 2: Thiết kế website Doccentric.hmtl, hình ảnh liệu thư mục Module4ai2 Logo trang liên kết Image Maps Trong liên kết hình cho hotspot: Bài 3: Thiết kế website Travel Scotland.html