Научете как е бил построен уебсайт, като прегледате неговия изходен код
Когато за първи път започнах кариерата си като уеб дизайнер, научих толкова много, като прегледах работата на други уеб дизайнери, които аз се възхищавах. Аз не съм сам в това. Независимо дали сте нови за уеб индустрията или опитен ветеран, разглеждането на HTML източника на различни уеб страници е нещо, което е вероятно да направите много пъти в течение на вашата кариера.
За тези, които са нови в уеб дизайна, разглеждането на изходния код на сайта е един от най-лесните начини да видите как се правят определени неща, така че да можете да се научите от тази работа и да започнете да използвате определен код или техники във вашата собствена работа. Както всеки уеб дизайнер, който работи днес, особено тези, които са били в него от ранните дни на индустрията, и това е сигурен залог, че те ви казват, че са научили HTML просто като гледат източника на уеб страниците, които са видели и са били заинтригувани от. Освен че чете книги за уеб дизайн или посещава професионални конференции , разглеждането на изходния код на сайта е чудесен начин за начинаещите да научат HTML.
Повече от HTML
Едно нещо, което трябва да запомните, е, че изходните файлове могат да бъдат много сложни (и колкото по-сложен е уебсайтът, който гледате, толкова по-сложен е кодът на сайта). В допълнение към HTML структурата , която съставлява страницата, която преглеждате, ще има и CSS (cascading style sheets), които диктуват визуалния облик на този сайт. Освен това много уебсайтове днес ще включват скриптови файлове, включени заедно с HTML.
Вероятно има няколко скриптови файла, всъщност всеки от тях захранва различни аспекти на сайта. Честно казано, изходният код на сайта може да изглежда огромен, особено ако сте нови за това. Не се разочаровайте, ако не можете веднага да разберете какво става с този сайт. Преглеждането на HTML източника е само първата стъпка в този процес. С малко преживяване ще започнете да разбирате по-добре как всички тези части се съчетават, за да създадете уебсайта, който виждате в браузъра си. Когато се запознаете по-добре с кода, ще можете да научите повече от него и това няма да ви обезсмисли.
Е, как виждате изходния код на уебсайт? Ето инструкции стъпка по стъпка, които да направите, като използвате браузъра Google Chrome.
Инструкции стъпка по стъпка
- Отворете уеб браузъра на Google Chrome (ако не сте инсталирали Google Chrome, това е безплатно изтегляне).
- Отворете уеб страницата, която искате да разгледате .
- Кликнете с десния бутон на мишката върху страницата и погледнете менюто, което се показва. От това меню кликнете върху Преглед на източника на страница .
- Изходният код за тази страница ще се покаже като нов раздел в браузъра.
- Друга възможност е да използвате клавишните комбинации на CTRL + U на компютър, за да отворите прозорец с изведения изходен код на сайта. На Mac, този пряк път е Command + Alt + U.
Инструменти за разработчици
В допълнение към простата възможност за показване на източника на страници, която Google Chrome предлага, можете да се възползвате и от отличните им инструменти за разработчици, за да копаете още по-дълбоко в даден сайт. Тези инструменти ще ви позволят не само да видите HTML, но и CSS, който се отнася за преглед на елементи в този HTML документ.
За да използвате инструментите за програмисти на Chrome:
- Отворете Google Chrome .
- Отворете уеб страницата, която искате да разгледате .
- Кликнете върху иконата с три реда в горния десен ъгъл на прозореца на браузъра.
- От менюто задръжте курсора на мишката върху Още инструменти и след това кликнете върху Инструменти за програмисти в менюто, което се показва.
- Това ще отвори прозорец, който показва изходния HTML код вляво от прозореца и съответния CSS отдясно.
- Като алтернатива, ако кликнете с десния бутон върху елемент в уеб страница и изберете Inspect от менюто, което се показва, ще се покажат инструментите за разработчици на Chrome и точният елемент, който сте избрали, ще бъде откроен в HTML със съответния CSS, показан вдясно. Това е много полезно, ако искате да научите повече за това как е създадено едно конкретно парче от сайта.
Изглежда правният код на изходния код?
С течение на годините съм имала много нови уеб дизайнери, които са се запитали дали е приемливо да преглеждат изходния код на сайта и да го използват за образованието си и в крайна сметка за работата, която вършат. Докато копирането на кода на сайта на едро и го отмива като свой собствен на даден сайт със сигурност не е приемливо, използването на този код като трамплин, от който да се учи, всъщност е колко напредък се прави в тази индустрия.
Както споменах в началото на тази статия, ще бъдете силно натиснати да намерите работещ уеб специалист днес, който не е научил нещо, като е разгледал източника на сайта! Да, преглеждането на изходния код на сайта е законно. Използването на този код като ресурс за изграждане на нещо подобно също е добре. Приемането на кода, както е, и предаването му, тъй като твоята работа е мястото, където започваш да срещаш проблеми.
В крайна сметка, уеб професионалистите се учат един от друг и често подобряват работата, която виждат и вдъхновяват, така че не се колебайте да видите изходния код на сайта и да го използвате като учебен инструмент.