Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
HTML Là Gì? Những Công Cụ Soạn Thảo Và Trình Duyệt Phát Triển Cho HTML

HTML Là Gì? Những Công Cụ Soạn Thảo Và Trình Duyệt Phát Triển Cho HTML


Ngày 4 Tháng 12 Năm 2019

Xin chào các bạn đến với bài học thứ nhất về HTML. Các bạn đã xác định hướng đi theo lập trình web thì cũng thường nghe về bộ ba cơ bản để phát triển web là HTML, CSS và Javascript. Để biết HTML là gì thì chúng ta cùng nhau tìm hiểu nhé!

HTML Là Gì?

HTML được viết tắt từ Hyper Text Markup Language(Ngôn ngữ đánh dấu siêu văn bản) giúp chúng ta tạo ra cấu trúc và nội dung cho trang web. Nó được phát triển bởi ông Tim Berners-Lee năm 1990 và ông cũng được biết đến là người sáng lập của World Wide Web luôn các bạn nhé! Sau đó thì đến năm 1996 W3C(World Wide Web Consortium) là cơ quan chính thống duy trì và phát triển HTML. Tới bây giờ thì chúng mình đang sử dụng phiên bản HTML5 giúp tiếp cận nhanh và mạnh mẽ hơn với sự phát triển của web! Để có được HTML5 ngày nay thì chúng ta cùng xem sơ lược qua các phiên bản của HTML:

...
  • HTML 2 được xuất bản vào ngày 24 tháng 11 năm 2019.
  • HTML 3 được xuất bản vào ngày 14 tháng 1 năm 1997
  • HTML 4 được xuất bản vào ngày 18 tháng 12 năm 1997
  • HTML 5 được xuất bản vào ngày 28 tháng 10 năm 2014

Các Công Cụ Soạn Thảo Dành Cho HTML

Thứ nhất mình sẽ nói và công cụ soạn thảo giúp chúng ta tạo tập tin html và viết code một cách dễ dàng hơn. Mình sẽ giới thiệu sơ lược qua các phần mềm để các bạn nắm rõ hơn nhé!

1) Công cụ soạn thảo Visual Studio Code:

Visual Studio Code

Ưu điểm:
Visual Studio Code là một mã nguồn mở và được phát triển bởi Microsoft nên các bạn cứ yên tâm sử dụng vì nó hoàn toàn miễn phí và luôn được cập nhật những phiên bản mới nhất. Không chỉ vậy nó còn rất thích hợp cho việc phát triển các dự án lớn, phức tạp ngoài ra còn hỗ trợ việc tích hợp Git. Công cụ này còn cung cấp các phần mở rộng(extension) giúp chúng ta có thể code một cách nhanh hơn, quản lý file hiệu quả... Mình sẽ làm một bài chi tiết về các phần mở rộng giúp chúng ta code một cách tốt hơn nhé!

Nhược điểm:
Tuy vậy nó cũng có vài mặt hạn chế là khi khởi động thì hơi chậm và cũng mất nhiều thời gian để cập nhật phiên bản mới trên hệ điều hành linux.

Link tải ở đây nhé các bạn:
Visual Studio Code

2) Công cụ soạn thảo Atom:

Atom

Ưu điểm:
Atom là mã nguồn mở và được phát triển bởi github và miễn phí. Cung cấp những tiện ích giúp chúng ta làm việc với git và github dễ dàng hơn. Nó cũng cung cấp các những tiện ích mở rộng, được hỗ trợ bởi cộng đồng github nên mình thấy ở những bản cập nhật sau này thì có cải thiện về hiệu suất hơn trước. Điểm đặc biệt nữa là cho phép chúng ta tùy chỉnh giao diện theo sở thích của mình!

Nhược điểm:
Theo mình thấy dù cải thiện hiệu suất nhưng so với các trình soạn thảo khác thì việc khởi động hay hiệu suất chỉ ở mức trung bình, nó cũng bị ảnh hưởng nhiều bởi trình soạn thảo Sublime Text và rất khó xử lý những dự án lớn và phức tạp.

Link tải ở đây nhé các bạn:
Atom

3) Công cụ soạn thảo Brackets:

Brackets

Ưu điểm:
Brackets là mã nguồn mở và miễn phí được phát triển bởi Adobe. Adobe cung cấp những sản phẩm chuyên về thiết kế và đồ họa mà có thể nhiều bạn đã sử dụng qua như là Photoshop, After Effects, Illustrator. Nó cũng tích hợp những trình soạn thảo cơ bản cần có cho việc viết code. Có tính năng đặc biệt trong phần mềm này là cho phép chúng ta lấy màu sắc, số đo, font chữ... từ PSD thành CSS sẵn sàng cho web. Theo mình nghĩ thì đây là công cụ dễ dàng sử dụng đối với các bạn mới vì dễ dàng tùy chỉnh, thích hợp vói việc triển khai các ứng dụng HTML, CSS ,tạo kết nối thời gian thực đến trình duyệt nghĩa là khi bạn chỉnh sửa file HTML, CSS thì trình duyệt tự động cập nhật mà chúng ta không cần phải tải lại trang.

Nhược điểm:
Theo mình thấy thì nó không cho phép cài đặt các tiện ích mở rộng, không hỗ trợ chia trang khi làm việc, khởi động và hiệu suất thì chỉ ở mức trung bình. Nó chỉ thích hợp nhất cho việc soạn thảo và phát triển cho Front-end web.

Link tải ở đây nhé các bạn:
Brackets

4) Công cụ soạn thảo Notepad++:

Notepad++

Ưu điểm:
Notepad++ là một mã nguồn mở miễn phí và được cấp phép bởi GPL. theo mình thấy đây là một trình soạn thảo tuyệt vời và đơn giản và dễ dàng sử dụng đối với mọi cấp độ phát triển đặc biệt là người mới bắt đầu. Nó hỗ trợ nhiều loại ngôn ngữ khác nhau và được coi là phần mềm chuyên trình soạn thảo văn bản HTML. Khởi động và hiệu suất đạt mức tốt, cung cấp những phần tiện tích bên ngoài, tự động thay đổi màu sắc tùy vào thẻ mà ta sử dụng trong HTML!

Nhược điểm:
Được xây dựng trên nền tảng window vì vậy khi cài đặt trên các hệ thống khác thì cần các phần mềm hỗ trợ, khó xây dựng các dự án lớn và phức tạp. Nếu bạn dùng hệ điều hành Mac OS muốn cài đặt Notepad++ thì nên dùng phần mềm hỗ trợ là wine.

Link tải ở đây nhé các bạn:
Notepad++

5) Công cụ soạn thảo Sublime Text

Sublime Text

Ưu điểm:
Sublime Text là một trình soạn thảo có khoảng 4500 tiện ích mở rộng. Theo mình đây là một trình soạn thảo vừa nhẹ nhanh, hiệu suất cao và giao diện bắt mắt giúp người dùng trải nghiệm tốt hơn. Nó có thể xử lý, quản lý các dự án lớn rất tốt. Không chỉ vậy nó còn luôn được cập nhật thường xuyên!

Nhược điểm:
Sublime Text cho phép bạn tải và trải nghiệm phần mềm của họ nhưng sẽ thường xuyên hiện thông báo nhắc nhở mua sản phẩm của họ. Vì vậy nếu các bạn muốn tắt thông báo này và sử dụng toàn bộ tính năng của nó thì phải mua với giá là $80.

Link tải ở đây nhé các bạn:
Sublime Text

Các Trình Duyệt Để Chạy HTML

Khi chúng ta ghi code xong mà muốn xem kết quả thì ở đâu? Đó gọi là trình duyệt, giúp minh hiển thị cấu trúc và nội dung của trang web. Sau đây mình sẽ giới thiệu những trình duyệt giúp chúng ta hiển thị và kiểm tra lỗi của một trang web một cách dễ dàng:

1) Google Chorme:

Google Chorme

Link tải ở đây nhé các bạn:
Google Chorme

2) Mozilla Firefox:

Mozilla Firefox

Link tải ở đây nhé các bạn:
Mozilla Firefox

3) Microsoft Edge:

Edge

Link tải ở đây nhé các bạn:
Microsoft Edge

Tổng kết:

Qua bài này mình đã giới thiệu sơ lược đến các bạn về HTML, cũng như các trình soạn thảo và trình duyệt để hiện thị web. Bài tiếp theo chúng mình sẽ đi sau vào chi tiết cấu trúc và tạo file HTML nhé. Nếu trong bài viết có gì viết chưa tốt mong các bạn thông cảm.Cảm ơn và chúc các bạn học tập thật tốt!