Cách tạo blog bằng HTML và CSS pdf
Xin chào, Hôm nay chúng ta sẽ xem cách chúng ta có thể dễ dàng tạo một trang web viết blog chỉ bằng HTML, CSS và JS. Không có thư viện nào khác. Chúng tôi cũng sẽ sử dụng kho lưu trữ Firebase để lưu trữ/truy xuất dữ liệu blog Show Đây là một dự án rất tốt để thực hành phát triển full-stack. Khi tôi bắt đầu phát triển web, tôi luôn nghĩ làm cách nào để tạo trang web viết blog của riêng mình. Và hôm nay, tôi tự hào rằng tôi đã cố gắng tạo ra trang blog. Trang web của chúng tôi rất đơn giản và có các tính năng như
Để xem bản demo hoặc bạn muốn có video hướng dẫn mã hóa đầy đủ. Bạn có thể xem hướng dẫn bên dưới Video hướng dẫn
Vì vậy, không lãng phí thêm thời gian, hãy xem cách viết mã này Mã sốVì đây là một nút. ứng dụng web js. Chúng tôi cần NPM và Node. js để bắt đầu, vì vậy hãy đảm bảo rằng bạn đã cài đặt chúng trong hệ thống của mình Vì vậy, hãy bắt đầu với cấu trúc thư mục của nó Cấu trúc thư mụcĐây là cấu trúc thư mục của chúng tôi Vì vậy, hãy làm cho máy chủ của chúng tôi Người phục vụMở tệp dự án (thư mục gốc) trong trình chỉnh sửa mã của bạn. Mở Terminal và chạy 5Điều này sẽ khởi tạo NPM cho dự án của chúng tôi. Sau đó cài đặt một số gói bằng cách này 6- 7 - là tạo máy chủ- 8 - là xử lý tải lên- 9 - là chạy máy chủ liên tụcmột khi gói được cài đặt. Bạn sẽ thấy một tệp 0 bên trong thư mục gốc của mình. Mở nó raVà thay đổi nó 1 thành
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bây giờ chúng tôi đã sẵn sàng để tạo một máy chủ. Tạo một tệp mới bên trong thư mục gốc của bạn, đặt tên là 2. Và mở nóĐầu tiên nhập tất cả các gói mà chúng tôi cần
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Và sau đó lưu trữ đường dẫn thư mục 3 của bạn bên trong một biến 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sau đó tạo máy chủ 4. Và đặt đường dẫn thư mục 3 thành đường dẫn tĩnh. Cũng sử dụng 6 để cho phép tải lên tệp
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sau đó, tạo một tuyến đường về nhà và gửi phản hồi tệp 7. Và chạy máy chủ của bạn trên cổng 3000
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chạy máy chủ của bạn trước 8. Và máy chủ của chúng tôi đã hoàn thành. Hãy tạo trang chủ ngay bây giờTrang chủViết cấu trúc HTML cơ bản và liên kết tệp 9. Sau đó bắt đầu bằng cách tạo một thanh điều hướngTrang Chủ. html 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình đầu raBây giờ tạo tiêu đề 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình đầu raBây giờ là yếu tố cuối cùng cho trang chủ của chúng tôi. Tạo phần thẻ blog và tạo một thẻ, khi chúng ta tạo những thẻ này bằng JS sau 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình đầu ra
00. Trang chủ của chúng tôi đã hoàn thành. Vào bên trong máy chủ và tạo tuyến đường 01Người phục vụ. js 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sau này, hãy tạo trình chỉnh sửa của chúng tôi biên tập viênTrong liên kết 02 cả tệp 9 và tệp 04. Và bên trong thẻ body bắt đầu bằng cách tạo biểu ngữ div 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình đầu raVà sau đó tạo các trường văn bản cho tiêu đề blog, bài viết 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình đầu raVà cuối cùng, hãy tạo nút xuất bản bằng nút tải lên hình ảnh 6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình đầu ra
05 với tệp HTML. Và mở nóBắt đầu bằng cách chọn tất cả các yếu tố mà chúng ta cần 8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sau khi chọn tất cả các yếu tố. Thêm sự kiện 06 vào đầu vào tải lên của chúng tôi và xử lý tải lên 9Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bây giờ hãy tạo hàm 07 10Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Vì vậy, đây là cách chúng tôi có thể làm cho quá trình tải lên của mình hoạt động. Nhưng bây giờ nó sẽ không hoạt động vì chúng tôi chưa thực hiện lộ trình 08 của mình. Đối với 2 mở đó và tạo tuyến đường 08Người phục vụ. js 11Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bằng cách này, chúng tôi đã hoàn thành. Bạn có thể kiểm tra tải lên của mình có hoạt động hay không. Như bạn có thể nhận thấy rằng chúng tôi đang gọi 11 nhưng chúng tôi vẫn chưa thực hiện điều đó. Vì vậy, hãy làm cho nóbiên tập viên. js 12Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chức năng này sẽ cho phép bạn chèn định dạng văn bản cho hình ảnh của mình, ví dụ: nếu tôi tải lên 12 thì chức năng này sẽ chèn nội dung như thế này vào trường bài viết của chúng tôiVì vậy, cho đến bây giờ chúng tôi cũng đã hoàn thành việc tải lên của mình. Bây giờ, hãy truy cập firebase của bạn và tạo một dự án viết blog. Và thiết lập firebase cho bạn. Bạn có thể tham khảo video này để thiết lập Sau khi thiết lập các biến firebase trong liên kết 14 với tệp bên trong 02 ở trên 05 như thế này 13Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sau đó lại đi vào bên trong 05. Và làm cho nút xuất bản hoạt động 14Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đây là cách chúng tôi tạo một tài liệu bên trong firebase firestore. Sau đó, trình chỉnh sửa của chúng tôi hoàn toàn hoạt động. Nếu bạn kiểm tra nó, bạn sẽ thấy bạn đang được chuyển hướng đến blog route. Nhưng chúng tôi đã không thực hiện tuyến đường đó. Đối với lần mở 2 đó. Và thực hiện tuyến đường 19 và cả tuyến đường 20người phục vụ. js 15Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Bây giờ, bạn sẽ thấy tệp 21. Vì vậy, lần cuối cùng trước tiên chúng ta hãy tạo trang blog. lần này liên kết cả 3 tệp CSS với 21 và sao chép thanh điều hướng từ 7 sang trang này 16Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 17Vào chế độ toàn màn hình Thoát chế độ toàn màn hình đầu ra
Liên kết các tập lệnh firebase, 14 và 25 với nó. Và mở 25Bắt đầu bằng cách trích xuất id blog từ URL. và lấy dữ liệu từ firestore 18Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Khi chúng tôi có dữ liệu blog. Làm cho 27 19Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Trong chức năng trên, chúng tôi đã chọn tất cả các phần tử chúng tôi cần và đặt nội dung của chúng. 28 vì chúng tôi cần định dạng bài viết của mình. Tạo hàm ________ 228 và định dạng văn bản bài báo mà chúng tôi nhận được từ cửa hàng cứu hỏa 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sau đó, hãy so sánh những gì chúng tôi nhập trong trình chỉnh sửa của mình và những gì chúng tôi sẽ thấy trong blog của mình biên tập viênBlogVậy là blog của chúng ta cũng xong. Bây giờ chúng tôi muốn có đề xuất hoặc đọc thêm yếu tố trong trang blog của chúng tôi Vì vậy, hãy mở 21 và tạo một cái 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Sau đó, sao chép phần tử 31 từ 7 sang 21 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Và như bạn có thể thấy, chúng tôi đang sử dụng các yếu tố giống nhau để đọc thêm và viết blog. Vì vậy, chúng tôi sẽ sử dụng cùng một chức năng JavaScript để tạo cả hai yếu tố này. Vì vậy, đối với tệp liên kết 34 đến 21 ở trên 25Và điều cuối cùng là mở 34 và viết mã này 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Đó là cách chúng tôi làm thẻ blog của chúng tôi. Chúng ta xong rồi Đầu ra - Trang chủ. htmlĐầu ra - Blog. htmlÀ chính nó đấy. Tôi hy vọng bạn hiểu mỗi và tất cả mọi thứ. Nếu bạn có nghi ngờ hoặc tôi đã bỏ lỡ điều gì đó, hãy cho tôi biết trong phần bình luận Tôi có thể tạo một blog bằng HTML không?Xin chào, Hôm nay chúng ta sẽ xem cách chúng ta có thể dễ dàng tạo một trang web viết blog chỉ bằng HTML, CSS và JS. . Các trang Blog động Có một trình soạn thảo dành riêng cho blog Bạn có thể thêm/tạo bao nhiêu blog tùy thích Bạn có thể thêm Tiêu đề, đoạn văn và Hình ảnh vào bài đăng trên blog Đã đọc thêm phần blog cũng Chúng tôi có thể sử dụng HTML và CSS trong Blogger không?Thay đổi blog của bạn bằng HTML hoặc CSS
. Trong menu bên trái, hãy nhấp vào Chủ đề. Chỉnh sửa HTML. Thực hiện các thay đổi của bạn và nhấp vào Lưu.
Blog trong HTML là gì?Blog (viết tắt của "weblog") là trang web thảo luận hoặc thông tin được xuất bản trên World Wide Web bao gồm các mục văn bản (bài đăng) theo phong cách nhật ký rời rạc, thường không chính thức . Các bài đăng thường được hiển thị theo thứ tự thời gian đảo ngược để bài đăng gần đây nhất xuất hiện đầu tiên, ở đầu trang web. . Posts are typically displayed in reverse chronological order so that the most recent post appears first, at the top of the web page.
Làm cách nào để tạo một trang web bằng HTML khi tải xuống notepad PDF?Làm theo các bước bên dưới để tạo trang web đầu tiên của bạn bằng Notepad hoặc TextEdit. . Bước 1. Mở Notepad (PC) Windows 8 trở lên. . Bước 1. Mở TextEdit (Mac) Mở Finder > Ứng dụng > TextEdit. . Bước 2. Viết một số HTML. . Bước 3. Lưu trang HTML. . Bước 4. Xem trang HTML trong trình duyệt của bạn |