Izrada vaše prve web stranice: 10 koraka

2025 Autor: John Day | [email protected]. Zadnja promjena: 2025-01-23 14:47

U ovom ćete vodiču naučiti izgraditi osnovnu web stranicu koja ima povezanu tablicu stilova i interaktivnu javascript datoteku.

Korak 1: Stvaranje mape

Izradite mapu za datoteke koje ćemo stvoriti za pohranu. Slobodno ga imenujte kako god želite, samo zapamtite gdje se nalazi jer ćemo kasnije spremati datoteke u njega.

Korak 2: Stvaranje vaše prve datoteke

Otvorite svoj omiljeni uređivač teksta. U mom slučaju jednostavno ću koristiti ugrađenu bilježnicu sustava Windows 10. Nakon što podignete novu datoteku, upišite sljedeće:

Ovo je moja prva web stranica koju vam donosi instruktor

To je ono što je poznato kao HTML oznaka. Označava naslov 1. Tekst koji stavimo unutar ove oznake prikazat će se kao naslov na stranici. Otvara se i zatvara ovako. Tekst između dvije oznake je ono što će se prikazati u vašem web pregledniku. Dio koji kaže daje toj oznaci atribut koji ćemo referencirati u koraku x. Kad to učinite, nastavite i spremite datoteku u mapu koju smo napravili u 1. koraku kao index.html.

Korak 3: Otvorite datoteku

Sada kada smo dovršili, idite do datoteke u mapi koju smo stvorili, desnom tipkom miša kliknite datoteku i odaberite opciju "otvori s", a zatim odaberite web preglednik koji koristite. U mom slučaju ovo je google chrome. Sada pogledajte trud vašeg dosadašnjeg rada!

Korak 4: Stilizirajte svoju stranicu

Naša web stranica je prilično jednostavna. Dodati ćemo ono što je poznato kao kaskadni stilski list kako bismo malo začinili stvari. Izradite novu tekstualnu datoteku i upišite sljedeće:

h1 {boja: plava; poravnavanje teksta: središte;}

Ovdje poručujemo pregledniku da pronađe bilo koji element u oznaci h1 (o čemu smo saznali u 2. koraku) i da mu damo plavu boju i poravnamo je u sredini stranice. Spremite ovu datoteku u mapu koju smo stvorili u 1. koraku kao style.css.

Korak 5: Povežite Style.css sa svojim Index.html

U ovom trenutku imamo dvije odvojene datoteke koje ne poznaju jedna drugu. Moramo reći našoj datoteci index.html da imamo datoteku style.css na koju želimo da se odnosi i iz nje uzeti neki stil. Da bismo to učinili, otvorit ćemo datoteku index.html u našem uređivaču teksta, a iznad naše oznake h1 dodat ćemo ono što je poznato kao oznaka veze. Oznaka veze radi baš kao što imenjak implicira, povezuje se s nečim. U našem slučaju stilsku tablicu. Samo napiši. Oznaka veze je oznaka koja se sama zatvara pa završna oznaka nije potrebna. Rel znači relacija, a href govori indeksnoj datoteci gdje se nalazi naša vanjska datoteka na koju se pozivamo. Sada spremite tu datoteku index.html.

Korak 6: Pregledajte svoju novu stranicu

Ponovite korak 3 i ponovo učitajte svoju web stranicu i pogledajte kako se promjene odražavaju.

Korak 7: Stvaranje gumba

Ponovno otvorite datoteku index.html u uređivaču teksta i upišite sljedeće:

Klikni me!

i spremite datoteku. Ovo stvara gumb gumb na stranici. Nakon spremanja, ponovno otvorite datoteku kao što je prikazano u koraku 3 i provjerite je li gumb u donjem lijevom dijelu vaše stranice.

Korak 8: Izradite svoju Javascript datoteku

Na kraju ćemo stvoriti našu javascript datoteku. To će našu stranicu učiniti interaktivnom. Otvorite uređivač teksta i upišite sljedeće:

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

document.querySelector ("#heading"). innerText = "Mijenjanje naslova u hodu"

})

Ono što radimo je tražiti od dokumenta da nam pronađe element s ID -om gumba, a gumb ćemo odgovoriti na događaj klika promjenom teksta elemenata s ID -om naslova u "Promjena naslova u hodu" ". Spremite datoteku kao button.js u mapu koju smo stvorili u 1. koraku.

Korak 9: Povežite svoje Javascript i indeksne datoteke

Kao što smo učinili s datotekom style.css, moramo našoj datoteci index.html reći o našoj javascript datoteci. Na dnu ispod svega što smo do sada učinili upišite sljedeće:

Oznaka skripte omogućuje nam dodavanje skriptnog jezika (u našem slučaju, javascript) za pružanje funkcionalnosti našoj stranici. Govorimo mu da potraži datoteku pod nazivom button.js i doda sav kôd koji se u nju nalazi u našu indeksnu datoteku. Nakon što ste to upisali, spremite datoteku i ponovo je otvorite kao što je prikazano u koraku 3.

Korak 10: Testirajte novonastali gumb

Sada samo naprijed, kliknite gumb i gledajte promjenu naslova!

Čestitamo!! Sada ste stvorili svoju prvu interaktivnu web stranicu! Pitam se koliko ste još mogli podnijeti znajući ono što sada znate ??