Създаване на първия ви уебсайт: 10 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:51

В този урок ще се научите да изграждате основна уеб страница, която има свързана стилова таблица и интерактивен javascript файл.

Стъпка 1: Създаване на вашата папка

Създайте папка за файловете, които ще създадем, за да се съхраняват. Не се колебайте да го назовете, както искате, просто запомнете къде се намира, защото по -късно ще запазваме файлове в него.

Стъпка 2: Създаване на първия ви файл

Отворете любимия си текстов редактор. В моя случай просто ще използвам вградения бележник на Windows 10. След като имате нов файл, въведете следното:

Това е първата ми уеб страница, представена ви от инструктор

Това е известно като HTML маркер. Той означава Заглавие 1. Текстът, който поставяме в този маркер, ще се показва като заглавие на страницата. Той се отваря и затваря по този начин. Текстът между двата маркера е това, което ще се показва във вашия уеб браузър. Частта, която казва, дава на този маркер атрибут, който ще посочим в стъпка x. След като това стане, продължете и запишете файла в папката, която направихме в стъпка 1 като index.html.

Стъпка 3: Отворете файла

Сега, когато завършихме, отидете до файла в папката, която създадохме, щракнете с десния бутон върху файла и изберете опцията „отвори с“и изберете уеб браузъра, който използвате. В моя случай това е google chrome. Сега вижте труда на вашата упорита работа досега!

Стъпка 4: Оформете вашата страница

Както и да е, нашият уебсайт е доста прост. Ще добавим това, което е известно като каскаден стил, за да подправим нещата малко. Създайте нов текстов файл и въведете следното:

h1 {цвят: син; text-align: center;}

Това, което казваме на браузъра тук, е да намери всеки елемент в маркер h1 (за който научихме в стъпка 2) и да му дадем син цвят и да го подравним в центъра на страницата. Запазете този файл в папката, която създадохме в стъпка 1 като style.css.

Стъпка 5: Свържете Style.css с вашия Index.html

На този етап имаме два отделни файла, които не знаят един за друг. Трябва да кажем на нашия index.html файл, че имаме файл style.css, към който искаме да се позовава, и да вземем малко стил. За да направим това, ще отворим нашия index.html файл в нашия текстов редактор, а над нашия h1 маркер ще добавим това, което е известно като маркер за връзка. Етикетът за връзка прави точно както предполага неговият съименник, той свързва към нещо. В нашия случай таблица със стилове. Продължете и напишете. Етикетът на връзката е самозатварящ се таг, така че краен маркер не се изисква. Rel означава връзка и href казва на индексния файл, където се намира нашият външен файл, към който се отнасяме. Сега запишете този файл index.html.

Стъпка 6: Прегледайте своята новооформена страница

Посетете отново стъпка 3 и презаредете уеб страницата си и вижте как се отразяват промените.

Стъпка 7: Създаване на бутон

Отворете отново файла index.html във вашия текстов редактор и въведете следното:

Щракнете върху мен!

и запишете файла. Това създава елемент на бутона на страницата. След като бъде запазен, отворете отново файла, както е показано в стъпка 3 и се уверете, че бутонът е в долната лява част на страницата ви.

Стъпка 8: Създайте своя Javascript файл

Накрая ще създадем нашия javascript файл. Това ще направи нашия сайт интерактивен. Отворете текстов редактор и въведете следното:

document.querySelector ("#бутон"). addEventListener ("щракване", функция () {

document.querySelector ("#заглавие"). innerText = "Промяна на заглавието в движение"

})

Това, което правим, е да поискаме от документа да ни намери елемент с идентификатора на бутона и ще трябва бутонът да реагира на събитие при щракване, като променим текстов елемент с идентификатора на заглавието на „Промяна на заглавието в движение . Запазете файла като button.js в папката, която създадохме в Стъпка 1.

Стъпка 9: Свържете вашите Javascript и индексни файлове

Както направихме с файла style.css, трябва да кажем на нашия index.html файл за нашия javascript файл. В долната част под всичко, което сме направили досега, напишете следното:

Етикетът на скрипта ни позволява да добавим скриптов език (в нашия случай javascript), за да осигурим функционалност на нашата страница. Казваме му да потърси файл, наречен button.js и да добави целия код, съдържащ се в него, към нашия индексен файл. След като го въведете, запишете файла и го отворете отново, както е показано в стъпка 3.

Стъпка 10: Тествайте новосъздадения бутон

Сега продължете и кликнете върху бутона и гледайте промяната на заглавието!

Честито!! Вече създадохте първата си интерактивна уеб страница! Чудя се колко по -далеч бихте могли да издържите, знаейки това, което знаете сега ??