HTML là gì? Kiến thức Tổng quan Về HTML

[ad_1]

HTML là ngôn ngữ quan trọng và cũng là ngôn ngữ mà các coder khi mới bắt đầu vào nghê đều phải viết, nó cũng là nền tảng kiến thức để phát triển lên các ngôn ngữ khác. Cùng Tmarketing tìm hiểu tông quan kiến thức về HTML qua nội dung sau.

HTML là gì?

HTML (viết tắt của từ Hypertext Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript.

Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữ cục bộ và render tài liệu đó thành các trang web đa phương tiện. HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu.

Các phần tử HTML là các khối xây dựng của các trang HTML. Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào trang được hiển thị. HTML cung cấp một phương tiện để tạo tài liệu có cấu trúc bằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists, links, quotes và các mục khác. Các phần tử HTML được phân định bằng các tags, được viết bằng dấu ngoặc nhọn. Các tags như và giới thiệu trực tiếp nội dung vào trang. Các tags khác như

bao quanh và cung cấp thông tin về văn bản tài liệu và có thể bao gồm các thẻ khác làm phần tử phụ. Các trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để diễn giải nội dung của trang.

HTML có thể nhúng các chương trình được viết bằng scripting như JavaScript, điều này ảnh hưởng đến hành vi và nội dung của các trang web. Việc bao gồm CSS xác định giao diện và bố cục của nội dung. World Wide Web Consortium (W3C), trước đây là đơn vị bảo trì HTML và là người duy trì hiện tại của các tiêu chuẩn CSS, đã khuyến khích việc sử dụng CSS trên HTML trình bày rõ ràng kể từ năm 1997

Lịch sử phát triển HTML

HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Hiện nay, HTML đã trở thành một chuẩn Internet được tổ chức W3C (World Wide Web Consortium) vận hành và phát triển. Bạn có thể tự tìm kiếm tình trạng mới nhất của HTML tại bất kỳ thời điểm nào trên Website của W3C.

Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML. Phiên bản HTML 4.01 được xuất bản năm 1999. Sau đó, các nhà phát triển đã thay thế HTML bằng XHTML vào năm 2000.

Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêm vào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví dụ như: <article>, <header>, <footer>,…).

Theo Mozilla Developer Network thì HTML Element Reference hiện nay có khoảng hơn 140 tag. Tuy nhiên một vài tag trong số đó đã bị tạm ngưng (do không được hỗ trợ bởi các trình duyệt hiện hành).

HTML hoạt động như thế nào?

HTML documents là files kết thúc với đuôi .html hay .htm. Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào (như Google Chrome, Safari, hay Mozilla Firefox). Trình duyệt đọc các files HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem được nó.

Thông thường, trung bình một web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng.

Mỗi trang HTML chứa một bộ các tag (cũng được gọi là elements), bạn có thể xem như là việc xây dựng từng khối của một trang web. Nó tạo thành cấu trúc cây thư mục bao gồm section, paragraph, heading, và những khối nội dung khác.

Cấu trúc của HTML

Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc như .

Như mình đã nói ở trên, HTML sẽ được khai báo bằng các phần tử bởi các từ khóa. Nội dung nằm bên trong cặp từ khóa sẽ là nội dung bạn cần định dạng với HTML. Ví dụ dưới đây là một đoạn HTML khai báo một đoạn văn bản.

[html]<p>Đây là một đoạn văn bản trong HTML.</p>[/html]

Ngoài ra, trong các thẻ còn có các thuộc tính, thuộc tính sẽ đặt bên trong thẻ mở đầu, mỗi thuộc tính sẽ có giá trị được đặt trong dấu ngoặc kép và cách nhau bởi dấu bằng (=) với tên thuộc tính. Ví dụ dưới đây là một thẻ có sử dụng thuộc tính-

[html]<form action="https://tmarketing.vn"> </form>[/html]

Một thẻ có thể sử dụng nhiều thuộc tính chứ không phải chỉ một thuộc tính nhé.

Bên dưới, bạn có thể xem code ví dụ của một trang HTML được cấu trúc như thế nào:

<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="https://tmarketing.vn/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>

Element ngoài cùng là bộ tag division (), dùng để mark up cho phần nội dung lớn.
Nó bao gồm một tag tiêu đề (), một tag subheading (), 2 văn bản (), và một bước hình ().
Đoạn văn thứ 2 chứa tag chứa link () với attribute href chứa địa chỉ URL đích.
Tag hình ảnh cũng có 2 attribute: src cho ảnh, và alt cho mô tả của hình.

Ưu điểm và nhược điểm của HTML là gì?

Ưu điểm của HTML là gì?

Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn.
Sử dụng mượt mà trên hầu hết mọi trình duyệt.
Có quá trình học đơn giản và trực tiếp.
Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C).
Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js.
Mã nguồn mở và hoàn toàn miễn phí.
Markup gọn gàng và đồng nhất.

Nhược điểm của HTML là gì?

Nó có thể thực thi một số logic nhất định cho người dùng. Vì
Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ: những trình duyệt cũ không render được tag mới).
Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
vậy, hầu hết các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers.
Một số trình duyệt chậm hỗ trợ tính năng mới.

Các đặc điểm của HTML

HTML có nhiều thẻ định dạng, do đó bạn có thể trình bày trang Web dễ dàng, hiệu quả với ngôn ngữ đánh dấu siêu văn bản này. Với tôi, nó là một ngôn ngữ đánh dấu dễ dàng và đơn giản để sử dụng. Chúng ta có thể sử dụng nó để thiết kế trang Web cùng với văn bản một cách linh hoạt.

Một đặc điểm theo tôi khá thú vị là HTML có thể liên kết đến các trang Web khác. Nhờ ngôn ngữ đánh dấu này, bạn có thể thêm các Video, hình ảnh, âm thanh vào để các Website hấp dẫn, đẹp mắt và dễ tương tác hơn.

Đặc biệt, HTML có thể hiển thị trên bất kỳ nền tảng nào khác như Linux, Windows, và Max vì nó là một nền tảng độc lập.

Vai trò của HTML trong lập trình Web

Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc.

Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. Ví dụ một website như Thachpham.com sẽ được hình thành bởi:

HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.
CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….
Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to).
PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt (ví dụ như các bài viết sẽ được lưu trong máy chủ).
MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL).
Nhưng ở đây, tạm thời bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn, bạn hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó, nó như là một cái khung sườn vậy.

Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem.

Bố cục HTML là gì?

HTML là gì? HTML bao gồm nhiều tag khác nhau
HTML bao gồm nhiều tag khác nhau
HTML có rất nhiều tag khác nhau. Mỗi thẻ sẽ có những tác dụng nhất định, giúp xây dựng nên một cấu trúc hoàn chỉnh cho Website.

Để biết bố cục HTML của một trang web như thế nào, mời bạn xem ví dụ code bên dưới:

<!DOCTYPE html>

<html>

    <head>

        <title>Page Title</title>

    </head>

    <body>

 

        <h1>The Main Heading</h1>

        <h2>A catchy subheading</h2>

        <p>First paragraph</p>



    </body>

</html>

Trong đó:

<!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị
<html> và </html>: cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụ đóng gói tất cả nội dung của trang HTML
<head> và </head>: khai báo các thông tin meta của trang web như: tiêu đề trang, charset
<title> và </title>: cặp thẻ nằm bên trong thẻ <head>, dùng để khai báo tiêu đề của trang
<body> và </body>: cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang
<h1></h1>, <h2></h2>: định dạng dữ liệu dạng heading. Thông thường có 6 cấp độ heading trong HTML, trải dài từ <h1> tới <h6>. Trong đó, <h1> là cấp độ heading cao nhất và <h6> là cấp độ heading thấp nhất.
<p> và </p>: cặp thẻ chứa các đoạn văn bản của trang web

Các tag thông dụng nhất của HTML

HTML tags có 2 loại chính: block-level và inline tags.

Elements Block-level sẽ sử dụng toàn không gian trang web và luôn bắt đầu dòng mới của trang web. Headings và paragraph là những ví dụ chính của block tags.

Inline elements chỉ chiếm phần nhỏ không gian web và không bắt đầu dòng mới của trang web. Chúng thường dùng để định dạng nội dung bên trong của block level elements. Links và những tag nhấn mạnh là những tag inlines phổ biến.

Block-Level Tags

3 block level tags của mỗi trang HTML cần có những tag như là <html>, <head>, và <body>.

Tag <html></html> là element cao nhất dùng để đóng gói mỗi trang HTML.
Tag <head></head> chứa các thông tin meta như là tiêu đề trang và charset.
Cuối cùng, <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện trên trang.

<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>

Có tất cả 6 cấp độ trong HMTL, trải dài từ <h1></h1> tới <h6></h6>, h1 là cấp heading cao nhất và h6 là thấp nhất. Văn bản được đặt trong tag <p></p>, nhưng blockquotes thì sử dụng<blockquote></blockquote>.

Divisions là những khu vực lớn, chứa nhiều paragraph, images, blockquotes, và các yếu tố khác. Chúng ta có thể đánh dấu chúng bằng cách sử dụng <div></div>. Div element cũng có thể chứa div tag khác bên trong nó.
Bạn cũng có thể dùng tag <ol></ol> cho danh sách theo thứ tự và <ul></ul> cho danh sách không theo thứ tự. Danh sách cần được được đặt trong tag <li></li>. Ví dụ, đây là cách hiển thị của một danh sách không theo thứ tự trong HTML

Inline Tags

Có nhiều inline tags được dùng để định dạng vnă bản. Ví dụ như, tag <strong></strong> sẽ định dạng chữ in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiên.

Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác định link cụ thể:

<a href="https://example.com/">Click me!</a>

Ảnh cũng là element inline. Bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần tag đóng. Nhưng bạn cũng cần sử dụng attribute src để xác định nguồn ảnh, ví dụ như:

<img src="https://tmarketing.vn/images/example.jpg" alt="Example image">

Điểm khác biệt giữa HTML5 và ngôn ngữ HTML là gì?

Từ những ngày đầu tiên, HTML đã là một phát minh vượt thời đại. W3C liên tục xuất bản các bản cập nhật và nâng cấp.

HTML4 (cũng thường được gọi là “HTML”) được phát hành năm 1999, trong khi phiên bản mới nhất, lớn nhất là HTML5 thì phát hành năm 2014. Phiên bản này đã ra mắt rất nhiều tính năng quan trọng mới.

Một trong số các tính năng hấp dẫn nhất của HTML5 là khả năng hỗ trợ audio và video. Thay vì sử dụng Flash Player, chúng ta giờ đây chỉ cần nhúng videos và audio files vào trong trang web bằng tag <audio></audio> hay <video></video>. Nó cũng hỗ trợ những tính năng mặc định như hỗ trợ scalable vector graphics (SVG) và MathML cho các công thức toán học và phương trình khoa học.

HTML5 có rất nhiều cải thiện về mặt ngôn ngữ. Các tag mới nhằm giới thiệu cho trình duyệt biết mục đích chính của nội dung trong website là gì, việc này có lợi cho cả người đọc và cả search engine.

Các semantic tags đó là <article></article>, <section></section>, <aside></aside>, <header></header>, và <footer></footer>.

Sự liên quan giữ HTML, CSS, và JavaScript

Mặc dù HTML là một ngôn ngữ mạnh mẽ, nó vẫn không đủ tính năng để xây dựng một website chuyên nghiệp và hoàn toàn responsive. Chúng ta chỉ có thể dùng HTMl để thêm element dạng văn bản và tạo ra giao diện cấu trúc cho nội dung.

Tuy nhiên, HTML tương thích hoàn toàn với 2 ngôn ngữ frontend là: CSS (Cascading Style Sheets), và JavaScript. Cùng với nhau, những ngôn ngữ này có thể kết hợp với nhau để tăng trải nghiệm người dùng và thiết lập các chức năng cao cấp khác:

CSS chịu trách nhiệm cho việc thiết kế, tạo kiểu cho backgrounds, màu sắc, bố cục, phân cách và hiệu ứng.
JavaScript giúp bạn tạo ra những chức năng động như: slider, pop-up và thư viện ảnh.

Hãy xem HTML giống như là một người, CMS giống như là quần áo, JavaScript là cách ứng xử và hành vi của người đó.

Các phần mềm dùng để lập trình HTML

Để lập trình HTML hiệu quả, tiết kiệm thời gian, bạn có thể dùng các phần mềm sau:

Sublime Text

Đây là phần mềm viết code dựa trên ngôn ngữ Python và C++, được giới thiệu vào năm 2008 do Jon Skinner phát triển. Sublime Text là một công cụ text edit hiệu quả, giúp người dùng tiết kiệm thời gian nhờ có sẵn nhiều plugin.

Hiện nay, Sublime Text 3 là phiên bản mới nhất của phần mềm. Nó cho phép người dùng tùy ý sử dụng bản miễn phí hoặc tính phí, với các tính năng khá tương đồng.

PHP designer

Lâu đời hơn Sublime Text, PHP designer ra mắt năm 1998 và do Michael Pham phát triển. Đến nay, PHP designer được sử dụng rộng rãi trên 200 quốc gia. Nó trở thành công cụ hỗ trợ đắc lực của các lập trình viên trong việc viết code, thiết kế web PHP.

PHP designer có giao diện đơn giản, dễ sử dụng và hỗ trợ hơn 20 ngôn ngữ.

Dreamweaver

Dreamweaver là phần mềm được các trường đại học ưa chuộng và sử dụng cho mục đích giảng dạy. Phần mềm có thiết kế chuyên nghiệp, đầy đủ tính năng cần thiết, phục vụ công tác viết code cho website hay ứng dụng, phần mềm.

Bên cạnh đó, Dreamweaver rất dễ sử dụng. Đó là người dùng chỉ cần kéo thả hay di chuyển những phần tử. Đồng thời, nó cũng tương thích với nhiều ngôn ngữ lập trình phổ biến như PHP, ASP, ASP.NET, JSP, …

NotePad ++

Phần mềm này tạo ra một môi trường lập trình tiện lợi, nhỏ gọn cùng khá nhiều tiện ích để tối ưu quá trình thiết kế website, ứng dụng. NotePad ++ cũng hỗ trợ nhiều ngôn ngữ lập trình như HTML, PHP, CSS, Java, C++, C#, XML, Pascal,…

Như vậy với kiên thức bên trên, Tmarketing đã chia sẻ tất tần tật về HTML tổng quan, hy vọng nội dung hữu ích dành cho bạn. Nếu có bất kì thắc mắc nào bạn có thể liên hệ với Tmarketing đơn vị chuyên thiết kế web ô tô , thiết kế website cho khách sạn và cung cấp các giải pháp về website – hosting – VPS các giải pháp về Digital Marketing để giải đáp các thắc mắc nhé !

[ad_2]

Source link