Mind Map Gallery HTML, CSS and Responsive

HTML, CSS and Responsive

Mindmap sumary about html, css, bootstrap basic

Edited at 2021-05-06 04:28:07

An Nguyen Kim

HTML, CSS and Responsive

An Nguyen Kim

Recommended to you
Outline

Website

Tập hợp các trang web (web page) cùng chung trong 1 domain or subdomain, truy cập qua giao thức http...

Web tĩnh

- Tạo/sửa/xóa nội dung: phải có kiến thức HTML CSS cơ bản- Tạo ra bằng: HTML CSS

Web động

- Tạo/sửa/xóa nội dung: dễ dàng thông qua các chức năng đã được lập trình sẵn.- Tạo ra bằng: PHP, ASP, JSP

HTML

HTML là gì

Hyper Text Makerup LanguageNgôn ngữ đánh dấu siêu văn bản

- Định dạng nội dung, hình ảnh, video,...- Xây dựng cấu trúc website

File HTML

Phần tử HTML (Tag)

Thẻ mở <tên thẻ>

Nội dung bên trong cặp thẻ

Thẻ đóng </tên thẻ>

Phần tử ko có thẻ đóng => <br>, <hr>,...

Thẻ cơ bản

HTML Meta

Meta

CSS

Title

Nơi hiển thị nội dung trang web

có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...

Chứa liên kết điều hướng đến toàn bộ các page trong website

<Main>

Chứa nội dung chính muốn hiển thị cho mọi người xem khi truy cập web

Chứa nội dung phụ: liên kết quảng cáo,...

Chứa phần thông tin dưới chân trang web: thông tin cty, địa chỉ,....liên kết,....

CSS

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet languageHỗ trợ html định dạng màu sắc, font chữ, vị trí các thành phần trong trang,.....

CSS type

1.Inline

Nhúng trực tiếp vào phần tử HTML bằng việc sử dụng thuộc tính style của phần tử

2.Internal

Tạo các bộ chọn trực tiếp trên trang bằng cách đặt trong thẻ <style></style>

3.External

Tạo file css nằm riêng và nhúng vào trang sử dụng thẻ <link> để nhúng vào trang

CSS selector

Basic CSS Selector

Element

div { color: magenta; } => chọn phần tử (tag) div

Class

.hello { color: red; } => chọn phần tử có class hello

#app { color: red;} => chọn phần tử có id app

Universal:

* { color: yellow; } => chọn tất cả phần tử

Descendant CSS Selector

.container .hello-class { color: red;} =>Chọn bất kỳ phần tử class hello-class nào bên trong class container

.paragraph * { color: blue; } => Chọn tất cả phần tử bên trong class paragraph

.container > .hello-class {color: blue;} => Chọn phần tử class hello-class trực tiếp nằm trong class container

Multiple CSS Selector

.outside-class, .again-class, .hola-class {color: purple;} => Chọn nhiều phần tử, class, id

Thuộc tính cơ bản

Định dạng chung

Background

- background-color: xác định màu cho nền. - background-image: xác định hình cho nền. - background-position: xác định vị trí cho nền, thường được sử dụng kèm với background-image. - background-repeat: xác định hình nền được lặp lại như thế nào. - background-attachment: xác định thành phần nền được cố định hoặc cuộn so với trang, được sử dụng kèm với background-image. - background: dạng tổng quát, kết hợp của các loại background trên.

Border

* Thuộc tính định dạng - border-color: màu cho đường viền - border-style: kiểu cho đường viền - border-width: độ rộng cho đường viền *Thuộc tính vị trí - border-top: đường viền hiển thị bên trên - border-right: đường viền hiển thị bên phải - border-bottom: đường viền hiển thị bên dưới - border-left: đường viền hiển thị bên trái - border: đường viền hiển thị bao quanh thành phầnborder: 1px solid black

Width/Height

Định dạng chiều rộng (Width) và chiều cao (Height) cho thành phần

Text-alight

Left: Sắp nội dung theo chiều ngang nằm về bên trái, đây là dạng mặc định.

Right: Sắp nội dung theo chiều ngang nằm về bên phải

Center: Sắp nội dung theo chiều ngang nằm giữa.

Justify: Sắp xếp nội dung cho các dòng có chiều rộng bằng nhau.

Inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Text

Color: định dạng màu sắc

Font-family: định dạng font chữ

Font-size: kích thước chữ

Font-weight: độ dày chữ (bold, bolder,...)

Text-decoration: xác định thành phần có gạch dưới hay ko / blink, line-through, overline, underline, none

Điều khiển nội dung

Display: Xác định sự hiển thị cho thành phần, chuyển đổi thành phần từ dạng dạng này sang dạng khác

display: block => hiển thị thành phần thành dạng block (khối)

display: inline => hiển thị thành phần thành dạng inline (cùng 1 dòng)

display: none => không hiển thị thành phần.

Position: xác đinh vị trí tương đối và tuyệt đối cho thành phần, vị trí này phụ thuộc vào các giá trị khai báo của thành phần và thành phần bao ngoài nó

position: relative: định vị trí tương đối cho thành phần, khi sử dụng thuộc tính này thành phần sẽ định vị trí theo mốc vùng hiển thị của chính nó, vị trí này không phụ thuộc vào vùng không gian, vùng không gian vẫn được giữ như ban đầu.

position: absolute: định vị trí tuyệt đối cho thành phần, khi sử dụng thuộc tính này vùng không gian của thành phần sẽ biến mất (trở thành vùng trống), thành phần sẽ thoát khỏi vùng không gian của nó, gốc của thành phần lúc này sẽ được tính theo các tính chất sau:

position: fixed: định vị trí tuyệt đối cho thành phần với gốc vị trí tính theo vùng hiển thị của trình duyệt, vùng hiển thị này chính là cửa sổ của trình duyệt.

position: static: mặc định của thành phần

Z-Index: thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.

Auto: Tự động sắp xếp thứ tự chồng nhau cho thành phần, đây là dạng mặc định.

Giá trị: Sắp xếp thứ tự chồng nhau cho thành phần theo giá trị.

Inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Sub Topic

BOX MODEL

Content

Phần nội dung nằm giữa box model

Padding

Khoảng cách giữa content và border

Border

Khoảng cách giữa padding và margin

Margin

Khoảng cách giữa các box với nhau

Responsive

Responsive web design: (RWD) là kỹ thuật thiết kế web sao cho nó hiển thị nội dung “co giãn” có thể đáp ứng phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone, TV…

Mobile Firts: được coi là các tiêu chuẩn ưu tiên mặc định cho mobile devices (các khung hình nhỏ như thiết bị di động) sau đó mới override các giá trị cho tablet, và sau cùng là desktop.

Viewport: là khu vực mà người dùng có thể dòm thấy nội dung của trang web<meta name="viewport" content="width=device-width, initial-scale=1">

Thiết lập cho trang web hiển thị tương ứng với kích thước của từng thiết bị khác nhau

width=device-width

Đặt chiều rộng của trang web theo chiều rộng màn hình của thiết bị

initial-scale=1.0

Thiết lập mức độ phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.

CHÚ Ý

Không sử dụng các HTML element có chiều rộng cố định quá lớn sẽ bị tràn kha khỏi khung hình khi xem ở những màn hình thiết bị nhỏ

KHÔNG để thiết lập Responsive dựa vào chiều rộng cụ thể mà thay vào đó là từ kích thước nào đến kích thước nào nó sẽ hiển thị giống nhau

MediaQuery: Truy vấn phương tiện là một kỹ thuật CSS, được giới thiệu trong CSS3. Cho phép kết xuất nội dung để thích ứng với các điều kiện như độ phân giải màn hình (ví dụ: màn hình điện thoại thông minh so với màn hình máy tính).

CSS FRAMEWORK

BOOTSTRAP

IMPORT

OFFLINE

1. Download bộ sources bootstrap từ getbootstrap.com2. Để thư mục vào root folder của project3. Thiết lập viewport4. Import path đến file bootstrap vào file html

ONLINE

Dùng trực tiếp link CDN được Bootstrap cung cấp tại getbootstrap.com1. Thiết lập viewport2. Chèn code sau vào trong thẻ <Head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

BASIC

GRID SYSTEM

Grid System là một hệ thống lưới Bao gồm nhiều dòng và nhiều cột, Số lượng dòng: tùy vào bạn thiết kếSố lượng cột trên mỗi dòng luôn luôn là 12. Kích thước trong Grid System tính bằng cộtMỗi cột này sẽ chiếm một % nhất định kích thước của layout. Số phần % của mỗi cột đã được định nghĩa sẵn trong bootstrap. Việc của chúng ta lúc này chỉ đơn giản là sử dụng nó.

Row

Là khối lớn nhất. Khi chúng ta tạo một hàng, nó chiếm toàn bộ chiều rộng của thành phần chứa nó.

Mỗi một hàng, phải được bao bọc bởi class .container hoặc .container-fluid để canh giữa và cách khoảng cách lề.

Mỗi một hàng gồm các nhóm cột.Nội dung nằm trong cột, mỗi cột có thể chứa 12 cột con khác

Giữa các cột sẽ có khoảng padding. Khoảng padding của cột đầu và cuối sẽ được quy định bởi .rows.

Nếu có nhiều hơn 12 cột trên một hàng thì mỗi nhóm 12 cột sẽ cố định và phần dư sẽ được chuyển sang hàng mới.

Grid system được đinh nghĩa với các kích thước màn hình khác nhau mà hiển thi khác nhau

Extra Small - xs: màn hình nhỏ thêm (điện thoại di động)

Small - sm: màn hình nhỏ (máy tính bảng)

Medium - md: màn hình trung bình (một số máy tính để bàn)

Large - lg: màn hình lớn (máy tính để bàn)

Extra Large - xl - màn hình lớn

Colmn

Vị trí các thành phần theo chiều dọc được thể hiện dựa trên các cột. Duy nhất các cột được đặt trong hàng, Đặt nội dung trực tiếp trong hàng sẽ làm vỡ bố cục.

Document

https://getbootstrap.com/docs/4.3/getting-started/introduction/ truy cập địa chỉ trên để xem hướng dẫn cách sử dụng Bootstrap

ADVANCE

NAVIGATION BOOTSTRAP

https://getbootstrap.com/docs/4.0/components/navbar/

SLIDE BOOTSTRAP

https://getbootstrap.com/docs/4.0/components/carousel/

SEMANTIC UI

Sub Topic

Website Management

Domain: tên miền là tên đại diên cho một website, thay thế địa chỉ ip

Hosting: cung cấp dịch vụ lưu trữ website trên internet

DNS: là viết tắt của cụm từ Domain Name System, mang ý nghĩa đầy đủ là hệ thống phân giải tên miền. DNS cơ bản là một hệ thống chuyển đổi các tên miền website mà chúng ta đang sử dụng, ở dạng www.tenmien.com sang một địa chỉ IP dạng số tương ứng với tên miền đó và ngược lại.

SEO: là từ viết tắt của Search Engine Optimization – Tối ưu hóa công cụ tìm kiếm. Và SEO website là tập hợp các phương pháp giúp cải thiện thứ hạng của một website trên trang kết quả của công cụ tìm kiếm

ONPAGE: là tập hợp các phương pháp tối ưu hóa các yếu tố hiển thị ngay trên trang web, các trang con và được lặp lại nhiều lần khi đăng các bài viết mới.

Content

Internal link

Site performance

Sub Topic

Cấu trúc URL

Anchor text

Thẻ HTML

Keyword: keyword là tag giúp cho công cụ tìm kiếm xác định được từ khóa và chủ đề mà một trang web thể hiện, truyền tải

Description là loại thẻ được dùng để hiển thị đoạn mô tả ngắn gọn về nội dung, lĩnh vực của doanh nghiệp trên website

Sub Topic

Mật độ từ khóa

Broken link

OFFPAGE: là tập hợp các thủ thuật tối ưu hóa các yếu tố bên ngoài website, bao gồm xây dựng liên kết (link building), marketing trên các kênh social media, social media bookmarking,.....

Link build

Social signal

Brand mention

Directory submission

Guest posting