Algajatele oma veebisaidi loomine: 5 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

Olenemata sellest, kas olete kunagi unistanud arvutiprogrammeerijaks saamisest või olete kunagi kasutanud veebisaiti, on infotehnoloogiast saanud äri selgroog. Kuigi programmeerimine võib esialgu tunduda natuke hirmutav, on minu eesmärk õpetada teile veebidisaini põhitõdesid, nii et pärast seda õpetust saate luua oma veebisaidi. Kui see on teelt eemal, asume asja juurde!

Tarvikud

• Macintoshi või Windowsi arvuti (kuigi kasutada saab ka Linuxi distributsioone, jätan need praegu vahele, kuna see on algaja tutvustus).
• Tekstiredaktori valik (Notepad Windowsis, TextEdit Macis) või IDE valik. Olen oma kogemuste põhjal leidnud, et Visual Studio Code töötab minu jaoks kõige paremini, seega soovitaksin seda vaadata ka siit: https://code.visualstudio.com/ rääkimata sellest, et see töötab kõigil OS -i platvormidel.

Samm: sildid ja natuke ajalugu

Kui olete otsustanud oma tekstiredaktori või IDE valiku, alustame põhitõdedega.

Uskuge või mitte, kuid HTML või HyperText Markup Language on olnud kasutusel juba ligi 30 aastat ja iga aastaga on keelele lisandunud üha uusi parandusi. Nüüd võite küsida, kuidas tõlgendab brauser seda, mida ekraanile panna? Seda tehakse mõnes osas:

HTML -dokumendi vormindamine on lihtne. Teil on kaks osa, mida tuntakse pea ja kehana. Veebisaidi pea sisaldab koodi, mis pole kasutajale nähtav. Seda kasutatakse stiililehtede linkimiseks ja muude vajalike bittide deklareerimiseks, mis on vajalikud saidi õigeks kuvamiseks. Pea järel on keha selline, nagu see kõlab, veebisaidi keha. Siin saate rääkida oma häält ja näidata publikule oma fantastilisi HTML -oskusi! Nüüd pole see nii lihtne kui lihtsalt teksti sisestamine kehasse ja selle kuvamine täpselt nii, nagu soovite, kuid see on teatud mõttes peaaegu nii lihtne, kui kasutame asju, mida me nimetame siltideks.

Siin on mõned põhilised HTML -sildid:

• pealkiri - mida kasutatakse brauserile lehe pealkirja ütlemiseks. Seda näete ka veebilehe vahekaarti vaadates.
• h1, h2, h3, h4 - mida kasutatakse erinevate päise suuruste jaoks, kusjuures h1 on suurim ja h4 on väikseim. Ma räägin sellest lähemalt järgmises osas.
• p - lõik, mida kasutatakse tekstilõikude kirjutamiseks. Nagu lõiked paberil.
• br - break, mis lisab tekstiga vaheaja.
• a - kasutatakse linkide loomiseks teistele lehtedele, näiteks klikitav link.
• img - kasutatakse pildi linkimiseks veebilehega.
• ul, ol, li - järjestamata loendid, järjestatud loendid ja loendiüksused.
• - kasutatakse koodisiseste kommentaaride tegemiseks, mida lõppkasutaja ei näe.

Ja siin on mõned CSS -sildid (visuaalsed):

• värv - kasutatakse konkreetse värvi määramiseks veebilehe teatud elemendile või komplektile.
• font-size-kasutatakse lehe fondisuuruse muutmiseks.
• taustavärv-kasutatakse teatud elemendi või kogu lehe taustavärvi muutmiseks.

Olen lisanud ka väikese petulehe, et aidata teil, kui tunnete end natuke eksinud, kuid ärge muretsege, saate sellest kiiresti aru! Lisaks on www.w3schools.com ka suurepärane ressurss teie programmeerimisküsimuste jaoks. Need on mulle kindlasti aega või ka säästnud.

Põhimõtteliselt on brauseri faili lugemine lihtne. See käib rida -realt ja töötleb funktsioonide kaupa. Märke kasutatakse sellise sildi deklareerimiseks nagu

ja neid kasutatakse selliste siltide sulgemiseks nagu

. See on oluline, vastasel juhul ei leia brauser, kus peatuda. Vahepeal

ja

sildid, kuhu sisestate kõik, mida soovite!

2. toiming: redaktori seadistamine

Nüüd, kui oleme natuke käsitlenud HTML -veebisaidi põhielemente, sukeldume ja proovime seda ise. Selle järgmise sammu jaoks kasutan veebisaidi programmeerimiseks Visual Studio Code'i, kuid koodi paigutus on sama, kui teile meeldib ainult Notepad või TextEdit.

Notepadis:

• Notepadi abil käivitub programm tühja failiga, mis muudab alustamise ülilihtsaks. See võimaldab meil ka mõne sammu hüpata võrreldes VS -koodi kasutamisega. Alustuseks salvestage fail õiges vormingus.
• Klõpsake Fail> Salvesta
• Sisestage oma failile nimi, seejärel.html ja valige Salvesta tüübina kõik failid. Klõpsake nuppu Salvesta.

VS -koodi piires:

• Parim viis IDE kõigi funktsioonide kasutamiseks on alustada faili loomisest ja öelda IDE -le, mis tüüpi fail see on. Seda saab teha järgmiselt.
• Klõpsake Fail> Uus fail
• Avaneb tühi fail
• Järgmisena soovite kõigepealt faili salvestada, kuigi see on tühi, kuna see võimaldab IDE -l mõista, millist tüüpi lõpptoote fail saab olema. Salvestamisel lisage failinime lõppu kindlasti laiend.html. Klõpsake nuppu Salvesta.

3. samm: joonised

Kui olete oma failinimi.html faili edukalt salvestanud, alustame meie veebisaidi raamistiku loomisega. Pidage meeles ülevalt, millised faili peamised osad peame deklareerima, enne kui saame alustada ülejäänud HTML -lehe loomisega. Nõuanne: saidi raamistiku käivitamisel teatab HTML-silt! DOCTYPE brauserile, et loetav fail on html-fail. See võib olla kasulik, kui teil on samas failis eri tüüpi koodid ja soovite tõlke vahetada. Selle juhendi ulatuse osas ei puuduta me seda liiga palju, kuid kui pärast seda juhendamist soovite uudistada HTML -i arendamise kohta rohkem, proovige seda julgelt. Parimate tavade saamiseks sisestan faili ülaossa! DOCTYPE HTML -märgendi. Ärge unustage avada ja sulgeda.

Siinkohal tuleb kasuks faili salvestamine enne programmeerimise alustamist. Nüüd, kui IDE teab, et see töötab HTML -failiga, kasutab see avaldise lõpetamiseks ja soovituste pakkumiseks intellisense'i, et mitte unustada silte kogemata sulgeda.. Pange tähele, et neile, kes kasutavad Notepadit, pole intellisense saadaval nagu IDE -s. Alustuseks sisestame pea- ja kehamärgised järgmiselt: (vt teine pilt).

Nüüd, kui dokumentide seadistamine on lõpule viidud, saame võistlustele minna ja lõbutseda!

4. samm: kood; Kood; Kood;

Alustuseks lisame uuele failile pealkirja. Sisestage kõik, mida soovite. Pidage meeles, et see nimi kuvatakse brauseri vahekaardil. Alustame ka oma saidi pealkirja sisestamisega. Tuletagem varasemast meelde, kuidas me seda teeme. Kas ma kuulsin h1/2/3/4? See on õige!

Enne jätkamist on minu arvates kasulik avada meie fail brauseriaknas, et saaksime reaalajas näha, kuidas meie muudatused brauseris kajastuvad. Seda saate teha, klõpsates faili salvestamiseks käsul Fail> Salvesta, navigeerides kausta, kuhu HTML -fail on salvestatud, minu jaoks on see töölaud ja kasutage faili avamiseks teie valitud brauserit., seal on teie veebileht! Märkus. Mina kasutan isiklikult oma arvutis oma brauserina Safarit, kuid veebiarenduses on Firefox testimiseks kullastandard brauser, kuna see töötab peaaegu iga veebiskriptimiskeelega.

Nagu näete, kuvatakse vahekaardil pealkiri ja ka meie pealkiri h1. Ma eelistan, et IDE kõrval avatakse nii faili brauseriaken, kui IDE -s muudatuse tegemisel ja salvestamisel toimuvad muudatused brauseris kohe.

Proovige julgelt silte lisada ja mängida erinevaid asju, mida saate HTML -iga teha. Nagu allpool näete, olen lisanud mõne lõigu, katkestused, välise hüperlingi saidile Instructables.com, pildi (mille saab lingida välisest allikast või samas kataloogis, kuhu. HTML -fail on salvestatud), näide korrastamata loendist, tellitud loendist ja lõpuks kommentaarist.

Kui soovite proovida värvide ja paigutuse lisamist, saate faili päisesse sisestada stiilimärgendi. See on hetk, kus see nihkub HTML -ilt CSS -ile, kuid visuaalse huvides sisestan paar rida, et saaksite näha, kuidas see toimib. Põhimõtteliselt võimaldab see CSS -i funktsioonide HTML -elemente juhtida, kasutades sulgusid {}, et sisestada oma koodi konkreetse HTML -elemendi jaoks.

Samm: viimased mõtted

Ja seal see on; olete oma esimese veebisaidi loonud! Kuna see on algajate juhend, soovin muuta teie esimese HTML -i kogemuse nauditavaks. Parim viis minu kogemuste järgi õppimiseks on sukelduda ja asju käega katsuda, näha, mida saate oma koodiga teha, ja ka seda, kuidas saate oma koodi rikkuda. See loob terviklikkuse ja aitab teil paremini mõista, kuidas ja miks kood nii toimib. Pidage meeles, et www. W3Schools.com on suurepärane ressurss küsimuste jaoks ja nad pakuvad teie brauseris isegi virtuaalset liivakasti, et teie koodi proovida. Loodetavasti olete midagi õppinud ja rõõmsat kodeerimist!