- •Минобрнауки россии
- •Основные положения языка html
- •Структура html-документа
- •Цвета в html-документе
- •Создание простейшей Web-страницы
- •Изучение приемов форматирования абзацев
- •Создание гиперссылок
- •Создание изображения и использование его на Web-странице
- •Приемы форматирования текста
- •Приемы создания списков
- •Создание таблиц
- •Создание описания фреймов
- •Создание Web-документа с помощью редактора FrontPage Express
- •1.Текст файла абзац.Htm
- •2.Текст файла гиперссылка.Htm
- •3.Текст файла картинка.Htm
- •4.Текст файла формат.Htm
- •5.Текст файла таблица.Htm
- •6.Текст файла фрейм.Htm
- •Контрольные вопросы
Создание простейшей Web-страницы
Создайте папку Студент\1 курс\ваша группа\ваша фамилия.
Запустите текстовый редактор Блокнот (Пуск ► Программы ► Стандартные ► Блокнот).
Напечатайте следующий текст:
<HTML>
<HEAD>
<TITLE>3аголовок документа</TITLE>
</HEAD>
<BODY>
Это файл 1.htm.
Содержание
документа
</BODY>
</HTML>
Дайте этому документу имя 1. В окне Тип файлов установите Все файлы и допечатайте расширение .htm. В противном случае редактор Блокнот может автоматически добавить в конец имени расширение .txt. Сохраните ваш файл 1.htm в вашей личной папке. Не закрывайте программу блокнот, она пригодится при выполнении следующих разделов работы.
Войдите в вашу папку, запустите файл 1.htm. Можно также запустить имеющийся на компьютере браузер, например, Internet Explorer, Opera или другой.
Дайте команду Файл ► Открыть. Щелкните на кнопке Обзор и откройте файл 1.htm.
Посмотрите, как отображается этот файл — простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?
Как отображается строка «Это файл 1.htm.» и слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.
В этом упражнении мы создали простейший документ HTML Мы познакомились с особенностями форматирования документов HTML и их отображения при помощи браузера. |
Изучение приемов форматирования абзацев
Удалите весь текст, находящийся между тегами <BODY> и </BODY>.
Введите после тега <BODY> два новых тега <Н1> и </Н1>, а между ними напечатайте заголовок первого уровня «Изучение языка HTML».
Введите после тега </Н1> два новых тега <Н2> и </Н2> заголовок второго уровня «Web-страница», заключив его между тегами <Н2> и </Н2>.
Введите после тега </Н2> новый тег <Р>, после него напечатайте текст «Создание текста с абзацем. Абзац создается тегом <Р>». Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.
Введите тег горизонтальной линейки <HR>.
Сохраните этот документ под именем абзац.htm.
Войдите в текстовый редактор Блокнот, где находится ваш файл.
Запустите файл абзац.htm.
Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.
В этом упражнении мы создали документ HTML с разметкой абзацев. Мы определили, как влияют теги HTML на отображение соответствующих частей документа. |
Создание гиперссылок
Если это упражнение выполняется не сразу после предыдущего, откройте документ 1.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>.
Введите фразу: Текст до ссылки.
Введите тег: <А HREF="first.htm">.
Введите фразу: Ссылка.
Введите закрывающий тег </А>.
Введите фразу: Текст после ссылки.
Сохраните документ в вашей папке под именем гиперссылка.htm.
Запустите обозреватель Internet Explorer (Пуск ► Программы ► Internet Explorer).
Дайте команду Файл ► Открыть. Щелкните на кнопке Обзор и откройте файл гиперссылка.htm.
Убедитесь в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием).
Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.
Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.
В этом упражнении мы создали документ HTML, содержащий гиперссылки. Мы увидели, как гиперссылки отображаются в документе, и научились пользоватьтся ими. |