bài tập thực hành html

Trang 1

BÀI TAP THUC HANH HTML Bài 1.01: Tạo trang web cĩ nội dung là Bài tập sử dụng các tag co ban

Cy Cac tag co ban - Mozilla Firefox = |) lS

File Edit View History Bookmarks Tools Help "CC fy (|) file:///C:/Users/ 27 ~| |8]- Google P| K Ik £, Most Visited _| Getting Started «a Latest Headlines _ Các tag cơ bản + ~ Bài 01: Sứ dụng các tag cơ bản Yêu câu Thiết kế trang web cĩ nội dung như sau: Lập trình Web Chảo mừng các bạn đến với ngơn ngữ HTML | son — Yêu cầu thiết kế: Stt | Đối tượng Yêu cầu Hang số màu Trang web | - Tiêu đề cửa số: Sử dụng các tag cơ bản

2 |Nộidung |- Sử dụng các tag cơ bản để tạo trang web trên, trong đĩ:

trang web e Dong đầu tiên: Canh giữa

e Đọan văn bản ”Lập frình web ngơn ngữ HTML `: Canh giữa Hướng dẫn giải:

Stt | Đối tượng Hướng dẫn cài đặt

I | Trangweb |- Sử dung tag <title>

2

Nội dung | - Dong 1: Tag <h1> va thudc tinh (t.t) align để canh giữa trang web | Dong 2: Tag <h2> va t.t style(text-decoration) dé gach dudi

Dong 3: Tag <p> hoac <div> và t.t style(font-weight) dé in dam Doan van ban “Lap trinh web ngdn ngit HTML” : Tag <p> hoặc <div> va t.t align dé canh giữa, tag <br> đê xuơng dịng

Trang 2

Bài 1.02: Tạo trang web cĩ nội dung là Bài tập sử dụng các tag cơ bản, cĩ tơ màu cho các đoạn văn bản

@@› Các tag cơ bản - Thuộc tính định dạng - Mozilla Firefox Ls |S Km File Edit View History Bookmarks Tools Help

=> C¢ fy |.) file:///C:/Users/ThuyTien/De: Ơ7 -| 2Đ]- Google P| % IK] 2, Most Visited _| Getting Started a, Latest Headlines

_ Các tag cơ bản - Thuộc tính đ

Bài 02: Sứ dụng các tag cơ ban (tt)

Yêu câu:

Thiết kế trang web cĩ nội dung như sau:

MẸ ! Mẹ là cả một trời thương

Aẹ là cả một thiên đường trân gian

Cơng ơn cha mẹ tựa biên trời

Làm sao bảo hiểu hỡi người ơi?

Nếu chưa báo hiểu đừng bất hiếu

Bất hiểu làm ta khơ muơn đời |

Một đời vốn liêng mẹ trao Me cho tat cả mẹ nào giữ riêng

AMẹ hiên như một bà tiên

Mẹ theo con suốt hành trình con đi Done Yêu cầu thiêt ke: Stt | Đối tượng Yêu cầu Hang số màu Trang web | - Tiêu đề cửa số: Sử dụng các tag cơ bản

2 |Nộidung | Sử dụng các tag cơ bản và £huộc tính của các tag dé dinh

trang web | dang:

Dịng dau tiên: canh giữa, màu xanh lá mạ #006600

Dịng 2: màu xanh dương #0000FFE

Dịng 4 - tựa đề ”MẸ!”: chữ đậm cĩ màu hồng đậm và_ | ¿r:2299,

nền màu hồng nhạt #FECFFD

3 doan tho: in nghiêng, cĩ 3 màu chữ khác nhau Mỗi đọan cách nhau bởi 1 cây thước ngang

Tịan bộ bài thơ cĩ màu nên là màu vàng nhạt #FFFFCC

Trang 3

Hướng dẫn giải:

Stt | Đối tượng Yêu cầu

1 | Trang web | - Su dung tag <title>

2 |Nộidung | - Dong 1: Tag <h1> va tt align, style(color) để canh giữa và tơ màu chữ trang web | Dịng 2: Tag <h2> và t.t style(text-decoration;color) để gạch đưới và

tơ màu chữ

Dịng 3: Tag <p> hodc <div> va t.t style(font-weight) dé in dam Dong 4 - tua dé "ME!”: Tag <h2> va tt align, style(background-color; color; font-weight) dé t6 mau nén, mau chi va in dam

3 doan tho: Tag <div> va t.t align, style(font-style; background-color; color) dé canh gitta, in nghiêng, tơ màu nên, màu chữ; Tag <br> để xuơng dịng

Cây thước ngang: Tag <hr> và t.t width xác định độ rộng của cây thước

Bài 1:03: Tạo trang web cĩ nội dung là bài viết về Vạn Lý Trường Thành, cĩ định dạng trang web

File Edit View History Bookmarks Tools Help

(Se? SX @ Gi fle///C/User/ThuyTie/D ý -| |#Ÿ- Googie 2Ð] & kxị

& Most Visited _| Getting Started a, Latest Headlines

_ Dinh dang trang web [=> =

| Cơng ty du lịch Hồn Mỹ vừa giới thiệu tour mới khám phá đất nước Trung Hoa xinh | đẹp Điểm dừng chân đầu tiên là Bắc Kinh, chinh phục Vạn Lý Trường Thành đồ sộ | Dén Thập Tam Lăng nghe những câu chuyện huyền bí trong quá trình xây lăng cùng ¡ với lời nguyền của các thầy pháp xưa Tham quan'€uđg Điện Mùa Hè- nơi Từ Hy Thái

¡ Hậu cho "đào hồ, đắp núi, xây chùa"

Đặc biệt, du khách đến thăm quảng trường lớn nhất thế giới: Thiên An Mơn - nơi gây chấn động dư luận quốc tế một thời, ghé qua Cố Cung#- ðfÊu tượng của nền phong ¡ kiến lâu đời Mĩn vịt quay Bắc Kinh.sẽ làm cho du khách khĩ quên trong chuyến hành

| trinh

Ngồi ra, khách cịn được cham tay vào quO@G Bae Trung Fioa Tiép do, dén Thugng Hải để tham quan vườn Dự Viên với kiến ÄŒ hai hịa Rơi dạo quanh bến Thượng Hải | ngắm nhìn khu lầu Vạn Quốc.Bất ngờ hơiểu khách đi đường hầm xuyên qua sơng

| Hoang Phố

Đến Hàng Châu, nghe kể về sự tích các cây cầu "Cầu gãy mà khơng gay, cau dai ma khơng dài" — gắn liền với chuyện tương Sơn Bá, Chúc Anh Đài Du khách cĩ dịp mua sam thỏa thích từ quần áo, mỹ phẩn;đồ lưu điệm, đặc biệt là ngọc trai quý hiếm

Trung Hoa cổ kính, Trung Hoa hiện đại chắc chắn là điểm đến khĩ quên trong mùa

hè

Trang 4

Yêu câu thiêt kê:

Stt | Đối tượng Yêu cầu Hang so mau

1 | Trang web | - Tiêu để cửa sé: Dinh dang trang web

2 |Nộidung | Sử dụng các tag và fhuộc tính của tag đề định đạng

trang web | trang web:

- Định dạng chung:

e Nền: Màu nâu đất #A06D2I e Chữ: Màu trắng EFEFFE

e Hình nền: Đặt giữa trang và khơng di chuyển

khi cuộn trang - Dịng đầu tiên: Canh giữa, màu vàng đậm #FEFCC00 Hướng dẫn giải:

I | Trang web - Su dung tag <title>

2 | Noi dung - Dinh dang chung: Tag <body> va t.t style( background-color; color; trang web background-image; background-position; background-repeat ) dé dinh

dang mau nền, màu chữ, hình nền và vị trí hình nền

- Dịng dầu tiên: Tag <h2> và t.t align, style(color) để canh giữa và tơ mau chi Bài 1.04: Tạo trang web cĩ nội dung là bài viết vé Lau dai g6 6 Pattaya, co dinh dang trang web 4 =

Lau dai g6 @ Pattaya

Nam trén mot doi dat nhé & phia Bac be bién Pattaya, toa lau dai Prasat Sajjatham, tam dịch là “Ngơi đèn chân ý” Ế The Sanctuary oƒ Truth) khơng những là một phiên bản

ồn hảo của nghệ thuật kiến trúc cơ mà cịn là một mình chứng cho sự sáng tạo của Tà, nghệ thuật hiện đại Thái Lan

Lau dai Sajjatham được khởi cơng vảo ngày 13-§-19§1 xuất phát từ ý tưởng của một nhà tỷ phú

Thái Lan — ơng Lek Viriyaphan, chủ nhân Cơng ty Mơ tơ Thonburi và Cơng ty Bao hiểm Viriya

“Ngơi đền chân lý” cĩ chiêu cao 105m, chiêu dai 100m, diện tích bên trong lâu đài là 2.1 1 5m2

cịn điện tích toản bộ khu vực là 12,Sha._ Nĩ được phân thành 4 cánh (chát) hướng ra 4 phía, mơi cánh được thiết kế theo một kiêu kiến trúc khác nhau Một cánh làm ta nhớ đến kiều kiến trúc hồnh tráng của Angkor Wat, trong khi một cánh khác được thiết ké theo “m6 tip” Trung Hoa

Trang 5

Yêu câu thiêt ke:

Stt | Đối tượng Yêu cầu Hang so mau

1 | Trang web | - Tiêu đề cửa số: Định dạng trang web

2 |Nộidung | Sử dụng các tag và thuộc tính của tag để định dạng

trang web | trang web:

- Dinh dang chung:

e Nền: Tơ đây trang bằng hình ảnh

e Chữ: Màu xanh ve chai đậm #008888

- Dịng dầu tiên: Khơ chữ lớn và canh giữa

- Doan van ban thứ hai: nền màu xanh ve chai, chữ | ¿339999,JSSĐ trắng 1n đậm và nghiêng Hướng dẫn giai: Stt Đối tượng Hướng dẫn cài đặt 1 Trang web | - Su dung tag <title> 2

Nội dung | - Dinh dang chung: Tag <body> va t.t style(color; background-image; trang web background-repeat; background-attachment ) đê định dạng màu chữ,

hình nên

- Dịng dầu tiên: Tag <h2> và t.t align đề canh giữa

- Doan van ban thir hai: Tag <p> va t.t style(background-color; color; font-weight; font-style) Bài 1.05: Tạo trang web cĩ nội dung được định dạng theo nhiều hình thức Định dạng văn bản

Hĩa học: Vước: H.O ; Axit Sunfuric: H;SO,

Toéan hoc: Phicong trinh bac 2: ax“ + bx + c= 0 Tin hoc: Vong lap For:

For i= 0 To 10

Tong = Tong + i

Yêu câu thiêt ke: Stt | Đối tượng Yêu cầu Hang số màu

1 | Trangweb |- Tiêu đề cửa sé: Dinh dang van ban

2 | Nội dung Sử dụng các ứag định dạng văn bản để tạo trang web: trang web - Định dạng như hình trên

- Dạng cơng thức hĩa học và biểu thức phương trình bậc | #FF0000 hai, cĩ chữ màu đỏ

Đoan code vịng lặp For: chữ màu xanh dương đậm, #0000CC,

nên màu xám, cĩ định dạng canh lề #CCCCCC Hướng dẫn siải:

I | Trangweb |- Su dung tag <title>

2 |Nộidung | - Dịng dầu tiên: Tag <h2> và t.t align để canh giữa

trang web Dung tag <b>, <u> dé dinh dạng các cụm từ 1n đậm và gạch dưới Dùng tag <i> để định dạng các cụm từ in nghiêng

Dùng tag <font> và t.t color để tơ màu chữ đỏ cho các cơng thức hĩa học và phương trình

- Dùng tag <sub> và <sup> dé in các cơng thức hĩa học và phương

trình

- Dùng tag <pre> đề canh lề cho vịng lặp for và t.t style(background- color; color) để tơ màu nền và màu chữ

Trang 7

Bài 1.06: Tạo trang web cĩ nội dung là bài viết về Thượng Hải, được định dạng theo nhiều hình

thức

| a

THUONG HAI

TUONG LAI CUA TRUNG HOA HIEN DAI

K thê so sánh với Bắc Kính, Tây An về chiêu sâu văn hĩa hay bê dây lịch sư, Thượng Hải hấp dẫn du khách bởi một khía cạnh khác: điềm nĩng nhất của Trung Hoa

hiện đại

Bên Thượng Hải

1 sự kết hợp hài hịa một cách kỳ lạ giữa Liverpool và Mlahattan những năm 1920,

con phố ấn tượng nhất ở Thượng Hai la Trung Son 16, người phương Tây quen gọi là Bund _cịn người Việt Nam gọi là Bến Thượng Hiái Xưa kia, đây chính là trung tầm náo nhiệt

nhat cua Thượng Hai, là khu tơ giới bị tranh châp đữ dội nhât của ba nước Anh, Nhật, Mỹ

Yêu câu thiết kê:

Một bên là sơng Hồng Phĩ, bên kia là những cơng trình kiến trúc theo lối Tây phương -

.cũng chính là trung tầm kinh tế đầu não của thành phố nảy a Stt Đối tượng Yéu cau Hang s On mau Trang web - Tiéu đê cửa sơ: Định dạng văn ban Nội dung trang web dang dé tao trang web: Sử dụng các fag định dạng văn bản và các thuộc tính định - Định dạng như hình trên

- Đọan văn đầu: canh lề trái

- Dịng Bén Thuong Hai: canh lề phải, sỉize=20px

- Đọan văn cuơi: canh lê phải Hướng dẫn giải:

I | Trangweb | - Sử dụng tag <tile>

2 | Ndi dung - Tiéu dé: Tag <h2> va t.t align, style (color; border) trang web - Doan van dau: Tag <font> va t.t face, size, color

-_ ”Điểm nĩng nhất của Trung Hoa hién dai” : Tag <u> va <b> - Dong Bén Thuong Hai: Tag <p> va t.t align, style (background-

color;color;font-weight;font-size)

- Doan cudi: Tag <p> và t.t align, tag <font> va t.t face, size, color, style(background-color), tag <i>, <b>

Trang 8

Bài 1.07: Tạo trang web cĩ nội dung là thơng tin về Cơng ty Hoa tươi Nhân Ái, được định dạng theo

nhiều hình thức

Yêu cầu thiết kế:

Cơng ty Hoa tươi Nhân Ái

1

» Thanh lap ngay 25/05/2007

= Chuyén cung cap các lọai hoa tươi

m Cĩ trên 20 cưa hàng bản le tại TP.HCM = Nhận kết gio hoa theo yêu cầu của khách hàng

2

5 Điện thoai §4-0§-§3Š1056

o Diach: 227 Nguyên Văn Cừ, Quận 3, TP.HCM

- Định dạng như hình trên

- Khi nhấn chuột vào dong ’Trung Tâm Tin Học ” : MG trang web cua TTTH — http://www.csc.hcmuns.edu.vn Stt | Đối tượng Yêu cầu Hang số màu 1 | Trang web | - Tiêu đề cửa SỐ: Ký tự đặc biệt, chèn hình ảnh, tạo danh sách và liên kêt

2 | Noi dung Sử dụng các fà định dạng và các thuộc tính định dạng

trang web | để tạo trang web: Hướng dẫn giải:

I | Trang web | - Su dung tag <title>

2 |Nộidung | - Tiéu dé: Tag <h2> va tt align, style (color)

trang web | - Hinh: Tag <img> va tt src, height va align

Trang 9

Bài 1.0§: Tạo trang web cĩ nội dung là danh sách các mĩn ăn ngon của Hà Nội a zZ fr ` ˆ^eo«e Cac mon ngon Hà Nĩi STT Tên mĩn ăn 1 |Bánh cuốn Thanh Trì 2 |Xoi Ha Noi 3 |Chaca La Vong 4 |Cháo Coc

5 |Banh Gai Ninh Giang 6 |Bun Thang Ha Noi

7 |Canh Lang

§ |Vit quay lang Son

Ma Yêu cầu thiết kế:

Stt | Đối tượng Yêu cầu Hằng số màu

1 | Trang web | - Tiêu đề cửa số: Tạo bảng

2 |Nộidung |- Nền màu vỏ hột gà #FFEDCA

trangw€Ð |_ Hình ảnh: Canh trái - Bảng biểu: e Dịng tiêu đề: Nền màu nâu đất và chữ màu #CC6600, trang EFFEFFE e Màu nên xen kẽ giữa các dịng là màu trắngvà | #FFFFFF, màu vỏ hột gà #FFEDCA Hướng dẫn giải: Stt | Đối tượng Hướng dẫn cài đặt I | Trang web | - Su dung tag <title>

2 |Nộidung | - Mau nén: Tag <body> va t.t color

trang web Hinh anh: Tag <img> va t.t src, width, height, align Tiéu dé: Tag <h1> va t.t align, style (color)

Bang biéu: Tag <table> va t.t width, border, bordercolor, cellpadding, cellspacing, style(border-collapse)

e Dong tiéu dé: Tag <th> va tt bgcolor

e Dung tag <tr>, <td> va t.t align, width, bgcolor dé vé dong va cét

Trang 10

Bài 1.09: Tạo trang web cĩ nội dung là chương trình học của ngành Lập trình Chương trình học - ngành lập trình Số tiết Lý thuyết Thực hành Hệ điều hanh Windows | 3 | 5 Sử dụng Internet _ | 3 | 5 I Soan thao van ban voi MS Word | 40

Tin học vấn phịng Tạo bài trình diễn với MS PowerPoint 9 15

Xử lý số liệu với MS Excel ibe 40 Tao trang Web vdi MS FrontPage _ 9 15

II Nhập mơn lập trình | 36 | 60

Kỹ thuật lập trình (VB.NET) Kỹ thuật lập trình 36 60

Stt |_ Đối tượng Yêu cầu Hằng số màu

1 | Trang web - Tiêu đề cửa số: Tạo bảng, trộn dịng và cột 2 | Nộidung - Font chữ là Tahoma và cĩ kích thước là 12px

trang web - Bảng biểu: gồm 11 dịng và 4 cột + Dịng tiêu đề: nền màu đỏ bầm, chữ trắng #+CC0033;011103108 + Trình bảy bảng biểu như hình trên Hướng dẫn øsiải:

1 Trang web_ | - Sử dụng tag <title>

2 | Noi dung - Font chit va kich thudc: Dung t.t style(font-family, font-size) cua tag

trang web <body>

- Bang biéu: Tag <table> va t.t width, border, bordercolor, cellpadding, cellspacing, align va style(border-collapse)

+ Dong tiéu dé: Tag <tr> va t.t align, bgcolor, style(color; font-weight) e O dau: Tag <td> va t.t width, rowspan

e O thir 2: Tag <td> va t.t rowspan e O thir 3: Tag <td> va t.t colspan + Dong 2: Tag <tr> va <td> vé 2 6 + Dong 3: Tag <tr>

e O dau: Tag <td> và t.t rowspan, valign, align, style(color) e 3 6 cudi: Tag <td> tt align

+ Tir dong thir 4 dén 8: Ding tag <td> vé 3 6 + Dịng 9 và 10: Giống dịng 3 và 4

+ Dong 11: Tag <td> vé 1 ơ và t.t colspan dé trộn thành 1 cột

Trang 11

Bài 1.10: Tạo trang web cĩ nội dung là chương trình khuyến mãi dầu gội Double Rich Cơng nghệ dâu gội dưỡng tĩc mới Tĩa sáng cùng DOUBLE RICH ^ˆ 1 al

¬ San phâm khuyên mãi :

« Dân goi Double Rich moi 200ml, 400ml co tem 1 Giải khuyén khích : Khách hàng đơi quả tại các khuyên mãi

¬ Đơi tượng tham gia :

e Áp dụng cho tất cả người tiêu đùng cuối củng mua mã vạch trên mỗi chai dầu gội cĩ khuyến mãi và

sản phâm khuyến mãi gơi kèm phiêu trúng thương về văn phịng cơng ty, e Chương trình khơng áp dụng cho nhân viên, nhà han chot den hết ngày 31/07/2005 (căn cứ theo

phân phối bao gồm các tơng đại lý đại lý, cửa dau bưu điện nơi gơi) Sau đĩ cơng ty sẽ gơi thư

hàng bán sĩ, le và các cá nhân kinh doanh sản thong bao trúng thương và cách thức nhận quả cho pham cua cong ty LDMP LG Vina, cong ty quang khach hang

cao, cong ty lam dich vu chương trình khuyên mai nảy, nhân viên siêu thị _ Cách thức nhận giải : cưa hàng bán le trên tồn quốc băt đâu Bắt đầu từ ngày 15/06/2005 đến 17h ngày 12/08/2005 hw Gidi dac biét, nhat, nhi : khach hang cat phan Yêu cầu thiết kế:

Trang 12

Hướng dẫn giải:

I | Trangweb |- Su dung tag <title>

2 |Nộidung |- Bảng biểu: Tag <table> và t.t align, width, bordercolor trang web - Dong 1: Tag <tr>

e O dau: Tag <td> va t.t colspan, style(background-color; color; font-weight; font-size: 20px), align

- Dong 3: Tag <tr> va <td> va t.t colspan, style(color; background- color; font-weight; font-size: 28px), align

- Dong 4: Tag <tr>

e O1, 2: Tag <td> va t.t colspan, valign

e_ ”Sản phẩm khuyến mãi”, "Đối tượng tham gia” và ”Cách thức nhận giải”: Tag <ƒont> và t.t style(color; font-weight; font- size: 18px) e Cac doan van ban con lai: Tag <ul>, <li>, <ol>, <b> va <i> Bài 1.11: Tạo trang web Đăng nhập a] 2Ï Đăng nhập Đăng nhập Mã người dùng: |ptnhung

Mã người dùng: |ptnhung Mật khẩu: ‘sissies

Mat khâu: |se «e

Đồng ý | > ptnhung

Za be

1 | Trangweb |- Tiêu đề cửa số: Tạo form và các điều khiến trên form

2 |Nộidung |- Tạo form

trangweb |_ Tạo table trong form

- Tạo 2 diéu khién (d.k) Text Fields va nut Button

- Tạo đ.k nhãn dùng để xuất nội dung Ä⁄Z người dùng

Yêu câu xử lý:

Trang 13

Stt | Đối tượng Yêu cầu xử lý chức năng Ghỉ chú 1 | Nút Đồng y - Khi chọn: Xuât nội dung ơ Mã người đùng ra diéu khién nhãn Hướng dẫn øiải:

Stt | Đối tượng Thiết kế

I |Trangweb |- Sử dụng tag <ttle>

2 | Nội dung - Tao form: Tag <form> va t.t id

trang web - Tao table trong form, gồm 4 dịng 2 cột: Tag <table> và các t.t

- Tao 2 diéu khién Text Fields: Tag <input> va t.t type (text, password),

id

- Tao nut Button: Tag <input> va t.t type (button), id, value - Tạo điều khiển nhãn: Tag <div> và t.t id

Xử lý chức năng

1 | Nut Ding ý

- Dung sy kién onClick cia diéu khién nit Button

- Dùng t.t innerText của đ.k nhãn va t.t value của đ.k Mã ngươi dùng Bài 1.12: Tạo trang web Phiếu đăng ký tham gia trương trình khuyến mãi —_ Phiêu đăng ký tham gia chương trình khuyến mãi

Họ và tên |Nguyễn Ngọc Quỳnh Nga

Trang 14

Yêu câu thiêt ke:

1 | Trangweb |- Tiêu đề cửa số: Tạo form và các điều khiển 2 |Noidung |- Tạo form

trang web |_ Tao table trong form

- Tao cdc diéu khién Text Fields, Radio, Drop-down box va nut Button

- Ð.k Nghệ nghiệp cĩ danh sách như Bac si _ Giáo viên sau; Khác - Tạo điều khiển nhãn dùng để in câu thơng báo “Bạn đã đăng ký thành cơng!!!” Yêu cầu xử lý: Stt | Đối tượng Yêu cầu xử lý chức năng Ghỉ chú 1 | Nút Đồng Khi chọn: Xuất nội dung câu thơng báo y Hướng dẫn giải:

I | Trang web Sử dụng tag <title>

2 |Nộidung Tao form: Tag <form> va t.t id

trang web Tao table trong form, g6m 9 dong 2 cét: Tag <table> va cac t.t Tao diéu khién: Tag <input>

e Text Fields: t.t type (text), id, size

e Radio buttons: t.t type(radio), name, id, value va checked e Button: Tag <input> va t.t type (button), id, value

D.k Dropdown-box Nghé nghiép: Tag <select> va t.t id, tag <option> va t.t value

D.k Dropdown-box Chon san pham tham gia: Tag <select> va t.t id, size=4, multiple; Tag <option> va t.t value, selected

Tạo điều khiển nhãn: Tag <div> va t.t id

1 | Nút Đồng ý

Dùng sự kiện onClick của điều khiển nút Button

Dùng t.t inner Text của đ.k nhãn

Trang 15

Bài 1.13: Tạo trang web cho phép người dùng điền thơng tin vào phiếu Đăng ký du lịch Bi Đăng ký du lịch

Họ vả tên |Pham Ngọc Câm Đảo Dia chi |227 Nguyễn Văn Cừ Điện thoại |8351056

Khách Việt Nam |

Chọn tour | Buơn mê thuột - Gia lai - Xontum xị

Phương tiện C Máy bay ® Xe ơtơ r.$6 lượng đồn khách Người lớn le Tre em [4 Se Cĩ 2 trẻ em dưới 6 tuổi 4] Ghi chú thêm Cĩ 2 người ăn chay x | Đồng ý | Bạn đã đăng ký thành cơng!!! A

Yéu cau thiét ké:

Stt | Déi tượng Yêu cầu Hang số màu

1 | Trangweb |- Tiêu đề cửa số: Tạo form và các điều khiển 2 |Nộidung |- Tạo form

trang web |_ Tao table trong form

- Tao cac diéu khién Text Fields, Checkbox, Radio, Drop-down box, OptionGroup, Textarea va nut

Button

- Điêu khiên Chon fouz cĩ danh sách như sau:

| Buơn mê thuột - Gia lai - Kontum *| Miên Bắc

Hạ Nội - Hạ Long - Sapa Hạ Nội - Chùa Hương - Ninh Đình

Trang 16

Hướng dẫn giải: Stt Đối tượng Thiết kế 1 Trang web Sử dụng tag <title> 2 Nội dung

trang web Tạo form: Tag <form> va t.t id Tạo table trong form, gồm 10 dịng 2 cột: Tag <table> và các t.t Tạo điều khiển: Tag <input>

e Text Fields: t.t type (text), id, size

e Checkedboxes: t.t type (text), id, checked

e Radio buttons: t.t type(radio), name, id, value va checked e Button: Tag <input> va t.t type (button), id, value

D.k Dropdown-box Chon tour: Tag <select> va t.t id, tag <optgroup> va t.t label , tag <option> va t.t value

Đ.k OptionGroup Số lượng địan khách: Tag <fieldset> và t.t style(border,; width:350px; height:55px" Tag <legend> va t.t align, style(font-style; color> dé tao nhan

D.k Ghi chu: Tag <textarea> va t.t id, style(width:300px)

Tao diéu khién nhan: Tag <div> va tt id

Nút Đồng ý Dung su kién onClick cua diéu khién nit Button

Dung t.t innerText cua d.k nhan

Bài 14: Tạo trang web xem nội dung các bài tập về ngơn ngữ HTML Tạo trang tiêu đề: Tieude.html

Bài tap NGON NGU HTML

Yéu cau thiét ké:

I |Nộidung |- Nền màu xanh dương đậm | #003399

trang web |_ Chữ màu trắng #FFFFFF

Trang 17

Tạo trang thực don: Thucdon.html

= Bai 01 - Cac tag co ban

= Bai 02 - Cac tag cơ bản cĩ định dang

= Bai 03 - Dinh dang trang web

= Bai 04 - Dinh dang trang web(tt) m Bai 05 - Định dạng văn bản

= Bai 06 - Dinh dang van ban(tt)

m Bài 07 - Hình ảnh liên kết danh sách và ký tư đặc biệt

m Bai 08 - Tạo bảng

m Bài 09 - Tạo bảng cĩ trộn dịng và cột

= Bai 10 - Tao bang co tr6n dong va cét(tt)

= Bai 11 - Tao form va cac diéu khién = Bai 12 - Tao form và các điều khién(tt)

= Bai 13 - Tao form va cac diéu khién(tt) Yêu cầu thiết kế:

I1 |Nộidung | - Trang web: Nền màu xanh đa trời #DEFOFA

trang web

- Tạo một danh sách là tiêu đề các bài tập, mỗi

dịng liên kết đến trang web bài tập tương ứng

Tạo trang chủ:

m Bai0l - Các tà cơ bản s Bai 02 - Cac tag co bản cĩ

dinh dang

Bai 03 - Dinh dang trang web Bai 04 - Dinh dang trang web (tt)

s Bai 05 - Dinh dang van ban

s Bai 06 - Dinh dang van ban(tt)

Bài 07 - Hình ảnh liên kết

danh sách và ký tự đặc biệt

» Bai 08 - Tao bang

Trang 18

Yêu câu thiêt ke: Stt | Đối tượng Yêu cầu Hang số màu Trang web | - Tiêu đê cửa sơ: Tạo frame

2 |Nộidung |- Tạo 3 frame, trong đĩ:

trang web e Frame đầu: Chứa trang Tieude.html

e Frame bén trai: Chita trang Thucdon.html

e Frame bén phai: Thé hién n6i dung trang tuong ứng với thực đơn được chọn Mặc định là trang Bai 2.1.html Hướng dẫn giải: Trang thực đơn:

I |Nộidung |- Tạo danh sách: Tag <ul> và <li>

trang web |_ Tạo liên kết: Tag <a> và t.t href, target dé xác định khung chứa trang

web liên kêt Trang chủ: Stt Đối Thiết kế tượng 1 | Trang - Sử dung tag <title> web

2 |Nộidung |- Tag <ameset> và t.t rows=”15%,*” để chia 2 khung chính

trang web e Khung tiéu dé: Tag <frame> va t.t src="Tieude.html", noresize

e Khung nội dung

- _ Khung nội dung: Chia lam 2 khung con, tag <frameset>va t.t rows="*",

cols="31%,*"

e Khung thyc don: Tag <frame> va t.t srce="Thucdon.html", noresize

e Khung chứa trang liên kết: Tag <fame> và t.t src="Bai 1.1.html" name="showframe"

Trang 19

Bài 1.15: Tạo trang web xem nội dung các bài tập về ngơn ngữ HTML

Bai tap NGON NGU HTML

= Bai Ol - Cac tag co ban x + r 2

s Bai 02 - Cic tag co bin, c6 Bài 01: Sử dụng các tag co ban đỉnh dạng

= Bai 03 - Dinh dang trang web = Bai 04 - Dinh dang trang web

(tt) a pict

= Bai 05 - Dinh dang van ban Thiet ke trang web co noi dung nhw sau: = Bai 06 - Dinh dang van ban(tt)

=» Bai 07 - Hinh anh lién két, Lap trinh Web

danh sách và ký tự đặc biệt Chào mừng các bạn đên với ngơn ngữ HTML m Bài 08 - Tạo bảng = Bai 09 - Tao bang co tron dong va cot m Bài l0 - Tao bang co tron dong va cot(tt) s Bai 11 - Tạo form và các điều khién

lÌ Bài 12 - Tạo form và các điêu

lÍ» Bài 13 - Tạo form và các điêu Yeu cau Yêu cầu thiết kế: Stt | Đối tượng Yêu cầu Hằng số màu I | Trangweb |- Tiêu đê ctta so: Tao iframe

2 |Nộidung |- Tạo 1 table chứa nội dung trên, trong đĩ:

trang web e Ơ đầu: Chứa nội dung tiêu đề

e_ Ơ bên trái: Chứa thực đơn bài tập mỗi dịng liên

kết đến trang web bài tập tương ứng

e _ Ơ bên phải: Thể hiện nội dung các trang tương

ứng với thực đơn được chọn Mặc định là trang Bai 2.1.html Yêu cầu xử lý: Stt | Đối tượng Yêu cầu Ghỉ chú

I1 |Thựcđơn |- Khi chọn: Thể hiện nội dung trang web tương ứng

bài tập trong ơ bên phải Hướng dẫn giai:

I | Trang web - Su dung tag <title>

2 | Noi dung - Tao table gdm 2 dịng, 2 cột

trang web O bén trai: Tag <a> va tt href, target

Ơ bên phải: Tag <iframe> và t.t src="Bai 2.1.html", width, height, name

Trang 20

Bài 1.16: Tạo trang web cĩ nội dung là các chuyên mục thắc mắc 2 Cái gì? Ở đâu? o Tỉnh yêu và gia định o Sức khỏe o Dulich o Âm thực ø Âm nhạc Trau cau

Tỉnh yêu là gì? Là ta yêu một người mỗi ngảy trong một năm MIơi năm trong một đời người

Xây dựng hạnh phúc gia đình qua những bữa cơm hàng ngày

Nĩi đến hạnh phúc gia đình chúng ta thường mơ ta băng những từ thật đẹp đẽ và được thê hiện qua những giá trị đạo đức rất đáng

tran trong như tình yêu, lịng chung thuỷ, tình nghĩa vợ chỏng lịng

=~ yéu thong, hy sinh cho con cái, sự quỷ trọng, hiéu dé của con cháu với cha mẹ, ơng bà

Sức khỏe

10 lời khuyên trong định dưỡng

Cơ thê chúng ta cân nhiêu chất định đưỡng từ nhiều nguồn lương

thực khác nhau Vì vậy chúng ta nên thay đơi các loại lrơng thực

khác nhau Chúng ta khơng cần kiêng chi ca - quan trọng là chú ¥

đến số lượng

Làm sao để bỏ thuốc lá? -

_ Sức khoe cua chính bạn Khơng hút thuốc lá tức là giảm thiêu đáng ` kê rủi ro mặc các loại bệnh ung thư và sức khoẻ sẽ tăng lên đáng

À- kê so với khi cịn hút thuốc Về đầu trang Du lịch Các tour mới nhất

Con Minh - Dai Lý - Lệ Giang ° Den Macau xem casino e Ve Ca mau ăn tơm tít

Các điểm du lịch nồi tiếng trên thé giới

Dao Bali xinh dep - Indonexia

e Thanh co Rome va thap nghiéng Pisa

e Vạn Lý Trường Thành

= Các mĩn ăn mới trong tuần

s Chuyên mục đạy nâu ăn

" Mon ngon Hà Nội

=» Cac mon an dan da ở miền Tây

Nhac thiéu nhi

a

Trang 21

Y nghia Yêu câu thiêt kê: Stt |_ Đối tượng Yêu cầu Hang số màu 1 | Trang web - Tiêu đề cửa số: Bài tập tổng hợp

2 | Nội dung - Tạo 1 table chứa nội dung trên, trong đĩ:

trang web + Dịng đầu: Chứa nội dung tiêu đề và hình ảnh

+ _ Ơ bên trái: Chứa thực đơn các chuyên mục, mỗi dịng liên

kết đến mục tương ứng với các ơ bên phải

+ Ơ bên phải: Thể hiện các nội dung chỉ tiết của từng chuyên mục

Yêu cầu xử lý:

Stt Đối tượng Yêu cầu Ghi chú

1 Thực đơn các - Khi chọn, di chuyển đến mục tương ứng trong ơ bên phải chuyên mục 2 Về đầu trang - Khi chọn, đi chuyển về đầu trang web Hướng dẫn giải:

1 Trang web - Sử dụng tag <title>

2 Nội dung - Tạo table gồm 15 dong, 2 cột

trang web - Dong dau: Tag <img> va tt sre, align, style="z-index:-1; position:absolute" Tag <a> và

t.t name="#vedau" dé danh dau vi tri dau trang

- O bén trai: Tag <a> va tt href

- Ơ bên phải:

+ Các dịng tiêu đề của chuyên mục ta dùng <a> và t.t name để khai báo tên chuyên mục

+ Nội dung chi tiết: tag <img>, <font>, <ul>, <li> + ”Vé dau trang’: tag <a> va t.t href

Định dạng
Số trang	21
Dung lượng	4,85 MB