BÀI 2 - HTML LÀ GÌ VÀ VÌ SAO NÓ QUAN TRỌNG

Chào mừng các bạn đến với thế giới HTML, và đây cũng là phần mở đầu để bạn biết rõ HTML là gì và nó được ứng dụng ra sao, hiểu được vì sao nó quan trọng dù bạn là người làm website chuyên nghiệp hay nghiệp dư đều phải biết qua nó. Thậm chí những người làm công việc không mấy liên quan như: Biên tập viên cũng nên cần biết HTML, tại sao biết ư? Và hồi sau sẽ rõ...
HTML là gì? Vì sao nó quan trọng

HTML là gì?

HTML là chữ viết tắt của cụm từ HyperText Markup Language (các bạn có thể xem thêm tại http://vi.wikipedia.org/wiki/HTML - dịch ra là Ngôn Ngữ đánh dấu siêu văn bản) ở trong đó họ đã nói rất rõ về nguồn gốc và giới thiệu rất là chi tiết nên mình không nói thêm sâu về phần này. Một ngôn ngữ được sử dụng để tạo một trang Web, trên một Website có thể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML(thỉnh thoảng mình sẽ ghi là một tập tin HTML). Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium (W3C - tổ chức thiết lập ra các chuẩn trên môi trường Internet).

Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ tag, 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 bao trong một cặp, bao gồm thẻ mở và thẻ đóng (ví dụ <strong> </strong> ). Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong> Đây là chữ in đậm </strong> ). Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img> , <meta> ....).

Một tập tin HTML sẽ được bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là .html hoặc .htm.

HTML được xử lý ra sao?

Khi một tập tin HTML được hình thành, việc xử lý nó sẽ do trình duyệt Web đảm nhận. Trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ các thẻ bên trong và sẽ chuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu(do các bot máy tính hiểu).

Để kiểm tra, bạn có thể sử dụng khung nội dung bên dưới và chuyển qua lại giữa phần HTML và Result để xem kết quả của một tập tin HTML sau khi được xử lý.
Cấu trúc một đoạn HTML

Cấu trúc một đoạn HTML như thế nào?

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 các 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.
Đoạn văn bản trong 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 dây là một thẻ có sử dụng thuộc tính - form.
Thẻ có thêm thuộc tính đi cùng.
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 nha các bạn!.

Dùng chương trình gì để tạo tập tin HTML?

HTML là một tập tin siêu văn bản nên bạn có thể dùng các chương trình soạn thảo văn bản không có chức năng định dạng văn bản để tạo ra một tập tin HTML, Trong Windows, bạn có thể dùng Notepad để tạo ra một tập tin HTML, còn trên Mac thì có thể dùng TextEdit và Vim trên các hệ điều hành Linux khác. Miễn là sau đó bạn phải lưu tập tin thành đuôi .html và sử dụng trình duyệt Website để đọc nó.


Trình soạn thảo Web Notepad
Tuy nhiên Notepad lại quá đơn giản để sử dụng cho mục đích soạn thảo... Ở đây mình rất thích trình soạn thảo bằng Sublime Text 3 là một editor khá mới. Tuy nhiên, nó đã cung cấp một hiệu suất làm việc với các tính năng rất tuyệt vời và được rất nhiều Coder lựa chọn làm công cụ Code Editor của mình.
Sublime Text bản thân nó đã hổ trợ rất nhiều thứ cho các nhà phát triển Web, và ngoài ra nó còn có một hệ thống như viện Plugins rất phong phú và đa dạng, giúp cho việc soạn thảo Code chúng ta nhanh hơn và chuyên nghiệp hơn (cài các Plugins support thêm vào Code nhanh lắm !!) Và dưới đây là giao diện của nó.
Link Download và Cài Đặt Version mới nhất : https://www.sublimetext.com/3


Sublime Text 3
Nhìn giao diện và hình ảnh rất chuyên nghiệp đúng không các bạn, nhìn vào là muốn Code và muốn thành Web Design chuyên nghiệp liền!!! Chính vì thế mà mình khuyên các bạn nên dùng trình Sublime Text này hơn Notepad. Bởi vì sao, vì nó giảm bớt thời gian gõ code của mình, giao diện đẹp, đỡ sai lỗi chính tả, sai thẻ trong khi chúng ta soạn Code. Bạn nhớ nhé, mình không khuyến khích các bạn sử một tập tin HTML bất kỳ nào bằng chương trình Notepad để tránh gặp các lỗi hiển thị ký tự Tiếng Việt.

HTML đóng vai trò gì trong Website?

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.
Vai trò của từng ngôn ngữ trong Website
Đ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ụ Website như https://donga.edu.vn/ 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 bố cục Website, có màu sắc, ảnh nền,...
  • Javascript - Tạo ra các sự kiện (event) tương tác với hành vi của sinh viên (ví dụ sinh viên vào web 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 trang 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 với dạng dữ liệu SQL).

Nhưng ở đây, tạm thời các bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn 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ó nư 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.
Nhân tiện đây mình cũng nói luôn, website có hai loại chính:
  •  Website tĩnh (Static Web) -  Là một website không giao tiếp với máy chủ Web để gửi nhận dữ liệu mà chỉ có các dữ liệu được khai báo sẵn bằng HTML và trình duyệt đọc.
  • Website động (Dynamic Web) - Là một Website sẽ giao tiếp với một máy chủ để gửi nhận dữ liệu, các dữ liệu đó sẽ gửi ra ngoài cho người dùng bằng văn bản HTML và trình duyệt sẽ hiện thị nó. Để một Website có thể giao tiếp với máy chủ Web thì sẽ dùng một số ngôn ngữ lập trình dạng Server-side như PHP, ASP.NET, Ruby,... để thực hiện. Ví dụ như một Website làm bằng WordPress là một Website có lẽ bạn nghe WordPress hơi lạ, mình cũng tìm hiểu được mấy basic thôi chứ cũng chưa sâu lắm, có gì mình tìm hiểu rồi mình sẽ mới với bạn khóa học sau!

Tài nguyên tham khảo HTML

Trong Serie này mình không có nói hết về các thẻ trong HTML mà chỉ nói qua các thẻ quan trọng nhất vì bạn sẽ sử dụng nó thường xuyên trong Web Design. Vì vậy, bạn hãy vào trang https://developer.mozilla.org/en-US/docs/Web/HTML/Element để tham khảo ý nghĩa và cách sử dụng của tất cả các thẻ HTML.

Lời kết

Ở trên mình đã giải thích khá chi tiết và cặn kẽ về HTML và vai trò của nó trên Website là như thế nào. Nhìn có lẽ bạn sẽ tưởng các thông tin này chỉ mang tính tham khảo nhưng đó lại là các thông tin cực kỳ quan trọng, vì bạn đã làm Web thì phải hiểu rõ về nó.

Ở các bài sau, chúng ta sẽ đi vào việc chuẩn bị để soạn thảo một tập tin HTML đầu tiên và thử chạy nó nhé! Chúc các bạn thành công. 

Có đóng góp hay thắc mắc những gì cứ comment phần bên dưới các bạn nhé! Mình và Admin sẽ trả lời nhanh nhất cho thể cho các bạn...Bye!