Создайте новый документ с именем lab1.html и сохраните его в корне своего домена.
Между открывающимся и закрывающимся тегом <body> добавьте текст из файла. Сохраните его и посмотрите в браузере что получилось.
Измените фон страницы и цвет текста согласно рисунку.
Разбейте текст на абзацы используя тег <p>.
Обратите внимание на то, чтобы у вас не было не закрытых тегов.
Установите абзацам выравнивание, например, align=“justify”.
Установите словам жирное, подчеркнутое и курсивное начертание.
Во втором абзаце используйте верхний индекс.
Используя специализированные теги, выделите цитату и программный код. Используйте дополнительный тег <pre> для сохранения числа пробелов между словами в программном коде.
Используя тег <font>, выделите названия поисковых систем.
Измените цвет яндекса на желтый.
Добавьте в документ два линии, первую длиной в 400 пикселей, а высотой в 5 пикселей. А вторую и третью шириной 50%.
Используя теги <h1>..<h6>, выделите заголовки.
Используя коды специальных символов, отобразите на странице знак меньше. И подпишите выполненное задание как указано на рисунке 1.6.
Добавьте к странице свой текст (не менее 1/3 кода) и отформатируйте его.
* Создайте новый файл lab1.1.html и отформатируйте текст таким образом, чтобы он отображался в браузере как на рисунке code.png.
1.3 Контрольные вопросы
Что такое тег?
Какие существуют теги уровня документа?
Какими тегами можно выделить текст жирным, курсивом, подчеркиванием?
Какие атрибуты используются тегом <body>?
Какими тегами можно отметить верхний и нижний индексы?
Какой тег позволяет изменить одновременно шрифт, цвет текста и размер текста?
В чем отличие тегов <br> и <p>?
С помощью чего можно управлять выравниванием абзаца?
Как добавить в документ горизонтальную линию?
Что такое специальные символы и как их можно добавить в документ?
Между какими символами заключаются комментарии?
Лабораторная работа 2. Изображения. Списки. Ссылки
Цель: Научиться добавлять изображения в документ и управлять атрибутами тега. Научиться создавать нумерованные, маркированные и многоуровневые списки. Научиться создавать внутренние и внешние ссылки.
2.1 Теоретические сведения
2.1.1 Изображения
Вставка картинок в html-документ осуществляется с использованием тега <img />.
Тег <img /> имеет следующие атрибуты (см. таблицу 2.1):
Таблица 2.1 - Атрибуты тега
Атрибут |
Назначение |
src |
указывает на путь к графическому файлу. Пути могу быть относительными: photo.jpg, ../img/photo2.gif или абсолютными: http://mysite.com/pic/photo3.jpg |
lowsrc |
путь к графическому файлу худшего качества (и меньшего размера), который грузится перед полноразмерной картинкой |
alt и title |
альтернативный текст для изображения, используется в качестве всплывающей подсказки и поисковыми системами |
border |
толщина рамки вокруг изображения. Цвет рамки определяется текущим цветом текста |
hspace |
горизонтальный отступ от изображения до текста |
vspace |
вертикальный отступ от изображения до текста |
height |
высота изображения, если не задана, то отображается оригинальный размер изображения, если указана – изображение масштабируется |
width |
ширина изображения, если при указании ширины одновременно с высотой не сохраняются пропорции, то изображение искажается |
align |
определяет как рисунок будет выравниваться и обтекаться текстом (см. рисунок 2.1) |
Рисунок 2.1 – Примеры выравнивания изображения относительно текста
2.1.2 Списки
В языке HTML различают следующие виды списков:
маркированные списки;
нумерованные списки;
списки определений.
Для создания маркированных списков применяют тэги <ul> и <li>. Тегом <ul> отмечается начало и окончание всего списка. Тэгом <li> обозначают начало и конец отдельного элемента списка.
По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута type можно изменить стиль маркирования. Пример использования списка приведен в Листинге 2.1:
Листинг 2.1 - Пример маркированного списка
Аналогично маркированным спискам, используя теги <ol> и <li>, можно создавать нумерованные списки. Для создания вариативности нумерации используют: атрибут type для выбора стиля нумерации и start для указания символа, с которого следует начать нумерацию списка. Для тега <li> атрибут value позволяет задать номер текущему элементу списка.
Листинг 2.2 - Пример использования нумерованного
Список определений представляет собой текст, состоящий из двух взаимосвязанных наборов – списка с терминами и списка определений терминов.
Структура списка определений следующая:
Термин 1
Определение термина 1
Термин 2
Определение термина 2
Сам список задается с помощью тега <dl>, термин – тегом <dt>, а его определение – с помощью тега <dd>. Вложение тегов для создания списка определений продемонстрировано в листинге 2.3:
Листинг 2.3 – Пример использования списка определений
