Преподаватель: Казак Ю.Н.. Сформулировать основные принципы добавления графических изображений в WEB-страницы; познакомить обучающихся с тегом вставки.

Презентация:



Advertisements
Похожие презентации
РАЗРАБОТКА WEB-САЙТОВ.. Создание Web-сайтов реализуется с помощью языка разметки гипертекстовых документов HTML. Тэги – инструкции браузеру, указывающие.
Advertisements

Вставка изображений в Web – страницы. В Web- страницу можно вставлять изображения, хранящиеся в графических файлах трех типов : GIF, JPEG, PNG. HTML –
Вставка изображений.. Могут размещаться графические файлы трёх форматов GIF, JPG, PNG. Для вставки изображения используется тэг с атрибутом SRC, который.
КУРС «WEB-ДИЗАЙН». Что такое Web-страница? То, что мы видим в окне браузера, когда заходим на какой-либо сайт! Мы видим веб-страницу сайта – ее содержимое!
Публикация во Всемирной паутине реализуется в форме WEB – сайтов. Сайт является интерактивным средством представления информации. WEB - сайт состоит из.
HTML (HyperText Markup Language) - Язык Разметки Гипертекста.
Язык разметки гипертекста НТМL. С чего начать? 1 шаг 1. Запустить «Блокнот» (пуск-стандартные-блокнот) 2. Сохранить в своей папке документ с параметрами:
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
HTML Язык гипертекстовой разметки. Стандартный текст страницы Моя страничка Эта страничка обо мне.
Проверка знаний Запишите теги : 1 вариант 1. Заголовок страницы 2. Содержание 3. Размер шрифта 4. Абзац 5. Как называется главная страница сайта 2 вариант.
Публикация во Всемирной паутине реализуется в форме WEB – сайтов. Сайт является интерактивным средством представления информации. WEB - сайт состоит из.
РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ.
Рисунок на странице. Начало страницы Конец страницы Заголовок документа. Основное назначение заголовка - это описание общих для всего документа параметров.
Основы Html HTML – HyperText Markup Language – язык разметки гипертекста
2 Стили оформления текста жирный ( bold ) Вася курсив ( italic ) Вася подчеркивание ( underline ) Вася зачеркивание ( strike out ) Вася верхний индекс.
Уроки сайтостроения «Структура html- документа». Что такое Интернет? Интернет, словно город, состоит из домиков – сайтов, которые, в свою очередь, состоят.
Язык разметки гипертекста НТМL. С чего начать? 1 шаг 1. Запустить «Блокнот» (пуск-стандартные-блокнот) 2. Сохранить в своей папке документ с параметрами:
Основы языка HTML Язык разметки гипертекста. Цели урока: Изучить структуру Web-документа; Познакомиться с основными командами форматирования; Научиться.
Вставка изображений в Web-страницы. - тег вставки изображения в документ Изображение появится в том месте документа, в котором записан этот тэг. Команда.
Тема урока: Рисуем куклу с помощью графического редактора Inkscape Преподаватель: Казак Ю.Н.
Транксрипт:

Преподаватель: Казак Ю.Н.

Сформулировать основные принципы добавления графических изображений в WEB-страницы; познакомить обучающихся с тегом вставки картинок; продемонстрировать использования этого тега на конкретных примерах. Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль. Воспитывать внимательность, самостоятельность, бережное отношение к своему здоровью.

1. Что такое НТМL? 2. Что такое браузер? 3. Какие бывают теги? 4. С помощью какого тега можно нарисовать горизонтальную линию? 5. Как выравнивают текст на веб-странице? 6. Как выглядит структура веб-страницы? Дать пояснения. 7. Где должно располагаться описание таблиц? 8. Каким тэгом начинается и завершается каждая таблица? 9. Каким тэгом начинается строка и столбец? 10. Количество строк в таблице определяется числом……, а количество столбцов наличием ….? 11. Какие значения может принимать атрибут 12. Назначение параметров CELLSPACING и CELLPADDING?

Просмотр видеоурока из сети Интернет

Путешествуя по интернету Вы наблюдали на многих сайтах различные картинки, баннеры, графические изображения. Сегодня мы создадим Web- страницу с графическим изображением Добавление изображения происходит в два этапа: 1 этап. Оптимизация изображения (готовится графический файл желаемого размера и формата) Широкое распространение для веб-графики получили два формата GIF и JPEG. Формат GIF предназначен для сохранения растровых изображений с количеством цветов не более 256. Формат JPEG предназначен для компактного хранения многоцветных изображений с фотографическим качеством. Важной характеристикой этих файлов является способность представлять содержащиеся в них данные в сжатом виде. От этого зависит объем файла, что особенно важно при использовании графики в Web. Чем меньше объем файла, тем быстрее он передается по линии связи и загружается в браузер. При подготовке изображений следует учесть несколько моментов. 1. Объем графического файла, встроенного в документ. 2. Размер картинки (ограничение по ширине, не более 800 пикселов), так как изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

Добавление изображения на страницу. Для вставки изображений в HTML документ используется следующая конструкция. Само изображение вставляется с помощью тега img src=" здесь прописывают, где находиться изображение и название самого изображения ", например, img src="Img/ris.jpg", где "Img/ris.jpg" – указывает, что наша картинка лежит в папке Img, а имя файла ris.jpg.

Глазная гимнастика у компьютера. Сядьте на стул, закройте глаза, расслабьте мышцы лица, свободно, без напряжения откиньтесь на спинку стула, положите руки на бедра (10 – 15 секунд). Продолжая держать глаза закрытыми, выполните пальцами легкие круговые поглаживающие движения надбровных дуг и нижней части глазниц от носа к вискам (20-30 секунд). Затем посидите с закрытыми глазами еще 10 – 15 секунд. Откройте глаза и посмотрите вдаль перед собой (2 – 3 секунды). Переведите взгляд на кончик НОСА (3 – 5 секунд). Повторите 6 – 8 раз.

С помощью технологической карты выполнить практическое задание по теме: Создание Web- страницы с графикой.

1.Создать web- страницу 2.Данные писать только о себе. 3. Цвета брать любые из таблицы цветов. 4. Оптимизировать изображение 5. Отправить свою работу по адресу :