Практическое занятие № 1
Тема: «Построение простого
HTML-документа»
Цель: научиться
использовать основные теги для форматирования текста, создания ссылок и
списков.
Ход
работы
Создайте страницу с текстом, образец которой
можно просмотреть по ссылке.
1. В
редакторе создайте новый файл и введите структуру HTML документа. Сохраните файл в отдельную
папку (ПЗ_01) под именем index.html
Указания: запустите программу "NotePad++" и введите структуру будущего документа в виде:
Для этого воспользуйтесь Zen-кодом:
В редакторе напишите html:4t и нажмите Ctrl+E
Выполните команду Файл -
Сохранить. В окне выберите созданную
вами папку ПЗ_02 для хранения файла, укажите тип файла "HyperText Markup Language
File",
введите имя файла index и щелкните ОК.
2.
Настройте параметры вашего документа: задайте кодировку символов utf-8 (в меню
Кодировка) и заголовок страницы. Например,
<title>Моя первая
страница</title>
Сохраните
изменения в файле. Двойным щелчком откройте страницу в браузере и убедитесь,
что в заголовке браузера корректно отображается ваш заголовок.
3.
Настройте параметры страницы: задайте фоновый цвет и рисунок, цвет текста по
умолчанию.
Указания: перед заданием параметров необходимо подобрать
графический файл в качестве фонового изображения. Скачайте
рисунок (или выберите любое другое изображение для фона страницы). В папке
с вашей страницей создайте папку images и поместите в нее скачанный файл c именем
fon4.jpg.
Параметры страницы задаются внутри тега <BODY>. При этом
можно использовать такие параметры как:
- background -
фоновое изображение;
- bgcolor - фоновый
цвет, отображается, если отображение графики в браузере отключено;
- text - цвет текста по
умолчанию.
Также зададим цвет ссылки с помощью атрибута link.
В тег <BODY> через
пробел добавьте следующие параметры (цвета произвольные):
Сохраните изменения. Проверьте отображение
фонового изображения на странице в браузере.
4.
Вверху страницы создайте бегущую строку.
Указания: все содержимое страницы вводится внутри раздела BODY.
Для создания бегущей строки используется тег <MARQUEE>текст</MARQUEE>. Следовательно, внутри тега <BODY> введите
команду вида:
<marquee>
Компилируемый статически
типизированный язык программирования общего назначения
</marquee>
Сохраните изменения. Проверьте отображение
страницы в браузере.
5.
Ниже под бегущей строкой создайте заголовок синего цвета с выравниванием по
центру.
Указания: для создания заголовка воспользуемся тегом <H1>текст</H1>. При этом данный тег имеет параметр ALIGN, с помощью которого заголовок можно выровнять по
нужному краю страницы. Что касается цвета символов, то для этого будем
использовать тег <FONT>текст</FONT> с параметром COLOR.
Под кодом бегущей строки введите команды:
Сохраните изменения. Проверьте отображение
страницы в браузере.
6.
Создайте цитату по образцу.
Указания: со страницы скопируйте текст цитаты. С помощью
клавиши Enter разбейте
ее на нужно количество строк. Автора пробелом (или TABом) переместите вправо.
Сохраните изменения. Проверьте отображение
страницы в браузере.
Видно, что язык HTML всегда
игнорирует все переносы строк и лишние пробелы. Чтобы ваш текст отображался в
том виде, в котором вы его разместили, поместите весь фрагмент в тег <PRE>текст</PRE>. Например, так:
Сохраните изменения. Проверьте отображение
страницы в браузере.
7.
Создание Содержания на странице.
Сначала создадим красный заголовок
Содержание. Такие заголовки будут еще использоваться в документе.
Указания: создаются аналогично первому большому синему
заголовку: с помощью тегов <H> и <FONT>. Только в этом случае заголовок поменьше <H3> и цвет
красный. Выравнивание для этого заголовка – также по центру. Т.е. такой заголовок можно создать с помощью
записи:
Далее создаем внутренние ссылки (якоря) для удобного
перемещения по документу. Ссылки будут на такие заголовки страницы:
История
возникновения
Общие принципы
Новые
возможности
Типы данных
Стандартная
библиотека
Пример
программы
Первый пункт содержания помещаем в тег
<a href="#p1"> История возникновения</a>
Имя метки p1 выбираем произвольно.
После ставим тег перехода на новую строку
<br>
Далее выполняем аналогичные действия для
создания следующих пунктов содержания. Метки называем соответственно p2, p3, …
Получаем содержание в виде:
Разместим все содержание по центру страницы. Поместим все
пункты в контейнер div и выровняем его по центру страницы с помощью атрибута
align=”center”. Получим:
Сохраните изменения. Проверьте отображение
содержания в браузере.
8.
Создание красного заголовка
Указания: подобный заголовок уже создавался. Этот заголовок
красного цвета, выровнен по левому краю, т.е. как по умолчанию, значит,
использовать атрибут align не нужно. Для
создания заголовка используем тег <H3>.
Для того, чтобы из
содержания можно было перейти на этот пункт, используем такую запись:
<a name="p1">История возникновения</a>
Т.е. заголовок будет выглядеть так:
Аналогично будут создаваться остальные
заголовки на странице.
Сохраните изменения. Проверьте отображение
страницы в браузере.
9.
Создайте и отформатируйте два первых абзаца текста
Указания: с исходной страницы скопируйте текст первого абзаца
и поместите его в тег <P>текст</P>.
Чтобы раскрасить текст внутри тега <P> ставьте тег <FONT>текст</FONT> с параметром COLOR. Чтобы сделать текст курсивным внутри тега <FONT> поместите
тег <EM>текст</EM> (или тег <I></I>). У вас должна получиться следующая конструкция:
Обратите внимание, что слова "Бьёрн Страуструп" выделены красным цветом. Значит, данный фрагмент
нужно заключить в свою пару тегов <FONT></FONT> с параметром COLOR="#FF0000"
Выровняйте абзац по ширине. Для этого
тегу <p>
задайте параметр align со значением
"justify".
Сохраните изменения. Проверьте отображение
страницы в браузере.
Аналогично создайте второй абзац. Здесь цвет
символов задайте значением COLOR="#800080", а жирность символов тегом <STRONG></STRONG> (или <B></B>)
У вас должна получиться следующая
конструкция:
Выровняйте абзац по ширине.
Сохраните изменения. Проверьте отображение
страницы в браузере.
10.
Создайте два маркированных списка. Один список промаркирован кружками, другой –
квадратами.
Указания: с исходной страницы скопируйте весь текст,
относящийся к спискам: от заголовка и до следующего заголовка.
Если при копировании текста скопировались и
маркеры – квадраты, кружки – их необходимо удалить.
Текст заголовка "Общие принципы"
отформатируйте так же, как вы форматировали предыдущий заголовок. Используйте
метку p2
для перехода на этот заголовок из содержания.
Абзац под ним не имеет особых параметров
оформления, поэтому просто возьмите текст абзаца в теги <P></P>.
Задайте для текста выравнивание по ширине.
Для создания маркированного списка поместите
первые четыре элемента в теги <UL></UL>. Данный тег в качестве параметра по умолчанию будет
использовать маркер-кружок, что нам и нужно по заданию. А затем каждый элемент
списка в теги <LI></LI>. При этом видно, что текст в списке
синего цвета, поэтому внутри тега <LI> поместить тег <FONT></FONT> с параметром COLOR. Должна
получиться такая структура:
Сохраните изменения. Проверьте отображение
страницы в браузере.
Аналогично ниже создайте второй список. При
этом нужно использовать те же теги. Только для маркировки квадратом нужно в
теге <UL>
указать параметр TYPE="square". То есть запись первой строки будет такая:
<ul type="square">
Все остальное без изменений.
Сохраните изменения. Проверьте отображение
страницы в браузере.
Затем поместите заголовок.
Далее абзац не имеет особых параметров
оформления, поэтому просто возьмите текст абзаца в теги <P></P>.
Сохраните изменения. Проверьте отображение
страницы в браузере.
11.
Создайте два нумерованных списка. Первый список нумеруется арабскими числами, а
второй - римскими, начиная с цифры 6.
Указания: с исходной страницы скопируйте весь текст,
относящийся к спискам: от заголовка и до следующего заголовка. Текст заголовка
"Новые возможности" отформатируйте так же, как вы форматировали
предыдущие заголовки. Используйте метку p3 для перехода на этот заголовок из содержания.
Далее абзац не имеет особых параметров
оформления, поэтому просто возьмите текст абзаца в теги <P></P>.
Нумерованный список создается полностью так
же, как и маркированный. Только вместо тега <UL></UL> указать тег <OL></OL>.
Первый список создается просто тегом <OL> без
параметров (нумерация арабскими числами начиная с 1).
Второй список создается тегом <OL> с параметрами TYPE (нумерация римскими числами) и START (начало нумерации). Для
нашего примера тег будет записан так:
<OL TYPE="I" START="6">
Дальше аналогично первому списку.
Сохраните изменения. Проверьте отображение
страницы в браузере.
Абзац под списками не имеет особых параметров
оформления, поэтому просто возьмите текст абзаца в теги <P></P>. Задайте для
текста выравнивание по ширине.
Сохраните изменения. Проверьте отображение
страницы в браузере.
12.
Создайте список определений.
Указания: с исходной страницы скопируйте весь текст,
относящийся к списку определений: от заголовка и до следующего заголовка. Текст
заголовка "Типы данных" отформатируйте также, как
вы форматировали предыдущие заголовки.
Абзац под ним не имеет особых параметров
оформления, поэтому просто возьмите текст абзаца в теги <P></P>.
Список определений создается тегами <DL></DL>.
Каждый термин в списке определяется тегами <DT></DT>.
При этом внутри тега используйте тег <FONT></FONT> с параметром COLOR для задания цвета символов.
Под термином со смещением задают определение
термина с помощью тегов <DD></DD>. При этом
внутри тега используйте тег <FONT></FONT> с параметром COLOR для задания цвета символов и с параметром FACE для задания типа
шрифта - используется Palatino Linotype.
Должна получиться такая структура:
Сохраните изменения. Проверьте отображение
страницы в браузере.
13.
Создайте заголовок и абзац текста.
Создайте
нумерованный список.
Указания: с исходной страницы скопируйте весь текст,
относящийся к списку: от заголовка и до следующего заголовка. Текст заголовка
"Стандартная библиотека" отформатируйте также, как
вы форматировали предыдущие заголовки.
Абзац под ним не имеет особых параметров
оформления, поэтому просто возьмите текст абзаца в теги <P></P>.
Цвет текста задайте с помощью значения свойства:
COLOR="#191970"
Под абзацем остальной текст оформите в виде
нумерованного списка, раскрасив его части.
Чтобы текст в
созданном списке выровнять по центру поместите весь список в контейнер <div></div> и задайте
выравнивание по ширине.
Сохраните изменения. Проверьте отображение
страницы в браузере.
14.
Введите пример текста программы
Указания: с исходной страницы скопируйте весь текст,
относящийся к коду программы: от заголовка и до конца документа. Текст
заголовка "Пример программы" отформатируйте также,
как вы форматировали предыдущие заголовки.
Условие задания не имеет особых параметров
оформления, поэтому просто возьмите текст абзаца в теги <P></P>.
Каждую функцию также возьмите в теги <P></P>.
При этом символ в верхнем регистре нужно поместить в теги <SUP></SUP>.
Символ в нижнем регистре нужно поместить в теги <SUB></SUB>. Исходя из этого, функции могут быть записаны так:
Остальной текст программы
выровняйте, как принято оформлять код, а затем всю программы поместите в теги <CODE></CODE>.
Чтобы заданная вам структура кода программы в
браузере отображалась с сохранением отступов и табуляции, поместите код
программы в теги <PRE></PRE>.
Получится структура:
<CODE>
<PRE>
Код программы
</PRE>
</CODE>.
C помощью тегов <FONT></FONT> и параметра COLOR задайте цвет символов (для комментариев черный цвет: COLOR="black"). Для всего кода программы используйте цвет: COLOR="#FFD700".
ЗАМЕЧАНИЕ: обращайте внимание на то, что некоторые знаки < и > в коде
программы нужно заменить на < и > соответственно (смотрите пункт Специальные символы на сайте в разделе Лекции)
Сохраните изменения. Проверьте отображение
страницы в браузере.
15.
Создайте ссылку для перехода на сайт специальности.
16.
Создайте ссылку в первом абзаце текста. При нажатии на
Бьёрн Страуструп осуществите переход на вторую страницу page2.html
17. Страницу page2.html создаем также и первую, начиная с основных тегов html-документа:
И
сохраняем под именем page2.html в той же папке, что и index.html.
18. Сначала добавьте фотографию Бьерна Страуструпа.
Скачайте изображения для данной страницы здесь.
Сделайте ей
обтекание текстом с помощью свойства align="left", добавьте отступы от фотографии.
Далее разместите текст с форматированием как в образце.
Затем разместите
логотипы социальных сетей и сайтов. Сделайте для каждой картинки, кроме последней, обтекание атрибутом align="left". Создайте переходы на соответствующие сайты.
19. Добавьте заголовки и соответствующий к ним
текст, изображения.
20. В конце страницы создайте переход обратно на
главную страницу с помощью тега
Чтобы выровнять ссылку по центру, поместите
ее в контейнер и задайте выравнивание контейнеру:
