Spletna stran Bare Bones: 10 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:07

Danes bomo ustvarili zelo preprosto spletno stran z golimi kostmi iz nič. Govorili bomo o elementih HTML, oblikovanju vaše spletne strani (barve, pisave, poravnava itd.) In na koncu o tem, kako na svojo spletno stran vstaviti sliko!

Do konca tega navodila boste imeli osnovne veščine za ustvarjanje spletne strani iz nič in odkrili, da kodiranje ni tako težko, kot se zdi!

1. korak: Uporaba Beležnice

Beležnico v oknih bomo uporabili za ustvarjanje prve spletne strani. Čeprav bo kateri koli urejevalnik besedil to naredil, je beležnica vnaprej nameščena na računalnikih Windows, zato je odlično izhodišče.

Če želite odpreti beležnico, pojdite v iskalno vrstico v spodnjem levem kotu zaslona in vnesite »Beležnica«. Nato izberite aplikacijo "Beležnica", ki se prikaže v rezultatih iskanja. Odpre se novo okno.

2. korak: Dodajanje osnovnega drevesa dokumentov HTML

Vse spletne strani morajo slediti standardni skeletni strukturi, da lahko vaš spletni brskalnik (Chrome, Firefox, Edge, Internet Explorer, Safari …) obdeluje in prikaže vašo spletno stran.

To se imenuje drevo dokumentov html. V Beležnico vnesite html "elementi" ali "oznake", kot je prikazano na posnetku zaslona. Prav tako lahko kopirate in prilepite:

3. korak: Shranite kot stran.html

Zdaj, ko imamo svojo osnovno strukturo html v Beležnici, jo shranimo, da ne izgubimo dela in da bomo lahko videli naše spremembe med napredovanjem po Instructable.

1. Izberite 'Datoteka'> 'Shrani kot …' (Posnetek zaslona 1)
2. Spremenite vrsto datoteke v »Vse datoteke« (Posnetek zaslona 2)
3. Dajte datoteki ime po vaši izbiri. Zapomnite si, kje shranjujete dokument v računalnik, da ga lahko pozneje odprete. OPOMBA: Najpomembnejši del shranjevanja te datoteke je dodajanje ".html" na konec imena datoteke. To bo vašemu računalniku omogočilo, da ga prepozna kot spletno stran. Torej, če želite poimenovati svojo datoteko "moja_spletna stran", na koncu tega dodajte.html, npr. "my_webpage.html"

4. korak: Dodajte naslov svoji spletni strani

Tako imamo osnovno strukturo html, ki jo potrebujejo spletni brskalniki za razlago in prikaz naše spletne strani, vendar nimamo nobene vsebine. To spremenimo!

Prva stvar, ki jo moramo storiti, je, da svoji spletni strani damo naslov. Večina vseh spletnih strani ima naslov. To je prikazano na zavihku v spletnem brskalniku (glejte posnetek zaslona). Svoji spletni strani bom dal naslov "Spletno mesto Taylor". Če želite to narediti, moramo dodati element 'title'.

Taylorjeva spletna stran

Na tej točki boste opazili, da ima vsaka oznaka oznako "odpiranje" in oznako "zapiranje". Kot naprimer

in.

To je za ugotovitev, kje se naslov začne in kje konča. Skoraj vse oznake html sledijo temu, vendar obstajajo nekatere izjeme.

5. korak: Dodajanje vsebine na svojo spletno stran

No, za našo spletno stran imamo naslov, vendar zanjo še vedno nimamo dejanske vsebine. Dodajva še pridih!

Na našo spletno stran smo dodali naslov z elementom 'title'. Dajmo naši spletni strani veliko glavo, ki pritegne pozornost, z uporabo elementa 'h1', ki je element naslova.

Taylorjeva spletna stran

Dobrodošli na moji spletni strani

6. korak: Oglejte si naše spremembe do sedaj

Imamo naslov, imamo nekaj vsebine, poglejmo našo spletno stran, kako napreduje do sedaj.

1. Shranite datoteko v beležnico
2. Pojdite na mesto, kjer ste shranili datoteko, in jo dvokliknite. Samodejno bi se moral odpreti v privzetem spletnem brskalniku. Dobro izgleda!

7. korak: Dodajanje oznake odstavka

Imamo naslov, naslov, zdaj pa dodajmo odstavek z nekaj besedila. Ime elementa odstavka je 'p'. Spodaj si lahko ogledate njegovo uporabo:

Taylorjeva spletna stran

Dobrodošli na moji spletni strani

Danes se bomo naučili, kako ustvariti to zelo preprosto spletno stran!

Opomba: Spremembe si lahko kadar koli ogledate tako, da shranite beležnico in odprete datoteko.

8. korak: Dajte mu nekaj barve

Naša spletna stran se že premika, vendar je precej preprosta. Dajmo naši oznaki odstavka nekaj barve!

Različne elemente lahko obarvamo tako, da oznaki 'p' dodamo atribut 'style', kot je opisano spodaj:

Taylorjeva spletna stran

Dobrodošli na moji spletni strani

Danes se bomo naučili, kako ustvariti to zelo preprosto spletno stran!

9. korak: Dodajanje slike

Kaj je spletno mesto brez slik? Dodajmo sliko na našo spletno stran!

Prvi korak je, da poiščete sliko, ki vam je všeč. Z Googlovimi slikami sem iskal zlatega prinašalca. Povlecite sliko navzgor in se prepričajte, da se URL konča na.jpg,.png,.gif,-j.webp

Ko izberete svojo sliko, jo moramo dodati na stran html z oznako 'img'. Moja slika je:

Dodajte ga na svojo stran z oznako 'img' z atributom 'src':

Taylorjeva spletna stran

Dobrodošli na moji spletni strani

Danes se bomo naučili, kako ustvariti to zelo preprosto spletno stran!

10. korak: Ogled končnega izdelka

Shranite datoteko beležnice in odprite končni izdelek. Morali bi videti svojo spletno stran!