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