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. Show 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. Nội dungTrong 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ề HTMLHTML viế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ù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ẻ <div></div>, thẻ <h2></h2>, …và những thẻ không cần thẻ đóng như thẻ <img > thẻ <input > 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 CodeMở 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
Mở giao diện visual studio code, tạo file index.html để bắt đầu code Cách tạo & cấu trúc cơ bản của một file HTMLCommentComment 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
Ví dụ:
Cấu trúc của file HTML cơ bản
Cấu trúc chung của html gồm có thẻ <!DOCTYPE html> dùng để xác định rằng code bạn đang dùng là html
Các thẻ thường gặp trong HTMLChúng ta tiếp tục với các thẻ thường gặp trong html Thẻ tiêu đề
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ụ:
Thẻ định dạng đoạn văn bản
Ví dụ:
Các thẻ mà tạo ra hiệu ứng với chữNgoài các thẻ trên, HTML còn có các thẻ tạo hiệu ứng với chữ, đoạn văn bản như <strong></strong>, <em></em>, <b></b>, <u> </u>, <strike></strike>,…. Và một số thẻ khác như <br> để cách xuống dòng, <hr> để kẻ đường ngăn cách ngang,… Cùng tham khảo ví dụ bên dưới để hiểu hơn về cách sử dụng các thẻ trên Ví dụ:
Ta được kết quả Thẻ hình ảnh & liên kếtThẻ <img> thẻ chứa nội dung là file ảnh có các thuộc tính:
Thẻ <a></a> dẫn đến các trang web khác.
Thẻ <form></form> là nơi chứa các thẻ như input, textarea, select để làm mẫu điền các thông tin trong trang web Thẻ <input></input> là chỗ điền thông tin theo dạng chữ, hoặc dạng email, chúng ta sẽ nói kĩ về input ở các bài sau Thẻ <textarea></textarea> điền thông tin dạng văn bản Ví dụ:
Ta được kết quả của đoạn code trên hiền thị lên trang web như sau Kết luậnỞ bài hướng dẫn này chúng ta đã có được những khái niệm ban đầu về html, cách tạo file html cũng như những cú pháp cơ bản. Ở bài học sau, chúng ta sẽ cùng tìm hiểu về CSS – CÁCH CHÈN CSS VÀO HTML và các cú pháp cơ bản của CSS Cảm ơn bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quyên “Luyện tập – Thử thách – Không ngại khó”. Thảo luậnNếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. |