Skep u eerste webwerf: 10 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:24

In hierdie tutoriaal leer u hoe u 'n basiese webwerf met 'n gekoppelde stylblad en interaktiewe javascript -lêer kan bou.

Stap 1: Skep u gids

Skep 'n gids vir die lêers wat ons sal skep om gestoor te word. Noem dit gerus soos u wil; onthou net waar dit geleë is, want ons sal dit later stoor.

Stap 2: Skep u eerste lêer

Maak u gunsteling teksredakteur oop. In my geval gebruik ek eenvoudig die ingeboude notaboek van Windows 10. As u 'n nuwe lêer het, tik die volgende:

Dit is my eerste webblad wat deur 'n instruksie aan u gebring is

Dit staan bekend as 'n HTML -tag. Dit staan vir Opskrif 1. Die teks wat ons in hierdie etiket plaas, verskyn as 'n opskrif op die bladsy. Dit word so oopgemaak en toegemaak. Die teks tussen die twee etikette is wat in u webblaaier verskyn. Die gedeelte wat sê, gee die etiket 'n kenmerk waarna ons in stap x sal verwys. Sodra dit klaar is, stoor die lêer in die gids wat ons in stap 1 gemaak het as index.html.

Stap 3: Maak die lêer oop

Nadat ons klaar is, navigeer u na die lêer in die gids wat ons geskep het, klik met die rechtermuisknop op die lêer en kies die opsie "oop met" en kies die webblaaier wat u gebruik. In my geval is dit Google Chrome. Kyk nou na die moeite van u harde werk tot dusver!

Stap 4: Styl van u bladsy

Ons webwerf is redelik eenvoudig. Ons gaan 'n watervalende stylblad byvoeg om dinge 'n bietjie op te kikker. Skep 'n nuwe tekslêer en tik die volgende:

h1 {kleur: blou; teksbelyning: middel;}

Wat ons die blaaier hier vertel, is om enige element in 'n h1 -tag (waarvan ons in stap 2 geleer het) te vind en 'n blou kleur te gee en dit in die middel van die bladsy te pas. Stoor hierdie lêer in die gids wat ons in stap 1 geskep het as style.css.

Stap 5: Koppel die Style.css aan u Index.html

Op hierdie stadium het ons twee aparte lêers wat nie van mekaar weet nie. Ons moet ons index.html -lêer vertel dat ons 'n style.css -lêer het waarna ons wil verwys en 'n paar stilering kan kry. Om dit te kan doen, gaan ons ons index.html -lêer in ons teksredakteur oop, en bo ons h1 -etiket, voeg ons 'n skakelmerker by. Die skakelmerker doen net soos die naamgenoot dit impliseer, dit skakel na iets. In ons geval 'n stylblad. Gaan voort en tik. Die skakelmerk is 'n self -sluitende etiket, dus is 'n eindmerk nie nodig nie. Die rel staan vir relation en href vertel die indekslêer waar ons eksterne lêer waarna ons verwys, geleë is. Stoor nou die index.html -lêer.

Stap 6: Bekyk u nuut gestileerde bladsy

Gaan stap 3 weer na en herlaai u webwerf en kyk hoe die veranderinge weerspieël.

Stap 7: Skep 'n knoppie

Maak u index.html -lêer weer oop in u teksredigeerder en tik die volgende:

Klik my!

en stoor die lêer. Dit skep 'n knoppie -element op die bladsy. Sodra dit gestoor is, maak die lêer weer oop soos getoon in stap 3 en maak seker dat die knoppie links onder op u bladsy is.

Stap 8: Skep u Javascript -lêer

Laastens gaan ons ons javascript -lêer skep. Dit is wat ons webwerf interaktief sal maak. Maak 'n teksredakteur oop en tik die volgende:

document.querySelector ("#knoppie"). addEventListener ("klik", funksie () {

document.querySelector ("#heading"). innerText = "Verander die opskrif onmiddellik"

})

Wat ons doen, is om die dokument te vra om vir ons 'n element met die ID van die knoppie te vind, en ons sal die knoppie laat reageer op 'n klikgebeurtenis deur 'n elementteks met die ID van opskrif te verander na 'Verander die opskrif onmiddellik . Stoor die lêer as button.js in die gids wat ons in stap 1 geskep het.

Stap 9: Koppel u Javascript- en indekslêers

Soos met die style.css -lêer, moet ons ons index.html -lêer vertel van ons javascript -lêer. Onderaan alles wat ons tot dusver gedoen het, tik die volgende:

Met die script -tag kan ons 'n script -taal (in ons geval javascript) byvoeg om funksionaliteit aan ons bladsy te bied. Ons sê dit moet soek na 'n lêer met die naam button.js en al die kode daarin by ons indekslêer voeg. As u dit ingevoer het, stoor u die lêer en maak die lêer weer oop soos in stap 3 aangedui.

Stap 10: Toets die nuutgeskepte knoppie

Klik nou op die knoppie en kyk hoe die opskrif verander!

Baie geluk!! U het nou u eerste interaktiewe webbladsy geskep! Ek wonder hoeveel verder jy dit kan neem met die wete wat jy nou weet ??