Занятие № 19-20 Лабораторная работа № 15-16
по дисциплине «Web-проектирование».
для специальности
2 – 40 01 01 «Программное обеспечение информационных технологий».
Инструкционно-технологическая карта
Тема: Создание web-сайта на заданную тему в текстовом редакторе Блокнот.
Цель работы: Научиться создавать сайт применяя все ранее полученные знания и умения.
Время на выполнение работы: 2 часа
Этапы работы:
Ознакомиться с теоретическими сведениями.
Выполнить задания, предложенные преподавателем.
Ответить на контрольные вопросы.
I. Краткие теоретические сведения
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Название заголовка</title>
</head>
<body>
</body>
</html>
Заголовок документа — элемент HEAD
Заголовок содержит неупорядоченную служебную информацию о документе— например, название документа; ключевые слова, по которым поисковая машина может индексировать документ; информацию о кодировке, в которой написана страница; и другую специфическую информацию Вся эта информация содержится внутри элемента HEAD. Она не влияет на внешний вид документа, а только предоставляет браузеру пользователя необходимые сведения о документе.
Внутри элемента HEAD могут содержаться такие элементы:
<BASE> — позволяет задавать базовый адрес (URL) для всего документа
<BASEFONT> — позволяет установить шрифт для всего документа
<LINK> — устанавливает связи для всего документа
<МЕТА> — содержит информацию, необходимую брау зеру пользователя или серверу для обработки документа,
<STYLE> — используется для описания внутренних таблиц стилей;
<TITLE> — задает название документа.
Все элементы, кроме TITLE и STYLE, являются пустыми. У них отсудствуют содержание и закрывающий тег. Необходимые параметры задаются при помощи атрибутов элементов
Тело документа — элемент BODY
Основные атрибуты элемента BODY.
Атрибут |
Описание |
Значение |
Background |
Задаёт фоновое изображение |
URL |
Bgcolor |
Задаёт цвет фона |
цвет |
Text |
Задаёт цвет текста документа |
цвет |
Link, vLink, aLink |
Задаёт цвет обычных, посещённых, активных ссылок. |
цвет |
leftmargin |
определяет отступ от левого края окна браузера до контента страницы. |
число |
rightmargin |
определяет отступ от правого края окна браузера до контента страницы. |
число |
topmargin |
определяет отступ от верхнего края окна браузера до контента страницы. |
число |
bottommargin |
определяет отступ от нижнего края окна браузера до контента страницы. |
число |
Комментарии в HTML имеют следующий синтаксис:
<!-- текст комментария —>
Основное форматирование текста.
Физическое форматирование:
Тег <B> и обязательный парный ему </B> - создает жирный текст. Атрибуты title - показывает текст в виде всплывающей подсказки
Тег <BIG> и обязательный парный ему </BIG> - выводит более крупный текст. Атрибуты title - показывает текст в виде всплывающей подсказки
Тег <BLOCKQUOTE> и обязательный парный закрывающий тег </BLOCKQUOTE> - предназначен для включения в документ длинных цитат, cоздавая отступы с обеих сторон текста и отделяясь от остального текста пустыми строками.
Тег <I> и обязательный парный ему </I> - создает наклонный текст
Тег <U> и обязательный парный ему </U> - указывает, что текст должен быть подчеркнут
Тег <BR> не требует парного закрывающего тега - вставляет перевод строки
Тег <Font> и обязательный парный ему </Font> - определяет выводимый шрифт. Атрибуты:
size - размер текста в пределах от 1 до 7, где 1 - самый мелкий шрифт. По умолчанию равен 3.
color - устанавливает цвет текста, используя значение цвета
face - название шрифта
Примечание: Атрибуты можно объединять
Тег <Hx> и обязательныйпарный ему </Hx> - служит для создания заголовка. Всего существует 6 видов заголовков - от H1 до H6. Тегу <H1> соответствует самый большой заголовок, тегу <H6> - самый маленький
Атрибуты :
align -выравнивает заголовок в соответствии со следующими значениями
center -по центру
left -по левому краю
right -по правому краю
justify – по ширине
title -всплывающая подсказка
Тег <HR>. Закрывающий тег не требуется - добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка.
Атрибуты:
size - устанавливает высоту(толщину) линии
width -устанавливает ширину линии в пикселах или процентах
noshade -создает линию без тени
color -задает линии определенный цвет
Тег <NOBR> и обязательный парный закрывающий тег </NOBR> - запрещает перевод строки. Бывают случаи, когда возникает надобность в операции противоположного назначения – запретить перевод строки. Текст, заключенный между тэгами и , будет гарантированно располагаться в одной строке без переноса на другую. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки
Тег <P> и необязательный парный ему </P> -создает новый параграф. Два или более тега <P>, идущих подряд, заменяются одним.
Атрибуты :
align -выравнивает заголовок в соответствии со следующими значениями
center -по центру
left -по левому краю
right -по правому краю
justify – по ширине
Тег <PRE> и обязательный парный ему </PRE> -обрамляет предварительно отформатированный текст. Преформатированный текст отображается моношириным шрифтом.
Тег <S> и обязательный парный ему </S> - указывает, что текст должен быть зачеркнут.
Тег <SMALL> и обязательный парный ему </SMALL> - выводит более мелкий текст.Атрибуты: title -показывает текст в виде всплывающей подсказки.
Тег <sub> и обязательный парный ему </sub> - приспускает текст.
Тег <sup> и обязательный парный ему </sup> - приподнимает текст.
Тег <tt> и обязательный парный ему </tt> - создает текст, имитирующий стиль печатной машинки.
Тег <MARQUEE> и обязательный закрывающий </MARQUEE> - заставляет текст прокручиваться, либо перемещаться из стороны в сторону
Атрибуты:
BEHAVIOR=ALTERNATE | SCROLL | SLIDE
Определяет вид скроллинга
ALTERNATE |
Колебательные движения налево и направо |
SCROLL |
Перемещение текста в направлении, указанном в DIRECTION. Достигнув края экрана, надпись появляется снова с противоположной стороны |
SLIDE |
Схоже с SCROLL, но текст перемещается только один раз и останавливается |
DIRECTION=DOWN | LEFT | RIGHT | UP
Определяет направление скроллинга
DOWN |
Движение вниз |
LEFT |
Движение справа налево. По умолчанию |
RIGHT |
Движение слева направо |
UP |
Движение вверх |
Логическое форматирование:
Тег <ABBR> и обязательный парный ему </ABBR> - используется для аббревиатуры
Тег <ACRONYM> и обязательный парный ему </ACRONYM> - идентифицирует акроним(аббревиатура, образованная из начальных букв слов или словосочетаний, произносимая как единое слово, а не побуквенно).
Тег <CITE> и обязательный парный ему </CITE> - используется для цитат, названий книг. Обычно наклонный текст.
Тег <CODE> и обязательный парный ему </CODE> - отмечает текст как небольшой фрагмент программного кода. Обычно отображается моноширинным шрифтом.Атрибуты: title - всплывающая подсказка
Тег <DFN> и обязательный парный ему </DFN> - отмечает текст как определение (DeFeNition). Этим тегом можно отметить термин, впервые встречающийся в документе. Атрибуты: title - всплывающая подсказка
Тег <EM> и обязательный парный ему </EM> - используется для выделения, подчеркивания важных фрагментов текста курсивом (наклонный текст). Происходит от слова emphasis - акцент. Аналогичен тегу I
Тег <KBD> и обязательный парный ему </KBD> - отмечает текст, вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. От английского keyboard – клавиатура.
Тег <SAMP> и обязательный парный ему </SAMP> - отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом.
Тег <strong> и обязательный парный ему </strong> - используется для выделения из текста слова (жирный текст). Происходит от слова strong emphasis - сильный акцент. Аналогичен тегу B.
Тег <VAR> и обязательный парный ему </VAR> - используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского variable – переменная
Списки
Тег <DD> и необязательный парный ему </DD> - является описанием списка определений
Тег <DL> и необязательный парный ему </DL> - служит для создания списка определений. Списки состоят из двух частей: определения (DT) и описания (DD). Атрибуты: title -показывает текст в виде всплывающей подсказки.
Тег <DT> и необязательный парный ему </DT> - является определением списка определений
Пример:
<DL>
<DT> термин
<DD>определение
</DL>
Тег <LI> и необязательный парный ему </LI> - служит для обозначения элемента (строки) списка. Используется в нумерованных(OL) и ненумерованных(UL) списках
Тег <OL> и обязательный парный ему </OL> - служит для создания нумерованного списка. Допускается вложение нумерованного списка в списки другого вида. Атрибуты
type -тип маркера (A|a|I|i|1)
start - yачальное значение для нумерованного списка при использовании арабских цифр.
title -всплывающая подсказка
Тег <UL> и обязательный парный ему </UL> - служит для создания маркированного списка. Допускается вложение ненумерованного списка в списки другого вида. Атрибуты:
type -тип маркера (disk| circle| square)
title -всплывающая подсказка