Мазмуну:

Биринчи веб -сайтыңызды түзүү: 10 кадам
Биринчи веб -сайтыңызды түзүү: 10 кадам

Video: Биринчи веб -сайтыңызды түзүү: 10 кадам

Video: Биринчи веб -сайтыңызды түзүү: 10 кадам
Video: Сайт тузуу 1 кадам 2024, Ноябрь
Anonim
Биринчи веб -сайтыңызды түзүү
Биринчи веб -сайтыңызды түзүү

Бул окуу куралында сиз шилтемеленген стили жана интерактивдүү JavaScript файлы бар веб -баракчаны түзүүнү үйрөнөсүз.

1 -кадам: Папканы түзүү

Сиздин Папканы түзүү
Сиздин Папканы түзүү

Биз сактай турган файлдар үчүн папка түзүңүз. Кааласаңыз, атын коюудан тартынбаңыз, жөн гана анын кайда жайгашканын унутпаңыз, анткени биз кийинчерээк файлдарды сактайбыз.

2 -кадам: Биринчи файлыңызды түзүү

Биринчи файлыңызды түзүү
Биринчи файлыңызды түзүү

Сүйүктүү текст редакторуңузду ачыңыз. Менин учурда, мен жөн эле Windows 10. камтылган блокнотун колдоном. Жаңы файл пайда болгондон кийин, төмөнкүлөрдү териңиз:

Бул менин биринчи веб -баракчам, сизге үйрөтүүчү тарабынан алып келген

Бул HTML теги катары белгилүү. Бул 1 -Башкы дегенди түшүндүрөт. Биз бул тегдин ичине киргизген текст беттеги аталыш катары көрүнөт. Ал ушинтип ачылат жана жабылат. Эки тегдин ортосундагы текст сиздин веб -браузериңизде көрсөтүлө турган нерсе. Айтылган бөлүк ал тегге атрибут берип жатат, биз аны x кадамында карайбыз. Муну аткаргандан кийин, файлды index.html катары 1 -кадамда биз жасаган папкага сактаңыз.

3 -кадам: Файлды ачыңыз

Файлды ачыңыз
Файлды ачыңыз

Эми биз түзгөн папкадагы файлга өтүүнү аяктагандан кийин, файлды оң баскыч менен чыкылдатып, "менен ачуу" опциясын тандап, сиз колдонгон веб -браузерди тандаңыз. Менин учурда бул google chrome. Эми ушул убакка чейин талыкпаган эмгегиңизди көрүңүз!

4 -кадам: Баракчаңызды стилдөө

Барагыңызды стилдөө
Барагыңызды стилдөө

Ошол сыяктуу эле, биздин веб -сайт абдан жөнөкөй. Биз нерселерди бир аз татымалдаштыруу үчүн каскаддык стиль барагын кошобуз. Жаңы текст файлын түзүп, төмөнкүлөрдү териңиз:

h1 {түс: көк; текстти тегиздөө: борбор;}

Бул жерде биз браузерге айтып жатканыбыз h1 тегиндеги каалаган элементти (2 -кадамда билгенбиз) жана ага көк түс берип, барактын ортосуна тегиздөө. Бул файлды 1 -кадамда биз жараткан папкага style.css катары сактаңыз.

5 -кадам: Style.cssти Index.html менен байланыштырыңыз

Style.cssти Index.html менен байланыштырыңыз
Style.cssти Index.html менен байланыштырыңыз

Бул учурда бизде бири -бирибизди билбеген эки файл бар. Биз index.html файлына бизде style.css файлы бар экенин айтып, аны стилдештирүүнү каалашыбыз керек. Бул үчүн биз index.html файлды текст редакторубузда ачабыз жана h1 тегибиздин үстүнө шилтеме теги деп аталган нерсени кошобуз. Шилтеме теги анын аталышынан көрүнүп тургандай кылат, ал бир нерсеге шилтеме берет. Биздин учурда стиль таблицасы. Барып териңиз. Шилтеме теги өзүн -өзү жабуучу тег болгондуктан, аяктоочу тег талап кылынбайт. Рел мамилени билдирет жана href биз шилтеме кылган биздин тышкы файл жайгашкан индекстин файлын билдирет. Эми index.html файлын сактаңыз.

6 -кадам: Жаңы стилдеги баракчаңызды көрүү

Жаңы стилиңиздеги баракчаңызды караңыз
Жаңы стилиңиздеги баракчаңызды караңыз

3 -кадамды кайра карап чыгып, веб -баракчаңызды кайра жүктөңүз жана өзгөрүүлөр кандай чагылдырылганын карап көрүңүз.

7 -кадам: Баскычты түзүү

Баскыч түзүү
Баскыч түзүү
Баскыч түзүү
Баскыч түзүү

Текст редакторуңузда index.html файлыңызды кайра ачыңыз жана төмөнкүлөрдү териңиз:

Мени бас!

жана файлды сактаңыз. Бул беттеги баскычтын элементин түзөт. Сакталгандан кийин, 3 -кадамда көрсөтүлгөндөй файлды кайра ачыңыз жана баскыч баракчаңыздын төмөнкү сол жагында экенин текшериңиз.

8 -кадам: Javascript файлыңызды түзүңүз

Сиздин Javascript файлыңызды түзүңүз
Сиздин Javascript файлыңызды түзүңүз

Акырында, биз өзүбүздүн JavaScript файлды түзөбүз. Бул биздин сайтты интерактивдүү кыла турган нерсе. Текст редакторун ачып, төмөнкүлөрдү териңиз:

document.querySelector ("#баскычы"). addEventListener ("чыкылдатуу", функция () {

document.querySelector ("#heading"). innerText = "Аталышын өзгөртүү"

})

Биз эмне кылып жатабыз, документтен бизге баскычтын идентификатору бар элементти табууну сурануу керек, жана биз баскычты басуу IDсинин элементтеринин текстин өзгөртүү аркылуу "чыкылдатуу окуясын өзгөртүү" баскычын өзгөртүү. ". Файлды 1 -кадамда биз жараткан папкада button.js катары сактаңыз.

9 -кадам: Javascript жана Index Files шилтемелеңиз

Javascript жана индекс файлдарыңызды байланыштырыңыз
Javascript жана индекс файлдарыңызды байланыштырыңыз

Биз style.css файлы менен болгондой эле, индекс.html файлыбызга javascript файлыбызды айтып беришибиз керек. Биз буга чейин кылган нерселерибиздин түбүнө төмөнкүлөрдү жазыңыз:

Сценарий теги биздин баракчанын иштешин камсыз кылуу үчүн сценарий тилин (биздин учурда, javascript) кошууга мүмкүндүк берет. Биз button.js деп аталган файлды издеп, андагы индекстин файлына бардык кодду кошууну айтып жатабыз. Киргизилгенден кийин, файлды сактап, 3 -кадамда көрсөтүлгөндөй файлды кайра ачыңыз.

10 -кадам: Жаңы түзүлгөн баскычты текшериңиз

Жаңы түзүлгөн баскычты сынап көрүңүз
Жаңы түзүлгөн баскычты сынап көрүңүз

Эми бара бериңиз жана баскычты чыкылдатыңыз жана аталыштын өзгөрүшүн көрүңүз!

Куттуктайм !! Сиз азыр биринчи интерактивдүү веб баракчаңызды түздүңүз! Кызык, мындан ары сиз азыр билгениңизди билип туруп, аны кантип көтөрө аласыз?

Сунушталууда: