HTML & CSS
BÀI MỚI NHẤT
MỚI CẬP NHẬT

HTML & CSS

Danh sách các bài viết trong chuyên mục HTML & CSS, đây là những bài viết mới nhất được cập nhật trong mục HTML & CSS.

HTML đóng vai trò là vật liệu để xây dựng giao diện của website, nhiệm vụ của nó là hiển thị văn bản, hình ảnh, video, và nói chung là hiển thị dữ liệu lên trình duyệt. Nếu bạn xây một ngôi nhà thì bạn sẽ cần gạch, đá, xi măng và các vật liệu phụ khác, vậy thì HTML nó giống như những vật liệu mà bạn cần để xây nhà đó.

HTML rất đơn giản, nó có một số lượng thẻ cũng tương đối ít và rất dễ nhớ nên học nó không có gì khó, cái khó là làm thể nào kết hợp với CSS và jQuery để trình bày một cách thẩm mỹ.

Hiện nay version mới nhất là HTML5, đây là version có mối liên hệ chặt chẽ với Javascript và CSS3 nên sẽ có độ phức tạo cao hơn, và đương nhiên càng phức tạp thì giao diện càng sinh động. 

Trong chuyên mục này mình sẽ tổng hợp tất cả các tài liệu học HTML từ căn bản đến nâng cao, nó sẽ rất hữu ích cho các bạn đấy.

1HỌC HTML
HTML
1 HTML là gì? Bổ cục HTML của một trang web là gì?
2 Phân biệt HTML Elements và HTML Attributes
3 Định dạng văn bản bằng HTML
4 Heading và List trong HTML
5 Thẻ Table trong HTML (colspan, rowspan, cellpadding và cellspacing)
6 Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng
7 Cách dùng thẻ img trong HTML và các thuộc tính của img
8 Thuộc tính style trong HTML
9 Thẻ style trong HTML
10 Phân biệt thẻ HTML Block và Inline
11 Cách dùng thẻ div trong HTML để tạo các khối giao diện
12 Phân biệt ID và Class trong HTML
13 Tạo bổ cục layout HTML đơn giản
14 Tạo HTML danh sách bài viết đơn giản
15 Tạo menu một cấp bằng HTML đơn giản
16 Tạo background và đường viền cho thẻ HTML
17 Các thẻ HTML tạo form thu thập dữ liệu
HTML5
18 Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên
19 Thẻ article trong HTML5
20 Thẻ header trong HTML5
21 Thẻ hgroup trong HTML5
22 Thẻ nav trong HTML5
23 Thẻ section trong HTML
24 Thẻ aside trong HTML5
25 Validate form bằng HTML5
Canvas
26 HTML5 Canvas là gì?
27 HTML5 Canvas - Vẽ đường thẳng
28 HTML5 Canvas - Vẽ đường cong
29 HTML5 Canvas - Nối nhiều đường
Heading tags
30 Thẻ title trong HTML
31 Thẻ base trong HTML
32 Thẻ link trong HTML
33 Thẻ meta trong HTML
34 Thẻ script trong HTML
35 Thẻ noscript trong HTML
Form tags
36 Thẻ select trong HTML
37 Thẻ input trong HTML
38 Thẻ textarea trong HTML
39 Thẻ button trong HTML
40 Thẻ option trong HTML
41 Thẻ optgroup trong HTML
42 Thẻ fieldset trong HTML
43 Thẻ label trong HTML
44 Thẻ form trong HTML
List tags
45 Thẻ ul trong HTML
46 Thẻ ol trong HTML
47 Thẻ li trong HTML
48 Thẻ dl trong HTML
49 Thẻ dt trong HTML
50 Thẻ dd trong HTML
Paragraph tags
51 Thẻ p trong HTML
52 Thẻ br trong HTML
53 Thẻ pre trong HTML
Common tags
54 Thẻ comment in html trong HTML
55 Thẻ DOCTYPE trong HTML
56 Thẻ abbr trong HTML
57 Thẻ address trong HTML
58 Thẻ audio trong HTML
59 Thẻ b trong HTML
60 Thẻ blockquote trong HTML
61 Thẻ body trong HTML
62 Thẻ canvas trong HTML
63 Thẻ caption trong HTML
64 Thẻ col trong HTML
65 Thẻ colgroup trong HTML
66 Thẻ datalist trong HTML
67 Thẻ del trong HTML
68 Thẻ details trong HTML
69 Thẻ dialog trong HTML
70 Thẻ div trong HTML
71 Thẻ embed trong HTML
72 Thẻ figcaption trong HTML
73 Thẻ figure trong HTML
74 Thẻ footer trong HTML
75 Thẻ hr trong HTML
76 Thẻ html trong HTML
77 Thẻ i trong HTML
78 Thẻ iframe trong HTML
79 Thẻ ins trong HTML
80 xóa, đã move bài
81 Thẻ legend trong HTML
82 Thẻ main trong HTML
83 Thẻ mark trong HTML
84 Thẻ meter trong HTML
85 Thẻ noscript trong HTML
86 Thẻ object trong HTML
87 Thẻ output trong HTML
88 Thẻ param trong HTML
89 Thẻ picture trong HTML
90 Thẻ progress trong HTML
91 Thẻ q trong HTML
92 Thẻ rp trong HTML
93 Thẻ rt trong HTML
94 Thẻ ruby trong HTML
95 Thẻ s trong HTML
96 Thẻ small trong HTML
97 Thẻ source trong HTML
98 Thẻ span trong HTML
99 Thẻ strong trong HTML
100 Thẻ sub trong HTML
101 Thẻ summary trong HTML
102 Thẻ sup trong HTML
103 Thẻ table trong HTML
104 Thẻ tbody trong HTML
105 Thẻ td trong HTML
106 Thẻ tfoot trong HTML
107 Thẻ th trong HTML
108 Thẻ thead trong HTML
109 Thẻ time trong HTML
110 Thẻ tr trong HTML
111 Thẻ u trong HTML
112 Thẻ var trong HTML
113 Thẻ video trong HTML
114 Thẻ wbr trong HTML
2HỌC CSS
Căn bản
1 CSS là gì? Học CSS như thế nào?
2 Cú pháp CSS - các cách viết CSS
3 Selector là gì? Tìm hiểu CSS Selector căn bản
4 Thiết lập màu nền với CSS background
5 Tìm hiểu về color trong CSS
6 Tìm hiểu về font trong CSS
7 Các thuộc tính CSS định dạng text
8 Các thuộc tính CSS định dạng thẻ a (links)
9 Tìm hiểu về border trong CSS
10 Thuộc tính float ( left - right - none) trong CSS
11 Thuộc tính display trong CSS (inline - block -none)
12 Thuộc tính margin - padding và Box Model trong CSS
13 Position relative - absolute trong CSS
14 Xây dựng menu dọc hai cấp đơn giản bằng CSS
15 Position Fixed trong CSS
16 Thuộc tính z-index trong CSS
17 Kỹ thuật ClearFix trong CSS
18 After và Before trong CSS
19 Vùng chọn trong CSS (CSS Combinators)
20 Tìm hiểu về list trong CSS
21 Tìm hiểu về overflow trong CSS
22 Tìm hiểu về pseudo-class trong CSS
23 Tìm hiểu về Pseudo-Elements trong CSS
24 Tìm hiểu về unit trong CSS
25 Tìm hiểu về navigation trong CSS
26 Tìm hiểu về Specificity trong CSS
27 Tìm hiểu về table trong CSS
28 Tìm hiểu về Align trong CSS
CSS3
29 Tìm hiểu về border-radius, border-image trong CSS
30 Margin collapsing trong CSS
31 CSS3 - Hiệu ứng Animation
32 Tìm hiểu object-fit trong CSS3
33 CSS3 Emphasis Marks
34 CSS3 là gì? Các module trong CSS3
35 Học CSS3 - Border Radius - Bo góc
36 Học CSS3 - Border Image - Tạo đường viền bằng hình
37 Học CSS3 - Các thuộc tính Backgrounds
38 Học CSS3 - Định dạng màu sắc
39 Học CSS3 - Gradient Background
40 Học CSS3 - Text Shadow - Box Shadow
41 Học CSS3 - Xử lý Text
42 Học CSS3 - Sử dụng @fonf-face
43 Học CSS3 - 2D Transforms
44 Tạo thanh loading ngang với HTML và CSS
45 Tạo thanh Loading xoay với HTML và CSS
46 Tạo menu mờ với HTML và CSS
47 Tạo hiệu ứng khói với HTML và CSS
48 Tạo thanh tìm kiếm co dãn với HTML và CSS
49 Tạo hiệu ứng trò chơi pacman với HTML và CSS
50 Tạo đồng hồ treo tường với HTML và CSS
51 Tạo hiệu ứng mưa với HTML và CSS
52 Hiệu ứng bóng đổ với thuộc tính box-shadow của CSS3
53 Tạo hiệu ứng mặt trời mọc với HTML và CSS
CSS Responsive
54 Bài 01: CSS Responsive Web Design là gì?
55 Bài 02: Sử dụng @Media CSS tạo Responsive cho Website
56 Bài 03: Sử dụng Javascript tạo Responsive cho Website
57 Bài 04: Video học làm Responsive CSS căn bản
58 Bài 05: Cách viết Responsive với SASS CSS
CSS Parallax
59 Parallax - Hiệu ứng Parallax là gì?
60 Parallax - Tạo chuỗi ảnh nền
61 Parallax - Tạo thanh menu dọc
62 Parallax - Tạo hiệu ứng cuộn với thanh menu dọc
63 Parallax - Tạo hiệu ứng Parallax scrolling
64 Parallax - Tạo hiệu ứng cho văn bản
65 Parallax - Chèn nhạc nền theo chuyển động cuộn
66 Parallax - Tạo trang đầu và cuối
67 Parallax - Hoàn thiện bố cục, hiệu ứng và mở rộng
3HOW TO
Menus
1 Hướng dẫn tạo Menu Icon với HTML và CSS
2 Hướng dẫn tạo Tab Header bằng CSS và Javascript
3 Hướng dẫn tạo thanh top navigation bằng HTML và CSS
4 Hướng tạo thanh search bar bằng CSS
5 Hướng dẫn tạo right aligned menu và centered menu bằng CSS
6 Hướng dẫn tạo Thumbnail Image
7 Hướng dẫn tạo Pagination với CSS
8 Hướng dẫn tạo Hoverable Sidenav
9 Hướng dẫn tạo Animated Side Navigation
10 Hướng dẫn tạo Responsive navbar
11 Hướng dẫn tạo Icon Bar với HTML, CSS và Javascript
12 Hướng dẫn tạo Click Dropdown với HTML, CSS và JAVASCRIPT
13 Hướng dẫn tạo accordion với HTML, CSS và Javascript
14 Hướng dẫn tạo Modal Box với HTML, CSS và Javascript
15 Hướng dẫn tạo tabs bằng HTML, CSS và Javascript
16 Hướng dẫn tạo Fixed Menu
17 Hướng dẫn tạo Vertical Tabs với HTML, CSS và Javascript
Images
18 Hướng dẫn tạo Hero Image với CSS
19 Hướng dẫn thêm Image Effects với CSS
20 Hướng dẫn tạo Image Hover Overlay Slide với CSS
21 Hướng dẫn tạo Slideshow với HTML, CSS và Javascript
Buttons
22 Hướng dẫn tạo hiệu ứng cho Animate Buttons
23 Hướng dẫn tạo các nút liên kết mạng xã hội bằng HTML và CSS
24 Hướng dẫn tạo loading buttons với CSS
25 Hướng dẫn tạo Scroll To Top Button
Forms
26 Hướng dẫn tạo Toggle ẩn/hiện một phần tử
27 Hướng dẫn tạo contact form đơn giản với CSS
Filters
28 Hướng dẫn xây dựng chức năng sắp xếp dữ liệu
29 Hướng dẫn tạo filter list với Javascript
Tables
30 Hướng dẫn tạo Filter table với Javascript
31 Hướng dẫn tạo Responsive Tables đơn giản với CSS
More
32 Hướng dẫn tạo hiệu ứng animations với javascript
33 Hướng dẫn tạo một To Do List với CSS và Javascript
34 Hướng dẫn xây dựng đồng hồ đếm ngược với Javascript
35 Hướng dẫn tạo Animate Icon với CSS và Javascript
36 Hướng dẫn tạo Testimonials với CSS
37 Tìm hiểu về Aspect Ratio với CSS
38 Hướng dẫn tạo hiệu ứng Parallax Scrolling Effect với CSS
39 Hướng dẫn tạo các dấu mũi tên với CSS
40 Hướng dẫn tạo Profile Card với CSS
41 Hướng dẫn tạo Coming Soon Page
42 Hướng dẫn tạo Responsive Pricing Table bằng CSS
43 Hướng dẫn tạo Progress Bar với Javascript
44 Hướng dẫn tạo thanh Skill Bar với HTML và CSS
45 Hướng dẫn tạo Tooltip với CSS
46 Hướng dẫn tạo Toggle Like and Dislike
47 Hướng dẫn tạo Calendar Layout với HTML và CSS
48 Hướng dẫn tạo equal height columns với HTML và CSS
Website
Grid
Google Map
49 Hướng dẫn tích hợp google map vào website
50 Hướng dẫn tích hợp Google Translate button
Converters
51 Viết chức năng phóng to thumbnail khi hover với CSS3
52 Hướng dẫn tạo Toggle Switch với CSS
53 Hướng dẫn tạo Modal Images
54 Hướng dẫn tạo Alert Buttons với HTML và CSS

Bài xem nhiều

Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..)

Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..)

Bài trước chúng ta đã tìm hiểu về chuỗi trong javascript nhưng đó chỉ là…

Các sự kiện (Event) trong Javascript

Các sự kiện (Event) trong Javascript

Đáng lẽ bài này mình sẽ tiếp tục giới thiệu với các bạn DOM nhưng…

Các cách khai báo biến trong Javascript

Các cách khai báo biến trong Javascript

Trong bài này ta sẽ tìm hiểu các khai báo biến và gán giá trị…

Hàm alert() - confirm() - prompt()  trong javascript

Hàm alert() - confirm() - prompt() trong javascript

Hôm nay chúng ta sẽ tìm hiểu đến hai hàm rất thông dụng và hữu…

Javascript là gì? Tìm hiểu ngôn ngữ lập trình javascript

Javascript là gì? Tìm hiểu ngôn ngữ lập trình javascript

Trong bài này chúng ta sẽ tìm hiểu khái niệm Javascript là gì ...

Các hàm xử lý ngày tháng trong Javascript

Các hàm xử lý ngày tháng trong Javascript

Bài trước chúng ta đã tìm hiểu đối tượng Date trong Javascript rồi thì trong…

Khai báo và duyệt mảng trong javascript

Khai báo và duyệt mảng trong javascript

Việc xử lý mảng trong javascript cũng quan trọng như xử lý mảng trong PHP…

Function trong Javascript - cách tạo hàm và gọi hàm trong JS

Function trong Javascript - cách tạo hàm và gọi hàm trong JS

Hàm là một phương pháp lập trình truyền thống và thường được ứng dụng trong…

Lệnh if else trong javascript (dùng để rẻ nhánh chương trình)

Lệnh if else trong javascript (dùng để rẻ nhánh chương trình)

Câu lệnh if else dùng để kiểm tra một mệnh đề nào đó có đúng…

Hàm setTimeout() và setInterval() trong Javascript

Hàm setTimeout() và setInterval() trong Javascript

Trong bài này chúng ta tìm hiểu hai hàm thường dùng để xử lý thời…

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hướng tạo thanh search bar bằng CSS

Hướng tạo thanh search bar bằng CSS

Search Bar (thanh tìm kiếm) là chức năng không thể thiếu trong mọi trang web.…

ReactJS là gì? Các khái niệm cần biết trước khi học React JS

ReactJS là gì? Các khái niệm cần biết trước khi học React JS

Các thuộc tính CSS định dạng thẻ a (links)

Các thuộc tính CSS định dạng thẻ a (links)

Thẻ a đóng vai trò rất quan trọng vì nhiệm vụ của nó là giúp…

Cách dùng thẻ img trong HTML và các thuộc tính của img

Cách dùng thẻ img trong HTML và các thuộc tính của img

Có câu "một website đẹp phải có hình ảnh, bổ cục rõ ràng và nhiều…

Bài 02: Sử dụng @Media CSS tạo Responsive cho Website

Bài 02: Sử dụng @Media CSS tạo Responsive cho Website

Trong bài này mình sẽ giới thiệu tới các bạn một thuộc tính trong CSS3…

Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng

Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng

Trong một website luôn tồn tại các link liên kết với ..

Các hàm xử lý mảng trong javascript hữu ích

Các hàm xử lý mảng trong javascript hữu ích

Việc xử lý mảng trong javascript đóng vai trò rất quan trọng vì nó được…

Xử lý chuỗi (string) trong Javascript

Xử lý chuỗi (string) trong Javascript

Như vậy là ta đã tìm hiểu các kiến thức riêng của javascript như DOM,…

Chia lấy phần dư / chia lấy phần nguyên trong javascript

Chia lấy phần dư / chia lấy phần nguyên trong javascript

Trong bài này mình sẽ hướng dẫn các bạn các ...

Top