Paglikha ng Iyong Unang Website: 10 Hakbang

2025 May -akda: John Day | [email protected]. Huling binago: 2025-01-23 15:13

Sa tutorial na ito matututunan mong bumuo ng isang pangunahing web page na may naka-link na sheet ng estilo at interactive na javascript file.

Hakbang 1: Paglikha ng Iyong Folder

Lumikha ng isang folder para maiimbak ang mga file na gagawin namin. Huwag mag-atubiling pangalanan ito subalit mangyaring, alalahanin lamang kung saan ito matatagpuan sapagkat magse-save kami ng mga file dito sa ibang pagkakataon.

Hakbang 2: Paglikha ng Iyong Unang File

Buksan ang iyong paboritong text editor. Sa aking kaso gagamitin ko lang ang built in na notepad ng Windows 10. Kapag mayroon kang isang bagong pag-type ng file up ang sumusunod:

Ito ang aking unang web page, dinala sa iyo ng isang nagtuturo

Ito ang kilala bilang isang HTML tag. Ito ay nangangahulugang Pamagat 1. Ang teksto na inilagay namin sa loob ng tag na ito ay lalabas bilang isang heading sa pahina. Ito ay binubuksan at sarado tulad nito. Ang teksto sa pagitan ng dalawang mga tag ay kung ano ang ipapakita sa iyong web browser. Ang bahaging nagsasabing binibigyan ang tag na iyon ng isang katangian na aming isangguni sa hakbang x. Kapag tapos na iyon sige at i-save ang file sa folder na ginawa namin sa hakbang 1 bilang index.html.

Hakbang 3: Buksan ang File

Ngayon na nakumpleto namin ang pag-navigate sa file sa loob ng folder na nilikha namin, i-right click ang file at piliin ang opsyong "buksan gamit" at piliin ang web browser na iyong ginagamit. Sa aking kaso ito ay ang google chrome. Ngayon tingnan ang mga pinaghirapan ng iyong pagsusumikap hanggang ngayon!

Hakbang 4: Pag-istilo ng Iyong Pahina

Tulad ng, ang aming website ay medyo payak. Kami ay magdaragdag kung ano ang kilala bilang isang cascading style sheet upang pagandahin ang mga bagay nang kaunti. Lumikha ng isang bagong file ng teksto at i-type ang sumusunod:

h1 {kulay: asul; text-align: center;}

Ang sinasabi namin sa browser dito ay upang makahanap ng anumang elemento sa isang h1 tag (na natutunan namin tungkol sa hakbang 2) at bigyan ito ng isang kulay ng asul at ihanay ito sa gitna ng pahina. I-save ang file na ito sa folder na nilikha namin sa hakbang 1 bilang style.css.

Hakbang 5: I-link ang Style.css sa Iyong Index.html

Sa puntong ito mayroon kaming dalawang magkakahiwalay na mga file na hindi alam ang tungkol sa bawat isa. Kailangan naming sabihin sa aming index.html file na mayroon kaming isang style.css file na nais naming ito ay mag-refer at kumuha ng ilang estilo mula sa. Upang magawa ito ay bubuksan namin ang aming index.html file sa aming text editor, at sa itaas ng aming h1 tag ay idaragdag namin ang kilala bilang isang link tag. Ginagawa ang link tag tulad ng ipinahihiwatig ng namesake nito, naka-link ito sa isang bagay. Sa aming kaso isang styleheet. Sige at magtype. Ang link tag ay isang pansarang pagsasara ng tag kaya hindi kinakailangan ang isang nagtatapos na tag. Ang rel ay kumakatawan sa pagkakaugnay at sinasabi ng href ang index file kung saan matatagpuan ang aming panlabas na file na tinutukoy namin. I-save ngayon ang file na index.html.

Hakbang 6: Tingnan ang Iyong Bagong Naka-istilong Pahina

Bisitahin muli ang hakbang 3 at i-reload ang iyong web page at tingnan kung paano sumasalamin ang mga pagbabago.

Hakbang 7: Lumilikha ng isang Button

Muling buksan ang iyong index.html file sa iyong text editor at i-type ang sumusunod:

Pindutin mo ako!

at i-save ang file. Lumilikha ito ng isang elemento ng pindutan sa pahina. Kapag nai-save, muling buksan ang file tulad ng ipinakita sa hakbang 3 at tiyakin na ang pindutan ay nasa ibabang kaliwang bahagi ng iyong pahina.

Hakbang 8: Lumikha ng Iyong Javascript File

Panghuli lilikha kami ng aming javascript file. Ito ang gagawing interactive ang aming site. Magbukas ng isang text editor at i-type ang sumusunod:

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

document.querySelector ("# heading"). panloob na Text = "Pagbabago ng heading sa mabilisang"

})

Ang ginagawa namin ay humihiling sa dokumento na hanapin kami ng isang elemento na may ID ng pindutan, at magkakaroon kami ng pindutan na tumugon sa isang kaganapan sa pag-click sa pamamagitan ng pagbabago ng isang teksto ng mga elemento na may ID ng heading sa "Pagbabago ng heading nang mabilis ". I-save ang file bilang button.js sa folder na nilikha namin sa Hakbang 1.

Hakbang 9: I-link ang Iyong Javascript at Mga File ng Index

Tulad ng ginawa namin sa style.css file, kailangan naming sabihin sa aming index.html file tungkol sa aming javascript file. Sa ilalim sa ilalim ng lahat ng aming nagawa sa ngayon i-type ang sumusunod:

Pinapayagan kami ng tag ng script na magdagdag ng isang wika ng scripting (sa aming kaso, javascript) upang magbigay ng pag-andar sa aming pahina. Sinasabi namin ito upang maghanap para sa isang file na tinatawag na button.js at idagdag ang lahat ng code na nilalaman sa loob nito sa aming index file. Kapag na-type mo na iyon, i-save ang file at buksan muli ang file tulad ng ipinakita sa hakbang 3.

Hakbang 10: Subukan ang Bagong Nilikha na Button

Ngayon sige at i-click ang pindutan at panoorin ang pagbabago ng heading!

Binabati kita !! Nilikha mo na ang iyong unang interactive web page! Nagtataka ako kung magkano pa ang maaari mong gawin na alam kung ano ang alam mo ngayon ??