Task1 - HackMD

# TASK 1 **1. Tìm hiểu cơ bản về HTML (các tag, attribute), CSS, Javascript** *HTML * HTML(hypertext markup language) -> ngôn ngữ đánh dấu siêu văn bản dùng để tạo và lập trình xây dựng lại cấu trúc web hay ứng dụng,phân chia các đoạn văn, heading, links,... * * 1 tài liệu được tạo thành từ nhiều thẻ HTML và mỗi thẻ sẽ chứa những nội dung khác nhau. - cách hoạt động: - phần mở rộng: .html hoặc .htm - tệp sẽ được tải lên trang web toàn cầu và hiển thị giao diện trực tuyến của tệp. - là ngôn mgữ mặc định của các trang web và tài liệu dựa trên web-> cho phép lưu trữ âm thanh, video, bảng tính và các ứng dụng khác - ưu và nhược điểm: - ưu: - thân thiện: đánh dấu rõ ràng và nhất quán - sử dụng rộng rãi với rất nhiều tài nguyên - dễ truy cập - dễ tích hợp với các ngôn ngữ hỗ trợ như PHP và Node.js - nhược: - chủ yếu sử dụng cho các trang web tĩnh(với động thì cần sử dụng thêm JavaScript hoặc ngôn ngữ hộ trợ như PHP) - phải tạo các trang web riêng lẻ cho HTML, ngay cả khi các phần tử giống nhau - ko phải lúc nào cũng có sự tương thích giữa các trình duyệt - Cấu trúc của 1 HTML Document - thành phần chính là thẻ và các thẻ - các thẻ bắt dầu và kết thúc bằng dấu ngoặc nhọn hoặc dấu "nhỏ hơn" và "lớn hơn"(các chữ ở giữa đucợ gọi là nội dung phần tử) - thành phần tạo nên cấu trúc cơ bản của 1 trang HTML: - Khai báo loại tài liệu (DTD): <!DOCTYPEhtml> xuất hiện ở đầu hoặc trên cùng của tài liệu(cho biết phiên bản HTML nào đã đucợ sử dụng) - Phần tử gốc HTML: ```<html>```, được viết dưới DTD, hoạt động như thùng chứa các phần tử khác. vd:```<html lang=”en-US”>``` (trang viết bằng tiếng Anh- Mỹ) - Head : ở giữa và chứa siêu dữ liệu - ```<tille>``` hoặc chủ đề tổng thế - ```<style>``` (màu, căn chỉnh văn bản, màu nền) - ```<link>``` cho biết các tài nguyên được liên kết với trang HTML - ```<meta>``` chứa từ khóa, tác giả, mô tả trang - Body: thành phần chính và chauws thông tn hiển thị ra màn hình - tiêu đề trang web, logo, điều hướng chính và thanh tìm kiềm - nội dung chính bao bao gồm tiêu đề bài viết, nội dung bài - các thanh hiển thị tiện ích con và điều hướng thứ cấo - chân trang cung cấp thông tin liên hệ, bản quyền,... - thẻ P viết tắt của paragraph(thẻ block): có các thuộc tính hay dùng là class, có thể dùng thẻ p để chứa đoạn văn bản(đoạn chữ ít thì nên dùng inline hoặc thẻ tiêu đề) ``` <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> ``` - thẻ div(thẻ block): có các thuộc tính nhưu class,id -> là thẻ được sử dụng rộng rãi nhất hiện nay ``` <div class="content"> <div class="text"> <p class="inner">content inside here<p> <div>content inside here</div> </div> </div> ``` - thẻ a:(thẻ inline) => chức năng liên kết với điều kiện là mục đó phải có id và trong thuộc tính href của thẻ a phải bắt đầu bằng dấu # ``` <a href="#content">scroll to content</a> <div id="content"></div> ``` trong đó href: sẽ truyển đường dẫn target: có 2 giá trị thường sử dụng nhất là ```_self```(nó sẽ thay thế tab hiện tại bằng link nhấn vào) và ```_blank``` (mở ra tab mới trên trình duyệt) rel: nếu sử dụng với targer có giá trị là _blank thì gg chrome khuyến khích cho thêm giá trị rel là ```noopener noreferrer``` để tăng tính bảo mật. nếu mặc định trong target là _self thì ko cần ghi cũng đc ``` <a href="https://google.com">google.com</a> <a href="https://google.com" target="_blank" rel="noopener noreferrer">google.com</a> ``` note: thẻ a ko nên bao bọc thẻ a - thẻ img(thẻ inline) và là thẻ tự đóng nên ko truyền nội dung vào giữa như các thẻ đóng mở khác được -> hiển thị ảnh, có 2 thuộc tính là ```src```(truyền đưỡng dẫn) và ```alt```(liên quan SEO, khi đường dẫn sai thì ko hiển thị được thì nội dung trong thẻ alt sẽ hiển thị lên) ``` <img src="unsplash.com/nature.jpg" alt="nature/> ``` ngoài ra còn có thể thêm ```srcset```(khó dùng hơn) - thẻ tiêu đề(là thẻ block): thẻ ```h1,h2,h3,h4,h5,h6``` đại diện cho các tiêu đề từ to đến nhỏ trong đó h1 là to nhất và h6 là nhỏ nhất ``` <h1>Welcome to our website</h1> <h2>Post list</h2> <h3>This is a simple title for post</h3> ``` - thẻ danh sách: có 2 thẻ hay dùng với cấu trúc hay dùng ```ul li``` (ul là ko có thứ tự )và ```ol li```(ol có thứ tự), ```li`` định nghĩa 1 mục trong danh sách cấu trúc ul li được dùng nhiều khi làm menu vd: ``` <ul class="menu"> <li class="item" <a href="#">Home</a> </li> <li class="item" <a href="#">Features</a> </li> <li class="item" <a href="#">Lifestyle</a> </li> <li class="item" <a href="#">Inspiration</a> </li> </ul> ``` note: thẻ li ko thể bọc trực tiếp thẻ li ``` <ul> <li> <li>item</li> </li> </ul> ``` li ul li thì đc ``` <ul> <li> <ul> <li>It is working</li> </ul> </li> </ul> ``` - các thẻ semantic-> cấu trúc code mạch lạc hơn (header nằm ở phía trên trang web, thẻ nav là dùng cho điều hướng menu, thẻ footer nó nằm ở dưới cùng, thẻ article là bài viết, thẻ section là một khối) ``` <header class="header"></header> <aside></aside> <article></article> <footer class="footer"></footer> ``` - thẻ span, strong, b, em i:(thẻ inline)-> dùng cho đoạn chữ ngắn. thẻ ```strong``` và thẻ ```b``` giống nhau-> in đậm, thẻ ```em``` và ```i``` giống nhau -> in nghiêng * thẻ trong form: - thẻ form(thẻ block): dùng khi muốn gửi dữ liệu tới server như đăng nhập, đăng kí thông qua submit form. - thuộc tính: -```action``` truyền vào đường dẫn hoặc xử lý file - thẻ input:(thẻ inline): là thẻ tự động - thuộc tính: -```text```: cho phép nhập kí tự nào cũng đc như chữ, số, ... -```email```:hiển thị lên với dấu @ -```number```: nhập vào là số nguyên hoặc số lẻ -```password```: để khi nhập mật khẩu sẽ hiển thị dấu * -```date```:hiển thị ngày khu nhập ngày tháng năm -```time``` -```file``` -```checkbox``` -```radio```: là nút check nhưng chỉ được chọn 1 trong 2 hoặc trong nhiều -```submit``` ``` <input type="email"/> ``` -```placeholder```: tạo ra một lớp chữ mờ bên trong input khi người dùng chưa nhập nội dung nào ``` <input type="email" placeholder="Email"/> ``` -```value```: giá trị của input -```name```: giúp phân biệt giữa các input với nhau ```<input type="radio" value="male"/> <input type="radio" value="female"/> ``` -```required```: trường bắt buộc nhập -```min, max```: input có type là number nhỏ nhất ``` <input type="number" min="18" max="100" name="age"/> ``` -```minlengh, maxlengh``` độ dài tối đa, tối thiểu ``` <input type="text" minlength="10" maxlength="200"/> ``` - thẻ label(thẻ inline): đucợ dùng input, textarea để khi nhấn vào thì nó tự động trỏ tới input hay textarea để focus vào chúng thông qua thuộc tính for trong label ``` <label for="name">Name</label> ``` - thuộc tính ```for``` sẽ trỏ tới ```id``` của input nên trong input cần có id tương ứng với giá trị for note: các id ko đc trùng nhau - thẻ textareaa(thẻ inline): thuộc tính giống input, khác là cho phép ng dùng nhập nhiều nội dung và enter xuống dòng còn input thì ko. ``` <textarea name="content" placeholder="Type something if you want"></textarea> ``` - thẻ button (thẻ inline) thẻ này dùng trong form khi người dùng nhấn vào để gửi dữ liệu đã nhập vào hoặc xoá hết dữ liệu. - có thuộc tính ```type``` với 3 giá trị là ```submit```, ```reset```,```buttton```(ko có tác dụng gì khi nhấn vào) ``` <button type="submit" class="form-submit">Sign in</button> ``` - thẻ dieldset: là thẻ muốn gom nhóm các trường lại như input, putton,textarea vào chung vd: ``` <form action="/subscribe" method="post"> <fieldset disabled> <legend>Subscribe to the Newsletter</legend> <input type="email" name="email"> <button>Ok</button> </fieldset> </form> ``` - thẻ select option(thẻ block): hiển thị dưới dạng - Thẻ title```<title>HTML cơ bản toàn tập cho người mới phần 3 - Evondev Blog</title>``` - Thẻ Meta: - thẻ style:```<style type="text/css"> .header { background-color: blue; } </style>``` - Thẻ link```<link rel="stylesheet" type="text/css" href="./styles.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">``` - thẻ iframe : - Thẻ audio ```<audio src="https://htmlreference.io/assets/Hal.mp3" controls></audio>``` - Thẻ video```<video src="https://htmlreference.io/assets/HTML%205%20Video.mp4" controls></video>``` *CSS: * là ngôn ngữ tạo phong cách cho trang web -Cascading Style Sheet language -> dùng để tạo phong cách và định kiểu cho những yếu tố mà được viết dưới dạng ngôn ngữ đánh dấu như HTML. - bố cục của 1 đoạn CSS: - padding: không gian xung quanh nội dung - border: đường nằm ngoài phần đệm - margin: khoảng cách bao quanh phía ngoài của phần tử - cấu trúc của 1 đoạn CSS vùng chọn{thuộc tính: giá trị; thuộc tính:giá trị;...} mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của các giá trị đã có trong CSS - bộ chọn(selector): -> chọn phần tử HTML - Khai báo (Declaration): có thể chứa 1 hay nhiều khia báo và chúng được phân tách với nhau bởi dấu ";" , gồm tên & giá trị đặc tính CSS, được phân tách nhau bởi dấu "," và khối khai báo phải nằm trong các dấu ngoặc móc. - thuộc tính(properties): -> cách thức tạo kiểu cho 1 phần tử HTML - giá trị thuộc tính: nằm bên phải thuộc tính *danh sách thuộc tính: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference - ưu và nhược: - ưu: + tăng tốc độ tải trang + tăng tính thẩm mỹ + thời gian phát triển nhanh + khả năng tương thích trên các thiết kế web - cách thức hoạt động: B1: trình duyệt tải HTML B2:HTML chuyển sang DOM(mô hình đối tượng tài liệu). DOM đại diện cho tài liệu trong bộ nhớ của máy tính B3: trình duyệt tìm nạp tài nguyên đucợ liên kết với tài liệu HTML, sau đó JavaScript được xử lý trong quá trình này. B4: trình duyệt phân tích cú pháp đã tìm nạp và sắp xếp thành các nhóm khác nhau. tìm ra quy tắc áp dụng cho các nút trong DOM và đính kèm kiểu theo yêu cầu(cây kết xuất) B5: cây kết xuất đucợ đặt trong cấu trúc B6: hình ảnh hiển thị trực quan ra màn hình - có 3 cách nhúng CSS vào web: + nhúng trực tiếp(inline CSS):đặt mã CSS vào thẳng thuộc tính style của phần tử(chỉ tác động trực lên chính phần tử đó) + nội tuyến (Internal CSS): cần dùng thẻ ```<style>``` (nên đặt trong thẻ ```<head>```) để tạo khu vực viết CSS + ngoại tuyến(external CSS): sử dụng phần tử "link" để thêm style sheet ở bên ngoài vào tài liệu HTML, trước hết cần tạo các rules trong một file riêng -> cần thêm file CSS này vào phần tử head trong tài liệu HTML => ngoại tuyến là một phương pháp phổ biến nhất - chèn CSS vào HTML cơ bản:tạo file HTML, tạo file main.html rồi gõ ! thì vscode emmet sẽ gợi ý ra cấu trúc chuẩn - selectors cơ bản: ![image](https://hackmd.io/_uploads/ry7i6hl0a.png) - selectors: là các thẻ HTML như ```div,h2,body,span,a``` hoặc là class(bắt đầu với dấu chấm nhưu ```.headingm, .item, .header```), hoặc là id(bắt đầu với dấu # như ```#header, #container...```) - property - value ![image](https://hackmd.io/_uploads/ByI_A3e0p.png) - thuộc tính color: mã màu ở đây có thể là name(red, orange, blue…), hexa(#ffa400), rgb(255,255,255), hsl(39, 100%, 50%) ![image](https://hackmd.io/_uploads/rkui0ngRa.png) muốn có chữ tronng suốt thì dùng rgb(```rgba(rgb-color, alpha)```) hoặc hsl - thuộc tính background-color - thuộc tính text-align:có 4 giá trị hay dùng, trong đó ```left``` là giá trị mặc định ![image](https://hackmd.io/_uploads/SyJtJagRT.png) - thuộc tính line-height: ![image](https://hackmd.io/_uploads/HJJiJagRa.png) - thuộc tính letter-spacing:![image](https://hackmd.io/_uploads/ryzbgpl0T.png) - thuộc tính word-spacing:![image](https://hackmd.io/_uploads/HJoGlTe0a.png) - thuộc tính work-break: **Tài liệu tham khảo:** https://glints.com/vn/blog/css-la-gi/ * JavaScript: - là ngôn ngữ lập trình phổ biến trong các trang web 1. có thể được nhúng trực tiếp vào mã HTML bằng cách sử dụng thẻ ```<script> .... <script> ``` vd: ``` <html> <body> <script language="javascript" type="text/javascript">  </script> </body> </html> ``` 2. vị trí trong HTML: có thể đặt trong vị trí ``` <head> .... </head> ``` hoặc tạo dung trang ``` <body> .... <body> ``` 3. biến và kiểu dữ liệu: - sử dụng kiểu dữ liệu như số, chữ, mảng,.. 4. lệnh if: - cú pháp: ``` if (expression){ Statement(s) to be executed if expression is true } else{ Statement(s) to be executed if expression is false } ``` 5. lệnh switch case ``` switch (expression) { case condition 1: statement(s) break; case condition 2: statement(s) break; ... case condition n: statement(s) break; default: statement(s) } ``` 6. lệnh while: ``` do{ Statement(s) to be executed; } while (expression); ``` note: ko quên ; 8. Hàm: sử dụng khóa funtion vd: tham số: ``` function greet(name) { console.log("Hei, " + name + "!"); } ``` tài liệu đọc: https://vietjack.com/javascript/index.jsp#goog_rewarded **2. Tìm hiểu: HTTP Protocol, HTTP Request, HTTP Response, HTTP Method, HTTP Header, Cookie, HTTPS, HTTP Authentication **3. Học PHP cơ bản ** **4. Code một trang web bằng PHP có chức năng đăng kí, đăng nhập, upload file với method POST**

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.