Day 2 - 23/8

Tìm hiểu và thực hành với các thẻ:

1. <img>:

• thẻ image không có thẻ đóng

• src: chứa đường dẫn ảnh/file gif từ folder hoặc từ 1 trang web

• alt: alternate text là mô tả về ảnh/file gif khi đường truyền trễ chưa thể hiển thị

• thiết lập cho ảnh/file gif có chức năng như 1 đường dẫn: toàn ảnh là đường dẫn và 1 phần ảnh là đường dẫn

1. Thiết lập background image cho paragraph

2. Thiết lập title và icon cho web

3. <table></table>

• Thao tác với các thành tố trong bảng: row, cell, head, data

• Thay đổi thiết kế bảng: border; radius; color; background cho các tabledata, tablehead, tablerow chỉ định; size; header 1 chiều, 2 chiều; padding, spacing

• Thao tác với nth-child()

• Tạo bảng với colspan, rowspan

• Tạo Hoverable table: chỉ dùng tr:hover{} sẽ không hoạt động vì row không hỗ trợ hoàn toàn cho background color, thay vào đó sử dụng table.classname tr:hover td {}

• Thao tác với colgroup nhưng khônkhông hoạt động và chưa tìm được hướng xử lý

1. List: <ul> <ol> <li> <dl><dt><dd>

• Unordered list thiết lập mặc định đánh dấu các phần tử con bằng hình học, Ordered list mặc định đánh dấu bằng các hệ thống ký tự tịnh tiến có quy luật

• Description list không có ký tự đánh dấu và các phần tử có tag <dd> tự lùi đầu dòng

• Tạo danh sách lồng nhau (nested list) và danh sách theo chiều ngang (orizontal list)

1. Block và Inline

• Block là các thẻ có thể bắt đầu 1 đoạn mới và tự động lấy nhiều không gian trang web nhất có thể. Thường dùng là <div> và <p>

• Inline là các thẻ có thể lấy không gian trong 1 đoạn có trước nhưng chỉ lấy đủ lượng cần thiết: <span> <a> <img>

• thẻ <div> có thể thay đổi thuộc tính của cả khối chứa trong nó

1. Class và Id

• thẻ Class dùng để gán cho 1 hoặc nhiều tag, khi gọi tới Class name trong file CSS ta có thể đồng thời thay đổi thuộc tính của tất cả các tag có sử dụng tới lass name đóđó. Ngược lại, 1 tag cũng có thể dùng nhiều Class name

• Id cũng hoạt động tương tự Class, nhưng chỉ nên dùng cho 1 tag duy nhấnhất.

• Syntax: <tag class="name"></tag> .name{}

• <tag id="name"></tag> #name{}

1. IFrame

• IFrame cho phép trình chiếu 1 trang web khác trong giao diện của trang web hiện tại

• IFrame cần các thuộc tính src, tittltittle, name

• Khi 1 đường dẫn có target trùng với name của 1 IFrame thì nội dung trang web sẽ được hiển thị trong IFrame đó

1. File path

• src="file.jpg" : file cùng thư mục với trang hiện tại

• src="folder/file.jpg" : thư mục hiện tại chứa folder và file nằm trong folder đó

• src="../file.jpg" : file nằm trong thư mục chứa thư mục cha của thư mục hiện tại

• src="/folder/file.jpg" : em chưa hiểu "nằm trong thư mục gốc của trang web hiện tại" là gì

Toàn bộ code thực hành đều được chỉnh style thông qua CSS