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

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 File Edit View History Bookmarks Tools Help màu Trang web | - Tiêu đề cửa số: Sử dụng cá

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

File Edit View History Bookmarks Tools Help

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>

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

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 4 - tựa đề ”MẸ!”: chữ đậm có màu hồng đậm và_ | ¿r:2299,

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

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

| Công ty du lịch Hoà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

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ê:

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

- Dòng đầu tiên: Canh giữa, màu vàng đậm #FEFCC00

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

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

oà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

hoà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:

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

- 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Đ

- 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)

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:

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,

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

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

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

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 Hoà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

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

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

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 —

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:

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

- Hai doan van ban Gioi thiégu và Liên hệ: Các tag <ol>,<li>, <ul> va tt

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

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ế:

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

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

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

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

¬ 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ị

I | Trangweb |- Tiêu đề cửa số: Tạo bảng, trộn dòng và cột

2 |Nộidung |- Bảng biểu: gồm 4 dong, 4 cột

Trang 12

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 2: Tag <tr> va <td> va t.t colspan, height

- 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

Mã người dùng: |ptnhung

Mat khâu: |se «e

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ý:

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