Практическая работа № 2. Форматирование абзацев.
Цель работы: изучение основных приемов форматирования абзацев (указание разметки), определение взаимовлияния некоторых тегов HTML на отображение соответствующих частей документа.
Если эта работа выполняется не сразу после предыдущей, то откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.
Введите заголовок первого уровня, заключив его между тегами <Н1> и </Н1>. Например: Сказка о рыбаке и рыбке.
Введите заголовок второго уровня, заключив его между тегами <Н2> и </Н2>. Например: А.С.Пушкин.
Введите тег горизонтальной линейки <HR>, внутри которого могут содержаться следующие атрибуты: SIZE = - толщина в пикселах и WIDTH= – ширина в пикселах. Например: <HR SIZE=5 WIDTH=300>.
Введите отдельный абзац текста, начав его с тега <Р>. Например: <Р> Жил старик со своею старухой…. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.
Введите еще один абзац текста, начав его с тега <Р>. Например: <Р> У самого синего моря…. Таким образом, наберите еще несколько строк.
Сохраните этот документ под именем paragraph.htm.
Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).
Дайте команду Файл / Открыть…. Щелкните на кнопке Обзор… и откройте файл paragraph.htm.
Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране. Если вы допустили какие-либо ошибки, чтобы их исправить вернитесь в редактор Блокнот, в котором открыт Ваш файл. Если редактор Блокнот уже закрыт, есть простой способ открыть его снова вместе с Вашим файлом, для этого щелкните в редакторе Internet Explorer правой кнопкой мышки и выберете команду Просмотр в виде HTML.
Таким образом были рассмотрены заголовки 1-го и 2-го уровня, еще можно оформлять текст заголовки тегами до 6 уровня. Текст тега <H6> оформляется самым мелким шрифтом, чтобы убедиться в этом наберите один и тот же заголовок шестью разными тегами.
Контрольные вопросы:
Какие теги отвечают за создание заголовков в документе?
Что определяет тег <HR>?
Какие атрибуты и параметры атрибутов имеет тег <HR>?
Какой тег определяет начало нового абзаца?
Как можно просмотреть теговую структуру HTML-документа из Internet Explorer?
Практическая работа № 3. Создание гиперссылок.
Цель работы: изучение приема создания гиперссылок, отображения их в документе, и освоение приемов пользования ими.
Термин Гипертекст подразумевает использование в нем ссылок на различные части этого текста или на другие документы. При щелчке левой кнопкой мыши на ссылку происходит переход к какому-то документу либо к какой-то части текста. Структура текстовой ссылки имеет следующий вид:
<A HREF=”адрес файла”> текст ссылки </A>
адрес файла – это путь к тому документу или фрагменту текста, куда направляется ссылка. Ссылкой может быть и текст, и изображение, и кнопка.
Если эта работа выполняется не сразу после предыдущей, то откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
Введите фразу: Текст до ссылки. Введите тег: <А HREF="first.htm">. Введите фразу: Ссылка на открытие файла. Введите закрывающий тег </А>.
Введите фразу: Текст после ссылки.
Сохраните документ под именем link.htm.
Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).
Дайте команду Файл / Открыть…. Щелкните на кнопке Обзор… и откройте файл link.htm.
Обратите внимание, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием).
Щёлкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.
Щелкните на кнопке
Назад
на панели инструментов, чтобы вернуться
к предыдущей странице. Обратите внимание,
что ссылка теперь считается «просмотренной»
и отображается другим цветом.Для того чтобы организовать ссылки внутри одного документа необходимо предварительно внутри текста расставить метки для перехода.
Наберите полстраницы произвольного текста. А лучше откройте произвольный текстовый файл (можно воспользоваться файлом License.txt) и скопируйте его часть в буфер обмена Ctrl + С , а затем вставьте перед закрывающим тегом </BODY>, используя клавиши Ctrl + V . Прямо в тексте расставьте метки следующим образом: перед выбранным словом (это то слово, на которое Вы хотите установить ссылку с начала документа) поставьте <A NAME=”ИМЯ МЕТКИ”>, а после него закрывающий тег </A>. В результате получится
<A NAME=”ИМЯ МЕТКИ”>слово или фраза из набранного текста </A>
На внешний вид текста это не повлияет, зато теперь можно будет сделать ссылку этому слову или фразе. В этом случае команда перехода будет выглядеть так:
<A HREF=”#ИМЯ МЕТКИ”>описание ссылки </A>.
Предположим, что имеется большой html-документ и необходимо установить ссылки на отдельные его части, при этом сами ссылки располагаем в начале документа. В данном примере ссылками являются названия глав документа - Глава1, Глава2 и Глава3:
<BODY>
<P ALIGN=CENTER>
<B><A HREF="#1"> Глава 1 </A> | <A Href="#2"> Глава 2 </A> | <A HREF="#3"> Глава 3 </A> <B>
<H1> <A NAME="1"> Глава 1 </A> </H1>
Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы. Текст первой главы.
<H1> <A NAME="2"> Глава 2 </A> </H1>
Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы. Текст второй главы.
<H1> <A NAME="3"> Глава 3 </A> </H1>
Текст третьей главы. Текст третьей главы. Текст третьей главы. Текст третьей главы. Текст третьей главы. Текст третьей главы. Текст третьей главы.
</BODY>
Сохраните пример под именем Link_in.htm. Просмотрите его в Internet Explorer. Размер окна уменьшите до ¼ размера экрана.
Проверьте правильность работы ссылки внутри одного документа.
Контрольные вопросы:
Что означает термин Гипертекст?
Какой вид имеет тег ссылки на открытие другого файла?
Что может выступать в роли ссылки?
Как вернуться на предыдущую страницу просмотра в Internet Explorer?
Для чего служать метки в тексте?
Как создать метку в тексте HTML-документа?
Как создать ссылку на метку в тексте HTML-документа?