Construirea propriului site web pentru începători: 5 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:43

Fie că ați visat vreodată să fiți programator de computer sau ați folosit vreodată un site web, care să recunoaștem, suntem aproape toți, tehnologia informației a devenit coloana vertebrală a afacerilor. Deși programarea poate părea cam înfricoșătoare la început, scopul meu este să vă învăț elementele de bază ale designului web, astfel încât, după acest tutorial, să vă puteți crea propria pagină web. Cu asta în afara drumului, să ajungem la asta!

Provizii

• Un computer Macintosh sau Windows (deși distribuțiile Linux pot fi de asemenea utilizate, le omit deocamdată, deoarece aceasta este o introducere pentru începători).
• Alegerea dvs. de editor de text (Notepad pe Windows, TextEdit pe Mac) sau alegerea dvs. de IDE. Din experiența mea, am găsit Visual Studio Code care funcționează cel mai bine pentru mine, așa că aș recomanda să îl verific aici: https://code.visualstudio.com/ ca să nu mai vorbim că funcționează pe toate platformele de sistem de operare.

Pasul 1: Etichete și un pic de istorie

După ce ați decis alegerea editorului de text sau IDE, să începem cu elementele de bază.

Credeți sau nu, limbajul de marcare HTML sau HyperText există de aproape 30 de ani și cu fiecare an a apărut tot mai multe îmbunătățiri ale limbajului. Acum, s-ar putea să vă întrebați, cum interpretează un browser ce trebuie să afișeze pe ecran? Acest lucru se face în câteva părți:

Formatarea documentelor HTML este ușoară. Aveți două secțiuni cunoscute sub numele de cap și corp. Capul unui site web conține cod care nu este vizibil pentru utilizator. Aceasta este utilizată pentru legarea foilor de stil și declararea altor biți necesari pentru ca site-ul să se afișeze corect. Urmând capul, corpul este așa cum sună, corpul site-ului web. Aici poți să-ți spui vocea și să arăți publicului abilitățile tale fantastice de HTML! Acum nu este la fel de ușor ca doar să tastați text în corp și să-l afișați exact așa cum doriți, dar este aproape atât de ușor, într-un anumit sens, cu utilizarea lucrurilor pe care le numim etichete.

Iată câteva dintre etichetele HTML de bază:

• title - care este folosit pentru a spune browserului care este titlul paginii. Aceasta este, de asemenea, ceea ce vedeți când vă uitați la fila unei pagini web.
• h1, h2, h3, h4 - care sunt utilizate pentru diferite dimensiuni de antet, h1 fiind cel mai mare și h4 fiind cel mai mic. Voi acoperi mai multe despre acest lucru în secțiunea următoare.
• p - paragraf, utilizat pentru scrierea paragrafelor de text. Ca paragrafele de pe o hârtie.
• br - break, care introduce o pauză în conformitate cu textul.
• a - utilizat pentru crearea de linkuri către alte pagini, cum ar fi un link pe care se poate face clic.
• img - folosit pentru conectarea unei imagini la pagina web.
• ul, ol, li - liste neordonate, liste ordonate și articole de listă.
• - utilizat pentru a face comentarii inline în cod care nu vor fi văzute de utilizatorul final.

Iată câteva etichete CSS (vizuale):

• culoare - utilizată pentru a atribui o anumită culoare unui anumit element sau set de pe pagina web.
• font-size - folosit pentru a modifica dimensiunea fontului pe pagină.
• fundal-culoare - folosit pentru a schimba culoarea de fundal a anumitor elemente sau a întregii pagini.

Am atașat, de asemenea, o mică foaie de trucuri pentru a vă ajuta dacă vă simțiți un pic pierduți, dar să nu vă faceți griji, veți obține atenția în cel mai scurt timp! În plus, www.w3schools.com este, de asemenea, o resursă fantastică pentru oricare dintre întrebările dvs. de programare. Cu siguranță m-au salvat și un timp.

În esență, modul în care browserul citește fișierul este ușor. Merge linie cu linie și procesează funcție cu funcție. Caracterele sunt folosite pentru a declara o etichetă precum

și sunt utilizate pentru a închide eticheta, cum ar fi

. Acest lucru este important, altfel browserul nu se oprește. Între

și

etichete, este locul unde introduceți orice doriți!

Pasul 2: Configurare editor

Acum, că am discutat puțin despre elementele de bază ale unui site web HTML, hai să ne scufundăm și să încercăm noi înșine. Pentru acest pas următor, voi folosi Visual Studio Code pentru a programa site-ul web, dar aspectul codului va fi același dacă sunteți mai confortabil cu doar utilizarea Notepad sau TextEdit.

În Notepad:

• Cu Notepad, programul se lansează cu un fișier gol, ceea ce face foarte ușor să începeți. Acest lucru ne va permite, de asemenea, să sărim câțiva pași în comparație cu utilizarea codului VS. Să începem salvând fișierul în formatul corect.
• Faceți clic pe Fișier> Salvare
• Introduceți un nume pentru fișierul dvs. urmat de.html și sub Salvare ca tip, selectați toate fișierele. Faceți clic pe Salvați.

În cadrul codului VS:

• Cel mai bun mod de a profita de toate caracteristicile IDE este să începeți prin crearea fișierului și să îi spuneți IDE ce tip de fișier este. Acest lucru se poate face după cum urmează:
• Faceți clic pe Fișier> Fișier nou
• Se deschide un fișier gol
• Apoi, veți dori să începeți prin salvarea fișierului, deși gol, deoarece acest lucru va permite IDE să poată înțelege ce tip de fișier va fi produsul final. Când salvați, asigurați-vă că includeți extensia.html la sfârșitul numelui fișierului. Faceți clic pe Salvați.

Pasul 3: Planuri

După ce ați salvat cu succes fișierul filename.html, să începem prin crearea cadrului pentru pagina noastră web. Amintiți-vă de sus ce părți cheie ale fișierului trebuie să declarăm înainte să putem începe cu crearea restului paginii HTML. Pro-tip: la pornirea cadrului pentru site, eticheta! DOCTYPE HTML îi spune browserului că fișierul pe care îl citește este un fișier html. Acest lucru poate fi util dacă aveți diferite tipuri de cod în același fișier și doriți să comutați între interpreți. Pentru scopul acestui instructable, nu vom atinge prea mult acest aspect, dar dacă după acest Instructable sunteți curioși să verificați mai multe despre dezvoltarea HTML, nu ezitați să îi aruncați o imagine. Voi introduce eticheta! DOCTYPE HTML în partea de sus a fișierului pentru cele mai bune practici. Nu uitați să deschideți și să închideți cu.

Aici este util să salvați fișierul înainte de a începe programarea, acum că IDE știe că funcționează cu un fișier HTML, va folosi intelisense pentru a termina expresia și va oferi sugestii, astfel încât să nu uitați accidental să închideți o etichetă. Rețineți că pentru aceia dintre voi care utilizează Notepad, intelisense nu este disponibil ca în IDE. Începem prin a introduce etichetele pentru cap și corp după cum urmează: (vezi a doua imagine).

Acum că configurarea documentului a fost finalizată, putem să mergem la curse și să ne distrăm!

Pasul 4: Cod; Cod; Cod;

Putem începe prin inserarea unui titlu pentru fișierul nou creat. Introduceți orice doriți. Amintiți-vă că acesta este numele care apare în fila browser. Să începem, de asemenea, prin introducerea unui titlu pentru site-ul nostru. Reamintim dinainte cum facem acest lucru. Am auzit h1 / 2/3/4? Este corect!

Înainte de a continua, mi se pare util să ne deschidem fișierul într-o fereastră a browserului, astfel încât să putem vedea în timp real cum se reflectă modificările noastre în browser. Puteți face acest lucru făcând clic pe Fișier> Salvați pentru a salva fișierul, navigând la folderul în care este salvat fișierul HTML, pentru mine acesta este desktopul și utilizați browserul la alegere pentru a deschide fișierul și ați privi acest lucru, este pagina dvs. web! Notă: Eu personal folosesc Safari ca browser preferat pe computerul meu, cu toate acestea, în dezvoltarea web, Firefox este browserul standard pentru testare, deoarece funcționează cu aproape orice limbaj de scriptare web.

După cum puteți vedea, titlul este afișat în filă, precum și titlul nostru h1. Prefer ca fereastra browserului fișierului să fie deschisă alături de IDE, ca atunci când faceți o modificare în IDE și salvați, modificările sunt instantanee în browser.

Simțiți-vă liber să încercați să adăugați etichete și să vă jucați cu diferitele lucruri pe care le puteți face cu HTML. După cum puteți vedea mai jos, am adăugat câteva paragrafe, pauze, hyperlink extern la Instructables.com, o imagine (care poate fi fie legată dintr-o sursă externă, fie în același director în care este stocat fișierul. HTML), un exemplu de listă neordonată, listă ordonată și, în sfârșit, un comentariu.

Dacă doriți să încercați să adăugați câteva opțiuni de culoare și aranjament, puteți introduce o etichetă de stil în capul fișierului. Acesta este punctul în care acest lucru trece de la HTML la CSS, dar, din motive vizuale, voi introduce câteva linii, astfel încât să puteți vedea cum funcționează acest lucru. În esență, modul în care funcționează CSS vă permite să controlați elemente HTML în cadrul funcțiilor folosind paranteze {} pentru a introduce codul dvs. pentru un anumit element HTML.

Pasul 5: Gânduri finale

Și iată-l; ați creat cu succes prima dvs. pagină web! Deoarece acesta este un ghid pentru începători, vreau să vă fac prima experiență cu HTML plăcută. Cel mai bun mod de a învăța din experiența mea este să vă scufundați și să încercați lucrurile, să vedeți ce puteți face cu codul dvs. și, de asemenea, să vedeți cum puteți să vă rupeți codul. Aceasta creează integritate și vă ajută să înțelegeți mai bine cum și de ce funcționează codul așa cum funcționează. Amintiți-vă că www. W3Schools.com este o resursă excelentă pentru întrebări și chiar oferă un sandbox virtual în browser pentru a vă încerca codul. Sperăm că ați învățat ceva și codificați fericit!