Vytvorenie prvého webu: 10 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:57

V tomto návode sa naučíte vytvárať základnú webovú stránku, ktorá bude obsahovať prepojený štýl a interaktívny súbor JavaScript.

Krok 1: Vytvorenie priečinka

Vytvorte priečinok, do ktorého sa budú ukladať súbory, ktoré vytvoríme. Neváhajte ho pomenovať, ako chcete, pamätajte si, kde sa nachádza, pretože do neho budeme neskôr ukladať súbory.

Krok 2: Vytvorenie prvého súboru

Otvorte svoj obľúbený textový editor. V mojom prípade budem jednoducho používať vstavaný poznámkový blok systému Windows 10. Akonáhle budete mať nový súbor, zadajte nasledujúci príkaz:

Toto je moja prvá webová stránka, ktorú vám priniesol návod

Toto je známe ako značka HTML. Znamená to nadpis 1. Text, ktorý vložíme do tejto značky, sa na stránke zobrazí ako nadpis. Takto sa otvára a zatvára. Vo webovom prehliadači sa zobrazí text medzi týmito dvoma značkami. Časť, ktorá hovorí, dáva tejto značke atribút, na ktorý sa budeme odvolávať v kroku x. Akonáhle to urobíte, pokračujte a uložte súbor do priečinka, ktorý sme vytvorili v kroku 1, ako index.html.

Krok 3: Otvorte súbor

Teraz, keď sme skončili, prejdite na súbor v priečinku, ktorý sme vytvorili, kliknite naň pravým tlačidlom myši, zvoľte možnosť „otvoriť pomocou“a zvoľte webový prehliadač, ktorý používate. V mojom prípade je to Google Chrome. Teraz sa pozrite na doterajšiu náročnú prácu!

Krok 4: Upravte štýl svojej stránky

Náš web je celkom jednoduchý. Pridáme to, čo je známe ako kaskádový štýl, aby sme to trocha okorenili. Vytvorte nový textový súbor a zadajte nasledujúci príkaz:

h1 {farba: modrá; zarovnanie textu: na stred;}

Čo tu prehliadaču hovoríme, je nájsť akýkoľvek prvok v značke h1 (o ktorej sme sa dozvedeli v kroku 2) a dať mu modrú farbu a zarovnať ho v strede stránky. Tento súbor uložte do priečinka, ktorý sme vytvorili v kroku 1, ako style.css.

Krok 5: Prepojte súbor Style.css so svojím indexom.html

V tomto mieste máme dva samostatné súbory, ktoré o sebe nevedia. Musíme nášmu súboru index.html povedať, že máme súbor style.css, na ktorý chceme odkazovať, a vziať z neho nejaký štýl. Za týmto účelom otvoríme náš súbor index.html v textovom editore a nad značku h1 pridáme to, čo je známe ako značka odkazu. Značka odkazu funguje tak, ako to naznačuje jeho menovec, na niečo odkazuje. V našom prípade šablóna štýlov. Pokračujte a píšte. Značka odkazu je samouzatváracia značka, takže koncová značka nie je potrebná. Rel znamená vzťah a href hovorí indexovému súboru, kde sa nachádza náš externý súbor, na ktorý odkazujeme. Teraz uložte tento súbor index.html.

Krok 6: Zobrazte svoju novo štylizovanú stránku

Zopakujte krok 3, znova načítajte svoju webovú stránku a pozrite sa, ako sa zmeny prejavia.

Krok 7: Vytvorenie tlačidla

Znova otvorte súbor index.html v textovom editore a zadajte nasledujúci príkaz:

Klikni na mňa!

a uložte súbor. Na stránke sa tak vytvorí prvok tlačidla. Po uložení súbor znova otvorte podľa kroku 3 a uistite sa, že sa tlačidlo nachádza v ľavej dolnej časti stránky.

Krok 8: Vytvorte súbor Javascript

Nakoniec vytvoríme náš javascriptový súbor. Vďaka tomu bude naša stránka interaktívna. Otvorte textový editor a zadajte nasledujúci príkaz:

document.querySelector („tlačidlo#“). addEventListener („kliknutie“, funkcia () {

document.querySelector ("#nadpis"). innerText = "Zmena nadpisu za behu"

})

Čo robíme, je, aby sme v dokumente našli prvok s ID tlačidla, a my necháme tlačidlo reagovať na udalosť kliknutia zmenou textu prvku s ID smeru na „Zmena nadpisu za behu “. Uložte súbor ako button.js do priečinka, ktorý sme vytvorili v kroku 1.

Krok 9: Prepojte súbory Javascript a Index

Rovnako ako v prípade súboru style.css, musíme svojmu súboru index.html povedať o našom súbore javascript. V spodnej časti pod všetkým, čo sme doteraz urobili, zadajte nasledujúci príkaz:

Značka skriptu nám umožňuje pridať skriptovací jazyk (v našom prípade javascript), aby poskytoval funkčnosť našej stránke. Hovoríme mu, aby vyhľadal súbor s názvom button.js a pridal všetok kód v ňom obsiahnutý do nášho indexového súboru. Akonáhle to zadáte, uložte súbor a znova ho otvorte, ako je to uvedené v kroku 3.

Krok 10: Otestujte novo vytvorené tlačidlo

Teraz pokračujte, kliknite na tlačidlo a sledujte, ako sa nadpis zmení!

Gratulujem !! Teraz ste vytvorili svoju prvú interaktívnu webovú stránku! Zaujímalo by ma, ako ďaleko by ste to mohli posunúť s vedomím toho, čo viete teraz ??