Tạo trang web đầu tiên của bạn: 10 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:31

Trong hướng dẫn này, bạn sẽ học cách xây dựng một trang web cơ bản có biểu định kiểu được liên kết và tệp javascript tương tác.

Bước 1: Tạo thư mục của bạn

Tạo một thư mục cho các tệp chúng tôi sẽ tạo để được lưu trữ. Vui lòng đặt tên cho nó theo cách bạn muốn, chỉ cần nhớ vị trí của nó vì chúng tôi sẽ lưu tệp vào nó sau.

Bước 2: Tạo tệp đầu tiên của bạn

Mở trình soạn thảo văn bản yêu thích của bạn. Trong trường hợp của tôi, tôi sẽ chỉ sử dụng notepad tích hợp sẵn của Windows 10. Khi bạn có một tệp mới, hãy nhập như sau:

Đây là trang web đầu tiên của tôi, mang đến cho bạn bởi một người hướng dẫn

Đây là những gì được gọi là thẻ HTML. Nó là viết tắt của Heading 1. Văn bản chúng ta đặt trong thẻ này sẽ hiển thị dưới dạng tiêu đề trên trang. Nó được mở và đóng như thế này. Văn bản ở giữa hai thẻ là những gì sẽ hiển thị trong trình duyệt web của bạn. Phần nói là cung cấp cho thẻ đó một thuộc tính mà chúng ta sẽ tham chiếu trong bước x. Sau khi hoàn tất, hãy tiếp tục và lưu tệp trong thư mục mà chúng ta đã tạo ở bước 1 dưới dạng index.html.

Bước 3: Mở tệp

Bây giờ chúng ta đã hoàn thành điều hướng đến tệp trong thư mục chúng ta đã tạo, nhấp chuột phải vào tệp và chọn tùy chọn "mở bằng" và chọn trình duyệt web mà bạn sử dụng. Trong trường hợp của tôi, đây là google chrome. Bây giờ hãy xem thành quả làm việc chăm chỉ của bạn cho đến nay!

Bước 4: Tạo kiểu cho trang của bạn

Như vậy, trang web của chúng tôi khá đơn giản. Chúng tôi sẽ thêm những gì được gọi là bảng kiểu xếp tầng để thêm gia vị cho mọi thứ một chút. Tạo một tệp văn bản mới và nhập như sau:

h1 {color: blue; text-align: center;}

Những gì chúng ta đang nói với trình duyệt ở đây là tìm bất kỳ phần tử nào trong thẻ h1 (mà chúng ta đã tìm hiểu ở bước 2) và đặt cho nó màu xanh lam và căn chỉnh nó ở giữa trang. Lưu tệp này trong thư mục chúng ta đã tạo ở bước 1 với tên style.css.

Bước 5: Liên kết Style.css với Index.html của bạn

Tại thời điểm này, chúng tôi có hai tệp riêng biệt không biết về nhau. Chúng tôi cần cho tệp index.html của mình biết rằng chúng tôi có tệp style.css mà chúng tôi muốn nó tham chiếu đến và lấy một số kiểu từ đó. Để làm điều này, chúng tôi sẽ mở tệp index.html của chúng tôi trong trình soạn thảo văn bản của chúng tôi và phía trên thẻ h1 của chúng tôi, chúng tôi sẽ thêm những gì được gọi là thẻ liên kết. Thẻ liên kết thực hiện đúng như tên gọi của nó, nó liên kết đến một cái gì đó. Trong trường hợp của chúng tôi là một biểu định kiểu. Hãy tiếp tục và nhập. Thẻ liên kết là thẻ tự đóng nên không cần thẻ kết thúc. Rel là viết tắt của quan hệ và href nói cho tệp chỉ mục biết nơi chứa tệp bên ngoài của chúng ta mà chúng ta đang tham chiếu. Bây giờ hãy lưu tệp index.html đó.

Bước 6: Xem Trang được tạo kiểu mới của bạn

Truy cập lại bước 3 và tải lại trang web của bạn và xem các thay đổi phản ánh như thế nào.

Bước 7: Tạo một nút

Mở lại tệp index.html của bạn trong trình soạn thảo văn bản và nhập như sau:

Nhấp vào đây!

và lưu tệp. Điều này tạo ra một phần tử nút trên trang. Sau khi lưu, hãy mở lại tệp như được hiển thị trong bước 3 và đảm bảo nút nằm ở phía dưới cùng bên trái của trang của bạn.

Bước 8: Tạo tệp Javascript của bạn

Cuối cùng, chúng tôi sẽ tạo tệp javascript của chúng tôi. Đây là những gì sẽ làm cho trang web của chúng tôi tương tác. Mở trình soạn thảo văn bản và nhập nội dung sau:

document.querySelector ("nút #"). addEventListener ("nhấp chuột", function () {

document.querySelector ("# tiêu đề"). innerText = "Đang thay đổi tiêu đề"

})

Những gì chúng tôi đang làm là yêu cầu tài liệu tìm cho chúng tôi một phần tử có ID của nút và chúng tôi sẽ yêu cầu nút phản hồi một sự kiện nhấp chuột bằng cách thay đổi văn bản phần tử có ID của tiêu đề thành "Đang thay đổi tiêu đề ". Lưu tệp dưới dạng button.js trong thư mục chúng ta đã tạo ở Bước 1.

Bước 9: Liên kết tệp Javascript và tệp chỉ mục của bạn

Như chúng ta đã làm với tệp style.css, chúng ta cần cho tệp index.html biết về tệp javascript của chúng ta. Ở cuối bên dưới mọi thứ chúng tôi đã làm cho đến nay, hãy nhập như sau:

Thẻ script cho phép chúng tôi thêm ngôn ngữ kịch bản (trong trường hợp của chúng tôi là javascript) để cung cấp chức năng cho trang của chúng tôi. Chúng tôi đang yêu cầu nó tìm kiếm một tệp có tên button.js và thêm tất cả mã có trong nó vào tệp chỉ mục của chúng tôi. Khi bạn đã nhập xong, hãy lưu tệp và mở lại tệp như được hiển thị trong bước 3.

Bước 10: Kiểm tra nút mới tạo

Bây giờ hãy tiếp tục và nhấp vào nút và xem sự thay đổi tiêu đề!

Xin chúc mừng!! Bây giờ bạn đã tạo trang web tương tác đầu tiên của mình! Tôi tự hỏi bạn có thể tiến xa hơn bao nhiêu khi biết những gì bạn biết bây giờ ??