Лабораторные работы / HTML_Лаб_1
.doc
Лабораторная работа №1
Знакомство с языком HTML
Цель: изучить основные тэги по форматированию текста в языке HTML.
HTML (Hyper-Text Markup Language) — язык гипертекстовой разметки. Данный формат определяет внешний вид документа, взаимное расположение текстовой, графической и мультимедийной информации. Формат HTML –файла достаточно прост. Составление и внесение изменений в файл осуществляется любым текстовым редактором. Для просмотра результатов используется Web–браузер. Основным достоинством HTML–документа является их способность содержать перекрестные ссылки друг на друга. Перекрестные ссылки помогают быстро обратиться к документу с дополнительной информацией по интересующему вопросу, а затем продолжить работу с исходным текстом.
При создании сложных HTMLдокументов, содержащих большое количество изображений, таблиц и перекрестных ссылок, удобнее пользоваться специальными HTML–редакторами. Для создания HTML-страниц широко применяется пакет FrontPage, разработанный фирмой Microsoft. Однако, такой HTML текст чаще всего нуждается в доработке: он избыточен, а в отдельных случаях и неадекватен. Поэтому с помощью HTML–редакторов создается как бы «базовая страница, а затем ее код редактируется вручную.
Любой документ, написанный с помощью языка HTML, состоит из содержимого страницы, т.е. текста, и управляющих символов — тегов. Все тэги HTML обязательно заключаются в угловые скобки <>. Как правило, используется стартовый тэг и завершающий тэг. Завершающий тэг отличается от стартового наличием слэша.
-
Создание документа HTML
<HTML> – </HTML> — первый и последний тэги любого HTML–документа.
<HEAD> – </HEAD> — Начало и конец заголовка документа.
<TITLE> – </TITLE> — задание названия документа (заголовок окна браузера).
<BODY> – </BODY> — начало и конец тела документа, которое определяет содержание документа.
Прежде, чем приступить к работе, создайте папку с Вашей фамилией.
Запустите программу Internet Explorer , выполните команду Вид/Просмотр HTML-кода — откроется окно стандартной программы Блокнот. Введите текст:
<HTML>
<HEAD>
<title>Моя первая Web-страница</title>
</HEAD>
<body>
Это моя первая Веб-страница
</body>
</HTML>
Сохраните файл в своей папке под именем Html1.htm (обязательно введите расширение).
Сверните приложение Блокнот. Найдите файл и дважды щелкните по нему. Запустится программа Internet Explorer. Если в тексте необходимы изменения, откройте Блокнот (Вид/Просмотр HTML-кода), введите изменения и сохраните новый текст. Для просмотра исправленного текста нажмите кнопку Обновить в программе Internet Explorer.
-
Оформление текста
Некоторые теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. Общий вид тега с атрибутом таков:
<имя тега имя атрибута = аргумент> текст </имя тега>
<Hx> – </Hx> — (x — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня самый крупный, шестого уровня — самый мелкий.
<P> – </P> — описывает абзац (завершающий тэг может отсутствовать).
Аргументы:
ALIGN — параметр, определяющий выравнивание абзаца:
ALIGN=CENTER — выравнивание по центру;
ALIGN=RIGHT — выравнивание по правому краю;
ALIGN=LEFT — выравнивание по левому краю.
<BR> — переход на новую строку, не прерывая абзаца.
<B> – </B> — отображение текста жирным шрифтом.
<I> – </I> — отображение текста курсивом.
<U> – </U> — подчеркнутый текст.
<STRIKE> – </STRIKE> — перечеркнутый текст.
<BLOKQUOTE> – </ BLOKQUOTE > — отображение цитат.
<SUB> – </SUB> — отображение подстрочных индексов.
<SUP> – </SUP> — отображение надстрочных индексов.
<TT> – </TT> — использование шрифта с фиксированной шириной символов.
<BIG> – </BIG> — увеличение размера текущего шрифта.
<SMALL> – </SMALL> — уменьшение размера текущего шрифта.
<BASEFONT SIZE=n> — (n –цифра от 1 до 7) – базовое значение размера шрифта.
<FONT SIZE=+\-n> – </FONT> — изменение размера шрифта.
<FONT COLOR=#xxxxx> – </FONT> — установка цвета шрифта:
Aqua — морская волна;
Black — черный;
Blue — голубой;
FuchsiaAqua — малиновый;
Gray — серый;
Green — зеленый;
Lime — ярко-зеленый;
Maroon — темно-красный;
Navy — темно-синий;
Olive — оливковый;
Purple — пурпурный;
Red — красный;
Silver — серебряный;
Teal — темно-морская волна;
White — белый;
Yellow — желтый.
<BODY BGCOLOR=#xxxxx> — изменение цвета фона;
<HR> — горизонтальная линия, может использовать атрибуты:
COLOR — цвет линии;
SIZE — толщина линии в пикселях или процентах от ширины окна;
WIDTH — выравнивание линии;
ALIGN — выравнивание линии;
NOSHADE — рисование без тени;
SHADE — рисование с тенью.
Создайте документ Html2.htm:
<HTML>
<HEAD>
<title>Оформление текста</title>
</HEAD>
<body>
<h1 align=center>Оформление текста</h1>
<p>
<basefont size=4>
Здесь печатаем обычный текст
<p>
<font size = +1>
Здесь увеличиваем текст
</font>
<p>
Здесь печатаем<big>большой</big>и<small> маленький</small>текст
<p>
Можем его <u>подчеркнуть</u> и <strike>перечеркнуть</strike>
</body>
</HTML>
Просмотрите файл с помощью Internet Explorer.
Откройте HTML-код и внесите в него изменения (изменение цвета шрифта, использование горизонтальных линий):
<HTML>
<HEAD>
<title>Оформление текста</title>
</HEAD>
<BODY bgcolor=silver>
<h1 align=center>
<font color=aqua>
Оформление текста
</font>
</h1>
<p>
<basefont size=4>
Здесь печатаем обычный текст
</font>
<p>
<font size = +1 color = green>
Здесь увеличиваем шрифт
</font>
<p>
<font color=red>
Здесь печатаем<big>большой</big>и<small> маленький</small>текст
</font>
<p>
<font color=olive>
Можем его <u>подчеркнуть</u> и <strike>перечеркнуть</strike>
</font>
<hr>
</BODY>
</HTML>
Сохраните файл под именем HTML3.htm и просмотрите его с помощью Internet Explorer.