Lab01 - HTML, CSS

Ver 2.
0 – 2015, FIT Thực hành Phát triển ứng dụng Web : LAB01 – HTML, CSS
Yêu cầu chung
• Tạo cây thư mục có cấu trúc như sau, lưu

giữ các tập tin html vào thư mục html
• Nội dung văn bản sử dụng bảng mã Unicode
• Mỗi thư mục sẽ lưu 1 loại tập tin. Lưu giữ bài
tập để sử dụng về sau.
1 HTML cơ bản
1.1 BÀI TẬP 01: Welcome.html

Sử dụng trình soạn thảo NotePad++ soạn thảo nội dung sau lưu vào thư mục html
• Đặt tên là: Welcome.html

• Save as type: All Files
• Encoding: UTF-8
<HTML>
<HEAD>
<TITLE> Welcome to HTML </TITLE>
</HEAD>
<BODY>
Chào mừng bạn đã đến với ngôn ngữ thiết kế web HTML (Hypertext
Makup Language)
</BODY>
</HTML>
• Mở xem kết quả trang HTML
• Xem Source Code trang web từ trình duyệt
• Mở tập tin HTML từ trình soạn thảo và lưu lạI với tên khác là: Welcome2.HTML
Điều chỉnh nội dung hiện thị trong trang là:
Chúc các bạn học tốt môn Thiết kế Web!

(HTML5/CSS3/jQuery/BootStrap)
Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 1
Ver 2.0 – 2015, FIT Thực hành Phát triển ứng dụng Web : LAB01 – HTML, CSS
1.2 BÀI TẬP 02: Định dạng văn bản

1.2.1 Headings.html
(sử dụng Tag Hn, từ Heading1 đến Heading6)
1.2.2 HeadingCenter.html
(Phối hợp các Tag Hn)
1.2.3 Alignment.html
(Phối hợp các Tag Hn)
1.2.4 Emphasis.html
1.2.5 Cohaimo.html
Soạn thảo trang Web có nội dung và định dạng theo mẫu
Yêu cầu:
• Có nội dung thanh tiêu đề, định

dạng đậm, nghiêng, gạch chân,
gạch ngang chữ;
• Có phân cách các đoạn, xuống
dòng cho mỗi câu thơ, có câu ghi
chú;
• Cố định nội dung bài thơ không bị
rớt dòng khi độ rộng cửa sổ trình
duyệt không đủ (thẻ pre)
1.2.6 ChisoTrenduoi.html
Yêu cầu: Dòng 1 sử dụng font cỡ chữ 4, in đậm
Hướng dẫn thêm:
Tạo chỉ số Trên/Dưới
➢ <SUP> Văn bản </SUP>: ➔ Tạo chỉ số trên cho văn bản.
➢ <SUB> Văn bản </SUB>: ➔ Tạo chỉ số dưới cho văn bản.
1.2.7 Kyhieudacbiet.html
Nhập Mã tên hay Mã số của ký tự tương ứng, sử dụng bảng gợi ý sau đây:
Ký tự Mã tên Mã số
© &Copy; ©
TM &Trade;
® &Reg; ®
“ &Quote; "
Khoảng trắng
• Các đường kẽ ngang không bóng, kích thước
100%/50% cửa sổ
• Có màu đỏ cho các ký tự đặc biệt.
• Màu nền tùy ý.
1.2.8 Maunen.html
Bạn hãy viết trang web có:
• màu nền là màu có tổ hợp số thập lục phân là #FFFFCC,

• topmargin = 20
• Có nội dung là :
Welcome to University of Pedagogy
Faculty of Information Technology
Room A302, Block A, 280 An Duong Vuong, Dist. 5
Phone: (84-8) 3835-2020 ext 210
1.3 BÀI TẬP 3: Định dạng danh sách

1.3.1 TeaCoffee.html
1.3.2 Definition.html
1.4 BÀI TẬP 04: Liên kết (Hyperlink)

1.4.1 Tạo tập tin Link.html:
Tạo các Hyperlink để di chuyển đến các trang htm vừa tạo ở trên
1.4.2 Tạo tập tin Search.html để xây dựng trang Web sau:
1.4.3 Sử dụng các tag đã học để tạo 1 Site cho riêng bạn (MySite.html)
Nội dung: Tự giới thiệu và Các trang Web ưa thích (tạo các HyperLink)
Gợi ý:
• Trang chủ: Giới thiệu tên, tuổi, ngày sinh, điện thoại, địa chỉ
• Trang sở thích: Trình bày sở thích của bạn
• Trang liên hệ: Trình bày nội dung liên hệ, vẽ đường….
• Các trang web chọn màu nền tùy ý và sử dụng tất cả các thẻ đã học từ
trước tới giờ.
2 THIẾT KẾ WEB VỚI DREAMWEAVER
Dùng các chức năng của Dreamweaver hoặc một IDE khác (Visual Code, Subline,
Visual Studio, …) để thiết kế các trang web sau:
2.1 Bài 1: Saigontourist1.html
2.2 Bài 2: Saigontourist2.html
2.3 Bài 3: VietnamAirline.html
2.4 Bài 4: SalonAuto.html
2.5 Bài 5: DangKyDuThi.html
2.6 Bài 6:
ChuongTrinhDaoTao.html
Yêu cầu:
• Thiết kế nội dung theo mẫu
• Tại mục 2 tạo liên kết thực hiện
mở 1 trang
ChuongTrinhDTWeb.html (Cùng
cửa sổ)
• Học phần I, II, III thực hiện tạo liên
kết đấn từng học phần tương ứng
trong cung trang hiện tại.
2.7 Bài 7: KetQuaHocTap.html

Yêu cầu: Thiết kế & Trình bày theo
mẫu:
• Màu nền dòng tiêu đề và dòng
cuối, màu chữ tùy ý
• Độ rộng Table=600, Khoảng
cách giữa các ô =0 , độ dày
đường viền 1, màu viền tùy ý
• Canh lề và trộn ô đúng theo
mẫu,
3 ĐỊNH DẠNG CSS
3.1 Tạo trang web có nội dung được định dạng theo nhiều hình thức.
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ổ: Định dạng văn bản
2 Nội dung Sử dụng các tag đị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 đỏ
- Đọan 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 giải:

Stt Đối tượng Hướng dẫn cài đặt
1 Trang web - Sử dụng tag <title>
2 Nội dung - Dòng dầu tiên: Tag <h2> và t.t align để canh giữa
trang web - Dùng tag <b>, <u> để định dạng các cụm từ in đậ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> đề 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ữ.
3.2 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.

màu
1 Trang web - Tiêu đề cửa sổ: Định dạng văn bản
2 Nội dung Sử dụng các tag định dạng văn bản và các thuộc tính
trang web định dạng để tạo trang web:
- Định dạng như hình trên
- Đọan văn đầu: canh lề trái
- Dòng Bến Thượng Hải: canh lề phải, size=20px
- Đọan văn cuối: canh lề phải

2 Nội dung - Tiêu đề: Tag <h2> và t.t align, style (color; border)
trang web - Đọan văn đầu: Tag <font> và t.t face, size, color
- ”Điểm nóng nhất của Trung Hoa hiện đại” : Tag <u> và <b>
- Dòng Bến Thượng Hải: Tag <p> và t.t align, style (background-
color;color;font-weight;font-size)
- Đọan cuối: Tag <p> và t.t align, tag <font> và t.t face, size, color,
style(background-color), tag <i>, <b>
3.3 Tạo trang web có nội dung là danh sách các món ăn ngon của Hà Nội.

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ội dung - Nền màu vỏ hột gà #FFEDCA

trang web - Hình ảnh: Canh trái
- Bảng biểu:
• Dòng tiêu đề: Nền màu nâu đất và chữ màu #CC6600,
trắng #FFFFFF
• Màu nền xen kẽ giữa các dòng là màu trắng và #FFFFFF,
màu vỏ hột gà #FFEDCA

2 Nội dung - Màu nền: Tag <body> và t.t color
trang web - Hình ảnh: Tag <img> và t.t src, width, height, align
- Tiêu đề: Tag <h1> và t.t align, style (color)
- Bảng biểu: Tag <table> và t.t width, border, bordercolor, cellpadding,
cellspacing, style(border-collapse)
• Dòng tiêu đề: Tag <th> và t.t bgcolor
• Dùng tag <tr>, <td> và t.t align, width, bgcolor để vẽ dòng và cột
3.4 Tạo trang web có nội dung là các chuyên mục thắc mắc
Ý nghĩa
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 chi 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, di chuyển về đầu trang web

Stt Đối tượng Thiết kế
2 Nội dung - Tạo table gồm 15 dòng, 2 cột
trang web
- Dòng đầu: Tag <img> và t.t src, align, style="z-index:-1; position:absolute". Tag <a> và
t.t name="#vedau" để đánh dấu vị trị đầu trang
- Ô bên trái: Tag <a> và t.t 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ề đầu trang”: tag <a> và t.t href
----Kết thúc Lab----

Lab01 - HTML, CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab01 - HTML, CSS

Uploaded by

Copyright:

Available Formats

Ver 2.

Yêu cầu chung

• Tạo cây thư mục có cấu trúc như sau, lưu

1.1 BÀI TẬP 01: Welcome.html

• Đặt tên là: Welcome.html

<TITLE> Welcome to HTML </TITLE>

Chúc các bạn học tốt môn Thiết kế Web!

1.2 BÀI TẬP 02: Định dạng văn bản

• Có nội dung thanh tiêu đề, định

Hướng dẫn thêm:

Tạo chỉ số Trên/Dưới

• màu nền là màu có tổ hợp số thập lục phân là #FFFFCC,

1.3 BÀI TẬP 3: Định dạng danh sách

1.4 BÀI TẬP 04: Liên kết (Hyperlink)

2 THIẾT KẾ WEB VỚI DREAMWEAVER

2.1 Bài 1: Saigontourist1.html

2.2 Bài 2: Saigontourist2.html

2.3 Bài 3: VietnamAirline.html

2.4 Bài 4: SalonAuto.html

2.5 Bài 5: DangKyDuThi.html

2.7 Bài 7: KetQuaHocTap.html

3 ĐỊNH DẠNG CSS

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

Hướng dẫn giải:

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

- Đọan văn cuối: canh lề phải

Hướng dẫn giải:

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

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

Hướng dẫn giải:

Yêu cầu xử lý:

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

Hướng dẫn giải:

----Kết thúc Lab----

You might also like