HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML

Nền tảng Kiến thức - Hành trang tới Tương lai
Card image

Chương trình học

  1. Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
    1. Cài đặt trình soạn thảo code Visual Studio Code IDE Xem trước
    2. Cài đặt tiện ích mở rộng Live Server Extension cho Visual Studio Code
  2. HTML5 là gì? Các thẻ (tag) HTML cơ bản 19
    1. HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML
    2. Khác biệt giữa HTML và HTML5
    3. Cấu trúc file HTML5 cơ bản
    4. Các Quy tắc và Quy ước nên tuân theo khi lập trình web HTML5 CSS JS
    5. Các thói quen cần có khi lập trình web sử dụng HTML
    6. Các thẻ (tag) định nghĩa mô tả (meta) cho trang web
    7. Các thẻ (tag) định dạng Đề mục (Heading), Phân đoạn (Paragraph), Ngắt dòng (Break) cho văn bản (Text)
    8. Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule)
    9. Các thẻ (tag) định dạng kiểu font chữ
    10. Các thẻ (tag) định dạng hiển thị cho văn bản (text)
    11. Phân biệt 2 họ font chữ phổ biến SERIF và SANS SERIF
    12. Các thẻ (tag) tạo Siêu liên kết (hyperlink)
    13. Các thẻ (tag) tạo Danh sách (list)
    14. Các thẻ (tag) chèn hình ảnh vào trang web
    15. Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web
    16. Các thẻ (tag) làm thanh tự động cuộn nội dung trong trang web
    17. Các ký tự đặc biệt trong HTML
    18. Thẻ (tag) IFRAME để nhúng trang web khác vào trang web của mình
    19. Các loại font chữ phổ biến trong thiết kế web SERIF, SANS SERIF, DISPLAY, HANDWRITING, MONOSPACE
  3. Thiết kế bố cục trang web (layout) 12
    1. Thẻ TABLE (TABLE tag) là gì?
    2. Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag)
    3. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Đơn giản
    4. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang chủ
    5. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giới thiệu
    6. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Liên hệ
    7. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Danh sách Sản phẩm
    8. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Sản phẩm chi tiết
    9. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giỏ hàng
    10. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Tìm kiếm
    11. Thẻ DIV (DIV tag) là gì?
    12. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag)
  4. Tạo biểu mẫu nhập liệu sử dụng thẻ (tag) FORM 21
    1. Biểu mẫu nhập liệu (form) là gì? Thường được sử dụng vào mục đích gì?
    2. Tạo ô nhập liệu INPUT 1 dòng (single line text)
    3. Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text)
    4. Tạo ô nhập liệu INPUT dạng ẩn (hidden)
    5. Tạo nút bấm BUTTON
    6. Tạo ô nhập liệu CHECKBOX chọn 1 hoặc nhiều những tùy chọn
    7. Tạo ô nhập liệu RADIO chọn 1 trong những tùy chọn
    8. Tạo ô nhập liệu SELECT cho phép chọn lựa tùy chọn
    9. Tạo ô nhập liệu INPUT kiểu COLOR
    10. Tạo ô nhập liệu INPUT kiểu DATE
    11. Tạo ô nhập liệu INPUT kiểu EMAIL
    12. Tạo ô nhập liệu INPUT kiểu NUMBER
    13. Tạo ô nhập liệu INPUT kiểu RANGE
    14. Tạo ô nhập liệu INPUT kiểu TEL (số điện thoại)
    15. Tạo ô nhập liệu INPUT kiểu TIME
    16. Tạo ô nhập liệu INPUT kiểu URL
    17. Tạo thanh đo lường METER
    18. Tạo thanh tiến trình PROGRESS
    19. Tạo biểu mẫu (Form) đặt vé Máy bay
    20. Tạo biểu mẫu (Form) Đăng nhập
    21. Tạo biểu mẫu (Form) Đăng ký
  5. CSS là gì? 33
    1. CSS là gì? Cú pháp sử dụng CSS
    2. Các cách áp dụng CSS để định dạng trang web
    3. Các thuộc tính CSS định dạng font chữ
    4. Các thuộc tính CSS quy định màu sắc đối tượng
    5. Đơn vị đo lường trong CSS
    6. Bài tập - Tạo menu ngang đa cấp bằng CSS
    7. Các thuộc tính quy định Kích thước và Khoảng cách của các phần tử
    8. Tìm hiểu về Thuộc tính vị trí Position trong CSS
    9. Tìm hiểu các thuộc tính quy định vị trí Trôi nổi, Dàn hàng ngang sử dụng Float Left, Float Right trong CSS
    10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix
    11. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 1
    12. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 2
    13. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 3
    14. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Call for Action
    15. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Feature Product
    16. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Services
    17. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Team
    18. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Experience
    19. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 1
    20. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 2
    21. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 3
    22. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Statistic
    23. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Testimonials
    24. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Pricing Tables
    25. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 1
    26. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 2
    27. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Footer
    28. Bộ lựa chọn đặc biệt theo trạng thái Pseudo Class và Pseudo Element trong CSS
    29. Bộ lựa chọn trong CSS (CSS Selector)
    30. Sử dụng CSS để làm nhà sáng tạo Nghệ thuật sắp xếp trình bày chữ Typography
    31. Hướng dẫn phân tích Bố cục (layout) Web bán hàng Thực phẩm Dinh dưỡng Organic
    32. Tư duy Thiết kế Khung cần có khi xây dựng giao diện Một Trang web
    33. Tìm hiểu toàn diện về thuộc tính trình diễn ảnh object-fit trong CSS
  6. Javascript căn bản 9
    1. Javascript là gì? Ứng dụng của Javascript
    2. Các cách sử dụng Javascript trong trang web
    3. Biến trong Javascript
    4. Hàm trong Javascript
    5. Lab 01 - tạo chương trình tính toán cơ bản
    6. Bài tập Ghép chuỗi String
    7. Kiểm tra Kiến thức JS
    8. Cấu trúc điều khiển sử dụng IF ELSE
    9. Cách lấy dữ liệu Người dùng từ Biểu mẫu (FORM)
  7. JQuery căn bản 10
    1. Giới thiệu JQuery và ứng dụng của JQuery trong thiết kế, lập trình web
    2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web
    3. Tìm hiểu quy tắc vận hành của JQUERY
    4. Toàn tập về Bộ lựa chọn (selector)
    5. Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY
    6. Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout
    7. Bài tập Thực thi một hàm xử lý liên tục sau 1 khoảng thời gian bằng hàm setInterval
    8. Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY
    9. Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR
    10. Tích hợp công cụ chọn Ngày Tháng Date Picker
  8. Bootstrap là gì? JQuery là cái chi? 8
    1. Giới thiệu Bootstrap
    2. Cách sử dụng Bootstrap trong dự án của bạn
    3. Hệ thống Lưới (GRID) của Bootstrap
    4. Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap
    5. Ràng buộc dữ liệu (validation) bằng Bootstrap
    6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty
    7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive)
    8. Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query
  9. Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap 14
    1. Lộ trình (Roadmap) Thực hiện Đồ án
    2. Khởi tạo thư mục dự án
    3. Phân tích Bố cục (layout)
    4. Xây dựng Trang chủ (index)
    5. Xây dựng Trang Giới thiệu (about)
    6. Xây dựng Trang Liên hệ (contact)
    7. Xây dựng Trang Danh sách Sản phẩm (products)
    8. Xây dựng Trang Chi tiết Sản phẩm (product_detail)
    9. Xây dựng Trang Giỏ hàng (cart)
    10. Xây dựng Trang Thanh toán (checkout)
    11. Xây dựng Trang Đăng nhập (login)
    12. Xây dựng Trang Đăng ký (register)
    13. Xây dựng Trang Tìm kiếm (search)
    14. Thưởng thức Kết quả (demo version)
  10. Kiểm tra
  11. Tài liệu tham khảo 4
    1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend HTML CSS JS
    2. SourceCode tham khảo Lập trình web Frontend HTML CSS JS
    3. Các thể loại Menu trong Thiết kế Web
    4. Tổng hợp các công cụ tự sinh Giao diện HTML, CSS, JS tuyệt vời dành cho Nhà phát triển thiết kế Web
  12. VueJS 7
    1. VueJS là gì? Ứng dụng của VueJS trong phát triển web FrontEnd
    2. Tìm hiểu Kiến trúc Hệ thống Web MVVM - Model View ViewModel
    3. Component trong VueJS
    4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản
    5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap
    6. Bài tập - Sử dụng Bootstrap và VueJS để thiết kế Trang Tuyển dụng các Vị trí Việc làm Công nghệ
    7. Test
  13. UI/UX trong lập trình Web 2
    1. Tìm hiểu về khái niệm UI/UX trong thiết kế ứng dụng
    2. Quy trình Xây dựng, Thiết kế một trang Web
  14. CSS Flexbox 1
    1. Tạo cấu trúc Dòng x Cột trong CSS Flexbox
  15. Extras 2
    1. Bài tập xử lý lưu trữ dữ liệu với LocalStorage
    2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS
  16. Video khóa học 1
    1. Video khóa học toàn tập

Chương 2-Bài 1. HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML

Tác giả: Dương Nguyễn Phú Cường
Ngày đăng: Hồi xưa đó
HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng. HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” được. Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web. Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và attributes) để đánh dấu lên trang web. Ví dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p> Tổng quan, HTML là ngôn ngữ markup, nó rất trực tiếp dễ hiểu, dễ học, và tất cả mọi người mới đều có thể bắt đầu học nó để xây dựng website. Sau đây là những gì bạn sẽ được tìm hiểu trong bài viết này:

Lịch sử của HTML

HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet. Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cập ngay lập tức. Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao gồm 18 tag HTML. Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới. Theo Mozilla Developer Network: HTML Element Reference, hiện tại có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hỗ trợ bởi các trình duyệt hiện đại). Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website. Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C). Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website. Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5. Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại là gì, như là <article>, <header>, và <footer>.

HTML hoạt động như thế nào?

HTML documents là files kết thúc với đuôi .html hay .htm. Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào (như Google Chrome, Safari, hay Mozilla Firefox). Trình duyệt đọc các files HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem được nó. Thông thường, trung bình một web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng. Mỗi trang HTML chứa một bộ các tag (cũng được gọi là elements), bạn có thể xem như là việc xây dựng từng khối của một trang web. Nó tạo thành cấu trúc cây thư mục bao gồm section, paragraph, heading, và những khối nội dung khác. Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc như <tag></tag>. Bên dưới, bạn có thể xem code ví dụ của một trang HTML được cấu trúc như thế nào: 
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>
  • Element ngoài cùng là bộ tag division (<div></div>), dùng để mark up cho phần nội dung lớn.
  • Nó bao gồm một tag tiêu đề (<h1></h1>), một tag subheading (<h2></h2>), 2 văn bản (<p></p>), và một bước hình (<img>).
  • Đoạn văn thứ 2 chứa tag chứa link (<a></a>) với attribute href chứa địa chỉ URL đích.
  • Tag hình ảnh cũng có 2 attribute: src cho ảnh, và alt cho mô tả của hình.

Tổng quan của các tag thông dụng nhất của HTML

HTML tags có 2 loại chính: block-level và inline tags.
  1. Elements Block-level sẽ sử dụng toàn không gian trang web và luôn bắt đầu dòng mới của trang web. Headings và paragraph là những ví dụ chính của block tags.
  2. Inline elements chỉ chiếm phần nhỏ không gian web và không bắt đầu dòng mới của trang web. Chúng thường dùng để định dạng nội dung bên trong của block level elements. Links và những tag nhấn mạnh là những tag inlines phổ biến.

Block-Level Tags

3 block level tags của mỗi trang HTML cần có những tag như là <html>, <head>, và <body>.
  1. Tag <html></html> là element cao nhất dùng để đóng gói mỗi trang HTML.
  2. Tag <head></head> chứa các thông tin meta như là tiêu đề trang và charset.
  3. Cuối cùng, <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện trên trang.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
  • Có tất cả 6 cấp độ trong HMTL, trải dài từ <h1></h1> tới <h6></h6>, h1 là cấp heading cao nhất và h6 là thấp nhất. Văn bản được đặt trong tag <p></p>, nhưng blockquotes thì sử dụng<blockquote></blockquote>.
  • Divisions là những khu vực lớn, chứa nhiều paragraph, images, blockquotes, và các yếu tố khác. Chúng ta có thể đánh dấu chúng bằng cách sử dụng <div></div>. Div element cũng có thể chứa div tag khác bên trong nó.
  • Bạn cũng có thể dùng tag <ol></ol> cho danh sách theo thứ tự và <ul></ul> cho danh sách không theo thứ tự. Danh sách cần được được đặt trong tag <li></li>. Ví dụ, đây là cách hiển thị của một danh sách không theo thứ tự trong HTML:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Inline Tags

Có nhiều inline tags được dùng để định dạng vnă bản. Ví dụ như, tag <strong></strong> sẽ định dạng chữ in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiên. Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác định link cụ thể: 
<a href="https://example.com/">Click me!</a>
Ảnh cũng là element inline. Bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần tag đóng. Nhưng bạn cũng cần sử dụng attribute src để xác định nguồn ảnh, ví dụ như: 
<img src="/images/example.jpg" alt="Example image">
Nếu bạn muốn tìm hiểu thêm về tag HTML, hãy cân nhắc xem qua cheat sheet HTML của chúng tôi (có thể download được file cheat sheet)

Sự phát triển của HTML. Có gì khác biệt giữa HTML và HTML5?

Từ những ngày đầu tiên, HTML đã là một phát minh vượt thời đại. W3C liên tục xuất bản các bản cập nhật và nâng cấp. HTML4 (cũng thường được gọi là “HTML”) được phát hành năm 1999, trong khi phiên bản mới nhất, lớn nhất là HTML5 thì phát hành năm 2014. Phiên bản này đã ra mắt rất nhiều tính năng quan trọng mới. Một trong số các tính năng hấp dẫn nhất của HTML5 là khả năng hỗ trợ audio và video. Thay vì sử dụng Flash Player, chúng ta giờ đây chỉ cần nhúng videos và audio files vào trong trang web bằng tag <audio></audio> hay <video></video>. Nó cũng hỗ trợ những tính năng mặc định như hỗ trợ scalable vector graphics (SVG) và MathML cho các công thức toán học và phương trình khoa học. HTML5 có rất nhiều cải thiện về mặt ngôn ngữ. Các tag mới nhằm giới thiệu cho trình duyệt biết mục đích chính của nội dung trong website là gì, việc này có lợi cho cả người đọc và cả search engine. Các semantic tags đó là <article></article>, <section></section>, <aside></aside>, <header></header>, và <footer></footer>. Để hiểu rõ hơn sự khác biệt của từng loại, hãy xem qua bản so sánh chuyên sâu giữa HTML và HTML5 của chúng tôi.

Ưu điểm và nhược điểm của HTML

Như hầu hết mọi chuyện, HTML có ưu và nhược điểm của riêng nó. Ưu điểm:
  • Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn.
  • Sử dụng mượt mà trên hầu hết mọi trình duyệt.
  • Có quá trình học đơn giản và trực tiếp.
  • Mã nguồn mở và hoàn toàn miễn phí.
  • Markup gọn gàng và đồng nhất.
  • Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C).
  • Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js.
Khuyết điểm:
  • Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
  • Nó có thể thực thi một số logic nhất định cho người dùng. Vì vậy, hầu hết các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers.
  • Một số trình duyệt chậm hỗ trợ tính năng mới.
  • Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ không render được tag mới)

HTML, CSS, và JavaScript liên quan với nhau như thế nào?

Mặc dù HTML là một ngôn ngữ mạnh mẽ, nó vẫn không đủ tính năng để xây dựng một website chuyên nghiệp và hoàn toàn responsive. Chúng ta chỉ có thể dùng HTMl để thêm element dạng văn bản và tạo ra giao diện cấu trúc cho nội dung. Tuy nhiên, HTML tương thích hoàn toàn với 2 ngôn ngữ frontend là: CSS (Cascading Style Sheets), và JavaScript. Cùng với nhau, những ngôn ngữ này có thể kết hợp với nhau để tăng trải nghiệm người dùng và thiết lập các chức năng cao cấp khác:
  • CSS chịu trách nhiệm cho việc thiết kế, tạo kiểu cho backgrounds, màu sắc, bố cục, phân cách và hiệu ứng.
  • JavaScript giúp bạn tạo ra những chức năng động như: slider, pop-up và thư viện ảnh.
Hãy xem HTML giống như là một người, CMS giống như là quần áo, JavaScript là cách ứng xử và hành vi của người đó.

Vậy…HTML là gì?

HTML là ngôn ngữ markup của thế giới web. Ngôn ngữ markup là loại ngôn ngữ dùng để thiết kế và sắp đặt nội dung, ảnh, và tất cả những yếu tố trên website. Nó chạy trên bất kỳ trình duyệt nào và được quản lý bởi World Wide Web Consortium. Bạn có thể dùng nó để cấu trúc nội dung của website hay ứng dụng web. Nó là lớp thấp nhất trong các lớp xử lý ở frontend, đảm nhiệm việc tạo phong cách cơ bản nhất cho website, và kết hợp với CSS để làm đẹp cho website hơn và kết hợp với JavaScript để tăng chức năng cho website.
Về trang chủ Về Khóa học
Bài học trước Bài học tiếp theo

Mục lục

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

  1. Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
    1. Cài đặt trình soạn thảo code Visual Studio Code IDE Xem trước
    2. Cài đặt tiện ích mở rộng Live Server Extension cho Visual Studio Code
  2. HTML5 là gì? Các thẻ (tag) HTML cơ bản 19
    1. HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML
    2. Khác biệt giữa HTML và HTML5
    3. Cấu trúc file HTML5 cơ bản
    4. Các Quy tắc và Quy ước nên tuân theo khi lập trình web HTML5 CSS JS
    5. Các thói quen cần có khi lập trình web sử dụng HTML
    6. Các thẻ (tag) định nghĩa mô tả (meta) cho trang web
    7. Các thẻ (tag) định dạng Đề mục (Heading), Phân đoạn (Paragraph), Ngắt dòng (Break) cho văn bản (Text)
    8. Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule)
    9. Các thẻ (tag) định dạng kiểu font chữ
    10. Các thẻ (tag) định dạng hiển thị cho văn bản (text)
    11. Phân biệt 2 họ font chữ phổ biến SERIF và SANS SERIF
    12. Các thẻ (tag) tạo Siêu liên kết (hyperlink)
    13. Các thẻ (tag) tạo Danh sách (list)
    14. Các thẻ (tag) chèn hình ảnh vào trang web
    15. Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web
    16. Các thẻ (tag) làm thanh tự động cuộn nội dung trong trang web
    17. Các ký tự đặc biệt trong HTML
    18. Thẻ (tag) IFRAME để nhúng trang web khác vào trang web của mình
    19. Các loại font chữ phổ biến trong thiết kế web SERIF, SANS SERIF, DISPLAY, HANDWRITING, MONOSPACE
  3. Thiết kế bố cục trang web (layout) 12
    1. Thẻ TABLE (TABLE tag) là gì?
    2. Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag)
    3. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Đơn giản
    4. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang chủ
    5. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giới thiệu
    6. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Liên hệ
    7. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Danh sách Sản phẩm
    8. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Sản phẩm chi tiết
    9. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giỏ hàng
    10. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Tìm kiếm
    11. Thẻ DIV (DIV tag) là gì?
    12. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag)
  4. Tạo biểu mẫu nhập liệu sử dụng thẻ (tag) FORM 21
    1. Biểu mẫu nhập liệu (form) là gì? Thường được sử dụng vào mục đích gì?
    2. Tạo ô nhập liệu INPUT 1 dòng (single line text)
    3. Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text)
    4. Tạo ô nhập liệu INPUT dạng ẩn (hidden)
    5. Tạo nút bấm BUTTON
    6. Tạo ô nhập liệu CHECKBOX chọn 1 hoặc nhiều những tùy chọn
    7. Tạo ô nhập liệu RADIO chọn 1 trong những tùy chọn
    8. Tạo ô nhập liệu SELECT cho phép chọn lựa tùy chọn
    9. Tạo ô nhập liệu INPUT kiểu COLOR
    10. Tạo ô nhập liệu INPUT kiểu DATE
    11. Tạo ô nhập liệu INPUT kiểu EMAIL
    12. Tạo ô nhập liệu INPUT kiểu NUMBER
    13. Tạo ô nhập liệu INPUT kiểu RANGE
    14. Tạo ô nhập liệu INPUT kiểu TEL (số điện thoại)
    15. Tạo ô nhập liệu INPUT kiểu TIME
    16. Tạo ô nhập liệu INPUT kiểu URL
    17. Tạo thanh đo lường METER
    18. Tạo thanh tiến trình PROGRESS
    19. Tạo biểu mẫu (Form) đặt vé Máy bay
    20. Tạo biểu mẫu (Form) Đăng nhập
    21. Tạo biểu mẫu (Form) Đăng ký
  5. CSS là gì? 33
    1. CSS là gì? Cú pháp sử dụng CSS
    2. Các cách áp dụng CSS để định dạng trang web
    3. Các thuộc tính CSS định dạng font chữ
    4. Các thuộc tính CSS quy định màu sắc đối tượng
    5. Đơn vị đo lường trong CSS
    6. Bài tập - Tạo menu ngang đa cấp bằng CSS
    7. Các thuộc tính quy định Kích thước và Khoảng cách của các phần tử
    8. Tìm hiểu về Thuộc tính vị trí Position trong CSS
    9. Tìm hiểu các thuộc tính quy định vị trí Trôi nổi, Dàn hàng ngang sử dụng Float Left, Float Right trong CSS
    10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix
    11. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 1
    12. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 2
    13. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 3
    14. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Call for Action
    15. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Feature Product
    16. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Services
    17. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Team
    18. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Experience
    19. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 1
    20. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 2
    21. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 3
    22. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Statistic
    23. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Testimonials
    24. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Pricing Tables
    25. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 1
    26. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 2
    27. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Footer
    28. Bộ lựa chọn đặc biệt theo trạng thái Pseudo Class và Pseudo Element trong CSS
    29. Bộ lựa chọn trong CSS (CSS Selector)
    30. Sử dụng CSS để làm nhà sáng tạo Nghệ thuật sắp xếp trình bày chữ Typography
    31. Hướng dẫn phân tích Bố cục (layout) Web bán hàng Thực phẩm Dinh dưỡng Organic
    32. Tư duy Thiết kế Khung cần có khi xây dựng giao diện Một Trang web
    33. Tìm hiểu toàn diện về thuộc tính trình diễn ảnh object-fit trong CSS
  6. Javascript căn bản 9
    1. Javascript là gì? Ứng dụng của Javascript
    2. Các cách sử dụng Javascript trong trang web
    3. Biến trong Javascript
    4. Hàm trong Javascript
    5. Lab 01 - tạo chương trình tính toán cơ bản
    6. Bài tập Ghép chuỗi String
    7. Kiểm tra Kiến thức JS
    8. Cấu trúc điều khiển sử dụng IF ELSE
    9. Cách lấy dữ liệu Người dùng từ Biểu mẫu (FORM)
  7. JQuery căn bản 10
    1. Giới thiệu JQuery và ứng dụng của JQuery trong thiết kế, lập trình web
    2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web
    3. Tìm hiểu quy tắc vận hành của JQUERY
    4. Toàn tập về Bộ lựa chọn (selector)
    5. Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY
    6. Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout
    7. Bài tập Thực thi một hàm xử lý liên tục sau 1 khoảng thời gian bằng hàm setInterval
    8. Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY
    9. Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR
    10. Tích hợp công cụ chọn Ngày Tháng Date Picker
  8. Bootstrap là gì? JQuery là cái chi? 8
    1. Giới thiệu Bootstrap
    2. Cách sử dụng Bootstrap trong dự án của bạn
    3. Hệ thống Lưới (GRID) của Bootstrap
    4. Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap
    5. Ràng buộc dữ liệu (validation) bằng Bootstrap
    6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty
    7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive)
    8. Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query
  9. Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap 14
    1. Lộ trình (Roadmap) Thực hiện Đồ án
    2. Khởi tạo thư mục dự án
    3. Phân tích Bố cục (layout)
    4. Xây dựng Trang chủ (index)
    5. Xây dựng Trang Giới thiệu (about)
    6. Xây dựng Trang Liên hệ (contact)
    7. Xây dựng Trang Danh sách Sản phẩm (products)
    8. Xây dựng Trang Chi tiết Sản phẩm (product_detail)
    9. Xây dựng Trang Giỏ hàng (cart)
    10. Xây dựng Trang Thanh toán (checkout)
    11. Xây dựng Trang Đăng nhập (login)
    12. Xây dựng Trang Đăng ký (register)
    13. Xây dựng Trang Tìm kiếm (search)
    14. Thưởng thức Kết quả (demo version)
  10. Kiểm tra
  11. Tài liệu tham khảo 4
    1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend HTML CSS JS
    2. SourceCode tham khảo Lập trình web Frontend HTML CSS JS
    3. Các thể loại Menu trong Thiết kế Web
    4. Tổng hợp các công cụ tự sinh Giao diện HTML, CSS, JS tuyệt vời dành cho Nhà phát triển thiết kế Web
  12. VueJS 7
    1. VueJS là gì? Ứng dụng của VueJS trong phát triển web FrontEnd
    2. Tìm hiểu Kiến trúc Hệ thống Web MVVM - Model View ViewModel
    3. Component trong VueJS
    4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản
    5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap
    6. Bài tập - Sử dụng Bootstrap và VueJS để thiết kế Trang Tuyển dụng các Vị trí Việc làm Công nghệ
    7. Test
  13. UI/UX trong lập trình Web 2
    1. Tìm hiểu về khái niệm UI/UX trong thiết kế ứng dụng
    2. Quy trình Xây dựng, Thiết kế một trang Web
  14. CSS Flexbox 1
    1. Tạo cấu trúc Dòng x Cột trong CSS Flexbox
  15. Extras 2
    1. Bài tập xử lý lưu trữ dữ liệu với LocalStorage
    2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS
  16. Video khóa học 1
    1. Video khóa học toàn tập
Bài học trước Bài học tiếp theo
Về trang chủ Về Khóa học