Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Практическая работа № 26
|
|
Тема: Создание Web-страницы на языке HTML.
Цель работы: Научиться создавать Web-страницу, используя стандартную программу MS Office Блокнот (Notepad), используя зык HTML.
Оборудование: персональный компьютер, программа БЛОКНОТ, интернет-браузер.
Краткие теоретические сведения:
HTML - документ - это просто текстовый файл с расширением *.htm или *.html.
Вот самый простой HTML - документ:
< html> < head> < title> Практическая 1. Пример 1. < /title> < /head> < body> < H1> Привет! < /H1> < P> Это простейший пример HTML-документа. < /P> < P> Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения. < /P> < /body> < /html>
Для удобства чтения в примере введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому пример мог бы выглядеть вот так:
< html> < head> < title> Практическая 1. Пример 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> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку.
Ход работы:
Задания для самостоятельной работы:
Задание 1. Создание HTML – документа.
1. Создайте папку, в которой Вы будете сохранять созданные Web-страницы.
2. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY> Расписание занятий на вторник< /BODY> < /HTML>3. Сохраните файл под именем moi.html.
4. Для просмотра своей первой интернет-страницы двойным щелчком мыши откройте сохраненный документ.
Задание 2. Управление расположением текста на экране.
1. Внесите изменения в текст, расположив слова " Расписание", " занятий", " на вторник" на разных строках:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY> Расписаниезанятийна вторник
< /BODY> < /HTML> 2. Сохраните внесенные изменения, с помощью команд «Файл» - «Сохранить».
3. Просмотрите с помощью брaузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью кнопки «Обновить».
Предыдущие шаги не вызвали никаких видимых изменений в документе html — при отображении гипертекста брaузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов.
Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца.
Тег перевода строки < BR> отделяет строку от последующего текста или графики.
Тег абзаца < P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.
Оба тега являются одноэлементными (не требуют закрывающего тега).
4. Внесите изменения в текст файла HTML:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY> Расписание < P> занятий < BR> на вторник< /BODY> < /HTML> 5. Сохраните внесенные изменения в файле moi.html. Просмотрите с помощью брaузера обновленную страницу.
Задание 3. Выделение фрагментов текста.
Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов.
Существует три тега выделения фрагментов текста:
< B>: < /B> — для выделения полужирным,
< I>: < /I> — для выделения курсивом,
< U>: < /U> — для выделения подчеркиванием.
1. Внесите изменения в файл moi.html:
2. Посмотрите новую полученную Web-страницу.
3. Попробуйте использовать вложение тегов:
< I> < B> Расписание< /B> < /I> < I> занятий< /I> < U> на вторник< /U>
Задание 4. Изменение размера текста.
Существует два способа управления размером текста, отображаемого браузером:
- использование стилей заголовка;
- задание размера текущего шрифта.
1. Внесите изменения в файл moi.html:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY> < H1> Расписание< /H1> < I> занятий< /I> < U> на вторник< /U> < /BODY> < /HTML>1. Просмотрите обновления через браузер.
2. Внесите следующие изменения в файл moi.html:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY> < FONT SIZE=" 7" > Расписание< /FONT> занятий на вторник< /BODY> < /HTML>3. Самостоятельно измените размер шрифта для текста " занятия на вторник", используя тег < FONT>.
Задание 5. Гарнитура и цвет шрифта.
Тег < FONT> предоставляет возможности управления размером, начертанием и цветом текста.
Изменение гарнитуры шрифта выполняется простым добавлением к тегу < FONT> атрибута FACE.
Например, для изображения текста шрифтом Arial необходимо записать < FONT FACE=" ARIAL" >.
Для изменения цвета шрифта в теге < FONT> можно использовать атрибут COLOR=" X".
Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение.
При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.
Внесите изменения в файл moi.html:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY> < U> < I> < B> < FONT COLOR=" #FF0000" FACE=" ARIAL" SIZE=" 7" > Расписание< /FONT> < /B> < /I> < /U> занятий на вторник < /BODY> < /HTML>1. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Задание 6. Выравнивание текста по горизонтали.
С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле.
Современные браузеры для выравнивания текста используется атрибут ALIGN, который встраивается в теги абзаца или заголовка.
o ALIGN=CENTER — Выравнивание по центру
o ALIGN=RIGHT — Выравнивание по правому краю
o ALIGN=LEFT — Выравнивание по левому краю
1. Внесите изменения в файл moi.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>2. Просмотрите изменения вашей интернет-страницы.
Задание 7. Задание цвета фона и текста
Цвета фона и текста документа устанавливаются в начале файла HTML в теге < BODY>.
Атрибут BGCOLOR задает фон для всей страницы.
Атрибуты LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.
Атрибут TEXT= определяет цвет текста.
1. Внесите изменения в файл moi.html:
< HTML> < HEAD> < TITLE> Учебный файл HTML < /TITLE> < /HEAD> < BODY BGCOLOR=" #FFFFCC" TEXT=" #330066" > < P ALIGN=CENTER> < FONT COLOR=" #008080" SIZE=" 7" > < B> Расписание< /B> < /FONT> < BR> < FONT SIZE=" 6" > < I> занятий на вторник< /I> < /FONT> < /P> < /BODY> < /HTML>Задание 8. Создайте собственный HTML-документ, содержащий небольшой рассказ о себе и своих увлечениях.
? Контрольные вопросы:
1. Что такое WWW?
2. Что такое web-страница?
3. Что такое сайт?
4. Что включает в себя сопровождение сайта?
5. Что такое тег (атрибуты тега)?
6. Этапы создания web-страницы?