Mong muốn giúp bạn tự tay làm được một trang web theo cách dân ngoại đạo CNTT. Chúng tôi – Khó Ăn Cát Bê Tông (KACBT) viết loạt bài chỉ dần cách làm khá “tà đạo”.
Bạn tránh né, thoát khỏi sa đà vào những thứ rối rắm, mệt mỏi.
Bạn sẽ thoát được cảm giác “Ủa, CNTT khô khan, khó khăn kiểu này mà vẫn được nhiều người thích sao?“.
Bạn chỉ cần đặt niềm tin vào KACBT, tin tưởng bản thân, thích thử cái gì đó mới & không khó lắm.
Nếu có thêm một chút chăm chỉ, cẩn thận, bạn sẽ có một trang web (hoặc một chùm trang web có mối liên quan = website) sau một thời gian không dài, tương đương một khóa học làm bánh, nấu ăn cơ bản.
Làm ngay một trang web đầu tay
Mở trình soạn thảo code lên, nhập nội dung:
Số thứ tự bên trái là do trình soạn thảo mã đánh số, không phải do bạn nhập vào từ bàn phím.
Save file với tên bai1.html vào thư mục D:\xampp\htdocs
Mở trình duyệt web, bấm Ctrl + O để duyệt (browse) đến file bai1.html vừa tạo. Bạn thấy:
Xong! Vậy đó, bạn đã sở hữu trang web “made bởi tui“. Phấn khích?
Giải thích đoạn mã trên
Lúc này bạn cần “học vẹt” một chút. Về sau, mỗi lần tạo một file mới để làm web, bạn tạo nội dung:
- Giống Hình 1 từ dòng 1 đến dòng 7.
- Sửa dòng 5 “Vùng đất thực hành web” để phản ánh chủ đề trang web bạn làm ngày hôm đó.
- Xóa các dòng 8 đến 11, chỉ để lại dòng trống ở dòng 8 để nhập nội dung mới.
- Dòng 12, 13 giờ đây đã trở thành dòng 9, 10.
Đây là kết quả:
Giải thích những gì vừa xảy ra
File bai1.html vừa tạo được gọi là file HTML (HyperText Markup Language). HTML chính là “quả tim, khối óc, khung xương” của mọi trang web trên thế giới này.
Có lúc, bạn đọc đâu đó thấy “ngôn ngữ đánh dấu siêu văn bản”, “mã HTML”, “code HTML” cũng chính là HTML đang nói.
Từ nay trở đi, KACBT viết kèm từ tiếng Anh bên cạnh các câu chữ tiếng Việt hoặc chỉ dùng tiếng Anh vì không biết chuyển ngữ sang tiếng Việt thế nào.
Đây không phải xính tiếng Anh, chỉ vì công nghệ Web, ngôn ngữ HTML ban đầu do một người Anh sáng tạo ra, dùng tiếng Anh mô tả. Tài liệu, ngôn ngữ của khoa học tin học, công nghệ thông tin trên thế giới này phần lớn xuất bản bằng tiếng Anh.
Dù tiếng Anh không phải là tiếng mẹ đẻ , một số nước cũng không còn xem tiếng Anh là ngôn ngữ thứ hai, không là ngoại ngữ mà tiếng Anh được dạy như các môn Toán, Lý, Hóa.
Chúng ta cứ vậy học, đòi hỏi sự “thuần Việt” sẽ khó khăn, vô lý, nhiều lúc không thực tế. Hơn nữa, tiếng Anh ngày nay không còn được xem là ngoại ngữ, mà là thứ tiếng ai cũng biết ít nhiều.
Có lẽ bạn đã học tiếng Anh nhiều năm, không giỏi vẫn đọc được chút ít, đâu khó khăn gì phải không nào?
Cách viết các cụm từ tiếng Anh trong các bài hướng dẫn có hai mục đích:
- Giúp bạn tra cứu Google dễ dàng hơn khi cần tham khảo.
- Giúp bạn quen với việc hiểu thuật ngữ tiếng Anh, dẹp bỏ được việc ngại đọc tiếng Anh.
Đọc Quy ước viết từ/ ngữ trong các bài viết.
Bạn cần quay trở về với Hình 1 bên trên, hình có đánh số dòng 1 đến 13, nhớ nhập nội dung đó đặt trên trình soạn thảo bên cạnh cửa sổ bài viết này đọc để dễ đối chiếu, hiểu bài.
Dòng 1: gọi là dòng DOCTYPE (Document Type Declaration) báo cho trình duyệt biết cần phải phân giải tài liệu HTML dưới theo dạng nào, phiên bản bao nhiêu.
Hiện tại, ngôn ngữ HTML đang ở phiên bản 5 (HTML version 5), còn được đề cập như là HTML5 (số 5 thường hay được viết dính liền, viết rời cũng không sao nhưng viết dính liền HTML5 phổ biến hơn).
Vậy, dòng 1 này luôn là vậy ở mọi file HTML. Bất kỳ trang web nào khi bạn mở ra thấy không giống vậy nghĩa là nó ở phiên bản cũ hơn, được làm từ cách đây ít nhất 5 năm.
Dòng 2: thẻ HTML mở (opening tag) này là thẻ dùng bao quát cho mọi tài liệu/ file HTML.
Dòng 3: thẻ HEAD mở, dùng để khai báo liên quan đến phần Header trong giao thức HTTP truyền trang web. Các tag trong phần HEAD này thường không xuất hiện trên màn hình hiển thị nội trang web, ngoại trừ thẻ TITLE làm nên tiêu đề hiện lên tab cửa sổ trình duyệt.
Dòng 4: thẻ META, báo cho trình duyệt biết tài liệu HTML được mã hóa dạng Unicode UTF-8. Nếu file của bạn có nội dung không phải tiếng Anh, luôn có dòng này để font chữ hiển đúng. Thẻ này là thẻ rỗng (empty tag) nên không có thẻ đóng, nên áp dụng tự đóng (self-closing).
Dòng 5: phần tử (element) TITLE để đặt tiêu đề cửa sổ tab của trình duyệt. Thẻ này cũng giúp cho việc máy kiếm như Google, Bing dễ tìm thấy trang web trên Internet. Title cần phản ánh chủ đề chính nội dung trang web.
Dòng 6: thẻ HEAD đóng của thẻ HEAD mở ở dòng 3.
Dòng 7: thẻ BODY, tức là phần thân của tài liệu HTML, nó cũng chính là phần mở đầu cho phần nội dung chính của trang web. Các bố cục, văn bản, hình ảnh hiển thị trên trang web đều là các thẻ khác nằm bên trong body.
Dòng 8: phần tử H1, thể hiện dòng chữ to, đại diện cho tiêu đề cấp 1 của tài liệu. Ta cứ hình dung một tài liệu có cấu trúc thì H1 là cấp nội dung lớn nhất, bao quát nhất.
Dòng 9: phần tử P, tạo ra một đoạn văn (paragraph) trên trang web.
Dòng 10, 11: phần tử P, tạo ra một đoan văn khác trên trang web.
Dòng 12: thẻ BODY đóng cho thẻ BODY mở dòng 7.
Dòng 13: thẻ HTML đóng, đóng cho thẻ HTML mở dòng 2, chính thức đóng lại tài liệu HTML.
Những điểm cần nắm vững, học thuộc lòng
Thẻ (tag) và phần tử (element) giống/ khác nhau thế nào? Xem giải thích.
Xét theo khía cạnh cấu trúc mở/ đóng thì thẻ được chia làm hai nhóm:
- Nhóm thẻ có nội dung (container tag): phần lớn các thẻ thuộc nhóm này. Tức là có thẻ mở, rồi đến nội dung của thẻ, sau đó thẻ đóng.
- Nhóm thẻ không có nội dung/ thẻ rỗng (empty tag): ít thẻ, bạn có thể nhớ danh sách thẻ sau: AREA, BASE, BR, COL, EMBED, HR, IMG, INPUT, LINK, META, PARAM, SOURCE, TRACK, WBR
Từ đặc tính trên, dễ dàng nhận thấy thẻ có nội dung có thể chứa một/ nhiều thẻ có nội dung khác và/ hoặc thẻ không có nội dung bên trong nó. Trong khi đó, thẻ không có nội dung thì không thể chứa bất cứ cái gì trong nó.
Đứng ở góc độ xây dựng bố cục các khối cấu trúc giao diện trên trang web, các phần tử (element) sẽ rơi vào 3 nhóm:
- Phần tử dạng khối (block-level element): mỗi phần tử tạo ra một khối hình chữ nhật, mặc định chiếm trọn không gian chiều ngang của màn hình mà không cho phép phần tử nào khác nằm cạnh nó bên trái hoặc bên phải. Việc chiếm không gian không đồng nghĩa với độ rộng của khối, khối có thể nhỏ hơn nhiều so với chiều ngang của khối cha mẹ.
- Phần tử trong dòng (inline-level element): các phần tử nằm cùng một dòng cạnh nhau trên màn hình, nếu chưa canh chỉnh CSS, các phần tử sẽ nằm liền sát nhau. Các khối này không có chiều rộng và chiều cao của riêng nó mà phụ thuộc vào khối cha mẹ và phần tử con của nó.
- Phần tử khối trong dòng (inline-block element): các phần từ này được phép nằm cạnh nhau nhưng chúng là khối riêng biệt, có thể chỉnh chiều rộng và chiều cao khối.
Minh họa bên dưới giúp hình dung rõ hơn về phần tử dạng block, inline hoặc inline-block:
Chưa cần biết CSS là gì, chỉ cần biết dùng CSS để “làm đẹp” các element khi chúng hiện lên màn hình.
Ta hình dung các element là những khối hình chữ nhật (dài, ngắn khác nhau) được trình bày trên trang web với khung viền, màu nền, có chứa hình, chữ bên trong, hoặc đơn giản chỉ khối vô hình khi cần mới hiện ra. Hoặc nếu khối có kiểu display là inline sẽ hơi giống chữ nhật nhưng bị răng cưa trồi sụt ở 2 cạnh bên.
Làm cho trang web chạy trên môi trường gần giống như khi xuất bản
Phần này lẽ ra KACBT để cho bạn tự mày mò làm nhưng sẽ có người chưa từng học tin học căn bản, sử dụng máy tính một cách rất bản năng nên việc cài đặt sẽ khó khăn.
Nếu bạn đã đọc bài Đồ nghề và đã cài đặt thành công mọi thứ, dừng ở đây. Còn vẫn khá ABC, cứ đọc và lần lượt làm theo.
- Vào trang để tải XAMPP, click link này.
- Tải file ở dòng giữa để phiên bản không quá mới, không quá cũ, đủ hợp thời.
- Cài đặt XAMPP bằng cách nhấp đúp file đã tải về.
- Chạy XAMPP lên bằng cách vào Menu của Windows hoặc thanh tìm kiếm.
Kết quả sau khi cài thành công XAMPP, mở bảng điều khiển:
Giờ đây, bạn chỉ cần mở Notepad++ lên, gõ như sau:
Bấm nút Save, tìm đến D:\xampp\htdocs, nhập tên file xinchao.html như minh họa:
Mở trình duyệt web lên, gõ vào thanh địa chỉ, như minh hoạ:
Cứ trước mỗi buổi học web, bạn lần lượt làm:
- Mở XAMPP Control lên, bấm nút Start ở dòng có chữ Apache như đã minh hoạ ở phần trên.
- Mở trình soạn thảo Notepad Plus Plus (Notepad++) lên, sử dụng nội dung mẫu để sẵn sàng cho bài học mới hoặc bài yêu cầu Save as file bài trước đó.
- Mở trình duyệt web lên, gõ http://localhost/baiX.html (thay X bằng số thứ tự của bài).
- Mỗi khi có sự chỉnh sửa mã (tức nội dung HTML được soạn trong Notepad++), nhớ bấm Ctrl + S để Save lại trước khi xem kết quả bên trình duyệt. Có rất nhiều bạn cứ nghĩ rằng chỉnh xong là tự save, hoặc không biết là phải Save mỗi khi có sự chỉnh sửa. Đó là thiếu kiến thức tin học căn bản vậy.
- Khi chuyển qua trình duyệt để xem kết quả, nếu bấm F5 (hoặc nút reload/ refresh; hoặc Ctrl + R) trên trình duyệt mà chưa có sự thay đổi thì: thử Shift + F5, kiểm tra lại mã HTML bên Notepad++, đã Save file chưa? File chưa Save sẽ thấy có hình dấu sao ở góc trái trên title bar.
Tham gia thảo luận để được giải đáp nếu bạn có gì đó chưa rõ.