HTML 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 Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Giới thiệu HTML HTML ngôn ngữ lập trình mà ngơn ngữ đánh dấu siêu văn bản, nhằm tạo trang web để hiển thị lên trình duyệt, với css javascript Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Các thẻ HTML thông dụng LAYOUT TEXT FORM MEDIA / KHÁC , , - , , , , , , , , , , , , , , , - ,
- , , , , , , , , , , , , ,, , , , , Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com BEM gì? BEM (Block-Element-Modifier) tiêu chuẩn quy ước đặt tên cho tên lớp CSS Nó sử dụng rộng rãi vơ hữu ích việc viết CSS dễ đọc, dễ hiểu chia tỷ lệ Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Tại lại phải sử dụng BEM? ● BEM giúp team làm việc với dễ dàng: Khi làm team, người có cách đặt tên class riêng bị conflict với ● Tính modules: Các class khối không bị ảnh hưởng yếu tố khác, nên bạn không lo CSS class gây ảnh hưởng lên class khác ● Khả sử dụng lại: chúng khối độc lập sử dụng lại chúng cách thuận tiện ● Cấu trúc: BEM giúp cung cấp cho CSS bạn cấu trúc vững chắc, đơn giản dễ hiểu Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Cách viết HTML: SCSS: block{ & elem{} & highlight{} } Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com SEO gì? ❖ Search Engine Optimization - Tối ưu hóa cơng cụ tìm kiếm (SEO) trình tăng chất lượng lưu lượng truy cập website cách tăng khả hiển thị website cho người dùng máy truy tìm liệu Google, Bing ❖ SEO Offpage: tập hợp thủ thuật tối ưu hóa yếu tố bên website, bao gồm xây dựng liên kết (link building), marketing kênh social media, social media bookmarking, … giúp website lên top Google, kéo hàng nghìn traffic ❖ SEO Onpage: việc tối ưu hóa website, thực phạm vi web nhằm mục đích đưa website lên top Google Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Viết HTML tối ưu cho SEO? ❖ Title thẻ Meta description ➢ Title: dòng lên kết tìm kiếm Google, title cần phải chứa từ khóa khơng dài q 60 kí tự ➢ Description: mơ tả nội dung trang viết, cần đặt từ khóa trọng tâm vào nhằm để giúp boot tìm kiếm Google nhanh ❖ Heading: Phân chia cụ thể thành thẻ từ đến phù hợp ❖ Alt: nhằm giúp cho viết bạn tìm kiếm hình ảnh, tăng mức độ liên quan mật thiết hình ảnh với viết bạn Ví dụ Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Viết HTML tối ưu cho SEO? ❖ Bold: in đậm nội dung quan trọng, điều mà bạn muốn nhấn mạnh viết ❖ Internal link: liên kết viết có liên quan lại với nhằm giúp người dùng đọc nhiều viết hơn, kéo dài thời gian trải nghiệm trang web người dùng , qua Google đánh giá cao chất lượng ❖ Nội dung: có ích cho người đọc, viết không trùng lặp, copy từ viết khác, viết với văn phong dễ đọc, dễ hiểu có giá trị Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Thực hành Viết HTML sử dụng quy tắc đặt tên BEM chuẩn SEO cho giao diện website Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com CSS & CSS3 Nhóm thuộc tính thơng dụng Thực hành Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com 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 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: trannghia2018@gmail.com Thực hành Viết CSS cho giao diện viết HTML trước Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com SCSS SASS/SCSS gì? So sánh CSS SCSS Tại nên viết SCSS? Các tính SCSS Thực hành Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com SASS/SCSS gì? ❖ SASS/SCSS ngôn ngữ kịch tiền xử lý diễn giải biên dịch thành CSS theo Wikipedia ❖ SASS SCSS chất vấn đề giống nhau, khác cách viết , SCSS cải tiến từ SASS nhằm giúp cú pháp gần với CSS ❖ Các trình biên dịch SASS/SCSS phổ biến: Koala Laravel mix Tham khảo thêm: https://topdev.vn/blog/sass-scss-la-gi/ Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com So sánh SASS, SCSS, CSS Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Tại nên viết SCSS? ❖ Tiết kiệm thời gian viết code số dòng code ❖ Code rõ ràng, dễ đọc, dễ quản lý tái sử dụng ❖ Dễ dàng nâng cấp mở rộng Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Các tính 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 Trần Nghĩa Email: trannghia2018@gmail.com Thực hành Viết giao diện website sử dụng HTML & SCSS Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com ... trannghia2018@gmail.com Thực hành Viết CSS cho giao diện viết HTML trước Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com SCSS SASS/SCSS gì? So sánh CSS SCSS Tại nên viết SCSS? Các tính SCSS Thực hành Bản... Nghĩa Email: trannghia2018@gmail.com BEM gì? BEM (Block-Element-Modifier) tiêu chuẩn quy ước đặt tên cho tên lớp CSS Nó sử dụng rộng rãi vơ hữu ích việc viết CSS dễ đọc, dễ hiểu chia tỷ lệ Bản quyền... đọc, viết khơng trùng lặp, copy từ viết khác, viết với văn phong dễ đọc, dễ hiểu có giá trị Bản quyền thuộc Trần Nghĩa Email: trannghia2018@gmail.com Thực hành Viết HTML sử dụng quy tắc đặt tên BEM