Как узнать ссылку кнопки на сайте

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

После нажатия синей кнопки появляется такое окно для запуска приложения. Как получить ссылку с протоколом на открытие Epic Games Launcher? На самой кнопке в html ссылки нет.
В адресной строке ссылка не появляется, потому что это не адрес страницы. Даже если удерживать ctrl , чтобы она открылась в новой вкладке, она всё равно открывается в текущей вкладке.

1. Как узнать эту ссылку средствами JavaScript ?
2. Где в Windows хранятся эти все протоколы?
3. Можно ли сделать, чтобы такая ссылка работала через адресную строку?

Отслеживать
задан 18 мар 2022 в 21:14
190 9 9 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

У меня нет Epic, но для других работает так: открой devtools в хроме (ctrl + shift + I), перейди на вкладку Network , там выбери в фильтре All , чтобы видеть всю активность, и перезагрузи страницу. Там при загрузке попапа появится и информация о ридеректе (будет выделено красным, скорей всего). Нажми на него, будет и полная ссылка, типа zoommtg://yandex.zoom.us/join?action=join&confno=9717. (эта для Zoom).

Отслеживать
ответ дан 18 мар 2022 в 21:30
1,358 5 5 серебряных знаков 8 8 бронзовых знаков

Не могу перезагрузить, потому что это окно появляется только один раз — после получения игры (в том числе бесплатной). Где-то же должен быть в Windows (может, в реестре) этот протокол.

18 мар 2022 в 21:37

Белое окно открывается даже без подключения к интернету. Может, такие ссылки в Network не отображаются.

Как узнать ссылку кнопки на сайте

Mozilla Россия — свежие версии программ Mozilla, а также масса полезной информации по каждому продукту.

Страницы: 1

• Форумы
• » Поддержка пользователей
• » Копировать ссылку с кнопки

№1 23-12-2015 18:54:19

rsuan Участник Группа: Members Зарегистрирован: 30-12-2010 Сообщений: 116 UA: 38.0

Копировать ссылку с кнопки

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

№2 24-12-2015 08:48:42

Vladimir_S Участник Группа: Extensions Откуда: Санкт-Петербург Зарегистрирован: 19-09-2008 Сообщений: 4493 UA: 44.0

Re: Копировать ссылку с кнопки

rsuan пишет

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

Пример такого сайта с кнопкой можно попросить?

«Большинство философов до сих пор придерживается весьма нефилософских воззрений на многие вопросы философии» Эдгар Аллан По

№3 27-12-2015 17:50:15

rsuan Участник Группа: Members Зарегистрирован: 30-12-2010 Сообщений: 116 UA: 38.0

Re: Копировать ссылку с кнопки

Если конкретно то меня интересует кнопка Просмотреть в новостях Вконтакте. Например https://vk.com/wall-45804734_4970

№4 27-12-2015 19:36:53

Dzirt Участник Группа: Members Зарегистрирован: 26-02-2012 Сообщений: 1892 UA: 43.0

Re: Копировать ссылку с кнопки

rsuan, если на кнопке висит обработчик javascript, то ничего кроме javascript(0) вы с нее не скопируете. По сути такая кнопка совсем не ссылка. Вы это понимаете?

PS: Другой пример кроме vk привести не можете? Регистрироваться в этой «мусорке» только для того, чтобы посмотреть на пример вашей кнопки, как-то слишком уж.

№5 28-12-2015 19:00:52

rsuan Участник Группа: Members Зарегистрирован: 30-12-2010 Сообщений: 116 UA: 38.0

Re: Копировать ссылку с кнопки

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

№6 28-12-2015 23:02:30

Dzirt Участник Группа: Members Зарегистрирован: 26-02-2012 Сообщений: 1892 UA: 43.0

Re: Копировать ссылку с кнопки

rsuan пишет

есть какие-нибудь расширения для расшифровывания этих java скриптов

Гы-гы! Вы хотя бы приблизительно понимаете, чего вы на самом деле хотите? Я на 99,99999% уверен, что нет и даже мысли не возникает о сложности задачи. Успехов вам в дальнейшем незнании

№7 29-12-2015 16:16:19

rsuan Участник Группа: Members Зарегистрирован: 30-12-2010 Сообщений: 116 UA: 38.0

Re: Копировать ссылку с кнопки

Чего я хочу, я уже ясно описал: из кнопок, по нажатию на которые открываются ссылки, вытаскивать эти ссылки. Я не веб-программист и не разработчик расширений, поэтому, задав вопрос «существуют ли такие расширения», не должен задаваться вопросом сложности задачи и на этом основании однозначно угадывать, могут ли такие расширения существовать. Хотя думаю, что вряд ли эта задача такой глобальной сложности, что была бы сложнее самого сложного расширения из существующих, и поэтому даже предположение существования такого расширения фантастично. А если это действительно так, можно было бы это объяснить и в более приличной и обоснованной форме.

Отредактировано rsuan (29-12-2015 16:20:17)

Как узнать какая функция работает при нажатии на кнопку?

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

• Вопрос задан более трёх лет назад
• 21378 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 4
Разработчик на Django/Python, JavaScript

Открываете инструменты разработчика в Chrome. Там есть вкладка Sources. Справа внизу раскройте список Event Listener Breakpoints и отмечайте галочкой любое событие, которое вы хотите отслеживать.

Ответ написан более трёх лет назад
Комментировать
Нравится 6 Комментировать

ildar r. khasanshin @ildarkhasanshin

в firefox в инспекторе сразу видно событие элемента https://s.mail.ru/Gi6q/BE3dWaNnZ
в chrome приходится искать только во вкладке event listeners справа https://s.mail.ru/2LfP/B85b1z5Ed
возможно настроить панель хрома аналогично фоксу в этом отображении событий?

добавлено позже
пока что нашел расширение visual event, но с ним не очень удобно

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

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
javascript-разработчик

отладчик хрома, вроде позволяет следить за вызовом всего и вся. Если я не ошибаюсь, то закладка Profiles.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Кокер-спаниель

firefox firebug все показывает.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript

Как вставить инлайновый скрипт на DOM веб страницы при разработке расширения для гугл хром?

• 1 подписчик
• 2 часа назад
• 55 просмотров

Как получить ссылку при нажатии на кнопку и перейти по ней?

Если строка с class=»add_to_cart_button» содержит «Выберите параметры»,
то при нажатии на button class=»add-to-card-one» получить url от строки выше (кнопки выберите параметры) и перейти по этому url. Помогите пожалуйста решить.

Отслеживать
7,797 13 13 золотых знаков 25 25 серебряных знаков 55 55 бронзовых знаков
задан 1 фев 2022 в 10:01
Михаил Прошутин Михаил Прошутин
13 2 2 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

$(document).on('click', '.add-to-card-one', function() < let href = $(this).prev('a.add_to_cart_button').attr('href'); if (href !== undefined) < console.log(href); //location.href = href; // >);

 Выберите параметры Купить в один клик

Отслеживать
ответ дан 1 фев 2022 в 10:21
Алексей Шиманский Алексей Шиманский
71.9k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков
А как добавить условие? Если содержит текст то выполнить весь ваш код
1 фев 2022 в 10:32

Какой текст? Где именно текст? Ориентир на текст — не верное решение. Правильно ориентироваться на атрибуты, классы и пр.

1 фев 2022 в 10:32

Если у строки есть класс .product_type_variable то в таком случае запускать скрипт, как сделать такое условие?

1 фев 2022 в 10:41
У какой строки? какой запускать скрипт? ничего не понятно
1 фев 2022 в 10:44
1 фев 2022 в 10:44

• javascript
• html
• jquery

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как узнать ссылку кнопки на сайте

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

Страницы: 1

• Форумы
• » Поддержка пользователей
• » Копировать ссылку с кнопки

№1 23-12-2015 18:54:19

rsuan Участник Группа: Members Зарегистрирован: 30-12-2010 Сообщений: 116 UA: 38.0

Копировать ссылку с кнопки

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

№2 24-12-2015 08:48:42

Vladimir_S Участник Группа: Extensions Откуда: Санкт-Петербург Зарегистрирован: 19-09-2008 Сообщений: 4493 UA: 44.0

Re: Копировать ссылку с кнопки

rsuan пишет

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

Пример такого сайта с кнопкой можно попросить?

«Большинство философов до сих пор придерживается весьма нефилософских воззрений на многие вопросы философии» Эдгар Аллан По

№3 27-12-2015 17:50:15

rsuan Участник Группа: Members Зарегистрирован: 30-12-2010 Сообщений: 116 UA: 38.0

Re: Копировать ссылку с кнопки

Если конкретно то меня интересует кнопка Просмотреть в новостях Вконтакте. Например https://vk.com/wall-45804734_4970

№4 27-12-2015 19:36:53

Dzirt Участник Группа: Members Зарегистрирован: 26-02-2012 Сообщений: 1892 UA: 43.0

Re: Копировать ссылку с кнопки

rsuan, если на кнопке висит обработчик javascript, то ничего кроме javascript(0) вы с нее не скопируете. По сути такая кнопка совсем не ссылка. Вы это понимаете?

PS: Другой пример кроме vk привести не можете? Регистрироваться в этой «мусорке» только для того, чтобы посмотреть на пример вашей кнопки, как-то слишком уж.

№5 28-12-2015 19:00:52

rsuan Участник Группа: Members Зарегистрирован: 30-12-2010 Сообщений: 116 UA: 38.0

Re: Копировать ссылку с кнопки

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

№6 28-12-2015 23:02:30

Dzirt Участник Группа: Members Зарегистрирован: 26-02-2012 Сообщений: 1892 UA: 43.0

Re: Копировать ссылку с кнопки

rsuan пишет

есть какие-нибудь расширения для расшифровывания этих java скриптов

Гы-гы! Вы хотя бы приблизительно понимаете, чего вы на самом деле хотите? Я на 99,99999% уверен, что нет и даже мысли не возникает о сложности задачи. Успехов вам в дальнейшем незнании

№7 29-12-2015 16:16:19

rsuan Участник Группа: Members Зарегистрирован: 30-12-2010 Сообщений: 116 UA: 38.0

Re: Копировать ссылку с кнопки

Чего я хочу, я уже ясно описал: из кнопок, по нажатию на которые открываются ссылки, вытаскивать эти ссылки. Я не веб-программист и не разработчик расширений, поэтому, задав вопрос «существуют ли такие расширения», не должен задаваться вопросом сложности задачи и на этом основании однозначно угадывать, могут ли такие расширения существовать. Хотя думаю, что вряд ли эта задача такой глобальной сложности, что была бы сложнее самого сложного расширения из существующих, и поэтому даже предположение существования такого расширения фантастично. А если это действительно так, можно было бы это объяснить и в более приличной и обоснованной форме.

Отредактировано rsuan (29-12-2015 16:20:17)

Что лучше использовать: ссылки или кнопки

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

Почему возникает проблема

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

Ссылки создаются с помощью тега .

Кнопка — это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.

Для кнопок используют тег .

9 900 руб. 

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

Что случится, если вместо ссылки сделать кнопку

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

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

При наведении курсора на правильную ссылку её адрес появляется внизу окна браузера. URL-адрес, обёрнутый в , не отобразится.

Что произойдёт, если вместо кнопки сделать ссылку

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

При наведении курсора на псевдоссылку внизу окна браузера появится не адрес, а javascript:; или АдресТекущейСтраницы/# .

Как определить элемент по макету

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

У ссылки должны быть стили для состояния покоя, при наведения курсора :hover , в момент нажатия :focus , активного :active и иногда состояния, когда пользователь уже посещал эту страницу :visited .

У кнопки нет состояния :visited , зато есть состояние блока :disabled .

Однако рассчитывать только на макет не нужно. У ссылки может не быть :visited , а у блока :disabled — это может запутать.

Всё-таки кнопка или ссылка

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

Ссылка

Кнопка

За что отвечает

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

Выполнение какой-либо функции без перехода на другую страницу — добавить в корзину, купить, отправить, проголосовать, войти и т. д.

Что видит пользователь

• При наведении курсора на ссылку внизу окна браузера возникает её адрес.

• Через меню по клику правой кнопкой мыши можно скопировать, отправить, открыть ссылку в новой вкладке.

• При наведении курсора на ссылку внизу окна браузера не отображается адрес.

• Через меню по клику правой кнопкой мыши нельзя скопировать адрес или поделиться им.

Пример

На макете отрисована фраза «Войти». Если клик по ней должен открывать окно для ввода регистрационных данных на этой же странице, это кнопка. Если при нажатии должна открываться отдельная страница для входа, это ссылка.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

• 22 ноября 2023

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

• 1 ноября 2023

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

• 23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

• 18 октября 2023

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

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

• 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

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

• 14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

• 12 сентября 2023

Осмысленный alt-текст: 6 правил

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

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

• 31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

• 13 июня 2023

Как понять, что перед вами заголовок

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

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

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

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

• 8 июня 2023

Как узнать ссылку кнопки на сайте

Войти

Нет аккаунта? Зарегистрироваться

Авторизуясь в LiveJournal с помощью стороннего сервиса вы принимаете условия Пользовательского соглашения LiveJournal

Natalya Tochilnikova

30 June 2007 @ 12:32 am
Как узнать код кнопки?

Есть замечательные сайты, ссылки на которые мне бы хотелось поставить в моем ЖЖ. И у них есть красивые кнопки, которые тоже хочется. Но коды кнопок не известны. Откуда их взять? Кто в курсе?
Например, очень хочется поставить кнопки «Новой газеты» и «Эха Москвы».

9 comments —
( 9 comments — Leave a comment )
ivansim on June 30th, 2007 12:22 am (UTC)

Так ведь кнопка — это ж просто картинка со ссылкой. Если у вас есть картинка и вы знаете адрес сайта, пишете такой примерно код:

(Все квадратные скобки заменить на угловые)
Это кнопка сайта Шендеровича. В первой строке — адрес сайта, во второй строке — адрес картинки-кнопки и ее длина-ширина-рамочка (эти параметры можно опустить)

tochilnikova on June 30th, 2007 10:29 am (UTC)
А как узнать адрес кнопки?
ivansim on June 30th, 2007 11:05 am (UTC)

Ага! Ну тут вообще все просто, главное эту кнопку найти. )

Находите понравившуюся кнопку, на ней кликаете правой кнопкой мышки и выбираете пункт «Свойства»

Из открывшегося окна копируете адрес. Как правило он оканчивается на что-то типа «имя файла».jpg или «имя файла».gif — файлы-картинки.

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

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

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

Зачем мне нужен исходный код сайта?

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

• SEO-специалистам. Не всегда есть возможность проанализировать страницу и узнать, есть ли с ней какие-либо проблемы. Например, чтобы узнать Description страницы, можно не пользоваться специальными плагинами и прочими средствами – достаточно открыть исходный код, и описание будет перед глазами. Аналогичным образом можно посмотреть заголовок страницы, узнать, подключена ли Яндекс.Метрика и другие скрипты.
• Для более глубокого анализа конкурентов. Посмотреть, какими способами продвигается сайт, мы можем через код: ключевые слова, мета-теги и прочее – все это доступно для обычного пользователя.
• Веб-дизайнерам. Речь снова идет о конкуренции, но и не только. Когда дизайнер создает свой сайт, он часто обращается к различным ресурсам, чтобы посмотреть, как расположены те или иные элементы. Все это мы можем узнать на любом сайте: какой отступ у этой кнопки, какого она размера, сколько пикселей та фотография и так далее.
• Для лучшего понимания кода. Изучив основы HTML-кода и CSS-стилей, вы сможете понять, как работает ваш верстальщик и какие элементы следует оптимизировать.

Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как узнать код сайта

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

Как видите, здесь все логично и понятно.

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

Способ 1: Функция «Посмотреть код»

Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».

В результате мы попадаем в инспектор браузера – на экране появляется дополнительное окно, где сверху находится код страницы, а снизу – CSS-стили.

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

Способ 2: «Просмотр кода страницы»

Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.

После этого нас перенаправит на новую страницу со всем исходным кодом:

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

Что такое HTML и CSS

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

Например, часто используется такая конструкция:

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

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

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

Рассмотрим на небольшом примере, как работают стили:

1. Допустим, у нас есть HTML-тег с текстом «Привет! Это мой первый сайт»:
2. Мы хотим, чтобы текст стал другого цвета. Давайте сделаем его красным! Для этого используются каскадные стили (CSS), в данном случае достаточно для тега body прописать стиль «color: red;». В результате текстовый элемент преобразится, а информацию о его стилях мы можем посмотреть в инспекторе браузера:

view-source:https://timeweb.com/ru