Izdelava lastne spletne strani za začetnike: 5 korakov

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

Ne glede na to, ali ste kdaj sanjali o tem, da bi bili računalniški programer, ali ste kdaj uporabljali spletno mesto, kar je res, smo skoraj vsi mi, informacijska tehnologija je postala hrbtenica poslovanja. Čeprav se lahko programiranje sprva zdi nekoliko strašljivo, je moj cilj, da vas naučim osnovnih osnov spletnega oblikovanja, tako da boste po tej vadnici lahko ustvarili svojo lastno spletno stran. S tem s poti, pojdimo na to!

Zaloge

• Računalnik Macintosh ali Windows (čeprav je mogoče uporabiti tudi distribucije Linuxa, jih za zdaj preskočim, saj je to uvod za začetnike).
• Urejevalnik besedila po vaši izbiri (Beležnica v sistemu Windows, TextEdit v računalniku Mac) ali izbira IDE. Po mojih izkušnjah sem ugotovil, da Visual Studio Code najbolje deluje zame, zato priporočam, da ga preverite tudi tukaj: https://code.visualstudio.com/ da ne omenjam, da deluje na vseh platformah OS.

1. korak: Oznake in nekaj zgodovine

Ko se odločite za izbiro urejevalnika besedil ali IDE, začnimo z osnovami.

Verjemite ali ne, HTML ali HyperText Markup Language obstaja že skoraj 30 let in z vsakim letom je prišlo do vse več izboljšav jezika. Morda se sprašujete, kako brskalnik razlaga, kaj naj prikaže na zaslonu? To se naredi v nekaj delih:

Oblikovanje dokumentov HTML je preprosto. Imate dva dela, znana kot glava in telo. Vodja spletnega mesta vsebuje kodo, ki je uporabniku ni vidna. To se uporablja za povezovanje slogovnih listov in razglasitev drugih potrebnih delov, ki so potrebni za pravilno prikazovanje spletnega mesta. Po glavi je telo, kot se sliši, telo spletnega mesta. Tukaj lahko govorite svoj glas in občinstvu pokažete svoje fantastične spretnosti HTML! Sedaj ni tako preprosto, kot da v telo vnesete besedilo in ga prikažete tako, kot želite, vendar je v določenem smislu skoraj tako enostavno z uporabo stvari, ki jih imenujemo oznake.

Tu je nekaj osnovnih oznak HTML:

• naslov - ki brskalniku pove, kakšen je naslov strani. To je tudi tisto, kar vidite, ko pogledate zavihek spletne strani.
• h1, h2, h3, h4 - ki se uporabljajo za različne velikosti glav, pri čemer je h1 največji, h4 pa najmanjši. Več o tem bom obravnaval v naslednjem razdelku.
• p - odstavek, ki se uporablja za pisanje odstavkov besedila. Kot odstavki na papirju.
• br - break, ki vstavi prelom v skladu z besedilom.
• a - uporablja se za ustvarjanje povezav do drugih strani, na primer povezave, ki jo je mogoče klikniti.
• img - uporablja se za povezavo slike s spletno stranjo.
• ul, ol, li - neurejeni seznami, urejeni seznami in postavke na seznamu.
• - uporablja se za vstavljanje komentarjev v kodo, ki jih končni uporabnik ne vidi.

In tukaj je nekaj oznak CSS (vizualno):

• barva - uporablja se za dodelitev posebne barve določenemu elementu ali nastavitvi na spletni strani.
• font-size-uporablja se za spreminjanje velikosti pisave na strani.
• barva ozadja-uporablja se za spreminjanje barve ozadja določenega elementa ali celotne strani.

Priložil sem tudi majhen list goljufanja, ki vam bo pomagal, če se boste počutili nekoliko izgubljene, vendar ne skrbite, saj se boste tega hitro rešili! Poleg tega je www.w3schools.com tudi odličen vir za vsa vaša programska vprašanja. Vsekakor so mi tudi prihranili čas.

V bistvu je brskalnik branje datoteke preprost. Gre vrstica za vrstico in obdeluje funkcijo za funkcijo. Znaki se uporabljajo za razglasitev oznake, kot je

in se uporabljajo za zapiranje oznake, kot so

. To je pomembno, sicer se brskalnik ne ustavi. Vmes med

in

oznake, kjer vnesete, kar želite!

2. korak: Nastavitev urejevalnika

Zdaj, ko smo obravnavali osnovne elemente spletnega mesta HTML, se potopimo in preizkusimo sami. Za naslednji korak bom za programiranje spletnega mesta uporabil Visual Studio Code, vendar bo postavitev kode enaka, če vam bo lažje uporabljati samo Notepad ali TextEdit.

V beležnici:

• Z beležnico se program zažene s prazno datoteko, zaradi česar je zelo enostavno začeti. To nam bo omogočilo tudi nekaj korakov v primerjavi z uporabo VS kode. Začnimo s shranjevanjem datoteke v pravilni obliki.
• Kliknite Datoteka> Shrani
• Vnesite ime datoteke, ki mu sledi.html in pod možnostjo Shrani kot vrsto izberite vse datoteke. Kliknite shrani.

V kodi VS:

• Najboljši način, da izkoristite vse funkcije IDE, je, da začnete tako, da ustvarite datoteko in poveste IDE, za kakšno vrsto datoteke gre. To je mogoče storiti na naslednji način:
• Kliknite Datoteka> Nova datoteka
• Odpre se prazna datoteka
• Nato boste morali datoteko shraniti, čeprav prazno, saj bo tako IDE lahko razumel, kakšno vrsto datoteke bo končni izdelek. Ko shranjujete, na koncu imena datoteke vključite razširitev.html. Kliknite shrani.

3. korak: Načrti

Ko uspešno shranite datoteko filename.html, začnimo z ustvarjanjem okvira za našo spletno stran. Od zgoraj si zapomnite, katere ključne dele datoteke moramo prijaviti, preden lahko začnemo z ustvarjanjem preostale strani HTML. Nasvet: pri zagonu ogrodja za spletno mesto oznaka HTML! DOCTYPE brskalniku pove, da je datoteka, ki jo bere, datoteka html. To vam lahko pride prav, če imate v isti datoteki različne vrste kode in želite preklapljati med tolmači. Za področje uporabe tega navodila se tega ne bomo preveč dotikali, če pa vas po tem navodilu zanima, če želite izvedeti več o razvoju HTML, ga poskusite. Za najboljšo prakso bom na vrh datoteke vstavil oznako! DOCTYPE HTML. Ne pozabite odpreti in zapreti.

Tukaj je priročno shranjevanje datoteke, preden začnete s programiranjem, zdaj, ko IDE ve, da deluje z datoteko HTML, bo uporabil intellisense za dokončanje izraza in ponudbo predlogov, da ne boste pomotoma pozabili zapreti oznake. Upoštevajte, da za tiste, ki uporabljate beležnico, intellisense ni na voljo kot v IDE. Začnemo z vnosom oznak glave in telesa na naslednji način: (glej drugo sliko).

Zdaj, ko je nastavitev dokumenta končana, se lahko odpravimo na dirke in se zabavamo!

4. korak: Koda; Koda; Koda;

Začnemo lahko z vstavljanjem naslova za novo ustvarjeno datoteko. Vnesite, kar želite. Ne pozabite, da je to ime, ki se prikaže na zavihku brskalnika. Začnimo tudi z vnosom naslova našega spletnega mesta. Spomnite se od prej, kako to počnemo. Sem slišal h1/2/3/4? To je pravilno!

Preden nadaljujemo, se mi zdi koristno odpreti datoteko v oknu brskalnika, da bomo v realnem času videli, kako se naše spremembe odražajo v brskalniku. To lahko storite tako, da kliknete Datoteka> Shrani, da shranite datoteko, se pomaknete do mape, v kateri je shranjena datoteka HTML, zame je to namizje, in odprite datoteko z izbranim brskalnikom, ali bi to pogledali, tu je vaša spletna stran! Opomba: Osebno uporabljam brskalnik Safari na svojem računalniku, vendar je pri spletnem razvoju Firefox zlati standard brskalnika za testiranje, saj deluje s skoraj vsemi skriptnimi jeziki.

Kot lahko vidite, je naslov prikazan na zavihku, prav tako pa je viden naš naslov h1. Raje imam, da se okno brskalnika datoteke odpre skupaj z IDE, saj ko spremenite IDE in shranite, so spremembe v brskalniku takojšnje.

Poskusite dodati oznake in se poigrajte z različnimi stvarmi, ki jih lahko počnete s HTML -jem. Kot lahko vidite spodaj, sem na Instructables.com dodal nekaj odstavkov, prelomov, zunanjo hiperpovezavo, sliko (ki je lahko povezana iz zunanjega vira ali v istem imeniku, kjer je shranjena datoteka. HTML), primer neurejenega seznama, urejenega seznama in nazadnje komentar.

Če želite poskusiti dodati nekaj barv in možnosti razporeditve, lahko vnesete oznako sloga v glavo datoteke. To je točka, ko se to premakne iz HTML -ja v CSS, vendar bom zaradi vizualnega vidika vnesel nekaj vrstic, da boste lahko videli, kako to deluje. V bistvu deluje CSS, saj vam omogoča nadzor elementov HTML znotraj funkcij z oklepaji {} za vnos kode za določen element HTML.

5. korak: Zadnje misli

In tu ste; uspešno ste ustvarili svojo prvo spletno stran! Ker je to vodnik za začetnike, želim, da vaša prva izkušnja s HTML -jem postane prijetna. Po mojih izkušnjah se je najbolje naučiti, da se potopite in preizkusite stvari, vidite, kaj lahko naredite s svojo kodo, pa tudi, kako jo lahko zlomite. To gradi integriteto in vam pomaga bolje razumeti, kako in zakaj koda deluje tako, kot deluje. Ne pozabite, da je www. W3Schools.com odličen vir za vprašanja in ponujajo celo virtualni peskovnik v brskalniku, da preizkusijo vašo kodo. Upajmo, da ste se kaj naučili in veselo kodiranje!