Bài tập tuần 1, 2, 3 môn Lập trình web

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.

Trang 1

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

Trang 2

Bước 4: Mở trình duyệt (Chrome, IE), Mở trang html

Các tag cơ bản:

1 <html></html>

2 <title> nội dung tiêu đề </title>: Hiển thị nội dung

tiêu đề của trang web trên thanh tiêu đề của trình

6 <br>: xuống dòng chưa hết đoạn Shift Enter

7 <b></b>, <i></i>, <u></u>: in đậm, in nghiêng, gạch chân text

8 <hr>: thêm đường kẻ ngang

9 <FONT Face=“fontName1, fontName2, fontName3”

size=“value” color=“rrggbb”> Nội dung hiển

thị</FONT>: đị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 <sub> Nội dung</sub>: nội dung văn bản hạ xuống

12 <sup> Nội dung </sup> nội dung văn bản lên cao

13 <ol> : Tạo danh sách có thứ tự

Trang 3

15 <dl>: Tạo danh sách dạng từ điển

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ư <img>, <h1>, <h2>, <b>, <u>, <i>,

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ự <ol>, <ul>, các ký tự đặc biệt

thư mục Module1/demo

Trang 4

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 <dl> <dt> <dd>

Trang 5

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)

Trang 6

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 <hn>, <ul>, <hr> , <img>, <a> 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:

Trang 7

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

Trang 8

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:

Trang 9

• 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

Trang 10

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:

Trang 11

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

<Table> và thuộc tính rowspan, colspan

Trang 12

Bài 2: Thiết kế trang web The Gargoyle.html, sử dụng dữ liệu trong

Module3/bai2.txt sử dụng <Table> lồng nhau

Bài 3: Tạo trang Dunston.html, sử dụng dữ liệu trong Module3/bai3.txt, sử dụng

<table> lồng nhau,

Trang 14

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

Trang 15

Bài 2:

Thiết kế website Doccentric.hmtl, hình ảnh và dữ liệu trong thư mục Module4\bai2

Trang 17

Bài 3:

Thiết kế trang travelreport.html:

Trang 18

Bài 4:

Thiết kế trang Register.html

Trang 19

HTML5:

Bài 1:

Create a webpage in order to define additional details that the user can view or hide

Hint:

Trang 20

Bài 2:

Create an Autocomplete List with an <input> and the new <datalist> element

Hint:

1 Create the HTML5 with <!DOCTYPE html> and other tags

2 Using <input> and <datalist> tags to create an auto complete list

Bài 3:

Using the <required> 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)

Trang 21

Trang 22

In additional, the autocomplete attribute specifies whether or not an input field should

have autocomplete enabled (autocomplete="on|off")

Bài 5:

The <video> tag is new in HTML5 Using the <video> 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 <video> element: MP4, WebM, and Ogg

Định dạng
Số trang	23
Dung lượng	2,93 MB