Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Часть 1. Тема работы: Создание HTML-документа.
|
|
Тема работы: Создание HTML-документа.
Цель работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.
Теоретическая часть: HTML-документ — это просто текстовый файл с расширением *.htm или *.html).
Вот самый простой HTML-документ:
Вы можете посмотреть этот пример прямо сейчас.
Для удобства чтения в примере введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому пример мог бы выглядеть вот так:
< html> < head> < title> Лабораторная 2. Пример 1.< /title> < /head> < body> < H1> Привет! < /H1> < P> Это простейший пример HTML-документа.< /P> < P> Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения.< /P> < /body> < /html>Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками " < " и " > ". Такой фрагмент (например, < html> ) называется меткой (по-английски — tag, читается " тег").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида < tag> есть закрывающая метка вида < /tag> с тем же именем, но с добавлением " /".
Метки можно вводить как большими, так и маленькими буквами. Например, метки < body> , < BODY> и < Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. Более подробно метки и их атрибуты рассмотрим в ходе выполнения лабораторной работы.
Ход работы:
Создание простейших файлов HTML.
- Создайте папку, в которой Вы будете сохранять созданные Web-страницы.
- Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
- Сохраните файл под именем schedule.html.
- Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
- Откройте в меню броузера Файл (File), Открыть (Open), Просмотр(Обзор — Browse) и найдите созданный ранее файл schedule.html, загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.
Управление расположением текста на экране.
- Внесите изменения в текст, расположив слова " Расписание", " занятий", " на вторник" на разных строках:
- Сохраните внесенные изменения, с помощью команд Файл (File), Сохранить (Save).
- Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью кнопки Обновить (Refresh).
Предыдущие шаги не вызвали никаких видимых изменений в документе html — при отображении гипертекста броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тег перевода строки < BR> отделяет строку от последующего текста или графики. тег абзаца < P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).
- Внесите изменения в текст файла HTML:
Сохраните внесенные изменения в файле schedule.html. Просмотрите с помощью броузера обновленную страницу.
Выделение фрагментов текста.
Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тега выделения фрагментов текста: < B>: < /B> — для выделения полужирным, < I>: < /I> — для выделения курсивом, < U>: < /U> — для выделения подчеркиванием.
- Внесите изменения в файл schedule.html:
- Посмотрите новую полученную Web-страницу.
- Попробуейте использовать вложение тегов:
< I> < B> Расписание< /B> < /I> < I> занятий< /I> < U> на вторник< /U>
Изменение размера текста
Существует два способа управления размером текста, отображаемого
броузером:
o использование стилей заголовка;
o задание размера текущего шрифта;
1.Внесите изменения в файл schedule.html:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY> < H1> Расписание< /H1> < I> занятий< /I> < U> на вторник< /U> < /BODY> < /HTML>- Просмотрите обновления через браузер.
- Внесите следующие изменения в файл schedule.html:
- Самостоятельно измените размер шрифта для текста " занятия на вторник", используя тег < FONT>.
Гарнитура и цвет шрифта
Тег < FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу < FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать < FONT FACE=" ARIAL" >.
Для изменения цвета шрифта в теге < FONT> можно использовать атрибут COLOR=" X". Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в формате RGB приведены в таблице:
| Цвет | RRGGBB |
| black | черный | |
| white | белый | FFFFFF |
| red | красный | FF0000 |
| green | зеленый | 00FF00 |
| azure | бирюзовый | 00FFFF |
| blue | синий | 0000FF |
| gray | серый | A0A0A0 |
| purple | фиолетовый | FF00FF |
| yellow | желтый | FFFF00 |
| brown | коричневый | |
| orange | оранжевый | FF8000 |
| violet | лиловый | 8000FF |
- Внесите изменения в файл schedule.html:
2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Выравнивание текста по горизонтали
С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле.
Современные броузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.
- ALIGN=CENTER — Выравнивание по центру
- ALIGN=RIGHT — Выравнивание по правому краю
- ALIGN=LEFT — Выравнивание по левому краю
1.Внесите изменения в файл schedule.html:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY> < P ALIGN=CENTER> < FONT COLOR=" #008080" SIZE=" 7" > < B> Расписание< /B> < /FONT> < BR> < FONT SIZE=" 6" > < I> занятий на вторник< /I> < /FONT> < /P> < /BODY> < /HTML>- Просмотрите обновления
Задание цвета фона и текста
Цвета фона и текста документа устанавливаются в начале файла HTML в теге < BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.
- Внесите изменения в файл schedule.html:
Задание на самостоятельное выполнение.
- Проведите экспериментальную работу с созданным документом. Меняя размеры окна, посмотрите, как броузер показывает текст с принудительным разрывом строк. Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?
- Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.
|
|