Web 1: làm một trang web đơn giản
Thông qua bài này bạn đạt được các kiến thức sau đây:
- Tạo được một trang web đơn giản hết sức chỉ có chữ và chữ mà thôi
- Nắm được 2 thành phần quan trọng nhất của bất kỳ trang web nào
- Cách học hiệu quả của người không chuyên CNTT tự học sau nhiều lần thất bại
Bạn chỉ cần mở trình soạn thảo văn bản thô hoặc soạn thảo code (ví dụ Notepad Plus Plus) để soạn:
Chú ý: không nhập các số thứ tự, đó là số thứ dự dòng do trình viết code tạo ra, không phải nội dung văn bản
Bước 1: khởi động - đánh máy vài chục dòng code HTML
Bạn cần đánh máy thủ công, đừng copy đâu đó có sẵn bởi vì đang học, học cái gì đó ban đầu cần phải ghi nhớ, có ghi nhớ mới có thể hiểu. Tui biết có nhiều bạn vì ban đầu học bằng video clip rồi làm theo như con vẹt, dẫn đến những gì họ tưởng là họ biết lại hoàn toàn là sự mơ hồ. Ngay khi tắt các video đi, tự làm lại một trang web đơn giản, họ bó tay và ngay cả khi có mạng, họ cũng chỉ biết copy những mà không hiểu, nên không phát triển được tí gì.
lưu lại file với tên bai1.html vào một thư mục trên máy (không lưu ổ đĩa cloud vì không chắc dùng được khi thao tác file thông thường).
Tiếp tục, lại gõ tiếp thêm đoạn code sau:
Tui không cần nhắc bạn lưu file, hãy luôn Ctrl + S để lưu khi có sự thay đổi khi thêm/ xoá/ sửa, kiến thức căn bản
Như vậy file bạn có tổng cộng 33 dòng, có những dòng trống không bắt buộc phải có nhưng tạo khoảng hở cho dễ đọc, dễ giải thích.
Mở trình duyệt web lên bấm Ctrl + O (chữ o trong ò ó o, không phải số 0) và tìm đến file bai1.html để mở nó lên xem thử có gì? Nếu ra như sau:
xin chúc mừng bạn đã sở hữu trong tay một trang web đầu tay. Nói theo kiểu Neil Armstrong thì “Đây là Một bước nhỏ trên trình soạn thảo code nhưng là một hành trình bạn tiến vào thế giới Web rộng mở”
Giải thích:
Các dòng 1, 2, 4, 5, 6, 7, 8, 23, 25, 29, 31, 33 bạn sẽ sử dụng lại nhiều lần về sau như một khuôn mẫu cho mọi trang web.
Phân tích hình trên:
Dòng 1: sửa chữ doctype thành DOCTYPE đọc cho quen mắt dù trong HTML không phân biệt chữ thường, chữ hoa nhưng trong nhiều trnag web thấy người ta viết DOCTYPE hơn là doctype.
Dòng 2: lang="" sẽ được thay bằng lang=“en”, lang=“de”, lang=“vi” tuỳ theo nội dung trang web đang trình bày trên ngôn ngữ nào. Tra cứu ISO 639-1 để biết 2 ký tự dùng làm giá trị cho thuộc tính lang của thẻ html.
Dòng 4: luôn viết như vậy, nó là thẻ HEAD bắt buộc của 1 tài liệu HTML.
Dòng 5, 6: viết chính xác như vậy, không thay đổi gì thêm. Dòng 5 cho biết mã hoá HTML theo bảng mã Unicode, hỗ trợ được hầu hết các ngôn ngữ trên thế giới. Dòng 6 cho phép trang web hiển thị tốt trên màn hình điện thoại, nếu không có dòng này trang web sẽ hiển thị theo kiểu cho máy tính trên điện thoại dẫn đến rất khó đọc.
Dòng 7: hiện nay tiêu đề còn trống nên bạn cần đìên gì đó vào. Khi có thông tin, đây sẽ là hiển thị ở tab trình duyệt, và cũng hiện thị khi bookmark trang. Ví dụ, bạn sẽ có nội dung:
Hãy thay Trang web đầu tay của tui bằng cụm từ của riêng bạn để chứng tỏ bạn hiểu bài, không học vẹt.
Dòng 8: để nguyên như vậy nhưng cần làm thêm các việc sau: giả sử thư mục chứa web là D:\MyWeb, bạn cần tạo thư mục con css bên trong nó, vào thư mục css tạo file style.css có nội dung tạm thời rỗng (không có gì).
Dòng 9: giống như vậy. Đến đây bạn chợt hiểu rằng dòng này bà con với dòng 4. Tui giải thích: dòng 4 được xem là mở đầu của phần HEAD của một tài liệu HTML, và dòng 9 đánh dấu sự kết thúc của phần HEAD.
Dòng 11, 15, 17: để nguyên như vậy.
Dòng 13: để nguyên như vậy, nhưng bên trong thư mục D:\MyWeb tạo thư mục js và tạo file app.js nằm trong thư mục js, nội dung file app.js tạm thời rỗng.
Bước 2: phát triển trang web theo kiểu “bày đồ đạc bừa bộn khắp căn phòng”
Kết luận: 1 file HTML khi được trình duyệt đọc và trình diễn lên màn hình gọi là trang web
Một ảnh minh hoạ từ AI tạo ra cho vui về lộ trình học về web:
