1. Изображения в HTML-документе. Для уменьшения времени загрузки страницы с графикой полезно указывать размер изображения. Если он известен еще до загрузки страницы, то броузер может отвести рамку для картинки, а затем загружать текст на страницу. Пока загружается графика, посетитель страницы может начать читать текст. Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь само изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.
2. Вставка изображения. Тег <IMG> вставляет графическое изображение или видеоклип.
2.1. Основные атрибуты:
2.1.1. ALT=текст – задается альтернативный текст для броузеров, не поддерживающих работу с изображениями.
2.1.2. BORDER=n – устанавливает толщину обрамления изображения в пикселах.
2.1.3. HEIGHT=n – задается высота изображения в пикселях.
2.1.4. WIDTH=n – указывается ширина изображения в пикселах.
2.1.5. ALIGN=значение – указывается тип выравнивания изображения.
2.1.6. SRC=url – указывает исходный URL изображения. Этот атрибут является необходимым.
2.2. Допустим, нам нужно включить в документ изображение, записанное в файл aaa.jpg, находящийся в одном каталоге с HTML-документом. Тогда:
2.2.1. Открыть файл aaa.jpg в любом графическом редакторе (например, Paint).
2.2.2. Определить размеры изображения (в Paint: Рисунок–Атрибуты).
2.2.3. Строчка в документе будет вот такая: <IMG SRC="aaa.jpg" ALT="Моя первая картинка" HEIGHT=… WIDTH=… ALIGN=…BORDER=…>.
2.3. Задание:
2.3.1. В графическом редакторе Paint нарисовать схематично эмблему своей специальности и сохраните его под именем myfak.bmp в папке html.
2.3.2. Используя графическую программу, сохранить файл mufak.bmp в формате jpg.
2.3.3. В файл main.html вверху страницы по середине вставить картинку Myfak.jpg и ее подписать . Примечание: в качестве альтернативного текста написать «Эмблема металлургического колледжа», ширина рамки – 5 пикселов.
2.3.4. Внизу страницы расположить фотографию Челябинского государственного металлургического колледжа. Установить соответствующую высоты, ширину и толщину рамки, выравнивание по левому краю и рядом по середине фотографии (для этого теги с картинкой заключить в теги параграфа и после этого сделать несколько параграфов, каждый из которых состоит из  ) сделать подпись «Челябинский Государственный металлургический колледж».
2.3.5. Картинку с фотографией оформить в виде гиперссылки на сервер ЧГМК.
2.3.6. В броузере отключить отображение графики (используя систему помощи броузера) и заново просмотреть созданный документ.
2.3.7. Нарисовать в графическом редакторе Paint рисунок, в котором красиво написать «Назад».
2.3.8. Создать новый документ, назвав который photos.html, где разместить свою фотографию и сделать подпись к ней. Внизу страницы по середине сделать надпись «Назад», которую оформить в виде гиперссылки на документ main.html.
2.3.9. В документе main.html сделать гиперссылку на файл photos.html, добавив абзац «Здесь вы можете посмотреть мою фотографию».
2.3.10.В документе second.html и photos.html внизу страницы рядом с надписью «Назад» расположить картинку, которую оформить в виде гиперссылки на главную страницу.
3. Создание gif-файлов на примере GIF конструктора.
3.1. Запустите графический редактор Paint.
3.2. В меню Рисунок выберите опцию Атрибуты.
3.3. Установите размеры изображения 400x50 пикселов.
3.4. Установите цвет фона следующим образом: правой кнопкой мыши щелкнуть серую ячейку (второй ряд сверху, вторую ячейку слева), затем выбрать меню рисунок, команду очистить.
3.5. Выбрать инструмент текст и в левом нижнем углу написать заглавную букву «В» шрифтом Arial, размер – 12.
3.6. Сохранить файл под именем 1.bmp в папке HTML.
3.7. Выбрать инструмент текст и в левом нижнем углу рядом с буквой «В» написать букву «о» цветом отличным от буквы «В», шрифтом Arial, размер – 12. У Вас должен получиться следующий рисунок: . Используя меню Файл и опцию Сохранить как, сохраните файл под именем 2.bmp.
3.8. Аналогичным образом нарисовать все остальные буквы различными цветами, расположив их полукругом, каждый раз сохраняя под другим именем.
3.9. Запустите GIF-конструктор: Пуск/ Программы/ GIF Construction Set 32/ GIF Construction Set 32.
3.9.1. В рабочей области окна конструктора войдите в созданную вами папку.
3.9.2. Выберите опцию Animation Wizard в меню File.
3.9.3. Далее следуйте инструкциям.
3.9.4. На шаге, где Вам будет предложено выбрать величину задержки (Delay), установите значение равное 20.
3.9.5. После того как Вы выберите все графические файлы, нажмите кнопку Отмена в появившемся диалоговом окне выбора файла.
3.9.6. Для просмотра анимации выберите меню Block и затем опцию View.
3.10. Добавьте изображение на все страницы вверху.
4. Звук и видео. Вы можете добавить на свою страничку звуки или видеоклипы. Они могут запускаться автоматически при загрузке странички. Для этого используется тег <EMBED>, который предназначен для встраивания объектов документ.
4.1. Основные атрибуты тега <EMBED>:
4.1.1. SRC=name.ext - имя звукового, видео клипа.
4.1.2. ALIGN=CENTER – расположения пульта управления (LEFT, CENTER, RIGHT).
4.1.3. WIDTH=X – где X ширина видео клипа в пикселах.
4.1.4. HEIGHT=Y – где Y высота видео клипа в пикселах.
4.2. Например: WAV файл со стандартным пультом управления, автостартом и с разрешением повтора: <EMBED SRC="c:\windows\media.wav" WIDTH=145 HEIGHT=55 autostart = true repeat = true></EMBED>.
4.2.1. Задание:
4.2.1.1. С рабочего стола в свою папку скопировать файл world.avi и расположить его внизу страницы.
4.3. Использование тега IMAGE для добавления видеоклипа: <img border="0" dynsrc="world.avi" start="fileopen" align="left">
4.3.1. Задание:
4.3.1.1. Используя тег IMAGE, расположить на своей странице тот же видеоклип рядом с первым.
Лабораторная работа № 7
Формы
Цель: Научиться создавать формы.
Студент должен знать: понятие формы, возможности использования форм, атрибуты для создания форм.
Студент должен уметь: создать собрать данные и передать данные из формы.
. Используя меню Файл и опцию Сохранить как, сохраните файл под именем 2.bmp.