HTML được xem là ngôn ngữ lập trình cơ bản và cần thiết cho người mới bắt đầu. Đây là nền tảng kiến thức bạn phải có nếu muốn phát triển lên các ngôn ngữ khác. Trước hết, để hiểu tổng quan về HTML, hãy cùng công ty thiết kế website Nhật Nam Media theo dõi bài viết dưới đây nhé.
Contents
HTML là gì?
HTML là từ viết tắt của cụm Hypertext Markup Language có thể tạm hiểu là “Ngôn ngữ đánh dấu siêu văn bản”. Đây là ngôn ngữ được dùng để xây dựng và cấu trúc lại các thành phần trên Website, tạo nên các trang web trên World Wide Web. Nó đượ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 trang web đa phương tiện sẽ được tạo thành từ các tài liệu HTML sau khi các trình duyệt web nhận nó từ các web server hoặc một kho lưu trữ cục bộ và render tài liệu đó. HTML sẽ 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 trang HTML có các khối xây dựng là các phần tử HTML. HTML là cấu trúc cho phép 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 hiển thị. 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, nó cung cấp một phương tiện để tạo tài liệu có cấu trúc.
Các phần tử HTML được phân định bằng các tags, các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng nhằm giới thiệu trực tiếp nội dung vào trang.Các tags khác sẽ 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.
Hành vi và nội dung của các trang web bị ảnh hưởng bởi việc HTML có thể nhúng các chương trình được viết bằng scripting như JavaScript, bao gồm cả việc CSS xác định giao diện và bố cục của nội dung. Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi 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
Cha đẻ của HTML là Tim Berners-Lee, một nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Bản mô tả đầu tiên của HTML là 1 tài liệu được gọi là các thẻ HTML “HTML Tags”, được Tim Berners-Lee đề cập lần đầu trên Internet vào cuối năm 1991. Nó mô tả 18 phần tử, bao gồm thiết kế ban đầu tương đối đơn giản của HTML.
Kể từ năm 1996, các đặc tả HTML được duy trì với đầu tư từ các nhà cung cấp phần mềm thương mại bởi World Wide Web Consortium (W3C) và lần lượt cho ra đời các phiên bản HTML 2,3,4. Phiên bản 4.01 được xuất bản vào cuối năm 1999 dưới dạng khuyến nghị W3C. vào năm 2000, HTML trở thành tiêu chuẩn quốc tế (ISO/IEC 15445:2000). Sau đó, các phiên bản XHTML đã được phát triển cũng vào năm 2000 nhằm định dạng lại các phiên bản trước.
Đế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 được kết thúc bằng đuôi .html hay .htm. File này cho phép bạn xem chúng bằng cách sử dụng bất kỳ trình duyệt nào (Chrome, Safari, Firefox,…). Các trình duyệt sẽ đọc những file này và biến chúng thành những nội dung mà người đọc có thể xem và hiểu được rồi xuất bản lên internet.
Một trang web thông thường có thể chứa cùng lúc nhiều trang HTML khác nhau như trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng. Trong mỗi trang HTML chứa một bộ các tag (elements) để xác định từng khối của một trang web và tạo thành một cấu trúc gồm section, paragraph, heading và các khối nội dung khác.
Cấu trúc của HTML
Đa phần các HTML elements đều có tag mở và tag đóng như <tag></tag>. Các phần tử bởi các từ khóa sẽ được dùng để khai báo HTML. 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.
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.
Một thẻ có thể sử dụng đồng thời nhiều thuộc tính khác nhau.
Dưới đây là code ví dụ về cấu trúc của một trang HTML:
Trong đó:
- Element được bao ở ngoài là bộ tag division <div></div> dùng để mark up cho toàn bộ nội dung
- Tiếp theo nó bao gồm các thẻ tag tiêu đề <h1></h1>, <h2></h2>
- Đoạn văn <p></p> và hình ảnh <img>
- Đ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ì?
- Có nguồn tài nguyên hỗ trợ phong phú và cộng đồng sử dụng cực lớn
- Có thể hoạt động mượt mà trên hầu hết các trình duyệt
- Đơn giản, dễ học và dễ hiểu hơn so với các ngôn ngữ lập trình khác
- Tiêu chuẩn thế giới được vận hành bởi World Wide Web Consortium (W3C).
- Các Markup sử dụng ngắn gọn và đồng nhất
- Mã nguồn mở hoàn toàn miễn phí
- Tích hợp dễ dàng với các ngôn ngữ backend như PHP và Node.js
Nhược điểm của HTML là gì?
- Khó kiểm soát cảnh thực thi của trình duyệt, những trình duyệt cũ có thể không render được tag mới
- Chủ yếu được áp dụng cho các web tĩnh, cần sử dụng thêm JavaScript hoặc ngôn ngữ backend nếu muốn tạo tính năng động
- Mỗi trang HTML 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 còn chậm cập nhật để hỗ trợ tính năng mới của HTML
- Nó có thể thực thi một số logic nhất định cho người dùng
Các đặc điểm của HTML
Các đặc điểm của HTML là gì?
HTML là một ngôn ngữ đánh dấu dễ dàng và đơn giản để sử dụng. Do có nhiều thẻ định dạng, bạn có thể sử dụng nó để trình bày trang web một cách dễ dàng, thiết kế trang web cùng với văn bản một cách linh hoạt.
Ngoài ra, nó cũng có khả năng liên kết đến các trang web khác và bạn có thể thêm các video, hình ảnh, âm thanh vào để website trở nên 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
HTML là bộ phận góp phần 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ố như hình ảnh, video. Nhưng điều đó không có nghĩa là website được cấu tạo hoàn toàn từ HTML mà nó chỉ đóng một vai trò hình thành trên website mà thôi. Một website thường được cấu tạo bởi các yếu tố:
- 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).
Có thể ví HTML là một bộ khung xương nếu nói website là một cơ thế hoàn chỉnh. 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 dùng xem.
Bố cục HTML là gì?
Cấu trúc của một HTML bao gồm rất nhiều thẻ khác nhau, mỗi thẻ sẽ có những tác dụng nhất định. Thông thường, bố cục HTML của một website sẽ có dạng như sau:
Trong đó:
Các tag thông dụng nhất của HTML
HTML có 2 loại tags chính: block-level và inline tags
Element Block-level sẽ sử dụng cho toàn bộ không gian web và luôn bắt đầu ở dòng mới của trang web. Các thẻ Headings và paragraph là những ví dụ trong block tags.
Inlines Tags trong HTML là gì? Nó là một phần nhỏ trong không gian web và không bắt đầu dòng mới ở mỗi trang web. Thường được dùng để định dạng nội dung bên trong của block-level. Links và những tags nhấn mạnh là những inlines tags phổ biến.
Block-level tags
Block-level tags của mỗi trang HTML sẽ bao gồm các thẻ: <html>, <head> và <body>. Trong đó:
- <html></html> là element cao nhất dùng để đóng gói mỗi trang web HTML.
- <head></head> trong thẻ tag này sẽ thường chứa thông tin meta như title page và charset.
- <body></body> dùng để đóng gói tất cả nội dung sẽ hiện trên trang.
Thẻ heading trong HTML có đến 6 cấp độ, trải dài từ <h1></h1> tới <h6></h6>. Trong đó h1 là cấp độ cao nhất, còn h6 là cấp độ thấp nhất. Các văn bản được đặt trong đoạn văn thẻ <p></p>, quotes thì được đặt trong <blockquote></blockquote>.
Tag divisons sử dụng để chứa các 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>. Các tags div này cũng có thể chứa các tag khác bên trong nó.
Sử dụng tag <ul></ul> cho các danh sách không theo thứ tự. Và <ol><ol> cho các danh sách theo thứ tự, nhưng trong các danh sách đó sẽ được đặt trong thẻ tag <li></li>.
Inline tags
Nhiều inline tags được dùng để định dạng văn bản. Chẳng hạn như tag <strong></strong> để định dạng chữ in đậm. Sử dụng tag <em></em> để định dạng chữ in nghiên. Khi sử dụng hyperlinks cần sử dụng tag <a></a> và attributes href để xác định link cụ thể.
Bên cạnh đó, hình ảnh cũng là một inline, bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần tag đóng </img>. Nhưng cần attributes src để xác định nguồn ảnh.
Điểm khác biệt giữa HTML5 và ngôn ngữ HTML là gì?
Kể từ khi các phiên bản HTML được ra mắt bởi W3C, nó đã không ngừng được nâng cấp và cải thiện. Tưởng chừng các phiên bản HTML sẽ dừng lại sau khi HTML 4 được ra mắt vào năm 1999 thì cho đến năm 2014 W3C lại cho ra mắt tiếp một phiên bản khác cao cấp hơn là HTML 5, bản nâng cấp mang đến 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 mà HTML 5 mang đến là khả năng hỗ trợ audio và video. Thay vì sử dụng Flash Player, mọi thử trở nên dễ dàng hơn bằng cách 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.
Ngoài ra, nó cũng có thêm nhiều tags mới như <article></article>, <section></section>, <aside></aside>, <header></header>, <footer></footer> 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. Đồng thời hỗ trợ thêm nhiều loại kiểu form như ngày/giờ, email, số điện thoại,…
Bên cạnh đó một số tag trong HTML đã được gỡ bỏ trong HTML5 như: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike,…
Sự liên quan giữa CSS, JavaScript và HTML là gì?
Sự liên quan giữa CSS, JavaScript và HTML là gì?
Tuy HTML được đánh giá là khung sườn cho website nhưng nó vẫn chưa đủ khả năng xây dựng một trang web chuyên nghiệp. HTML chủ yếu được ứng dụng để thêm element dạng văn bản và tạo ra giao diện cấu trúc cho nội dung. Thông thường, các lập trình viên sẽ kết hợp với 2 ngôn ngữ frontend là CSS và JavaScript để tạo một website hoàn chỉnh. 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 đóng vai trò trong quá trình thiết lập màu sắc, background, hiệu ứng, nói chung về mặt thiết kế uyển chuyển, linh động phù hợp với ý tưởng của website.
- Còn JavaScript có vai trò 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 dùng để lập trình HTML là gì?
Đa phần các bạn khá băn khoăn khi chọn sử dụng các phần mềm lập trình HTML vì không biết phần mềm dùng để lập trình hiệu quả HTML là gì. Để 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 miễn phí và hiệu quả dưới đây:
Sublime Text
Là phần mềm được phát triển năm 2008 bởi Jon Skinner, viết bằng ngôn ngữ Python và C++. Đây 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à phần mềm do tác giả Michael Pham phát triển năm 1998. Với khá năng hỗ trợ đa ngôn ngữ, giao diện đơn giản, dễ sử dụng, phần mềm này hiện được sử dụng phổ biến trên 200 quốc gia trên thế giới, hỗ trợ viết code và hỗ trợ thiết kế web PHP, trở thành công cụ đắc lực của các lập trình viên.
Dreamweaver
Là phần mềm được ưa chuộng ở các trường đại học, sử dụng cho việc giảng dạy trong môn lập trình. Nó có hầu như đầy đủ các tính năng cần thiết để lập trình viên viết code cho website hoặc ứng dụng, phần mềm. Thao tác dễ sử dụng và tương thích với nhiều ngôn ngữ lập trình khác nhau như PHP, ASP, ASP.NET, JSP, …
NotePad ++
Notepad++ với ưu điểm là gọn nhẹ, có nhiều plugin để cài thêm hỗ trợ việc soạn thảo, đặc biệt rất dễ sử dụng cho người mới bắt đầu. Notepad++ cũng hỗ trợ nhiều ngôn ngữ: C, C++, Java, Javascript, PHP, Swift. Đầy đủ các tính năng để bạn có thể sử dụng mà không cần dùng đến các IDE chuyên nghiệp.
Trên đây, Nhật Nam Media đã cung cấp cho bạn những kiến thức cơ bản cần biết về HTML, hi vọng đây sẽ là bài viết hữu ích với bạn, giúp bạn hiểu hơn về HTML. Bạn có thể tham khảo thêm các bài viết khác tương tự ở trang chủ Nhật Nam Media nhé.
Bài viết liên quan
