Ustvarjanje prve spletne strani: 10 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:03

V tej vadnici se boste naučili izdelati osnovno spletno stran, ki ima povezano slogovno listo in interaktivno datoteko javascript.

1. korak: Ustvarite svojo mapo

Ustvarite mapo za shranjevanje datotek, ki jih bomo ustvarili. Poimenujte ga, kakor koli želite, samo zapomnite si, kje se nahaja, ker bomo datoteke shranili pozneje.

2. korak: Ustvarite svojo prvo datoteko

Odprite svoj najljubši urejevalnik besedil. V mojem primeru bom preprosto uporabil vgrajeno beležnico sistema Windows 10. Ko ustvarite novo datoteko, vnesite naslednje:

To je moja prva spletna stran, ki vam jo je prinesel pouk

To je tisto, kar je znano kot oznaka HTML. To pomeni naslov 1. Besedilo, ki ga vnesemo v to oznako, bo prikazano kot naslov na strani. Takole se odpre in zapre. Besedilo med obema oznakama je tisto, kar bo prikazano v vašem spletnem brskalniku. Del, ki pravi, daje tej oznaki atribut, na katerega se bomo sklicevali v koraku x. Ko to storite, nadaljujte in shranite datoteko v mapo, ki smo jo naredili v 1. koraku, kot index.html.

Korak: Odprite datoteko

Zdaj, ko smo končali, se pomaknite do datoteke v mapi, ki smo jo ustvarili, z desno miškino tipko kliknite datoteko in izberite možnost »odpri z« ter izberite spletni brskalnik, ki ga uporabljate. V mojem primeru je to google chrome. Zdaj pa si oglejte trud svojega dosedanjega dela!

4. korak: Oblikujte svojo stran

Tako ali tako je naše spletno mesto precej preprosto. Dodali bomo tisto, kar je znano kot kaskadni slog slik, da bi nekoliko popestrili stvari. Ustvarite novo besedilno datoteko in vnesite naslednje:

h1 {barva: modra; poravnava besedila: sredina;}

Brskalniku povemo, da v oznaki h1 (o kateri smo izvedeli v 2. koraku) poišče kateri koli element in mu da modro barvo ter jo poravna na sredini strani. Shranite to datoteko v mapo, ki smo jo ustvarili v 1. koraku, kot style.css.

5. korak: Povežite Style.css s svojim Index.html

Na tej točki imamo dve ločeni datoteki, ki ne poznata drug drugega. Datoteki index.html moramo povedati, da imamo datoteko style.css, na katero se želimo sklicevati, in iz nje vzeti nekaj stilov. Če želite to narediti, bomo v urejevalniku besedil odprli datoteko index.html, nad oznako h1 pa bomo dodali tisto, kar je znano kot oznaka povezave. Oznaka povezave deluje tako, kot nakazuje njen soimenjak, povezuje se z nečim. V našem primeru slog. Kar pojdi naprej. Oznaka povezave je samozapiralna oznaka, zato zaključna oznaka ni potrebna. Rel pomeni relacija, href pa indeksni datoteki pove, kje se nahaja naša zunanja datoteka, na katero se nanašamo. Zdaj shranite to datoteko index.html.

6. korak: Oglejte si svojo novo oblikovano stran

Ponovno pojdite na tretji korak in znova naložite svojo spletno stran ter si oglejte, kako se spremembe odražajo.

7. korak: Ustvarjanje gumba

Znova odprite datoteko index.html v urejevalniku besedil in vnesite naslednje:

Klikni me!

in shranite datoteko. To ustvari element gumba na strani. Ko je datoteka shranjena, znova odprite datoteko, kot je prikazano v 3. koraku, in se prepričajte, da je gumb v spodnjem levem kotu strani.

8. korak: Ustvarite datoteko Javascript

Nazadnje bomo ustvarili našo datoteko javascript. Zaradi tega bo naše spletno mesto interaktivno. Odprite urejevalnik besedil in vnesite naslednje:

document.querySelector ("gumb#"). addEventListener ("klik", funkcija () {

document.querySelector ("#naslov"). innerText = "Spreminjanje naslova na letenje"

})

To, kar počnemo, je, da od dokumenta zahtevamo, da nam najde element z ID -jem gumba, gumb pa se bo odzval na dogodek klika tako, da besedilo elementov z ID -jem naslova spremenimo v "Spreminjanje naslova na letenje" ". Shranite datoteko kot button.js v mapo, ki smo jo ustvarili v 1. koraku.

9. korak: Povežite datoteke Javascript in Index

Kot smo storili z datoteko style.css, moramo naši datoteki index.html povedati o naši datoteki javascript. Spodaj pod vse, kar smo do sedaj naredili, vnesite naslednje:

Skriptna oznaka nam omogoča dodajanje skriptnega jezika (v našem primeru javascript) za zagotavljanje funkcionalnosti naše strani. Povemo mu, naj poišče datoteko button.js in v svojo indeksno datoteko doda vso kodo, ki jo vsebuje. Ko to vnesete, shranite datoteko in jo znova odprite, kot je prikazano v 3. koraku.

10. korak: Preizkusite novonastali gumb

Zdaj pa pojdite naprej in kliknite gumb ter opazujte spremembo naslova!

Čestitam !! Zdaj ste ustvarili svojo prvo interaktivno spletno stran! Zanima me, koliko bi lahko še storili, če veste, kaj veste zdaj ??