Главная » Статьи » Сайтостроение

КАК ПРЕОБРАЗОВАТЬ HTML-КОД В РИСУНОК

КАК ПРЕОБРАЗОВАТЬ HTML-КОД В РИСУНОК

        Перед пользователями интернета нередко встает вопрос конвертации графических файлов в HTML-код  и наоборот. Зачастую это связано с обработкой графических файлов с помощью браузеров, но могут быть и другие причины. В статьях «Как создать Email с картинками» и «Что делать, если в комментариях нельзя добавить изображение?» рассматривался вопрос о том, как преобразовать рисунок в HTML-код, а вот вопрос, как решить задачу обратного преобразования, мне показался малоизученным. Не то, чтобы  он нигде не освещался, просто даже поисковая система Google не сразу предлагает ответ на него. Поэтому в этой статье я постараюсь дать на него ответы. Я предлагаю рассмотреть два способа преобразования HTML-кода в исходный рисунок, с помощью браузера Google Chrome, и с помощью визуального редактора HTML-кодов.

        Преобразование с помощью браузера Google Chrome

        Это самый простой способ, и о нем уже писалось в статье «Что делать, если в комментариях нельзя добавить изображение?». Все что вам нужно, это иметь компьютер с установленным на нем интернет-браузером Google Chrome (желательно обновленным) и HTML-код интересующего вас рисунка.  Запустите браузер Google Chrome, вставьте в его адресную строку HTML-код и нажмите кнопку «Enter». Если код не слишком громоздкий (объем файла с кодом не превышает 0,5 Мб),то, скорее всего, в окне браузера отобразится исходный рисунок, так, как это показано в заключительной части статьи «Что делать, если в комментариях нельзя добавить изображение?». Если HTML-код громоздкий, (объем файла с кодом 1Мб и более) то, скорее всего, у вас отобразится информация о том, что URL адрес слишком длинный, и браузер не в состоянии его отобразить.  В таком случае предлагаю приступить ко второму варианту визуализации HTML-кода вашей картинки.

        Преобразование HTML-кода в рисунок с помощью визуального HTML редактора

        Этот вопрос частично рассматривался в статье «Как создать Email с картинками». Чтобы выполнить необходимое преобразование, вы можете воспользоваться бесплатными визуальными HTML редакторами «Nvu» или «KompoZer», которые предельно просты в эксплуатации, а их интерфейс интуитивно понятен. Я предлагаю пошагово рассмотреть этот вопрос на примере визуального HTML редактора «Nvu».

        Шаг 1. Запустите редактор. Перед вами откроется окно Рис.1. По умолчанию оно открывается на вкладке «Обычный» (см.1 Рис.1).

        Шаг 2. Вставьте  в рабочую область окна редактора таблицу из одной ячейки. Для этого нажмите кнопку «Вставка» (см.3 Рис.1). В выпавшем меню выберите пункт «Таблица» (см.4 Рис.1). В появившемся окне (см.5 Рис.1) нажмите на левой верхней ячейке (см.6 Рис.1), после чего в рабочей области окна программы «Nvu» появится таблица, состоящая из одной ячейки (см.7 Рис.1).

        Шаг 3. В таблицу из одной ячейки вставьте любой рисунок, имеющийся на вашем компьютере. Вставлять можно как путем перетягивания файла рисунка в область ячейки, так и методом копирования файла с последующей его вставкой. Я использовал фотографию зимнего парка (см.1 Рис.2), и у меня получилось окно Рис.2.

        Шаг 4. Произведите замену HTML-кода вашего рисунка на тот, который вы хотите преобразовать. Для этого поменяйте способ отображения рабочей области с «Обычный» (см.2 Рис.2) на «Код» (см.3 Рис.2). Перед вами откроется окно Рис.3. Найдите тег «<img» и выделите код вашего рисунка. Удалите его и на его место вставьте HTML-код того рисунка, который вы хотите визуализировать.

        Обращаю внимание на то, что от источника получения HTML-кода, который вы хотите преобразовать, будет зависеть и объем удаляемого кода на шаге 4.  Если код, который вы хотите преобразовать в рисунок, начинается с тегов «<img src="» и заканчивается тегами «"">», то и удалять код исходного рисунка нужно с этими тегами. Если же HTML-код рисунка, который вы хотите визуализировать, не содержит вышеуказанных тегов, то вам необходимо удалять только код между открывающимися и закрывающимися кавычками так, как это показано на Рис.3.

        Шаг 5. Проверьте результаты своей работы.

        После замены кода исходного рисунка на HTML-код, который вы хотите преобразовать в рисунок, снова перейдите на вкладку «Обычный» (см.1 Рис.3). Перед вами откроется окно Рис.4. Как вы видите, в рабочей области  окна программы «Nvu» уже отображается не зимний парк, а скриншот ключей реестра, который я использовал при написании статьи «Что делать, если в комментариях нельзя добавить изображение?». А это значит, что процесс преобразования HTML-кода в рисунок выполнен успешно.

        Иценко Александр Иванович

Категория: Сайтостроение | Добавил: inok (24.04.2017) | Автор: Иценко Александр Иванович W
Просмотров: 129 | Теги: рисунок, преобразование, визуальный редактор, google chrome, HTML-код | Рейтинг: 5.0/11
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]