HTML viết tắt của Hypertext Markup Language là một trong những ngôn ngữ cơ bản đầu tiên mà chúng ta cần nắm vững để xây dựng và cấu trúc lại các thành phần trong Website.
Có thể nói HTML là ngôn ngữ đánh dấu siêu văn bản. HTML thường được sử dụng trong việc phân chia các đoạn văn, Heading, Links, Blockquotes...
Cấu trúc của HTML
Website thường chứa nhiều trang con, những trang con có tập tin HTML riêng, HTML có tác dụng bố cục và định dạng trang web. HTML kết hợp với CSS và JavaScript sẽ trở thành nền tảng vững chắc cho thế giới mạng.
HTML được tạo ra bởi Tim Berners - Lee, nhà vật lý học của trung tâm nghiên cứu CERN Thụy Sĩ.
HTML là một chuẩn Internet được tổ chức W3C "World Wide Web Consortium" vận hành và phát triển.
Phiên bản đầu tiên HTML xuất hiện năm 1991 có 18 tag HTML. Năm 1999 phiên bản HTML 4.01 xuất bản và năm 2000 các nhà phát triển đã thay thế HTML bằng XHTML.
Năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêm vào Makeup, nhằm xác định rõ nội dung. Ví dụ (<article>, <header>, <footer>...).
Hiện tại thì HTML Element Reference có khoản hơn 40 tag và có một số tag bị tạm ngưng do một số trình duyệt không hỗ trợ.
HTML Document có đuôi dạng .html hoặc htm, chúng ta xem bằng các trình duyệt Google Chrome, Firefox, Safari... Nhiệm vụ của trình duyệt là đọc các File HTML và biến đổi thành nội dung Visual trên Internet để người sử dụng hiểu được.
Một Website có nhiều HTML Document như (trang chính, trang blog, trang liên hệ, trang giới thiệu...). Mỗi trang như vậy sẽ có một tệp HTML riêng.
Mỗi tài liệu HTML gồm một tag "còn gọi là element". Cấu trúc như cây thư mục với các Heading, Section, Paragraph... và các nội dung khác.
Tất cả HTML Element đều có một tag mở và một tag đóng có cấu trúc như sau:
<tag> "mở".
...
</tag> "đóng".
Ưu điểm của HTML
🌟 Nhiều tài nguyên hỗ trợ.
🌟 Hoạt động nhanh trên tất cả các trình duyệt.
🌟 HTML đơn giản dễ hiểu.
🌟 HTML thường có các Markup sử dụng ngắn gọn, đồng nhất.
🌟 Các nguồn mở miễn phí.
🌟 HTML là chuẩn được vận hành bởi W3C.
🌟 Dễ tích hợp nhiều ngôn ngữ Backend như: PHP, Node.js...
Nhược điểm của HTML
❓ Chỉ được áp dụng cho web tĩnh, nếu bạn muốn tạo tính năng động thì lập trình phải dùng thêm JavaScript hoặc ngôn ngữ Backend của bên thứ 3 như (PHP...).
❓ Mỗi trang HTML phải được tạo riêng biệt, vì vậy sẽ có nhiều yếu tố trùng lặp như (header, footer...).
❓ Khó kiểm soát cách đọc và hiển thị File HTML của trình duyệt, một số trình duyệt không render được tag mới.
❓ Một vài trình duyệt chậm để hỗ trợ tính năng mới của HTML.
HTML hỗ trợ như thế nào cho Website và vai trò của HTML trong lập trình Web
❓ HTML cấu tạo nên những thành phần của Website. Nhưng lại không tạo được các chức năng động cho Website.
❓ Thao tác làm việc với HTML đơn giản.
❓ HTML cấu tạo nên những thành phần của Website. Nhưng lại không tạo được các chức năng động cho Website.
❓ Thao tác làm việc với HTML đơn giản.
❓ HTML là ngôn ngữ siêu văn bản, giúp hình thành các cấu trúc cơ bản của Website, là trang hệ thống hoàn chỉnh, cụ thể, giúp chia khung, sườn và các thành phần trong một Website và khai báo các File kỹ thuật số như: “Nhạc, hình ảnh…”
❓ Cần HTML để tạo một Website có cấu trúc tốt và nhiều yếu tố trong văn bản mà lập trình không thể thiếu.
❓ Tất cả các lập trình viên đều phải học HTML như một loại ngôn ngữ cơ bản.
❓ HTML có nhiều thẻ định dạng, giúp chúng ta trình bày Website đẹp và đơn giản hơn giúp người dùng dễ sử dụng.
❓ HTML có thể hiển thị trên bất kỳ nền tảng nào như: Linux, Windows, MacOS vì HTML là một nền tảng độc lập.
Thuật ngữ HTML thường gặp để sử dụng thuận tiện hơn
Các Attributes gồm tên và giá trị được xác định sau tên của một thành phần trong thẻ mở.
Attributes có định dạng như: (tên thuộc tính + dấu bằng + giá trị thuộc tính trích dẫn)
VD: Element <a> gồm Attribute href: <a href = “http://makemoneydl.com/”> Working Online</a>
Một số thuộc tính thường dùng: Attribute Class, ID, SRC, Href…
🌟 Tags: Một Element được bao quanh bởi các dấu ngoặc < > tạo ra các thẻ
<div> mở
</div> đóng
🌟 Attributes: Là thuộc tính sử dụng để cung cấp thông tin bổ sung về một Element.
Bố cục 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.
🌟 Bố cục của một trang Web gồm những phần sau:
<html>
<head>
<title>tiêu đề trang</title>
</head>
<body>
<h1>tiêu đề chính</h1>
<h2>tiêu đề phụ</h2>
<p>đoạn</p>
</body>
</html>
👀 <!DOCTYPE html> khai báo kiểu dữ liệu hiển thị.
👀 <html>, </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>, </head> hai báo các thông tin meta của Website như: tiêu đề trang, charset.
👀 <title>, </title> cặp thẻ nằm bên trong thẻ <head>, dùng để khai báo tiêu đề của trang.
👀 <body>, </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 <h1> ... đến ... <h6> trong đó <h1> là cấp độ heading cao nhất và <h6> là cấp độ heading thấp nhất.
👀 <p>, </p> cặp thẻ chứa các đoạn văn bản của Website.
Các tag thông dụng nhất của HTML
👉 Trong HTML có 2 loại tag
Block-level tags
Có thể nói đây là loại tag cấp cao, chiếm hầu hết không gian của Website thường bắt đầu với dòng mới của trang.
Các trang HTML cần có 3 block-level tags:
Inline tags
Tag này chiếm một phần nhỏ trong không gian Website, không bắt đầu dòng mới của trang.
Inline tags thường được dùng để định dạng, tạo bố cục cho nội dung bên trong của block-level tags.
HTML có nhiều dạng inline tags.
Tag <strong> </strong> dùng để định dạng chữ in đậm
Tag <em> </em> dùng để định dạng chữ in nghiêngNếu muốn gắn Hyperlink vào trang thì sử dụng cặp tag <a> </a> với attributes href để xác định đường link cụ thể, đoạn code có dạng như: <a href="https://makemoneydl.com/">Xin chào!</a>
Khác biệt giữa HTML và HTML5
HTML5 “cũng được gọi là HTML” được phát hành vào năm 1999.
Phiên bản nâng cấp mới nhất của HTML là HTML5 được phát hành vào năm 2014.
So với HTML, HTML5 đã được bổ sung thêm rất nhiều tính năng quan trọng như:
👀 Khả năng hỗ trợ Video và Audio: Thay vì phải sử dụng Flash Player để phát Video, Audio thì với HTML5, lập trình viên có thể nhúng trực tiếp file Video, Audio vào Website bằng tag <audio></audio> hoặc <video></video>.
👀 Hỗ trợ Scalable vector graphic (SVG) và MathML cho các công thức toán học hoặc phương trình hóa học.
👀 Có thêm nhiều cải thiện về mặt ngôn ngữ. Chứa nhiều semantic tag giúp người dùng hiểu được nội dung chính của Website như (<article></article>, <section></section>, <aside></aside>, <header></header>, <footer></footer>).
👀 Hỗ trợ nhiều loại kiểu form hơn so với HTML như: email, ngày, giờ, số điện thoại, URL, tìm kiếm,…
👀 Ngoài ra, một số tag lỗi thời của HTML đã được loại bỏ ở phiên bản HTML5 như: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike,…
👀 Một khác biệt nữa không thể không nhắc đến giữa HTML và HTML5 là: HTML không cho phép JavaScript chạy trong trình duyệt web (JavaScript bắt buộc phải chạy trong interface thread của trình duyệt). HTML5 lại có thể hỗ trợ để JavaScript chạy nền (nhờ có JS web worker API).
HTML, CSS, và JavaScript liên quan với nhau như thế nào?
HTML, CSS và JavaScript kết hợp với nhau để tạo ra một Website chuyên nghiệp
Tuy HTML được đánh giá là khá mạnh nhưng nó vẫn chưa đủ khả năng xây dựng một trang web chuyên nghiệp. Vì vậy các lập trình viên thường chỉ sử dụng HTML để thêm các Element dạng văn bản và xây dựng giao diện cấu trúc cho phần nội dung trên trang và tiếp theo họ dùng 2 ngôn ngữ Frontend là CSS và Javascript để tạo nên một Website hoàn chỉnh.
Với khả năng tương thích cao, HTML khi kết hợp cùng CSS và Javascript sẽ có thể giúp tăng trải nghiệm cho người dùng và thiết lập được các chức năng cao cấp khác như:
✍️ CSS đóng vai trò chính trong việc thiết kế, xây dựng Background, màu sắc và các hiệu ứng cho trang
✍️ Javascript có nhiệm vụ giúp tạo ra các chức năng động như: thư viện hình ảnh, slider, pop-up,…
Các phần mềm lập trình HTML
Để lập trình web hiệu quả và tiết kiệm thời gian, công sức, bạn có thể sử dụng các phần mềm lập trình HTML như:
👀 PHP designer
Phần mềm lập trình HTML – Sublime Text
Sublime Text là một trong các phần mềm lập trình phổ biến hiện nay
Sublime Text là phần mềm viết code được Jon Skinner phát triển và ra mắt năm 2008. Phần mềm lập trình này được tạo ra dựa trên ngôn ngữ Python và C++. Không chỉ là một text editor hiệu quả, Sublime Text còn giúp lập trình viên tiết kiệm thời gian với nhiều Plugin có sẵn.
Phiên bản mới nhất của Sublime Text là Sublime Text 3. Bạn có thể dùng bản miễn phí hoặc trả phí đều được vì nhìn chung cả hai không có quá nhiều tính năng khác biệt nhau.
Phần mềm lập trình HTML – PHP designer
PHP Designer là phần mềm lập trình do Michael Pham phát triển và ra mắt năm 1998. Hiện nay, phần mềm này đã có mặt hơn 200 quốc gia trên thế giới và là cánh tay phải đắc lực của rất nhiều lập trình viên. Ngoài việc hỗ trợ viết Code, PHP Designer còn hỗ trợ thiết kế web PHP.
Giao diện của phần mềm này khá đơn giản, dễ sử dụng, phù hợp với các thiết kế web giới thiệu công ty. PHP có thể hỗ trợ đa ngôn ngữ.
Phần mềm lập trình HTML – Dreamweaver
Dreamweaver có thiết kế chuyên nghiệp và có đầy đủ các tính năng cần thiết để lập trình viên viết code web, phần mềm hoặc ứng dụng.
Ngoài ra, phần mềm này cũng có khá nhiều tiện ích với thao tác sử dụng rất dễ dàng “chỉ cần kéo thả, di chuyển các phần tử”.
Dreamweaver tương thích với rất nhiều loại ngôn ngữ lập trình như: PHP, ASP.NET, JSP, ASP,…
Phần mềm lập trình HTML – NotePad ++
NotePAd ++ tạo ra môi trường lập trình nhỏ gọn, tiện lợi với nhiều tiện ích giúp tối ưu hóa quá trình xây dựng web/phần mềm. Có rất nhiều ngôn ngữ lập trình mà NotePad ++ có thể hỗ trợ như: C++, Java, C#, XML, HTML, PHP, CSS, Pascal,…
Các phần mềm lập trình Website trên đây có thể được sử dụng kết hợp với nhau để tạo nên một trang web chuyên nghiệp và hoàn hảo hơn.
Nếu muốn dùng một lúc nhiều phần mềm thì người lập trình phải có kiến thức sâu rộng và am hiểu tường tận về cách vận hành của chúng.
Ngoài ra việc thuê Hosting, mua tên miền, thiết kế Website là một phần cốt lõi. Để thực sự hiểu được các thiết kế này thì HTML là một phần không thể thiếu.
