Sukurkite savo svetainę pradedantiesiems: 5 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:46

Nesvarbu, ar kada nors svajojote būti kompiuterių programuotoju, ar kada nors naudojotės svetaine, pripažinkime, tai beveik visi mes, informacinės technologijos tapo verslo pagrindu. Nors programavimas iš pradžių gali pasirodyti šiek tiek bauginantis, mano tikslas yra išmokyti jus pagrindinių interneto dizaino pagrindų, kad po šios pamokos galėtumėte sukurti savo tinklalapį. Tai nutolę, pradėkime nuo to!

Prekės

• „Macintosh“arba „Windows“kompiuteris (nors galima naudoti ir „Linux“distribucijas, kol kas jų praleidžiu, nes tai yra pradedančiųjų įžanga).
• Jūsų pasirinktas teksto redaktorius („Notepad“sistemoje „Windows“, „TextEdit“„Mac“) arba jūsų pasirinktas IDE. Iš savo patirties pastebėjau, kad „Visual Studio Code“geriausiai tinka man, todėl taip pat rekomenduočiau jį patikrinti čia: https://code.visualstudio.com/ jau nekalbant apie tai, kad jis veikia visose OS platformose.

1 žingsnis: žymos ir šiek tiek istorijos

Nusprendę pasirinkti teksto rengyklę ar IDE, pradėkime nuo pagrindų.

Tikėkite ar ne, tačiau HTML arba „HyperText Markup Language“egzistuoja beveik 30 metų ir kasmet vis labiau tobulina kalbą. Dabar galite paklausti, kaip naršyklė interpretuoja, ką įdėti į ekraną? Tai atliekama keliomis dalimis:

HTML dokumento formatavimas yra lengvas. Jūs turite du skyrius, žinomus kaip galva ir kūnas. Svetainės viršuje yra kodas, kuris nematomas vartotojui. Tai naudojama stilių lapams susieti ir kitiems būtiniems bitams, reikalingiems tinkamam svetainės rodymui, deklaruoti. Sekant galvą kūnas yra toks, kaip skamba, svetainės kūnas. Čia jūs galite kalbėti savo balsu ir parodyti auditorijai savo fantastiškus HTML įgūdžius! Dabar tai nėra taip paprasta, kaip tiesiog įvesti tekstą į kūną ir rodyti jį taip, kaip norite, tačiau beveik taip paprasta tam tikra prasme naudoti dalykus, kuriuos mes vadiname žymėmis.

Štai keletas pagrindinių HTML žymų:

• pavadinimas - naudojamas naršyklei pasakyti, koks yra puslapio pavadinimas. Tai taip pat matoma žiūrint į tinklalapio skirtuką.
• h1, h2, h3, h4 - naudojami skirtingiems antraščių dydžiams, kai h1 yra didžiausias, o h4 - mažiausias. Daugiau apie tai aptarsiu kitame skyriuje.
• p - pastraipa, naudojama teksto pastraipoms rašyti. Kaip pastraipos ant popieriaus.
• br - break, kuris įterpia pertrauką, atitinkančią tekstą.
• a - naudojamas kuriant nuorodas į kitus puslapius, pvz., spustelėjamą nuorodą.
• img - naudojamas atvaizdui susieti su tinklalapiu.
• ul, ol, li - nesutvarkyti sąrašai, užsakyti sąrašai ir sąrašo elementai.
• - naudojamas įterpiant komentarus į kodą, kurio nematys galutinis vartotojas.

Čia yra keletas CSS žymų (vaizdinės):

• spalva - naudojama tam tikrai spalvai priskirti tam tikram tinklalapio elementui arba rinkiniui.
• šrifto dydis-naudojamas pakeisti šrifto dydį puslapyje.
• fono spalva-naudojama tam tikro elemento arba viso puslapio fono spalvai pakeisti.

Taip pat pridedu nedidelį apgaulės lapą, kuris padės jums, jei jaučiatės šiek tiek pasiklydęs, bet nesijaudinkite, greitai suprasite! Be to, www.w3schools.com taip pat yra puikus šaltinis bet kokiems programavimo klausimams. Jie tikrai sutaupė man laiko ar per daug.

Iš esmės tai, kaip naršyklė skaito failą, yra paprasta. Jis eina iš eilės ir apdoroja funkciją pagal funkciją. Simboliai naudojami žymėti tokias žymes kaip

ir yra naudojami uždaryti žymą, pvz

. Tai svarbu, nes kitaip naršyklė nežino, kur sustoti. Tarp

ir

žymės, čia įvesite viską, ko norite!

2 veiksmas: redaktoriaus sąranka

Dabar, kai šiek tiek aptarėme pagrindinius HTML svetainės elementus, pasinerkime ir išbandykime patys. Šiam kitam žingsniui aš programuosiu svetainę naudodami „Visual Studio Code“, tačiau kodo išdėstymas bus tas pats, jei jums patogiau naudoti tik „Notepad“arba „TextEdit“.

Užrašų knygelėje:

• Naudojant „Notepad“, programa paleidžiama su tuščiu failu, todėl labai lengva pradėti. Tai taip pat leis mums pereiti kelis žingsnius, palyginti su „VS Code“naudojimu. Pradėkime išsaugodami failą tinkamu formatu.
• Spustelėkite Failas> Išsaugoti
• Įveskite savo failo pavadinimą, po to.html ir skiltyje Išsaugoti kaip tipą pasirinkite visus failus. Spustelėkite išsaugoti.

Pagal VS kodą:

• Geriausias būdas pasinaudoti visomis IDE funkcijomis yra pradėti nuo failo sukūrimo ir pasakyti IDE, kokio tipo failas tai yra. Tai galima padaryti taip:
• Spustelėkite Failas> Naujas failas
• Atsidaro tuščias failas
• Tada pirmiausia norite išsaugoti failą, nors ir tuščią, nes tai leis IDE suprasti, kokio tipo failas bus galutinis produktas. Išsaugodami failo pavadinimo pabaigoje būtinai įtraukite.html plėtinį. Spustelėkite išsaugoti.

3 žingsnis: brėžiniai

Sėkmingai išsaugoję failą filename.html, pradėkime nuo mūsų tinklalapio sistemos sukūrimo. Prisiminkite iš viršaus, kokias pagrindines failo dalis turime deklaruoti, kad galėtume pradėti kurti likusią HTML puslapio dalį. Patarimas: paleidžiant svetainės struktūrą! DOCTYPE HTML žyma nurodo naršyklei, kad skaitomas failas yra html failas. Tai gali būti naudinga, jei tame pačiame faile yra skirtingų tipų kodų ir norite perjungti vertėjus. Kalbant apie šią pamokomą sritį, mes per daug to neliesime, bet jei po šios instrukcijos jums įdomu sužinoti daugiau apie HTML kūrimą, nedvejodami pabandykite. Įdėsiu! DOCTYPE HTML žymą failo viršuje, kad gautumėte geriausią praktiką. Nepamirškite atidaryti ir uždaryti.

Čia yra naudinga išsaugoti failą prieš pradedant programavimą, dabar, kai IDE žino, kad jis veikia su HTML failu, jis naudos intellisense, kad užbaigtų išraišką ir pasiūlytų pasiūlymus, kad netyčia nepamirštumėte uždaryti žymos. Atminkite, kad tiems, kurie naudoja „Notepad“, „Intellisense“nėra kaip IDE. Pirmiausia įveskite galvos ir kūno žymes taip: (žr. Antrą paveikslėlį).

Dabar, kai dokumentų sąranka buvo baigta, galime išvykti į lenktynes ir smagiai praleisti laiką!

4 žingsnis: kodas; Kodas; Kodas;

Galime pradėti įterpdami naujai sukurto failo pavadinimą. Įveskite viską, ko norite. Atminkite, kad šis vardas rodomas naršyklės skirtuke. Taip pat pradėkime įvesdami mūsų svetainės antraštę. Prisiminkime iš anksčiau, kaip tai darome. Ar girdėjau h1/2/3/4? Teisingai!

Prieš tęsdami, manau, kad naudinga atidaryti failą naršyklės lange, kad galėtume realiu laiku pamatyti, kaip mūsų pakeitimai atsispindi naršyklėje. Tai galite padaryti spustelėdami Failas> Išsaugoti, kad išsaugotumėte failą, eikite į aplanką, kuriame išsaugotas HTML failas, man tai yra darbalaukis, ir naudokite pasirinktą naršyklę, kad atidarytumėte failą., čia tavo tinklalapis! Pastaba: aš asmeniškai naudoju „Safari“kaip savo pasirinktą naršyklę savo kompiuteryje, tačiau kuriant žiniatinklį „Firefox“yra auksinė standartinė naršyklė testavimui, nes ji veikia su beveik visomis žiniatinklio scenarijų kalbomis.

Kaip matote, pavadinimas rodomas skirtuke, taip pat matoma mūsų h1 antraštė. Aš norėčiau, kad kartu su IDE būtų atidarytas ir failo naršyklės langas, nes kai pakeičiate IDE ir išsaugote, pakeitimai iš karto atsiranda naršyklėje.

Nesivaržykite pabandyti pridėti žymų ir pažaisti įvairius dalykus, kuriuos galite padaryti naudodami HTML. Kaip matote toliau, pridėjau keletą pastraipų, pertraukų, išorinės hipersaito į Instructables.com, vaizdą (kurį galima susieti iš išorinio šaltinio arba tame pačiame kataloge, kuriame saugomas. HTML failas), nesutvarkyto sąrašo, užsakyto sąrašo ir galiausiai komentaro pavyzdys.

Jei norite pabandyti pridėti spalvų ir išdėstymo parinkčių, failo galvutėje galite įvesti stiliaus žymą. Tai yra taškas, kuriame tai pereina nuo HTML prie CSS, bet vizualiai įvesiu kelias eilutes, kad galėtumėte pamatyti, kaip tai veikia. Iš esmės tai, kaip veikia CSS, leidžia valdyti funkcijų HTML elementus, naudojant skliaustus {}, kad įvestumėte konkretaus HTML elemento kodą.

5 žingsnis: paskutinės mintys

Ir štai tu turi; jūs sėkmingai sukūrėte savo pirmąjį tinklalapį! Kadangi tai yra pradedančiųjų vadovas, noriu, kad jūsų pirmoji patirtis su HTML būtų maloni. Mano patirtis rodo, kad geriausias būdas išmokti yra pasinerti ir išbandyti dalykus, pamatyti, ką galite padaryti naudodami savo kodą, ir sužinoti, kaip sulaužyti kodą. Tai ugdo vientisumą ir padeda geriau suprasti, kaip ir kodėl kodas veikia taip, kaip veikia. Atminkite, kad www. W3Schools.com yra puikus šaltinis klausimams ir netgi siūlo virtualią smėlio dėžę naršyklėje, kad išbandytų jūsų kodą. Tikimės, kad kažką išmokote ir laimingas kodavimas!