Vytvoření prvního webu: 10 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:20

V tomto tutoriálu se naučíte vytvářet základní webovou stránku, která má propojený šablonu stylů a interaktivní soubor javascript.

Krok 1: Vytvoření složky

Vytvořte složku, do které se budou ukládat soubory, které vytvoříme. Klidně si to pojmenujte, jak chcete, jen si pamatujte, kde se nachází, protože do něj budeme ukládat soubory později.

Krok 2: Vytvoření prvního souboru

Otevřete svůj oblíbený textový editor. V mém případě budu jednoduše používat vestavěný poznámkový blok systému Windows 10. Jakmile budete mít nový soubor, zadejte následující:

Toto je moje první webová stránka, kterou vám přinesl návod

Tomu se říká značka HTML. Znamená nadpis 1. Text, který vložíme do této značky, se na stránce zobrazí jako nadpis. Takto se otevírá a zavírá. Ve webovém prohlížeči se zobrazí text mezi těmito dvěma značkami. Část, která říká, dává této značce atribut, na který budeme odkazovat v kroku x. Jakmile to bude hotovo, pokračujte a uložte soubor do složky, kterou jsme vytvořili v kroku 1, jako index.html.

Krok 3: Otevřete soubor

Nyní, když jsme dokončili, přejděte k souboru ve složce, kterou jsme vytvořili, klikněte pravým tlačítkem na soubor, vyberte možnost „otevřít pomocí“a vyberte webový prohlížeč, který používáte. V mém případě je to Google Chrome. Nyní se podívejte na práci vaší dosavadní tvrdé práce!

Krok 4: Styling vaší stránky

Naše webové stránky jsou celkem přehledné. Přidáme to, co je známé jako kaskádový styl, abychom to trochu okořenili. Vytvořte nový textový soubor a zadejte následující:

h1 {barva: modrá; zarovnání textu: střed;}

Co zde prohlížeči říkáme, je najít jakýkoli prvek ve značce h1 (o které jsme se dozvěděli v kroku 2) a dát jí modrou barvu a zarovnat ji uprostřed stránky. Uložte tento soubor do složky, kterou jsme vytvořili v kroku 1, jako style.css.

Krok 5: Propojte soubor Style.css se svým indexem.html

V tomto okamžiku máme dva samostatné soubory, které o sobě navzájem nevědí. Musíme našemu souboru index.html říci, že máme soubor style.css, na který chceme odkazovat, a získat z něj styl. Za tímto účelem otevřete soubor index.html v textovém editoru a nad značku h1 přidáme to, co je známé jako odkazová značka. Značka odkazu funguje přesně tak, jak naznačuje její jmenovec, na něco odkazuje. V našem případě šablona stylů. Pokračujte a napište. Značka odkazu je samouzavírací značka, takže koncová značka není vyžadována. Rel znamená relace a href říká indexovému souboru, kde se nachází náš externí soubor, na který odkazujeme. Nyní uložte soubor index.html.

Krok 6: Zobrazte svou nově stylizovanou stránku

Znovu přejděte ke kroku 3, znovu načtěte svou webovou stránku a podívejte se, jak se změny odrážejí.

Krok 7: Vytvoření tlačítka

Znovu otevřete soubor index.html v textovém editoru a zadejte následující:

Klikni na mě!

a soubor uložte. Tím se na stránce vytvoří prvek tlačítka. Po uložení znovu otevřete soubor, jak je znázorněno v kroku 3, a ujistěte se, že je tlačítko v levé dolní části stránky.

Krok 8: Vytvořte soubor Javascript

Nakonec vytvoříme náš javascriptový soubor. Díky tomu bude náš web interaktivní. Otevřete textový editor a zadejte následující:

document.querySelector ("#tlačítko"). addEventListener ("kliknutí", funkce () {

document.querySelector ("#nadpis"). innerText = "Změna nadpisu za běhu"

})

Co děláme, je požádat dokument, aby nám našel prvek s ID tlačítka, a my budeme mít tlačítko reagovat na událost kliknutí změnou textu prvku s ID záhlaví na „Změna záhlaví za běhu “. Uložte soubor jako button.js do složky, kterou jsme vytvořili v kroku 1.

Krok 9: Propojte soubory Javascript a Index

Stejně jako u souboru style.css musíme svému souboru index.html sdělit náš soubor javascript. Dole pod vše, co jsme dosud dělali, zadejte následující:

Značka skriptu nám umožňuje přidat skriptovací jazyk (v našem případě javascript), který na naší stránce zajistí funkčnost. Říkáme mu, aby vyhledal soubor s názvem button.js a přidal veškerý kód v něm obsažený do našeho indexového souboru. Jakmile to zadáte, uložte soubor a znovu jej otevřete, jak je uvedeno v kroku 3.

Krok 10: Otestujte nově vytvořené tlačítko

Nyní pokračujte a klikněte na tlačítko a sledujte změnu nadpisu!

Gratulujeme!! Nyní jste vytvořili svou první interaktivní webovou stránku! Zajímalo by mě, o kolik dál bys to mohl zajít s vědomím toho, co teď víš ??