Создание HTML-документа

Автор работы: Пользователь скрыл имя, 25 Января 2013 в 18:59, лабораторная работа

Краткое описание

Цель работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.

Скачать полностью (12.15 Кб) Сколько стоит заказать работу?
Прикрепленные файлы: 1 файл

ЛАБОРАТОРНАЯ РАБОТА_2.doc

— 64.50 Кб (Скачать документ)

ЛАБОРАТОРНАЯ РАБОТА №2

Тема работы: Создание HTML-документа.

Цель работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.

Теоретическая часть: HTML-документ — это просто текстовый файл с расширением *.htm или *.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 это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в 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.

  1. Создайте папку, в которой Вы будете сохранять созданные Web-страницы.
  2. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:
  3. <HTML>
  4. <HEAD>
  5. <TITLE> Учебный файл HTML </TITLE>
  6. </HEAD>
  7. <BODY>
  8. Расписание занятий на вторник
  9. </BODY>
  10. </HTML>
  11. Сохраните файл под именем schedule.html.
  12. Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
  13. Откройте в меню броузера Файл (File), Открыть (Open), Просмотр(Обзор — Browse) и найдите созданный ранее файл schedule.html, загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.

Управление расположением текста на экране.

  1. Внесите изменения в текст, расположив слова "Расписание", "занятий", "на вторник" на разных строках:
  2. <HTML>
  3. <HEAD>
  4. <TITLE> Учебный файл HTML </TITLE>
  5. </HEAD>
  6. <BODY>
  7. Расписание
  8. занятий
  9. на вторник
  10. </BODY>
  11. </HTML>
  12. Сохраните внесенные изменения, с помощью команд Файл (File), Сохранить (Save).
  13. Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью кнопки Обновить (Refresh).

Предыдущие шаги не вызвали никаких видимых изменений в документе html — при отображении гипертекста броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.  
тег перевода строки <BR> отделяет строку от последующего текста или графики. тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).

  1. Внесите изменения в текст файла HTML:
  2. <HTML>
  3. <HEAD>
  4. <TITLE> Учебный файл HTML </TITLE>
  5. </HEAD>
  6. <BODY>
  7. Расписание <P>занятий <BR>на вторник
  8. </BODY>
  9. </HTML>

Сохраните внесенные изменения  в файле schedule.html. Просмотрите с помощью броузера обновленную страницу.

Выделение фрагментов текста.

теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тега выделения фрагментов текста: <B> : </B> — для выделения  полужирным, <I> : </I> — для выделения  курсивом, <U> : </U> — для выделения подчеркиванием.

  1. Внесите изменения в файл schedule.html:
  2. <HTML>
  3. <HEAD>
  4. <TITLE> Учебный файл HTML </TITLE>
  5. </HEAD>
  6. <BODY>
  7. <B>Расписание</B> <I>занятий</I> <U> на вторник</U>
  8. </BODY>
  9. </HTML>
  10. Посмотрите новую полученную Web-страницу.
  11. Попробуйте использовать вложение тегов: 
    <I><B>Расписание</B></I> <I>занятий</I> <U> на вторник</U>

Изменение размера текста

Существует два способа управления размером текста, отображаемого броузером:

    • использование стилей заголовка;
    • задание размера текущего шрифта;
  1. Внесите изменения в файл schedule.html:
  1. <HTML>
  2. <HEAD>
  3. <TITLE> Учебный файл HTML </TITLE>
  4. </HEAD>
  5. <BODY>
  6. <H1>Расписание</H1> <I>занятий</I> <U>на вторник</U>
  7. </BODY>
  8. </HTML>
  9. Просмотрите обновления через браузер.
  10. Внесите следующие изменения в файл schedule.html:
  11. <HTML>
  12. <HEAD>
  13. <TITLE> Учебный файл HTML </TITLE>
  14. </HEAD>
  15. <BODY>
  16. <FONT SIZE="7">Расписание</FONT> занятий на вторник
  17. </BODY>
  18. </HTML>
  19. Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тег <FONT>.

Гарнитура и цвет шрифта

тег <FONT> предоставляет возможности  управления размером, начертанием и  цветом текста. Изменение гарнитуры  шрифта выполняется простым добавлением  к тегу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать <FONT FACE="ARIAL">.

Для изменения цвета шрифта в  теге <FONT> можно использовать атрибут COLOR="X". Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным  числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в формате RGB приведены в таблице:

Цвет

RRGGBB

black | черный

000000

white | белый

FFFFFF

red | красный

FF0000

green | зеленый

00FF00

azure | бирюзовый

00FFFF

blue | синий

0000FF

gray | серый

A0A0A0

purple | фиолетовый

FF00FF

yellow | желтый

FFFF00

brown | коричневый

996633

orange | оранжевый

FF8000

violet | лиловый

8000FF


  1. Внесите изменения в файл schedule.html:
  2. <HTML>
  3. <HEAD>
  4. <TITLE> Учебный файл HTML </TITLE>
  5. </HEAD>
  6. <BODY>
  7. <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Расписание</FONT></B></I></U>
  8. занятий на вторник
  9. </BODY>
  10. </HTML>
  11. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.

Выравнивание текста по горизонтали

С помощью тегов HTML можно управлять  горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут  выравниваться по левому краю и иметь  неровное правое поле (см. Рис.2). Современные броузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.

    • ALIGN=CENTER — Выравнивание по центру
    • ALIGN=RIGHT — Выравнивание по правому краю
    • ALIGN=LEFT — Выравнивание по левому краю
  1. Внесите изменения в файл schedule.html:
  1. <HTML>
  2. <HEAD>
  3. <TITLE> Учебный файл HTML </TITLE>
  4. </HEAD>
  5. <BODY>
  6. <P ALIGN=CENTER>
  7. <FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
  8. <FONT SIZE="6"><I>занятий на вторник</I></FONT>
  9. </P>
  10. </BODY>
  11. </HTML>
  12. Просмотрите обновления

Задание цвета фона и текста

Цвета фона и текста документа  устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.

  1. Внесите изменения в файл schedule.html:
  2. <HTML>
  3. <HEAD>
  4. <TITLE> Учебный файл HTML </TITLE>
  5. </HEAD>
  6. <BODY BGCOLOR="#FFFFCC" TEXT="#330066">
  7. <P ALIGN=CENTER>
  8. <FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
  9. <FONT SIZE="6"><I>занятий на вторник</I></FONT>
  10. </P>
  11. </BODY>
  12. </HTML>

Задание на самостоятельное выполнение.

  1. Проведите экспериментальную работу с созданным документом. Меняя размеры окна, посмотрите, как браузер показывает текст с принудительным разрывом строк. Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?
  2. Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.

 


Информация о работе Создание HTML-документа