Исследование и изменение вашей первой веб-страницы

Удостоверьтесь, что Рентген-очки установлены

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

Исследуйте элементы

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

Эти квадраты представляют собой элементы веб-страницы. Щёлкните по одному из них, и вы перейдете в редактор кода, где вы сможете придать элементу желаемый вид.

Начните изменять

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

Измените текст

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

Замените изображение

Все изображения используют тег <img> в HTML. В каждом теге <img> вы увидите URL-адрес, который указывает на расположение изображения.

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

Вставьте скопированную URL-ссылку на изображение в редактор кода, и вы увидите в области предпросмотра, что изображение тоже изменилось.

Измените гиперссылку

Вы можете сделать так, чтобы ссылка указывала туда, куда вам нужно.

Все гиперссылки начинаются с <a href=" и содержат URL-адрес, указывающий на место, куда ведет гиперссылка. Проверьте, чтобы URL-адрес был в кавычках, и если вы все правильно сделали, адрес назначения ссылки изменится.

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

Зафиксируйте и опубликуйте!

Если вы допустили ошибку, то можно нажать кнопку Отменить в редакторе кода.

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

Когда вы будете готовы к публикации, нажмите p на клавиатуре, или кнопку Публиковать расположенную на правой боковой панели.

Если вы авторизованы в teach.mozilla.org, то опубликованый ремикс из Goggles будет добавлен на страницу "Мои проекты" на teach.mozilla.org и вам будет выдан уникальный URL, чтобы поделиться с друзьями.

Помогла ли эта статья?

Пожалуйста, подождите...

Эти прекрасные люди помогли написать эту статью:

Illustration of hands

Станьте волонтёром

Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.

Подробнее