≡× МЕНЮ

• Гаджеты
• Android
• Windows
• Ios
• Блог

Открыть код страницы клавишами. Как открыть исходный код страницы

11.08.17 3.3K

Все браузеры позволяют просматривать исходный HTML-код любой веб-страницы. В этой статье приводится информация о том, как открыть исходный код страницы в наиболее популярных браузерах:

Вводная информация

При просмотре исходного кода веб-страницы важно помнить, что информация и код, не обработанные сервером не будут отображаться. Например, почти все поисковые системы обрабатывают информацию на сервере, и затем отображают результаты на веб-странице.

Это правило применимо ко всем скриптам, выполняемым на стороне сервера, SSI и к программному коду. Следовательно, поисковые системы, форумы, опросы, чаты не отображают свой код. Копирование информации из исходного кода может привести к серьёзным ошибкам или отправить обратно на страницу.

Пользователи Microsoft Edge

Чтобы просмотреть исходный код веб-страницы в Microsoft Edge , следуйте приведенным ниже инструкциям.

1. Откройте Microsoft Edge и перейдите на веб-страницу;
2. Кликните иконку «More » в верхнем правом углу экрана;
3. Выберите пункт F12 Developer Tools (Инструменты разработчика ) из появившегося выпадающего меню.

Совет : В Microsoft Edge инструмент DOM предоставляет возможность взаимодействия с исходным кодом и настройками CSS , позволяя мгновенно увидеть, как изменения в коде влияют на веб-страницу.

Пользователи Microsoft Internet Explorer

Как открыть исходный код страницы в Microsoft Internet Explorer :

1. Откройте Internet Explorer и перейдите на веб-страницу;
2. Выберите View (Просмотр ) и Source (Источник ) из появившегося выпадающего меню.

Совет : В последних версиях Internet Explorer нажатие клавиши F12 вызывает инструмент DOM . Он позволяет мгновенно увидеть, как изменения в коде влияют на веб-страницу.

Пользователи Mozilla Firefox и Netscape

Чтобы просмотреть исходный код веб-страницы в Mozilla Firefox , следуйте приведенным ниже инструкциям.

1. Откройте Mozilla Firefox и перейдите на веб-страницу;
2. Нажмите Alt , чтобы вызвать панель меню браузера;
3. Выберите Tools (Инструменты ), Web developer (Веб-разработчик ), и затем Page Source (Исходный код страницы ).

Совет : В последних версиях браузера нажатие на клавишу F12 или Ctrl+Shift+I вызывает интерактивный инструмент разработчика. Это нужно учитывать перед тем, как открыть исходный код страницы Firefox.

Как просмотреть раздел исходного кода страницы

1. Выделите участок веб-страницы, чтобы просмотреть исходный код;
2. Кликните правой клавишей мыши по выделенной части веб-страницы и затем нажмите View Selection Source (Показать исходный код выделения ).

Совет : Используйте дополнение Firebug , чтобы не только увидеть исходный код страницы, но и вносить необходимые изменения. А также увидеть их в браузере в тот же момент.

Пользователи Google Chrome

Чтобы просмотреть исходный код веб-страницы в Google Chrome , следуйте приведенным ниже инструкциям.

1. Откройте Google Chrome ;
2. Кликните по иконке Customize and control (Настройка и управление ) Google Chrome , расположенной в верхней правой части окна браузера;
3. В появившемся выпадающем меню выберите Дополнительные инструменты, Инструменты разработчика (Developer tools ).

Совет : В последних версиях Google Chrome нажатие на клавишу F12 или Ctrl+Shift+I также вызывает интерактивный инструмент разработчика.

Пользователи Apple Safari

1. Откройте Safari и перейдите на выбранную веб-страницу;
2. Выберите меню Develop (Разработка );
3. Выберите опцию Show page source (Показать исходный код страницы ).

Пользователи Opera

Как открыть исходный код страницы в Опере:

1. Откройте Opera и перейдите на веб-страницу;
2. Кликните кнопку «Меню » в углу окна браузера;
3. В подменю разработчика выберите View page source (Посмотреть исходный текст ).

Совет : Если вы не видите подменю «Разработчик » (или Разработка ) (Developer ), выберите More tools (Другие инструменты ); Show developer menu (Показать меню разработчика ). Далее щелкните по кнопке меню еще раз. Теперь вы увидите подменю Разработчик (Developer ).

1 голос

Доброго времени суток, уважаемые читатели моего блога. Бывает находишь на сайте какую-нибудь красивую фишку и начинает мучать вопрос, как же создатель добился такого интересного эффекта.

Оказывается, найти ответ довольно просто. А если вы обладаете кое-какими навыками, то можете насобирать множество таких фишек и за короткое время создать свой уникальный сайт.

Сегодня мы поговорим о том, как открыть код страницы, определенного элемента и научиться использовать этот навык себе во благо.

Базовые знания о коде

Мой сайт предназначен для новичков и сперва мне бы хотелось в двух словах рассказать о сайтах и коде в целом.

Чтобы необходимо нарисовать картинку, затем разрезать ее на мелкие части, написать код, благодаря которому браузер снова соберет все элементы в единое целое. Кажется, все очень сложно? Совсем нет, да и горевать по этому поводу не стоит.

Качественные сайты создаются именно так. Хотите – влезайте в это дело и изучайте, нет желания – никто не в силах вас заставить.

Скажу только одно… нет ничего более приятного, чем видеть, как непонятные слова, написанные тобой, преобразуются в единое целое и оживают: ссылки работают, кнопки шевелятся, картинки двигаются, текст ползет. Думаю, что я знаю, как чувствовал себя Виктор Франкенштейн.

Когда вы начнете постигать тайный язык и видеть, что все на самом деле значительно проще, чем казалось изначально вы не можете не верить в собственные силы и возможности мозга. Это очень круто.

Как делаются сайты? В идеале, сперва . Он просто рисует картинку. Например, как показано на рисунке ниже. Пока это всего лишь изображение, фотография. Не работают никакие ссылки, при нажатии вы никуда не переходите, поиск не осуществляется.

По этому рисунку . Посмотрите на скриншот внизу. Вам может показаться, что это нелепый и очень сложный набор символов. На самом деле все не так уж сложно, есть определенный алгоритм.

Существует всего около 150 тегов и каждый из них отвечает за определенное действие: ссылка, перенос, выделение жирным, цвет, заголовок и так далее. Разобраться в них не так уж сложно, если есть желание и не жалко времени.

Благодаря знаниям этих атрибутов можно решить практически любую задачу. Вот только пути для достижения цели каждый разработчик находит свои.

Опытные создатели сразу видят как добиться результата, а другим приходится думать, искать ответа в статьях или в исходном коде конкурентов. Они просто берут необходимую часть на стороннем сайте и редактируют под себя. Это существенно сокращает процесс работы.

Чуть позже, я покажу вам конкретный пример.

Просмотр кода

Итак, давайте я для начала покажу как действовать, если вам нужно узнать чужой html. Потом мы подробнее рассмотрим все остальные вопросы.

Самый лучший способ

Метод, который я опишу первым, немного сложен для новичков, но в качестве ознакомления – пойдет, читайте. Открываете страничку и нажимаете на правую клавишу мыши. Выбираете пункт «Сохранить как…»

Сохраняете веб-страницу полностью. Как можете увидеть на скриншоте, я уже все скачал заранее. Тут у нас две папки.

Здесь есть все, что необходимо. Каждый элемент. Если разбираетесь в этом, то сможете быстро получить все необходимое. Но, такая задача все чаще становится невыполнимой. Закачка не осуществляется. Что делать если запрещено копировать страницу?

Это же Гугль хром

Как вы уже наверное могли заметить, я чаще всего использую Google Chrome и узнать чужой код в этом браузере проще простого. Как в принципе и в любом другом. Схема будет не то что похожая, а идентичная. Открываем страничку, код которой хотим узнать, и щелкаем в любом месте правой клавишей мыши. В появившемся окне кликаем «Посмотреть код страницы».

В новом окне откроется простыня кода, в которой довольно сложно разобраться новичку. Но, не пугайтесь раньше времени.

Если вам нужно узнать код только одного элемента, достаточно навести на него мышью и щелкнуть правой клавишей. Выбираем другую функцию хрома: «Просмотр кода элемента».

Мне, например, может быть интересно каким образом сделан логотип, при использовании картинки или языка программирования? Ведь нарисовать квадрат можно при помощи css. Многие специалисты советуют как можно больше информации прописывать кодом. А как работают на популярных сайтах?

Вот и появилась необходимая информация. Сверху html, внизу css. Это два языка. Первый отвечает за текстовую составляющую, а второй за дизайн. Если бы не было css, то вам пришлось бы каждый раз прописывать цвет, размер шрифта. Для каждой странички, это очень долго. Но если бы не было html, то у нас не было бы текстов. Грубо объяснил, но в целом, все так и есть.

Кстати, если вас заинтересовало как здесь устроен , то можете посмотреть снизу ссылку на картинку. Вот вам и ответ.

Mozilla Firefox

Если вы любите работать в мазиле, то все будет точно также. Открываете страничку и нажимаете на правую кнопку мыши. «Исходный код страницы» если хотите увидеть весь код целиком.

При наведении на какой-либо элемент появляется возможность открыть его код.

Здесь данные отображаются в нижней части экрана, а в остальном все точно также.

Яндекс браузер

В Яндекс браузере все точно также, как и в предыдущих двух вариантах, открываем страницу, правая клавиша мыши, посмотреть код страницы.

Наводим курсор на элемент, если хотим узнать именно его код.

Отображается все тут точно также, как и в хроме.

Опера

Ну и напоследок Opera.

Кстати, возможно вы заметили, что не обязательно пользоваться мышью. Для открытия кода есть быстрое сочетание клавиш и для всех браузеров оно одинаковое: CTRL+U .

Для элементов: Ctrl+Shift+C.

Вот так выглядит результат.

Это будет интересно новичкам

А теперь смотрите как все работает. Находите вы сайт и очень вам нравится какой-то элемент. Например, вот этот. Как открыть код элемента вы уже знаете.

Теперь копируете его.

Я пользуюсь , вставляю этот код в новый html файл, в тег body (тело по-английски).

Теперь посмотрим, как это все будет выглядеть в браузере.

Готово. Чтобы текст был выровнен по краям и приобрел зеленоватый цвет нужно подключить к этому документу css и скопировать еще один код с того сайта, с которого мы тырили этот.

Сейчас я не буду этим заниматься. На это нужно больше времени: и моего, и вашего. Думаю, что все подробности я опишу в своих будущих публикациях. Подписывайтесь на рассылку и узнаете о появлении статьи первым.

Если же терпеть нет сил, а узнать больше о html и css хочется уже сейчас, то могу по традиции порекомендовать вам бесплатные обучающие курсы.

Здесь 33 урока, которые позволят освоить html — «Бесплатный курс по HTML» .

А тут полная информация о css — «Бесплатный курс по CSS (45 видеоуроков!)» .

Теперь вы знаете чуть больше. Желаю вам успехов в ваших начинаниях. До новых встреч!

Разработчики браузеров позаботились об удобстве тех, кто создает сайты, открываемые в этих самых браузерах, а именно – о вебмастерах. Они добавили в стандартные функции инструменты разработчика, с помощью которых можно легко открыть и посмотреть исходный код страницы сайта в браузере : HTML, CSS, JavaScript (JS), получить различные полезные данные о структуре сайта, провести его технический анализ. В общем, увидеть много полезного.

Конечно же, данными инструментами пользуются не только создатели сайтов для работы, но и простые пользователи, которым исходный код позволяет посмотреть различные полезных данных.

Из этой стать вы узнаете, как в браузере посмотреть исходный код страницы сайта (как открыть HTML, CSS, JavaScript код сайта).

Как открыть исходный код страницы в браузере

Открыть исходный код веб страницы в браузере можно двумя способами:

1. С помощью горячих клавиш;
2. Открыть из контекстного меню.

Ctrl + U – комбинация горячих клавиш для просмотра исходного кода всей страницы сайта в отдельном новом окне. Стандартные для всех браузеров: Google Chrome, Opera, Mozilla Firefox, Яндекс браузера, IE.

Также в инструменты разработчика можно войти следующим образом:

Для того чтобы быстро найти нужный код, слово или текст на странице можно использовать стандартное для всех браузеров сочетание горячих клавиш поиска: Ctrl + G.

Видео-инструкция:

Просмотр кода элемента | исследовать элемент | проинспектировать элемент

Если вдруг нужно просмотреть не весь исходный код, а вывести на экран лишь отдельную его часть, какой-то участок на странице, то предыдущий инструмент не подойдет. Для этого в инструментах разработчика есть другая функция, о которой пойдет речь ниже.

Как просмотреть код элемента на странице:

Кроме того, можно использовать комбинации клавиш на клавиатуре для быстрого доступа к инспектированию элемента.

Горячие клавиши (кнопки):

Google Chrome: Ctrl+Shift+I и Ctrl+Shift+C

Opera: Ctrl+Shift+I и Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I и Ctrl+Shift+C

Яндекс браузер: Ctrl+Shift+I и Ctrl+Shift+C

После проделанных действий, в этом же окне браузера откроется исходный код web страницы:

Весь HTML код будет в левой большой колонке. А CSS стили – в правой.

Преимуществом данного способа, безусловно, является и то, что у пользователя есть возможность изменить исходный код, править стили. То есть, можно редактировать стили на сайте и посмотреть, как он будет выглядеть с теми или иными стилями, без необходимости сразу вносить изменения в файлы, которые находятся на серверах хостинга. Чтобы изменить или добавить программный код, необходимо сделать двойной клик на нужном фрагменте или участке. Конечно же исправление кода в браузере не внесется на серверах хостинга. Поэтому в дальнейшем, в любом случае, придется копировать этот код и прописать в файлы.

В этой видео-инструкции подробно рассказано и показано, как работать с инструментами разработчика:

Вот так вот просто в режиме онлайн, прямо в браузере, можно посмотреть исходный код страницы сайта, получить основные данные о HTML и CSS коде, изменить и скопировать их, без необходимости скачивать файлы этого сайта на компьютер.

Кстати, неопытных интернет-пользователей, изменивших код страницы и ждущих, что он сохранится, ждет разочарование. Ведь после обновления страницы, все изменения на ней пропадут. Этого мало, чтобы взломать сайт 🙂

Как посмотреть исходный код на телефоне Android

Еще хотелось бы заметить, что инструменты разработчика доступны не только в десктопной версии браузеров, то есть, на компьютерах и ноутбуках. На телефонах и планшетах (Android, IOS) можно также посмотреть исходный код.

Для этого следует добавить к URL инспектируемой страницы приставку view-source:

Например:

view-source:https://сайт/turbo-rezhim-opera/

Инструкция

В Mozilla FireFox раскройте в меню раздел «Вид» и щелкните пункт «Исходный код ». Такой же пункт есть и в контекстном меню, которое , если щелкнуть правой кнопкой мыши текст страницы . Можно использовать и сочетание клавиш CTRL + U. Mozilla FireFox при этом не использует внешних программ - исходный код страницы с подсветкой синтаксиса будет открыт в отдельном окне браузера.

В обозревателе Internet Explorer щелкните в меню раздел «Файл» и выберите «Править в Блокнот». Вместо названия Блокнот может быть написана другая , вы назначили в настройках браузера для просмотра исходного код а. По щелчку страницы правой кнопкой мыши выпадает контекстное меню, в котором тоже есть пункт, позволяющий открыть исходный код страницы во внешней программе - «Просмотр HTML-код а».

В браузере Opera откройте меню, перейдите в раздел «Страница» и у вас будет возможность выбрать в подразделе «Средства разработки» пункт «Исходный код » или пункт «Исходный код фрейма». Такому выбору назначены горячие клавиши CTRL + U и CTRL + SHIFT + U соответственно. В контекстном меню, привязанном к щелчку страницы правой кнопкой мыши, тоже есть пункт «Исходный код ». Opera исходник страницы во внешней программе, которая назначена в ОС или в настройках браузера для редактирования HTML-файлов.

Браузер Google Chrome безо всяких сомнений имеет лучшую организацию просмотра исходного код а. Щелкнув правой кнопкой мыши, вы можете выбрать пункт «Просмотра код а страницы » и тогда исходник с подсветкой синтаксиса будет открыт на отдельной вкладке. А можете выбрать в том же меню строку «Просмотр код а элемента» и в этой же вкладке откроет два дополнительных фрейма, в которых вы можете инспектировать HTML- и CSS-код элемента страницы . Браузер будет реагировать на перемещение курсора по строкам код а, подсвечивая на странице элементы, соответствующие этому участку HTML-код а.

В браузере Apple Safari раскройте раздел «Вид» и выберите строку «Просмотр HTML-код а». В меню, которое появляется по щелчку правой кнопкой открытой страницы , соответствующий пункт назван «Посмотреть источник». Этому действию назначены горячие клавиши CTRL + ALT + U. Исходный код в отдельном окне браузера.

Источники:

• как изменить назначенные клавиши в firefox

Довольно много людей, встретившись с трудностями в компьютерных играх, которые они не могут преодолеть, используют специальные коды, чтобы решить ту или иную проблему, либо упростить игру. Чит-код (англ. Cheat code – жульничество) – это код, который можно ввести в компьютерную игру для того, чтобы изменить ход ее работы. Ввод таких кодов осуществляется воспроизводством определенного текста (состоящего из букв или цифр) на клавиатуре. Также можно ввести текст в специально отведенных для этого местах (меню игры или консоль). А как же найти код на игру?

Вам понадобится

• интернет

Инструкция

Рассмотрим первый способ на примере популярного http://chemax.ru . Для того, чтобы найти код на определенную игру, жмем на вкладку «Чит коды», а затем выбираем «На ». В открывшемся окне вы можете либо ввести название игры в специальную (что облегчит процесс поиска), либо нажать на английскую или русскую букву, с которой начинается название игры. Выбрав игру, вы увидите , в котором перечислены все возможные коды.

Для того, чтобы скачать базу чит-кодов, вам необходимо зайти на сайт http://chemax.ru и выбрать вкладку «CheMax» - «CheMax Rus». Эта база чит-кодов является в том числе русскоязычной и имеет огромное количество представленных игр. При установке следует выбрать русский язык и место расположения программы на вашем . После того, как вы запустите программу, в специальной строке нужно ввести название игры, в результате чего вы получите все необходимые чит-коды.

Видео по теме

Обратите внимание

Не забывайте своевременно обновлять данную программу для того, чтобы иметь наиболее полную базу кодов.

Полезный совет

Пробуйте проходить игру без использования чит-кодов, ведь честное прохождение игры доставит вам намного больше удовольствия.

Рассмотрим, как определить исходный код страницы , ведь этот параметр очень важен при работе в интернете. Если вам нужна какая-либо новость, теги или картинка, но как ее прописать вы не знаете, всегда можно скопировать информацию с другого сайта, узнав исходный код страницы , если он не закод ирован разработчиками сайта. Важен исходный код в постраничных файлах, которые не являются программами, с помощью исходного код а можно работать со страницами и редактировать их.

Вам понадобится

• Инструкция по просмотру исходного кода страницы.

Инструкция

Чтобы была видима, она прописывается с исходным код ом. Залить ее с код ом можно, если вы владелец ресурса, либо изменить с помощью блокнота, редактора, используя для этого специальные расширения. Пользователь так же может изменить страницу, отредактировав файл и внося в страницу свои . В - браузерах просмотр исходного код а осуществляется с помощью различных команд, рассмотрим их подробнее.

Для Internet Explorer выбирайте вкладку «вид», затем «исходный код страницы » либо пункт можно выбрать, нажав на правую кнопку мыши. Чтобы зашифрованный разработчиками код в этом заходим в меню «сервис», потом «средства разработчика», нажимаем стрелочку, выделяем нужный элемент на и код становиться . Далее жмем на значок и код в текстовом формате и копируем из его составляющих в html.

Браузер Mozilla Firefox предоставляет возможность просмотра с помощью простой команды «Ctrl+U» или в меню «инструменты» выбрать подстроку «посмотреть исходный код ». Просмотреть зашифрованную информацию в Mozilla Firefox можно установив специальное Web Developer, выбираем в меню «код » строку «сгенерираванный код » и внизу страницы появляется значение исходного код а. Копируем файл в буфер обмена или сохраняем с расширением page.htm.

При использовании Google Chrome в основном меню «инструменты» выбирайте подстроку «посмотреть исходный код », далее с помощью правой кнопки мыши открываете пункт «просмотр код а страницы » либо с помощью клавиш "Ctrl + U".

Для браузера Safari в меню находим «посмотреть html-код », так же нажав правую кнопку мыши, открываем подстроку «посмотреть источник» или воспользуемся сочетанием клавиш "Ctrl + Alt + U".

Обратите внимание

Возможность просмотра зашифрованной информации об исходном коде осуществляется с помощью двух браузеров.

Полезный совет

Если вы не являетесь разработчиком сайта, изменить страницу вы сможете только для своего пользования.

В компьютерных играх, как и в реальной жизни, есть возможность немного пожульничать. Разработчики для этого снабжают свои продукты различными кодами, используя которые из меню игры, можно беспрепятственно проходить уровни и миссии.

Вам понадобится

• Программное обеспечение CheMax.

Инструкция

Чтобы узнать коды, которые когда-то использовались разработчиками при тестировании, совсем не обязательно вскрывать при помощи HEX-редакторов все exe-файлы игрового продукта. Вам достаточно перейти на специализированный сайт по читам по следующей ссылке http://chemax.ru.

На загрузившейся странице наведите курсор к строке меню, а именно разделу «Чит коды», и в появившемся списке выберите пункт «На языке». На следующей странице введите название игры в поисковою строку, затем нажмите кнопку «Поиск». Рекомендуется вводить максимально полное название, которое можно скопировать из свойств ярлыка. Для этого перейдите к рабочему столу и нажмите правой кнопкой мыши на ярлыке игры. В контекстном меню выберите пункт «Свойства» и скопируйте название при помощи сочетания клавиш Ctrl + C или Ctrl + Insert.

Среди результатов поиска выберите наиболее подходящий вариант, чтобы открыть таблицу кодов. Помимо таблицы кодов, если прокрутите страницу до конца, вы можете найти и список трейнеров с активными ссылками. Для быстрого доступа к нужным кодам, пока вы их не запомнили, рекомендуется выделить и скопировать информацию с загруженной страницы, затем вставить в новый текстовый документ.

Постоянное обращение к сайту ради добычи нужного кода весьма долгое занятие, т.к. запуск специальной программы (CheMax) во много раз быстрее. Для этого обратитесь к верхнему меню CheMax и выберите пункт CheMax Rus. На странице загрузки программы нажмите на ссылку «Инсталлятор» либо «RAR Архив», и укажите место сохранения исполняемого файла.

После установки программы на рабочий стол будет помещен ярлык, запуск которого приведет к открытию программы. Во время игры нажмите «Пауза» и при помощи сочетания Alt + Tab перейдите к открытому окну. В поисковой строке введите название игры и нажмите Enter.

Видео по теме

Источники:

• Как узнать код баннера?

Код программы может быть разным в плане приватности – многие разработчики не выкладывают в его в открытый доступ и условиями лицензионного соглашения накладывают на пользователей ограничения, связанные с его использованием и просмотром. Также имеются программы с открытым кодом, который можно просматривать, редактировать и так далее.

Вам понадобится

• - программа для открытия исходного кода.

Инструкция

Убедитесь в том, что исходный код программного обеспечения, который вы хотите просмотреть, предназначен для открытого доступа. Для этого зайдите на официальный сайт разработчика программного обеспечения и просмотрите тип лицензии. В случае если исходный код программы закрытый, вы не можете просмотреть его. Это неудобно, однако при такой системе достаточно редко встречаются копии программы с содержанием троянских и других вредоносных программ. В этом и заключается основной минус свободного программного обеспечения.

В случае если у вас свободное программное обеспечение, найдите в меню программы «Исходный код», если такой пункт предусмотрен разработчиком, что бывает крайне редко. Для его просмотра в остальных случаях воспользуйтесь ассемблером или другим сторонним программным обеспечением.

Зачастую для открытия исходника необходимо знать, каким языком программирования пользовались создатели программы при разработке, что определить зачастую очень трудно. Здесь вы можете установить на свой компьютер набор различных программ для открытия исходников, написанных на разных языках.

При использовании свободного программного обеспечения, если у вас имеется такая возможность, просматривайте исходный код перед процессом инсталляции, в особенности, если программа загружалась из неофициального источника. Это поможет защитить ваш компьютер от вредоносных программ, которые устанавливаются вместе с основной.

Также не прибегайте к различным методам внесения изменений в закрытый исходный код программы, зачастую в таких случаях предусмотрена определенная ответственность за нарушение правил лицензионного соглашение между пользователем и разработчиком. Тем более не выкладывайте отредактированные подобные программы в интернет.

Видео по теме

Полезный совет

Проверяйте исходники свободного ПО.

Программы делятся на открытые и закрытые. В первом случае для всех пользователей интернета доступно скачивание ее исходного кода с официального сайта и других ресурсов, во втором – код системы закрыт и его

Долгое время для меня опция «показать исходный код страницы» была бесполезна и неинтересна. Пока изучение HTML на Codecademy и верстках собственных сайтов не переросло в мое новое увлечение. Тут и возник вопрос: где найти реальные кейсы и позаимствовать интересные решения для своей «копилки»? Ответ был неожиданно прост, как все гениальное: посмотреть исходный код страницы в Google Chrome! Делюсь с вами своими скромными находками.

Что такое исходный код страницы

Если вы, как и я, только делаете первые шаги в HTML-программировании, не лишним будет узнать что такое исходный код страницы.

Исходный код, он же HTML код страницы – текст на языке Hyper Text Markup Language (HTML). Он включает в себя собственно контент страницы (текст, таблицы) и тэги. Последние играют роль инструкции для браузера: как отображать контент, какой вид форматирования использовать, куда вставить гиперссылку или медиафайл. Ну а для нас, начинающих программистов исходный код – лучший полигон для обучения: находим интересный сайт и подсматриваем, сохраняем, используем удачные фрагменты. Как?

Как посмотреть исходный код в странице браузера Google Chrome

Находим понравившуюся страницу. Например, меня заинтересовало оформление меню сайта. Открыть исходный код в браузере Google Chrome можно тремя способами:

1. Щелкаем по иконке меню в правом верхнем углу браузера и выбираем пункт «Дополнительные инструменты». Среди прочих есть опция «Посмотреть исходный код». Признаться, редко использую данный способ: много лишних движений. Можно сделать еще проще.
2. Нажимаем комбинацию клавиш Ctrl+U – открывается новое окно с исходным кодом;
3. Для фанатов контекстного меню: щелчок правой кнопкой мыши по странице и выбираем опцию «Просмотр кода страницы».

С задачей посмотреть HTML код страницы в браузере справились. Переходим к самому интересному этапу.

Как отредактировать и сохранить исходный код

Чтобы научиться создавать сайты, недостаточно читать чужой HTML код. Нужно играть с ним, экспериментировать, вносить изменения и проверять результат. Начать можно даже с компиляции нескольких удачных образцов. Как отредактировать и сохранить исходный код?

Вариант 1. «Вручную»

После того, как мы открыли исходный код страницы, вызываем контекстное меню и выбираем опцию «Сохранить как» и сохраняем файл на жесткий диск. Редактируем файл в блокноте или Notepad, сохраняем изменения и открываем через браузер. Результаты наших изменений (удачные и не очень) отразятся в окне браузера.

Вариант 2. Для профи

Когда «играешь» с исходным кодом каждый день, процесс «сохранить – открыть – изменить – сохранить – проверить» утомляет. Для себя я нашла решение в виде установки плагина для Google Chrome – Firebug Lite . Он позволяет отредактировать и сохранить исходный код, не покидая окно браузера.