Бірінші веб -сайтты құру: 10 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:23

Бұл оқулықта сіз байланыстырылған стиль кестесі мен интерактивті 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 тегінің үстіне сілтеме тегі деп аталатын файлды қосамыз. Сілтеме тегі өзінің атына сәйкес жасайды, ол бір нәрсеге сілтеме жасайды. Біздің жағдайда стиль кестесі. Жалғастырып, теріңіз. Сілтеме тегі - өздігінен жабылатын тег, сондықтан аяқталатын тег қажет емес. Rel - бұл қатынасты білдіреді, ал href - біз сілтеме жасайтын сыртқы файл қайда орналасқанын көрсетеді. Енді index.html файлын сақтаңыз.

6 -қадам: Жаңа стильдегі бетті қараңыз

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

7 -қадам: түймені жасау

Мәтіндік редакторда index.html файлын қайта ашып, келесіні теріңіз:

Мені басыңыз!

және файлды сақтаңыз. Бұл бетте түйме элементін жасайды. Сақталғаннан кейін, файлды 3 -қадамда көрсетілгендей қайта ашыңыз және түйменің сіздің беттің төменгі сол жағында екеніне көз жеткізіңіз.

8 -қадам: Javascript файлын жасаңыз

Соңында біз JavaScript файлын жасаймыз. Бұл біздің сайтты интерактивті етеді. Мәтіндік редакторды ашып, келесіні теріңіз:

document.querySelector («#түймесі»). addEventListener («шерту», функция () {

document.querySelector («#heading»). innerText = «Тақырыпты өзгерту»

})

Біз не істеп жатырмыз, құжаттан идентификатор түймесі бар элементті табуды сұраймыз, және біз түйменің идентификаторы бар элементтердің мәтінін «Тақырыпты өзгерту» дегенге өзгерту арқылы түймені басу оқиғасына жауап береміз. «. Файлды 1 -қадамда біз жасаған қалтаға button.js ретінде сақтаңыз.

9 -қадам: Javascript пен индекс файлдарын байланыстырыңыз

Біз style.css файлында болғандай, индекс.html файлымызға JavaScript файлы туралы айтуымыз керек. Біз жасаған барлық нәрсенің астына төмендегілерді теріңіз:

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

10 -қадам: Жаңа құрылған түймені тексеріңіз

Енді жалғастырыңыз және түймені басыңыз және тақырыптың өзгеруін қараңыз!

Құттықтаймын !! Сіз қазір бірінші интерактивті веб -бетті құрдыңыз! Бір қызығы, сіз білетін нәрсеңізді біле отырып, оны қаншалықты ары қарай жалғастыра аласыз?