Giới thiệu HTML các thẻ HTML thông dụng đặt tên chuẩn BEM viết HTML chuẩn SEO html seo bem css
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (223.41 KB, 19 trang )
HTML
1.
Giới thiệu HTML
2.
Các thẻ HTML thông dụng
3.
Đặt tên chuẩn BEM
4.
Viết HTML chuẩn SEO
5.
Thực hành
Bản quyền thuộc về Trần Nghĩa
Email:
Giới thiệu HTML
HTML khơng phải là ngơn ngữ lập trình mà là ngôn ngữ
đánh dấu siêu văn bản, nhằm tạo ra trang web để hiển thị
lên trình duyệt, cùng với css và javascript.
Bản quyền thuộc về Trần Nghĩa
Email:
Các thẻ HTML thông dụng
LAYOUT
TEXT
FORM
MEDIA / KHÁC
<html>, <head>,
- ,
<form>, <input>,
<img>,
<title>, <meta>,
<span>, <i>, <a>,
<textarea>, <button>,
<video>, <audio>,
<link>, <script>,
<ul><li>, <ol><li>,
<label>,
<iframe>,
<style>, <body>,
<sub>, <sup>,
<select><option>
<svg>, <canvas>
<div>, <section>,
<caption>,
<header>, <nav>
<strong>,<b>,
,
<main>, <aside>,
<table>
<footer>, <article>
Bản quyền thuộc về Trần Nghĩa
Email:
BEM là gì?
BEM (Block-Element-Modifier) là một tiêu
chuẩn quy ước đặt tên cho các tên lớp CSS.
Nó được sử dụng khá rộng rãi và vơ cùng
hữu ích trong việc viết CSS dễ đọc, dễ hiểu
và chia tỷ lệ hơn.
Bản quyền thuộc về Trần Nghĩa
Email:
Tại sao lại phải sử dụng BEM?
●
BEM giúp team làm việc với nhau dễ dàng: Khi làm team, mỗi người sẽ có một cách
đặt tên class riêng và sẽ bị conflict với nhau.
●
Tính modules: Các class của mỗi khối sẽ không bị ảnh hưởng bởi các yếu tố khác,
nên bạn sẽ không lo CSS của class này sẽ gây ảnh hưởng lên class khác.
●
Khả năng sử dụng lại: chúng là các khối độc lập và sử dụng lại chúng một cách
thuận tiện.
●
Cấu trúc: BEM giúp cung cấp cho CSS của bạn một cấu trúc vững chắc, đơn giản và
dễ hiểu.
Bản quyền thuộc về Trần Nghĩa
Email:
Cách viết
HTML:
<div class="block">
<span class="block__elem --green --small"></span>
<span class="block__elem block__elem--highlight"></span>
</div>
SCSS:
.block{
&__elem{}
&--highlight{}
}
Bản quyền thuộc về Trần Nghĩa
Email:
SEO là gì?
❖
Search Engine Optimization - Tối ưu hóa cơng cụ tìm kiếm (SEO) là quá trình tăng
chất lượng và lưu lượng truy cập website bằng cách tăng khả năng hiển thị của
website cho người dùng trên các máy truy tìm dữ liệu như Google, Bing.
❖
SEO 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, … giúp website lên top Google, kéo về hàng nghìn traffic.
❖
SEO Onpage: là việc tối ưu hóa website, được thực hiện trong phạm vi web đó
nhằm mục đích đưa website lên top Google.
Bản quyền thuộc về Trần Nghĩa
Email:
Viết HTML tối ưu cho SEO?
❖
Title và thẻ Meta description
➢
Title: đây là dòng đầu tiên được hiện lên trong kết quả tìm kiếm của Google,
title cần phải chứa từ khóa và khơng được dài q 60 kí tự.
➢
Description: mơ tả nội dung chính của trang hoặc bài viết, cần đặt từ khóa
trọng tâm vào nhằm để giúp boot tìm kiếm của Google nhanh hơn.
❖
Heading: Phân chia cụ thể thành các thẻ từ đến
phù hợp.
❖
Alt: nhằm giúp cho bài viết của bạn có thể tìm kiếm bằng hình ảnh, tăng
mức độ liên quan mật thiết của hình ảnh với bài viết của bạn.
Ví dụ <img src=”. /hinh-anh-demo.jpg” alt=”hinh-anh-demo”>
Bản quyền thuộc về Trần Nghĩa
Email:
Viết HTML tối ưu cho SEO?
❖
Bold: in đậm những nội dung quan trọng, những điều mà bạn muốn nhấn mạnh
trong bài viết
❖
Internal link: liên kết các bài viết có liên quan lại với nhau nhằm giúp người dùng
có thể đọc nhiều bài viết hơn, kéo dài thời gian trải nghiệm trang web đối với người
dùng , qua đó sẽ được Google đánh giá cao về chất lượng.
❖
Nội dung: có ích cho người đọc, các bài viết không được trùng lặp, copy từ những
bài viết khác, được viết với văn phong dễ đọc, dễ hiểu có giá trị.
Bản quyền thuộc về Trần Nghĩa
Email:
Thực hành
Viết HTML sử dụng quy tắc đặt tên BEM và chuẩn SEO cho
giao diện website
Bản quyền thuộc về Trần Nghĩa
Email:
CSS & CSS3
1.
Nhóm các thuộc tính thơng dụng
2.
Thực hành
Bản quyền thuộc về Trần Nghĩa
Email:
Nhóm CSS/CSS3 thơng dụng
TEXT
text-align,
text-decoration,
text-overflow,
text-shadow,
text-transform,
BLOCK
POSITION
LAYOUT
CSS3
width, height,
max/min-width/height
sticky, fixed,
absolute, relative
columns, column-count,
column-fill, column-gap
Transform: translate, scale,
rotate, skew,
transform-origin, matrix...
margin, padding,
overflow
top, bottom,
left, right
font-size, font-family,
font-style, font-weight,
font-display
border, border-radius,
border-collapse
z-index
Flexbox: align-items,
align-content,
justify-content, flex-wrap,
flex-shrink, flex-direction,
flex-basis...
Transition: transition-delay,
transition-duration,
transition-property,
transition-timing-function
color, list-style-type,
letter-spacing,
-webkit-text-stroke
box-shadow,
drop-shadow,
box-sizing, outline
keyframes, animation,
perspective, @media
white-space
writing-mode
word-break, word-wrap
Display: block, inline,
inline-block, none,grid,
table, flex, inline-flex,
Grid: grid-gap,
grid-template-columns,
grid-template-rows,
grid-column-start,
grid-column-end,
grid-row-start,
grid-row-end, grid-area
Bản quyền thuộc về Trần Nghĩa
Units: px, rem, em, vw, vh,
vmin, max, %.
EVENT/BG
KHÁC
:hover, :focus,
[attribute="value"],
:after, :before,
pointer-events,
cursor,
Combinators: >, ~
opacity, visibility,
mix-blend-mode,
Object-fit,
variables, calc(), attr
background,
background-image,
background-position,
background-repeat,
background-size
Float, clear,
Initial, inherit,
vertical-align
resize, scroll-behavior,
content
-webkit-scrollbar,
-webkit-scrollbar-track,
-webkit-scrollbar-thumb
Filter image: blur,
brightness, contrast,
drop-shadow...
Email:
Thực hành
Viết CSS cho giao diện đã viết
bằng HTML trước đó.
Bản quyền thuộc về Trần Nghĩa
Email:
SCSS
1.
SASS/SCSS là gì?
2.
So sánh CSS và SCSS
3.
Tại sao nên viết SCSS?
4.
Các tính năng của SCSS
5.
Thực hành
Bản quyền thuộc về Trần Nghĩa
Email:
SASS/SCSS là gì?
❖
SASS/SCSS là ngơn ngữ kịch bản tiền xử lý được diễn giải hoặc biên dịch thành CSS theo Wikipedia
❖
SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết , SCSS cải
tiến từ SASS nhằm giúp cú pháp gần với CSS hơn.
❖
Các trình biên dịch SASS/SCSS phổ biến: Koala và Laravel mix.
Tham khảo thêm: />
Bản quyền thuộc về Trần Nghĩa
Email:
So sánh SASS, SCSS, CSS
Bản quyền thuộc về Trần Nghĩa
Email:
Tại sao nên viết SCSS?
❖
Tiết kiệm thời gian viết code và số dòng code.
❖
Code rõ ràng, dễ đọc, dễ quản lý và tái sử dụng.
❖
Dễ dàng nâng cấp và mở rộng.
Bản quyền thuộc về Trần Nghĩa
Email:
Các tính năng của SCSS
❖
Xếp chồng – Nested Rules
❖
Biến – variable
❖
Quy tắc Mixin
❖
Kế thừa – Extends
❖
Import
❖
Vòng lặp - Loop
❖
Mệnh đề điều kiện IF
Bản quyền thuộc về Trần Nghĩa
Email:
Thực hành
Viết giao diện một website sử dụng
HTML & SCSS
Bản quyền thuộc về Trần Nghĩa
Email:
