> For the complete documentation index, see [llms.txt](https://dtian.gitbook.io/daily-report-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dtian.gitbook.io/daily-report-1/day-2-23-8.md).

# Day 2 - 23/8

<mark style="color:blue;">Tìm hiểu và  thực hành với các thẻ:</mark>

1. <mark style="color:blue;">\<img>:</mark>&#x20;

* 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

2. <mark style="color:blue;">Thiết lập background image cho paragraph</mark>
3. <mark style="color:blue;">Thiết lập title và icon cho web</mark>&#x20;
4. <mark style="color:blue;">\<table>\</table></mark>

* Thao tác với các thành tố trong bảng: row, cell, head, data&#x20;
* 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&#x20;
* 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ý

5. <mark style="color:blue;">List: \<ul> \<ol> \<li> \<dl>\<dt>\<dd></mark>

* 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)

6. <mark style="color:blue;">Block và Inline</mark>&#x20;

* 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ó

7. <mark style="color:blue;">Class và Id</mark>

* 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&#x20;
* Id cũng hoạt động tương tự Class, nhưng chỉ nên dùng cho 1 tag duy nhấnhất.&#x20;
* Syntax: \<tag class="name">\</tag>    .name{}&#x20;
* \<tag id="name">\</tag>      #name{}

8. <mark style="color:blue;">IFrame</mark>

* 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&#x20;
* 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 đó&#x20;

9. <mark style="color:blue;">File path</mark>&#x20;

* 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 đó&#x20;
* 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