[HTML] Làm thế nào để tạo ra một Website?

Oh, vậy là đã có ai đó trên trái đất này nói với bạn rằng: "Hãy học lập trình?"

Phải rồi đấy, đây sẽ là quyết định đúng đắn nhất trên con đường theo đuổi tri thức và tìm hiểu về nội tại chính bản thân mình. Nhưng bạn biết không? Khi bạn quyết định rằng sẽ băng qua một cánh rừng với để tới với đích đến vô định ở phía bên kia thì luôn có tới 1001 lối đi dành cho bạn. Ở đây, với cương vị là người dẫn đường dành cho du khách cần cảm giác an toàn và tránh lãng phí thời gian, thì mình mời bạn và bất kỳ ai chưa từng học lập trình ghé tới đọc bài viết này hãy khởi đầu với lối vào có tên là Lập Trình Web.

Lý do để mình luôn lựa chọn lối vào này dành cho các newbie mà mình từng tiếp xúc là bởi vì lựa chọn này không yêu cầu người học phải chuẩn bị trước bất kỳ điều gì. Mọi thứ mà bạn cần cài đặt trên máy tính đều đã có mặt đầy đủ trong chiếc laptop hay chiếc máy tính để bàn mà bạn đang sử dụng. Chúng ta sẽ khởi hành một cách thật tự nhiên mà không cần sự chuẩn bị rườm rà hay bất kỳ yêu cầu nào về mặt bằng tri thức.

Làm thế nào để tạo ra một website?

Hãy tạm gác sang một bên tất cả mọi góc nhìn kỹ thuật và hàn lâm. Chúng ta online mỗi ngày và có thể xuất phát từ một trang chủ của một website để khám phá hàng ngàn trang đơn (webpage) khác của website đó. Là như vậy đấy.

Một website là một bộ sưu tập của nhiều webpages.

Oh, nếu vậy thì để tạo ra một website, bạn chỉ cần khởi đầu đơn giản là tạo ra một webpage.

Làm thế nào để tạo ra một webpage?

Nó khá là giống với trường hợp một tệp tin có tên dạng fountain.docx có thể được mở bởi Microsoft Word hay LibreOffice Writer. Có một loại tệp tin đặc biệt được ưu ái bởi các trình duyệt web được gọi là tệp tin HTML và có định dạng tên như thế này: fountain.html.

Một webpage chỉ đơn giản là một tệp tin văn bản có thể được mở bằng trình duyệt web.

Các văn bản HTML có thể được tạo ra bằng một trình soạn thảo đơn giản như Notepad được cài đặt sẵn trên Windows hay TextEdit có sẵn trên OS X. Bây giờ chúng ta hãy thử tạo ra một webpage nhé:

Mở ứng dụng Notepad trên máy tính của bạn
Viết vào đó một vài từ đẹp đẽ.
Sau đó lưu tệp với tên là homepage.html
Click đúp chuột vào tệp đó để mở bằng tình duyệt web

Như vậy là bạn đã vừa mới tạo ra một webpage. Và nếu như bạn đặt webpage này ở đâu đó trên mạng internet để mọi người có thể truy cập tới thì bạn đã có được một website sơ khai đầu tiên do chính mình tạo ra rồi đấy.

Nếu bạn muốn có động lực để đi xa, hãy để bạn bè của bạn nhìn thấy thành quả của bạn hàng ngày bằng cách online website sơ khai của bạn và cập nhật nó thường xuyên trong quá trình học tập. Với mục đích đơn giản như vậy thì mình tìm thấy GitHub Pages là lựa chọn tuyệt vời dành cho bạn. Hãy đăng ký và sử dụng miễn phí tại đây: https://pages.github.com/

Rồi. Thế nhưng làm thế nào để thêm hình ảnh, các nút nhấn, và bla bla bla vào webpage để trông cho nó giống với website của nhà hàng xóm?

Ấy! Bình tĩnh nào! Như bạn thấy thì trình duyệt web là một công cụ trình chiếu mạnh mẽ. Người ta có thể bảo các trình duyệt web thể hiện bất kỳ loại nội dung gì từ văn bản, hình ảnh tĩnh, rồi đến audio, video, vân vân mây mây... Họ làm được thì chúng ta cũng làm được chứ không kém gì. Có điều để có thể giao tiếp được với các trình duyệt web và bảo được chúng theo ý muốn thì chúng ta cần phải nói ngôn ngữ mà các trình duyệt web yêu thích. Cụ thể ở đây là các trình duyệt web giao tiếp bằng một ngôn ngữ có tên là HTML, một phiên bản được lược giản hóa từ tiếng Anh hiện đại.

HTML chỉ là một phiên bản đơn giản hơn của tiếng Anh.

Hãy thay đổi webpage đơn giản của chúng ta một chút. Bây giờ chúng ta sẽ đặt vào đó một tiêu đề heading, một văn bản paragraph, và một nút nhấn button:

Copy/paste đoạn mã dưới đây vào văn bản HTML của bạn.
Lưu tệp.
Mở lại tệp bằng trình duyệt web hoặc nhấn F5 để làm mới trình duyệt web.

<h1>
   Coins in a fountain
</h1>

<p>
   Hope is a tree sitting on 
   a mountain where the grass 
   don't grow.
</p>

<button>
   Read more
</button>

Đó chính là HTML! Chúng ta chỉ đơn giản là khoanh vùng mọi thứ bằng các thẻ tag và trình duyệt web bằng cách nào đó đã hiểu được những gì chúng ta muốn hiển thị. Bạn có thể để ý thấy rằng các thẻ HTML tag có tên mô tả nội dung mà chúng bao quanh:

button thì rõ ràng là cho thấy chúng ta muốn hiển thị một nút nhấn.
p có nghĩa là paragraph.
Còn h1 thì có nghĩa là heading level 1.

Và hiển nhiên là chúng ta có đầy đủ các thẻ HTML tag để hỗ trợ hiển thị mọi loại nội dung có thể tham khảo tại đây: https://developer.mozilla.org/en/docs/Web/HTML/Element

Việc học HTML chỉ đơn giản là thử các thẻ và làm mới trình duyệt web.

Thế đấy! Chỉ đơn giản là như vậy thôi. Thế nhưng việc gõ lặp đi lặp lại các ký hiệu </> thì lại là một tác vụ có phần hơi nhàm chán.

Làm thế nào để cảm thấy vui vẻ khi thực hiện một tác vụ hơi nhàm như vậy?

Bạn biết không? Chúng ta đang sống trong một thế giới đầy điều kỳ diệu. Những cá nhân xuất sắc luôn cố gắng tạo ra và chia sẻ những sản phẩm hữu ích để khiến cuộc sống của chúng ta trở nên thuận tiện hơn. Mình tìm thấy một thứ miễn phí nữa từ Microsoft đó là trình soạn thảo code Visual Studio Code: https://code.visualstudio.com/

1 click để tải về
1 click nữa để cài đặt
Và sau đó chúng ta sẽ có thể viết mã HTML như các ảo thuật gia (chức không phải là coder).

Hãy dành ra vài phút để cài đặt Visual Studio Code trên máy tính của bạn trước khi đến với bài viết tiếp theo nhé!

Mục lục