Bare Bones -verkkosivu: 10 vaihetta

2025 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2025-01-23 14:44

Tänään aiomme luoda hyvin yksinkertaisen, paljaan luun verkkosivun tyhjästä. Puhumme HTML -elementeistä, verkkosivustosi muotoilusta (värit, fontit, tasaus jne.) Ja lopulta siitä, miten voit lisätä kuvan verkkosivullesi!

Tämän ohjeen loppuun mennessä sinulla on perustaidot verkkosivun luomiseen tyhjästä ja huomaat, että koodaus ei ole niin vaikeaa kuin miltä se näyttää!

Vaihe 1: Muistion käyttäminen

Aiomme käyttää Notepadia Windowsissa ensimmäisen verkkosivumme luomiseen. Vaikka mikä tahansa tekstieditori tekee, muistilehtiö on esiasennettu Windows-koneisiin, joten se on hyvä lähtökohta.

Voit avata muistikirjan siirtymällä näytön vasemmassa alakulmassa olevaan hakupalkkiin ja kirjoittamalla "Muistio". Valitse sitten "Muistio" -sovellus, joka tulee hakutuloksiin. Uusi ikkuna pitäisi avata.

Vaihe 2: HTML -perusasiakirjapuun lisääminen

Kaikkien verkkosivujen on noudatettava vakiorunkorakennetta, jotta selaimesi (Chrome, Firefox, Edge, Internet Explorer, Safari …) voi käsitellä ja näyttää verkkosivusi.

Tätä kutsutaan html -dokumenttipuuksi. Kirjoita Muistiossa html "elementit" tai "tunnisteet", kuten näyttökuvassa näkyy. Voit myös kopioida ja liittää:

Vaihe 3: Tallentaminen.html -sivuna

Nyt kun meillä on html -perusrakenne Notepadissa, tallennetaan se, jotta emme menetä töitä, ja jotta voimme nähdä muutokset edistyessämme Instructable -tietä pitkin.

1. Valitse 'Tiedosto'> 'Tallenna nimellä …' (Kuvakaappaus 1)
2. Vaihda tiedostotyypiksi Kaikki tiedostot (kuvakaappaus 2)
3. Anna tiedostollesi haluamasi nimi. Muista merkitä mihin tallennat asiakirjan tietokoneellesi, jotta voit avata sen myöhemmin. HUOMAUTUS: Tärkein osa tämän tiedoston tallentamisesta on liittää.html tiedostonimen loppuun. Näin tietokoneesi voi tunnistaa sen verkkosivuksi. Joten jos haluat antaa tiedostollesi nimen "my_webpage", muista lisätä.html sen loppuun, esim. "my_webpage.html"

Vaihe 4: Otsikon lisääminen verkkosivullesi

Meillä on siis html -perusrakenne, jota verkkoselaimet voivat tulkita ja näyttää verkkosivumme, mutta meillä ei ole sisältöä. Muutetaan se!

Ensimmäinen asia, jonka meidän pitäisi tehdä, on antaa Web -sivullemme otsikko. Useimmilla verkkosivuilla on otsikko. Tämä näkyy selaimesi välilehdessä (katso kuvakaappaus). Aion antaa verkkosivulleni otsikon "Taylorin verkkosivusto". Tätä varten meidän on lisättävä otsikkoelementti.

Taylorin verkkosivusto

Tässä vaiheessa huomaat, että jokaisella tunnisteella on "avaava" ja "sulkeva" -tunniste. Kuten

ja.

Tämä on erottaa, mistä otsikko alkaa ja mihin se päättyy. Lähes kaikki html -tunnisteet noudattavat tätä, mutta on joitain poikkeuksia.

Vaihe 5: Sisällön lisääminen verkkosivullesi

Meillä on Web -sivullemme otsikko, mutta meillä ei vielä ole varsinaista sisältöä sille. Lisätään hieman hohtoa!

Olemme lisänneet verkkosivullemme otsikon käyttämällä otsikkoelementtiä. Annetaan verkkosivullemme iso, huomiota herättävä otsikko käyttämällä otsikkoelementtiä 'h1'.

Taylorin verkkosivusto

Tervetuloa sivuilleni

Vaihe 6: Tarkastellaan muutoksiamme tähän mennessä

Meillä on otsikko, meillä on sisältöä. Katsotaanpa verkkosivullamme, miten se on mennyt tähän mennessä.

1. Tallenna tiedosto muistilehtiöön
2. Siirry kohtaan, johon tallensit tiedoston ja kaksoisnapsauta sitä. Sen pitäisi avautua automaattisesti oletusselaimessasi. Hyvältä näyttää!

Vaihe 7: Kappaletunnisteen lisääminen

Meillä on otsikko, otsikko, lisätään nyt kappale, jossa on enemmän tekstiä. Kappaleen elementin nimi on 'p'. Sen käytön näet alta:

Taylorin verkkosivusto

Tervetuloa sivuilleni

Tänään opimme luomaan tämän hyvin yksinkertaisen verkkosivun!

Huomautus: Voit tarkastella muutoksia milloin haluat tallentamalla muistikirjan ja avaamalla tiedoston.

Vaihe 8: Anna sille väriä

Verkkosivumme ovat käynnissä, mutta se on melko yksinkertainen. Annetaan kappaleetunnisteellemme väriä!

Voimme värittää erilaisia elementtejä lisäämällä 'style' -attribuutin p -tunnisteeseen alla kuvatulla tavalla:

Taylorin verkkosivusto

Tervetuloa sivuilleni

Tänään opimme luomaan tämän hyvin yksinkertaisen verkkosivun!

Vaihe 9: Kuvan lisääminen

Mikä on verkkosivusto ilman kuvia? Lisäämme kuvan verkkosivuillemme!

Ensimmäinen askel on löytää kuva, josta pidät. Etsin kultaista noutajaa google -kuvilla. Vedä kuva ylös ja varmista, että URL -osoite päättyy muotoon.jpg,.png,.gif,-j.webp

Kun olet valinnut kuvan, meidän on lisättävä se html -sivulle käyttämällä img -tagia. Kuvani on:

Lisää se sivullesi käyttämällä img -tunnistetta, jossa on src -attribuutti:

Taylorin verkkosivusto

Tervetuloa sivuilleni

Tänään opimme luomaan tämän hyvin yksinkertaisen verkkosivun!

Vaihe 10: Lopputuotteen tarkasteleminen

Tallenna muistikirjatiedosto ja avaa lopullinen tuote. Sinun pitäisi nähdä verkkosivusi!