Izgradnja vlastite web stranice za početnike: 5 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:34

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, cilj mi je naučiti vas temeljnim osnovama web dizajna kako biste nakon ovog vodiča mogli izraditi vlastitu web stranicu. S tim s puta, idemo na to!

Pribor

• Macintosh ili Windows računalo (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 povijesti

Kad 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 što treba staviti na zaslon? To se radi u nekoliko dijelova:

Formatiranje HTML dokumenata je jednostavno. Imate dva dijela poznata kao glava i tijelo. Zaglavlje web stranice sadrži kôd koji nije vidljiv korisniku. Ovo se koristi za povezivanje stilskih tablica 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 - koji služi za pregledniku da kaže koji je naslov stranice. To je također ono što vidite 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 tome ću više govoriti u sljedećem odjeljku.
• p - odlomak, koristi se za pisanje odlomka teksta. Kao odlomci na papiru.
• br - break, koji unosi prijelom u skladu s tekstom.
• a - koristi se za stvaranje veza na druge stranice, poput veze na koju se može kliknuti.
• img - koristi se za povezivanje slike s web stranicom.
• ul, ol, li - neuređeni popisi, poredani popisi i stavke popisa.
• - koristi se za umetanje komentara u kôd koje krajnji korisnik neće vidjeti.

I evo nekoliko CSS oznaka (vizualnih):

• boja - koristi se za dodjeljivanje određene boje određenom elementu ili postavu 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 također je fantastičan izvor za bilo koje vaše programsko pitanje. I meni su definitivno uštedjeli vrijeme.

U biti, način na koji preglednik čita datoteku je jednostavan. Ide redak po redak i obrađuje funkciju po funkciju. Znakovi se koriste za deklaraciju oznake kao što je

a koriste se za zatvaranje oznake poput

. Ovo je važno jer preglednik ne zna gdje stati. Između

i

oznake, mjesto gdje unosite što god želite!

Korak 2: Postavljanje uređivača

Sada kada smo malo obradili osnovne elemente HTML web stranice, zaronimo i isprobajmo 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 s praznom datotekom što olakšava početak rada. To će nam također omogućiti preskočiti nekoliko koraka u odnosu na korištenje VS koda. Započnimo spremanjem datoteke u ispravnom formatu.
• Pritisnite Datoteka> Spremi
• Unesite naziv svoje datoteke nakon čega slijedi.html, a pod Spremi kao vrstu odaberite sve datoteke. Pritisnite spremi.

Unutar VS koda:

• Najbolji način da iskoristite sve značajke IDE -a je da počnete stvaranjem datoteke i reći IDE -u o kojoj se vrsti datoteke radi. To se može učiniti na sljedeći način:
• Pritisnite 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 kraj naziva datoteke. Pritisnite spremi.

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 stvaranjem ostatka HTML stranice. Savjet: pri pokretanju okvira za web mjesto, oznaka! DOCTYPE HTML govori pregledniku da je datoteka koju čita html datoteka. To vam može dobro doći ako u istoj datoteci imate različite vrste koda 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 provjeriti više o razvoju HTML -a, slobodno ga isprobajte. Za najbolju praksu umetnut ću oznaku! DOCTYPE HTML na vrh datoteke. Ne zaboravite otvoriti i zatvoriti s.

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. Započinjemo unošenjem oznaka glave i tijela na sljedeći način: (vidi drugu sliku).

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

Korak 4: Kôd; Kodirati; Kodirati;

Možemo započeti umetanjem naslova za našu novostvorenu datoteku. Unesite sve što želite. Upamtite da se ovo ime pojavljuje na kartici preglednika. Počnimo i unošenjem naslova za našu web stranicu. Prisjetite se od ranije kako to radimo. Jesam li čuo h1/2/3/4? To je toč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, kretanjem do mape u kojoj je spremljena HTML datoteka, za mene je ovo radna površina, a za otvaranje datoteke upotrijebite preglednik po svom izboru i biste li pogledali to, evo vaše web stranice! Napomena: Ja osobno koristim Safari kao svoj preglednik na svom računalu, međutim, u web razvoju, Firefox je preglednik zlatnog standarda 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 uz IDE, 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, prijeloma, 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đenog popisa, uređenog popisa i na kraju komentar.

Ako želite pokušati dodati neku boju i opcije rasporeda, možete unijeti oznaku stila u vrh datoteke. Ovo je točka u kojoj se ovo mijenja s HTML -a na CSS, ali radi vizualnog unosa uvest ću nekoliko redaka kako biste mogli vidjeti kako to funkcionira. U osnovi, CSS funkcionira jer vam omogućuje kontrolu HTML elemenata unutar funkcija pomoću zagrada {} za unos koda za određeni HTML element.

Korak 5: Završne misli

I evo ga; uspješno ste stvorili svoju prvu web stranicu! Budući da je ovo vodič za početnike, želim učiniti vaše prvo iskustvo s HTML -om ugodno. Iz mog iskustva, najbolji način za učenje je zaroniti i isprobati stvari, vidjeti što možete učiniti sa svojim kodom i vidjeti kako možete razbiti svoj kôd. To gradi integritet i pomaže vam da bolje razumijete kako i zašto kôd funkcionira na način na koji radi. Upamtite da je www. W3Schools.com izvrstan resurs 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!