HTML là gì?
HTML là viết tắt của Hyper Text Markup Language. HTML là ngôn ngữ đánh dấu tiêu chuẩn cho các trang web. Các phân tử HTML là các khối xây dựng của các trang HTML, nó cho phép người dùng tạo các cấu trúc các phần, đoạn văn, tiêu đề, liên kết và chuỗi khối cho các trang web và ứng dụng. Các phần tử HTML được biểu thị bằng các thẻ <>
HTML không phải là ngôn ngữ lập trình, có nghĩa là nó không có khả năng tạo chức năng động. Thay vào đó, nó cho phép tổ chức và định dạng các tài liệu, tương tự như Microsorf Word
Khi làm việc với HTML, chúng tôi sử dụng các cấu trúc mã đơn giản (thẻ và thuôc tính) để đánh dấu một trang web.
HTML hoạt động như thế nào
Tài liệu HTML là các tệp kết thúc bằng a. mở rộng html hoặc .htm. Sau đó, bạn có thể xem bằng bất kỳ trình duyệt web nào (như Google Chrome, Safari hoặc Mozilla Firefox).
Trình duyệt đọc tệp HTML và hiển thị nội dung để người dùng internet có thể xem nó.
Thông thường, trang web trung bình bao gồm một số trang HTML khác nhau. Ví dụ: trang chủ, về trang, trang liên hệ đều có tài liệu HTML riêng.
Mỗi trang HTML bao gồm một tập hợp các thẻ (còn được gọi là các yếu tố) mà bạn có thể gọi là các khối xây dựng của các trang web. Họ tạo ra một hệ thống phân cấp cấu trúc nội dung thành các phần, đoạn văn, tiêu đề và các khối nội dung khác.
Hầu hết các phần tử HTML có phần mở và phần đóng sử dụng cú pháp <tag> </ tag> .
Dưới đây, bạn có thể thấy một ví dụ mã về cách các thành phần HTML có thể được cấu trúc:
1. <div>
2. <h1>The Main Heading</h1>
3. <h2>A catchy subheading</h2>
4. <p>Paragraph one</p>
5. <img src=“/” alt=“Image”>
6. <p>Paragraph two with a <a href=“https://example.com”>hyperlink</a></p>
7. </div>
• Phần tử ngoài cùng là một phân chia đơn giản ( <div> </ div> ) bạn có thể sử dụng để đánh dấu các phần nội dung lớn hơn.
• Nó chứa một tiêu đề ( <h1> </ h1> ), một tiêu đề phụ ( <h2> </ h2> ), hai đoạn văn ( <p> </ p> ) và một hình ảnh ( <img> ).
• Đoạn thứ hai bao gồm một liên kết ( <a> </a> ) với thuộc tính href chứa URL đích.
• Thẻ hình ảnh cũng có hai thuộc tính: src cho đường dẫn hình ảnh và alt cho mô tả hình ảnh.
Trong HTML thì có 2 thẻ được sử dụng nhiều nhất
Thẻ HTML có hai loại chính: thẻ cấp khối và thẻ nội tuyến .
1. Các phần tử cấp khối chiếm toàn bộ không gian có sẵn và luôn bắt đầu một dòng mới trong tài liệu. Tiêu đề và đoạn văn là một ví dụ về thẻ khối.
2. Các phần tử nội tuyến chỉ chiếm dung lượng mà chúng cần và không bắt đầu một dòng mới trên trang. Chúng thường để định dạng nội dung bên trong của các thành phần cấp khối. Liên kết và chuỗi nhấn mạnh là ví dụ thẻ nội tuyến.
Thẻ cấp khối
Ba thẻ cấp độ khối mà mọi tài liệu HTML cần chứa là <html> , <head> và <body>.
• Thẻ <html> </ html> là thành phần cấp cao nhất bao quanh mọi trang HTML.
• Thẻ <head> </ head> chứa thông tin meta như tiêu đề và bảng mã của trang.
• Cuối cùng, thẻ <body> </ body> chứa tất cả nội dung xuất hiện trên trang.
1. <html>
2. <head>
3. <!– META INFORMATION –>
4. </head>
5. <body>
6. <!– PAGE CONTENT –>
7. </body>
8. </html>
• Tiêu đề có 6 cấp độ trong HTML. Chúng nằm trong khoảng từ <h1> </ h1> đến <h6> </ h6>, trong đó h1 là tiêu đề cấp cao nhất và h6 là tiêu đề thấp nhất. Các đoạn được bao quanh bởi <p> </ p> , trong khi các chuỗi khối sử dụng thẻ <blockquote> </ blockquote> .
• Các bộ phận là các phần nội dung lớn hơn thường chứa một số đoạn, hình ảnh, đôi khi là chuỗi khối và các yếu tố nhỏ hơn khác. Chúng tôi có thể đánh dấu chúng bằng cách sử dụng thẻ <div> </ div> . Một phần tử div có thể chứa một thẻ div khác bên trong nó.
• Bạn cũng có thể sử dụng thẻ <ol> </ ol> cho danh sách được sắp xếp và <ul> </ ul> cho những người không có thứ tự. Các mục danh sách riêng lẻ phải được đính kèm bởi thẻ <li> </ li> . Ví dụ: đây là cách một danh sách không có thứ tự cơ bản trông như thế nào trong HTML:
1. <ul>
2. <li>List item 1</li>
3. <li>List item 2</li>
4. <li>List item 3</li>
5. </ul>
Thẻ nội tuyến
Nhiều thẻ nội tuyến được sử dụng để định dạng văn bản. Ví dụ: thẻ <strong> </ strong> sẽ hiển thị phần tử được in đậm, trong khi thẻ <em> </ em> sẽ hiển thị bằng chữ in nghiêng.
Các siêu liên kết cũng là các thành phần nội tuyến yêu cầu các thẻ <a> </a> và thuộc tính href để chỉ ra đích đến của liên kết:
1. <a href = “https://example.com/”> Click me! </a>
Hình ảnh là yếu tố nội tuyến quá. Bạn có thể thêm một bằng cách sử dụng <img> mà không cần bất kỳ thẻ đóng nào. Nhưng bạn cũng sẽ cần sử dụng thuộc tính src để chỉ định đường dẫn hình ảnh, ví dụ:
1. <img src=“/images/example.jpg” alt=“Example image”>
Ưu điểm và nhược điểm của HTML
Ưu điểm
Ngôn ngữ được sử dụng rộng rãi với nhiều tài nguyên và một cộng đồng lớn hỗ trợ
Chạy trong mọi trình duyệt web
Nguồn mở và hoàn toàn miễn phí
Đánh dấu sự nhất quán
Các tiêu chuẩn web chính thức được duy trì bởi World Wide Web Consortium (W3C)
Dễ dàng tích hợp các ngôn ngữ phụ trợ như PHP và Node.js
Nhược điểm
Chủ yếu được sử dụng cho các trang web tĩnh. Đối với các chức năng động, bạn có thể cần sử dụng JavaScript hoặc ngôn ngữ phụ trợ như PHP
Nó không cho phép người dùng thực hiện logic. Do đó tất cả các trang web cần phải được tạo riêng, ngay cả khi chúng sử dụng các yếu tố, ví dụ như tiêu đề và chân trang
Một số trình duyệt áp dụng các tính năng mới từ từ
Hành vi trình duyệt đôi khi khó dự đoán (ví dụ: các trình duyệt cũ hơn không luôn hiển thị các thẻ mới hơn)
Bạn muốn tìm hiểu thêm các thông tin liên hệ về thiết kế web hay các vấn đề liên quan đến thiết kế web bạn có thể liên hệ với chúng tôi!
MYPAGE – GIẢI PHÁP THIẾT KẾ WEB HÀNG ĐẦU CHO DOANH NGHIỆP ?
Địa chỉ: 27 Hoàng Hoa Thám, Phường 6, Quận Bình Thạnh, TP.HCM
Hotline: 082 878 6789
Email: info@mypage.vn
Website: www.mypage.vn
