Номер: 220434
Количество страниц: 52
Автор: marvel
Контрольная Информатика, 6 лабораторных работ, номер: 220434
390 руб.
Купить эту работу
Не подошла
данная работа? Вы можете заказать учебную работу
на любую интересующую вас тему
Заказать новую работу
данная работа? Вы можете заказать учебную работу
на любую интересующую вас тему
- Содержание:
"Лабораторная работа №1 по HTML
Цель: Изучение возможностей структурирования и форматирования текста.
1. Создайте шаблон, пользуясь программой ""HomeSite"" и скорректируйте его по приведенному образцу и сохраните его на своей дискете под именем шаблон.html.
2. Откройте файл шаблон.html и сохраните его под именем Имя_1.html в папке, созданной для HTML файлов на своей дискете, где Имя – ваше имя или фамилия.
3. Введите заглавие и два заголовка первого и второго уровней, пользуясь дескрипторами <title> и <h1> и <h2>.
4. Введите абзац текста, состоящий из 2-3х строк и скопируйте его трижды.
5. Для форматирования текста:
5.1 Установите цвет текста (#663333) и фона (#FFFFCC) или другие цвета из безопасной палитры в дескрипторе <body>.
5.2 В первом абзаце с помощью дескрипторов физического форматирования <i>, <b>, <small>, <big> отформатируйте фрагменты абзаца курсивом, полужирным начертанием, а также уменьшенным и увеличенным кеглем. Установите для абзаца шрифт Courier размером 4, пользуясь дескриптором <font> и просмотрите результат в браузере.
5.3 Во втором абзаце используйте дескрипторы физического форматирования <sup>, <sub>, <u> для форматирования фрагментов абзаца как верхнего и нижнего индексов и подчеркивания. Установите для абзаца шрифт Verdana размером 3 произвольного цвета и просмотрите результат в браузере.
5.4 В третьем абзаце используйте дескрипторы логического форматирования <em>,<strong> и <ins> для форматирования фрагментов курсивом, полужирным начертанием и подчеркиванием. Установите для абзаца шрифт Garamond размером 3 произвольного цвета и просмотрите результат в браузере.
5.5 В четвертом абзаце выделите фрагмент дескрипторами <pre> и отформатируйте текст произвольным образом, вставив в него две пустые строки. Просмотрите результат в браузере.
5.6 Добавьте строку текста, содержащую сведения о студенте, выполняющем данное задание (ФИО, адрес, E-mail) и разделите текст на три строки, пользуясь дескриптором <br>. Просмотрите результат в браузере.
6. Используйте средства выравнивания текста.
6.1 Первый абзац выровняйте по ширине, пользуясь атрибутом align=""justify"" и установив для абзаца закрывающий дескриптор </p>. Просмотрите результат в браузере.
6.2 Второй абзац заключите в контейнерный дескриптор <blockquote>. Просмотрите результат в браузере.
6.3 Третий и четвертый абзацы заключите в контейнерный дескриптор <div> и выровняйте по центру. Просмотрите результат в браузере.
Лабораторная работа №2 по HTML
Цель: Изучение средств связывания страниц.
Часть 1. Средства связывания страниц в HTML.
1. Научиться формировать пути в относительных URL.
1.1 Создайте два файла index.html и image.gif. Файл index.html должен содержать гиперссылку на файл image.gif, которая видоизменяется в зависимости от расположения файлов.
1.2 Проверьте работоспособность гиперссылок.
2. Научитесь пользоваться внутренними ссылками.
2.1 В файле index.html введите заголовок ""Глава 1"" и несколько абзацев текста (пользуясь копированием увеличьте документ до двух – трех экранов).
2.2 В конце документа установите ссылку <a href=""#Гл1"">В начало главы</a>
2.3 Заголовок ""Глава 1"" сделайте именованным элементом привязки (якорем) <a name=""Гл1""><h1>Глава1</h1></a>
2.4 Проверьте работоспособность ссылки.
2.5 Создайте в графическом редакторе или позаимствуйте в Интернете изображение стрелки, ведущей вверх и используйте изображение как изображение – ссылку. Расположите изображение стрелки дважды: внизу страницы и в середине текста. В этом случае ссылка будет иметь вид:
<a href=""#Гл1""><img src=""uparrow.gif"" alt=""Вернуться в начало"" width=20 height=25> </a>
2.6 Проверьте работоспособность ссылок.
3. Научитесь использовать почтовую ссылку.
3.1. Создайте в конце документа index.html ссылку на свой почтовый адрес и проверьте ее работоспособность. Ссылка должна иметь вид
<a href=mailto: user@server>Написать письмо to user</a>
Часть 2. Использование CSS для оформления гиперссылок.
1. Создайте в папке Main четыре файла index.html, 1.html, 2.html и 3.html.
2. В файле index.html создайте список ссылок на 1.html, 2.html и 3.html.
3. При наведении мыши на каждую ссылку должна появляться подсказка, содержащая информацию о том файле, на который производится ссылка. Подсказка формируется с помощью атрибута title соответствующего дескриптора.
4. Объявите стиль ссылок, установив цвет и отсутствие подчеркивания, объявление стиля выглядят следующим образом: a {color: …;text-decoration: none}
5. Пользуясь псевдоклассом, установите цвет, увеличенный кегль и подчеркивание для ссылок при наведении курсора, объявление выглядит следующим образом:
a : hover {color: …; font-size:…; text-decoration:underline}
Лабораторная работа №3 по HTML
Цель: использование таблиц для структурирования информации и создания макетов страницы.
1. Создайте html документы, позволяющие построить таблицы, приведенные на рисунках.
2 Создайте HTML документ, в котором расположена таблица, содержащая две строки, в первой находится заголовок – ""Расписание занятий"", а во второй – названия дней недели от понедельника до субботы. Используйте названия дней недели как гиперссылки на соответствующий фрагмент расписания, созданный в отдельном файле.
3 Создайте HTML документ, в котором таблица используется для макетирования страницы так, как показано на рис.
4. Создайте HTML документ, позволяющий построить таблицу, приведенную на рис.
Лабораторная работа №4 по HTML
Цель: изучение способов выравнивания графических изображений на странице.
1. Подготовьте небольшое графическое изображение 5050 px или воспользуйтесь файлом ducky.gif.
2. Создайте HTML документ align_имя_1.html, позволяющий поместить в абзац текста изображение ducky.gif
<p>Данный абзац текста содержит маленькую <img src= ducky.gif alt=ducky width=50 height=50> графическую вставку внутри текста.
3. Просмотрите результат в браузере.
4. Трижды скопируйте данный абзац и используйте три типа выравнивания изображения, находящегося в тексте, относительно базовой линии строки в каждом абзаце: align=""bottom""; align=""top""; align=""middle"".
5. Просмотрите результат в браузере.
6. Используйте выравнивание графического изображения, расположенного вне текста. Для этого создайте конструкцию <p><img src= ducky.gif alt=ducky width=50 height=50 align=""right"">В рассматриваемом примере изображение выравнивается по правому краю страницы и находится справа от текста. Текст при этом обтекает изображение, так как это имело место в текстовом процессоре Word, когда изображение не находилось в тексте, а было расположено в своем слое.</p>
7. Просмотрите результат в браузере.
8. Скопируйте фрагмент html документа и примените выравнивание по левому краю. Измените соответственно текст.
9. Примените атрибуты установки промежутков между текстом и изображением. Поместите изображение внутрь текста абзаца и увеличьте текст. Затем примените атрибуты изображения vspace=10 и hspace=20.
10 Просмотрите результат в браузере.
11. Используйте разделитель строк <br>
11.1. Создайте следующие фрагменты html текста и объедините в документ align_имя_2.html
11.2. Просмотрите результат в браузере. Обратите внимание на то, что изображение является частью текста.
11.3.Добавьте фрагмент <p><img src= ducky.gif alt=ducky width=50 height=50 align=""left""> первая строка <br>вторая строка <br>третья строка
11.4. Просмотрите результат в браузере.
11.5. Добавьте фрагмент, в котором к дескриптору <br> добавляется атрибут clear=""left"", позволяющий прервать текст и расположить его ниже изображения <p><img src= ducky.gif alt=ducky width=50 height=50 align=""left""> первая строка <br>вторая строка <br clear=""left"">третья строка
11.6. Просмотрите результат в браузере.
11.7.Добавьте фрагмент с атрибутом дескриптора <br> clear=""right"" и атрибутами align=""right"" дескрипторов <p> и <img>
11.8. Просмотрите результат в браузере.
11.9. Добавьте фрагмент, содержащий конструкцию clear=""all"" следующего содержания: <p align=""center"">"
"Лабораторная работа №5 по HTML
Цель: Знакомство с построением форм.
Создайте форму, приведенную на рис, пользуясь методическими и справочными материалами и предъявите созданный файл преподавателю.
Лабораторная работа №6 по HTML
Цель: Знакомство с использованием фреймов.
1. Создайте два варианта наборов фреймов, приведенных на рис.
2. В первом наборе расположите заголовок в верхнем фрейме, навигационные элементы в виде списка трех текстовых ссылок – в левом фрейме, а центральный фрейм используйте как целевой для гиперссылок.
3. Используйте псевдоклассы для задания свойств ссылок в исходном состоянии, посещенных, активных и при наведении мыши.
4. Во втором наборе верхний фрейм используйте для заголовка, навигационных элементов и логотипа, средний используйте как целевой, а в нижнем фрейме разместите сведения о разработчике страницы.
"
