Tworzenie pierwszej strony internetowej: 10 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:29

W tym samouczku nauczysz się budować podstawową stronę internetową, która zawiera połączony arkusz stylów i interaktywny plik javascript.

Krok 1: Tworzenie folderu

Utwórz folder na pliki, które utworzymy, aby były przechowywane. Możesz go dowolnie nazwać, pamiętaj tylko, gdzie się znajduje, ponieważ później zapiszemy w nim pliki.

Krok 2: Tworzenie pierwszego pliku

Otwórz swój ulubiony edytor tekstu. W moim przypadku po prostu użyję wbudowanego notatnika systemu Windows 10. Po utworzeniu nowego pliku wpisz następujące polecenie:

To jest moja pierwsza strona internetowa, dostarczona przez instruktażowego

Jest to tzw. tag HTML. Oznacza nagłówek 1. Tekst, który umieścimy w tym tagu, pojawi się jako nagłówek na stronie. Jest otwierany i zamykany w ten sposób. Tekst pomiędzy dwoma tagami będzie wyświetlany w przeglądarce internetowej. Część, która mówi, nadaje temu tagowi atrybut, do którego będziemy się odwoływać w kroku x. Gdy to zrobisz, zapisz plik w folderze, który stworzyliśmy w kroku 1, jako index.html.

Krok 3: Otwórz plik

Teraz, gdy zakończyliśmy, przejdź do pliku w utworzonym folderze, kliknij plik prawym przyciskiem myszy i wybierz opcję „Otwórz za pomocą” i wybierz przeglądarkę internetową, której używasz. W moim przypadku jest to google chrome. Teraz przyjrzyj się dotychczasowym trudom swojej ciężkiej pracy!

Krok 4: Stylizacja swojej strony

Nasza strona internetowa jest dość prosta. Dodamy tak zwany kaskadowy arkusz stylów, aby nieco urozmaicić. Utwórz nowy plik tekstowy i wpisz:

h1{kolor: niebieski; wyrównanie tekstu: do środka;}

Mówimy tutaj przeglądarce, aby znalazła dowolny element w znaczniku h1 (o czym dowiedzieliśmy się w kroku 2), nadała mu kolor niebieski i wyrównała do środka strony. Zapisz ten plik w folderze, który utworzyliśmy w kroku 1 jako style.css.

Krok 5: Połącz Style.css ze swoim Index.html

W tym momencie mamy dwa oddzielne pliki, które nie wiedzą o sobie nawzajem. Musimy powiedzieć naszemu plikowi index.html, że mamy plik style.css, do którego chcemy się odwoływać i pobrać trochę stylizacji. Aby to zrobić, otworzymy nasz plik index.html w naszym edytorze tekstu, a nad naszym znacznikiem h1 dodamy tak zwany znacznik linku. Znacznik linku działa dokładnie tak, jak sugeruje jego imiennik, łączy się z czymś. W naszym przypadku arkusz stylów. Śmiało i wpisz. Tag linku jest tagiem samozamykającym się, więc tag końcowy nie jest wymagany. Rel oznacza relację, a href informuje plik indeksu, gdzie znajduje się nasz zewnętrzny plik, do którego się odwołujemy. Teraz zapisz ten plik index.html.

Krok 6: Wyświetl swoją nowo stylizowaną stronę

Wróć do kroku 3, załaduj ponownie swoją stronę internetową i zobacz, jak odzwierciedlają się zmiany.

Krok 7: Tworzenie przycisku

Otwórz ponownie plik index.html w edytorze tekstu i wpisz następujące polecenie:

Kliknij!

i zapisz plik. Tworzy to element przycisku na stronie. Po zapisaniu ponownie otwórz plik, jak pokazano w kroku 3, i upewnij się, że przycisk znajduje się w lewym dolnym rogu strony.

Krok 8: Utwórz swój plik JavaScript

Na koniec stworzymy nasz plik javascript. To właśnie sprawi, że nasza strona będzie interaktywna. Otwórz edytor tekstu i wpisz:

document.querySelector("#button").addEventListener("kliknij", function(){

document.querySelector("#heading").innerText = "Zmienianie nagłówka w locie"

})

To, co robimy, to proszenie dokumentu, aby znalazł nam element o identyfikatorze przycisku, a przycisk reaguje na zdarzenie kliknięcia, zmieniając tekst elementu o identyfikatorze nagłówka na „Zmiana nagłówka w locie”. Zapisz plik jako button.js w folderze, który utworzyliśmy w kroku 1.

Krok 9: Połącz swój skrypt JavaScript i pliki indeksu

Podobnie jak w przypadku pliku style.css, musimy poinformować nasz plik index.html o pliku javascript. Na dole pod wszystkim, co zrobiliśmy do tej pory, wpisz:

Tag skryptu pozwala nam dodać język skryptowy (w naszym przypadku javascript), aby zapewnić funkcjonalność naszej stronie. Mówimy mu, aby poszukał pliku o nazwie button.js i dodał cały zawarty w nim kod do naszego pliku indeksu. Po wpisaniu zapisz plik i ponownie otwórz plik, jak pokazano w kroku 3.

Krok 10: Przetestuj nowo utworzony przycisk

Teraz idź dalej i kliknij przycisk i obserwuj zmianę kursu!

Gratulacje!! Właśnie stworzyłeś swoją pierwszą interaktywną stronę internetową! Zastanawiam się, jak daleko możesz posunąć się dalej, wiedząc, co wiesz teraz?