Esimese veebisaidi loomine: 10 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

Selles õpetuses saate teada, kuidas luua lihtsat veebilehte, millel on lingitud stiilileht ja interaktiivne javascripti fail.

Samm: kausta loomine

Looge salvestatavate failide jaoks kaust. Nimetage see julgelt, kuidas soovite, pidage lihtsalt meeles, kus see asub, sest me salvestame sinna failid hiljem.

Samm: looge oma esimene fail

Avage oma lemmik tekstiredaktor. Minu puhul kasutan lihtsalt Windows 10 sisseehitatud märkmikku. Kui olete uue faili üles kirjutanud, tippige järgmine:

See on minu esimene veebileht, mille teile juhendas

Seda nimetatakse HTML -märgendiks. See tähistab pealkirja 1. Selle märgendi sisestatud tekst kuvatakse lehel pealkirjana. See avatakse ja suletakse niimoodi. Kahe sildi vaheline tekst kuvatakse teie veebibrauseris. Osa, mis ütleb, annab sellele sildile atribuudi, millele viitame sammus x. Kui see on tehtud, jätkake ja salvestage fail 1. sammus tehtud kausta nimega index.html.

Samm: avage fail

Nüüd, kui oleme lõpetanud, liikuge loodud kausta failile, paremklõpsake faili ja valige suvand „Ava koos” ning valige kasutatav veebibrauser. Minu puhul on see google chrome. Vaadake nüüd oma senise raske töö vaeva!

4. samm: lehe kujundamine

Muide, meie veebisait on üsna lihtne. Lisame asjadele natuke vürtsi, mida nimetatakse kaskaadseks stiilileheks. Looge uus tekstifail ja tippige järgmine tekst:

h1 {värv: sinine; text-align: center;}

See, mida me siin brauserile ütleme, on leida h1 -märgendist mis tahes element (millest õppisime 2. sammus) ja anda sellele sinine värv ning joondada see lehe keskele. Salvestage see fail 1. kaustas loodud kausta nimega style.css.

Samm: linkige Style.css oma indeksiga.html

Praegu on meil kaks eraldi faili, mis ei tea üksteisest midagi. Peame oma failile index.html ütlema, et meil on fail style.css, millele soovime viidata, ja sealt stiil. Selleks avame oma tekstiredaktoris oma faili index.html ja lisame oma märgendi h1 kohale nn lingimärgendi. Lingimärgend toimib täpselt nii, nagu selle nimekaim vihjab, see viitab millelegi. Meie puhul stiilileht. Minge edasi ja tippige. Lingimärgend on isesulguv silt, nii et lõpumärgendit pole vaja. Rel tähistab suhet ja href ütleb indeksifailile, kus asub meie väline fail, millele me viitame. Nüüd salvestage see fail index.html.

Samm: vaadake oma äsja kujundatud lehte

Vaadake uuesti 3. toimingut ja laadige oma veebileht uuesti ning vaadake, kuidas muudatused kajastuvad.

7. samm: nupu loomine

Avage oma tekstiredaktoris uuesti fail index.html ja tippige järgmine tekst:

Klõpsake mind!

ja salvestage fail. See loob lehele nupuelemendi. Pärast salvestamist avage fail uuesti, nagu on näidatud 3. toimingus, ja veenduge, et nupp asub lehe vasakus alanurgas.

Samm: looge oma Javascripti fail

Lõpuks loome oma JavaScripti faili. See muudab meie saidi interaktiivseks. Avage tekstiredaktor ja tippige järgmine tekst:

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

document.querySelector ("#title"). internalText = "Pealkirja muutmine käigu pealt"

})

See, mida me teeme, on see, et me palume dokumendil leida meile nupu ID -ga element ja me laseme nupul reageerida klikkide sündmusele, muutes elemendi teksti pealkirjaga „Pealkirja muutmine käigu pealt” . Salvestage fail nimega button.js kausta, mille lõime 1. sammus.

Samm: linkige oma Javascripti ja indeksifailid

Nagu tegime faili style.css puhul, peame ka oma index.html -failile oma JavaScripti failist rääkima. Tippige allosas kõik, mida oleme seni teinud, järgmine:

Skriptimärgend võimaldab meil lisada skriptikeele (meie puhul javascript), et pakkuda meie lehele funktsionaalsust. Me käsime tal otsida faili nimega button.js ja lisada kogu selles sisalduv kood meie indeksifaili. Kui olete selle sisestanud, salvestage fail ja avage fail uuesti, nagu on näidatud punktis 3.

10. samm: katsetage äsja loodud nuppu

Nüüd minge edasi ja klõpsake nuppu ja vaadake pealkirja muutumist!

Palju õnne !! Olete nüüd loonud oma esimese interaktiivse veebilehe! Huvitav, kui palju võiksite seda edasi teha, teades seda, mida praegu teate ??