Bài tập thiết kế trang web bằng html năm 2024

Nội dung Text: MỘT SỐ BÀI TẬP THIẾT KẾ WEB CĂN BẢN- HTML (khoa công nghệ thông tin)_1

1. MỘT SỐ BÀI TẬP THIẾT KẾ WEB CĂN BẢN- HTML (khoa công nghệ thông tin)
2. Phần 1: NGÔN NGỮ HTML 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 HTM vào thư mục HTMLS  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 soan thảo nội dung sau lưu vào thư mục HTML  Đặt tên là: Wellcom.htm  Save as type: All Files  Encoding: UTF-8 Well com to HTML Chào mừng bạn đã đến với ngôn ngữ thiết kế web HTML (Hypertext Makup Language)
3.  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à: Wellcom2.HTM Đ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 BÀI TẬP 02 (Lưu tập tin tên Cohaimo.htm) Sử dụng ngôn ngữ HTM 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 đủ,
4. 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 BÀI TẬP 04 (Lưu tập tin tên: Kyhieudacbiet.htm)  Các ký hiệu sử dụng mã tên hay mã code  2 đường kẽ ngang không bóng, kích thước 100% và 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ị rớt dòng. BÀI TẬP 05: (Lưu tập tin tên: Hieuungvb.htm) 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).
5. BÀI TẬP 06: (Lưu tập tin tên: ChuongTrinhDTWeb1.htm)  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 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 DS có đánh số thứ tự, màu xanh.(Màu nền tuỳ ý.)

BÀI 1: Sử dụng html và css để xây dựng layout như hình sau: Bước 1: Tạo file index gồm các cặp thẻ div cho mỗi khối màu đen trong hình, được bọc trong một thẻ div lớn. Bước 2: Tạo file mystyle cùng thư mục và tạo liên kết giữ file index và file mystyle bằng thẻ link (trong thẻ head).

<link rel="stylesheet" type="text/css" href="css/style">

Bước 3: Viết thuộc tính css cho các class của các thẻ div tương ứng.

Bài tập 2: Tương tự bài tập 1, hãy sử dụng các thẻ ngữ nghĩa trong html5 để thiết kế bố cục

sau: ( Th header, nav, secton, artcle, aside, footer)ẻ

Bài 3: LAYOUT WEBSITE VNEXPRESS

Thiết kế: mỗi một khung màu là nội dung trong một vùng DIV

Bước 1: Mở Visual studio 2008, 2010, 2013, 2015  Nhấn chuột chọn New Project  Chọn Web  Chọn Empty web application Bước 2: Nhấn chuột phải vào project web  Chọn Add  New Item  Chọn Html page  đặt tên Index Bước 3: Nhấn chuột phải vào project web  tạo mới thư mục Images  copy toàn bộ ảnh vào thư mục image Bước 4: Nhấn chuột phải vào project web  Tạo mới thư mục CSS  nhấn chuột phải vào thư mục Css  Chọn add  New item  chọn Stylesheets Đặt tên là my_css Bước 5: Hãy liên kết được file css vào trong file html Bước 6: Code html theo hướng dẫn (tại hình huong_dan_layout_website_html_css, ngoài thư mục) để code đầy đủ các thẻ html (nhớ bổ sung thẻ đóng vào mỗi thẻ) Bước 7: code css vào file my_css theo hướng dẫn trong hình Bước 8: Nhấn chuột phải vào file index chọn View in browser để xem kết quả chạy trang web

Bước 9: Tại trình duyệt (sử dụng Chorme) đang mở trang web, nhấn phím F12, theo dõi lần lượt các thẻ html trên trang, và code thử css tại mục stylesheets và sau khi hoàn chỉnh thì lấy code copy vào file my_css để hoàn thiện trang web (theo hình)

Chú ý: Chia nhỏ các khu vực thành các thẻ

Trong bài này sử dụng một số thẻ html và css như sau: HTML - ul, li, img, p, div (bổ sung định danh thuộc tính của mỗi thành phần bằng thẻ id, ví dụ như hình trên) CSS - padding, margin, float, display, width, height, border, overflow, position (relative, absolute)

Chào mừng các bạn đến với các bài hướng dẫn về HTML. Sau khi học xong các bài hướng dẫn này các bạn có thể nắm các kiến thức cơ bản HTML, tự mình làm một website. Nếu các bạn biết XML, thì việc học HTML đơn giản hơn. Các bạn không nên đọc các bài hướng dẫn từ đầu đến cuối, nên vừa đọc vừa làm bài thực hành.