Chào mừng bạn đã tới với series "Tự Học Lập Trình Web Một Cách Thật Tự Nhiên". Loạt bài viết hướng dẫn trong series này được tạo ra với mục đích chia sẻ kiến thức và trải nghiệm tự học lập trình web của người viết với bối cảnh mở đầu là một người đang sử dụng web, muốn tạo ra một trang web, và rồi... tự học lập trình web.

    Vậy nên nếu như bạn có quen biết ai cũng có ý muốn học lập trình web với bối cảnh xuất phát tự nhiên như vậy thì hãy giúp mình chia sẻ những bài hướng dẫn này tới những người bạn đó nữa nhé. Vì biết đâu những bài viết này có thể giúp ích được gì đó cho những bạn có cùng xuất phát điểm như mình:

    Không biết nhiều về máy tính, Chưa từng viết code, Không giỏi môn toán, Không giỏi tiếng Anh, ... nhưng biết sử dụng Google Tìm Kiếm, Google Dịch, và mấy phần mềm máy tính văn phòng cơ bản kiểu như soạn thảo văn bản, làm bảng tính, v.v....

Vậy chúng ta không cần chuẩn bị gì trước sao?

    Để bắt đầu học lập trình web ấy à? Có chứ. Như mình đã liệt kê ở cuối đoạn trên thì có cái Google Tìm Kiếm, Google Dịch, và... một chút kĩ năng sử dụng máy tính cơ bản. Nhưng những thứ đó chỉ là điều kiện cần mà thôi. Điều quan trọng nhất mà bạn cần chuẩn bị là một tinh thần sẵn sàng học tập những kiến thức mới và đặt xuống mọi định kiến mà bạn đã từng có về việc học lập trình. Và đây mới là điều kiện đủ để chúng ta có thể bắt đầu hành trình tự học lập trình web mà mình muốn dẫn bạn đi cùng với series bài viết này. Bạn chuẩn bị xong rồi phải không? Vậy chúng ta bắt đầu nhé?

Uh. Vậy làm thế nào để tạo ra một website?

    Hãy tạm bỏ qua mọi thắc mắc về các yếu tố kĩ thuật hay học thuật để tạo ra một website. Chúng ta vẫn thường online và sử dụng các trang web hàng ngày - như đọc tin tức, viết blog (nhật ký), v.v... Chúng ta có thể xuất phát từ một trang đơn bất kỳ của một website nào đó ví dụ như https://viblo.asia/newest, rồi sau đó có thể mở xem các trang đơn khác như các bài viết hướng dẫn, câu hỏi, v.v...

    Một website có thể được hiểu đơn giản là một tập các trang web đơn cùng được đặt ở một nơi nào đó trên internet mà mọi người có thể mở và xem được.
_Một người sử dụng máy tính

    Vì vậy nên, để học cách tạo ra một website, chúng ta có thể bắt đầu đơn giản với việc học cách tạo ra một trang web đơn như đã nói.

Làm thế nào để tạo ra một trang web đơn?

    Trình duyệt web - phần mềm mà chúng ta sử dụng để vào web hàng ngày - về cơ bản là một chương trình duyệt tài liệu giúp chúng ta truy xuất và trình bày các tệp file tài liệu - chính là các trang web đơn được đăng tải đâu đó trên internet.

    Nó khá giống với trường hợp một tệp tài liệu có tên là bai-viet.docx có thể được mở và xem bởi phần mềm Microsoft Word hay LibreOffice Writer - Các trình duyệt web được thiết kế để dành riêng cho việc trình bày các tệp tài liệu đặc biệt được gọi là các tệp văn bản HTML và các tệp này có tên ở dạng bai-viet.html.

    Một trang web đơn chỉ là một tệp văn bản - có thể được mở và trình bày bởi các trình duyệt web.
_Một người sử dụng máy tính

    Các tệp HTML có thể được tạo ra bằng cách sử dụng một trình soạn thảo văn bản đơn giản như Notepad hoặc một ứng dụng nào đó tương tự. Hãy thử tạo ra một tệp HTML ngay trên chiếc máy tính mà bạn đang sử dụng -

• Đầu tiên bạn mở ứng dụng Notepad lên.
• Gõ vào một nội dung khoảng vài từ.
• Lưu tệp với tên trang-don-cua-toi.html.
• Rồi sau đó nhấn đúp chuột để mở tệp vừa lưu.

    Ảnh chụp màn hình

    Như vậy là bạn vừa mới tạo ra một trang web đơn rồi đấy. Và nếu như bạn đặt trang đơn này ở đâu đó trên internet mà mọi người có thể mở xem được, thì bạn đã có được trang web đầu tiên của mình.

    Bạn có thể thử đổi lại tên trang web đơn của bạn thành index.html và đăng tải miễn phí lên Github Pages để mọi người có thể xem trang của bạn ngay bây giờ. Việc đó chỉ tiêu tốn có vài phút thôi. Nhưng sau đó hãy nhớ quay trở lại đây để tiếp tục Series của chúng ta nhé.

Làm thế nào để bổ sung hình ảnh, các nút nhấn, v.v... ?

    Như bạn đã biết thì các trình duyệt web là các phần mềm trình chiếu tài liệu tuyệt vời. Chúng ta hoàn toàn có thể nhờ các trình duyệt web thể hiện bất kỳ kiểu nội dung nào mà chúng ta mong muốn. Tuy nhiên, để nhờ vả được các trình duyệt web làm đúng như mong muốn thì chúng ta cần nói ngôn ngữ mà các trình duyệt web ưa chuộng - đó là HTML - một ngôn ngữ đánh dấu đơn giản.

    HTML là chỉ một ngôn ngữ đơn giản, được thiết kế để giúp chúng ta nói chuyện được với các trình duyệt web.
_Một người sử dụng máy tính

    Hãy thử thay đổi nội dung trang web đơn của chúng ta một chút. Lần này chúng ta sẽ đặt vào đó 1 tiêu đề, 1 đoạn nội dung, và 1 nút nhấn:

• Sao chép đoạn nội dung sau vào trang web đơn của bạn.
• Lưu tệp lại một lần nữa với tên mới là index.html.
• Làm mới lại Tab đang mở trang đơn đó trên trình duyệt web của bạn.

<h1>Chào bạn :D</h1>

<p>Đây là trang web cá nhân của tôi.</p>

<button>Đọc bài viết</button>

    Ảnh chụp màn hình

    Đó chính là HTML. Chúng ta chỉ đơn giản là bao quanh các đoạn nội dung bằng các cặp thẻ đánh dấu và bằng cách nào đó thì các trình duyệt web đã có thể hiểu được chúng ta muốn hiển thị cái gì.

• button có ý nghĩa rõ ràng là một nút nhấn.
• p là ký hiệu để đánh dấu một paragraph - tức là một đoạn nội dung văn bản.
• h1 có nghĩa là heading level 1 - tiêu đề cấp 1 của trang web đơn.

    HTML còn được thiết kế với rất nhiều thẻ khác nữa để chúng ta có thể đặt bất kỳ nội dung nào vào một trang web. Việc chúng ta cần làm là chỉ cần thử qua một lượt từng thẻ HTML và làm mới tab hiện tại trên trình duyệt web để biết cách sử dụng.

    Việc học HTML chỉ đơn giản là thử dùng các thẻ HTML và làm mới Tab trên trình duyệt web.
_Một người sử dụng máy tính

    Tuy nhiên, việc phải gõ những ký hiệu <> lặp đi lặp lại nhiều lần thì dường như có phần hơi bất tiện và đem lại trải nghiệm học tập không tốt lắm.

Làm thế nào để học HTML thuận lợi hơn?

    Bạn biết đấy, chúng ta đang sống trong một thế giới thân thiện và cởi mở. Những lập trình viên tuyệt vời luôn cố gắng chia sẻ những công cụ miễn phí rất hữu ích để giúp đỡ cộng đồng. Bạn có thể tải về trình soạn thảo code Atom - một món quà tuyệt vời nữa của Github và hoàn toàn miễn phí -

• 1 nhấp chuột để tải về.
• 1 nhấp chuột nữa để cài đặt.
• Và sau đó chúng ta sẽ có thể viết code như một nhà ảo thuật (chứ không phải là một coder nữa).

    Hãy dành ra một vài phút để cài đặt Atom trên chiếc máy tính mà bạn đang sử dụng và chúng ta sẽ cùng nhau xem ứng dụng này tuyệt như thế nào. Ngay sau khi bạn đã cài đặt xong, hãy mở bài viết tiếp theo liên kết dưới đây để tiếp tục hành trình của chúng ta nhé.

    Passenger - Coins in a fountain

    Hope is a tree
sitting on a mountain
where the grass
don't grow.

    [HTML] Bài 2 - Cách Chèn Ảnh & Các Liên Kết