Đối với những ai mới bắt đầu hành trình lập trình web, HTML sẽ là ngôn ngữ đầu tiên cần học. Đây cũng chính là bài học mở đầu trong loạt tài liệu hướng dẫn HTML. Vì vậy, tôi sẽ trình bày một cách đơn giản, dễ hiểu, giúp bạn có được cái nhìn tổng quan về ngôn ngữ quan trọng này.
HTML là gì ?
HTML là viết tắt của HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản), được sử dụng để tạo và hiển thị nội dung trên các trang web. Những yếu tố như văn bản, hình ảnh, âm thanh, video,… mà bạn nhìn thấy trên một trang web đều được xây dựng dựa trên các thẻ HTML.
Ví dụ: Bạn có thể truy cập trang y2graphic.com, sau đó nhấn Ctrl + U hoặc nhấp chuột phải và chọn Xem nguồn trang để xem mã nguồn HTML.
Những thẻ HTML này chính là nền tảng tạo nên nội dung hiển thị trên trang web
Tìm hiểu khái niệm thẻ trong HTML
Thẻ (tag) là một từ khóa được đặt bên trong cặp dấu ngoặc nhọn (<>) và dùng để định dạng, cấu trúc nội dung trên trang web.
Mỗi thẻ có một chức năng riêng, ví dụ:
<p>: Tạo một đoạn văn bản.<a>: Tạo một liên kết.<img>: Chèn hình ảnh vào trang web.- …
Thẻ HTML được chia thành hai loại chính:
- Thẻ kép: Có thẻ mở và thẻ đóng (ví dụ:
<p>...</p>). - Thẻ đơn: Chỉ có thẻ mở, không cần thẻ đóng (ví dụ:
<img src="image.jpg" />).
Thẻ kép
Thẻ kép là loại thẻ yêu cầu cả thẻ mở và thẻ đóng khi sử dụng. Thẻ đóng có cú pháp tương tự thẻ mở, nhưng có thêm dấu gạch chéo (/) phía trước tên thẻ.
Cú pháp của thẻ kép:
<tagname>nội dung hiển thị</tagname>
Ví dụ:
Thẻ <p> là một thẻ kép, dùng để tạo đoạn văn bản trên trang web. Để hiển thị nội dung như mong muốn, bạn có thể viết như sau:
<p>Tài liệu học Lập Trình Web</p>Thẻ đơn
Thẻ đơn là loại thẻ chỉ cần thẻ mở, không có thẻ đóng. Khi sử dụng, chúng ta chỉ cần khai báo thẻ mà không cần kết thúc bằng thẻ đóng.
Ví dụ:
Thẻ <img> là một thẻ đơn, dùng để chèn hình ảnh vào trang web. Để hiển thị một hình ảnh như trong minh họa, bạn có thể viết như sau:
<img src="http://y2graphic.vn/image/face.jpg">Thẻ lồng nhau
Thẻ lồng nhau là một kỹ thuật cơ bản trong HTML, cho phép các thẻ được đặt bên trong nhau để tạo nội dung phong phú và đa dạng hơn.
Ví dụ:
Nếu muốn gạch chân một cụm từ trong đoạn văn bản, bạn có thể lồng thẻ <u> bên trong thẻ <p> như sau:
<p>Trung tâm <u>luyện thi</u> đại học</p>Một điểm quan trọng cần lưu ý là các thẻ HTML có thể lồng vào nhau, nhưng không được chéo nhau. Điều này có nghĩa là khi một thẻ được mở, nó phải được đóng trước khi thẻ chứa nó kết thúc.
Ví dụ: Viết như bên dưới là sai quy tắc.
<p>Trung tâm <u>luyện thi</p> đại học</u>Lưu ý:
Trong HTML, khi mã bị viết sai quy tắc, trình duyệt không báo lỗi nhưng nội dung có thể hiển thị không đúng như mong đợi. Vì vậy, cần đảm bảo đóng thẻ theo đúng thứ tự để tránh lỗi hiển thị.
Tìm hiểu khái niệm tập tin HTML
Tập tin HTML là một tập tin văn bản chứa các thẻ HTML, được sử dụng để tạo và hiển thị nội dung trên trình duyệt web. Một tập tin HTML phải có đuôi mở rộng là .html hoặc .htm.
Lưu ý: Tập tin HTML còn có thể được gọi bằng các tên khác như:
- Tài liệu HTML
- Trang HTML
- Trang web
Giới thiệu loạt tài liệu hướng dẫn học HTML trên Y2Graphic.com
Hiện nay, nhiều người muốn học HTML nhưng gặp khó khăn như hạn chế về kinh tế, trùng thời gian làm việc hoặc không thể tham gia các khóa học trực tuyến. Vì vậy, họ chọn cách tự học qua tài liệu trên Internet.
Hiểu được nhu cầu đó, chúng tôi đã dành nhiều thời gian để tổng hợp và biên soạn một bộ tài liệu hướng dẫn học HTML miễn phí. Bộ tài liệu này giúp bạn tự học linh hoạt, chủ động về thời gian mà không cần đến trung tâm.
Bộ tài liệu được xây dựng từ cơ bản đến nâng cao, với nội dung được trình bày rõ ràng, mạch lạc và dễ hiểu. Mỗi bài học trước sẽ cung cấp kiến thức nền tảng cho bài học sau, giúp bạn tiếp thu dễ dàng hơn. (Danh sách bài học có sẵn ở cột bên trái).
Nếu bạn đang tự học HTML qua tài liệu trực tuyến, thì đây sẽ là một nguồn tài liệu vô cùng hữu ích dành cho bạn.
💡 Chúc bạn có một khởi đầu thuận lợi trên hành trình học HTML! 🚀
