Orodha ya maudhui:
- Hatua ya 1: Kutumia Notepad
- Hatua ya 2: Kuongeza Mti wa Hati ya Msingi ya HTML
- Hatua ya 3: Kuhifadhi Kama Ukurasa wa.html
- Hatua ya 4: Kuongeza Kichwa kwenye Ukurasa wako wa Wavuti
- Hatua ya 5: Kuongeza Yaliyomo kwenye Ukurasa wako wa Wavuti
- Karibu kwenye ukurasa wangu wa wavuti
- Hatua ya 6: Kutazama Mabadiliko Yetu Hadi Sasa
- Hatua ya 7: Kuongeza Lebo ya Kifungu
- Karibu kwenye ukurasa wangu wa wavuti
- Hatua ya 8: Ipe Rangi
- Karibu kwenye ukurasa wangu wa wavuti
- Hatua ya 9: Kuongeza Picha
- Karibu kwenye ukurasa wangu wa wavuti
- Hatua ya 10: Kuangalia Bidhaa ya Mwisho
Video: Mifupa ya Bare Ukurasa wa Wavuti: Hatua 10
2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:54
Leo tutaunda ukurasa rahisi sana, wazi wa wavuti kutoka mwanzo. Tutazungumza juu ya vitu vya HTML, kuchora ukurasa wako wa wavuti (rangi, fonti, mpangilio, nk), na mwishowe jinsi ya kuingiza picha kwenye ukurasa wako wa wavuti!
Mwisho wa mafunzo haya, utakuwa na ustadi wa msingi wa kuunda ukurasa wa wavuti kutoka mwanzoni, na ugundue kuwa kuweka alama sio ngumu kama inavyoonekana!
Hatua ya 1: Kutumia Notepad
Tutatumia Notepad kwenye windows kuunda ukurasa wetu wa kwanza wa wavuti. Ingawa mhariri wowote wa maandishi atafanya, notepad inakuja imewekwa mapema kwenye mashine za Windows kwa hivyo ni hatua nzuri ya kuanza.
Ili kufungua daftari, nenda kwenye mwambaa wa utaftaji wako kwenye kona ya chini kushoto ya skrini yako na andika "Notepad". Kisha chagua programu ya "Notepad" ambayo inakuja katika matokeo ya utaftaji. Dirisha jipya linapaswa kufunguliwa.
Hatua ya 2: Kuongeza Mti wa Hati ya Msingi ya HTML
Kurasa zote za wavuti lazima zifuate muundo wa kawaida wa mifupa ili kivinjari chako cha wavuti (Chrome, Firefox, Edge, Internet Explorer, Safari…) kuchakata na kuonyesha ukurasa wako wa wavuti.
Hii inaitwa mti wa hati ya html. Katika Notepad, andika kwenye "vitu" vya html au "vitambulisho" kama inavyoonyeshwa kwenye picha ya skrini. Jisikie huru kunakili na kubandika pia:
Hatua ya 3: Kuhifadhi Kama Ukurasa wa.html
Sasa kwa kuwa tuna muundo wetu wa msingi wa html katika Notepad, wacha tuihifadhi ili tusipoteze kazi yoyote, na ili tuweze kuona mabadiliko yetu tunapoendelea pamoja na inayoweza kufundishwa.
- Chagua 'Faili'> 'Hifadhi kama …' (Picha ya skrini 1)
- Badilisha Aina ya Faili iwe 'Faili Zote' (Picha ya 2)
- Ipe faili yako jina la chaguo lako. Hakikisha kumbuka ni wapi unahifadhi hati kwenye kompyuta yako ili uweze kuifungua baadaye. Zingatia: Sehemu muhimu zaidi ya kuhifadhi faili hii inaongeza ".html" hadi mwisho wa jina la faili. Hii itaruhusu kompyuta yako kuitambua kama ukurasa wa wavuti. Kwa hivyo ikiwa unataka kutaja faili yako "my_webpage", hakikisha unaongeza.html hadi mwisho wa hiyo, n.k. "ukurasa wangu wa mtandao.html"
Hatua ya 4: Kuongeza Kichwa kwenye Ukurasa wako wa Wavuti
Kwa hivyo tuna muundo wa html wa msingi unaohitajika kwa vivinjari vya wavuti kutafsiri na kuonyesha ukurasa wetu wa wavuti, lakini hatuna yaliyomo. Wacha tubadilishe hilo!
Jambo la kwanza tunapaswa kufanya ni kutoa Kichwa kwenye ukurasa wetu wa wavuti. Kurasa nyingi za wavuti zina kichwa. Hii ndio inaonyesha kwenye kichupo kwenye kivinjari chako cha wavuti (angalia picha ya skrini). Nitaipa ukurasa wangu wa wavuti jina "Wavuti ya Taylor". Ili kufanya hivyo, tunahitaji kuongeza kipengee cha 'kichwa'.
Tovuti ya Taylor
Wakati huu utaona kuwa kila lebo ina lebo ya "kufungua" na tag ya "kufunga". Kama vile
na.
Hii ni kutambua mahali ambapo kichwa kinaanzia, na kinaishia wapi. Karibu vitambulisho vyote vya html vinafuata hii, hata hivyo kuna tofauti zingine.
Hatua ya 5: Kuongeza Yaliyomo kwenye Ukurasa wako wa Wavuti
Kweli, tunayo Kichwa cha ukurasa wetu wa wavuti, lakini bado hatuna yaliyomo. Wacha tuongeze uzuri!
Tumeongeza kichwa kwenye ukurasa wetu wa wavuti kwa kutumia kipengee cha 'kichwa'. Wacha tupe ukurasa wetu wa wavuti kichwa kikubwa cha kuvutia, kwa kutumia kipengee cha 'h1' ambacho ni kichwa cha kichwa.
Tovuti ya Taylor
Karibu kwenye ukurasa wangu wa wavuti
Hatua ya 6: Kutazama Mabadiliko Yetu Hadi Sasa
Tuna kichwa, tuna yaliyomo, wacha tuangalie ukurasa wetu wa wavuti jinsi inavyokuja hadi sasa.
- Hifadhi faili yako kwenye notepad
- Nenda mahali umehifadhi faili yako na ubonyeze mara mbili. Inapaswa kufunguliwa kiatomati katika kivinjari chako chaguomsingi cha wavuti. Unaonekana mzuri!
Hatua ya 7: Kuongeza Lebo ya Kifungu
Tunayo kichwa, kichwa, sasa wacha tuongeze aya na maandishi mengine. Jina la kipengee cha aya ni 'p'. Unaweza kuona ni matumizi hapa chini:
Tovuti ya Taylor
Karibu kwenye ukurasa wangu wa wavuti
Leo tutajifunza jinsi ya kuunda ukurasa huu rahisi wa wavuti!
Kumbuka: Unaweza kuona mabadiliko yako wakati wowote upendao kwa kuhifadhi daftari na kufungua faili.
Hatua ya 8: Ipe Rangi
Tuna ukurasa wetu wa wavuti unaendelea, lakini ni wazi. Wacha tupe alama yetu ya aya rangi!
Tunaweza kupaka rangi vitu tofauti kwa kuongeza sifa ya 'mtindo' kwenye lebo ya 'p' kama ilivyoonyeshwa hapa chini:
Tovuti ya Taylor
Karibu kwenye ukurasa wangu wa wavuti
Leo tutajifunza jinsi ya kuunda ukurasa huu rahisi wa wavuti!
Hatua ya 9: Kuongeza Picha
Je! Tovuti ni nini bila picha? Wacha tuongeze picha kwenye wavuti yetu!
Hatua ya kwanza ni kupata picha ambayo unapenda. Nilitumia picha za google kutafuta retriever ya dhahabu. Vuta picha juu na uhakikishe kuwa url inaishia katika.jpg,.png,.gif,.jpg, nk.
Mara tu ukichagua picha yako, tunahitaji kuiongeza kwenye ukurasa wa html ukitumia lebo ya 'img'. Picha yangu ni:
Ongeza kwenye ukurasa wako ukitumia lebo ya 'img' na sifa ya 'src':
Tovuti ya Taylor
Karibu kwenye ukurasa wangu wa wavuti
Leo tutajifunza jinsi ya kuunda ukurasa huu rahisi wa wavuti!
Hatua ya 10: Kuangalia Bidhaa ya Mwisho
Hifadhi faili ya daftari, na ufungue bidhaa ya mwisho. Unapaswa kuona ukurasa wako wa wavuti!
Ilipendekeza:
Kudhibiti Mwangaza wa Led na Raspberry Pi na Ukurasa wa Wavuti wa Kawaida: Hatua 5
Kudhibiti Mwangaza wa Led na Raspberry Pi na Ukurasa wa wavuti wa Kawaida: Kutumia seva ya apache kwenye pi yangu na php, nilipata njia ya kudhibiti mwangaza wa mwongozo ukitumia kitelezi na ukurasa wa wavuti ulioboreshwa ambao unapatikana kwenye kifaa chochote kilichounganishwa na mtandao sawa na pi yako Kuna njia nyingi ambazo hii inaweza kuwa ac
Shabiki wa ESP8266 POV na Saa na Sasisho la Maandishi ya Ukurasa wa Wavuti: Hatua 8 (na Picha)
ESP8266 POV Shabiki Pamoja na Saa na Sasisho la Matini ya Ukurasa wa Wavuti: Hii ni kasi ya kutofautisha, POV (Uvumilivu wa Maono), Shabiki ambayo huonyesha wakati kwa vipindi, na ujumbe mfupi wa maandishi ambao unaweza kusasishwa " juu ya nzi. &Quot; Shabiki wa POV pia ni ukurasa mmoja wa wavuti ambao hukuruhusu kubadilisha maandishi haya mawili kwangu
Jinsi ya Kuunda Ukurasa Rahisi wa Wavuti Kutumia Mabano kwa Kompyuta: Hatua 14
Jinsi ya Kuunda Ukurasa Rahisi wa Wavuti Kutumia Mabano kwa Kompyuta: Utangulizi Maagizo yafuatayo yanatoa mwongozo wa hatua kwa hatua kutengeneza ukurasa wa wavuti ukitumia Mabano. Mabano ni kihariri chanzo cha msimbo na lengo kuu kwenye maendeleo ya wavuti. Iliyoundwa na Adobe Systems, ni bure na chanzo chanzo programu leseni
Kuweka Nakala kwenye Kitufe cha Ubaoklipu kwenye ukurasa wa wavuti: Hatua 5 (na Picha)
Kuweka Nakala kwenye Kitufe cha Ubaoklipu kwenye ukurasa wa wavuti: Hii inaweza kusikika kuwa rahisi, na ninaweza kuonekana kuwa mjinga kwa kuiweka kwenye Maagizo, lakini kwa kweli, sio rahisi sana. Kuna CSS, JQuery, HTML, javascript ya kupendeza, na, sawa, unajua
Unganisha Ukurasa wako wa Wavuti (Muumba wa Ukurasa wa Google) na Picasa kwenye Albamu ya Line: Hatua 5
Unganisha ukurasa wako wa wavuti (Muumba wa Ukurasa wa Google) na Picasa kwenye Albamu ya Line: Halo, hapa nitafundishwa kwanza, ifurahie! kuendelea na hii ya Kuanzisha Tovuti na Muumba wa Ukurasa wa Google