Ensimmäisen verkkosivuston luominen: 10 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:00

Tässä opetusohjelmassa opit rakentamaan perusverkkosivun, joka sisältää linkitetyn tyylitaulukon ja interaktiivisen javascript -tiedoston.

Vaihe 1: Kansion luominen

Luo kansio luomillemme tiedostoille tallennettavaksi. Voit vapaasti nimetä sen haluamallasi tavalla, muista vain, missä se sijaitsee, koska tallennamme tiedostoja siihen myöhemmin.

Vaihe 2: Luo ensimmäinen tiedosto

Avaa suosikki tekstieditori. Minun tapauksessani käytän vain Windows 10: n sisäänrakennettua muistikirjaa. Kun sinulla on uusi tiedosto ylös, kirjoita seuraava:

Tämä on ensimmäinen verkkosivuni, jonka olen tuonut sinulle ohjeen

Tätä kutsutaan HTML -tunnisteeksi. Se tarkoittaa otsikkoa 1. Tämän tagin sisältämä teksti näkyy otsikkona sivulla. Se avataan ja suljetaan näin. Näiden kahden tunnisteen välissä oleva teksti näkyy selaimessasi. Osa, joka sanoo, antaa tälle tunnisteelle määritteen, johon viitataan vaiheessa x. Kun tämä on tehty, tallenna tiedosto vaiheessa 1 tekemäämme kansioon nimellä index.html.

Vaihe 3: Avaa tiedosto

Nyt kun olemme valmiit, siirry luomasi kansion tiedostoon, napsauta tiedostoa hiiren kakkospainikkeella ja valitse "avaa" -vaihtoehto ja valitse käyttämäsi selain. Minun tapauksessani tämä on google chrome. Katso nyt tähänastisen työsi työtä!

Vaihe 4: Sivun muotoilu

Sivustomme on muuten melko yksinkertainen. Aiomme lisätä niin kutsutun porrastetun tyylitaulukon piristämään asioita hieman. Luo uusi tekstitiedosto ja kirjoita seuraava:

h1 {väri: sininen; text-align: center;}

Tässä kerromme selaimelle, että löydämme minkä tahansa elementin h1 -tunnisteesta (josta opimme vaiheessa 2) ja annamme sille sinisen värin ja kohdistamme sen sivun keskelle. Tallenna tämä tiedosto kansioon, jonka loimme vaiheessa 1 muodossa style.css.

Vaihe 5: Linkitä Style.css -hakemistoon Index.html

Tässä vaiheessa meillä on kaksi erillistä tiedostoa, jotka eivät tiedä toisistaan. Meidän on kerrottava index.html -tiedostollemme, että meillä on style.css -tiedosto, johon haluamme viitata, ja otettava siitä tyyli. Tätä varten avaamme index.html -tiedoston tekstieditorissamme, ja lisäämme h1 -tunnisteemme yläpuolelle linkkitagin. Linkkitagi toimii aivan kuten sen nimimerkki viittaa, se linkittää johonkin. Meidän tapauksessamme tyylitaulukko. Mene eteenpäin ja kirjoita. Linkkitagi on itsestään sulkeva tunniste, joten päättötunnistetta ei tarvita. Rel tarkoittaa suhdetta ja href kertoo hakemistotiedostolle, mihin viittaamme ulkoinen tiedosto. Tallenna nyt tämä index.html -tiedosto.

Vaihe 6: Tarkastele äskettäin muotoiltua sivua

Palaa vaiheeseen 3 ja lataa verkkosivusi uudelleen ja katso, miten muutokset heijastavat.

Vaihe 7: Napin luominen

Avaa index.html -tiedosto uudelleen tekstieditorissa ja kirjoita seuraava:

Napsauta minua!

ja tallenna tiedosto. Tämä luo painike -elementin sivulle. Kun tiedosto on tallennettu, avaa se uudelleen vaiheen 3 mukaisesti ja varmista, että painike on sivusi vasemmassa alakulmassa.

Vaihe 8: Luo Javascript -tiedosto

Lopuksi aiomme luoda javascript -tiedoston. Tämä tekee sivustostamme interaktiivisen. Avaa tekstieditori ja kirjoita seuraava:

document.querySelector ("#-painike"). addEventListener ("click", function () {

document.querySelector ("#header"). internalText = "Otsikon muuttaminen lennossa"

})

Pyydämme asiakirjaa etsimään meille elementin, jolla on painikkeen tunnus, ja saamme painikkeen vastaamaan napsautustapahtumaan muuttamalla elementtitekstin, jonka otsikkotunnus on "Muuta otsikko lennossa" ". Tallenna tiedosto nimellä button.js kansioon, jonka loimme vaiheessa 1.

Vaihe 9: Linkitä Javascript- ja hakemistotiedostosi

Kuten teimme style.css -tiedoston, meidän on kerrottava index.html -tiedostostamme JavaScript -tiedostostamme. Kirjoita kaikki tähän mennessä tekemämme alareunaan seuraava:

Skriptitagin avulla voimme lisätä skriptikielen (meidän tapauksessamme javascript) toimittaaksemme sivullemme toiminnallisuuden. Kehotamme sitä etsimään tiedoston nimeltä button.js ja lisäämään sen sisältämän koodin hakemistotiedostoomme. Kun olet kirjoittanut sen, tallenna tiedosto ja avaa tiedosto uudelleen vaiheen 3 mukaisesti.

Vaihe 10: Testaa äskettäin luotu painike

Napsauta nyt painiketta ja katso otsikon muutosta!

Onnittelut!! Olet nyt luonut ensimmäisen interaktiivisen verkkosivusi! Mietin kuinka paljon pidemmälle voisit viedä sen tietäen mitä tiedät nyt ??