Нажмите правую кнопку мыши на интересующем элементе страницы.
Google Chrome : “Просмотр кода элемента”
Opera : “Проинспектировать элемент”
FireFox : “Анализировать элемент”
В других браузерах ищите подобный по смыслу пункт меню.
Всем привет!
Специально вначале статьи выложил всю суть, для тех, кто ищет быстрый ответ.
Информация может быть многим известна, но поскольку пишу для начинающих блоггеров, веб-программистов и прочих старателей, то эта справочная статья обязательно должна присутствовать.
В будущем вы обязательно будете изучать исходный код страниц и отдельных элементов.
Давайте посмотрим на конкретном примере как можно использовать просмотр исходного кода страницы.
Например, мы хотим посмотреть какие ключевые слова (keywords) используются для конкретной страницы. Заходим на интересующую нас веб-страницу и нажимаем Ctrl+U . В отдельном окне или в отдельной закладке откроется исходный код данной страницы. Нажимаем Ctrl+F для поиска фрагмента кода. В данном случае печатаем в окне поиска слово “keywords”. Вас автоматически перебросит на фрагмент кода с этим мета-тегом и выделит искомое слово.
По аналогии можно искать и изучать другие фрагменты кода.
Просмотр всего исходного кода страницы в большинстве случаев не очень удобен, поэтому во всех браузерах существует возможность просмотреть код отдельного элемента или фрагмента.
Давайте применим на конкретном примере просмотр кода элемента. Например, посмотрим есть ли у ссылки атрибут nofollow . Нажимаем правой кнопкой мыши на интересующей нас ссылке и в выпадающем контекстном меню левой кнопкой кликаем по пункту “Просмотр кода элемента” или подобному (в зависимости от вашего браузера). Внизу, в специальном окне для анализа кода, получаем нечто подобное.
Мы видим, что в коде ссылки присутствует rel=”nofollow” . Это значит, что по этой ссылке не будет “утекать” и PR. Об этом подробней поговорим в следующих статьях. Сейчас же важно то, что вы теперь знаете как посмотреть исходный код страницы и исходный код отдельного элемента.
Остановить Продолжить
У каждого своя причина взломать страницу ВКонтакте. Подталкивает на это ревность, любопытство, злость, обида и просто желание покопаться в «грязном белье». Один из популярных способов взломать VK – воспользоваться скрипт-кодом страницы. Он исключает использование специализированных программ и сложных манипуляций.
Чтобы взломать код В Контакте нужно зайти на свою страницу, затем перейти на страничку жертвы и правой кнопкой мыши скопировать в текстовый документ исходный код. Полученная информация поможет осуществить взлом ВКонтакте любой страницы.
Чтобы получить логин и пароль, нужно скопировать цифры ID пользователя. После этого вам станет доступна вся информация – его переписка, фото и многое другое. Вы сможете общаться от его имени, рассылать спам или рекламу.
Важно: с кодами нужно обращаться корректно и вовремя удалять ненужную информацию, иначе можно запутать самого себя!
Получить коды для взлома контакта несложно, нужно потратить немного времени и чужой аккаунт у вас в руках! Этот способ не относится к быстрому взлому, зато если все сделать все правильно, вы завладеете чужими данными.
Помните, чтобы завладеть чужими данными для входа, злоумышленники часто рассылают коды, которые начинаются на «javascript», просят вставить комбинацию в строку поиска и нажать «Enter». Мотивируют это тем, что таким образом нужно подтвердить, что вы не робот или предлагают липовую возможность выиграть приз. Подобный код можно получить с аккаунта друга, если его уже взломали. На самом деле он является мини-программой на JavaScript-языке, с помощью которого ваши куки-файлы отправляются взломщику. Программу вставляют в ссылки и браузеры.
Мораль сей басни такова: с помощью кода «javascript» можно взломать пользователя, но, если такой код приходит вам, ВКлючите лучшую в данном случае защиту – игнорирование.
Просматривая бесчисленное множество сайтов в интернете, можно встретить такие, которые очень нам нравятся. Сразу же возникает ряд вопросов. Сайт сделан с помощью самописного кода или какой-нибудь CMS? Какие у него CSS стили? Какие у него мета-теги? И так далее.
Существует много инструментов, с помощью которых можно извлечь информацию о коде страницы сайта. Но под рукой у нас всегда есть правая кнопка мыши. Её-то мы и будем использовать, на примере моего сайта.
Чтобы посмотреть исходный код страницы сайта, нужно навести курсор мыши на любую область веб-страницы (за исключением изображений и ссылок). После этого нажать на правую кнопку мыши. Перед нами откроется окно с несколькими опциями (в разных браузерах они могут немного отличаться). В браузере Google Chrome, например, это команды:
Нам нужно кликнуть на просмотр кода страницы , и перед нами откроется html код страницы сайта.
Итак, Html код страницы представляет собой пронумерованный список строк, каждая из которых несёт информацию о том, как сделан данный сайт. Чтобы быстрей научиться разбираться в этом огромном количестве знаков и специальных символов, нужно различать разные участки кода.
Например, строки кода, находящиеся в внутри тега head содержат информацию для поисковых машин и веб-мастеров. Они не выводятся на сайт. Здесь можно увидеть, по каким ключевым словам продвигается эта страница, как написаны её title и description. Также здесь можно встретить ссылку, перейдя по которой узнаем о семействе google шрифтов, используемых на сайте.
Если сайт сделан на CMS WordPress или Joomla, то это также будет видно здесь. Например, в этой области выводится информация о теме WordPress или шаблоне Joomla сайта. Увидеть её можно, прочитав содержание ссылок, выделенных синим цветом. В одной ссылке виден шаблон сайта.
Например:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Мы увидим CSS стили шрифтов страницы. В данном случае используется шрифт. Это видно здесь – font-family: ‘Source Sans Pro’.
Данный сайт оптимизируется с помощью сео-плагина Yoast SEO. Это видно из этого закомментированного участка кода:
This site is optimized with the Yoast SEO plugin v3.4.2 — https://yoast.com/wordpress/plugins/seo/
Вся информация, находящаяся внутри тега body, выводится браузером на экране монитора. Здесь мы видим html код страницы, а в самом низу находится код скрипта Яндекс метрики. Он облечён закомментированным тегом с текстом:
/Yandex.Metrika counter
Проведя довольно поверхностный анализ кода главной страницы сайта, можно сделать вывод о том, с помощью каких инструментов сделана эта страница. Мы увидели на ней:
Теперь принцип анализа html кода страницы сайта вполне понятен. Совсем необязательно держать исследуемую страницу открытой в браузере. Сохранить код страницы себе на компьютер можно с помощью комбинаций клавиш ctrl+a, ctrl+c, ctrl+v. Вставьте её в любой текстовый редактор (лучше Notepad++) и сохраните с расширением html. Таким образом, вы в любое время сможете изучить её глубже и найти больше полезной для себя информации.
Думаю что никак, может быть будучи опытным хакером кто-то и занимается тем что меняет HTML-код на чужой странице и тем самым получает доступ к ней, а вот законопослушным пользователям это сделать совсем не просто, да и не стоит в общем.
HTML-код страницы ВКонтакте изменить можно.
Но вс дело в том, что загрузить изменнную Web-страницу на хостинг вы не сможете - у вас же нет никакого доступа к ftp.
А так, можно нажать комбинацию Ctrl + U (Опция Просмотр кода страницы). Откроется код страницы, вы можете скопировать его в любой редактор и отредактировать.
Также можно нажать комбинацию Ctrl + S (Опция Сохранить на компьютер). Web-страница загрузится на ваш жсткий диск. При этом, помимо самой страницы, загрузятся все изображения и скрипты, которые на ней используются.
Советую воспользоваться удобным html-редактором Notepad++. После его установки на компьютер выбираете в контекстном меню файла пункт Edit with Notepad++ и редактируете с помощью редактора вс, что вам необходимо!
Многие пользуется этим для различного рода розыгрышей (подделка переписки, увеличение количество подписчиков, входящих сообщений и тд), а также и в мошеннических целях.
Сначала вы заходите на ту страничку, которую и собираетесь изменять (редактировать html - код).
Далее жмите на клавишу F12 или же сразу наведите курсор мышки на тот элемент, который и хотите поменять. Далее кликаете правой кнопкой мыши и в появившемся окне выбираете пункт Просмотр кода элемента.
Меняем правой кнопкой мыши, находим пункт Edit as Html .
На скриине видно, что изменилась аватарка.
Результат.
Вы не сможете изменить html-код Вконтакте на самом хостинге Вк, пока менеджер компании не устроит вас программистом.
Но вы можете просмотреть код страницы и скопировать его в редактор Wordepad, откуда и будете редактировать html. Для этого нажмите в браузере правой кнопкой мыши и нажмите Просмотр кода страницы.
HTML код это самый главный язык разметки для разных документов.Все файлы,которые написаны кодом HTML имеют свое расширение такое как-.html или же.htm .Данный код можно открыть в любом вашем текстовом редакторе, а также существуют специальные приложения для веб-мастеров.
В браузере нужно перейти туда,где вы хотите исправить код,потом нужно открыть код нужной вам страницы для просмотра. Для этого нужно выбрать пункт меню в браузере.
А потом уже можно его отредактировать в редакторе.
Код открыли, а он не редактируется.
Правильно вы его его видите в режиме просмотра.
А вот чтобы редактировать нужно совсем немного, логин и пароль к доступу на правах администратора сайта Вконтакте - но где ж вы его возьмете?
Открыть исходный код страницы вы, конечно, сможете. И даже отредактировать его. Но сохранить его на сервер не получится. Только на собственный компьютер.
Более того. Подобные сайты не состоят из страниц HTML. Они динамически верстаются по шаблону из базы данных так, как это запрограммировано. Ваш браузер отправляет запрос на сервер. Там запускается скрипт php (например), который собирает необходимые данные воедино и отдат их браузеру под видом HTML. Браузер это кушает и показывает страницу, как будто бы она изначально состояла из того HTML-кода, который слепил ему скрипт.
Изменить HTML- код страницы в контакте просто.
Открываете нужную страницу. В меню браузера ищете пункт Показать исходный код (может быть по-другому). Браузер откроет HTML код страницы. Выделяете все, копируете, вставляете в текстовый документ, и можете изменять.
Вот только что вам это даст? Обратно на сайт вы его не засунете. Страница на сайте останется такой же.
А такое разве реально? Это же чужой сайт. Как там можно изменить структуру сайта? Пологаю что ни как, если только не взломать его
Доброго времени суток, уважаемые читатели моего блога. Бывает находишь на сайте какую-нибудь красивую фишку и начинает мучать вопрос, как же создатель добился такого интересного эффекта.
Оказывается, найти ответ довольно просто. А если вы обладаете кое-какими навыками, то можете насобирать множество таких фишек и за короткое время создать свой уникальный сайт.
Сегодня мы поговорим о том, как открыть код страницы, определенного элемента и научиться использовать этот навык себе во благо.
Мой сайт предназначен для новичков и сперва мне бы хотелось в двух словах рассказать о сайтах и коде в целом.
Чтобы необходимо нарисовать картинку, затем разрезать ее на мелкие части, написать код, благодаря которому браузер снова соберет все элементы в единое целое. Кажется, все очень сложно? Совсем нет, да и горевать по этому поводу не стоит.
Качественные сайты создаются именно так. Хотите – влезайте в это дело и изучайте, нет желания – никто не в силах вас заставить.
Скажу только одно… нет ничего более приятного, чем видеть, как непонятные слова, написанные тобой, преобразуются в единое целое и оживают: ссылки работают, кнопки шевелятся, картинки двигаются, текст ползет. Думаю, что я знаю, как чувствовал себя Виктор Франкенштейн.
Когда вы начнете постигать тайный язык и видеть, что все на самом деле значительно проще, чем казалось изначально вы не можете не верить в собственные силы и возможности мозга. Это очень круто.
Как делаются сайты? В идеале, сперва . Он просто рисует картинку. Например, как показано на рисунке ниже. Пока это всего лишь изображение, фотография. Не работают никакие ссылки, при нажатии вы никуда не переходите, поиск не осуществляется.
По этому рисунку . Посмотрите на скриншот внизу. Вам может показаться, что это нелепый и очень сложный набор символов. На самом деле все не так уж сложно, есть определенный алгоритм.
Существует всего около 150 тегов и каждый из них отвечает за определенное действие: ссылка, перенос, выделение жирным, цвет, заголовок и так далее. Разобраться в них не так уж сложно, если есть желание и не жалко времени.
Благодаря знаниям этих атрибутов можно решить практически любую задачу. Вот только пути для достижения цели каждый разработчик находит свои.
Опытные создатели сразу видят как добиться результата, а другим приходится думать, искать ответа в статьях или в исходном коде конкурентов. Они просто берут необходимую часть на стороннем сайте и редактируют под себя. Это существенно сокращает процесс работы.
Чуть позже, я покажу вам конкретный пример.
Итак, давайте я для начала покажу как действовать, если вам нужно узнать чужой html. Потом мы подробнее рассмотрим все остальные вопросы.
Метод, который я опишу первым, немного сложен для новичков, но в качестве ознакомления – пойдет, читайте. Открываете страничку и нажимаете на правую клавишу мыши. Выбираете пункт «Сохранить как…»
Сохраняете веб-страницу полностью. Как можете увидеть на скриншоте, я уже все скачал заранее. Тут у нас две папки.
Здесь есть все, что необходимо. Каждый элемент. Если разбираетесь в этом, то сможете быстро получить все необходимое. Но, такая задача все чаще становится невыполнимой. Закачка не осуществляется. Что делать если запрещено копировать страницу?
Как вы уже наверное могли заметить, я чаще всего использую Google Chrome и узнать чужой код в этом браузере проще простого. Как в принципе и в любом другом. Схема будет не то что похожая, а идентичная. Открываем страничку, код которой хотим узнать, и щелкаем в любом месте правой клавишей мыши. В появившемся окне кликаем «Посмотреть код страницы».
В новом окне откроется простыня кода, в которой довольно сложно разобраться новичку. Но, не пугайтесь раньше времени.
Если вам нужно узнать код только одного элемента, достаточно навести на него мышью и щелкнуть правой клавишей. Выбираем другую функцию хрома: «Просмотр кода элемента».
Мне, например, может быть интересно каким образом сделан логотип, при использовании картинки или языка программирования? Ведь нарисовать квадрат можно при помощи css. Многие специалисты советуют как можно больше информации прописывать кодом. А как работают на популярных сайтах?
Вот и появилась необходимая информация. Сверху html, внизу css. Это два языка. Первый отвечает за текстовую составляющую, а второй за дизайн. Если бы не было css, то вам пришлось бы каждый раз прописывать цвет, размер шрифта. Для каждой странички, это очень долго. Но если бы не было html, то у нас не было бы текстов. Грубо объяснил, но в целом, все так и есть.
Кстати, если вас заинтересовало как здесь устроен , то можете посмотреть снизу ссылку на картинку. Вот вам и ответ.
Если вы любите работать в мазиле, то все будет точно также. Открываете страничку и нажимаете на правую кнопку мыши. «Исходный код страницы» если хотите увидеть весь код целиком.
При наведении на какой-либо элемент появляется возможность открыть его код.
Здесь данные отображаются в нижней части экрана, а в остальном все точно также.
В Яндекс браузере все точно также, как и в предыдущих двух вариантах, открываем страницу, правая клавиша мыши, посмотреть код страницы.
Наводим курсор на элемент, если хотим узнать именно его код.
Отображается все тут точно также, как и в хроме.
Ну и напоследок Opera.
Кстати, возможно вы заметили, что не обязательно пользоваться мышью. Для открытия кода есть быстрое сочетание клавиш и для всех браузеров оно одинаковое: CTRL+U .
Для элементов: Ctrl+Shift+C.
Вот так выглядит результат.
А теперь смотрите как все работает. Находите вы сайт и очень вам нравится какой-то элемент. Например, вот этот. Как открыть код элемента вы уже знаете.
Теперь копируете его.
Я пользуюсь , вставляю этот код в новый html файл, в тег body (тело по-английски).
Теперь посмотрим, как это все будет выглядеть в браузере.
Готово. Чтобы текст был выровнен по краям и приобрел зеленоватый цвет нужно подключить к этому документу css и скопировать еще один код с того сайта, с которого мы тырили этот.
Сейчас я не буду этим заниматься. На это нужно больше времени: и моего, и вашего. Думаю, что все подробности я опишу в своих будущих публикациях. Подписывайтесь на рассылку и узнаете о появлении статьи первым.
Если же терпеть нет сил, а узнать больше о html и css хочется уже сейчас, то могу по традиции порекомендовать вам бесплатные обучающие курсы.
Здесь 33 урока, которые позволят освоить html — «Бесплатный курс по HTML» .
А тут полная информация о css — «Бесплатный курс по CSS (45 видеоуроков!)» .
Теперь вы знаете чуть больше. Желаю вам успехов в ваших начинаниях. До новых встреч!
