[Phần 1] Session Token và JWT Token, Refresh Token, khi nào quyết định sử dụng, ưu và nhược điểm

This entry is part 1 of 2 in the series API Security

Lời đầu

Trước khi đi vào Session Token hay JWT Token, hay có thể tóm gọn là authentication qua token, ta sẽ đi qua về 1 cách khác để authentication qua các giao thức API, và sau đó sẽ nói về ưu nhược điểm giữa chúng

Http Basic Authentication

Luồng chạy của HTTP “Basic” Authentication như sau:

Khi người dùng truy cập và không có thông tin đăng nhập, hệ thống sẽ trả về 401 (Unauthorized) và thông tin đi kèm là cách để có thể author qua header WWW-Authenticate với thông tin (Ví dụ trên ảnh là yêu cầu Authen qua Basic)
Khi ta truy cập với Header Authorization + Basic + chuỗi mã, lúc này hệ thống sẽ kiểm tra và cho phép có quyền hay không.

 Authorization: Basic dGVzdDoxMjPCow==

Ví dụ như mã trên, đoạn mã sau Basic cơ bản là một đoạn String được mã hoá ở dạng base64, bạn có thể decode nó qua các trang base64, ví dụ

Ví như với mã trên, khi decode, ta nhận được đoạn mã test:123£, đây là format của Basic Authen, với đầy đủ là username:password, thì ở đây test là username, và password là 123£

Ưu điểm

Sử dụng đơn giản, luồng không phức tạp, triển khai nhanh
Phù hợp cho authentication trong nội bộ, cho các ứng dụng trên môi trường kiểm thử (non-prod)

Nhược điểm

Toàn bộ request đều sẽ phải gửi username và password, điều này nhìn chung tăng khả năng xảy ra lộ mật khẩu.
Do lần nào cũng gửi mật khẩu, nên nếu bạn mã hoá nó, việc này là một công đoạn khá tốn tài nguyên. Những thuật toán hashing, mã hoá mật khẩu hiện đại có thể tốn tới 100ms (0,1s) để giải mã mật khẩu rồi kiểm tra có đúng không. Điều này hao tốn CPU cho hệ thống
Một số vấn đề khác về UX (giao diện mặc định đăng nhập xấu), vấn đề bảo mật về việc lưu password ở client để gửi đi authen, ….

Token Authentication trong API

Khái niệm

Hiểu đơn giản, thông thường thì authentication bằng token sẽ hoạt động như sau: Tài khoản, mật khẩu, … thông tin user chỉ cần nộp 1 lần, người dùng sau đó sẽ được cấp 1 token, 1 đoạn mã có thời hạn sử dụng. Người dùng sau đó có thể dùng token này để authentication cho đến khi đoạn token hết hạn sử dụng
Ví dụ về token authentication trong thực tế, điều này giống như bạn đi một khu vui chơi. Bạn đã đặt vé từ trước, và để xác minh bạn đã đặt vé chưa, bạn phải xuất trình căn cước công dân, ảnh thẻ, hộ chiếu, …. Thay vì vậy, khu vui chơi sau khi nhận căn cước công dân ở cửa vào, sẽ cấp cho bạn 1 phiếu vé có thời hạn 1 ngày hay gì đó, sau đó bạn dùng phiếu vé này để đi chơi trong khu vui chơi trong thời gian của vé.

Cách tiếp cận 1: Lưu trữ token trong database

Người dùng lần đầu sẽ gửi thông tin của mình cho server, server sẽ từ đó sinh ra 1 token và lưu nó vào database
Lần sau người dùng sẽ chỉ cần gửi token, và sau đó server kiểm tra token có trong database không, còn hạn sử dụng không, … rồi cho phép người dùng

Việc này khắc phục các điểm:

Đầu tiên, token thường không chứa thông tin mật khẩu, tài khoản, … nữa nên ít lo bị lộ thông tin cá nhân của người dùng hơn.
Giảm bớt các nhược điểm của Basic Authen là phải mã hoá, giải mã mật khẩu, ….
Nếu có vấn đề bảo mật xảy ra, token được cài đặt là có thời hạn, và hơn nữa ta đã lưu ở trong database, ví dụ, bạn bị mất token vào tay người khác, thì thiệt hại cũng được giảm thiểu. Hoặc ta có thể trực tiếp ngăn chặn bằng cách xoá token đó đi trong database.

Session Cookie

Cách triển khai đơn giản nhất của hướng tiếp cận trên, và cũng khá phổ biến là sử dụng cookie. Sau khi người dùng đăng nhập bằng thông tin, phía server sẽ trả về 1 header Set-Cookie trong response để yêu cầu trình duyệt người dùng lưu 1 chuỗi token ngẫu nhiên trong bộ nhớ cookie của trình duyệt
Các request vào trang đó sẽ sử dụng token như 1 header Cookie (do cookie được tạo ra để lưu trữ những thông tin của người dùng trong 1 site)

Ưu điểm

Cookie có nhiều cơ chế về bảo mật có sẵn, ví dụ như cookie chỉ gắn liền với từng tên miền, nên nó luôn đảm bảo không có chuyện ta gửi sang trang khác đoạn cookie chứa thông tin nhạy cảm
Cookie có thể được đánh dấu là Secure, điều này giúp đảm bảo khi gửi kết nối tới trang nào thì cookie chỉ được gửi nếu kết nối đó là Https và đã được mã hoá.

Nhược điểm

Trong thiết kế API theo hướng RestAPI đó là kết nối giữa client người dùng và server nên là stateless http://quochung.cyou/kien-truc-stateful-va-stateless-la-gi/. Đó là server sẽ không lưu trạng thái nào của người dùng giữa các request khác nhau.
Cookies phá vỡ nguyên tắc này vì server lúc này lưu trạng thái của cookie với các client khác nhau. Vào thời điểm đầu khi session cookie được sử dụng, chúng thường là nơi lưu trữ tạm thời 1 số trạng thái của người dùng, ví dụ như 1 giỏ hàng, 1 danh sách sản phẩm đã được chọn mà người dùng chưa thanh toán. (Kiểu khi người dùng chọn rồi, nó không lưu trực tiếp vào database) mà chỉ lưu vào cookie, điều này dễ gây ra một số lỗi bất thường cho website.

Cookie attribute	Ý nghĩa
`Secure`	Cookie chỉ có thể gửi qua kết nối https
`HttpOnly`	Không thể đọc trực tiếp bằng javascript
`SameSite`	Chỉ gửi cho cùng trang

Một số attribute của cookie về bảo mật

[Phần 2] Session Token và JWT Token, Refresh Token, khi nào quyết định sử dụng, ưu và nhược điểm

[Tìm hiểu React – Phần 1] Tại sao React ra đời

Tại sao lại cần React? Viết bằng Javascript thuần không ổn sao?

Mọi thứ xuất hiện đều có lí do của nó. Thời kỳ đầu tiên của lập trình web, đa số chúng ta chỉ có các web tĩnh, có thể là các trang đọc báo, trang tài liệu wiki, …. Các dữ liệu trên trang thường không thay đổi. Điều này kéo dài một thời gian, tuy nhiên chúng ta ngày càng mong muốn nhiều hơn, chúng ta muốn những website “động”, những website mạng xã hội mà bài viết được cập nhật mỗi lần tải trang, những trang web mà có thể nhận/gửi tin nhắn mới, những trang web có các video mới như Youtube, …

Trước khi React sinh ra

Hãy tưởng tượng một bài toán thực tế. Ta có một cái nút “đăng nhập”, khi người dùng nhấn nút, yêu cầu của bài toán cần có 4 trạng thái như sau:
- Nút trước khi bị ấn hiển thị màu xanh dương, ghi là “Nhấn để đăng nhập”
- Nút khi bị ấn hiển thị màu xanh dương nhưng đen đi một xíu do đang bị ấn, hiển thị chữ “đang đăng nhập”
- Sau khi đăng nhập hoàn thành, nút chuyển sang màu xanh lá, hiển thị “đăng nhập thành công”
- Sau khi đăng nhập thất bại, nút chuyển sang màu đỏ, hiển thị “đăng nhập thất bại”

Chúng ta tưởng tượng, code xử lí đăng nhập sẽ trong file javascript, còn cái nút thì ở file html. Như vậy, để cập nhật trạng thái màu, chữ của nút, ta thường phải làm các bước sau:
- Lấy DOM của nút, tức là trong file xử lí code cần cho ngôn ngữ lập trình biết là ta muốn thay đổi cái nút nào. thường ta sẽ sử dụng các cú pháp như document.getElementById (Lấy một dom bằng định danh ID), hoặc document.querySelector (Lấy bằng query), ….
- Thêm một event listener là khi nhấn nút sẽ chạy hàm nào đó, chạy logic gì đó cho nút
- Viết code xử lí hàm thay đổi nút
- Xoá listener, reset mọi thứ về ban đầu khi tải lại trang -> nút về trạng thái chưa ấn

Oke, hãy thử làm bài toán này, đầu tiên hãy tạo nút chúng ta cần ở HTML

<button type="button" id="dangnhapbutton">Đăng nhập</button>

Tiếp theo trong Javascript, ta tìm nút trên để thêm hàm xử lí khi nhấn cho nó

const dangnhapbutton = document.getElementById("dangnhapbutton"); //lấy nút theo id
dangnhapbutton .addEventListener("click", () => { //thêm event khi ấn 
  // xử lí khi ấn ở đây
});

Oke, giờ giả sử, khi ấn nút, thì nó cần hiện là “Đang đăng nhập”, ta sửa code dạng như sau

const dangnhapbutton = document.getElementById("dangnhapbutton"); //lấy nút theo id
dangnhapbutton .addEventListener("click", () => { //thêm event khi ấn 
  dangnhapbutton.textContent = "Đang đăng nhập"; //hiển thị đang đăng nhập
});

Giờ thì khi ấn nút, nút từ “đăng nhập” sẽ được chuyển thành “đang đăng nhập”. Tuy nhiên chúng ta cần nó hiển thị đăng nhập thành công, hoặc đăng nhập thất bại, hoặc sau 1 lúc thì nó lại chuyển về “đăng nhập”. Giờ làm sao nhỉ? Ta cần một cách nào đó để biết là nút đang ở trạng thái nào phía hiển thị, sau đó tuỳ nó đang ở trạng thái gì thì sẽ chuyển sang trạng thái mới.
Ví dụ ta thử làm Khi ấn 1 lần, chuyển đăng nhập -> đang đăng nhập. ấn tiếp thì chuyển lại về đăng nhập

<button type="button" id="dangnhapbutton" data-dangnhap="false">Đăng nhập</button> //ta cần một attribute data-dangnhap để lưu trạng thái phía hiển thị

const dangnhapbutton = document.getElementById("dangnhapbutton"); //lấy nút theo id
dangnhapbutton .addEventListener("click", () => { //thêm event khi ấn 
  const trangthai = dangnhapbutton .getAttribute("data-dangnhap") === "true"; //lấy trạng thái phía frontend xem là đăngn hập chưa
  dangnhapbutton .setAttribute("data-dangnhap", !trangthai ); //đảo ngược trạng thái
  dangnhapbutton .textContent = trangthai  ? "Đang đăng nhập" : "Đăng nhập"; //tuỳ trạng thái là 0 hay 1 thì cập nhật trạng thái mới 
});

Vấn đề cơ bản như 1 nút chỉ tắt bật như vậy. Nhưng ta phải lưu cùng lúc 1 attribute thông số gì đó ở phía html, rồi lại lưu 1 biến ở phía code để xử lí. Giả sử ta có 4 trạng thái, 10 trạng thái gì đó, ta sẽ phải lưu 10 cái ở phía html, rồi lấy ra 10 cái ở javascript rồi if else logic xử lí…
Điều này rõ ràng rất khó scale mở rộng hệ thống hơn. Sẽ ra sao nếu web của ta có rất nhiều nút? Ta sẽ có 1 đống code thừa trùng lặp, ta phải code rất nhiều cho một tác vụ tưởng chừng đơn giản, …
Liệu có cách nào để chúng liên kết với nhau, để ta có thể xử lí qua lại dễ dàng hơn không nhỉ?

Thời điểm này, việc tạo ra một cách thuận tiện, dễ mở rộng cho frontend là một thử thách với các công ty. Đây là tiền đề cho sự ra đời cho một số cái tên nổi tiếng, mà chắc bạn đã từng nghe qua như: Backbone, KnockoutJS, AngularJS, and jQuery.

Hãy cùng xem những giải pháp trên có gì khác với React, các cách tiếp cận khác nhau của từng giải pháp

Đọc tiếp phần 2:

[Web] CyouTodo

CyouTodo

Demo: https://todo.quochung.cyou

Source: https://github.com/quochung-cyou/CyouTodo

Author

quochungcyou

Project Structure

├── index.html - Trang hiển thị task
├── README.md
├── login.html - Trang đăng nhập đawng kí
├── dashboard.html - Trang dashboard
├── LICENSE - Giấy phép sử dụng
├── asset
│   ├── css
│   │   ├── index.css - CSS chung cho index/dashboard
│   │   ├── login.css - CSS cho login
│   │   ├── lightdarkmode.css - CSS cho phần bật sáng tối
│   │   ├── preload.css - CSS cho phần loader
|   ├── js
│   │   ├── index.js - JS chung cho index
│   │   ├── login.js - JS cho login
│   │   ├── lightdarkmode.js - JS cho phần bật sáng tối
│   │   ├── dashboard.js - JS cho phần dashboard
|   ├── img Lưu ảnh của project

Sequence Diagram

Description

Web bài tập lớn Team Web ProPTIT D21
Đề tài: CyouTodo – Ứng dụng quản lý công việc cá nhân
Phần chính là FrontEnd

Demo image

Feature

[x] Đăng nhập/Đăng ký
[x] Thêm/Xoá/Sửa công việc
[x] Light/Dark mode
[x] Đếm ngược thời gian công việc
[x] Hiển thị thời gian còn lại, mức độ quan trọng
[x] Thống kê công việc, lịch
[ ] Cài đặt tài khoản

Prerequisites and Setup

JavaScript
JQuery
HTML/CSS (Pure CSS)
Firebase for hosting/realtime database
ApexChart (JS) – Just for demo

License Information

This software is licensed under MIT License.
Read More on the license.

Giúp đỡ tôi bằng cách chia sẻ hoặc tặng sao

Thông tin liên hệ

Nếu có bất kỳ nội dung nào liên quan còn thiếu，hãy tạo issues cho nó, tôi sẽ theo dõi và cải thiện。

MIT License

Copyright (c) 2023 QuocHung

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

[Web-Buổi 3] Tìm hiểu về Responsive

Mục lục

Grid
FlexBox
Media Query
Break point
Viewport
GridView
Flexible Media
CSS Sass

I. Grid

Grid là một hệ thống layout mạnh mẽ, cho phép bạn tạo ra các layout phức tạp và đẹp mắt mà không cần phải sử dụng các thẻ div lồng nhau.
Grid được chia thành 2 phần chính là Grid Container và Grid Item.
Grid Container là phần bao bọc các Grid Item.
Grid Item là các phần tử con của Grid Container.

Example Code in MD:

    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>

Display Grid:

    .grid-container {
        display: grid;
    }

Grid Template Columns:

    .grid-container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
    }

Grid Template Rows:

    .grid-container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }

Grid Gap:

    .grid-container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-gap: 10px;
    }

Grid tự động cân bằng

    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto auto;
        grid-gap: 10px;
    }

Grid cân bằng theo tỉ lệ

    .grid-container {
        display: grid;
        grid-template-columns: 20% 30% 50%
        grid-gap: 10px;
    }

Tuỳ chỉnh vùng theo thuộc tính

    .item8 {
    grid-area: 1 / 2 / 5 / 6;
    }

II. FlexBox

FlexBox là một hệ thống layout mạnh mẽ, cho phép bạn tạo ra các layout phức tạp và đẹp mắt mà không cần phải sử dụng các thẻ div lồng nhau.
FlexBox được chia thành 2 phần chính là Flex Container và Flex Item.
Flex Container là phần bao bọc các Flex Item.
Flex Item là các phần tử con của Flex Container.

Example Code in MD:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

III. Media Query

Media Query là một công cụ cho phép bạn thay đổi style của một trang web dựa trên các điều kiện nhất định.
Media Query được sử dụng để tạo ra các trang web đáp ứng (responsive web).
Media Query được sử dụng để tạo ra các trang web có thể hiển thị đẹp trên các thiết bị khác nhau, với các kích thước màn hình khác nhau.

Example Code in MD:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

IV. Break point

Breakpoint, là những điểm (chiều rộng màn hình của thiết bị) mà ở đó giao diện được chuyển đổi cho phù hợp với thiết bị hiện tại, ví dụ như màn hình rộng hơn 1024px, thì có background-color màu đỏ, nhỏ hơn 1024px thì background-color màu xanh, khi này ta gọi 1024 là breakpoint.
Tùy vào chiều rộng hiển thị của thiết bị mà breakpoint sẽ khác nhau, hiện nay có rất nhiều thiết bị, tương ứng sẽ có nhiều chiều rộng khác nhau, nên sẽ có nhiều breakpoint khác nhau, do đó ta không thể thiết lập beakpoint cho từng loại thiết bị được.

Điểm breakpoint

320 px Màn hình chiều dọc cho smartphone nhỏ (VD iPhone 5)
480 px Màn hình chiều ngang cho smartphone nhỏ
640 px Màn hình chiều ngang cho smartphone vừa
768 px Màn hình chiều dọc cho tablet (VD: iPad)
1024 px Màn hình chiều ngang cho tablet (VD: iPad), hoặc chiều dọc cho tablet lớn (VD iPad Pro)

@media only screen and (min-width: 320px) {
 body{
   background-color: orange;
  }
}

V. Viewport

Viewport là khu vực hiển thị nội dung trên trình duyệt.
Viewport thay đổi theo thiết bị, và sẽ nhỏ hơn trên điện thoại di động so với màn hình máy tính.
Trước khi có máy tính bảng và điện thoại di động, các trang web được thiết kế chỉ cho màn hình máy tính, và việc thiết kế tĩnh và kích thước cố định là phổ biến.
Sau đó, khi chúng ta bắt đầu lướt web bằng máy tính bảng và điện thoại di động, các trang web có kích thước cố định quá lớn để vừa với viewport. Để khắc phục điều này, các trình duyệt trên các thiết bị đó thu nhỏ toàn bộ trang web để vừa với màn hình.
Khác biệt giữa có viewport và không có viewport:
Một trang web không có thẻ meta viewport sẽ được hiển thị với độ rộng của trang web, không phụ thuộc vào thiết bị.
Một trang web với thẻ meta viewport sẽ được hiển thị với độ rộng của thiết bị, và với tỷ lệ khung hình cố định.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width phù hợp với chiều rộng của thiết bị (đừng quên để thẻ meta viewport trong thẻ <head>)
initial-scale=1.0 thiết lập tỷ lệ khung hình của trang web
user-scalable=no ngăn người dùng phóng to hoặc thu nhỏ trang web
minimum-scale=1.0 ngăn người dùng thu nhỏ trang web
maximum-scale=1.0 ngăn người dùng phóng to trang web

VI. GridView

!!!

VII. Flexible Media

img {
  max-width: 100%;

  /* just in case, to force correct aspect ratio */
  height: auto !important;
}

VIII. CSS Sass

Sass là một ngôn ngữ mở rộng của CSS, nó có thể giúp việc viết CSS trở nên dễ dàng và nhanh hơn.
Sass là chữ viết tắt của Syntactically Awesome Style Sheets, chương trình tiền xử lý bằng ngôn ngữ kịch bản (Preprocessor Scripting Language ), sẽ được biên dịch thành CSS. Nghĩa là, mình sẽ làm style bằng SASS, rồi SASS sẽ render việc mình làm thành file CSS.
Sass có 2 phiên bản là Sass và SCSS, 2 phiên bản này khác nhau ở cú pháp, nhưng cùng có chức năng tương tự nhau.

[Web-Buổi 2] Tìm hiểu về CSS

Các cách style cho file HTML.
CSS selectors.
Độ ưu tiên, các loại đơn vị độ dài trong CSS.
Float, box model
Các loại position, z-index trong CSS.
Các loại display trong CSS.
Background style trong CSS.
Pseudo class và pseudo element.
Style cho text trong CSS.

I. Các cách style cho file HTML.

Có 3 cách để style cho file HTML:
- Inline style: style được viết trực tiếp vào thẻ HTML.
- Internal style: style được viết trong thẻ <style> của file HTML.
- External style: style được viết trong file CSS riêng.
Inline style:
- Cú pháp: <tag style="property: value">
- Ví dụ: <p style="color: red">Hello World</p>
- Ưu điểm: style được viết trực tiếp vào thẻ HTML nên có độ ưu tiên cao nhất.
- Nhược điểm: khó quản lý, khó bảo trì, khó mở rộng.
Internal style:
- Cú pháp: <style>selector {property: value}</style>
- Ví dụ: <style> p { color: red; } </style>
- Ưu điểm: style được viết trong file HTML nên có độ ưu tiên cao hơn so với external style.
- Nhược điểm: khó quản lý, khó bảo trì, khó mở rộng.
External style:
- Cú pháp: <link rel="stylesheet" href="path/to/file.css">
- Ví dụ: <link rel="stylesheet" href="style.css">
- Ưu điểm: style được viết trong file CSS riêng nên có thể tái sử dụng, quản lý, bảo trì, mở rộng dễ dàng.
- Nhược điểm: style được viết trong file CSS riêng nên có độ ưu tiên thấp nhất.

II. CSS selectors.

CSS selectors là các cách chọn phần tử HTML để style.
Có nhiều loại CSS selectors:
- Element selectors: chọn phần tử HTML dựa vào tên thẻ.
- Class selectors: chọn phần tử HTML dựa vào tên class.
- ID selectors: chọn phần tử HTML dựa vào tên ID.
- Universal selectors: chọn tất cả các phần tử HTML.
- Grouping selectors: chọn nhiều phần tử HTML cùng lúc.
- Descendant selectors: chọn phần tử HTML con của phần tử HTML khác.
- Adjacent sibling selectors: chọn phần tử HTML anh em cùng cấp của phần tử HTML khác.
- Child selectors: chọn phần tử HTML con của phần tử HTML khác.
- Attribute selectors: chọn phần tử HTML dựa vào thuộc tính của phần tử HTML đó.
- Pseudo-class selectors: chọn phần tử HTML dựa vào trạng thái của phần tử HTML đó.
- Pseudo-element selectors: chọn phần tử HTML dựa vào phần tử HTML đó.
- Combinators: kết hợp nhiều CSS selectors lại với nhau.

Cú pháp: selector {property: value}
Ví dụ: p { color: red; }
Select phần tử HTML có tên thẻ là p và style cho nó màu đỏ.
Ví dụ selector element có id là id1 và style cho nó màu đỏ: #id1 { color: red; }
Ví dụ selector element có class là class1 và style cho nó màu đỏ: .class1 { color: red; }

III. Độ ưu tiên, các loại đơn vị độ dài trong CSS.

Độ ưu tiên trong CSS:
- Inline style > Internal style > External style.
- !important > inline style > internal style > external style.
- Selector có độ dài dài hơn sẽ có độ ưu tiên cao hơn.
- Selector có độ ưu tiên cao hơn sẽ được áp dụng.
Các loại đơn vị độ dài trong CSS:
- px: pixel.
- em: độ dài của phần tử HTML cha.
- rem: độ dài của phần tử HTML root (thường là thẻ <html>).
- %: phần trăm.
- vw: độ dài của viewport theo chiều ngang.
- vh: độ dài của viewport theo chiều dọc.

IV. Float, box model

Float: thuộc tính dùng để xác định vị trí của phần tử HTML.
Có 4 giá trị của float:
- left: phần tử HTML sẽ nằm bên trái.
- right: phần tử HTML sẽ nằm bên phải.
- none: phần tử HTML sẽ không nằm bên trái hay bên phải.
- inherit: phần tử HTML sẽ kế thừa giá trị float của phần tử HTML cha.

VD:

p {
    float: left;
}

Box model: mô hình hình hộp của phần tử HTML.
Có 4 thành phần của box model:
- Content: nội dung của phần tử HTML.
- Padding: phần đệm giữa content và border.
- Border: viền của phần tử HTML.
- Margin: phần đệm giữa border và phần tử HTML khác.

VD:

p {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 10px;
}

Các thuật ngữ trên có thể tạm giải thích như sau:

content (hay content area): là vùng chứa nội dung của một element, với chiều rộng/cao được xác định qua thuộc tính width và height. Vùng này thường chứa text, hình ảnh, video…
padding (hay padding area): cho biết độ rộng của vùng padding bao quanh vùng content.
border (hay border area): cho biết độ rộng (và style) của border bao quanh vùng padding.
margin (hay margin area): cho biết độ rộng của vùng margin bao quanh vùng border.

V. Các loại position, z-index trong CSS.

Có 5 loại position:
- static: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML.
- relative: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể dịch chuyển theo hướng top, bottom, left, right.
- absolute: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể dịch chuyển theo hướng top, bottom, left, right, và sẽ được đặt theo phần tử HTML cha có position là relative hoặc absolute.
- fixed: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể dịch chuyển theo hướng top, bottom, left, right, và sẽ được đặt theo phần tử HTML cha có position là relative hoặc absolute, và sẽ được đặt theo viewport.
- sticky: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể dịch chuyển theo hướng top, bottom, left, right, và sẽ được đặt theo phần tử HTML cha có position là relative hoặc absolute, và sẽ được đặt theo viewport, và sẽ được đặt lại vị trí ban đầu khi scroll.

VD:

p {
    position: relative;
    top: 10px;
    left: 10px;
}

Có 2 loại z-index:
- auto: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML.
- number: phần tử HTML sẽ được đặt theo thứ tự xuất hiện trong file HTML, nhưng có thể đặt lại vị trí bằng cách thay đổi giá trị number.

VD:

p {
    z-index: 1;
}

VI. Các loại display trong CSS.

Có 4 loại display:
- block: phần tử HTML sẽ được hiển thị trên một dòng riêng biệt.
- inline: phần tử HTML sẽ được hiển thị trên một dòng với các phần tử HTML khác.
- inline-block: phần tử HTML sẽ được hiển thị trên một dòng với các phần tử HTML khác, nhưng có thể thay đổi kích thước.
- none: phần tử HTML sẽ không được hiển thị.

VD:

p {
    display: inline-block;
}

VII. Background style trong CSS.

Có 5 thuộc tính của background:
- background-color: màu nền.
- background-image: hình nền.
- background-repeat: lặp lại hình nền.
- background-position: vị trí hình nền.
- background-attachment: cố định hình nền.

VD:

p {
    background-color: red;
    background-image: url("https://www.w3schools.com/cssref/img_tree.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

VIII. Pseudo class và pseudo element.

Pseudo class: lựa chọn phần tử HTML dựa vào trạng thái của phần tử HTML đó.
Có 4 loại pseudo class:
- :active: phần tử HTML đang được click.
- :hover: phần tử HTML đang được hover.
- :focus: phần tử HTML đang được focus.
- :visited: phần tử HTML đã được truy cập.

VD:

p:hover {
    color: red;
}

Pseudo element: lựa chọn phần tử HTML dựa vào phần tử HTML đó.
Có 4 loại pseudo element:
- ::after: thêm nội dung vào phần tử HTML sau.
- ::before: thêm nội dung vào phần tử HTML trước.
- ::first-letter: thêm nội dung vào phần tử HTML đầu tiên.
- ::first-line: thêm nội dung vào phần tử HTML dòng đầu tiên.

VD:

p::after {
    content: "Hello World";
}

IX. Style cho text trong CSS.

Có 4 thuộc tính của text:
- color: màu chữ.
- text-align: căn lề.
- text-decoration: gạch chân.
- text-transform: chuyển đổi chữ.

VD:

p {
    color: red;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
}

[Web-Buổi 1] Tìm hiểu về cách hoạt động của Web, HTML cơ bản

Mục lục:

Cách thức hoạt động của một trang web
Cấu trúc của HTML
Block, inline elements. Qua phân biệt div, span.
Các thẻ liên quan đến table trong HTML
Các thẻ: image, video, links, audio
Section elements: div, span, header, footer, nav, main, section, article
HTML text fundamentals: h1 -> h6, p, ul, li
Các thẻ liên quan đến form: form, input, button, label, textarea
Có thể tìm hiểu các thẻ khác ngoài các thẻ trên các thẻ trên

I. Cách thức hoạt động của một trang web

Khi máy tính nhà của mình kết nối đến một trang web trên mạng, ta có thể gọi chúng là các clients (máy khách) và servers (máy chủ).

Ảnh minh hoạ:

Client máy khách sẽ gửi các Requests (yêu cầu) về máy chủ, và máy chủ sẽ trả về Response (Phản hồi) tương ứng với yêu cầu của người dùng.

VD:

Người dùng gửi yêu cầu tìm trang bạn bè, server trả về trang banbe.html
Người dùng gửi yêu cầu nhắn tin, server trả về dữ liệu tin nhắn

Ở thời kì đầu của web, đa phần các web đều là web tĩnh. Tức là các trang web chỉ có thể hiển thị các nội dung cố định, không thể thay đổi được. Ví dụ như các trang web tin tức, các trang web thông tin, các trang web giới thiệu sản phẩm, …

Tuy nhiên, với sự phát triển của công nghệ, các trang web ngày nay có thể thay đổi được nội dung, có thể tương tác với người dùng. Ví dụ như các trang web mạng xã hội, các trang web thương mại điện tử, các trang web chơi game, … (Được gọi là web động). Các trang web động sẽ có dữ liệu hiển thị tuỳ theo người dùng khác nhau, và có thể thay đổi được dữ liệu hiển thị tuỳ theo người dùng. Ví dụ như trang web mạng xã hội, khi bạn đăng nhập vào trang web, bạn sẽ thấy các bài viết của bạn bè, và bạn có thể đăng bài viết của mình lên trang web.

Vậy nhìn chung thì Web là một dữ liệu sẽ được server trả về khi người dùng yêu cầu. Tuy nhiên nếu đào sâu ra thì đây là một quá trình rất dài, tưởng tượng máy bạn là nhà bạn, và web bạn truy cập là một cửa hàng trên phố, lúc này để truy cập web, bạn cần đi qua một tuyến đường để đến cửa hàng đó.

Quá trình xảy ra khi bạn kết nối một trang web:

Đầu tiên tưởng tượng, để đến một cửa hàng (web), ta cần địa chỉ của nó. Các máy chủ hay máy người dùng khi kết nối đến hệ thống internet toàn cầu đều được cấp một địa chỉ, thường là Ipv4 (ví dụ 98.139.180.149)
Tuy nhiên, số lượng ipv4 là có hạn. Vì vậy thông thường các máy tính sẽ nằm trong một mạng cục bộ, và chỉ có một ipv4 bên ngoài quyết định chúng. VD: Toàn bộ máy tính của 1 toà nhà sẽ đều kết nối vào một modem mạng có Ipv4 là (98.139.180.149). Đây sẽ là địa chỉ để bên ngoài có thể kết nối tới. Tuy nhiên khi có yêu cầu gửi tới, ta có thể cài đặt nó sẽ được đi vào máy tính nào trong toà nhà đó, các máy tính lúc này sẽ có một ipv4 cục bộ kiểu: 192.168.0.1, 192.168.0.2, ….. Tưởng tượng: Các cửa hàng nằm trong phố Nguyễn Trãi, ta đi đến Nguyễn Trãi và nó sẽ là số 100 Nguyễn Trãi, số 101 Nguyễn Trãi, …

Như vậy ta đã biết là bằng cách trên. Một server có thể truy cập bằng một địa chỉ Ipv4. Kiểu ta có thể truy cập bằng http://98.139.180.149. Tuy nhiên người dùng không thể nhớ hết số IP này, vì vậy ta cần một hệ thống định dang (tên miền – domain) để biến ip số này thành các tên miền dễ nhớ. VD: http://google.com, http://facebook.com, http://youtube.com, …
Để có thể biết được địa chỉ ip của một tên miền, ta cần một hệ thống DNS (Domain Name System). Hệ thống này sẽ lưu trữ các tên miền và địa chỉ ip tương ứng của nó. VD: google.com -> 20.002.003.149
Các hệ thống DNS như một cuốn từ điển và cho biến tên miền nào chỉ đến ip nào. Thông thường khi kết nối, đầu tiên máy tính sẽ tìm lại vào cache của chính máy mình để xem tên miền đã được lưu chưa, nếu chưa có thì máy tính sẽ tìm đến các dns server của ISP (nhà mạng, ví dụ Viettel, VNPT). Nếu vẫn chưa tìm thấy, máy tính sẽ tìm đến các DNS Server khác như của Google (8.8.8.8), Cloudflare (1.1.1.1), …
Khi người dùng gõ tên miền vào trình duyệt, trình duyệt sẽ gửi yêu cầu tới DNS để lấy địa chỉ ip của tên miền đó. Sau đó trình duyệt sẽ gửi yêu cầu tới địa chỉ ip đó, và server sẽ trả về dữ liệu tương ứng với yêu cầu của người dùng.

II. Cấu trúc của HTML

HTML là một ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language). Nó được sử dụng để xây dựng các trang web. HTML được sử dụng để đánh dấu các phần tử trong một trang web. Các phần tử này được đánh dấu bằng các thẻ HTML. Mỗi thẻ HTML bắt đầu bằng một ký tự đặc biệt và kết thúc bằng một ký tự đặc biệt. Nội dung giữa các thẻ HTML là nội dung của phần tử đó. Ví dụ: <p> This is a paragraph </p>
Các thẻ HTML có thể được phân thành hai loại: thẻ đóng và thẻ không đóng. Thẻ đóng có một thẻ đóng tương ứng, trong khi thẻ không đóng không có thẻ đóng tương ứng. Ví dụ: <p> This is a paragraph </p> là một thẻ đóng, trong khi <br> là một thẻ không đóng.

III. Thẻ khối và thẻ nội tuyến

Các thẻ HTML có thể được nhóm thành các thẻ khối và các thẻ nội tuyến. Các thẻ khối bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của trình duyệt, trong khi các thẻ nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm một phần của chiều rộng của trình duyệt. Ví dụ: <p> là một thẻ khối, trong khi <b> là một thẻ nội tuyến.

Có 2 kiểu giá trị hiển thị chính : block và inline.

Block-level elements (thẻ khối) :

Một block-elements luôn bắt đầu trên một dòng mới và Browser tự động thêm khoảng trắng (margin) và trước và sau phần tử đó. Nó luôn chiếm toàn bộ chiều rộng có sẵn. 2 block-elements thường dùng là : <p> và <div>.

Inline elements (thẻ nội tuyến) :

Một Inline elements không bắt đầu trên một dòng mới. Nó chỉ chiếm chiều rộng cần thiết. Một phần tử inline không thể chưa phần tử block.

<div> là một thẻ khối, nó được sử dụng để nhóm các phần tử HTML lại với nhau. Nó không có bất kỳ ý nghĩa đặc biệt nào. Nó thường được sử dụng để tạo các nhóm phần tử CSS để áp dụng các kiểu CSS cho các phần tử đó. Ví dụ: <div> This is a div </div>
<span> là một thẻ nội tuyến, nó được sử dụng để nhóm các phần tử HTML lại với nhau. Nó không có bất kỳ ý nghĩa đặc biệt nào. Nó thường được sử dụng để tạo các nhóm phần tử CSS để áp dụng các kiểu CSS cho các phần tử đó. Ví dụ: <span> This is a span </span>

IV. Các thẻ liên quan đến table trong HTML

<table> là một thẻ khối, nó được sử dụng để tạo một bảng. Nó có thể chứa một hoặc nhiều thẻ <tr>. Ví dụ: <table> This is a table </table>
<tr> là một thẻ khối, nó được sử dụng để tạo một hàng trong bảng. Nó có thể chứa một hoặc nhiều thẻ <td>. Ví dụ: <tr> This is a table row </tr>
<td> là một thẻ nội tuyến, nó được sử dụng để tạo một ô trong bảng. Nó có thể chứa một hoặc nhiều thẻ <p>. Ví dụ: <td> This is a table cell </td>
<th> là một thẻ nội tuyến, nó được sử dụng để tạo một ô trong bảng. Nó có thể chứa một hoặc nhiều thẻ <p>. Nó khác với thẻ <td> ở chỗ nó được sử dụng để tạo một ô tiêu đề trong bảng. Ví dụ: <th> This is a table header </th>

V. Các thẻ: image, video, links, audio

<img> là một thẻ nội tuyến, nó được sử dụng để chèn một hình ảnh vào trang web. Nó không có thẻ đóng tương ứng. Ví dụ: <img src="image.jpg" alt="Image">

<img src="url" alt="alternatetext">

<video> là một thẻ khối, nó được sử dụng để chèn một video vào trang web. Nó có thể chứa một hoặc nhiều thẻ <source>. Ví dụ: <video> This is a video </video>
<source> là một thẻ nội tuyến, nó được sử dụng để chỉ định một nguồn video. Nó không có thẻ đóng tương ứng. Ví dụ: <source src="video.mp4" type="video/mp4">
<audio> là một thẻ khối, nó được sử dụng để chèn một âm thanh vào trang web. Nó có thể chứa một hoặc nhiều thẻ <source>. Ví dụ: <audio> This is an audio </audio>
<source> là một thẻ nội tuyến, nó được sử dụng để chỉ định một nguồn âm thanh. Nó không có thẻ đóng tương ứng. Ví dụ: <source src="audio.mp3" type="audio/mp3">
<a> là một thẻ nội tuyến, nó được sử dụng để tạo một liên kết đến một trang web khác. Nó có thể chứa một hoặc nhiều thẻ <img>. Ví dụ: <a href="https://www.google.com"> This is a link </a>

<a href="url">link text</a>

attributes quan trọng nhất của thẻ là “href”, nó cho biết đích đến của link.
Target attribute :
- _self : mở tài liệu cùng cửa sổ khi nhấn link.
- _blank : mở tài liệu ở cửa sổ mới.
- _parent : mở tài liệu trong khung chính.
- _top : mở tài liệu trong toàn bộ cửa sổ.

VI. Section elements: div, span, header, footer, nav, main, section, article

https://www.w3schools.com/html/img_sem_elements.gif

<div> là một thẻ khối, nó được sử dụng để nhóm các phần tử HTML lại với nhau. Nó không có bất kỳ ý nghĩa đặc biệt nào. Nó thường được sử dụng để tạo các nhóm phần tử CSS để áp dụng các kiểu CSS cho các phần tử đó. Ví dụ: <div> This is a div </div>
<span> là một thẻ nội tuyến, nó được sử dụng để nhóm các phần tử HTML lại với nhau. Nó không có bất kỳ ý nghĩa đặc biệt nào. Nó thường được sử dụng để tạo các nhóm phần tử CSS để áp dụng các kiểu CSS cho các phần tử đó. Ví dụ: <span> This is a span </span>
<header> là một thẻ khối, nó được sử dụng để tạo một tiêu đề cho trang web hoặc một phần của trang web. Ví dụ: <header> This is a header </header>
<footer> là một thẻ khối, nó được sử dụng để tạo một chân trang cho trang web hoặc một phần của trang web. Ví dụ: <footer> This is a footer </footer>
<nav> là một thẻ khối, nó được sử dụng để tạo một thanh điều hướng cho trang web hoặc một phần của trang web. Ví dụ: <nav> This is a nav </nav>
<main> là một thẻ khối, nó được sử dụng để tạo một phần chính của trang web. Ví dụ: <main> This is a main </main>
<section> là một thẻ khối, nó được sử dụng để tạo một phần của trang web. Ví dụ: <section> This is a section </section>
<article> là một thẻ khối, nó được sử dụng để tạo một bài viết. Ví dụ: <article> This is an article </article>

VII. HTML text fundamentals: h1 -> h6, p, ul, li

<h1> là một thẻ khối, nó được sử dụng để tạo một tiêu đề lớn nhất cho trang web hoặc một phần của trang web. Ví dụ: <h1> This is a heading </h1>
<h2> là một thẻ khối, nó được sử dụng để tạo một tiêu đề lớn hơn <h1> cho trang web hoặc một phần của trang web. Ví dụ: <h2> This is a heading </h2>
…
<p> là một thẻ khối, nó được sử dụng để tạo một đoạn văn bản. Ví dụ: <p> This is a paragraph </p>
<ul> là một thẻ khối, nó được sử dụng để tạo một danh sách không có thứ tự. Nó có thể chứa một hoặc nhiều thẻ <li>. Ví dụ: <ul> This is an unordered list </ul>
<li> là một thẻ khối, nó được sử dụng để tạo một mục trong danh sách. Nó có thể chứa một hoặc nhiều thẻ <p>. Ví dụ: <li> This is a list item </li>
<ol> là một thẻ khối, nó được sử dụng để tạo một danh sách có thứ tự. Nó có thể chứa một hoặc nhiều thẻ <li>. Ví dụ: <ol> This is an ordered list </ol>

VIII. Các thẻ liên quan đến form: form, input, button, label, textarea

<form> là một thẻ khối, nó được sử dụng để tạo một biểu mẫu. Nó có thể chứa một hoặc nhiều thẻ <input>, <button>, <label>, <textarea>. Ví dụ: <form> This is a form </form>
<input> là một thẻ nội tuyến, nó được sử dụng để tạo một trường nhập liệu. Nó không có thẻ đóng tương ứng. Ví dụ: <input type="text">
<button> là một thẻ nội tuyến, nó được sử dụng để tạo một nút. Nó có thể chứa một hoặc nhiều thẻ <img>. Ví dụ: <button> This is a button </button>
<label> là một thẻ nội tuyến, nó được sử dụng để tạo một nhãn cho một trường nhập liệu. Nó có thể chứa một hoặc nhiều thẻ <input>. Ví dụ: <label> This is a label </label>
<textarea> là một thẻ khối, nó được sử dụng để tạo một trường nhập liệu dài. Nó không có thẻ đóng tương ứng. Ví dụ: <textarea> This is a textarea </textarea>
<select> là một thẻ khối, nó được sử dụng để tạo một trường nhập liệu dạng danh sách thả xuống. Nó có thể chứa một hoặc nhiều thẻ <option>. Ví dụ: <select> This is a select </select>
<option> là một thẻ khối, nó được sử dụng để tạo một mục trong danh sách thả xuống. Nó không có thẻ đóng tương ứng. Ví dụ: <option> This is an option </option>

IX. Có thể tìm hiểu các thẻ khác ngoài các thẻ trên các thẻ trên

<br> : Xuống dòng
<hr> : Thẻ ngang
<i> : In nghiêng
<b> : In đậm