Мазмуну:
- 1 -кадам: Папканы түзүү
- 2 -кадам: Биринчи файлыңызды түзүү
- Бул менин биринчи веб -баракчам, сизге үйрөтүүчү тарабынан алып келген
- 3 -кадам: Файлды ачыңыз
- 4 -кадам: Баракчаңызды стилдөө
- 5 -кадам: Style.cssти Index.html менен байланыштырыңыз
- 6 -кадам: Жаңы стилдеги баракчаңызды көрүү
- 7 -кадам: Баскычты түзүү
- 8 -кадам: Javascript файлыңызды түзүңүз
- 9 -кадам: Javascript жана Index Files шилтемелеңиз
- 10 -кадам: Жаңы түзүлгөн баскычты текшериңиз
Video: Биринчи веб -сайтыңызды түзүү: 10 кадам
2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:39
Бул окуу куралында сиз шилтемеленген стили жана интерактивдүү 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 менен байланыштырыңыз
Бул учурда бизде бири -бирибизди билбеген эки файл бар. Биз index.html файлына бизде style.css файлы бар экенин айтып, аны стилдештирүүнү каалашыбыз керек. Бул үчүн биз index.html файлды текст редакторубузда ачабыз жана h1 тегибиздин үстүнө шилтеме теги деп аталган нерсени кошобуз. Шилтеме теги анын аталышынан көрүнүп тургандай кылат, ал бир нерсеге шилтеме берет. Биздин учурда стиль таблицасы. Барып териңиз. Шилтеме теги өзүн -өзү жабуучу тег болгондуктан, аяктоочу тег талап кылынбайт. Рел мамилени билдирет жана href биз шилтеме кылган биздин тышкы файл жайгашкан индекстин файлын билдирет. Эми index.html файлын сактаңыз.
6 -кадам: Жаңы стилдеги баракчаңызды көрүү
3 -кадамды кайра карап чыгып, веб -баракчаңызды кайра жүктөңүз жана өзгөрүүлөр кандай чагылдырылганын карап көрүңүз.
7 -кадам: Баскычты түзүү
Текст редакторуңузда index.html файлыңызды кайра ачыңыз жана төмөнкүлөрдү териңиз:
Мени бас!
жана файлды сактаңыз. Бул беттеги баскычтын элементин түзөт. Сакталгандан кийин, 3 -кадамда көрсөтүлгөндөй файлды кайра ачыңыз жана баскыч баракчаңыздын төмөнкү сол жагында экенин текшериңиз.
8 -кадам: Javascript файлыңызды түзүңүз
Акырында, биз өзүбүздүн JavaScript файлды түзөбүз. Бул биздин сайтты интерактивдүү кыла турган нерсе. Текст редакторун ачып, төмөнкүлөрдү териңиз:
document.querySelector ("#баскычы"). addEventListener ("чыкылдатуу", функция () {
document.querySelector ("#heading"). innerText = "Аталышын өзгөртүү"
})
Биз эмне кылып жатабыз, документтен бизге баскычтын идентификатору бар элементти табууну сурануу керек, жана биз баскычты басуу IDсинин элементтеринин текстин өзгөртүү аркылуу "чыкылдатуу окуясын өзгөртүү" баскычын өзгөртүү. ". Файлды 1 -кадамда биз жараткан папкада button.js катары сактаңыз.
9 -кадам: Javascript жана Index Files шилтемелеңиз
Биз style.css файлы менен болгондой эле, индекс.html файлыбызга javascript файлыбызды айтып беришибиз керек. Биз буга чейин кылган нерселерибиздин түбүнө төмөнкүлөрдү жазыңыз:
Сценарий теги биздин баракчанын иштешин камсыз кылуу үчүн сценарий тилин (биздин учурда, javascript) кошууга мүмкүндүк берет. Биз button.js деп аталган файлды издеп, андагы индекстин файлына бардык кодду кошууну айтып жатабыз. Киргизилгенден кийин, файлды сактап, 3 -кадамда көрсөтүлгөндөй файлды кайра ачыңыз.
10 -кадам: Жаңы түзүлгөн баскычты текшериңиз
Эми бара бериңиз жана баскычты чыкылдатыңыз жана аталыштын өзгөрүшүн көрүңүз!
Куттуктайм !! Сиз азыр биринчи интерактивдүү веб баракчаңызды түздүңүз! Кызык, мындан ары сиз азыр билгениңизди билип туруп, аны кантип көтөрө аласыз?
Сунушталууда:
Блокнотту колдонуу менен негизги веб -сайтты кантип түзүү керек: 4 кадам
Блокнотту колдонуу менен негизги веб -сайтты кантип жасоо керек: Кимдир бирөө " Мен веб -сайтты негизги жазуу программасынан кантип жасайм? &Quot; Ооба, албетте, атайын эмес … Баары бир, мен бул жерде кантип Негизги жасоону көрсөтөм. блокнотту колдонуу менен вебсайт
Кантип портативдүү акылдуу күзгү түзүү/куту айкалышын түзүү: 8 кадам
Кантип портативдүү акылдуу күзгү түзүү/куту айкалыштыруу: Дэвистеги капстоюнум үчүн акыркы долбоор катары & Элкинс колледжи, мен порт катары иштей турган чоң күзгү жана малина пи жана сыйкырдуу күзгү программалык платформасын колдонуу менен бирге саякат кутусун иштеп чыгууну чечтим
Жаңы баштагандар үчүн кашаанын жардамы менен жөнөкөй веб баракчаны кантип түзүү керек: 14 кадам
Үйрөнчүктөр үчүн кашаанын жардамы менен жөнөкөй веб -баракчаны кантип түзүү керек: КиришүүТөмөнкү көрсөтмөлөр кронштейндерди колдонуп веб баракча жасоо үчүн этап -этабы менен көрсөтмө берет. Кронштейндер веб -иштеп чыгууга негизги көңүл бурулган баштапкы код редактору. Adobe Systems тарабынан түзүлгөн, бул лицензияланган бекер жана ачык булак программасы
Google Home үчүн биринчи аракетиңизди кантип түзүү керек (10 мүнөттө) Part-1: 10 Steps
Google Home үчүн биринчи аракетиңизди кантип түзүү керек (10 мүнөттө) 1-бөлүк: Саламатсызбы, бул мен жазган макалалардын сериясынын биринчи макаласы, анда биз Googleда Actionsди кантип иштеп чыгууну жана жайылтууну үйрөнөбүз. Чындыгында, мен акыркы бир нече айдын ичинде "гуглдагы аракеттердин" үстүндө иштеп жатам. Мен көптөгөн жеткиликтүү макалаларды көрдүм
Visual Basicте биринчи программаңызды түзүү: 7 кадам
Visual Basicте биринчи программаңызды түзүү: Бул көрсөтмө сизге Microsoft Visual Basic 2005 Express Edition программасын кантип көрсөтүүнү көрсөтөт. Бүгүн сиз түзө турган мисал - жөнөкөй сүрөт көрүүчү. Эгер сизге бул көрсөтмө жакса, сураныч, жогору жагындагы + баскычын басыңыз. Рахмат