Лабораторная работаHTML
.docЛабораторная работа № 1
Введение в язык HTML
HTML- документы представляют собой ASCII-файлы, доступные для просмотра и редактирования в любом редакторе текстов.
Правила форматирования документа в HTML определяются при помощи специальных команд –тегов. Все теги имеют схожий вид. Начинаются они с имени тега в угловых скобках, а заканчиваются именем тега с косой чертой также в угловых скобках. Например, чтобы указать, что текст должен располагаться в середине экрана используется следующая команда:
<center > Привет участникам соревнования </center>
Минимальный HTML-код
Самый простой документ, созданный на языке HTML, выглядит следующим образом:
<HTML>
<HEAD>
<TITLE> Документ HTML </TITLE>
</HEAD>
<BODY>
<H1> Ура! Это заголовок!</H1>
Добро пожаловать в www <br> и мир HTML-документов
</BODY>
</HTML>
Здесь мы использовали следующие теги:
<HTML> и парный ему </HTML> -для описания всего документа
<HEAD> и парный ему </HEAD>-информационный блок
<TITLE> и парный ему </TITLE>-для задания заголовка документа
<BODY> и парный ему </BODY>-для описания тела документа
<H1> и парный ему </H1>-для задания заголовка первого уровня
< BR> -для указания на конец параграфа. Заметим, что тег < BR> не имеет парного тега.
Примечание. В тегах языка HTML не различаются символы верхнего и нижнего регистров :
Тег <TITLE> эквивалентен тегу <title>.
Основные теги языка HTML.
Знание этих тегов вполне достаточно для того, чтобы начать создавать простые документы.
Заголовок документа
Тег <TITLE> и парный ему </TITLE>
Каждый HTML-документ должен иметь заголовок. Заголовок используется для поиска документов и обычно отображается отдельно от документа, например, как заголовок окна, в котором отображается сам документ. Обычно заголовок содержит краткое описание содержимого документа.
Примечание. Заголовок не является частью документа.
Заголовок внутри документа
Возможно использование заголовков 6 уровней – от 1 до 6. Заголовок первого уровня считается самым главным и используется в качестве первого заголовка документу. Заголовки могут выделяться цветом или шрифтом.
Синтаксис:
<Hx>Текст заголовка</Hx>
Где х- это число 1 до 6, указывающее на уровень заголовка.
Пример использования заголовков различных уровней:
<HTML>
<HEAD>
<TITLE>Пример на теги заголовков</TITLE>
</HEAD>
<BODY BGCOLOR=SILVER>
<P ALIGN=CENTER>
<FONT COLOR=BLUE SIZE=6>
Заголовки различных уровней!
</FONT></P>
<H1>Заголовок первого уровня</H1>
……………………………………………………………
<H6>Заголовок шестого уровня</H6>
</BODY>
</HTML>
Задание1. Создать Web-страницу, знакомящую с основными тегами HTML.
1) Запустить текстовый редактор Блокнот командой : Пуск- Программы- Стандартные- Блокнот.
2) Ввести HTML-код, написанный ниже:
<HTML>
<HEAD>
<TITLE>Первое знакомство с тегами</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
3) Запустить браузер и открыть созданный файл командой Файл-Открыть. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тегами HTML.
4) Заголовки. Внести в текст страницы после <BODY> в пустую строку теги заголовков различных уровней(размеров).
Заголовки различных уровней:
<H1>Заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>
5) Ввести команду Файл- Сохранить. Файлу Web-страницы присвоить имя: (ваша фамилия).html.
Лабораторная работа № 2
Форматирование шрифта
Внести в текст страницы теги, определяющие начертание шрифта и горизонтальных разделительных линий.
Логические стили
Они существуют наряду с 6 стилями заголовков. Начертание текста выделенного с помощью логических стилей зависит от настроек браузера.
<STRONG>-служит для выделения текста. Обычно это утолщенный шрифт.
<SMALL>-уменьшенный шрифт
<BIG>-увеличенный шрифт
<SUP>(superscript)-для верхних индексов
<SUB>(subscript)-для нижних индексов
Физические стили
Начертание шрифта при использовании таких стилей не зависит от настроек браузера.
<U>(uderline)-подчеркивание
<B>(bold)-полужирный
<I>(italic)-курсив
Чтобы ввести в текст символ произвольного вида, можно задать его код в следующем формате ASCI- код вводимого символа.
Чтобы ввести в текст пробел надо написать  .
HR-разделительная горизонтальная полоса.
Синтаксис:
<HTML>
<HEAD>
<TITLE>Форматирование шрифта</TITLE>
</HEAD>
<BODY BGCOLOR=SILVER>
<B>жирный</B>
<U>подчеркивание<U>
<BIG><U><I>увеличенный подчеркнутый курсив</I></U></BIG>
</BODY>
</HTML>
Размер, гарнитура и цвет шрифта
Тег <BAZEFONT SIZE=…>-задает размер шрифта, который используется в документе по умолчанию.
Тег <FONT SIZE=… FACE=… COLOR=…>-задает размер, гарнитуру и цвет символов.
Пример:
<FONT SIZE=5 FACE=ARIAL COLOR=BLUE>
COLOR=”#ffaa55”-шестнадцатиричное значение.
Со шрифтами надо быть осторожными, так как шрифты, которые вы используете должны быть установлены не только у вас, но и у клиентов.
Можно задать несколько допустимых шрифтов, например: <FONT FACE=ARIAL, HELVETICA, GENEVA, SWISS, SANS, SERIF>. Браузер при этом будет использовать первый из найденных шрифтов.
Теги абзаца и перевода строки
Тег перевода строки <BR> отделяет от последующего текста или графики.
Тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются непарными, т.е. не имеют закрывающих тегов. Чтобы закончить строку или абзац в определенном месте, там надо поставить соответствующий тег.
Тег <div>(division-раздел) можно использовать для разбиения HTML-документа на несколько разделов. Для указания горизонтального выравнивания внутри элемента <div> можно использовать атрибут Align с допустимыми значениями Left, Center и Right, которые выравнивают текст по левому, середине и правому краю соответственно(аналогично принятому для абзацев <P>). Тег <div> является парным тегом.
Пример:
<DIV ALIGN=CENTER>выравнивание по середине</DIV>
<P ALIGN=LEFT>выключка по левому краю</P>
<P ALIGN=RIGHT>выключка по правому краю</P>
<P ALIGN=CENTER>выравнивание по центру(центрирование) </P>
<P ALIGN=JUSTIFY>выравнивание по ширине(выровненный текст) </P>
Задание 2.
1) Создать Web-страницу, содержащую 6 параграфов текста, выполненных различными типами шрифтов, различными цветами, имеющих различные выключки(выранивания).
2) В начале документа должна стоять фамилия автора и знак авторского права.
3) Ключевые слова необходимо выделить с помощью логических и физических стилей.
4) Внесение изменение и дополнений на web-страницу. В процессе создания web-страницы приходится добавлять новые теги и просматривать получаемый результат. Для этого необходимо:
а) активировать блокнот с открытым в нем редактируемой web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы уже под другим названием, выполнив команду меню Файл- Сохранить как…
б) акивировать браузер с обновленным вариантом страницы.
Лабораторная работа № 3
Связь с другими документами. Оформление гиперссылок.
Такие ссылки позволяют щелчком по выделенному слову или фразе перейти к другому документу или части того же документа. Эта возможность называется гипертекстом. Гипертекстовые ссылки выделяются в тексте документа специальным цветом.
Простой пример ссылки:
<A HREF=”Glava2. HTML”> Глава вторая </A>
В данном примере фраза “Глава вторая” является ссылкой на HTML-документ, содержащийся в файле Glava2.HTML, в том же каталоге (папке), что и текущий документ. Если же документ находится в другом каталоге, то необходимо указать имя этого каталога,например:
<A HREF=”BOOK/Glava2.HTML”>Глава вторая</A>
Такие ссылки называются относительными. При необходимости можно задать и абсолютные имена файлов в формате UNIX. Последние обычно используются для ссылок на несвязанные между собой документы, например:
<A HREF=”http:/www.xpress.ru/BOOK/Glava2.HTML>Глава вторая</A>
Здесь http:/www.xpress.ru-так называемый URL – Uniform Resource Locator (унифицированный адрес ресурсов).
Ссылки на фрагмент документа
Предположим, вы хотите создать ссылку из документа DOCUM1 на какой-то раздел (абзац), находящийся в этом же документе:
<A HREF=”PETJA”>Петя Иванов</A>,
а затем ссылку на нее:
<A HREF=”#PETJA”>Познакомьтесь с Петей</A>.
В этом примере фраза «Познакомьтесь с Петей» является ссылкой на раздел «PETJA» в документе DOCUM1.
Для посылки электронной почты необходимо указать URL в следующем формате:
<A HREF=”mailto:adcd@mail.ru”>Присылайте ваши пожелания</A>
При активации такой ссылки браузер открывает специальное окно, в котором можно ввести текст электронного послания по адресу, указанному после «mailto:».
Цвета ссылок можно определить в теге стилей <style> (это так называемые каскадные стили). При этом, значений атрибутов, определенных в теге <style> имеют приоритет перед определениями, сделанными в теге BODY или в теле документа.
<head>
<style>
a: link {color:#ff5500; font-weight:normal;} - цвет текста активной ссылки
a: visited {color:#00ff00; font-weight:normal;} -цвет текста просмотренной ссылки
a: hover {color:blue;font-weight:normal;} -цвет текста ссылки
</style>
</head>
Задание 3. Используя уже созданную вами web-страницу из предыдущих заданий, выполните следующее:
1. Создайте ссылку из одного документа(сайта) на другой.
2. Создать также во втором документе ссылку на первый документ.
3. Создайте ссылку внутри самого документа.
4. Сделать ссылки на разные документы различного цвета.
5. Создать выключки по различным краям документа различных цветов и шрифтов, применяя логические и физические стили. Пример:
6. Сохраните web-страницу под новым именем через Файл- Сохранить как…