HTML là gì và ứng dụng gì với website ?

Chào mừng các bạn đến với series học tập về HTML cơ bản. Đây là kiến thức cơ bản và cần thiết nhất khi bạn muốn bắt đầu lập trình 1 website. Không riêng gì các lập trình viên cho dù bạn là một biên tập viên, một nhà quảng cáo hay một nhà thiết kế giao diện website thì cũng đều phải nắm rõ các kiến thức cơ bản này.

Bạn có thể nghe nói đến rất nhiều ngôn ngữ lập trình web như ASP, .Net, JSP, PHP, WordPress…. nhưng cho dù là ngôn ngữ nào đi nữa thì chúng vẫn phải bắt đầu bởi 1 thứ cơ bản nhất đó chính là HTML. Giống như việc các bạn xây nhà vậy có rất nhiều mẫu nhà khác nhau, kiến trúc khác nhau, nội thất khác nhau…  nhưng trước khi có được ngôi nhà đó các bạn cần phải có bộ khung nhà để xây dựng nên nó và HTML chính là bộ khung đó.

HTML là gì ?

HTML là chữ viết tắt của HyperText Markup Language (xem thêm: WIKIPEDIA), có nghĩa là ngôn ngữ đánh dấu siêu văn bản. Nó dùng để định dạng cách hiển thị của một đoạn text, hình ảnh … để hiển thị trên một chương trình đặc biệc ta gọi là Browser sao cho đẹp, thân thiện nhất và dễ sử dụng nhất. Hiện nay có khá nhiều Browser như Firefox, Chrome, Cốc Cốc, …Tất cả Browser đều có điểm chung là giúp người dùng thao tác với website và nó đều có khả năng biên dịch những đoạn mã HTML.

Cùng với CSS và JavaScript, HTML tạo ra bộ ba nền tảng kỹ thuật cơ bản cho Website. Nếu HTML được coi như là một bộ khung của ngôi nhà thì CSS và JavaScript có thể coi như nguyên liệu (gạch, vữa, cát, sỏi, sơn…..) để tạo nên ngôi nhà của các bạn và dĩ nhiên ngôi nhà (kiến trúc, màu sơn…) sẽ không thay đổi trong 1 thời gian dài và đó chính là khái niệm web tĩnh, thứ mà thay đổi nhiều nhất trong ngôi nhà của các bạn là nội thất (bàn, ghế, giường, tủ, tivi,….) , hay cũng là các bài viết trên website và các ngôn ngữ như ASP, .Net, JSP, PHP, WordPress…. đóng vai trò trong việc thay đổi đó.

 Như vậy ta có thể hiểu:

  • 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).
  • Ngôn ngữ lập trình khác: ASP, .Net, JSP, PHP, WordPress… đóng vai trò tương tác với cơ sở dữ liệu như SQL, MySQL, Oracle … để thay đổi nội dung của website (bài viết, hình ảnh, video …..) để cho chúng ta 1 website động.
  • 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à website động.

Bố cục HTML của một trang web

Dưới đây là ví dụ về 1 trang HTML cơ bản. bạn có thể nhấn vào nút Result để hiển thị kết quả như trên Browser (Trình duyệt)

See the Pen GmKXyw by Đỗ Quốc Thưởng (@ThuongDQ) on CodePen.dark

Làm thế nào để tạo ta 1 tệp tin HTML ?

Như định nghĩa ở trên HTML là ngôn ngữ định dạng siêu văn bản chính vì thế chúng ta có thể dùng các công cụ đơn giản nhất có sẵn trong hệ điều hành các bạn đang dùng để tạo ra 1 tệp tin html. ví dụ : notepad trên Windown, TextEdit trên Mac OS hay Vim trên Linux.

Lưu ý: Các file bạn tạo ra đề phải lưu đưới định dạng ” .html ” thì trình duyệt mới thể hiểu được nó là một tài liệu văn bản dạng HTML chứ không phải là tài liệu văn bản khác.

Dĩ nhiên rất it lập trình viên dùng Notpad, Textedit hay Vim để lập trình cả vì nó quá đơn giản, không hỗ trợ nhiều cho lập trình, nếu như thực sự muốn code nhanh thì những lập trình viên sẽ tìm đến các công cụ khác được hỗ trợ nhiều hơn như: Notepad++, Sublime text, Adobe Dreamweaver …

Xem thêm: Những Plugin sublime text cần thiết cho web Developers

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x