- •1 Цель работы
- •2 Пояснение к работе
- •Подстановки
- •2.2 Перечень используемого оборудования
- •3 Задание
- •Вариант 1
- •4 Контрольные вопросы
- •5 Содержание отчета
- •5.2 Цель работы
- •6 Список литературы
- •Практическое занятие 2 «Разметка и эскиз web-страницы тегами html»
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •1. Общая структура
- •2. Атрибуты
- •3. Регистр записи команд
- •4. Escape-последовательности (подстановки)
- •5. Перевод строки, пробелы, табуляция
- •6. Комментарии
- •7. Общие рекомендации
- •8. Цветовые спецификации
- •9. Базовые теги разметки гипертекста
- •12. Заголовки
- •2.2 Перечень используемого оборудования
- •3 Задание
- •4 Контрольные вопросы
- •5 Содержание отчета
- •5.2 Цель работы
- •6 Список литературы
- •Практическое занятие 3 «Создание web-сайта с тремя html-страницами»
- •2. Задание
- •3 Контрольные вопросы
- •4 Содержание отчета
- •4.2 Цель работы
- •5 Список литературы
- •Практическое занятие 4 «Создание web-страницы с использованием таблиц»
- •2. Задание
- •2.1 Размещение таблиц на html-странице. Форматирование текста в таблице
- •В таблице могут использоваться следующие способы выравнивания:
- •2.2 Размещение таблиц на html-странице. Форматирование ячеек таблицы
- •Форматирование заднего фона таблиц, рядов и ячеек:
- •2.3 Размещение таблиц на html-странице. Объединение ячеек таблицы
- •Объединение ячеек таблицы:
- •3 Контрольные вопросы
- •4 Содержание отчета
- •4.2 Цель работы
- •5 Список литературы
- •Практическое занятие 5 «Дополнительные элементы языка html для форматирования web-страниц»
- •2. Задание
- •Коллекция горизонтальных линий
- •Escape-поcледовательности
- •Физические и логические стили
- •3 Контрольные вопросы
- •4 Содержание отчета
- •4.2 Цель работы
- •5 Список литературы
- •Практическое занятие 6 «Отправка данных с использованием форм. Создание формы на html-странице»
- •2. Краткие теоретические сведения
- •5.2 Цель работы
- •Практическое занятие 7 «Форматирование web-страниц с использованием таблиц стилей. Создание каскадных листов стилей (css)»
- •2.1 Краткие теоретические сведения
- •1. Семейства шрифтов font-family
- •4. Оформление текста text-decoration. Значения: подчеркивание (underline), надчеркивание (overline), зачеркивание (line-through), нет подчеркивания (попе).
- •1. Цвет элемента color — цвет элемента в модели rgb или по стандартным названиям цветов.
- •Отступы.
- •1. Выравнивание text-align — выравнивание абзаца относительно страницы или ячейки таблицы. Значения: по левому краю (left), по центру (center), по правому краю (right), по ширине (justify).
- •5.2 Цель работы
- •Практическое занятие 8 «Подготовка и оптимизация графики для web-страниц»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •5.2 Цель работы
- •Практическое занятие 9 «Создание баннера для web-страницы»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •Варианты заданий
- •Практическое занятие 10 «Создание gif-анимации»
- •Практическое занятие 11 «Создание простейшей анимации в программе Micromedia Flash»
- •2.2 Перечень используемого оборудования
- •3 Задание
- •4 Контрольные вопросы
- •5 Содержание отчета
- •5.2 Цель работы
- •6 Список литературы
- •Практическое занятие 12 «Анимация с использование готовых анимационных эффектов в программе Micromedia Flash»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •5.2 Цель работы
- •Практическое занятие 13 «Создание web-страницы с использованием таблиц»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения
- •5.2 Цель работы
- •Практическое занятие 14 «Создание сайта в программе Macromedia Dreamweaver»
- •1 Цель работы
- •2 Пояснение к работе
- •2.1 Краткие теоретические сведения Основные этапы разработки сайта
- •Типовые виды сайтов
- •2.2 Перечень используемого оборудования
- •3 Задание Вариант 1
- •Вариант 2
- •4 Контрольные вопросы
- •5 Содержание отчета
- •5.2 Цель работы
- •6 Список литературы
Практическое занятие 1
«Применение тегов HTML при создании web-страниц»
1 Цель работы
1.1 Научиться определять основные теги HTML-документа, их атрибуты.
1.2 Определять их вид.
2 Пояснение к работе
2.1 Краткие теоретические сведения
Теги
HTML-файл содержит один тип управляющих конструкций - теги (tags).
тег — единица разметки;
элемент — составная часть документа.
Назначение тегов:
- разделяют исходный неформатированный текст документа на элементы;
- создают новые элементы, которым ничего не соответствовало в тексте (например, графические вставки или Java-апплеты).
Виды тегов:
- парные, охватывающие какой-то фрагмент текста и/или другие теги,
<парный-тег>текст или другие теги</парный-тег>
Парные теги должны вкладываться друг в друга без пересечений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А.
<A> <B> </B> </A>
- непарные, стоящие в одиночестве:
<непарный-тег>
Атрибуты
Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега:
<тег атрибут1="значение" атрибут2="значение" ...>
Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут="значение" распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами.
Подстановки
Чтобы ввести в документ символы, отсутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановки двух видов:
1. мнемонические - имеют вид
& мнемонический код;
например:
è для ё < для <
для символа неразрываемого пробела
2. числовые – имеют вид
& # десятичный числовой код;
например:
б0; для символа неразрываемого пробела
Ссылки и привязки
тег А
Любая ссылка в HTML имеет два обязательных элемента:
источник - то изображение или фрагмент, который заключен между <А> и </А> и щелчок по которому активизирует ссылку;
пункт назначения - URL-адрес документа, на который ведет ссылка.
Адрес назначения может указывать не только на весь документ в целом, но и на какое-то место (точнее, опять-таки, какой-то элемент) внутри документа, в том числе и внутри самого документа со ссылкой. Для этого пункт назначения должен быть помечен с помощью атрибута name тега А создателем того документа, на который делается ссылка. В свою очередь, в теге А в документе-источнике эта метка приписывается к адресу назначения через символ #.
Формы
тег FORM
Формы (forms), или бланки, предназначены для «обратной связи», т.е. отсылки информации от пользователя обратно на сервер. Набор органов управления HTML-бланков соответствует возможностям современных графических операционных систем и включает в себя поля для ввода текста (однострочные и многострочные), флажки, переключатели, выпадающие списки, списки с прокруткой и кнопки.
Тег FORM, объединяет группу связанных по смыслу элементов и указывает адрес той программы на сервере, которой будут посланы введенные пользователем данные из всех элементов формы. HTML-страница может содержать любое количество независимых друг от друга форм, в каждой из которых должна присутствовать «пусковая кнопка», отправляющая данные на сервер. Кнопке этой не обязательно быть стандартной интерфейсной кнопкой, в этой же роли может использоваться изображение, а для простых форм, состоящих из одного поля ввода или выпадающего списка, посылка данных может активизироваться нажатием Enter в поле ввода или операцией выбора элемента в списке.
Изображения и объект
Тег IMG
Тег IMG, предназначенный для вставки изображений, относится к тегам, создающим новые элементы документа, отсутствовавшие в исходном тексте. Тег этот ссылается на хранящееся в отдельном файле изображение в формате GIF или JPEG; этот графический файл может располагаться там же, где и HTML-файл страницы (в таком случае в атрибуте src достаточно указать имя файла), а может лежать и в другом каталоге и даже на другом сервере (в этом случае нужно указывать полный URL-адрес). Большинство атрибутов этого тега управляют форматированием изображения, устанавливая его размеры, поля, выравнивание и проч.
Таблицы
Тег TABLE
Тег TABLE чаще используется для визуального форматирования страницы, чем для представления табличного по своей природе материала.
Используются атрибуты height, width, cellspacing, cellpadding, border для форматирования внешнего вида таблицы.