Aflați cum a fost construit un site web prin vizualizarea codului sursă
Când am început cariera mea de web designer, am învățat atât de mult, revizuind munca altor designeri web pe care i-am admirat. Nu sunt singur în asta. Indiferent dacă sunteți nou în industria web sau un veteran experimentat, vizualizarea sursei HTML a diferitelor pagini Web este ceva care este posibil să faceți de mai multe ori pe parcursul carierei.
Pentru cei care sunt noi în designul web, vizualizarea codului sursă al site-ului este una dintre cele mai ușoare modalități de a vedea cum se fac anumite lucruri, astfel încât să puteți învăța din acea muncă și să începeți să utilizați anumite coduri sau tehnici în propria dvs. activitate. Ca orice designer de web care lucrează astăzi, în special cei care au fost la el de la primele zile ale industriei și este un pariu sigur că ei vă spun că au învățat HTML pur și simplu prin vizionarea sursei paginilor web pe care le-au văzut și au fost intrigate de. În plus față de citirea cărților de design web sau participarea la conferințe profesionale , vizualizarea codului sursă al site-ului este o modalitate excelentă pentru începători de a învăța HTML.
Mai mult decât HTML
Un lucru de reținut este faptul că fișierele sursă pot fi foarte complicate (și cu cât este mai complex pe site-ul pe care îl vizualizați, cu atât mai complex va fi codul site-ului respectiv). În plus față de structura HTML care alcătuiesc pagina pe care o vizualizați, vor exista, de asemenea, CSS (foi de stil cascadă) care dictează aspectul vizual al acelui site. În plus, multe site-uri de astăzi vor include fișiere de script incluse împreună cu codul HTML.
Există probabil mai multe fișiere script incluse, de fapt, fiecare alimentând diferite aspecte ale site-ului. Sincer, codul sursă al site-ului poate părea copleșitor, mai ales dacă sunteți nou în a face acest lucru. Nu fi frustrat dacă nu puteți afla imediat ce se întâmplă cu site-ul respectiv. Vizionarea sursei HTML este doar primul pas în acest proces. Cu o mică experiență, veți începe să înțelegeți mai bine cum se potrivesc toate aceste piese împreună pentru a crea site-ul pe care îl vedeți în browser. Pe măsură ce vă familiarizați mai mult cu codul, veți putea afla mai multe despre el și nu vă va părea că vă deranjează.
Deci, cum vedeți codul sursă al unui site web? Iată instrucțiunile pas cu pas pentru a face acest lucru folosind browserul Google Chrome.
Instrucțiuni pas cu pas
- Deschideți browserul web Google Chrome (dacă nu aveți instalat Google Chrome, aceasta este o descărcare gratuită).
- Navigați la pagina web pe care doriți să o examinați .
- Faceți clic dreapta pe pagină și consultați meniul care apare. Din meniul respectiv, faceți clic pe Vizualizați sursa paginii .
- Codul sursă pentru acea pagină va apărea acum ca o filă nouă în browser.
- Alternativ, puteți utiliza comenzile rapide de la tastatură de pe CTRL + U pentru a deschide o fereastră cu codul sursă al unui site afișat. Pe un Mac, această comandă rapidă este Command + Alt + U.
Instrumente de dezvoltare
În plus față de capacitatea simplă de afișare a sursei de pagini pe care o oferă Google Chrome, puteți profita de avantajele excelentelor instrumente de dezvoltare pentru a sapa și mai adânc într-un site. Aceste instrumente vă vor permite nu numai să vedeți codul HTML, ci și CSS-ul care se aplică vizualizării elementelor din documentul HTML.
Pentru a utiliza instrumentele de dezvoltare ale dezvoltatorului Chrome:
- Deschideți Google Chrome .
- Navigați la pagina web pe care doriți să o examinați .
- Faceți clic pe pictograma cu trei linii în colțul din dreapta sus al ferestrei browserului.
- Din meniu, treceți cu mouse-ul pe Mai multe instrumente și apoi faceți clic pe Instrumente pentru dezvoltatori din meniul care apare.
- Aceasta va deschide o fereastră care va afișa codul sursă HTML din stânga panoului și CSS-ul asociat din dreapta.
- Alternativ, dacă faceți clic dreapta pe un element dintr-o pagină Web și selectați Inspectați din meniul care apare, instrumentele de dezvoltare ale Chrome vor apărea și elementul exact pe care l-ați selectat va fi evidențiat în codul HTML cu CSS corespunzător afișat în partea dreaptă. Acest lucru este foarte util dacă doriți să aflați mai multe despre cum a fost creată o anumită piesă a unui site.
Este legală vizualizarea codului sursă?
De-a lungul anilor, am avut mulți designeri noi care se întreabă dacă este acceptabil să vizualizați codul sursă al unui site și să-l utilizați pentru educația lor și, în cele din urmă, pentru munca pe care o fac. În timp ce copiați un cod de site-ul en-gros și treceți-l ca pe propriul dvs. pe un site este cu siguranță inacceptabil, folosiți acel cod ca o rampă de lansare de învățat de fapt, câte avansuri sunt făcute în această industrie.
După cum am menționat la începutul acestui articol, ați fi greu să găsiți un profesionist web de lucru care nu a învățat ceva prin vizionarea sursei unui site! Da, vizualizarea codului sursă al unui site este legală. Utilizarea acelui cod ca resursă pentru a construi ceva similar este, de asemenea, bine. Luând codul ca-este și trecând-l ca munca ta este în cazul în care începeți să întâmpinați probleme.
În cele din urmă, profesioniștii web învață unul de celălalt și adesea îmbunătățesc munca pe care o văd și sunt inspirați, deci nu ezitați să vizualizați codul sursă al site-ului și să-l utilizați ca un instrument de învățare.