15 Tháng Hai, 2019
inThiết kế web
Không có phản hồi
139
Tóm tắt
- 1 HTML là gì?
- 2 Lịch sử của HTML
- 3 HTML hoạt động như thế nào?
- 4 Tổng quan về các thẻ HTML được sử dụng nhiều nhất
- 4.1 Thẻ cấp khối
- 4.2 Thẻ nội tuyến
- 5 Ưu và nhược điểm của HTML
- 6 HTML, CSS và JavaScript có liên quan như thế nào?
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 và 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ư Microsoft 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. Ví dụ: chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản kèm theo trong thẻ bắt đầu <p> và đóng </ p> .
Lịch sử của HTML
HTML được phát minh bởi Tim Berners-Lee , một nhà vật lý tại viện nghiên cứu Cern ở Thụy Sĩ. Ông nảy ra ý tưởng về một hệ thống siêu văn bản dựa trên Internet.
Siêu văn bản có nghĩa là một văn bản có chứa các tham chiếu (liên kết) đến các văn bản khác mà người xem có thể truy cập ngay lập tức. Ông đã xuất bản phiên bản HTML đầu tiên vào năm 1991, bao gồm 18 thẻ HTML. Kể từ đó, mỗi phiên bản mới của ngôn ngữ HTML đi kèm với các thẻ và thuộc tính mới (công cụ sửa đổi thẻ) để đánh dấu.
Theo Tài liệu tham khảo phần tử HTML của Mozilla Developer Network, hiện tại, có 140 thẻ HTML.
Do sự phổ biến nhanh chóng, HTML hiện được coi là một tiêu chuẩn web chính thức. Các thông số kỹ thuật HTML được World Wide Web Consortium (W3C) duy trì và phát triển.
Nâng cấp lớn nhất của ngôn ngữ là việc giới thiệu HTML5 vào năm 2014. Nó đã thêm một số thẻ ngữ nghĩa mới vào đánh dấu, cho thấy ý nghĩa của nội dung, chẳng hạn như <article> , <title> và <footer>
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:
- <div>
- <h1>The Main Heading</h1>
- <h2>A catchy subheading</h2>
- <p>Paragraph one</p>
- <imgsrc=“/”alt=“Image”>
- <p>Paragraph two with a <ahref=“https://example.com”>hyperlink</a></p>
- </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.
Tổng quan về các thẻ HTML đượ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 .
- 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.
- 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.
- <html>
- <head>
- <!– META INFORMATION –>
- </head>
- <body>
- <!– PAGE CONTENT –>
- </body>
- </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:
- <ul>
- <li>List item 1</li>
- <li>List item 2</li>
- <li>List item 3</li>
- </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:
- <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ụ:
- <imgsrc=“/images/example.jpg”alt=“Example image”>
Ưu và nhược điểm của HTML
Giống như hầu hết mọi thứ, HTML đi kèm với một số điểm mạnh và hạn chế:
Ưu điểm:
- Một 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.
- Cần thời gian học tập.
- Nguồn mở và hoàn toàn miễn phí.
- Đánh dấu 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 với 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 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ù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).
HTML, CSS và JavaScript có liên quan như thế nào?
Mặc dù HTML là một ngôn ngữ phổ biến, nhưng nó không đầy đủ để thiết kế web chuyên nghiệp và responsive. Chúng tôi chỉ có thể sử dụng nó để thêm các yếu tố văn bản và tạo cấu trúc của nội dung.
Tuy nhiên, HTML hoạt động rất tốt với hai ngôn ngữ ngoại vi khác là CSS (Cascading Style Sheets) và JavaScript:
- CSS chịu trách nhiệm cho các kiểu dáng như nền, màu sắc, bố cục, khoảng cách và hình động.
- JavaScript cho phép bạn thêm chức năng động như thanh trượt, cửa sổ bật lên và thư viện ảnh.
Recommended Posts
Web hosting là gì? Các thông tin quan trọng về web hosting
11 Tháng Tư, 2019
Top 10 công ty thiết kế web lớn nhất tp hcm
27 Tháng Hai, 2019
Thiết kế website có chịu thuế gtgt không?
26 Tháng Hai, 2019
Trả lời Hủy
The post HTML là gì ? Tại sao nó lại quan trọng với website? appeared first on Học Marketing Online Trực Tuyến.
Theo: Hocmarketing