Kreiranje prve web stranice: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:05

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

Korak 1: Kreiranje mape

Napravite 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: Kreiranje vaše prve datoteke

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

Ovo je moja prva web stranica, koju vam je donijela instrukcija

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 završili, idite do datoteke u mapi koju smo stvorili, desnom tipkom miša kliknite datoteku i odaberite opciju "otvori s" i 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. Kreirajte novu tekstualnu datoteku i upišite sljedeće:

h1 {boja: plava; poravnavanje teksta: centar;}

Ovdje poručujemo pretraživaču da pronađe bilo koji element u oznaci h1 (o čemu smo saznali u koraku 2) 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 stil. Da bismo to učinili, otvorit ćemo datoteku index.html u našem uređivaču teksta, a iznad naše h1 oznake dodati ć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 naprijed. Oznaka veze je samozaključna oznaka 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 datoteku index.html.

Korak 6: Pregledajte novu stranicu

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

Korak 7: Kreiranje dugmeta

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

Kliknite na mene!

i sačuvajte datoteku. Ovo stvara element dugmeta na stranici. Nakon spremanja, ponovo otvorite datoteku kao što je prikazano u koraku 3 i provjerite je li dugme u donjem lijevom dijelu vaše stranice.

Korak 8: Kreirajte svoju Javascript datoteku

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

document.querySelector ("dugme#"). 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 mi ćemo gumb reagirati 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 sa datotekom style.css, moramo reći našoj datoteci index.html o našoj javascript datoteci. Na dnu ispod svega što smo do sada uradili upišite sljedeće:

Oznaka script omogućava nam dodavanje skriptnog jezika (u našem slučaju javascript) kako bismo našoj stranici pružili funkcionalnost. Govorimo mu da potraži datoteku po imenu button.js i doda sav kôd koji se u nju nalazi u našu datoteku indeksa. Nakon što ste to unijeli, spremite datoteku i ponovo je otvorite kao što je prikazano u koraku 3.

Korak 10: Testirajte novostvoreno dugme

Sada idite naprijed i kliknite gumb i gledajte promjenu naslova!

Congratulations !! Sada ste stvorili svoju prvu interaktivnu web stranicu! Pitam se koliko ste još mogli izdržati znajući ono što sada znate ??