Oman verkkosivuston luominen aloittelijoille: 5 vaihetta

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

Olitpa koskaan haaveillut tietokoneohjelmoijaksi tai olet koskaan käyttänyt verkkosivustoa, joka on totta, olemme melkein kaikki meistä, tietotekniikasta on tullut liiketoiminnan selkäranka. Vaikka ohjelmointi voi aluksi tuntua hieman pelottavalta, tavoitteeni on opettaa sinulle web -suunnittelun perusasiat, jotta tämän opetusohjelman jälkeen voit tehdä oman verkkosivusi. Kun se on poissa tieltä, päästään asiaan!

Tarvikkeet

• Macintosh- tai Windows -tietokone (vaikka Linux -distroja voidaan myös käyttää, ohitan ne nyt, koska tämä on aloittelijan johdanto).
• Valitsemasi tekstieditori (Notepad Windowsissa, TextEdit Macissa) tai IDE. Kokemukseni mukaan olen havainnut, että Visual Studio Code toimii parhaiten itselleni, joten suosittelen tarkistamaan sen myös täältä: https://code.visualstudio.com/ puhumattakaan siitä, että se toimii kaikilla käyttöjärjestelmillä.

Vaihe 1: Tunnisteet ja vähän historiaa

Kun olet päättänyt valita tekstieditorin tai IDE: n, aloitetaan perusasioista.

Usko tai älä, HTML tai HyperText Markup Language on ollut olemassa lähes 30 vuotta ja joka vuosi on tullut yhä enemmän parannuksia kieleen. Nyt saatat kysyä, miten selain tulkitsee mitä ruudulle laitetaan? Tämä tehdään muutamassa osassa:

HTML -asiakirjan muotoilu on helppoa. Sinulla on kaksi osaa, joita kutsutaan pääksi ja kehoksi. Verkkosivuston pää sisältää koodin, joka ei näy käyttäjälle. Tätä käytetään tyylitaulukoiden linkittämiseen ja muiden tarvittavien bittien ilmoittamiseen, jotta sivusto voidaan näyttää oikein. Pään jälkeen keho on miltä se kuulostaa, verkkosivuston runko. Tässä voit puhua äänelläsi ja näyttää yleisölle fantastiset HTML -taitosi! Nyt ei ole niin helppoa kuin vain kirjoittaa teksti runkoon ja näyttää se haluamallasi tavalla, mutta se on melkein yhtä helppoa tietyssä mielessä käyttämällä asioita, joita kutsumme tunnisteiksi.

Tässä on joitain HTML -perustageja:

• otsikko - jota käytetään kertomaan selaimelle, mikä on sivun otsikko. Tämän näet myös, kun tarkastelet verkkosivun välilehteä.
• h1, h2, h3, h4 - joita käytetään eri otsikkokokoihin: h1 on suurin ja h4 pienin. Käsittelen tästä lisää seuraavassa osassa.
• p - kappale, jota käytetään tekstin kappaleiden kirjoittamiseen. Kuten kappaleet paperilla.
• br - break, joka lisää tauon tekstin mukaisesti.
• a - käytetään linkkien luomiseen muille sivuille, kuten napsautettava linkki.
• img - käytetään kuvan linkittämiseen verkkosivulle.
• ul, ol, li - järjestämättömät luettelot, järjestetyt luettelot ja luettelokohteet.
• - käytetään sisäänrakennettujen kommenttien tekemiseen koodissa, joita loppukäyttäjä ei näe.

Ja tässä on joitain CSS -tunnisteita (visuaalinen):

• väri - käytetään määrittämään tietty väri tietylle verkkosivun elementille tai joukolle.
• font-size-käytetään muuttamaan sivun fonttikokoa.
• taustaväri-käytetään tietyn elementin tai koko sivun taustavärin muuttamiseen.

Olen liittänyt myös pienen huijausarkin, joka auttaa sinua, jos tunnet olosi hiukan eksyneeksi, mutta älä huoli, saat sen selville hetkessä! Lisäksi www.w3schools.com on myös loistava resurssi kaikkiin ohjelmointikysymyksiin. He ovat varmasti säästäneet minulle aikaa tai myös.

Pohjimmiltaan selain lukee tiedoston helposti. Se kulkee rivi riviltä ja käsittelee toimintoa funktiona. Merkkejä käytetään tunnisteen, kuten

ja niitä käytetään tagin sulkemiseen, kuten

. Tämä on tärkeää, muuten selain ei pysähdy. Välissä

ja

Tunnisteet, voit syöttää mitä haluat!

Vaihe 2: Editorin asennus

Nyt kun olemme käsitelleet hiukan HTML -verkkosivuston peruselementtejä, sukeltaa ja kokeile sitä itse. Seuraavassa vaiheessa käytän Visual Studio Code -ohjelmaa verkkosivuston ohjelmointiin, mutta koodin asettelu on sama, jos haluat käyttää vain Notepadia tai TextEditiä.

Muistiossa:

• Muistion avulla ohjelma käynnistyy tyhjällä tiedostolla, mikä tekee aloittamisesta erittäin helppoa. Tämän avulla voimme myös hypätä muutaman askeleen verrattuna VS -koodin käyttöön. Aloitetaan tallentamalla tiedosto oikeaan muotoon.
• Napsauta Tiedosto> Tallenna
• Kirjoita tiedostollesi nimi ja sen jälkeen.html ja valitse Tallenna tyypiksi -kohdasta kaikki tiedostot. Napsauta Tallenna.

VS -koodin sisällä:

• Paras tapa hyödyntää kaikkia IDE: n ominaisuuksia on aloittaa luomalla tiedosto ja kertomalla IDE: lle, minkä tyyppinen tiedosto se on. Tämä voidaan tehdä seuraavasti:
• Napsauta Tiedosto> Uusi tiedosto
• Tyhjä tiedosto avautuu

• Seuraavaksi haluat aloittaa tallentamalla tiedoston, vaikka se on tyhjä, koska tämä mahdollistaa sen, että IDE voi ymmärtää, minkä tyyppinen tiedosto lopputuotteesta tulee. Kun tallennat, muista sisällyttää.html -laajennus tiedostonimen loppuun. Napsauta Tallenna.

Vaihe 3: Piirustukset

Kun olet tallentanut tiedostonimi.html -tiedoston, aloita luomalla kehys verkkosivullemme. Muista ylhäältä, mitkä tiedoston keskeiset osat meidän on ilmoitettava, ennen kuin voimme aloittaa muun HTML -sivun luomisen. Vinkki: kun aloitat sivuston kehyksen,! DOCTYPE HTML -tagi kertoo selaimelle, että sen lukema tiedosto on html-tiedosto. Tästä voi olla hyötyä, jos samassa tiedostossa on erityyppisiä koodeja ja haluat vaihtaa tulkkien välillä. Tämän ohjeen laajuuden vuoksi emme koske liikaa tähän, mutta jos tämän ohjeen jälkeen olet utelias tutustumaan enemmän HTML -kehitykseen, voit kokeilla sitä. Lisään! DOCTYPE HTML -tunnisteen tiedoston yläosaan parhaiden käytäntöjen saamiseksi. Muista avata ja sulkea.

Tässä on hyödyllistä tallentaa tiedosto ennen ohjelmoinnin aloittamista. Nyt kun IDE tietää, että se toimii HTML -tiedoston kanssa, se käyttää intellisenseä lausekkeen viimeistelyyn ja tarjoaa ehdotuksia, jotta et unohda vahingossa sulkea tunnistetta. Huomaa, että niille, jotka käyttävät Notepadia, intellisense ei ole käytettävissä kuten IDE: ssä. Aloitamme syöttämällä pään ja vartalon tunnisteet seuraavasti: (katso toinen kuva).

Nyt kun asiakirjojen asennus on valmis, voimme lähteä kisoihin ja pitää hauskaa!

Vaihe 4: Koodi; Koodi; Koodi;

Voimme aloittaa lisäämällä otsikon äskettäin luodulle tiedostollemme. Kirjoita mitä haluat. Muista, että tämä nimi näkyy selaimen välilehdessä. Aloitetaan myös kirjoittamalla otsikko sivustollemme. Muista aikaisemmin, miten teemme tämän. Kuulinko h1/2/3/4? Pitää paikkansa!

Ennen kuin jatkamme, on hyödyllistä avata tiedostomme selainikkunassa, jotta voimme nähdä reaaliajassa, miten muutokset heijastuvat selaimessa. Voit tehdä tämän napsauttamalla Tiedosto> Tallenna tallentaaksesi tiedoston, siirtymällä kansioon, johon HTML -tiedosto on tallennettu, minulle tämä on työpöytä ja avaa tiedosto valitsemallasi selaimella., siellä on verkkosivusi! Huomautus: Käytän henkilökohtaisesti Safaria selaimena tietokoneessani, mutta web -kehityksessä Firefox on testattava kultainen standardiselain, koska se toimii lähes kaikkien verkkoskriptikielien kanssa.

Kuten näette, otsikko näkyy välilehdessä sekä h1 -otsikkomme. Haluan, että sekä tiedoston selainikkuna avataan IDE: n rinnalla, koska kun teet muutoksia IDE: hen ja tallennat, muutokset näkyvät välittömästi selaimessa.

Voit vapaasti yrittää lisätä tunnisteita ja leikkiä eri asioilla, joita voit tehdä HTML: llä. Kuten alla näet, olen lisännyt muutamia kappaleita, taukoja, ulkoisen hyperlinkin Instructables.comiin, kuvaan (joka voidaan linkittää ulkoisesta lähteestä tai samaan hakemistoon, johon. HTML -tiedosto on tallennettu), esimerkki järjestämättömästä luettelosta, tilatusta luettelosta ja lopuksi kommentista.

Jos haluat yrittää lisätä värejä ja järjestelyvaihtoehtoja, voit kirjoittaa tyylitagin tiedoston päähän. Tämä on kohta, jossa tämä siirtyy HTML: stä CSS: ään, mutta visuaalisen vuoksi kirjoitan muutaman rivin, jotta näet kuinka tämä toimii. Pohjimmiltaan CSS toimii siten, että sen avulla voit hallita toimintojen HTML -elementtejä käyttämällä sulkeita {} syöttämällä koodisi tiettyyn HTML -elementtiin.

Vaihe 5: Viimeiset ajatukset

Ja siellä sinulla on se; olet luonut ensimmäisen verkkosivusi! Koska tämä on aloittelijan opas, haluan tehdä ensimmäisestä HTML -kokemuksestasi nautinnollisen. Paras tapa oppia kokemukseni mukaan on sukeltaa ja kokeilla asioita itse, nähdä, mitä voit tehdä koodillasi ja kuinka voit rikkoa koodisi. Tämä rakentaa eheyttä ja auttaa sinua ymmärtämään paremmin, miten ja miksi koodi toimii niin kuin se toimii. Muista, että www. W3Schools.com on loistava resurssi kysymyksiin, ja se tarjoaa jopa virtuaalisen hiekkalaatikon selaimessa koodin kokeilua varten. Toivottavasti olet oppinut jotain ja onnellista koodausta!