Hướng dẫn the code trong html - mã trong html

Dẫn nhập

Ở phần giới thiệu khóa học, Kteam đã giới thiệu đến các bạn TỔNG QUAN KHÓA HỌC và project Website Landing Page chúng ta sẽ thực hành trong khóa học này. Website Landing Page chúng ta sẽ thực hành trong khóa học này. 

Trong bài này chúng ta đi vào phần đầu tiên là Tổng quan về HTML và các cú pháp cơ bản.Tổng quan về HTML và các cú pháp cơ bản.


Nội dung

Trong bài hướng dẫn này, chúng ta sẽ cùng tìm hiểu các vấn đề:

  • Giới thiệu về HTML
  • Cài đặt & sử dụng phần mềm Visual Studio code
  • Cách tạo & cấu trúc cơ bản của một file HTML

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả. Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.


Giới thiệu về HTML

Cài đặt & sử dụng phần mềm Visual Studio codeviết tắt Hyper Text Markup Language (hay Siêu văn bản) được thiết kế ra để tạo nên các trang web

Cách tạo & cấu trúc cơ bản của một file HTMLWorld Wide Web

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

, thẻ 

, …và những thẻ không cần thẻ đóng như thẻ

Cài đặt và sử dụng phần mềm Visual Studio Codeindex.html để bắt đầu code

Hướng dẫn the code trong html - mã trong html

Hướng dẫn the code trong html - mã trong html


Cách tạo & cấu trúc cơ bản của một file HTML

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

HTML viết tắtHyper Text Markup Language (hay Siêu văn bản) được thiết kế ra để tạo nên các trang web trong HTML hay bất kì ngôn ngữ lập trình nào đều rất quan trọng, giúp code dễ hiểu, dễ bảo trì và cập nhật

Cùng với CSS và JavaScript tạo nên bộ 3 nền tảng cho World Wide Web

Cú pháp html được cấu tạo bởi các thẻ có đóng mở, như cặp thẻ , thẻ , …và những thẻ không cần thẻ đóng như thẻ thẻ Nội dung comment -->

Việc code HTML được thực hiện thông qua nhiều công cụ trong đó có các editor nổi tiếng như SUBLIME TEXT, bracket, nodepad ++ và trong loạt bài hướng dẫn này mình sẽ hướng dẫn các bạn sử dụng Visual studio code, một editor khá mới nhưng vô cùng mạnh mẽ, tiện lợi.




Cài đặt và sử dụng phần mềm Visual Studio Code

Cú pháp html được cấu tạo bởi các thẻ có đóng mở, như cặp thẻ , thẻ , …và những thẻ không cần thẻ đóng như thẻ thẻ DOCTYPE html>

Cú pháp html được cấu tạo bởi các thẻ có đóng mở, như cặp thẻ , thẻ , …và những thẻ không cần thẻ đóng như thẻ thẻ

Cú pháp html được cấu tạo bởi các thẻ có đóng mở, như cặp thẻ , thẻ , …và những thẻ không cần thẻ đóng như thẻ thẻ

Howkteam.com

Cú pháp html được cấu tạo bởi các thẻ có đóng mở, như cặp thẻ , thẻ , …và những thẻ không cần thẻ đóng như thẻ thẻ

Cú pháp html được cấu tạo bởi các thẻ có đóng mở, như cặp thẻ , thẻ , …và những thẻ không cần thẻ đóng như thẻ thẻ

Cú pháp html được cấu tạo bởi các thẻ có đóng mở, như cặp thẻ , thẻ , …và những thẻ không cần thẻ đóng như thẻ thẻ

Cú pháp html được cấu tạo bởi các thẻ có đóng mở, như cặp thẻ , thẻ , …và những thẻ không cần thẻ đóng như thẻ thẻ

Việc code HTML được thực hiện thông qua nhiều công cụ trong đó có các editor nổi tiếng như SUBLIME TEXT, bracket, nodepad ++ và trong loạt bài hướng dẫn này mình sẽ hướng dẫn các bạn sử dụng Visual studio code, một editor khá mới nhưng vô cùng mạnh mẽ, tiện lợi. dùng để xác định rằng code bạn đang dùng là html

  • Cài đặt và sử dụng phần mềm Visual Studio Code chứa toàn bộ các dòng lệnh html bên trong (sau này còn là code của Javascript và CSS khi chèn vào)
  • Mở trang chủ của visual studio code ra và chọn phiên bản phù hợp (window, macOS, linux), tải về và cài đặt bình thường chứa thông tin của webpage và đặc trưng bởi thẻ , mà mặc định sẽ không được hiển thị trên web
  • Link tải: code.visualstudio.com chứa toàn bộ nội dung html sẽ hiển thị lên trên trang web của chúng ta.

Hướng dẫn the code trong html - mã trong html
Hướng dẫn the code trong html - mã trong html


Mở giao diện visual studio code, tạo file index.html để bắt đầu code

Comment

Comment trong HTML hay bất kì ngôn ngữ lập trình nào đều rất quan trọng, giúp code dễ hiểu, dễ bảo trì và cập nhật

Cú pháp Comment trong HTML Nội dung tiêu đề

Hướng dẫn the code trong html - mã trong html

Tương tự với các thẻ h2,h3,h4,h5,h6 với cấp độ tiêu đề giảm dần

Ví dụ:

Howkteam.com

Kteam

Free Education

Share To Be Better

Khóa học lập trình Front End
Project Landing Page

Cấu trúc của file HTML cơ bản

Cấu trúc chung của html gồm có thẻ dùng để xác định rằng code bạn đang dùng là htmlNội dung đoạn văn bản chứa bên trong

Ví dụ:

Với mong muốn mang đến kiến thức chất lượng, miễn phí cho mọi người, với tâm huyết phá bỏ rào cản kiến thức từ việc giáo dục thu phí. Chúng tôi - Kteam đã lập nên trang website này để thế giới phẳng hơn. Bất cứ ai có mong muốn khai phá thế giới. Phá bỏ mọi thứ ngăn cản sự phát triển tất yếu bền vững của xã hội đều là Kter (Thành viên của Kteam). GIÁO DỤC LÀ MIỄN PHÍ!


Cấu trúc của file HTML cơ bản

Cấu trúc chung của html gồm có thẻ dùng để xác định rằng code bạn đang dùng là html, , , , >,….

Cặp thẻ đóng mở chứa toàn bộ các dòng lệnh html bên trong (sau này còn là code của Javascript và CSS khi chèn vào)
để cách xuống dòng,


để kẻ đường ngăn cách ngang,…

Tiếp đến là 2 cặp thẻ chứa thông tin của webpage và đặc trưng bởi thẻ , mà mặc định sẽ không được hiển thị trên web

Ví dụ:

HOWKTEAM BLOG

HOWKTEAM

Hello Kter


HOWKTEAM HOWKTEAM HOWKTEAM Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem debitis eos dolorem itaque tempore libero ipsa quibusdam fuga, vel, molestiae maxime harum consequatur architecto repellat dolores cupiditate iure nisi fugiat? Lorem ipsum, dolor sit amet consect
etur adipisicing elit. Nulla, culpa.

Cấu trúc của file HTML cơ bản


Cấu trúc chung của html gồm có thẻ dùng để xác định rằng code bạn đang dùng là html

Cặp thẻ đóng mở chứa toàn bộ các dòng lệnh html bên trong (sau này còn là code của Javascript và CSS khi chèn vào)

Hướng dẫn the code trong html - mã trong html
Link dan den HOWKTEAM

Cài đặt và sử dụng phần mềm Visual Studio Code


Mở trang chủ của visual studio code ra và chọn phiên bản phù hợp (window, macOS, linux), tải về và cài đặt bình thường

Link tải: code.visualstudio.com

Mở giao diện visual studio code, tạo file index.html để bắt đầu code

CommentLuyện tập – Thử thách – Không ngại khó”.


Comment trong HTML hay bất kì ngôn ngữ lập trình nào đều rất quan trọng, giúp code dễ hiểu, dễ bảo trì và cập nhật

Cú pháp Comment trong HTML