[Html cơ bản bài 1] Giới thiệu về HTML

Ngày đăng: 10/12/2023 | Tác giả: bbugtea | 351 lượt xem

Chào mọi người! Trong serise này mình xin viết lại chủ đề về HTML cơ bản bài 1: “Giới thiệu về HTML”. Tài liệu này được biên soạn từ thực tế của mình và tổng hợp thêm từ nhiều nguồn khác nhau. Trong quá trình soạn bài viết này sẽ có những sai sót mong các bạn đóng góp, phản hổi đề tài liệu này được cập nhật phiên bản tốt hơn.

=>Đối với những bạn mới đặt chân vào con đường “lập trình web” thì HTML sẽ là ngôn ngữ đầu tiên mà các bạn cần phải học, và đây cũng chính là bài đầu tiên trong loạt tài liệu học HTML cơ bản tại Bbugsoft. Vì thế mình sẽ cố gắng nói thật đơn giản để giúp các bạn có được cái nhìn tổng quan về ngôn ngữ này.

HTML là gì ?

– HTML là chữ viết tắt của cụm từ “HyperText Markup Language” (ngôn ngữ đánh dấu siêu văn bản).

– HTML dùng để tạo ra các trang web, những nội dung mà chúng ta nhìn thấy trên trang web (chẳng hạn như: văn bản, hình ảnh, âm thanh, video, . . .) chính là những thứ được xây dựng dựa trên các thẻ HTML.

– Ví dụ: Trước tiên các bạn truy cập trang https://vietteltelecom.vn/. Sau đó, bấm tổ hợp phím Ctrl + U hoặc nhấp chuột phải vào trang rồi chọn Inspect thì các bạn sẽ thấy mã nguồn như bên dưới.

Ở hình ảnh trên chính là các thẻ HTML, chúng chính là nguồn gốc tạo ra những nội dung được hiển thị trên trang web của Viettel.

Tìm hiểu về khái niệm thẻ tag trong HTML?

– Thẻ (tag) là một từ khóa được đặt bên trong cặp dấu ngoặc nhọn.

– Mỗi thẻ sẽ có một chức năng riêng, ví dụ như:

Thẻ dùng để tạo một đoạn văn bản.
Thẻ <a> dùng để tạo một cái liên kết.
Thẻ <img> dùng để chèn một tấm hình vào trang web.
Thẻ <h1> để tạo tiêu đề lớn nhất cho văn bản khi chưa thiết lập style css cho thẻ đó.
<audio> để tạo phát tệp âm thanh trên trang web. Còn nhiều thẻ nữa nhé…

– Thông thường thì thẻ được chia ra làm hai loại chính, đó là: thẻ kép và thẻ đơn.

Thẻ kép trong HTML: Là loại thẻ mà khi chúng ta muốn sử dụng nó để tạo một nội dung gì đó cho trang web thì chúng ta cần phải dùng đến cả thẻ mở lẫn thẻ đóng (thẻ đóng có cách viết tương tự như thẻ mở, chỉ khác ở chỗ là phía trước tên của thẻ đóng thì có thêm một dấu gạch chéo ‘/’).

Ví dụ cú pháp sử dụng thẻ kép: <tagname>Viết nội dung tùy ý</tagname>

Ví dụ: Thẻ thuộc loại thẻ kép, để tạo được một đoạn văn giống như trong trang web nằm ở phía dưới hình ảnh này:

Thẻ đơn trong HTML: Là loại thẻ mà khi chúng ta muốn sử dụng nó để tạo một nội dung gì đó cho trang web thì chúng ta chỉ cần dùng mỗi thẻ mở, hay nói cách khác là không có thẻ đóng.

– Ví dụ: Thẻ <img> thuộc loại thẻ đơn, để chèn một tấm hình vào trong trang web giống như hình phía dưới thì chúng ta viết như sau:

Thẻ lồng nhau trong HTML: Thực chất chỉ là một trong những kỹ thuật cơ bản khi viết mã HTML gồm các thẻ đóng mở cha và thẻ đón mở con, các thẻ được lồng vào nhau để xây dựng nên những nội dung đa dạng hơn.

Ví dụ: Học HTML cơ bản tại Bbugsoft

Trong ví dụ trên thì mình có 2 thẻ được gọi ra là p và b. p(là thẻ cho đoạn văn bản cha) còn b(là thẻ đoạn văn bản in đậm là thẻ con). Vì thẻ tag b nằm trong thẻ tag p. Các bạn xem kết quả đầu ra bên dưới để hiểu rõ hơn nhé:

Lưu ý: Trong ngôn ngữ HTML, khi chúng ta viết mã sai quy tắc thì trên màn hình không hiện lên bất kỳ một thông báo lỗi nào, chỉ là các nội dung sẽ không được hiển thị chính xác như mong muốn mà thôi.

Tập tin HTML là gì?

– Tập tin HTML là một loại tập tin văn bản mà bên trong nó có chứa các thẻ HTML, một tập tin HTML phải có phần đuôi là .html hoặc .htm

– Lưu ý: Một tập tin HTML cũng có thể được gọi là:

Một tài liệu HTML.
Một trang HTML.
Một trang web.

Giới thiệu tài liệu hướng dẫn học HTML tại bbugsoft.com

– Hiện nay có nhiều bạn muốn học HTML nhưng vì một vài lý do nào đó (chẳng hạn như điều kiện kinh tế hoặc trùng thời gian làm việc, . . .) nên không thể đăng ký tham gia các khóa học tại các trung tâm hoặc khóa học trực tuyến, nên đã chọn cho mình con đường tự tìm kiếm tài liệu trên internet.

– Nắm bắt được nhu cầu đó, mình đã dành ra một khoảng thời gian khá dài để tổng hợp tất cả những kiến thức quan trọng trong HTML rồi biên soạn lại thành một “bộ tài liệu hướng dẫn học HTML” với mục đích tạo điều kiện cho các bạn có thể học HTML miễn phí, đồng thời làm chủ được thời gian.

– Bộ tài liệu này được biên soạn theo mức độ từ cơ bản đến nâng cao, mỗi bài viết đều đã được trau chuốt kỹ lưỡng, bài học trước sẽ cung cấp “kiến thức tiên quyết” cho bài học sau. Cho nên, ở mỗi bài học đều hết sức rõ ràng – mạch lạc – dễ hiểu.

– Nếu bạn là một người đang học HTML thông qua hình thức tự tìm kiếm tài liệu trên mạng thì mình nghĩ đây sẽ là một bộ tài liệu rất hữu ích dành cho bạn.

– Chúc các bạn có một khởi đầu tốt !