Jifanye Uanzishaji wa Kidogo, Kidogo !: Hatua 10

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:48

Je! Umelazimika kubadili kazi nyingi za kijijini tangu COVID-19 ikawa kitu? Vivyo hivyo!

Kufanya kazi kutoka nyumbani na kompyuta zetu na kupitia mtandao mara nyingi inamaanisha kwamba lazima tuwe na wimbo wa tovuti nyingi za kazi, shuleni au hata… kwa kujifurahisha!

Alamisho sio kila wakati zinafanya kazi hiyo, kwa hivyo vipi juu ya kujifanya ukurasa wa mwanzo unaokufaa wewe tu, na viungo vyote unavyohitaji, na ambayo hufunguliwa kwenye kivinjari chako cha wavuti kila wakati unapoihitaji?

Hapa ndivyo utahitaji:

• Kompyuta (yetu inaendesha Windows, lakini kompyuta yoyote ya kisasa itafanya).
• Uunganisho kwa Mtandao.
• Ufungaji mpya wa mhariri wa maandishi Notepad ++.

Ukiwa tayari, wacha tuanze kutumia templeti yetu ya kuanza … au kuunda yako mwenyewe kutoka mwanzo!

Hatua ya 1: Unda Ukurasa wa Anza AU Pakua Kiolezo Chetu Kilichonaswa

Kwa wakati huu una chaguzi mbili:

1. Pakua templeti yetu iliyoboreshwa (maagizo fuata baadaye kidogo katika hatua hii) au,
2. Fuata mwongozo huu wa msingi wa kuanza; itakutembea kupitia vizuizi vya ujenzi wa ukurasa rahisi wa hatua kwa hatua - na huo ndio mwongozo tuliufuata kujenga mwanzo huu wa kawaida!

Kwa nini upendekeze mafunzo… katika mafunzo? Kazi yetu kama wawezeshaji wa MakerSpace sio tu kukuonyesha jinsi ya kufanya mambo: pia ni kukuunganisha na utamaduni wa Muumba na rasilimali zinazopatikana huko nje. Mwongozo huu ni moja wapo ya mahali ambapo wabunifu wengi wa ukurasa wa kuanza wanaanza, kwa hivyo ilikuwa na maana kushiriki nawe!

Ikiwa una muda, endelea na chaguo # 2 lakini ikiwa huna, unaweza kurejelea mwongozo wa msingi wa mwanzo baadaye! Kwa mafunzo haya, tutadhani tu unapakua templeti yetu ya kawaida! Ili kuipakua:

1. Fungua hazina yetu ya DIY_startpage kwenye Github.
2. Bonyeza kitufe kikubwa cha Msimbo wa kijani kufungua menyu kunjuzi.
3. Bonyeza kwenye Pakua ZIP kupakua faili zote za mradi.
4. Toa faili zote kutoka kwa faili ya ZIP uliyopakua tu hadi mahali unapochagua.

GitHub ni tovuti ambayo waandaaji programu na wabunifu ulimwenguni kote wanashiriki nambari zao na ubunifu na wengine: pia inakuwezesha kushirikiana na wengine kwenye miradi ya kila aina. Jambo kuu ni kwamba, ni zana nzuri kila Muumba anapaswa kujua!

Sasa anza kivinjari chako cha chaguo: Ninapenda sana Firefox, lakini templeti yetu inapaswa kufanya kazi kwa karibu kivinjari chochote cha hivi karibuni cha Wavuti ili uwe huru kutumia Edge, Chrome au Safari!

Mwishowe, fungua faili ya "DIY_startpage.html" katika kivinjari chako NA kwenye Notepad ++, na wacha tuanze kuiboresha!

Hatua ya 2: Orodhesha Zilizopendwa

Kuwa na ukurasa wa kuanza ni nzuri. Kuwa na mwanzo muhimu ni bora zaidi na hivi sasa, yetu inaonekana kuwa tupu kidogo!

Je! Ni vitu gani unaangalia mara kwa mara na unahitaji kufuatilia? Je! Unasoma webcomics gani asubuhi? Unapenda kuangalia tovuti gani ya habari? Hivi ni vitu ambavyo vinapaswa kutua kwenye mwanzo wako.

Kwa mafunzo haya, nitatumia tu vipendwa vyangu. Onyo la Spoiler, viungo vingi kutoka maktaba! Lakini pia baadhi ya Watengenezaji wangu wapendao msukumo, na burudani zingine ninazopenda. Unaweza kupata vitu vyote hapa chini na kiunga, kama mfano!

Habari na Usomaji

• Magazeti ya Dijitali
• Vitabu vya Dijitali
• Magazeti ya Dijiti

Kujifunza

• Shule za W3C
• Udemy
• Lugha za embe

Muziki

• Sikiliza Mitaa
• Mlipuaji wa Maneno
• Redio za Muziki za Jamendo

Utamaduni wa Muumba

• Msingi77
• Lumecluster
• Ukiritimba

Nilichagua vipendwa vyangu vitatu kwa kila kitengo, lakini unapaswa kuwa na uwezo wa kuchukua zaidi au chini ya hiyo bila shida - mpangilio wa ukurasa wako wa kuanza utabadilika kuwa nambari au rasilimali moja kwa moja!

Mara tu unapoorodhesha vipendwa vyako vyote, wacha tuviweke kando kwa dakika moja na tufanye kazi kutengeneza templeti yetu ya ukurasa wa generic kuwa zaidi kwako.

Hatua ya 3: Badilisha herufi yako ikufae

Anza Notepad ++, bonyeza Faili> Fungua kufungua faili yako ya "DIY_startpage.html". Unachoangalia inaonekana tofauti sana na ukurasa kwenye kivinjari chako, sivyo? Ni nambari ya ukurasa wako, na vivinjari hutafsiri nambari hiyo kuifanya iwe ya kupendeza zaidi ya macho na kufanya vitu vyote tunavyohitaji kufanya.

Nambari ya mradi wa ukurasa wetu wa mwanzo imeandikwa katika lugha mbili zinazohusiana: HTML na CSS. HTML kawaida husimamia yaliyomo kwenye ukurasa, na CSS inasimamia mwonekano wa ukurasa.

Tafuta sehemu hii ya kwanza ili kubadilisha ukurasa wako wa kuanza upendavyo:

html {

align-items: kituo; rangi: # 313131; onyesha: kubadilika; font: 22px "Courier Mpya", Courier, monospace; urefu: 100%; hakikisha-yaliyomo: katikati; margin: 0; }

Sehemu hii ya ukurasa wetu wa mwanzo inazingatia muonekano wa jumla wa vitu kwenye ukurasa wetu. Mstari:

font: 22px "Courier Mpya", Courier, monospace;

ni haswa juu ya font tunayotumia kwenye ukurasa wa mwanzo na ina vigezo viwili ambavyo hufafanua maandishi gani kwenye ukurasa wako yataonekana kama: saizi na familia ya fonti.

• saizi - Ndio hiyo "22px" ilivyo. Ukubwa wa maandishi yako kwenye skrini hufafanuliwa katika "px", fupi kwa saizi.
• font familia - Hapo ndipo tunapoorodhesha fonti ambazo tungependa kutumia. Kwa kawaida ni wazo nzuri kuorodhesha kadhaa, kutoka kwa fonti ambayo unataka kutumia familia ya generic. Fonti hizi zinategemea kivinjari unachotumia, kwa hivyo ikiwa moja haswa haipatikani, kivinjari kitajaribu inayofuata, na kadhalika.

Ukurasa wa Fonti salama za Wavuti za CSS kutoka w3schools una orodha nzuri ya mchanganyiko wa font ambao unaonekana mzuri, shikilia mtindo unaotafuta na utafanya kazi kwenye vivinjari vingi vya kisasa.

Kwa mfano, unaweza kuchukua nafasi:

"Courier Mpya", Courier, monospace;

na:

"Palatino Linotype", "Kitabu Antiqua", Palatino, serif;

au:

"Comic Sans MS", ya kulaani, bila-serif;

Hifadhi faili yako, na uburudishe ukurasa kwenye kivinjari chako ili uone mabadiliko! Je! Hupendi? Hakuna shida! Cheza karibu na Fonti salama za Wavuti za CSS mpaka utapata mchanganyiko unaopenda.

Hatua ya 4: Badilisha Nukuu ya Kichwa chako

Tafuta sehemu hii katika faili yako ya HTML:

Huu ndio mwanzo wako! Furahiya

Chagua nukuu unayopenda, na ubadilishe nambari! Kwa yangu mwenyewe, nilichagua

Mara nyingine tena kwenye uvunjaji

Mpangilio wa ukurasa wako wa kuanza unapaswa kubadilika kwa kuruka ili ulingane na nukuu yako mara tu unapopakia tena ukurasa kwenye kivinjari chako: katika Firefox, hiyo inamaanisha kubonyeza CTRL + R kwenye kibodi yako, au kubonyeza aikoni ya Pakia tena. Chagua nukuu unayopenda sasa (au chagua kitu baadaye!) Na wacha tuanze kufanya kazi kwa kubadilisha sehemu za mwanzo wako!

Hatua ya 5: Badilisha sehemu zako

Sasa kwa kuwa umepata mchanganyiko wa fonti unayopenda na unayo nukuu nzuri ya kukuhimiza, wacha tuendelee na ubadilishe sehemu zako.

Ikiwa umepakua mwanzo wetu kutoka Github, una sehemu 6 zinazoweza kubadilisha: mwongozo wa asili una 4 tu, lakini kwa kuwa sehemu zaidi na zaidi za maisha yetu zimehamia mkondoni hivi karibuni, niliendelea na kuongeza zaidi kwa hali.

Pata sehemu ya kwanza na andika tu katika kile tunachohitaji. Kama ukumbusho, sehemu yangu ya kwanza ni "Habari na Usomaji":

Na faili yako bado iko wazi katika Notepad ++, pata mstari ufuatao wa nambari:

Sehemu ya 1

na ubadilishe na kitengo katika orodha yako unadhani utatumia zaidi.

Kwa kuwa wengi wetu tumezoea kuanza kusoma nyaraka kutoka juu kushoto, hapo ndipo macho yako huenda kawaida - kwa hivyo itumie faida hiyo na uweke kwenda kwetu huko muhimu zaidi! Lakini ikiwa unatoka kwa tamaduni na mwelekeo tofauti wa kusoma, au ikiwa unafanya kazi tu tofauti, badilisha hii kukufaa. Ni ukurasa wako wa mwanzo baada ya yote: unajua kinachofaa kwako!

Kichwa cha sehemu moja chini, tano kwenda! Tafuta mstari wa nambari ambayo inasema:

Sehemu ya 2

Badili, kisha endelea kutafuta vichwa vya sehemu na ubadilishe hadi ufike mwisho wa orodha yako. Ikiwa hutumii sehemu zote, waache tu wawe! Tutafanya kusafisha kidogo mwishoni mwa mafunzo haya pia.

Mara tu ukimaliza kubadilisha sehemu, weka tu mabadiliko yako kwenye Notepad ++ na upakie upya ukurasa kwenye kivinjari chako. Vichwa vyote vya sehemu vinapaswa kuonyesha mahali ulipowaweka: sasa tunaweza kubadilisha viungo katika kila sehemu!

Hatua ya 6: Badilisha Viunga vyako

Kubadilisha viungo katika kila sehemu kunahusika kidogo lakini hakika sio ngumu sana!

Wakati huu karibu hatubadilishi tu jina la viungo, tunabadilisha pia unachoweza kufanya nao! Kila kitu katika kila sehemu kitabofyeka, unganisha kwa wavuti tofauti. Bonus, unaweza pia kuamua ikiwa unataka ifunguliwe kwenye dirisha jipya au la!

Kwanza, tafuta laini ambayo inaonekana kama:

link_one_name

Chagua kipande hicho cha "link_one_name" na ubadilishe maandishi yako mwenyewe. Kwa mfano, kiunga cha kwanza katika sehemu ya kwanza kulingana na orodha yangu kutoka hatua ya X ni "Magazeti ya Dijiti" kwa hivyo tunapata:

Magazeti ya Dijitali

Ifuatayo, wacha tufanye kazi kubadilisha kiunga! Badilisha nafasi ya "link.one" na kiungo chako cha kwanza. Kwangu, hicho kitakuwa kiunga cha magazeti yetu ya dijiti, kwa hivyo itaonekana kama:

Magazeti ya Dijitali

Hifadhi kazi yako katika kihariri cha maandishi, na upakie tena ukurasa kwenye kivinjari chako

Unapaswa sasa kuweza kubofya kiunga hicho cha kwanza ulichokiboresha. Ikiwa haikuchukua, hiyo ni sawa! Anza tena au rudisha hatua zako mpaka kiunga kifunguke wakati unabofya.

Mara baada ya kupata kiunga chako cha kwanza kufanya kazi … Kweli, unachohitaji kufanya ni kurudia hatua hizi kwa kila kiunga katika kila sehemu, mpaka uwe umebadilisha majina yote na viungo kwenye ukurasa wako wa mwanzo! Kuna moja tu ya kukamata: nafasi ni wakati unapobofya kiunga, ukurasa wako wa kuanza unapotea tu wakati kiunga kipya kinafungua kwenye kichupo kimoja au dirisha.

Sio rahisi sana… Kwa hivyo vipi juu ya kubadilisha njia ya viungo kufungua? Wacha tutumie kiunga chetu cha kwanza kama mfano! Labda unakumbuka kuwa hapa tunapoambia kivinjari chako kufungua kiunga unapobofya:

Magazeti ya Dijitali

Lakini nadhani ni nini - hapo pia ndio tunaamua jinsi kiunga kitafunguliwa! Badilisha iwe:

Magazeti ya Dijitali

Sasa hifadhi kazi yako, na upakie tena ukurasa kwenye kivinjari chako: kiunga sasa kitafunguliwa kwenye kichupo kipya ukibofya! Kwa njia hiyo unaweza kuweka ukurasa wako wa kuanza wazi wakati unahitaji.

Hatua ya 7: Ongeza Picha kwenye Ukurasa wako wa Kuanza

Sasa kwa kuwa viungo vyetu vyote vimewekwa, ni wakati wa kupamba mwanzo wetu! Template hii ina nafasi ya picha ya kawaida upande wa kulia wa skrini. Sasa rudi kwenye Notepad ++, tafuta mstari huu:

njia yote mwishoni mwa templeti. Chagua picha unayopenda, isonge kwa folda sawa na faili yako ya kuanza, na ubadilishe "library_picture.jpg" na jina la faili la picha yako. Kwa mfano, ikiwa jina la faili yangu ni "your_picture.jpg" mstari unakuwa:

Hifadhi mabadiliko yako na, tena, pakia upya ukurasa wa kuanza kwenye kivinjari chako.

Kwa kuwa msimbo wako wa kuanza na faili zako za picha ziko kwenye folda moja, picha inapaswa kupakia kiatomati unapoburudisha ukurasa. Ikiwa haikufanya hivyo, angalia jina la faili yako - kawaida ndio mahali ninapokosea!

Ukuta wa Smartphone ni mzuri sana kwa mradi huo. Kwa ujumla, picha yoyote ya wima (au kama watu wa dhana wanasema "picha ya mwelekeo wa picha" na uwiano wa 16: 9) kwa jambo hilo! Lakini mpangilio wa mwanzo wetu utabadilika bila kujali utatupa nini.

Ikiwa picha yako itajitokeza, hongera, umefanya vizuri sana!

Hatua ya 8: Kusafisha Kidogo

Ikiwa una sehemu za ziada ambazo hutumii kwa wakati huo, jisikie huru kuzifuta! Kwa mfano, wacha tuseme hutumii Sehemu ya 6. Tafuta:

• Sehemu ya 6
• Bidhaa 1
• Bidhaa 2
• Kipengee 3

Chagua na ufute mistari hii, hifadhi faili yako na uburudishe faili kwenye kivinjari chako ili kuhakikisha kuwa kila kitu kimekwenda.

Kwa kawaida hii ni hatua ambapo ninavunja kila kitu kwa sababu ninaenda haraka sana, kwa hivyo ikiwa kitu ghafla hakifanyi kazi kumbuka: pumua kwa nguvu, na utendue kile ulichofanya tu na mchanganyiko muhimu wa CTRL + Z kwenye kibodi yako!

Hatua ya 9: Kuifanya kuwa Ukurasa halisi wa Mwanzo

Sasa kwa kuwa ukurasa wa kuanza unafungua viungo vyote tunavyotaka, na inaonekana kwa njia tunayotaka ionekane, wakati wa kuifungua wakati unapoanza kivinjari chako!

Wakati huo, napenda kuweka kila kitu mbali na Desktop za Kompyuta yangu kwa kukata na kubandika folda yangu ya kuanza kwenye folda ya Hati za Windows. Kwa hivyo ikiwa umemaliza kufanya kazi kwenye ukurasa wako wa mwanzo, fanya hivyo!

Ifuatayo: uwezekano wa kivinjari chako kufungua na injini unayopenda ya utaftaji, au labda hata ukurasa tupu.

Unaweza kupata maagizo ya kubadilisha Firefox na vivinjari vingine hapa chini:

• Maagizo ya Firefox
• Maagizo ya Google Chrome
• Maagizo ya Safari
• Maagizo ya Microsoft Edge

Ukimaliza kufuata maagizo ya kivinjari chako, funga yote na uifungue tena. Ikiwa ukurasa wako wa mwanzo unaonekana wakati kivinjari chako kinazindua, umeifanya!

Ikiwa haikuchukua, pitia maagizo ya kivinjari chako tena na uhakikishe haukukosa chochote. Mbaya zaidi inakuja kuwa mbaya zaidi, kisha uanze tena kompyuta yako baada ya kuokoa kazi zako zote. Mara 9 kati ya 10, hiyo hutatua kila kitu!

Hatua ya 10: Yote Yamefanywa! Na, Je! Ungependa Kujua Zaidi?

Hongera kwa kumaliza ukurasa wako wa mwanzo! Inaweza isionekane kama mengi, lakini umejifunza tu kuweka kificho cha moja ya ujenzi muhimu wa wavuti jinsi nilivyofanya… Karibu miaka 20 iliyopita!

Ikiwa ulifurahiya hii na ungependa kujifunza zaidi juu ya kurasa za kuanza, ni shimo la sungura la kina kufuata! Hapa kuna chaguo kidogo kukusaidia kwenye safari yako ya ukurasa wa kuanza:

• Je! Ulijaribu mwongozo wa Msingi wa kuanza? Habari njema, kuna zaidi ilikotoka! Angalia miongozo mingine na / stpg / kwa msukumo zaidi na huduma za hali ya juu!
• Angalia katalogi ya Maktaba ya Jimbo la Johnson kwa vitabu kwenye HTML na CSS - na kwa kadi yako ya maktaba au e-kadi unayo idhini ya eBooks pia!
• Kadi yako ya maktaba pia inakupa ufikiaji wa Udemy, na ina madarasa kamili kabisa kwenye HTML, CSS na muundo wa wavuti pia.

Ikiwa unajivunia uumbaji wako, kwanini usichukue skrini na ushiriki nasi kupitia Twitter au Instagram na hashtag ya #jocomakes? Tunafurahi kila wakati kuona walinzi wetu wanakuja na nini!