Wondershare EdrawMind
MindMap Gallery HTML, CSS and Responsive
- 2.4k
- 14
- 4
HTML, CSS and Responsive
Mindmap sumary about html, css, bootstrap basic
Edited at 2021-05-06 04:28:07
- 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
Title
Style
HTML Văn bản
H1-H6
- Định nghĩa tiêu đề cho nội dung HTML- Tiêu đề lớn nhất là <h1>, và tiêu đề nhỏ nhất là <h6>.- Chỉ nên thể hiện tiêu đề, không dùng cho mục đích khác
<p>
Giúp trình duyệt xác định được đoạn văn bản trong trang HTML
HTML Liên kết
<a href></a>
HTML Ảnh
<img src="link"></img>
HTML List
<ol></ol>
Order list: danh sách có thứ tự
<ul></ul>
UnOrderList: danh sách có ko theo thứ tự
<li></li>
List item: thành phần trong danh sách
HTML Form
HTML Script
File type .html
Tạo ra bằng các trình soạn thảo code có thể lưu với định dạng .html
Notepad++, Visual Studio Code, Sublime,...
Cấu trúc HTML
<!Doctype>
chỉ cho trình duyệt web biết được phiên bản ngôn ngữ đánh dấu (markup language) nào được sử dụng trong trang web.
<Head></Head>
Khai báo ban đầu cho website
Meta
CSS
Title
<Body></Body>
Nơi hiển thị nội dung trang web
<Header>
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,...
<Navigation>
Chứa liên kết điều hướng đến toàn bộ các page trong website
<Content>
<Main>
Chứa nội dung chính muốn hiển thị cho mọi người xem khi truy cập web
<Sidebar>
Chứa nội dung phụ: liên kết quảng cáo,...
<Footer>
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
ID
#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
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">
<meta name="viewport"
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