26 авг 2022 · 16:19
{"document": [{"text": [{"type": "string", "attributes": {"bold": true}, "string": "Модуль 1. Урок 2. Работа с Notepad++ и веб изображениями "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Предисловие"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В этом уроке мы продолжим тему урока 1 по форматированию веб текста, а также приступим к изучению новой темы по работе с веб картинками. Также мы познакомимся с заменой Блокнота на программу Notepad++."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Знакомимся с Notepad++"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Блокнот хорош тем, что он бесплатен и по умолчанию входит во все версии ОС Windows. Но, все-же, редактор кода Notepad++ для создания сайтов более удобен (рис. 1). Вот некоторые из его возможностей:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "· Бесплатен;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "· Многооконный интерфейс;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "· Подсветка цветом кода;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "· Автосохранение кода;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "· Быстро открывает даже большие файлы;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "· Наличие подсказок кода;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "· И много других возможностей."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image001.png", "filesize": 48971, "height": 270, "pic_id": 138163, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image001_72pHGnr.jpeg", "width": 1177}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 1."}, {"type": "string", "attributes": {}, "string": " Интерфейс "}, {"type": "string", "attributes": {"bold": true}, "string": "Notepad++"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Настройки Notepad++"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Чтобы работа в Notepad++ была удобной, рекомендуется выолнить его настройки."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Настройка кодировки UTF-8"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Каждый раз, когда вы создаете новый HTML документ в программе "}, {"type": "string", "attributes": {"bold": true}, "string": "Notepad++,"}, {"type": "string", "attributes": {}, "string": " вам приходится менять кодировку файла из ANSI в "}, {"type": "string", "attributes": {"bold": true}, "string": "UTF-8 (без BOM)."}, {"type": "string", "attributes": {}, "string": " Чтобы это выполнялось автоматически, нужно выполнить ряд команд. А именно: "}, {"type": "string", "attributes": {"bold": true}, "string": "Опции-Настройки"}, {"type": "string", "attributes": {}, "string": "-"}, {"type": "string", "attributes": {"bold": true}, "string": "Новый документ "}, {"type": "string", "attributes": {}, "string": "(рис. 2). Здесь должен быть активирован переключатель "}, {"type": "string", "attributes": {"bold": true}, "string": "UTF-8 без метки BOM"}, {"type": "string", "attributes": {}, "string": ". После нажатия на кнопку «Закрыть» при создании нового веб документа, у вас в HTML коде автоматически будет установлена кодировка UTF-8 (без BOM). "}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image003.png", "filesize": 25955, "height": 387, "pic_id": 138164, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image003_ZO5spOi.jpeg", "width": 850}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 2."}, {"type": "string", "attributes": {}, "string": " Настраиваем кодировку "}, {"type": "string", "attributes": {"bold": true}, "string": "UTF-8 (без BOM)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Быстрая вставка шаблона HTML кода"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "HTML документы, которые создает начинающий пользователь обычно содержат такой шаблон:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html> <! -- Указываем формат документа -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head> <! —Пишем название документа -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «UTF-8» > <! -- Определяем кодировку символов документа -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>... </title> <! -- Задаем заголовок документа -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body> <! —Пишем содержание документа -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Можно один раз записать этот HTML код в "}, {"type": "string", "attributes": {"bold": true}, "string": "Notepad++ "}, {"type": "string", "attributes": {}, "string": "и далее, когда он потребуется, вызывать его на экран горячими клавишами. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Выполните в "}, {"type": "string", "attributes": {"bold": true}, "string": "Notepad++ "}, {"type": "string", "attributes": {}, "string": "команду "}, {"type": "string", "attributes": {"bold": true}, "string": "Файл-Новый"}, {"type": "string", "attributes": {}, "string": ", а затем выполните команду «"}, {"type": "string", "attributes": {"bold": true}, "string": "Макросы-Начало записи"}, {"type": "string", "attributes": {}, "string": "». Далее скопируйте из буфера памяти (или наберите вручную) шаблон стандартного HTML документа в "}, {"type": "string", "attributes": {"bold": true}, "string": "Notepad++. "}, {"type": "string", "attributes": {}, "string": "Когда вставка шаблона будет завершена – выполните команду «Макросы-"}, {"type": "string", "attributes": {"bold": true}, "string": "Остановка записи"}, {"type": "string", "attributes": {}, "string": "»."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь нужно сохранить запись. Для этого выполните команду "}, {"type": "string", "attributes": {"bold": true}, "string": "Макросы-Сохранить запись"}, {"type": "string", "attributes": {}, "string": " (рис. 3)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image005.png", "filesize": 8701, "height": 192, "pic_id": 138165, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image005_wywVEP9.jpeg", "width": 345}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 3."}, {"type": "string", "attributes": {}, "string": " Команда "}, {"type": "string", "attributes": {"bold": true}, "string": "Сохранить записанный макрос"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Когда вы исполните команду "}, {"type": "string", "attributes": {"bold": true}, "string": "Сохранить записанный макрос "}, {"type": "string", "attributes": {}, "string": "– появиться такое окно (рис. 4)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image007.png", "filesize": 4079, "height": 193, "pic_id": 138166, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image007.jpeg", "width": 266}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 4."}, {"type": "string", "attributes": {}, "string": " Здесь назначаем горячие клавиши"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь, если вам нужен будет шаблон HTML, то достаточно будет нажать на горячие клавиши "}, {"type": "string", "attributes": {"bold": true}, "string": "Ctrl+Alt+Shift+1"}, {"type": "string", "attributes": {}, "string": " (рис. 5)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image009.png", "filesize": 9915, "height": 232, "pic_id": 138167, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image009.jpeg", "width": 366}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 5."}, {"type": "string", "attributes": {}, "string": " Клавиши вызова шаблонного кода HTML"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Ремарки (примечания)"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Ремарки"}, {"type": "string", "attributes": {}, "string": " - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы. Для чего нужны ремарки? Вот, например, два варианта:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Ремарки позволяют оставлять в исходном коде "}, {"type": "string", "attributes": {"bold": true}, "string": "заметки"}, {"type": "string", "attributes": {}, "string": ". Они помогут вам позднее что-то вспомнить или исправить в коде."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "С помощью ремарок можно убирать информацию в коде, которую потом, может быть, вы захотите вернуть. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Могут быть и другие ситуации"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Ремарки оформляются следующим образом: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! -- Это ремарка - на странице сайта она не отображается. -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это основное содержимое страницы, которое мы увидим."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Посмотрим на этот код в браузере (рис. 6)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image012.jpg", "filesize": 3262, "height": 44, "pic_id": 138170, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image012.jpeg", "width": 194}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 6."}, {"type": "string", "attributes": {}, "string": " Отображается основной текст, а ремарка - нет"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Автоподбор кода (Автозавершение)"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Когда вы будете писать код в редакторе Notepad++, то вы увидите предлагаемые подсказки в виде тегов в списке (рис. 7)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image013.png", "filesize": 4875, "height": 93, "pic_id": 138171, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image013.jpeg", "width": 374}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 7."}, {"type": "string", "attributes": {}, "string": " Нам предлагается подсказка по закрытию тела документа"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Такое окно будет появляться автоматически если настройки"}, {"type": "string", "attributes": {"bold": true}, "string": " Notepad++ "}, {"type": "string", "attributes": {}, "string": "сделаны верно. Выполните команду "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Опции-Настройки-Автозавершение"}, {"type": "string", "attributes": {}, "string": " и проверьте наличие таких настроек (рис. 8)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image015.png", "filesize": 45792, "height": 482, "pic_id": 138172, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image015.jpeg", "width": 850}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 8."}, {"type": "string", "attributes": {}, "string": " Окно"}, {"type": "string", "attributes": {"bold": true}, "string": " Автозавершение"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Выделение кода разным цветом"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Для выделения тегов кода цветом выделите нужную часть кода и нажмите правой кнопкой мыши. В открывшемся списке выберите «"}, {"type": "string", "attributes": {"bold": true}, "string": "Style token"}, {"type": "string", "attributes": {}, "string": "» и любой стиль (рис. 9). Такая потребность возникает, когда код очень длинный и вам часто нужно возвращаться какому-то определенному месту. Выделенный код (подсветка) остается до тех пор, пока вы не закроете документ."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image017.png", "filesize": 48182, "height": 453, "pic_id": 138173, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image017.jpeg", "width": 642}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 9."}, {"type": "string", "attributes": {}, "string": " Пример подсветки кода цветом"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Перенос строк, если текст кода слишком длинный"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Для настройки переноса строк в меню "}, {"type": "string", "attributes": {"bold": true}, "string": "Вид"}, {"type": "string", "attributes": {}, "string": ", отметьте пункт "}, {"type": "string", "attributes": {"bold": true}, "string": "Перенос строк"}, {"type": "string", "attributes": {}, "string": ". После этого, любой длинный текст будет вмещаться в видимую часть окна (рис. 10)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image019.png", "filesize": 8047, "height": 254, "pic_id": 138174, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image019.jpeg", "width": 243}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 10."}, {"type": "string", "attributes": {}, "string": " Перенос строк настроен"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это далеко не все возможности Notepad++. Мы предлагаем вам попробовать в нем поработать. Вернуться из Notepad++ в Блокнот Windows никогда не поздно."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Форматируем текст"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Кpупный шpифт можно задать так: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BIG>Кpупный шpифт</BIG>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Любой фрагмент текста станицы можно выделить жирным шрифтом так: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<B>Жиpный текст</B>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для задания куpсива используются следующие теги:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<I>Курсив (Наклонный текст) </I>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "И еще:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<TT>шрифт как на старой пишущей машинке</TT>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вот что мы увидим в браузере (рис. 11)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image022.jpg", "filesize": 6612, "height": 88, "pic_id": 138175, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image022.jpeg", "width": 290}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 11. "}, {"type": "string", "attributes": {}, "string": "Четыре варианта оформления текста"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Списки"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Разберемся, какими тегами обозначаются "}, {"type": "string", "attributes": {"bold": true}, "string": "маркированные"}, {"type": "string", "attributes": {}, "string": " списки: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<ul>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<li>Первый элемент</li>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<li>Второй элемент</li>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<li>Третий элемент</li>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</ul>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В браузере подобный список будет выглядеть так (рис. 12)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image024.jpg", "filesize": 4098, "height": 62, "pic_id": 138176, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image024.jpeg", "width": 158}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 12. "}, {"type": "string", "attributes": {}, "string": "Маркированный список"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь маркеры зададим как цифры:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<ol>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<li>Первый пункт списка. </li>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<li>Второй пункт списка. </li>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<li>Третий пункт списка. </li>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</ol>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Так код будет выглядеть в браузере следующим образом (рис. 13)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image026.jpg", "filesize": 4935, "height": 73, "pic_id": 138177, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image026.jpeg", "width": 194}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 13."}, {"type": "string", "attributes": {}, "string": " Нумерованный список"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Гоpизонтальная линия"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Тег "}, {"type": "string", "attributes": {"bold": true}, "string": "<HR>"}, {"type": "string", "attributes": {}, "string": " добавляет в HTML документ горизонтальную линию. Закрывающий тег не требуется. Ранее уже говорилось, что в тегах могут размещаться атрибуты - специальные команды, которые расширяют действие тега. Атрибуты линии такие: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "size — устанавливает толщину линии;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "width — устанавливает длину линии в процентах от ширины экрана монитора;"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "color — задает цвет линии."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вот пример трех линий разной длины, толщины и цвета"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<HR SIZE=2 color=red WIDTH=100%> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<HR SIZE=4 WIDTH=50% color=green > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<HR SIZE=8 WIDTH=25% color= blue > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Этот код в браузере показан на рис. 14. Длина линий здесь задана в процентах от ширины экрана ПК."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image028.jpg", "filesize": 5312, "height": 79, "pic_id": 138178, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image028.jpeg", "width": 410}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 14. "}, {"type": "string", "attributes": {}, "string": "Пример задания трех линий с разными атрибутами"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Графические форматы для сайтов"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В веб-дизайне принято использовать такие растровые графические форматы: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Формат "}, {"type": "string", "attributes": {"bold": true}, "string": "GIF"}, {"type": "string", "attributes": {}, "string": " рекомендован для анимаций. Однако, максимальное число цветов, которое может хранить его палитра GIF - 256. То есть, для качественных фотографий он не подходит."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Графический файл в формате "}, {"type": "string", "attributes": {"bold": true}, "string": "JPEG"}, {"type": "string", "attributes": {}, "string": " содержит 16 - битную (и более) информацию о цвете пиксела. Файл, записанный в формате JPEG, примерно в 6 раз меньше файла, записанного в формате GIF, при одинаковом (на глаз) качестве изображения. Принято использовать JPEG - для фотографии."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "PNG"}, {"type": "string", "attributes": {}, "string": " является форматом сжатия (как и JPEG) и имеет разновидности: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов (как GIF), а PNG24 использует 16 миллионов цветов (как JPEG). Но, главное отличие формата PNG от GIF и JPEG в поддержке прозрачных изображений (это когда каждому пикселю в отдельности можно задать свою степень прозрачности)."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Формат "}, {"type": "string", "attributes": {"bold": true}, "string": "SVG"}, {"type": "string", "attributes": {}, "string": " (в отличие от четырех предыдущих) векторный. Размер картинок SVG намного меньше размера любых растровых изображений, а сами изображения не теряют в качестве при масштабировании. На сайтах мы можем взаимодействовать с изображениями в формате SVG при помощи каскадных таблиц стилей (CSS), а при помощи JavaScript можно анимировать SVG изображения. Формат поддерживается всеми браузерами и используется чаще всего для логотипов и иконок."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "WebP"}, {"type": "string", "attributes": {}, "string": " новый графический формат, созданный компанией Google. Главная цель этого формата — ещё больше, чем в других форматах для веб уменьшить вес (при визуальном сохранении качества картинок). Этот чудо формат сжимает изображения лучше, чем PNG и JPEG, а также поддерживает прозрачность как PNG. Однако его «любят» не все браузеры."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Работа с изображениями"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для вставки картинки в веб-документ используют тег вида"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «1cat. jpg» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Важно при этом понять, что между кавычками пишут не только название изображения, но и путь к нему. Например, если картинка расположена в папке ABC, то запись тегов такова:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «ABC/cat. jpg» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Но, если картинка лежит в том же каталоге (папке), в которой лежит и "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html"}, {"type": "string", "attributes": {}, "string": ", то путь (маршрут до картинки) прописывать не нужно – достаточно указать название картинки и ее расширение. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Посредством атрибутов "}, {"type": "string", "attributes": {"bold": true}, "string": "width"}, {"type": "string", "attributes": {}, "string": " (ширина) и "}, {"type": "string", "attributes": {"bold": true}, "string": "heigh "}, {"type": "string", "attributes": {}, "string": "(высота) можно задать размеры изображения в пикселах:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «cat. jpg» width= «100» height= «100» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Если размеры не заданы, то картинка рисуется в реальных ее размерах. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример вставки картинки на веб страницу:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «sobaka. jpg» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<IMG SRC= «sobaka. jpg» widh=50 height=50>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Отображение данного кода в браузере приведено на рис. 15."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "image029.png", "filesize": 476093, "height": 560, "pic_id": 138180, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image029.jpeg", "width": 800}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 15"}, {"type": "string", "attributes": {}, "string": ". Задание картинки с разными для нее атрибутами"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Выравнивание изображений (тег align)"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметр "}, {"type": "string", "attributes": {"bold": true}, "string": "align"}, {"type": "string", "attributes": {}, "string": ". У этого параметра есть несколько значений. Например, запись "}, {"type": "string", "attributes": {"bold": true}, "string": "align= «left» "}, {"type": "string", "attributes": {}, "string": " ставит картинку слева."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «cat. jpg» align= «left» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Картинка слева, а текст обтекает ее справа, и этот текст может занимать несколько строчек."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Результат выполнения кода в браузере приведен на рис. 16."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image032.jpg", "filesize": 13086, "height": 194, "pic_id": 138181, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image032.jpeg", "width": 290}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 16. "}, {"type": "string", "attributes": {}, "string": "Для картинки задан код "}, {"type": "string", "attributes": {"bold": true}, "string": "align= «left» "}, {"type": "string", "attributes": {}, "string": " (картинка слева)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример кода с параметром align= «right» "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «cat. jpg» align= «right» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Выполнение кода в браузере изображено на рис. 17."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image034.jpg", "filesize": 16541, "height": 240, "pic_id": 138182, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image034.jpeg", "width": 311}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 17."}, {"type": "string", "attributes": {}, "string": " Для картинки задан код "}, {"type": "string", "attributes": {"bold": true}, "string": "align= «right» "}, {"type": "string", "attributes": {}, "string": "(картинка справа)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Картинка как гиперссылка"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Для работы подготовим такой набор файлов (рис. 18). Все эти файлы поместим в папку вместе с файлом "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image036.jpg", "filesize": 5744, "height": 112, "pic_id": 138184, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image036.jpeg", "width": 349}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 18. "}, {"type": "string", "attributes": {}, "string": "Три файла необходимы, чтобы картинка работала как ссылка (кнопка)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Код файла "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html "}, {"type": "string", "attributes": {}, "string": "такой:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P>Изображение можно сделать «горячим», то есть осуществлять переход при нажатии на изображение: </P> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P><A HREF= «zadanie1. htm» ><IMG SRC= «1. gif» ></A></P> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</BODY> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вид кода в браузере (рис. 19)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image038.jpg", "filesize": 7504, "height": 163, "pic_id": 138185, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image038.jpeg", "width": 266}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 19."}, {"type": "string", "attributes": {}, "string": " Отображение файла "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html"}, {"type": "string", "attributes": {}, "string": " в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "При нажатии мышкой на картинку откроется содержание файла "}, {"type": "string", "attributes": {"bold": true}, "string": "zadanie1. html "}, {"type": "string", "attributes": {}, "string": "(рис. 20)"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image040.jpg", "filesize": 4549, "height": 37, "pic_id": 138186, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image040.jpeg", "width": 266}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 20. "}, {"type": "string", "attributes": {}, "string": "Текстовое содержимое файла "}, {"type": "string", "attributes": {"bold": true}, "string": "zadanie1. html"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Вопросы и задания для самопроверки"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Форматируем текст (крупный, жирный, курсив)"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Создаем маркированные и нумерованные списки"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Пишем ремарки"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Рисуем гоpизонтальные линии разной длины (в процентах), толщины и цвета "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Перечислите графические форматы для сайтов и области их применения"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Расскажите о тегах для выравнивания изображений, обтекании их текстом и задание размеров картинок"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Назначаем картинку как гиперссылку. Подсказка на рис. 21."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "image042.jpg", "filesize": 12454, "height": 284, "pic_id": 138187, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/26/image042.jpeg", "width": 313}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 21."}, {"type": "string", "attributes": {}, "string": " Как сделать изображение гиперссылкой (графическая подсказка)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Пример задания для ДО"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Надо вставить в веб документ картинку формата • WebP и организовать ее обтекание текстом слева. Размер картинки 300 на 400px. Картинку выровнять по центру. Результат прислать в архиве ZIP."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вариант"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вставь WEBP картинку и организуй ее обтекание текстом со всех сторон"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Мой сайт: "}, {"type": "string", "attributes": {"href": "https://taplink.cc/vladimir_vn"}, "string": "https: //taplink. cc/vladimir_vn"}], "attributes": []}], "selectedRange": [11413, 11413]}
Комментарии 0