- •2. Литература:
- •3. Задание:
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №2
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №3
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 4
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 5
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 6
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 7
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 8
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №9
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №10
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №11
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа № 12
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №13
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №14
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
- •Практическая работа №15
- •2. Литература:
- •3. Задание:
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •Контрольные вопросы:
- •Практическая работа №16
- •2. Литература:
- •3. Задание:
- •4. Содержание отчета:
- •5. Порядок выполнения работы:
- •6. Контрольные вопросы:
5. Порядок выполнения работы:
5.1 Создайте свою папку, куда в дальнейшем будете размещать свои документы.
5.2 Запустите Блокнот.
5.3 Наберите HTML – код своей программы.
5.4 Сохраните свой документ с расширением *.html, для чего в меню файл выберите команду Сохранить как... Из перечня Тип файла выберите Все файлы.
5.5 Откройте свой файл и просмотрите результат.
6. Контрольные вопросы:
6.1 Как организовываются ссылки из карты - изображения?
6.2 Как поменять размеры изображения?
ПРИЛОЖЕНИЕ:
Чтобы разбить картинку на несколько "горячих" областей, лучше использовать специальные программы, которые рассчитывают координаты таких областей по щелчкам мыши. Итак, для начала, нужно поместить изображение в HTML-документе обычным способом
<IMG SRC="1.gif" BORDER="0" HEIGHT="100" WIDTH="100">
Затем, добавить атрибут картирования: USMAP="#....." где: вместо точек, пишется имя карты:
<IMG SRC="1.gif" BORDER="0" HEIGHT="100" WIDTH="100" USMAP="#cartography">
Далее, пишется код самой карты изображения с координатами всех "горячих" областей. Карта определяется тэгами: <MAP NAME="...."> и </MAP>
Код координат областей имеет вид: <AREA SHAPE="RECT" COORDS=".. , .. " HREF="URL"> Код координат вписывается между тэгами карты. Форма "горячих" областей определятся содержимым атрибута SHAPE="..."
SHAPE="CIRCLE" – сферическая форма.
Примерный код:
<IMG SRC="1.gif" BORDER="0" HEIGHT="100" WIDTH="100" USMAP="#MAP1"> <MAP NAME="MAP1"> <AREA SHAPE="CIRCLE" COORDS="58,56,46" HREF="1.html"> </MAP>
SHAPE="RECT" – прямоугольная форма.
Примерный код:
<IMG SRC="1.gif" BORDER="0" HEIGHT="100" WIDTH="100" USMAP="#MAP2"> <MAP NAME="MAP2"> <AREA SHAPE="RECT" COORDS="17,13,104,95" HREF="2.html"> </MAP>
Практическая работа № 7
Наименование: Конструирование простых и сложных таблиц на web - страницах
1. Цель: Научится создавать простые, сложные таблицы
2. Литература:
2.1 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с.
3. Задание:
3.1 В строке заголовка должен отражаться номер практической работы
3.2 В теле документа создайте заголовок первого уровня, где укажите наименование работы. Заголовком второго уровня – цель работы.
3.3 Создайте простую таблицу следующего вида:
Товар |
Код |
Количество |
Цена |
Клей |
028 |
190 шт |
12,2 руб |
Скотч |
058 |
120 шт |
4,6 руб |
Ластик |
986 |
100 шт |
2,3 руб |
* таблица может быть заполнена другими данными
3.4 Создайте сложную таблицу:
|
|||
|
|
|
|
|
|
||
|
|
|
|
|
|
3.5 Создайте таблицу следующего вида:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|