- •Методические указания
- •Содержание
- •Общие методические указания
- •Задание 1
- •Варианты к заданию 1
- •Задание 2
- •Варианты к заданию 2
- •Задание 3
- •Варианты к заданию 3
- •Примеры выполнения заданий Пример выполнения задания 2
- •Пример выполнения задания 3 Введение в html
- •Основные элементы html документов
- •Пример 1
- •Пример 2
- •Пример 3
- •Литература
- •Приложение. Образец титульного листа
- •Контрольная работа
Пример выполнения задания 3 Введение в html
HTML (HyperText Markup Language) означает «язык описания гипертекстовых документов», который положен в основу разработки Web-страниц. Web-страницы - это, как правило документы в формате HTML, содержащие текст и специальные инструкции – дескрипторы (тэги) HTML. Документы HTML хранятся в виде файлов с расширением *.html или *.htm.
Дескрипторы (тэги) HTML сообщают Web-броузеру информацию о структуре и особенностях форматирования Web-страницы. Каждый тэг заключен в угловые скобки, < >. Многие тэги состоят из открывающей < >, и закрывающей </ > частей, и воздействуют на текст, помещенный внутри. Сами теги могут быть вложены друг в друга, и потому чтоб не запутаться, принято описывать каждый из вложенных тегов отдельной строкой. WEB- страницу, можно создать при помощи Блокнота или WordPad. Для этого набрать две команды - тега: <html> и </html>.Сохранить файл с расширением *.html и редактировать пространство между этими двумя дескрипторами (в том же Блокноте или WordPad) до полной готовности, просматривая в Internet Explorer и не забывая обновлять всякий раз после изменения.
Ниже приведены примеры одной и той же Web-страницы в двух видах: один - в Internet Explorer, второй - в кодах HTML.
Примечание
Если вместо картинки на экране нарисован квадратик с крестиком, значит файл картинки не найден. В этом случае проверьте, чтоб и страница, и фотография (изображение) лежали в одной папке, а имя файла соответствовало ссылке на него в свойстве src тега img.
HTML не различает, какими буквами набраны символы форматирования: <title> равносильно <TITLE> или <TiTlE>.
Почти все теги в HTML - парные, и должны закрываться в строгой очередности. Исключение составляют теги <hr>, <br> и специальные символы.
Основные элементы html документов
Структура документов HTML
<HTML>
<HEAD>
<TITLE>
… заголовок
</TITLE>
</HEAD>
<BODY>
... тело докумета
</BODY>
</HTML>
Элемент BODY
< BODY свойство1 = данные1 свойство2 = данные2...>
текст документа
</BODY>
Свойства тега <BODY>:
bgcolor – Определяет цвет фона для тела документа.
text – Определяет цвет, используемый при выводе на экран текста из данного документа.
link – Определяет цвет, который будет использоваться при выводе на экран текста из еще не выбранных вами гипертекстовых связей
vlink – Определяет цвет, который будет использоваться при выводе на экран текста из уже проверенных вами гипертекстовых связей.
alink – Задает цвет, которым будут выделяться в тексте гипертекстовые связки в тот момент, когда пользователь щелкает по ним клавишей мыши.
background – Определяет адрес URL, откуда будет браться изображение для фона текущего документа.
Элементы форматирования на уровне блоков
Параграф:
<p align = left ( или center|right|justify) >
Заголовок:
<H1 ( или H2|H3|H4|H5|H6) align = ... >
Горизонтальная линейка:
<hr align = ..., size = ..., width = ...>
Конец строки:
<br>
Элементы задающие шрифт
<TT>…</TT> – телетайпный текст,
<I>…<I>– стиль с наклонным шрифтом,
<B>…<B> – стиль с жирным шрифтом,
<U>…<U> – стиль с подчеркиванием текста,
<BIG>…<BIG> – печать текста шрифтом увеличенного размера,
<SMALL>…<SMALL> – печать текста шрифтом уменьшенного размера,
<SUB>…<SUB> – печать текста со сдвигом вниз (нижний индекс),
<SUP>…<SUP> – печать текста со сдвигом вверх (верхний индекс),
<STRIKE>…<STRIKE> – стиль с перечеркиванием текста.
Пример:
<FONT size = 6 color = ”#000000”>…текст… </FONT>
Свойство SIZE – Устанавливает размер шрифта, который будет использоваться текстом, содержащимся в пределах элемента (тега) font. Вы можете задать абсолютный размер шрифта, указав какое-либо целое число от 1 до 7. Для шрифта можно также указывать относительный размер, сообщая атрибуту целое число со знаком (например, это может быть size="+1" или size="-2").
Свойство COLOR – указывает цвет, которым будет написан данный фрагмент текста.
Неупорядоченные списки
<UL>
<LI> ... первый пункт списка
<LI> ... второй пункт списка
...
</UL>
Упорядоченные списки
<OL>
<LI> ... первый пункт списка
<LI> ... второй пункт списка
...
</OL>
Таблицы
<TABLE BORDER=... WIDTH=... >
<TR>
<TD свойства =… > 1-я клетка 1-ой строки </TD>
<TD свойства =... > 2-я клетка 1-ой строки </TD>
</TR>
<TR>
<TD> 1-я клетка 2-ой строки </TD>
...
</TR>
…
</TABLE>
Изображения
<img src =... alt=... align=... width=... height=... border=... hspace=... vspace=...>
Свойства тега <img>:
src – обязательный атрибут, указывающий адрес изображения;
align – выравнивает изображение к одной из сторон web-страницы;
alt – выводит текст к картинке. Полезно, если браузер не отображает графику на странице;
border – устанавливает толщину рамки вокруг изображения в пикселях. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER = 0, чтобы подавить цветовую окантовку, которая появится вокруг изображения;
и др.
Пример:
<img src=“ship.gif” alt=“Корабль моей мечты” align=left width=50 height=50 border=2 hspace=3 vspace=3>
Гиперссылки
<a href=… title=…>
текст или указатель на изображение
</a>
Пример:
<a href=“ship.gif” title=“Корабль моей мечты”> Ничего кораблик!!!</a>
Бегущая строка
<marquee свойство1= свойство2=…>…Текст…</marquee>
Пример:
<marquee behavior="alternate" bgcolor="yellow" scrolldelay="145" width="50%">
< font size="5" color="red">Текст бегущей строки.</font>
</marquee>
Фреймы (Frame)
<frameset rows|cols=…>
<frame src=… name=… scrolling=…>
</frameset>
Пример:
<frameset rows=”35,*” border=”0”>
<frame src=”1.htm”>
<frameset col=”50%,50%”>
<frame src=”2.htm”>
<frame src=”3.htm”>
</frameset>
</frameset>
Базовые цвета
Black=”#000000”
Silver=”#C0C0C0”
Gray=”#808080”
White=”#FFFFFF”
Red=”#FF0000”
Purple=”#800080”
Fuchsia=”#FF00FF”
Green=”#008000”
Lime=”#00FF00”
Olive=”#808000”
Yellow=”#FFFF00”
Navy=”#000080”
Blue=”#0000FF”
Aqua=”#00FFFF”