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 bài với bối cảnh mở đầu là một người sử dụng web, muốn tạo ra một trang web, và rồi... 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 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ư trang chủ của Viblo, 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... Vậy đấy.
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à trang-don.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 để 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 trang-don.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 nào:
- Đầ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
Và 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 web đơ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 web đơn 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 đó 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 duyệt 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 đó 01 tiêu đề, 01 đoạn nội dung, và 01 nút nhấn:
- Sao chép/Dán đ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 đã đặt 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.
index.html
<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ẻ HTML 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ì.
buttoncó ý nghĩa rõ ràng là một nút nhấn.plà ký hiệu để đánh dấu 1paragraph, tức là 1 đoạn nội dung văn bản.h1có nghĩa làheading level 1, tiêu đề cấp 1 của trang web đơn.
Người ta còn thiết kế sẵn rất nhiều thẻ HTML 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 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ử sử 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 thì dường như không thú vị lắm.
Làm thế nào để học HTML thuận tiện 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 giỏ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 - thêm một món quà tuyệt vời và hoàn toàn miễn phí của Github.
01nhấp chuột để tải về.01nhấp chuột nữ để 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 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é: