Очки X-Ray Goggles позволяют новичкам заглянуть за завесу Интернета
Как лучше всего познакомить с HTML начинающего - студента, ребенка или друга?
Есть много вариантов. Вы можете посмотреть мгновенное видео на Khan Academy. Вы можете поиграть со «скрипкой» HTML (сайтом, который позволяет вам писать и предварительно просматривать фрагменты разметки). Или вы можете воспользоваться классическим подходом - добавить разметку в обычный текстовый файл и загрузить его в браузере.
Возможно, вы когда-нибудь воспользуетесь всеми этими подходами. Но если вы даете новичку возможность впервые познакомиться с HTML, мой самый любимый обучающий инструмент - X-Ray Goggles от Mozilla.
Идея X-Ray Goggles проста. X-Ray Goggles позволяет видеть скрытые за кулисами элементы HTML - во многом аналогично функции просмотра исходного кода в браузере. Разница в том, что в X-Ray Goggles все чисто и просто. Это позволяет вам изучать один элемент за раз, поэтому вам никогда не придется пролистывать страницы разметки.
И вот что самое интересное: вы можете не только увидеть разметку, но и изменить ее.
У вас когда-нибудь было тайное желание переписать первую полосу New York Times? Рентгеновские очки могут сделать это возможным. Ваши ученики хотят заменить картинку на школьном сайте на Хогвартс или Звезду Смерти? Рентгеновские очки тоже могут это сделать. (Изменения, конечно, временные. Вы увидите их на своем компьютере благодаря X-Ray Goggles, но никто другой не станет мудрее.)
Посмотрим, как это работает.
Настройка рентгеновских очков
X-Ray Goggles - это всего лишь крошечный фрагмент JavaScript, который работает в вашем браузере. Это означает, что нет необходимости в установке, проблемах с безопасностью, проблемах с устранением неполадок и, конечно же, бесплатно. Он был разработан Mozilla Foundation как проект с открытым исходным кодом. (Mozilla - это некоммерческий фонд, обслуживающий браузер Firefox и продвигающий открытые веб-стандарты.)
Чтобы начать работу с X-Ray Goggles, вам необходимо добавить специальную закладку на панель инструментов вашего браузера. Вот как:
- Перейдите на https://x-ray-goggles.mouse.org.
- Убедитесь, что вы видите панель закладок вашего браузера. Если он не отображается в Google Chrome, например, откройте меню браузера, выберите Закладки и установите флажок Показать меню закладок. (Если вы используете другой браузер, не беспокойтесь - на странице X-Ray Goggles точно объясняется, какие пункты меню вам нужны для отображения панели закладок.)
- Найдите розовую кнопку с надписью Перетащите меня на панель закладок. Щелкните кнопку и перетащите ее на панель закладок.
Теперь вы увидите новый ярлык под названием X-Ray Goggles.
После того, как вы добавили закладку X-Ray Goggles, вы готовы изучить HTML (и совершить вандализм на некоторых веб-сайтах). Как видите, это просто.
Изучение страницы
Первый шаг - перейти на интересующую вас страницу. Затем щелкните закладку X-Ray Goggles на панели инструментов. Это активирует рентгеновские очки. Теперь вы можете исследовать страницу, просто перемещая указатель мыши.
Куда бы вы ни пошли, X-Ray Goggles находит HTML-элемент под курсором мыши и выделяет его розовой рамкой. Посмотрите этот пример:
Здесь указатель мыши перемещается по трем различным элементам на веб-сайте журнала TIME: изображение вверху, заголовок статьи внизу и описание под ним. В верхнем левом углу розового поля отображается имя элемента для каждого раздела: <img>, <a> и <div>.
Вы можете выключить рентгеновские очки в любой момент, нажав кнопку Esc.
Как переписать журнал TIME
Рентгеновские очки - это интересный способ исследовать страницы. Если вы преподаете быстрый и грязный урок HTML, вы можете описать общий тип элемента (например, якорь или заголовок), а затем попросить учащихся поохотиться за ним в дикой природе.
Но самое интересное происходит, когда вы изменяете содержимое элемента. Для этого наведите указатель мыши на элемент, чтобы он был выделен розовой рамкой. Затем щелкните элемент. Откроется панель с упрощенным HTML-кодом только для этого элемента.
Например, если вы нажмете на заголовок на сайте журнала TIME, вы увидите соответствующий элемент <a> внизу:
И вы можете редактировать то, что видите. Если вы используете X-Ray Goggles, чтобы впервые показать кому-то HTML, все, что им действительно нужно понять, это то, что элемент является контейнером с забавно выглядящим начальным тегом в начале (например, <a>), конечным тегом в конец (</a>) и некоторое содержимое между ними. Затем они могут начать экспериментировать.
Например, если вы попытаетесь изменить заголовок статьи, отображаемый в элементе <a>, вы получите следующий результат:
Вы можете использовать X-Ray Goggles, чтобы добиться более значительных изменений. Например, вы можете добавлять новые элементы, указывать ссылки на разные адреса и заменять одно изображение другим.
Рассмотрим элемент <img>, который вставляет изображение. Если вы измените атрибут src, вы можете указать его на другое изображение. Например, почему бы не заменить портрет Далай-ламы сочным бутербродом с жареным сыром, который вы только что обнаружили в поиске картинок в Google:
Не бойтесь передать X-Ray Goggles тому, кто ничего не знает о HTML. Это отличный способ научиться играть в шутку. В конце концов, иногда лучшее обучение происходит, когда вы можете настроить, изменить и сразу сломать то, чего не до конца понимаете. Вы можете вытащить редакторы HTML позже.
Мы создали бесплатное руководство, которое проведет детей через Интернет с помощью X-Ray Goggles. Попробуйте в Messing Up the Web. И подпишитесь на нашу рассылку, чтобы раз в месяц получать электронную почту с нашими лучшими техническими историями.
