Bài tập thực hành thiết kế Web - Phần ngôn ngữ HTML
BÀI TẬP THỰC HÀNH THIẾT KẾ WEB
Phần : NGÔN NGỮ HTML
Yêu cầu chung
• Tạo cây thư mục có cấu trúc như sau (lên máy tính và copy
vào ổ USB), lưu giữ các tập tin HTM 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.
BÀI TẬP 01
Sử dụng trình soạn thảo NotePad, bật bộ gõ tiếng Việt, chọn bảng mã Unicode soạn thảo
nội dung sau lưu vào thư mục HTML
• Đặt tên là: Welcome.html
• Trong mục Save as type, chọn: 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 bằng cách kích đúp chuột vào file Welcom.HTML
• Xem Source Code trang web từ trình duyệt (IE, FF)
• Mở tập tin HTML từ trình soạn thảo và lưu lạI với tên khác là: Welcom2.HTML
Điều chỉnh nội dung hiển thị trong trang là: Chúc các bạn học tốt ngôn ngữ HTML
Sử dụng định dạng chữ in, với màu nền #FFEECC, topmargin=20px;
BÀI TẬP 02 (Lưu tập tin tên baitho.html)
Sử dụng ngôn ngữ 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ị xuống dòng
khi độ rộng cửa sổ trình duyệt không đủ,
BÀI TẬP 03 (Lưu tập tin tên: ChisoTrenduoi.htm)
Yêu cầu: Dòng 1 cỡ chữ 4 in đậm như hình bên
Hướng dẫn:
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/3
Phan Thanh Sơn
BÀI TẬP 04
Ký tự đặc biệt (Lưu tập tin tên: Kyhieudacbiet.html)
Nhập Mã tên hay Mã số của ký tự tương ứng
Ký tự
Mã tên
&Copy;
&Trade;
Mã số
©
™
Ký tự
Mã tên
&Quot;
Mã số
"
 
©
“
TM
Khoảng
trắng
®
&Reg;
®
• Các ký hiệu sử dụng mã tên hay mã code
• 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 ý, tất cả văn bản không bị xuống
dòng.
BÀI TẬP 05: (Lưu tập tin tên: Hieuungvb.html)
Tạo hiệu ưng chuyển động cho các dòng văn bản trên trang:
❖ Lặp liên tục từ trái sang phảI, chữ đỏ, cỡ 4
Loại hiệu ứng đến viền trang hiệu ứng chuyển động ngược
lại (Alternate).
Hướng dẫn:
HIỆU ỨNG CHUYỂN ĐỘNG CHỮ
<Marquee
Behavior=“Hiệu ứng” Direction=“Hướng”
Loop=n1
ScrollAmount=n2
ScrollDelay=n3
Chuỗi ký tự
BgColor=“Trị màu”>
</Marqueee>
Trong đó:
Hiệu ứng:
+Scroll:Bắt đầu từ 1 cạnh biến mất ở cạnh kia
+Slide:Bắt đầu từ 1 cạnh dừng lại ở cạnh kia
+Alternate:Bắt đầu từ 1 cạnh chuyển ngược lại ở cạnh kia
Huớng: Left, Right, Center Hướng bắt đầu
n1: Số lần lặp
n2: Khoảng cách (Pixel) giữa mỗi lần lặp
n3: Thời gian chờ giữa mỗi lần lặp.
BÀI TẬP 06: (Lưu tập tin tên: ChuongTrinhDTWeb1.html)
• Dòng đầu cỡ tiêu đề H3, màu đỏ
• Các dòng nộI dung dạng danh sách không đánh số thứ tự. Màu xanh.
• Dòng cuốI có sử dụng văn bản dạng chú thích, có màu khác các màu còn lại
2/3
Phan Thanh Sơn
BÀI TẬP 07: (Lưu tập tin tên: ChuongTrinhDTWeb2.htm)
• Dòng đầu cở tiêu đề H3, Đỏ
• Các dòng nội dung dạng danh sách có
đánh số thứ tự, màu xanh.(Màu nền tuỳ
ý-khác màu xanh.)
BÀI TẬP 08: (Lưu tập tin tên: ChuongTrinhDTWeb.htm)
Thiết kế dạng danh sách có đánh số thứ tự
lồng nhau. Đường kẽ ngang không bóng 30%
cửa sổ. Dòng cuối dạng VB chú thích.
BÀI TẬP 09: (Lưu tập tin tên: ChuongTrinhDTTHVP.htm)
Thiết kế dạng danh sách định nghĩa. Màu chữ tùy ý. Có ảnh nền Lưu trong thư mục
Images.
BÀI TẬP 10: (Lưu tập tin tên:
TaisanBill.htm)
Thiết kế theo mẫu có : Ảnh canh lề phải văn
bản canh đều bao quanh lề trái, kích thước
130x200. Trên ảnh có câu chú thích “Bill thăm
Việt Nam”, Có ảnh nền
3/3
Phan Thanh Sơn
3 trang
07/05/2022
6520
Bạn đang xem tài liệu "Bài tập thực hành thiết kế Web - Phần ngôn ngữ HTML", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- bai_tap_thuc_hanh_thiet_ke_web_phan_ngon_ngu_html.doc
