mee 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 Thực hành
Trang 2Giớ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, cung vGi css va Javascript
Trang 3` Các thẻ HTML thông dụng
<html>, <head>, <title>, <meta>, <link>, <script>, <style>, <body>, <div>, <section>, <header>, <nav> <main>, <aside>, <footer>, <article>
Ban quyền thuộc về Trần Nghĩa
<h1> - <h6>, <p>
<span>, <I>, <a>, <ul><li>, <ol><li>, <sub>, <sup>, <caption>, <strong>,<b>, <br>, <table>
<form>, <input>, <textarea>, <button>, <label>,
<select><option>
<img>, <picture> <video>, <audio>, <iframe>,
<svg>, <canvas>
Email: trannghia2018@gmail.com
Trang 4` 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
hữu ích trong việc viết CSS dễ đọc, dễ hiểu
Element Modifier
và chia tỷ lệ hơn
Trang 5` Tại sao lại phải sử dụng BEM?2
Bản quyền thuộc về Trần Nghĩa
Trang 6Bản quyền thuộc về Trần Nghĩa
Trang 7SEO 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 Offpasge: 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: la 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
Trang 8` Viết HTML tối ưu cho SEO?
title cần phải chứa từ khóa và không được dai qua 60 kí tự
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ừ <h]> đến <h6> phù hợp
AIt: 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ụ <imag src=”./hinh-anh-demo.jbg” alt="hinh-anh-demo”>
Trang 9AY
Ban quyền thuộc về Trần Nghĩa
N ết HTML toi UU cho SEO? >
Bold: in dam 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ị
Email: trannghia2018@gmail.com
Trang 10Thự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
Trang 12` Nhóm CSS/CSS5 thông dụng
text-align, text-decoration, text-overflow, text-shadow, text-transform,
font-size, font-family, font-style, font-weight,
font-display color, list-style-type, letter-spacing, -webkit-text-stroke white-space writing-mode
word-break, word-wrap
BLOCK POSITION
width, height, max/min-width/height
margin, padding, overflow
border, border-radius,
border-collapse
box-shadow, drop-shadow, box-sizing, outline Display: block, inline, inline-block, none,grid, table, flex, inline-flex,
Ban quyền thuộc về Trần Nghĩa
sticky, fixed, absolute, relative top, bottom, left, right z-index
columns, column-count,
column-fill, column-gap
Flexbox: align-items, align-content,
justify-content, flex-wrap,
flex-shrink, flex-direction,
flex-basis
Grid: grid-gap, grid-template-columns, grid-template-rows,
grid-column-start, grid-column-end, grid-row-start,
grid-row-end, grid-area
Transform: translate, scale, rotate, skew,
transform-origin, matrix Transition: transition-delay, transition-duration,
transition-property, transition-timing-function
[attribute=”value”],
:after, :before, pointer-events,
cursor, Combinators: >, ~
background,
background-image, background-position, background-repeat, background-size
Email opacity, visibility,
mix-blend-mode,
Object-fit,
variables, calc(), attr resize, scroll-behavior, content
Float, clear, Initial, inherit,
vertical-align
-webkit-scrollbar, -webkit-scrollbar-track, -webkit-scrollbar-thumb Filter image: blur, brightness, contrast,
drop-shadow
: trannghia201I8@gmail.com
Trang 14SCSS
SASS/SCSS là gì?
So sánh CSS và SCSS Tại sao nên viết SCSS? Các tính năng của SCSS Thực hành
Trang 15Các trình biên dịch SASS/SCSS phổ biến: Koala và Laravel mix
Tham khảo thêm: https;/+opdev.vn/blog/Soss-scss-lqg-gi/
Trang 16` So sanh SASS, SCSS, CSS
:t #fff : #000 text-align: center color:
background-color: border: 1px solid paddiĩng: 1em 4em
color: background-color: lage eee eee eee 1 tìnear
Ban quyền thuộc về Trần Nghĩa
// SCSS $white: H
$black: #000; {
text-align: center; color: $white; background-color: $black; border: 1px solid $black; padding: lem 4em; &:hover {
color: $black; background-color: $white; transition: 6.15s all linear;
{
text-align: center; color: #fff; background-color: #000; border: 1 solid #000; padding: lem 4em;
M
color: #000; background-color: #fff; transition: 9.15s all linear;
Email: trannghia2018@gmail.com
Trang 17Tại sao nên viết SCSS2 s 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
Trang 18Cá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 Vong lap - Loop
Ménh dé diéu kién IF