Bài tập html và css cơ bản có lời giải

• 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 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 soan thảo nội dung sau lưu vào thư mục HTML • Đặt tên là: Wellcome.html • Save as type: All Files • Encoding: UTF-8 • 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.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 BÀI TẬP 02 (Lưu tập tin tên Cohaimo.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ị rớt 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 Hướng dẫn: Tạo chỉ số Trên/Dưới • <SUP> Văn bản </SUP> : F 0 E 8 Tạo chỉ số trên cho văn bản. • <SUB> Văn bản </SUB> : F 0 E 8 Tạo chỉ số dưới cho văn bả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

Cung cấp cho Sinh viên tập làm quen với HTML bằng các thẻ cơ bản như u, i, b, sup, sub.

Tải các file đính kèm bên dưới về máy và giải nén.

Mở phần mềm Dreamweaver và tạo mới website để tiến hành thực hành. Ứng với mỗi bài tập là một tệp có phần mở rộng .HTML.

✓ Đặt tiêu đề title cho trang ✓ Định dạng trang ✓ Chèn một hình ảnh ✓ Tạo liên kết văn bản và liên kết hình ảnh ✓ Áp dụng các thẻ tiêu đề (heading tags) ✓ Thêm style vào trang sử dụng internal style sheet ✓ Điều chỉnh text wrapping ✓ Thêm và tạo style cho horizontal rule

III. Nội dung thực hành

Tạo trang html mới và đặt tên là ricardo-HotenSV với các yêu cầu sau: - Page: o Title tag = Ricardo's Page o Background Color: red =255, green=200, blue= o Text color = Green - Text styles:

[email protected]

o Heading 1 = green, font-family = Trebuchet MS, Tahoma, sans-serif o Heading 2 = green, font-family = Trebuchet MS, Tahoma, sans-serif o paragraphs = green, font-family = Comic Sans MS, Arial, sans-serif

• Text:

o Dòng đầu tiên là Heading 1 o Dòng thứ hai là Heading 2. o Thêm 2 đoạn sau vào cuối trang : Los Lobos - my team Back to Hector's page

• Images :

o Sử dụng 2 ảnh sasha và icon-lobos trong thư mục ricardo o Tìm kích thước width/height của những ảnh này sử dụng File Explorer. o Đặt ảnh sasha ở đầu đoạn văn bản đầu tiên (paragraph). Sử dụng kiểu inline để làm cho nó trôi ở bên trái với lề margin xung quanh là 10px; ALT text = "Sasha" o Đặt ảnh icon-lobos ở bên trái của đoạn " Los Lobos - my team "; ALT text = " Los Lobos "

• Wrapping: o Đoạn đầu tiên bao quanh bên phải cạnh ảnh sasha. o Bắt đầu đoạn thứ hai bên dưới ảnh sasha.
• Links :

o Tạo liên kết cho icon-lobos và văn bản " Los Lobos " để liên kết đến trang loslobos-HoTenSV , sẽ nằm trong cùng thư mục của trang này (SV sẽ tạo trang này trong bài tập CSS1_2 ) o Tạo liên kết cho văn bản " Hector's page " để quay lại trang hector25- HoTenSV ( file này sẽ làm sau )

• Horizontal rule:

o Chèn một đường ngang giữa đoạn thứ hai và liên kết Los Lobos. o Thêm một style dạng internal style sheet để làm cho Horizontal rule có màu xanh lục (thuộc tính color).

Bài tập 7: Thực hiện code CSS theo nội dung design dưới đây.

Tham khảo cấu trúc ở bài tập HTML

Hướng dẫn

• Line cho <hx> ta có thể sử dụng CSS để hạn chế thêm code cho HTML.
• Chú ý 2 danh sách, một danh sách chứa text, và một danh sách chứa hình.
• Với danh sách text ta có thể dùng display: inline; để thuận lợi về mặt điều chỉnh vị trí ở giữa.
• Với danh sách chứa hình ta dùng float sẽ thuận lợi về mặt điều chỉnh khoảng cách hay thêm bớt hình, cần chú ý reset lại các khoảng cách các hình bên phải và cuối danh sách.

Công thức chung

• Bài giải này dựa trên bài học CSS3, do đó các bạn cần nắm vững kiến thức về CSS và CSS3 để hiểu rõ về bài giải này.
• Đối với các tag có class, thì sẽ sử dụng tên .class để viết CSS, tránh viết dạng tag.class, việc này sẽ giúp code không ảnh hưởng nếu tag có thay đổi.
• Thứ tự ưu tiên viết CSS (tham khảo):
  • Từ trên xuống dưới.
  • Sắp xếp cho đúng tương đối vị trí các thành phần bao ngoài, vd: .class-ông .class-cha .class-con.
  • Định dạng, sắp xếp vị trí của từng thành phần, sau đó mới trang trí cho các thành phần bên trong.
  • Chỉnh lại cho chính xác vị trí của các thành phần bên ngoài và bên trong.
• Một số thuộc tính kết hợp hiệu quả:
  • margin: 0 auto; và width: 600px;: dịch chuyển toàn bộ thành phần canh giữa, nhưng không ảnh hưởng các thành phần con bên trong.
  • line-height: 60px; và `display: inline;`0: nếu cùng giá trị, sẽ giúp cho thành phần bên trong canh giữa theo chiều dọc.
  • `display: inline;`1 và `display: inline;`2: thường dùng cho image lớn hoặc các khối lớn, gặp nhiều trong responsive; Khi màn hình có chiều rộng nhỏ, thì thành phần sẽ theo phần trăm là `display: inline;`3, ngược lại khi màn hỉnh có chiều rộng lớn, thì thành phần có chiều rộng lớn nhất sẽ theo pixcel là `display: inline;`4.
  • `display: inline;`5 và `display: inline;`6: thường sử dụng cho button, khi chiều rộng lớn thì thành phần sẽ cách đều trái và phải 20px, còn khi chiều rộng nhỏ, thì chiều rộng nhỏ nhất sẽ theo `display: inline;`7.
• Để cho gọn bài giảng, hocwebchuan sẽ không tập trung vào việc chỉnh chính xác font-family, image, hay khoảng cách nhe (tương đối thôi).
• Trong bài giải, hocwebchuan đã code các thuộc tính theo việc sắp xếp thứ tự ABC, indent 2 spaces, các vị trí khoảng cách như nhau, mục đích của việc này sẽ giúp cho code được đẹp hơn, dễ quản lý hơn.