Лабораторная работа создание сайта средствами html упражнение организация структуры вебдокумента

• Название: Лабораторная работа создание сайта средствами html упражнение организация структуры вебдокумента
• Дата: 31.08.2020
• Размер: 245.08 Kb.
• Имя файла: web_html.pdf
• Тип: Лабораторная работа; #136324

1
ЛАБОРАТОРНАЯ РАБОТА
Создание сайта средствами HTML
УПРАЖНЕНИЕ 1. Организация структуры веб-документа.
В своей рабочей папке создайте папку «My_site». Внутри нее создайте папку «images», где будут храниться графические материалы Вашего сайта. Скопируйте в нее содержимое папки
«Картинки для сайта».
Откройте текстовый редактор «Bred3» и введите следующие теги:



установите bgcolor="blue". Т.е. у Вас должна получиться следующая строка:

Сохраните Ваш документ (Ctrl+S), перейдите в окно браузера и нажмите кнопку «Обновить».
Отметьте произошедшие изменения.
Перейдите в «Блокнот» и измените "blue" на "#f05fbb".
Сохраните Ваш документ (Ctrl+S), перейдите в окно браузера и нажмите кнопку «Обновить».
Отметьте произошедшие изменения.
2.2. Установка в качестве фона рисунка.
2.2.1. Фон – одно большое изображение.
В этом случае страничка будет грузиться дольше.
В качестве параметра тега установите background="images/fon1.jpg". Т.е. у
Вас должна получиться следующая строка:

2
Сохраните Ваш документ (Ctrl+S), перейдите в окно браузера и нажмите кнопку
«Обновить». Отметьте произошедшие изменения.
2.2.
2. Фон – фрагмент изображения.
Фрагмент автоматически размножается браузером, поэтому его края должны хорошо стыковаться. Сейчас используем в качестве фона следующий фрагмент:
В качестве параметра тега установите background="images/fon2.jpg". Т.е. у
Вас должна получиться следующая строка:

Сохраните Ваш документ (Ctrl+S), перейдите в окно браузера и нажмите кнопку
«Обновить». Отметьте произошедшие изменения.
Самостоятельно: установите фон сайта на Ваш вкус (цвет или рисунок). Обозначения цветов можно узнать из таблицы.
УПРАЖНЕНИЕ 3. Оформление верхней части веб-страницы.
Теперь ВСЕ(!) теги будем размещать между парными тегами и введите следующий участок кода:

Сохраните Ваш документ (Ctrl+S), перейдите в окно браузера и нажмите кнопку «Обновить».
Отметьте произошедшие изменения.
Для того, чтобы разместить логотип по центру страницы, заключите только что введенную
Вами строку между тегами и .
Теперь отделим заголовок от остального содержимого страницы горизонтальной линией. В следующей строке введите текст:

---

Сохраните Ваш документ (Ctrl+S), перейдите в окно браузера и нажмите кнопку «Обновить».
Отметьте произошедшие изменения.
Самостоятельно: установите цвет, ширину и размер линии на Ваш вкус.
УПРАЖНЕНИЕ 4. Оформление основной части веб-страницы.
Теперь мы выведем данные о чем, собственно, сайт.
В качестве пропедевтической части отобразим на странице следующий текст (просто наберите следующей строкой его после тега ):
На нашей планете есть множество естественных и искусственных объектов,
которые поражают наше воображение. Это пирамиды в Египте и Мексике,
истуканы на острове Пасхи, дворец Тадж-Махал в Индии, Стоунхендж в
Великобритании, Ниагарский водопад в Канаде, Большой каньон в Колорадо и
многие другие. Их называют «Чудеса света». Ежегодно сотни тысяч туристов
приезжают посмотреть на эти диковины, принося ощутимый доход
государствам, на территории которых они расположены.
Сохраните Ваш документ (Ctrl+S), перейдите в окно браузера и нажмите кнопку «Обновить».
Отметьте произошедшие изменения.
Теперь будем этот текст форматировать.

3
Прежде всего, отметим его как абзац. Для этого заключим текст между тегами
и
.
Теперь установим выравнивание при помощи параметра align="justify" (выравнивание по ширине).
Т.е. должно получиться нижеследующее:


На нашей…расположены.

Самостоятельно: измените значение параметра align на "left" затем на"right" и посмотрите, как меняется позиция текста на странице.
Установим теперь атрибуты текста (цвет, размер, гарнитуру). Для этого воспользуемся тегом
Заключите текст между тегами и . Должно получиться следующее:


На нашей…
…
расположены.

Самостоятельно: измените значение параметров face, size и color по Вашему вкусу.
Для акцентирования внимания на отдельных словах используем парные теги и
(
жирный), и (курсив), и (подчеркнутый). Заключите между этими все названия объектов, например:
…
дворец Тадж-Махал в Индии,… или
…
Большой каньон в Колорадо… или
…
пирамиды в Египте…
Добавим в текст рисунок-коллаж. Между тегами и вставьте

vspace="0"
src="images/col.png">
Самостоятельно: изменяя значения параметров align, width, height, hspace и vspace добейтесь оптимального взаимного расположения текста и рисунка.
Добавим следующий абзац:
Однако не обязательно ехать в далекие страны, чтобы увидеть удивительные
природные ландшафты, памятники старины и произведения зодчества. В
нашей стране тоже есть уникальные объекты, включенные ЮНЕСКО в список
Всемирного наследия человечества. Представляем Вам СЕМЬ ЧУДЕС
БЕЛАРУСИ.
Самостоятельно: установите необходимые параметры абзаца и шрифта (по аналогии с предыдущим).
Создадим маркированный список чудес:
<ul type="circle">

Мирский замок

Софийский собор

Борисоглебская церковь

Несвижский замок

Брестская крепость

Беловежская пуща

Озеро Нарочь

4
Для того, чтобы список выводился по центру страницы, необходимо создать таблицу 1х1, т.е. добавить следующие теги:

Мирский замок …………………………… ……………………………. Озеро Нарочь

Самостоятельно: используя уже известный Вам тег и его параметры face, size и color, установите подходящие размер, цвет и гарнитуру шрифта списка (можно всего списка сразу – между тегами

и

или каждого элемента в отдельности - между тегами

и

). Как вариант, семь чудес оформить семью цветами радуги.
Теперь создадим таблицу, которая будет содержать изображения чудес. Поскольку их семь, то таблица будет иметь 2 строки и 4 столбца. Введите следующий участок кода:

Мирский замок	Софийский собор	Борисоглебская церковь	Несвижский замок
Брестская крепость	Беловежская пуща	Озеро Нарочь

Теперь названия чудес заменим их изображениями: вместо текста «Мирский замок» между тегами

и