27 авг 2022 · 06:28
{"document": [{"text": [{"type": "string", "attributes": {"bold": true}, "string": "Модуль 1. Урок 3. Ссылки, якоря, мультимедиа"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В широком смысле "}, {"type": "string", "attributes": {"bold": true}, "string": "мультимедиа "}, {"type": "string", "attributes": {}, "string": "– это текст, изображение, анимация и прочее. В этой главе под мультимедиа мы будем понимать только звуковые и видео файлы."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Создание документов на основе ссылок"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Одной из главных возможностей языка HTML5 является возможность организации "}, {"type": "string", "attributes": {"bold": true}, "string": "гиперссылок"}, {"type": "string", "attributes": {}, "string": " (ссылок), то есть связей между документами. Гиперссылка (ссылка) может быть не только на файл с расширением *. html, но и на другие файлы (*. doc, *. mp3, *. jpg, *. rar, *. exe и так далее). Переход на любую страницу HTML-документа по ссылке возможен с использованием конструкции следующего вида: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<A HREF= «имя файла» > текст ссылки</A> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Здесь после тега HREF указано имя файла, который будет отображен в случае нажатия мышью на текст (название) ссылки. Текст ссылки по умолчанию выделяется синим цветом и подчеркиванием в браузере."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Создаем многостраничный веб-документ"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Сайт может состоять из нескольких страниц. Одина из них – главная, называется "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html "}, {"type": "string", "attributes": {}, "string": "и является стартовой. Она открывает"}, {"type": "string", "attributes": {"bold": true}, "string": " главную "}, {"type": "string", "attributes": {}, "string": "(домашнюю) страница любого сайта. Остальные документы вы можете называть, как угодно (но, на английском языке). Они все могут лежать в одной папке или в разных. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример 1. Создание сайта из трех страниц"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "В данном примере мы создадим HTML-документа из трех страниц: "}, {"type": "string", "attributes": {"bold": true}, "string": "page1. html"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "page2. html"}, {"type": "string", "attributes": {}, "string": " и "}, {"type": "string", "attributes": {"bold": true}, "string": "page3. html"}, {"type": "string", "attributes": {}, "string": ". Между страницами создадим переходы в виде гиперссылок:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "page 1. html "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P>Страница 1"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P>Текст страницы № 1"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P> <A HREF= «page 2. html» >Ссылка на страницу 2</A>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P> <A HREF= «page 3. html» >Ссылка на страницу 3</A>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Так выглядит этот код в браузере (рис. 1)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "1.jpg", "filesize": 5984, "height": 153, "pic_id": 138612, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/27/1_bVVYMPq.jpeg", "width": 182}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 1. "}, {"type": "string", "attributes": {}, "string": "Страница 1 открыта в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "page 2. html "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P>Страница 2"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P>Текст страницы № 2"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P> <A HREF= «page 3. html» > Ссылка на страницу 3</A>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P> <A HREF= «page 1. html» > Ссылка на страницу 1</A>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "page 3. htm: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P>Страница 3"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P>Текст страницы № 3"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P> <A HREF= «page 1. html» > Ссылка на страницу 1</A>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<P> <A HREF= «page 2. html» > Ссылка на страницу 2</A>"}], "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": "При написании конструкций веб-страниц будьте внимательны. Так, в примере выше "}, {"type": "string", "attributes": {"bold": true}, "string": "page1 "}, {"type": "string", "attributes": {}, "string": "и "}, {"type": "string", "attributes": {"bold": true}, "string": "page (пробел) 1"}, {"type": "string", "attributes": {}, "string": " не одно и тоже, и пропуск пробела является ошибкой. Следует знать, что неправильно написанные вами теги браузером просто игнорируются. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Итак, как создать трехстраничный сайт в порядке повторения изображено на рис. 2."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "2.jpg", "filesize": 24596, "height": 257, "pic_id": 138613, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/27/2_0W30w0Z.jpeg", "width": 506}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 2."}, {"type": "string", "attributes": {}, "string": " Иллюстрация по теме «Сайт из трех страниц» "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Что такое «Внешние ссылки»?"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Внешние ссылки работают не внутри веб-страницы, а уводят посетителя за ее пределы, на какой-либо сайт."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «http: //www. yandex. ru» >Посетить Яндекс</a>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В данном примере внешняя ссылка ведет пользователя в Интернет на поисковую машину"}, {"type": "string", "attributes": {"bold": true}, "string": " http: //www. ya. ru"}, {"type": "string", "attributes": {}, "string": " (рис. 3). "}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "3.jpg", "filesize": 2058, "height": 33, "pic_id": 138614, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/27/3_SGKD2BP.jpeg", "width": 158}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 3."}, {"type": "string", "attributes": {}, "string": " Пример выполнения данного кода в браузере"}], "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": "Новый термин"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Гиперссылки для перехода в пределах одной страницы (как правило, вверх или вниз), называется якорем или внутренней ссылкой (anchor). Таким якорем может быть, как текст, так и картинка."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Ниже приведен пример веб-документа с использованием двух якорей "}, {"type": "string", "attributes": {"bold": true}, "string": "home"}, {"type": "string", "attributes": {}, "string": " (переход вверх) и "}, {"type": "string", "attributes": {"bold": true}, "string": "end "}, {"type": "string", "attributes": {}, "string": "(переход вниз)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a name= «home» > <! -- <название якоря -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<A HREF= «#end» >в конец документа</A><br><! -- <ссылка для перехода на метку end вниз -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BR> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! -- <много раз пишем тег BR -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BR> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<A HREF= «#home» > в начало документа</A><! -- <ссылка для перехода на метку home вверх -->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a name= «end» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вид данного кода в браузере приведен на рис. 4."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "4.png", "filesize": 13797, "height": 261, "pic_id": 138615, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/27/4_bXrCOoS.jpeg", "width": 231}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 4."}, {"type": "string", "attributes": {}, "string": " Вид кода в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для лучшего понимания, что такое якорь, давайте рассмотрим еще один пример с внутренней ссылкой (якорем) с названием «"}, {"type": "string", "attributes": {"bold": true}, "string": "top"}, {"type": "string", "attributes": {}, "string": "». Иными словами, в коде ниже есть метка и ссылка для перехода на эту метку (якорь) в пределах одной веб страницы."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p><a name= «top» ></a></p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Здесь должен быть очень длинный текст"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p><a href= «#top» >вверх</a></p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В этом примере, прочитав очень длинный текст (его можно откуда-нибудь скопировать в блокнот или заменить тегами <BR>), вы можете нажать на ссылку «вверх» и вернуться к началу документа на метку «top»."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Ссылка на изображение"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p><a href= «images/1. jpg» >Посмотрите на эту фотографию! </a></p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Здесь ссылка "}, {"type": "string", "attributes": {"bold": true}, "string": "Посмотрите на эту фотографию!"}, {"type": "string", "attributes": {}, "string": " открывает изображение"}, {"type": "string", "attributes": {"bold": true}, "string": " 1. jpg "}, {"type": "string", "attributes": {}, "string": "из папки "}, {"type": "string", "attributes": {"bold": true}, "string": "images."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Использование в качестве ссылки изображения"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Чтобы изображение работало, как ссылка мы создадим в какой-либо папке два файла (рис. 5)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "5.jpg", "filesize": 9010, "height": 150, "pic_id": 138617, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/27/5_YLD2B9x.jpeg", "width": 400}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 5."}, {"type": "string", "attributes": {}, "string": " В папке находится html документ и картинка"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "HTML документ представлен в следующем коде: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<A HREF= «http: //www. yandex. ru» ><IMG SRC= «picture. gif» BORDER= «3» ></A>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Здесь для картинки применена рамочка толщиной в 3 пиксела. Изображение работает как ссылка. Если на него нажать, то произойдет переход на сайт "}, {"type": "string", "attributes": {"href": "http://www.yandex.ru/"}, "string": "http: //www. yandex. ru"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Форматы мультимедиа файлов"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "MP3 - Самый популярный аудиоформат в мире."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "WAV – Этот формат звука не использует сжатие, поэтому его файлы большого объема и малопригодны для размещения звука в Сети."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Формат MPEG-4 (MP4) используется для видео в Интернет и поддерживается большинством мобильных устройств, включая смартфоны, планшеты и игровые консоли."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Формат AVI, созданный в компании Microsoft, создает видеофайлы существенно большого объема, чем MP4, но он уже 20 лет используется, благодаря тому, что его поддерживают все популярные плееры и современные устройства."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Создание ссылок на аудио и видео (мультимедиа) файлы"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Внимание"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для нормальной работы со звуком и видео, на компьютере должны быть плееры и кодеки звука и видео (как минимум – QuickTime)."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Простая ссылка на звуковой файл"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Самый простой способ предложить посетителю послушать музыку, это сделать простую ссылку на звуковой файл: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<A HREF= «music/bongos. wav» > Прослушать звук в формате *. wav</A>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Посетитель вашей страницы, увидев текст в виде ссылки "}, {"type": "string", "attributes": {"bold": true}, "string": "«Прослушать звук в формате *. wav» "}, {"type": "string", "attributes": {}, "string": " сам решит, хочет ли он это слушать и стоит ли на этой гиперссылке щелкать мышкой. Ну, а после щелчка мышкой на такой ссылке начнется загрузка файла "}, {"type": "string", "attributes": {"bold": true}, "string": "bongos. wav "}, {"type": "string", "attributes": {}, "string": "из папки "}, {"type": "string", "attributes": {"bold": true}, "string": "music"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример включения в веб-документ внешних файлов (аудиофайла и видеофайла одновременно)"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "<BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Окно для запуска видеофайла:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BR>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<EMBED SRC= «bird. mp4» WIDTH= «400» HEIGHT= «400» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BR>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Автозапуск видео в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<BR>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<A HREF= «puh. mp3» > Щелчок на этой ссылке запустит звуковой файл</A>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</BODY>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Видео "}, {"type": "string", "attributes": {"bold": true}, "string": "bird. mp4"}, {"type": "string", "attributes": {}, "string": " запускается автоматически, а звуковой файл "}, {"type": "string", "attributes": {"bold": true}, "string": "puh. mp3 "}, {"type": "string", "attributes": {}, "string": "– по щелчку мыши на ссылку. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "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": "string", "attributes": {}, "string": "· Покажите ваше умение в создании ссылок на аудио и видео "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "· Поясните этот код:"}], "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": "</ head>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<A HREF= «https: //www. microsoft. com» > сайт КОМПАНИИ Microsoft</A> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p><a href= «mailto: vpmnovgorod@mail. ru» >Задавайте вопросы по электронной почте</a></p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Пример дистанционного задания"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Сделать сайт о своих увлечениях из 3х станиц с присутствием мультимедиа"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Мой сайт: "}, {"type": "string", "attributes": {"href": "http://x90214q5.beget.tech/"}, "string": "http: //x90214q5. beget. tech/"}], "attributes": []}], "selectedRange": [7474, 7501]}
Комментарии 0