- •Общие сведения о языке разметки гипертекста(html)
- •Общие сведения о языке разметки гипертекста (html)
- •Структура html-документа
- •Знакомство с графическими объектами
- •Создание gif-файлов
- •Цвета в html
- •Главное о форматировании текста
- •Заголовки
- •Начертание шрифта
- •Выравнивание и отступы
- •Выравнивание текста по левому или правому краю
- •Центрирование объектов
- •Поля вокруг изображения
- •Фоновые изображения и фоновый цвет
- •Локальные ссылки
- •Ссылка - строка
- •Ссылка - изображение
- •Якорь и ссылка на него
- •Глобальные ссылки
- •Дополнительные возможности форматирования текста
- •Текст, обтекающий границы объекта
- •Отображение текста в одной строке (без переноса на другую строку)
- •Выделение абзацев с помощью списков определений и полей
- •Рекомендации по проведению занятий
Структура html-документа
HTML-документ состоит из текстов, графики, таблиц и других объектов, которые представляют собой содержимое документа. Программа просмотра использует при этом теги, которые записаны в HTML-документе для задания структуры расположения объектов и их внешнего вида. Чаще всего HTML-теги записываются парами (начальный и конечный теги), между которыми размещаются текст и другие объекты документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/), так называемый слэш. Оформление HTML-документа просто: он начинается тегом и заканчивается тегом . Имя тега может быть записано как строчными, так и прописными буквами.
Запустить приложение Блокнот, используя кнопку “Пуск” на панели задач: ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ.
Разместить на рабочем столе одновременно два окна: окно MS Word с данной методичкой и окно Блокнота.
Набрать в поле редактирования Блокнота следующий текст: (Данную программу, как и все последующие, можно не набирать на клавиатуре, а скопировать в поле редактирования Блокнота из этой программы используя команду операционного меню ВИД => ИСТОЧНИК. Неиспользуемые в программах сноски набраны черным шрифтом.)
<HTML>
<HEAD>
<TITLE> Простейший HTML документ</TITLE>
</HEAD>
<BODY> Здесь записан текст, появляющийся на экране при открытии этого
документа.
<I>А этот текст будет записан курсивом </I>
</BODY>
</HTML>
Если времени не хватает для набора текста, то прочтите Блокнотом файл ris1.htm, находящийся в том же каталоге, из которого Вы прочли данную методичку.
Сохранить документ в рабочем каталоге под именем, например, ris1a.htm (Блокнот закрывать не следует, он пригодится для дальнейшей работы).
В окне рабочего каталога выполнить двойной щелчок левой кнопкой мыши по значку только что созданного документа ris1a.htm и с помощью MS Internet Explorer просмотреть получившийся документ. Текст документа состоит из элементов заголовок и тело, которые выделяются соответственно тегами <HEAD></HEAD> и <BODY></BODY>В заголовке теги<TITLE> . . . </TITLE>ограничивают текст, используемый как надпись в заголовке окна программы просмотра. Такую же надпись имеет кнопка на панели задач при просмотре документа.Задание 1.1.1.Изменить файл ris1a.htm так, чтобы на панели задач при просмотре документа появилась кнопка с надписью ris1a.htm.Задание 1.1.2. Изменить файл ris1a.htm так, чтобы на экране появилась Ваша фамилия.Знакомство с таблицами
Таблицы в HTML-документах используются не только для табличного представления данных, но и для компоновки различных объектов - текста, графики, ссылок и др. Начнем знакомство с таблицами с формирования простейшей таблицы - из одной клетки (одна строка и одна ячейка в строке). Для этого выполним следующие операции.
С помощью Блокнота создадим в рабочем каталоге файл table1.htm, записав в этот файл следующий текст:
<HTML>
<HEAD>
<TITLE> Простейшая таблица-1</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Этот текст-в ячейке таблицы</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Просмотрим получившийся документ с помощью MS Internet Explorer. Видно, что в окне программы просмотра какие-либо следы таблицы отсутствуют. Дело в том, что теги<TABLE>, <TR> и <TD> просто объявили о наличии соответственно таблицы, строки таблицы и клетки таблицы, но никак не определили их оформление. Для определения вида оформления объектов в тегах HTML используются так называемые атрибуты. Сделаем в тексте предыдущего документа некоторые изменения и сохраним в рабочем каталоге файл как table2.htm. Модифицированный текст документа:
<HTML>
<HEAD>
<TITLE> Простейшая таблица-2</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Этот текст-в ячейке таблицы</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут BORDER в теге <TABLE > объявляет о наличии рамки и задает ширину "рельефа" вокруг рамки таблицы. Атрибут WIDTH в данном случае определяет ширину таблицы в 50% от ширины окна программы просмотра.Задание 1.2.1.Изменяя ширину окна программы просмотра пронаблюдайте за изменением ширины исследуемой таблицы.Задание 1.2.2. Уберите из атрибута BORDER значение ширины "рельефа" (текст "=3"), сохранив документ под именем table2a.htm и посмотрите на результат изменений.
Задание 1.2.3.Уберите из тега<TABLE>атрибут WIDTH, сохраните это изменение в файле table2b.htm и посмотрите на результат (выбрав кнопку "Обновить" в панели инструментов программы просмотра). Убедитесь в том, что в этом случае размер ячейки автоматически подгоняется под длину строки.Задание 1.2.4.По документу table3.htm рассмотрите адресацию ячеек в таблице