Лабораторная работа
Основы создания web-страниц средствами языка разметки гипертекста html
Практическое задание №1
Список базовых тэгов HTML
Стартовый |
Завершающий |
Описание |
<HTML> |
</HTML> |
Обозначение HTML-документа |
<HEAD> |
</HEAD> |
Заголовочная часть документа |
<TITLE> |
</TITLE> |
Заголовок документа |
<BODY> |
</BODY> |
Тело документа |
<H1> |
</H1> |
Заголовок абзаца первого уровня |
<H2> |
</H2> |
Заголовок абзаца второго уровня |
<H3> |
</H3> |
Заголовок абзаца третьего уровня |
<H4> |
</H4> |
Заголовок абзаца четвертого уровня |
<H5> |
</H5> |
Заголовок абзаца пятого уровня |
<H6> |
</H6> |
Заголовок абзаца шестого уровня |
<P> |
</P> |
Абзац |
<PRE> |
</PRE> |
Форматированный текст |
<BR> |
|
Перевод строки без конца абзаца |
<BLOCKQUOTE> |
</BLOCKQUOTE> |
Цитата |
Описанные тэги - это все, что необходимо вам для того, чтобы начать работать с HTML. С использованием описанных тэгов вы можете создать простой HTML-документ.
ЗАДАНИЕ:
Создать простой документ с использованием вышеперечисленных тегов по типу примера 1:
Пример 1
<HTML>
<HEAD> Содержание заголовка </HEAD>
<BODY> Содержание тела документа </BODY>
</HTML>
Создать простой документ с использованием вышеперечисленных тегов с использованием заголовков по типу примера 2,3:
Пример 2
<html> <head> <title>html заголовки</title> </head> <body> <h1>Заголовок H1</h1> <h2>Заголовок H2</h2> <h3>Заголовок H3</h3> <h4>Заголовок H4</h4> <h5>Заголовок H5</h5> <h6>Заголовок H6</h6> </body> </html>
Заголовки также можно определенным образом выравнивать, например, <h1 align="left"> - выравнивание по левому краю <h1 align="right"> - выравнивание по правому краю <h1 align="center"> - выравнивание по центру <h1 align="justify"> - выравнивание по ширине
Пример 3
<html> <head> <title>html заголовки</title> </head> <body> <h1 align="left">Заголовок H1</h1> <h2 align="right">Заголовок H2</h2> <h3 align="center">Заголовок H3</h3> <h4 align="justify">Заголовок H4</h4> </body> </html>
Добавить фон страницы по типу примера 4,5.
Цвет страницы прописывается в теге <BODY> атрибутом bgcolor="#CCCCFF". В ковычках обозначается код цвета, может быть любым, на Ваше усмотрение.
Пример 4
<HTML> <HEAD> <TITLE>Наша пробная страница</TITLE> </HEAD> <BODY BGCOLOR="#CCCCFF">Наша пробная страница </BODY> </HTML>
Так же фоном страницы можно сделать картинку. Для этого в теге <BODY> вместо атрибута BGCOLOR, применим атрибут BACKGROUND="images/имя картинки". Код будет таким:
Пример 5
<HTML> <HEAD> <TITLE>Наша пробная страница</TITLE> </HEAD> <BODY BACKGROUND="images/texture1.gif" >Наша пробная страница </BODY> </HTML>
Примеры цветов:#00FF66 – зеленый, #FFFF00 – желтый, #3300FF – синий, #FF9900 – оранжевый, #FFCCFF – бледно розовый
Практическое задание №2
Дополнить ранее созданный документ тегами списков (пронумерованными и непронумерованными, списками определений, а также вложенными списками)
Описание:
Существует четыре основных вида списков в HTML-документе:
пронуменрованный
непронуменрованный
вложенные списки
список определений
1. Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Например:
<OL> <LI> Программа <LI> Алгоритм <LI> Проектирование </OL> |
|
Тэг <OL> может иметь параметры: <OL TYPE=A|a|I|i|1 START=n>
где: TYPE Вид счетчика:
A - большие латинские буквы (A,B,C...)
a - маленькие латинские буквы (a,b,c...)
I - большие римские цифры (I,II,III...)
i - маленькие римские цифры (i,ii,iii...)
1 - обычные цифры (1,2,3...)
START=n Число, с которого начинается отсчет
2. Непронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:
<UL> <LI> Программа <LI> Алгоритм <LI> Проектирование </UL> |
|
Тэг <UL> может иметь параметр: <UL TYPE=disc|circle|square>
Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).
3. Вложенные списки начинаются стартовым тэгом < LI> и завершается тэгом </LI>.
Тэг <LI> может иметь параметры:
<OL TYPE=disc|circle|squade> или <OL TYPE=A|a|I|i|1 VALUE=n>
в зависимости от того, в списке какого вида находится данный элемент.
TYPE Вид маркера (см. <UL>) или счетчика (см.OL)
VALUE=n Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера. Пример:
<HTML> <HEAD> <TITLE> Список сотрудников </TITLE> </HEAD> <BODY> <H2> Список сотрудников нашей фирмы </H2> <H3> Составлено : 30 июля 1996 года </H3> Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P> Список может быть использован только в служебных целях. <P> <OL> <LI> Дирекция <UL> <LI> Иванов И.И. <LI> Петров К.В. </UL> <LI> Отдел маркетинга <UL> <LI> Варшавская Е.Л. <LI> Самсонов Д.М. </UL> </OL> </BODY> </HTML> |
Список сотрудников нашей фирмы Составлено: 30 июля 2009 года Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. Список может быть использован только в служебных целях.
|
Сохраните документ «Список сотрудников нашей организации» как spisok.html
4. Список определений начинается с тэга <DL> и завершается тэгом </DL>. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>.
<DL> <DT> <B> Отдел маркетинга </B> <DD> Данный отдел занимается продвижением продуктов и услуг <DT> <B> Финансовый отдел </B> <DD> Данный отдел занимается всеми финансовыми операциями <DT> <B> Отдел кадров </B> <DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д. </DL> |
Отдел маркетинга Данный отдел занимается продвижением продуктов и услуг Финансовый отдел Данный отдел занимается всеми финансовыми операциями Отдел кадров Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д. |
Практическое задание №3 Создание гиперссылок в HTML документе
Важнейшим свойством языка HTML является возможность размещения на странице ссылок на другие документы. Возможны ссылки:
· на удаленный HTML файл,
· на некоторую точку в текущем HTML-документе,
· на любой файл, не являющийся HTML-документом.
В качестве ссылки можно использовать текст или графику.
При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.
Для создания гиперссылки служит дескриптор <A>
Пример:
HTML-код: <a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a> <a href="../index.html">Ссылка на главную страницу сайта</a> |
Отображение в браузере: Ссылка на главную страницу сайта Ссылка на главную страницу сайта |