Izgradnja vlastite web stranice za početnike: 5 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:06

Bez obzira jeste li ikada sanjali o tome da ste računalni programer ili ste ikada koristili web stranicu, priznajmo, gotovo svi smo mi, informacijska tehnologija postala je okosnica poslovanja. Iako se isprva programiranje može činiti pomalo zastrašujućim, moj cilj je naučiti vas osnovama web dizajna kako biste nakon ovog vodiča mogli napraviti vlastitu web stranicu. Sklonimo to s puta, idemo na to!

Supplies

• Macintosh ili Windows PC (iako se mogu koristiti i Linux distribucije, zasad ih preskačem jer je ovo uvod za početnike).
• Uređivač teksta po vašem izboru (Notepad u sustavu Windows, TextEdit u sustavu Mac) ili vaš IDE. Prema mom iskustvu, otkrio sam da Visual Studio Code najbolje radi za mene, pa bih preporučio i da ga provjerite ovdje: https://code.visualstudio.com/ da ne spominjem da radi na svim OS platformama.

Korak 1: Oznake i malo istorije

Nakon što se odlučite za izbor uređivača teksta ili IDE -a, počnimo s osnovama.

Vjerovali ili ne, HTML ili jezik za označavanje hiperteksta postoji već gotovo 30 godina i sa svakom godinom dolazi sve više poboljšanja jezika. Možda se pitate kako preglednik tumači šta treba staviti na ekran? To se radi u nekoliko dijelova:

Formatiranje HTML dokumenata je jednostavno. Imate dva dela poznata kao glava i telo. Zaglavlje web stranice sadrži kôd koji nije vidljiv korisniku. Ovo se koristi za povezivanje stilova i deklariranje drugih bitnih dijelova potrebnih za pravilno prikazivanje web stranice. Prateći glavu, tijelo je kako zvuči, tijelo web stranice. Ovdje možete izgovoriti svoj glas i pokazati publici svoje fantastične HTML vještine! Sada nije tako jednostavno kao samo upisati tekst u tijelo i prikazati ga baš onako kako želite, ali to je gotovo tako jednostavno u određenom smislu s upotrebom stvari koje nazivamo oznakama.

Evo nekih osnovnih HTML oznaka:

• title - koristi se za otkrivanje naslova stranice pretraživaču. Ovo vidite i kada pogledate karticu web stranice.
• h1, h2, h3, h4 - koji se koriste za različite veličine zaglavlja, pri čemu je h1 najveći, a h4 najmanji. O ovome ću više govoriti u sljedećem odjeljku.
• p - pasus, koristi se za pisanje pasusa teksta. Kao pasusi na papiru.
• br - break, koji ubacuje prekid u skladu s tekstom.
• a - koristi se za stvaranje veza do drugih stranica, poput veze na koju se može kliknuti.
• img - koristi se za povezivanje slike sa web stranicom.
• ul, ol, li - neuređene liste, uređene liste i stavke liste.
• - koristi se za umetanje komentara u kôd koji krajnji korisnik neće vidjeti.

I evo nekoliko CSS oznaka (vizuelnih):

• boja - koristi se za dodjeljivanje određene boje određenom elementu ili postavci na web stranici.
• font-size-koristi se za promjenu veličine fonta na stranici.
• boja pozadine-koristi se za promjenu boje pozadine određenog elementa ili cijele stranice.

Priložio sam i mali cheat sheet koji će vam pomoći ako se osjećate pomalo izgubljeno, ali ne brinite, brzo ćete se snaći! Osim toga, www.w3schools.com je također fantastičan izvor za bilo koje vaše programsko pitanje. I meni su definitivno uštedjeli vrijeme.

U osnovi, preglednik čita datoteku je jednostavno. Ide red po red i obrađuje funkciju po funkciju. Znakovi se koriste za deklaraciju oznake kao što je

i koriste se za zatvaranje oznake kao što je

. Ovo je važno jer u protivnom preglednik ne može stati. Između

i

tagovi, mjesto gdje unosite sve što želite!

Korak 2: Postavljanje uređivača

Sada kada smo malo obradili osnovne elemente HTML web stranice, zaronimo i probajmo sami. Za ovaj sljedeći korak koristit ću Visual Studio Code za programiranje web stranice, ali izgled koda bit će isti ako vam bude lakše koristiti samo Notepad ili TextEdit.

Unutar Notepada:

• Uz Notepad, program se pokreće sa praznom datotekom što olakšava početak rada. Ovo će nam omogućiti i skok od nekoliko koraka u odnosu na korištenje VS koda. Započnimo spremanjem datoteke u ispravnom formatu.
• Kliknite Datoteka> Spremi
• Unesite naziv datoteke nakon čega slijedi.html, a zatim u okviru Spremi kao tip odaberite sve datoteke. Pritisnite sačuvaj.

Unutar VS koda:

• Najbolji način da iskoristite sve mogućnosti IDE -a je da kreirate tako što ćete stvoriti datoteku i reći IDE -u o kojoj se vrsti datoteke radi. To se može učiniti na sljedeći način:
• Kliknite Datoteka> Nova datoteka
• Otvara se prazna datoteka
• Zatim ćete htjeti početi spremanjem datoteke, iako prazne, jer će to omogućiti IDE -u da razumije koju vrstu datoteke će krajnji proizvod biti. Prilikom spremanja obavezno uključite.html ekstenziju na kraju naziva datoteke. Pritisnite sačuvaj.

Korak 3: Nacrti

Nakon što ste uspješno spremili datoteku filename.html, počnimo stvaranjem okvira za našu web stranicu. Sjetite se odozgo koje ključne dijelove datoteke moramo prijaviti prije nego što počnemo s kreiranjem ostatka HTML stranice. Savjet: prilikom pokretanja okvira za web lokaciju,! DOCTYPE HTML oznaka govori pregledniku da je datoteka koju čita html datoteka. Ovo može biti korisno ako imate različite vrste koda u istoj datoteci i želite se prebacivati između tumača. Za opseg ovog uputstva, nećemo se previše doticati ovoga, ali ako ste nakon ovog Instructablea znatiželjni da provjerite više o razvoju HTML -a, slobodno ga isprobajte. Umetnut ću! DOCTYPE HTML oznaku na vrh datoteke radi najbolje prakse. Ne zaboravite otvoriti i zatvoriti sa.

Evo gdje spremanje datoteke prije nego što počnete programirati dobro dođe, sada kada IDE zna da radi s HTML datotekom, upotrijebit će intellisense da dovrši izraz i ponudi prijedloge kako ne biste slučajno zaboravili zatvoriti oznaku. Imajte na umu da za vas koji koristite Notepad intellisense nije dostupna kao u IDE -u. Počinjemo unošenjem oznaka glave i tijela na sljedeći način: (vidi drugu sliku).

Sad kad je postavljanje dokumenta završeno, možemo izaći na utrke i zabaviti se!

Korak 4: Kod; Kod; Kod;

Možemo započeti umetanjem naslova za našu novostvorenu datoteku. Unesite šta god želite. Upamtite da se ovo ime pojavljuje na kartici preglednika. Počnimo i unošenjem naslova za našu web stranicu. Podsjetimo se od ranije kako to radimo. Jesam li čuo h1/2/3/4? To je tačno!

Prije nego nastavimo, smatram da bi bilo korisno otvoriti našu datoteku u prozoru preglednika kako bismo u stvarnom vremenu mogli vidjeti kako se naše promjene odražavaju u pregledniku. To možete učiniti klikom na Datoteka> Spremi da biste spremili datoteku, dolaskom do mape u kojoj je spremljena HTML datoteka, za mene je ovo radna površina i upotrijebite preglednik po svom izboru za otvaranje datoteke, a da li biste to pogledali, evo vaše web stranice! Napomena: Ja lično koristim Safari kao svoj pretraživač na svom računaru, međutim, u web razvoju, Firefox je zlatni standardni pregledač za testiranje jer radi sa gotovo svim jezicima za skriptiranje weba.

Kao što vidite, naslov se prikazuje na kartici, kao i naš naslov h1. Više volim da se i prozor preglednika datoteke otvara pored IDE -a, jer kada napravite promjenu u IDE -u i spremite, promjene su trenutne u pregledniku.

Slobodno pokušajte dodati oznake i igrati se s različitim stvarima koje možete učiniti s HTML -om. Kao što možete vidjeti u nastavku, dodao sam nekoliko odlomaka, pauza, vanjsku hipervezu na Instructables.com, sliku (koja se može povezati s vanjskog izvora ili unutar istog direktorija u kojem je pohranjena. HTML datoteka), primjer neuređene liste, uređene liste i na kraju komentar.

Ako želite pokušati dodati neke boje i opcije rasporeda, možete unijeti oznaku stila u glavu datoteke. Ovo je trenutak u kojem se ovo prebacuje s HTML -a na CSS, ali radi vizualnog unosa uvest ću nekoliko redaka kako biste vidjeli kako to funkcionira. U osnovi, CSS funkcionira jer vam omogućuje kontrolu HTML elemenata unutar funkcija pomoću zagrada {} za unos vašeg koda za određeni HTML element.

Korak 5: Završne misli

I evo ga; uspješno ste kreirali svoju prvu web stranicu! Budući da je ovo vodič za početnike, želim vaše prvo iskustvo s HTML -om učiniti ugodnim. Po mom iskustvu, najbolji način da naučite je da zaronite i isprobate stvari, vidite šta možete učiniti sa svojim kodom, kao i kako možete razbiti svoj kôd. To gradi integritet i pomaže vam da bolje razumijete kako i zašto kod funkcionira na način na koji funkcionira. Upamtite da je www. W3Schools.com odličan izvor za pitanja, pa čak nude i virtualni sandbox unutar preglednika za isprobavanje vašeg koda. Nadam se da ste nešto naučili i sretno kodiranje!