Krijimi i Uebfaqes suaj të Parë: 10 Hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:15

Në këtë tutorial do të mësoni të ndërtoni një faqe bazë në internet që ka një fletë stili të lidhur dhe skedar ndërveprues javascript.

Hapi 1: Krijimi i dosjes suaj

Krijoni një dosje për skedarët që do të krijojmë për tu ruajtur. Mos ngurroni ta emërtoni ashtu siç dëshironi, thjesht mbani mend se ku ndodhet sepse ne do t'i ruajmë skedarët më vonë.

Hapi 2: Krijimi i skedarit tuaj të parë

Hapni redaktorin tuaj të preferuar të tekstit. Në rastin tim, unë thjesht do të përdor fletoren e integruar të Windows 10. Pasi të keni një skedar të ri, shkruani sa vijon:

Kjo është uebfaqja ime e parë, e sjellë tek ju nga një udhëzues

Kjo është ajo që njihet si një etiketë HTML. Ai qëndron për Titullin 1. Teksti që vendosim brenda kësaj etikete do të shfaqet si titull në faqe. Ajo hapet dhe mbyllet kështu. Teksti midis dy etiketave është ai që do të shfaqet në shfletuesin tuaj të internetit. Pjesa që thotë po i jep asaj etikete një atribut të cilin do ta referojmë në hapin x. Pasi të bëhet kjo, vazhdoni dhe ruani skedarin në dosjen që kemi bërë në hapin 1 si index.html.

Hapi 3: Hapni skedarin

Tani që kemi përfunduar lundrimin në skedarin brenda dosjes që kemi krijuar, klikoni me të djathtën në skedar dhe zgjidhni opsionin "hap me" dhe zgjidhni shfletuesin e uebit që përdorni. Në rastin tim ky është google chrome. Tani shikoni punët e punës suaj të palodhur deri më tani!

Hapi 4: Stilimi i faqes tuaj

Siç është, faqja jonë e internetit është mjaft e thjeshtë. Ne do të shtojmë atë që njihet si një fletë stili kaskadues për t'i erëzuar gjërat pak. Krijoni një skedar të ri teksti dhe shkruani sa vijon:

h1 {ngjyra: blu; rreshtimi i tekstit: qendra;}

Ajo që ne po i themi shfletuesit këtu është të gjejë ndonjë element në një etiketë h1 (për të cilën mësuam në hapin 2) dhe t'i jepni një ngjyrë blu dhe ta rreshtoni atë në qendër të faqes. Ruajeni këtë skedar në dosjen që krijuam në hapin 1 si style.css.

Hapi 5: Lidheni Style.css me Indeksin tuaj. Html

Në këtë pikë ne kemi dy skedarë të veçantë që nuk dinë për njëri -tjetrin. Ne duhet t'i tregojmë skedarit tonë index.html që kemi një skedar style.css të cilit duam t'i referohet dhe të marrim ndonjë stilim. Për ta bërë këtë ne do të hapim skedarin tonë index.html në redaktuesin tonë të tekstit, dhe mbi etiketën tonë h1 ne do të shtojmë atë që njihet si një etiketë lidhjeje. Etiketa e lidhjes bën ashtu siç nënkupton emri i saj, ajo lidhet me diçka. Në rastin tonë një fletë stili. Shkoni përpara dhe shkruani. Etiketa e lidhjes është një etiketë vetë mbyllëse, kështu që një etiketë përfundimi nuk kërkohet. Rel qëndron për lidhje dhe href po tregon skedarin indeks ku ndodhet skedari ynë i jashtëm të cilit po i referohemi. Tani ruani atë skedar index.html.

Hapi 6: Shikoni faqen tuaj të stilizuar rishtas

Rishikoni hapin 3 dhe ngarkoni faqen tuaj në internet dhe hidhini një sy sesi reflektojnë ndryshimet.

Hapi 7: Krijimi i një butoni

Hapni skedarin tuaj index.html në redaktuesin tuaj të tekstit dhe shkruani sa vijon:

Kliko mua!

dhe ruani skedarin. Kjo krijon një element butoni në faqe. Pasi të jeni ruajtur, rihapni skedarin siç tregohet në hapin 3 dhe sigurohuni që butoni të jetë në anën e poshtme të majtë të faqes tuaj.

Hapi 8: Krijoni skedarin tuaj Javascript

Së fundmi ne do të krijojmë skedarin tonë javascript. Kjo është ajo që do ta bëjë faqen tonë interaktive. Hapni një redaktues teksti dhe shkruani sa vijon:

document.querySelector ("#button"). addEventListener ("kliko", funksioni () {

document.querySelector ("#titulli"). innerText = "Ndryshimi i titullit në fluturim"

})

Ajo që ne po bëjmë është të kërkojmë që dokumenti të na gjejë një element me ID -në e butonit, dhe ne do të kemi që butoni t'i përgjigjet një ngjarjeje klikimi duke ndryshuar një tekst të elementeve me ID -në e titullit në "Ndryshimi i titullit në fluturim ". Ruani skedarin si button.js në dosjen që kemi krijuar në Hapin 1.

Hapi 9: Lidhni skedarët tuaj Javascript dhe Indeksi

Ashtu siç bëmë me skedarin style.css, ne duhet t'i tregojmë skedarit tonë index.html për skedarin tonë javascript. Në fund nën gjithçka që kemi bërë deri më tani shkruani sa vijon:

Etiketa e shkrimit na lejon të shtojmë një gjuhë skriptimi (në rastin tonë, javascript) për të siguruar funksionalitetin në faqen tonë. Ne po i themi që të kërkojë një skedar të quajtur button.js dhe të shtojë të gjithë kodin që gjendet brenda tij në skedarin tonë të indeksit. Pasi ta keni shtypur atë, ruani skedarin dhe hapeni përsëri skedarin siç tregohet në hapin 3.

Hapi 10: Provoni butonin e krijuar rishtas

Tani vazhdoni dhe klikoni butonin dhe shikoni ndryshimin e titullit!

Urime !! Tani keni krijuar faqen tuaj të parë interaktive në internet! Pyes veten sa më tej mund ta çoni duke ditur atë që dini tani ??