• Người dùng khách

    Người dùng khách

Trang chủ Trang chủ EDU TECH Bài viết Liên hệ
Chuyển tới nội dung chính

Tổng quan các chủ đề

  • Chung

    Thu gọn toàn bộ Mở rộng tất cả

  • Tổng quan về khóa học HTML, CSS

  • Các kiến thức cơ bản về HTML, CSS

    • Bài học icon
      Bài 2: HTML, CSS là gì? Ví dụ trực quan về HTML, CSS Bài học


      1. Giới thiệu về HTML  

      HTML là ngôn ngữ siêu văn bản thực hành đưa ra nội dung về ý nghĩa và cấu trúc của trang bằng cách sử dụng phần tử thích hợp. Mã HTML mô tả giá trị của nội dung trên một trang, bất kể thiết kế hay kích thước của nội dung đó. Ngoài ra, HTML dễ quản lý web và các hoạt động hơn, vì nó hiển thị rõ ràng nội dung của mỗi phần.

      Phiên bản mới nhất và nâng cao là HTML5, các phiên bản mới nhất của các trình duyệt thông như dụng  Safari, Google chrome, Mozial FireFox, Opera, Microsoft Edgg đều hỗ trợ HTML5 . Ngoài ra nhiều tính năng của HTML5 cũng hỗ trợ trên Internet Explorer 9.0.

      2. Giới thiệu về CSS

      CSS là một ngôn ngữ phức tạp, chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML) hay còn được biết đến là nền tảng của thiết kế và phát triển web. Nó cho phép chúng ta thêm bố cục và thiết kế vào các trang của chúng ta và nó cho phép chia sẻ từ phần tử của trang này đến phần tử của trang khác.

      Đầu tiên, điều quan trọng là phải biết chính xác cách các kiểu được hiển thị. Cụ thể, chúng ta sẽ cần phải biết các loại công cụ hoạt động như thế nào và thứ tự của các bộ chọn đó có thể ảnh hưởng như thế nào đến kiểu được hiển thị.


    • Bài học icon
      Bài 3: Cài đặt môi trường, công cụ cần thiết Bài học

      Đây là video hướng dẫn cài đặt môi trường và các công cụ cần thiết cho người mới bắt đầu học, làm quen với HTML CSS.




    • Bài học icon
      Bài 4: Kiến thức cơ bản về các thuộc tính HTML, CSS Bài học

      Các thẻ cơ bản trong HTML

      Một tài liệu HTML được tạo nên từ các cặp thẻ html

      • Thẻ được bắt đầu bằng dấu < và kết thúc bằng dấu >
      • Tên thẻ nằm giữa cặp dấu <>

      Ví dụ: <a> tức là đang khai báo thẻ a

      • Cặp thẻ được tạo nên từ thẻ mở và thẻ đóng

      Ví dụ: <a></a> trong đó <a> là thẻ mở, </a> là thẻ đóng

      • Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở
      • Cũng có một số thẻ chỉ có thẻ mở mà không có thẻ đóng.

      Cú pháp của CSS cơ bản

      Để có thể tạo được CSS, bạn cần biết đến Style Rule – cấu trúc của một CSS. Các rule này sẽ được trình duyệt thông dịch và áp dụng với các phần tử tương ứng đã được viết ra trên tài liệu trước đó. Một Style Rule bao gồm 3 phần như sau:

       

      • Selector: Là một thẻ HTML mà bạn áp dụng style cho CSS. Ví dụ như: thẻ p, thẻ div, thẻ span…
      • Property: Đây là một thuộc tính của HTML. Trong CSS thì tất cả các thuộc tính của HTML đều được chuyển thành CSS property như: border, color…
      • Value: Là giá trị được gán cho property CSS.

       

      Cú pháp CSS cơ bản
      Cú pháp CSS cơ bản

       

    • Bài tập icon
      Xây dựng trang home của trang web Coolmate Bài tập
      Opened: Thứ Hai, 24 tháng 6 2024, 12:00 AM
      Due: Thứ Hai, 1 tháng 7 2024, 12:00 AM

  • Các kiến thức nâng cao về HTML, CSS

    • Bài học icon
      Bài 5: Học flexbox nâng cao Bài học



      1. Hàm calc

      Function calc dùng để tính chiều rộng (width) của các thẻ dạng block như DIV, SECTION….

      Cách dùng: width: calc(100% - 500px);

       Có thể sử dụng các phép toán cộng trừ nhân chia (+ – * /)

      2. Hàm attr

      Function attr trả về giá trị của một thuộc tính của thẻ đang sử dụng.

      Cách dùng: attr(tên thuộc tính)

      3. Hàm counter

      Function counter dùng để tăng giá trị biến đếm lên 1 đơn vị hoặc đánh dấu theo dạng danh sách, thường dùng để đánh số thứ tự.

      Cách dùng: counter(tên, kiểu)

      4. Hàm var

      Function var dùng để gọi biến được định nghĩa trong thuộc tính :root, dùng cho việc định nghĩa màu, chia cột, padding….Giúp cho việc chỉ thay đổi duy nhất một chỗ, không phải tìm nhiều nơi trong css.

      Cách dùng: var( biến );

      5. Hàm translate

      Function translate được dùng cho thuộc tính transform, translate bao gồm translateX (theo trục ngang), translateY theo trục dọc. Translate được dùng khi cần dịch chuyển một thẻ html nào đó khỏi vị trí ban đầu.

      Cách dùng: transform:translateX(30px);

      transform:translateY(30px);
      transform:translate(30px,30px);

       

    • Bài học icon
      Bài 6: CSS BEM Là Gì? Đặt Tên CSS Class Theo Tiêu Chuẩn BEM Bài học



      Quy tắc đặt tên

      Thực tế cho thấy rằng, hầu hết các cơ sở mã CSS đôi khi được phát triển mà không có bất kỳ cấu trúc hay quy ước nào cho việc đặt tên cả. Điều này dẫn đến việc cơ sở mã CSS không thể nào khắc phục được trong thời gian dài.

      BEM đảm bảo rằng tất cả nhưng người tham gia vào sự phát triển của trang web đều hoạt động với một cơ sở mã duy nhất và dùng cùng một ngôn ngữ. Sử dụng cách đặt tên phù hợp sẽ giúp bạn có được một chuẩn bị tốt hơn cho những thay đổi trong việc thiết kế của trang web sau này.

    • Trắc nghiệm icon
      Trắc nghiệm về HTML, CSS

  • Thực hành thông qua xây dựng giao diện The Band

MightyID tự hào là tập đoàn EdTech hàng đầu của Canada. Chúng tôi cung cấp dịch vụ số hoá toàn diện cho trường học và doanh nghiệp.

Giới thiệu

MightyLMS là một phần của hệ thống số hoá giáo dục MightyEdu, một hệ thống có thể tự hào phục vụ toàn diện Quyết định 4725/QĐ-BGDĐT về Bộ chỉ số đánh giá mức độ chuyển đổi số của cơ sở giáo dục phổ thông và giáo dục thường xuyên do Bộ trưởng Bộ Giáo dục và Đào tạo ban hành ngày 30/12/2022.

Dịch vụ

Download App MightyID

  • image
  • image

© MightyID Elearning All Rights Reserved by MightyID.