dizainandkomp.okis.ru

Язык HTML

            Для создания Web-страниц используется особый язык HTML. Этот язык определяет набор специальных команд, называемых тэгами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы.

            Особые тэги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипах и прочих внедренных объектов.

При изучении языка рекомендую воспользоваться электронным самоучителем HTML

Практические задания с примерами выполнения

 

Задание 1.

1. Создать папку под именем названия сайта (латинскими буквами).

2. Открыть Блокнот.

3. Создать Web-страницу под именем index.html.

4. Написать текст для первой страницы сайта. В тэге {title...title} написать название сайта.

5. Просмотреть данную страницу в браузере. Сохранить результат.

6. Сохранить файл под новым именем page 1.html.

7. Изменить данные в части {body...body} Сохранить результат.

8. Повторить предыдущее действие для страниц page 2.html, page 3.html, page 4.html.

9. Просмотреть все страницы в браузере. Результат сохранить.

 Пример страницы в блокноте

Пример страницы в браузере

Задание 2.

1. Открыть главную страницу сайта index.html.

2. В поле {body...body} записать построчно гиперссылки на все страницы Вашего сайта. Сохранить файл.

3. Открыть поочередно страницы сайта и в тэге{title...title} написать конкретные названия страниц. Файла сохранить.

4. Проверить результат в браузере.

5. Изменить цвета ссылок на главной странице. Сохранить файл. Результат проверить в браузере.

Цветовая гамма для ссылок.

ссылка                   64015a

активная ссылка     fd04e3

посещенная ссылка  fdc4f7

Пример страницы в блокноте

Пример страницы в браузере

 

Задание 3

1. Открыть файл page 1.html. Ввести текст с использованием тэгов {h, p, font}.
2. Использовать различные атрибуты тэгов форматирования символов и абзацев.
3. Сохранить файл. Результат проверить в браузере.

Примерный текст.

 Язык HTML

            Для создания Web-страниц используется особый язык HTML. Этот язык определяет набор специальных команд, называемых тэгами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы.

            Особые тэги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипах и прочих внедренных объектов.

Пример страницы

 

 

Задание 4

1. Открыть файл page 2.html.
2. Создать структуру в виде вложенного ненумерованного списка в нумерованный список.
3. Пункты нумерованного списка сделать ссылками на главную страницу.
4. Сохранить файл. Протестировать в браузере.

Пример.

1. Работа с текстом

• Ввод текста
• Форматирование абзацев
• Форматирование символов

      2. Работа с гиперссылками

• Создание обычных гиперссылок
• Создание почтовых гиперссылок
• Использование якорей

       3.  Мультимедиа

• Поддержка мультимедийных данных
• Модули расширения

      4. Форматирование таблиц

• Выделение элементов таблиц
• Параметры ячейки
• Параметры строки
• Параметры таблицы

 Пример страницы

 

Задание 5

1. Открыть файл page 3.html.
2. Залить все цветом 339999.
3. Вставить 4 изображения, используя атрибуты расстояния до текста, рамка, маркер подписи.
4. Возле каждого изображения вести текст. Отформатировать положение текста и изображения, используя атрибут выравнивание. Для каждого изображения значение атрибута поставить разное.
5. Сохранить файл. Протестировать в браузере.

 Пример страницы

 

Задание 6

1. Открыть файл page 4.html.
2. Построить таблицу следующего типа.

   1-й столбец основной таблицы	2-й столбец основной таблицы
   	1-е изображение в основной таблице	1-й столбец вложенной таблицы	2-й столбец вложенной таблицы			2-е изображение в основной таблице
   			21	22	23
   			31	32
   	Нижняя строчка основной таблицы

3. Использовать разные цвета для заливки ячеек основной и вложенной таблицы.
4. Рамки основной и вложенной таблиц сделать разной толщины.
5. Выравнивание текста в ячейках отформатировать как в примере.
6. Файл сохранить. Протестировать в браузере.

Пример страницы

 

Задание 7

1. Открыть файл page 3.html.
2. Создать гиперссылки с использованием  изображений для перехода:
• на главную страницу
• на большее изображение в новом окне
• на большее изображение в текущем окне
3. Файл сохранить. Протестировать в браузере.
4. Открыть файл page 4.html.
5. Создать гиперссылки в ячейках вложенной таблицы на переход на главную страницу.
6. Файл сохранить. Протестировать в браузере.

Пример страницы

 

Задание 8

1. Создать файл page 5.html.
2. Создать структуру страницу, используя таблицу.

   Логотип и название сайта
   Меню (гиперссылки на страницы сайта) пункт 1 пункт 2   пункт N	Содержание сайта с изображениями и гиперссылками
   Сайт создан 2013. Автор сайта - ...©

3. Страницу залить цветом.
4. Ячейки таблицы залить цветами по усмотрению.
5. Файл сохранить. Протестировать в браузере.
6. Удалить файл index.html.
7. Файл page 5.html переименовать в index.html.

Пример страницы

 

Задание 9

1. Открыть файл page 1.html.
2. Набрать текст из примера.
3. Расставить ссылки в начале текста на каждый абзац.
4. В конце текста вставить бегущую строку с параметрами: прокрутка -4 раза, направление движения- влево, поведение строки - прокрутка с остановкой.
5. Сохранить файл. Протестировать в браузере.

Пример текста.

            Все графические изображения делятся на две большие групп по принципу кодирования, хранения в файлах и вывода на экран.

            Растровые изображения представляют собой набор точек; каждая такая точка может иметь какой-либо цвет, от белого до черного.

            Вторая разновидность графических изображений - векторные.

Пример страницы

 

Пример страницы

 

Задание 11

1. Выбрать изображение для создания на нем навигационной карты
2. Открыть данное изображение  в программе Paint.
3. Определить координаты фигур для создания навигации.
4. Вставить рисунок в файл page 1.html.
5. Создать навигационную карту.
6. Сохранить файл. Протестировать в браузере.

Пример навигационной карты

Пример страницы

 

Задание 12

1. Создать несколько файлов, которые станут основой для создания странички, состоящий из фреймов
2. Создать несколько новых файлов, используя различный набор фреймов.
3. Файлы сохранить. Протестировать в браузере.

Примеры расположения фреймов

Пример страницы

 

Задание 13

1. Создать файл style.css для файла index.html, в котором должны быть обязательные параметры:
   • для всех заголовков: одинаковый шрифт, выравнивание
   • для всей таблицы: толщина и цвет рамки, выровненные поля
   • для меню: цвет ссылок, шрифт
   • для основной части: одинаковые абзацы, изображения одинакового оформления, отступ красной строки
   • использование "родительского" подчинения
2. Файл сохранить, связать с файлом index.html. Протестировать в браузере.

Пример страницы