Содержание
- 2. До этого момента мы с тобой рассматривали только работу с текстом. Но разве можно себе представить
- 3. 3 В самом начале, когда мы просто рассуждали о том, что такое язык гипертекстовой разметки, ты
- 4. Абсолютные пути используются крайне редко, это бессмысленно, так как абсолютный путь заставляет браузер делать больше работы,
- 5. С чем это связано? 5 Это в том случае, когда html-страница находится в одном каталоге с
- 6. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
- 7. Альтернативный текст выведется и в том случае, если произошло что-то, в результате чего изображение просто не
- 8. Теперь давай разберёмся со вставкой изображения на практике. На страницу, созданную в предыдущем уроке, поместим свою
- 9. Но есть ещё более простой и удобный способ — онлайн-конвертер! Их на самом деле много, все
- 10. ИНСТРУКЦИЯ ДЛЯ ДАЛЬНЕЙШИХ ДЕЙСТВИЙ ПРИВЕДЕНА ПРЯМО НА ОТКРЫВШЕЙСЯ СТРАНИЦЕ. ВОТ И ВСЁ! И НЕ НУЖНО РАЗБИРАТЬСЯ
- 11. Сохрани или скопируй уменьшенную фотографию в то место, где размещена сейчас твоя страница. Переименуй файл изображения,
- 12. При записи атрибута src обрати внимание на расширение файла. В нашем примере расширение .png означает, что
- 13. Допиши в теге атрибут alt, указав в нём альтернативный текст, например: Сохрани изменения и скопируй файл
- 14. ВЕРНЁМСЯ К РАЗГОВОРУ О ФОРМАТАХ ГРАФИЧЕСКИХ ФАЙЛОВ. Несмотря на большое разнообразие графических форматов, в веб-разработке чаще
- 15. ВЕРНЁМСЯ К РАЗГОВОРУ О ФОРМАТАХ ГРАФИЧЕСКИХ ФАЙЛОВ. Зато формат GIF позволяет создавать анимированные изображения. А ещё
- 16. ВЕРНЁМСЯ К РАЗГОВОРУ О ФОРМАТАХ ГРАФИЧЕСКИХ ФАЙЛОВ. Таким образом, формат JPEG лучше всего подходит для фотографий,
- 17. Наверняка твоя фотография теперь выглядит зернистой или размытой, как будто она плохого качества. Как уже было
- 18. Чтобы убедиться в сказанном, заменим фотографию на нашей странице изображением формата SVG. Для этого тебе потребуется
- 19. Вместо удаления кода вставки фотографии на страницу, просто закомментируем его. Комментарий в HTML-коде задаётся так: Текст
- 20. Сохрани изменения и обнови страницу в браузере, чтобы убедиться, что фотография больше не отображается на странице.
- 21. Сохрани изменения и обнови страницу в браузере. Теперь вместо фотографии ты увидишь на странице изображение смайла:
- 22. Вообще-то, SVG — это не просто формат файлов векторной графики, это язык разметки, как и HTML,
- 23. Давай попробуем! В файле index.html закомментируй ещё и код вставки векторного изображения, а затем помести под
- 24. 24 В данном коде задана последовательная отрисовка пяти окружностей с соответствующими координатами центров этих окружностей, радиусами
- 25. Чтобы понять, о чём речь, вернёмся к нашей первой веб-странице. Открой в текстовом редакторе файл index.html
- 26. Для того чтобы разместить каждое изображение на отдельной строке, придётся воспользоваться тегом принудительного переноса строки или
- 27. Обрати внимание, что вставлять тег после третьего изображения, которое внедрено на страницу с помощью тегов ,
- 28. Поместить в отдельный абзац можно было и каждое изображение, но в данном примере важно понять следующее:
- 29. Далее мы рассмотрим очень интересную возможность HTML: научимся накладывать на изображения карты с активными областями! 29
- 30. Теперь поясним, что именно мы будем делать. Мы создадим простой тест для пользователя: поместим на веб-страницу
- 31. Приступим! Открой файл test.html в текстовом редакторе и запиши теги структуры HTML-документа. Дай документу оригинальный заголовок,
- 32. Наша страница готова, осталось наложить на изображение карту. Для представления графического изображения в виде карты с
- 33. Записав открывающий и закрывающий теги , мы создали элемент карты, при помощи атрибута name задали карте
- 34. Внутри элемент должен содержать ряд элементов , определяющих интерактивные области на изображении. Один элемент описывает только
- 35. Итак, чтобы создать активную область на карте, нужно поместить в теги новый тег и указать в
- 36. Здесь заданы две активных области, совпадающие с кругами на изображении, а также многоугольник, образующийся на их
- 37. Запиши в тегах соответствующие области и допиши в них атрибуты href со ссылками на страницы yes.html
- 38. Обязательным также является атрибут, задающий альтернативный текст, но так как текст в атрибуте alt отображается только
- 39. В атрибутах href тегов мы указали ссылки на так называемые связанные документы. Это веб-страницы yes.html и
- 40. В коде страницы no.html запиши реакцию на промах: 40 Сохрани все изменения и протестируй работу теста
- 41. Использовать карты изображений с активными областями можно не только для перехода по ссылкам к связанным документам.
- 42. Для вставки изображения на страницу используется тег : Атрибут src является обязательным, он указывает браузеру расположение
- 43. Для представления графического изображения в виде карты с активными областями служит элемент . Для этого элемента
- 44. ПРАКТИЧЕСКОЕ ЗАДАНИЕ К ТЕМЕ 1.2 44
- 45. Целью данного курса не является полноценное изучение SVG, но помимо окружностей, для создания примитивных SVG-рисунков можно
- 46. Доработай тест, созданный в уроке, следующим образом: Добавь ещё одну активную область на карту изображения, эта
- 48. Скачать презентацию