BÀI 1. GIỚI THIỆU HTML
HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng.
HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” được. Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web.
Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và attributes) để đánh dấu lên 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 vào trong cặp tag mở và đóng văn bản <p> và </p>
Tổng quan, HTML là ngôn ngữ markup, nó rất trực tiếp dễ hiểu, dễ học, và tất cả mọi người mới đều có thể bắt đầu học nó để xây dựng website
Lịch sử của HTML
HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet.
Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cập ngay lập tức. Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao gồm 18 tag HTML. Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới.
Theo Mozilla Developer Network: HTML Element Reference, hiện tại có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hỗ trợ bởi các trình duyệt hiện đại).
Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website. 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). Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website.
Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5. Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại là gì, như là <article>, <header>, và <footer>.
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.
Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc như <tag></tag>.
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:
- Element ngoài cùng là bộ tag division (<div></div>), dùng để mark up cho phần nội dung lớn.
- Nó bao gồm một tag tiêu đề (<h1></h1>), một tag subheading (<h2></h2>), 2 văn bản (<p></p>), và một bước hình (<img>).
- Đoạn văn thứ 2 chứa tag chứa link (<a></a>) 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.
Tổng quan của 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.
- 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ể:
Ả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ư:
Nếu bạn muốn tìm hiểu thêm về tag HTML, hãy cân nhắc xem qua cheat sheet HTML của chúng tôi (có thể download được file cheat sheet)
Sự phát triển của HTML. Có gì khác biệt giữa HTML và HTML5?
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>. Để hiểu rõ hơn sự khác biệt của từng loại, hãy xem qua bản so sánh chuyên sâu giữa HTML và HTML5 của chúng tôi.
Ưu điểm và nhược điểm của HTML
Như hầu hết mọi chuyện, HTML có ưu và nhược điểm của riêng nó.
Ưu điểm:
- 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.
- Mã nguồn mở và hoàn toàn miễn phí.
- Markup gọn gàng và đồng nhất.
- 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.
Khuyết điểm:
- Đượ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.
- Nó có thể thực thi một số logic nhất định cho người dùng. Vì 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.
- 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)
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 đó.
Vậy…HTML là gì?
HTML là ngôn ngữ markup của thế giới web. Ngôn ngữ markup là loại ngôn ngữ dùng để thiết kế và sắp đặt nội dung, ảnh, và tất cả những yếu tố trên website. Nó chạy trên bất kỳ trình duyệt nào và được quản lý bởi World Wide Web Consortium.
Bạn có thể dùng nó để cấu trúc nội dung của website hay ứng dụng web. Nó là lớp thấp nhất trong các lớp xử lý ở frontend, đảm nhiệm việc tạo phong cách cơ bản nhất cho website, và kết hợp với CSS để làm đẹp cho website hơn và kết hợp với JavaScript để tăng chức năng cho website.