HTML là một loại ngôn ngữ đánh dấu được thiết kế để tạo ra các website trên nền tảng World Wide Web mà bất cứ ai muốn lập trình website cũng cần phải học. Vậy HTML là gì? HTML có phải là một loại ngôn ngữ lập trình? Muốn học HTML thì bắt đầu từ đâu? Tất cả sẽ có trong bài viết sau của Nghề Nghiệp Việc Làm 24h.
HTML là gì?
HTML là viết tắt của cụm từ Hypertext Markup Language – ngôn ngữ đánh dấu siêu văn bản dùng để cấu trúc nên các thành phần Website như phân chia đoạn, links, heading… Muốn lập trình website, điều đầu tiên bạn phải học HTML.
Lưu ý rằng, HTML có tác dụng bố cục, định dạng trang web, không phải ngôn ngữ lập trình có thể thực hiện các chức năng động. HTML thường được kết hợp với CSS và JavaScript để tạo nên các cấu trúc trang website sinh động và đẹp mắt.
Phiên bản HTML lần đầu tiên xuất hiện năm 1991 với 18 tag HTML do Tim Berners-Lee – nhà vật lý học thuộc trung tâm nghiên cứu CERN (Thuỵ Sĩ) phát triển. Ngày nay, HTML đã trở thành chuẩn được W3C (World Wide Web Consortium) vận hành, phát triển với hơn 140 tag.
Các loại tag thông dụng trong HTML là gì?
Các tag HTML được sử dụng chính gồm 2 loại: Elements block-level tags và inline tags.
- Elements Block-level tag
Đây là loại tag bắt buộc, luôn bắt đầu dòng mới của trang web. Ba loại block-level tags cần có là <html></html>, <head></head> và <body></body>.
- <html>; </html>: cặp thẻ bắt buộc, là element cấp cao nhất thực hiện nhiệm vụ đóng gói toàn bộ nội dung của trang HTML
- <head>;</head>: khai báo thông tin về meta của một trang web như charset, tiêu đề trang…
- <body>;</body>: cặp thẻ đóng gói nội dung hiển thị trên trang
- Inline Tags
Là loại tags chiếm phần nhỏ trong không gian web, thường sử dụng để định dạng các phần nội dung bên trong, tạo bố cục mỗi block level elements.
Ví dụ như, tag <strong></strong> sẽ định dạng chữ in đậm, tag <em></em> sẽ định dạng chữ in nghiêng.
Xem thêm: Ngôn ngữ lập trình là gì? Các ngôn ngữ lập trình phổ biến hiện nay
Cấu trúc đoạn HTML
Tài liệu HTML hình thành bởi các phần tử HTML quy định bằng thẻ tag và attributes. Mỗi thẻ có những tác dụng nhất định, tạo nên cấu trúc website hoàn chỉnh. Nó tạo nên các cấu trúc cây thư mục gồm section, heading, paragraph và nhiều khối nội dung khác.
Cặp thẻ tag được bao bọc bởi dấu < > (ví dụ như <html>) và thường được khai báo thành một cặp thẻ gồm thẻ mở và thẻ đóng. Ví dụ: <p>đây là cách thêm đoạn trong html.</p>
Về cơ bản, cấu trúc đoạn HTML thường có ba phần:
- <!Doctype> – phần khai báo bắt buộc.
Phần này nhằm cho người dùng biết trình duyệt hiện đang dùng phiên bản HTML nào. Hiện nay có nhiều loại HTML, mỗi trình duyệt web sử dụng một loại nhất định.
- Phần tiêu đề khai báo ban đầu: bắt đầu bằng thẻ <head>, kết thúc bởi thẻ </head>
Phần tiêu đề dùng để khai báo về về meta, little, css…
Tiêu đề thường được hiển thị trên thanh điều hướng trang web. Nội dung tiêu đề nằm giữa cặp thẻ <title> và </title>.
- Phần thân: chứa các nội dung chính (hình ảnh, bài viết) của trang web
Phần thân nằm sau tiêu đề, gồm các thông tin hình ảnh, văn bản, liên kết… bạn muốn hiển thị trên trang web. Phần thân bắt đầu và kết thúc với thẻ <body> và </body>.
Sau đây là phần code ví dụ của một đoạn HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> Heading</h1>
<h2>Subheading</h2>
<p>Paragraph</p>
</body>
</html>
Trong đó, <h1></h1>;<h2></h2>: định dạng dữ liệu heading. Thông thường, trong HTML có 6 cấp độ heading từ <h1> đến <h6>. Cấp độ heading cao nhất là <h1>, cấp độ heading thấp nhất là <h6>. <p>; </p>: cặp thẻ chứa đoạn văn bản bên trong trang web.
Ưu – nhược điểm của HTML là gì?
HTML có vai trò xây dựng nên các cấu trúc siêu văn bản trên website, khai báo tập tin kỹ thuật số như video, hình ảnh, âm thanh. HTML có các ưu điểm và nhược điểm riêng.
Ưu điểm:
- Được sử dụng phổ biến trên nhiều trình duyệt hiện nay như Cốc cốc, Chrome, Internet Explorer…
- Có nhiều tài nguyên hỗ trợ, cộng đồng sử dụng đông đảo.
- Đơn giản, dễ học, dễ hiểu
- Mã nguồn mở
- Hoàn toàn miễn phí.
- Markup gọn gàng, đồng nhất.
- Dễ dàng tích hợp với nhiều ngôn ngữ lập trình backend như Python, PHP, NodeJs, Ruby,…
Hạn chế:
- Dùng chủ yếu cho web tĩnh.
- Các tính năng động như realtime cần sử dụng kết hợp JavaScript hoặc ngôn ngữ backend từ bên thứ 3 như PHP.
- Chỉ có thể thực thi một số cấu trúc nhất định, không tạo được sự khác biệt.
- Chậm hỗ trợ tính năng mới trên một số trình duyệt, đặc biệt là với bản HTML 5.
Tuy được đánh giá cao nhưng HTML vẫn chưa đủ khả năng tạo nên một website chuyên nghiệp, sinh động. Do đó, lập trình viên thường chỉ dùng HTML để thêm element dạng văn bản hoặc xây dựng giao diện cấu trúc cho các phần nội dung trên trang. Sau đó, họ sử dụng thêm hai ngôn ngữ frontend là Javascript và CSS để tạo nên website hoàn chỉnh.
Một số phần mềm hỗ trợ lập trình HTML là gì?
Để lập trình website hiệu quả, tiết kiệm công sức, thời gian, các lập trình viên thường sử dụng một số phần mềm lập trình HTML sau:
- Sublime Text: là phần mềm viết code phát triển bởi Jon Skinner từ 2008, phần mềm tạo ra dựa trên ngôn ngữ C++ và Python với nhiều plugin có sẵn và dễ sử dụng.
- PHP designer do Michael Pham phát triển từ 1998, phần mềm này hiện hỗ trợ viết code và thiết kế web PHP.
- Dreamweaver: phần mềm lập trình được giảng dạy trong hầu hết trường học hiện nay bởi dễ thao tác, dễ sử dụng, tương thích với nhiều loại ngôn ngữ lập trình như: PHP, JSP, ASP, ASP.NET… Phần mềm có thiết kế chuyên nghiệp, đầy đủ tính năng cần thiết để viết code website, phần mềm hoặc code ứng dụng.
- NotePad ++: phần mềm này tạo ra môi trường lập trình tiện lợi, nhỏ gọn giúp tối ưu quá trình xây dựng phần mềm/web. NotePad ++ hỗ trợ hỗ trợ nhiều ngôn ngữ lập trình khác nhau như C++, Java, C#, PHP, CSS, Pascal…
Các phần mềm trên còn có thể sử dụng kết hợp với nhau để tạo nên trang web hoàn hảo và chuyên nghiệp hơn.
Một số khái niệm khác liên quan đến HTML
Để thành thạo HTML, lập trình viên cần tìm hiểu rất nhiều khái niệm liên quan như: css, doctype, trình xem html, javascripts…
html css là gì
CSS là viết tắt của Cascading Style Sheets – ngôn ngữ trình bày cho phép tạo kiểu hoặc màu sắc cho phông chữ, nội dung, đóng vai trò chính trong thiết kế, tạo background, màu sắc cũng như các hiệu ứng cho trang.
Trước khi có CSS, lập trình viên phải thiết lập style cho từng thẻ trong HTML dẫn đến tình trạng lặp lại đoạn mã (repeat code) trên từng trang. CSS ra đời giúp dễ dàng thiết lập nhiều style cho nhiều thẻ cùng lúc, giảm thời gian code web, đồng thời cung cấp thêm nhiều thuộc tính cho phép tùy chỉnh website đơn giản hơn.
Doctype html là gì?
Doctype là một đoạn định dạng thông báo cho trình duyệt biết phiên bản HTML nào (HTML5, HTML 4, HTML 3 hay XHTML …) đang được sử dụng. Thông báo này xuất hiện ngay dòng đầu tiên trong tập tin HTML.
Bản thân Doctype không phải một phần tử html nhưng mọi tài liệu HTML đều phải dùng Doctype khai báo trước tất cả các thẻ.
Trình xem html là gì
Trình xem HTML trên thiết bị nào đó là công cụ hỗ trợ đọc HTML trên thiết bị cho phép lập trình viên xem source code của file HTML cụ thể.
Thông thường HTML thường được xem trên máy tính. Với điện thoại, tuỳ theo hệ điều hành có các ứng dụng hỗ trợ trình xem HTML như: HTML Viewer Android (dành cho thiết bị di động dùng hệ điều hành Android), HTML Q iOS (dùng cho thiết bị di động dùng hệ điều hành iOS)
Học HTML ở đâu?
Bởi sự phổ biến của HTML, bạn có thể học HTML từ rất nhiều nguồn như:
- Học trực tiếp tại các trung tâm đào tạo lập trình hoặc trường đại học có chuyên ngành lập trình.
- Ebook: Head First Javascript, Eloquent Javascript…
- Blog: medium, freecodecamp, quora, scotchio, javascriptissexy, rithmschools, toidicodedao…
- Học trực tuyến trên các ứng dụng học online: Coursera, Udemy (Javascript Complete Course, Understanding The Weird Part …)
- Học online từ các website chuyên về lập trình.
Sau đây là một số website bạn có thể tham khảo để học HTML online:
- W3schools.com: trang web được rất nhiều lập trình viên yêu thích bởi kho kiến thức về lập trình đa dạng trong đó có nhiều hướng dẫn về HTML. Các khóa học còn có bài tập kiểm tra miễn phí cho phép đánh giá kết quả học hiệu quả hơn.
- HTML.net: cung cấp kiến thức nền tảng về HTML với nhiều ngôn ngữ khác nhau, ngoài học, còn giúp bạn hiểu, ứng dụng và tạo ra trang web đầu tiên của mình cũng như học thêm nhiều ngôn ngữ khác.
- Codeacademy.com: cung cấp bài học về HTML, CSS, và nhiều ngôn ngữ lập trình khác.
- learn.shayhowe.com: website được thiết kế và phát triển bởi Shay Howe – một nhà thiết kế và phát triển website dày dặn kinh nghiệm. Web cung cấp khóa học trực tuyến miễn phí giúp bạn hiểu mọi điều cơ bản về HTML, cách tạo trang web riêng và nhiều hơn nữa.
- htmldog.com: chuyên cung cấp các khóa học miễn phí cho những ai muốn bắt đầu học lập trình web. Về HTML, khóa học chia thành 3 cấp độ:
+ Giới thiệu cách thức HTML hoạt động trong web
+ Hướng dẫn cơ bản về các thẻ trong HTML
+ Sử dụng HTML để nhúng nội dung vào web
- MDN Web Docs: trang web uy tín cung cấp nhiều kiến thức cơ bản đến nâng cao trong phát triển website như cách thức hoạt động của trang web, cách sử dụng HTML, cách dùng CSS để trang trí website thêm bắt mắt. Website đưa ra lộ trình học cụ thể giúp người học dễ theo dõi.
Lời kết
Trên đây là những thông tin cơ bản về HTML là gì. Với những ai mong muốn tìm hiểu về HTML hoặc muốn trở thành lập trình viên, bài viết của Việc Làm 24h hy vọng đã giúp bạn hiểu hơn về HTML cũng như tự học và ứng dụng HTML hiệu quả trong công việc.
Đừng quên thường xuyên theo dõi Việc Làm 24h để có thêm nhiều kiến thức nghề nghiệp xịn sò cũng như tìm kiếm nhiều cơ hội việc làm hấp dẫn trong ngành lập trình.
Xem thêm: Ngành IT là gì? Giải đáp mọi thắc mắc và định hướng nghề nghiệp cho dân IT
