Практическое занятие № 19

ТЕМА: Основные понятия языка гипертекстовой разметки документов HTML. Структура HTML-документа. Теги и атрибуты форматирования веб-страниц.

ЦЕЛЬ: Сформировать знания об основных понятиях языка гипертекстовой разметки документовHTML, о структуре HTML-документа, сформировать умения составлять веб-страницы с помощью тегов и атрибутов к ним.  

 

1. Последовательность выполнения практического занятия.

1.1. Внеаудиторная подготовка

а. повторить технику безопасности при работе на ПК.

1.2. Работа на учебном занятии

а. Выполнить практические задания.

б. Убрать рабочее место.

в. Оформить отчёт.

2. Методические указания

 

Теоретические сведения для выполнения Задания 1.

Основные понятия языка гипертекстовой разметки документов HTML. Структура HTML-документа. Теги.

Большинство информационных ресурсов сети Интернет представлено в виде веб-страниц, которые объединены в веб-сайты.

Трудно создать хороший сайт, не зная хотя бы основ языка HTML (HyperText Markup Language)

А для профессиональной работы просто необходимо освоить языки веб-программирования, и прежде всего HTML. Для работы с HTML-кодом могут использоваться специальные инструменты разработки, например, редакторы  Patriot и др. Эти инструменты облегчают ввод и редактирование основных конструкций языка HTML. Однако вводить основные теги и конструкции языка HTML можно даже в простом текстовом редакторе Блокнот, а затем просматривать результаты работы с помощью браузера.

Документ HTML представляет собой обычный текстовый файл, который содержит конструкции языка HTML и сохраняется с расширением .htm или .html.

Суть языка HTML заключается в разметке текста с помощью управляющих символов ‑ тегов, которые располагаются в угловых скобках. В эти скобки заключены коды, которые распознает браузер. Большинство тегов парные, т.е. имеют открывающий элемент < > и закрывающий элемент </>.

HTML-документ всегда должен начинаться отрывающим тегом <html> и заканчиваться закрывающим </html>.

Внутри, как в контейнере, расположены два блока:

·           блок служебной (неотображаемой на экране) информации <head>…</head>;

·           блок <body>…</body> (тело страницы), в котором размещается отображаемая браузером информация: тексты, рисунки, аудио и видеофрагменты, анимации и модели.

Внутри блока <head>…</head> размещается блок <title>… </title> и метатеги, содержащие служебную информацию. Текст, заключенный между тегами <title>…</title> отображается в заголовке окна браузера.

В HTML-документе можно разместить комментарии, которые браузером не отображаются<!Комментарии>.

В редакторе Patriot текст документа набирается на вкладке - Текст,  а просмотр созданного документа на вкладке HTML.

Структура HTML-документа:

 

<Html>

             <Head>

                          <Title> заголовок Web-документа </title>

             </head>

                          <Body>

                           Содержимое Web-документа

                          </body>

</html>

 

 

 

Задание 1.  Создать  простой HTML-документ в редакторе Patriot, который отобразит на веб-странице текст: Мой первый текст на первой созданной мною страничке.

Методика выполнения Задания 1.

- наберите текст программы на языке HTML на вкладке Текст;

 

<html>           <!Открытие HTML документа>

     <head>

           <title> Первый проект </title>

    </head>

                  <body>      <!Содержание (тело) документа>

                    Мой первый текст на первой созданной мною страничке

                   </body>

 </html>

- перейдите на вкладку HTML и просмотрите результат;

- перепишите  текст  HTML-документа  в отчет и дайте комментарии о назначении каждого тега, имеющегося в этом документе.

 

Теоретические сведения для выполнения Заданий 2-3.

Атрибуты форматирования веб-страниц.

Теги языка HTML могут содержать атрибуты, которые являются параметрами или свойствами элементов разметки документа.

Правило записи атрибутов в теге следующее:

<тег атрибут1=значение   атрибут2=значение   … >

 Рассмотрим на примере как задать, допустим, синий цвет страницы. Цвет можно задать одним из двух способов:

1) указанием имени цвета  <body bgcolor="blue">   <!название цвета>

2) <body bgcolor="#0000FF>    <!шестнадцатеричный код цвета>

ЗАПОМИНАЕМ: тег body bgcolor предназначен для того, чтобы задать цвет веб-страницы.

Важнейшими структурными элементами веб-страницы являются заголовки и абзацы.

Предусмотрено 6 уровней заголовков, которые обозначаются h1, h2,...h6.

Для описания уровней используются соответствующие теги, например, для третьего уровня  <hЗ> и </h3>. По умолчанию заголовок уровня 1 самый крупный, а уровня 6 — самый маленький.

Для выравнивания текста (в абзаце или заголовке) на странице используется атрибут align, имеющий значения:

align = center (выравнивание по центру), 

align = left   (выравнивание по левому краю),

align = right (выравнивание по правому краю).

 

Задание 2.  Создайте HTML-документ с примерами использования выравнивания текста.

 

Методика выполнения Задания 2.

- наберите текст программы на языке HTML на вкладке Текст;

 

<Html>

<Head>

<Title> Выравнивание текста</title>

</head>

<body bgcolor=yellow   text=green>

<h1 ALIGN=CENTER> Ну вот! Мы уже кое-чему НАУЧИЛИСЬ </h1>

<h2> Я умею располагать абзацы  </h2>

<p> Знаю, что абзацы можно выравнивать не только влево, </p>

<pALIGN=CENTER> но и по центру </p>

<p ALIGN=RIGHT> или по правому краю. </p>

</body>

</html>

 

- перейдите на вкладку HTML и просмотрите результат;

- перепишите  текст  HTML-документа  в отчет и дайте комментарии о назначении каждого тега, имеющегося в этом документе.

 

Задание 3.  Создайте HTML-документ с примерами использования цветовой гаммы.

 

Методика выполнения Задания 3.

- наберите текст программы на языке HTML на вкладке Текст;

 

<html>

<head>

<title Использование цветовой гаммы </title>

</head>

<!—Цвет фона – серебристый, цвет текста – голубой>

<body bgcolor=silver text=blue>

<font size=6 color=red><b>Ф</b></font>

<font size=5><i>ормат<Fontcolor=green>

<Sub>ирование </sub></i>

<font size=2 color=black>т</font>

<font size=3 color=red>е</font>

<font size=4 color=black>к</font>

<font size=5 color=red>с</font>

<font size=6 color=black>т</font>

<font size=7 color=red>а</font>

  </body>

</html>

 

- перейдите на вкладку HTML и просмотрите результат;

- перепишите  текст  HTML-документа  в отчет и дайте комментарии о назначении каждого тега, имеющегося в этом документе.

 

Теоретические сведения для выполнения Задания 4-6.

Форматирование текста  на языке HTML

Для разбиения текста на абзацы используется тег <p>, при этом пропускается одна строка. Для перехода на новую строку без создания абзаца  тег <br>.

Тег <p> допустимо не закрывать, если в нем не используются атрибуты, задающие параметры текста в абзаце. Например, текст абзаца на странице выравнивается любыми способами с помощью атрибута align аналогично выравниванию заголовков.

Для определения шрифта, его размера и цвета символов используется тег <font> </font>.

Шрифт задается атрибутом face=”название шрифта”например, Arial и т.д.

Цвет color =”цвет символа”.

Размер символа задает атрибут size. По умолчанию этот размер равен 3.

Поместив текст между тегами <font size=n> </font>, где n - цифровое значение, можно придать ему нужный размер:

 

<font size="1"> Пример </font>

 

Размер символов может задаваться в относительных единицах по отношению к базовому размеру, например, size = + числоили size = — число.

 Так, для базового размера, равного 3 <font size="+2"> означает размер 5, а <font size="-2"> означает размер 1.

За начертание текста отвечает целая группа тегов, значения которых приведем в таблице:

Тег

Назначение

Результат использования

<b> </b>

Полужирный шрифт

Полужирный шрифт

<em> </em>

Курсивный шрифт

Курсивный шрифт

<u> </u>

Подчеркнутый шрифт

Подчеркнутый шрифт

<sub> </sub>

Верхний индекс

Верхний индекс

<sup > </sup>

Нижний индекс

Нижний индекс

 

Допускается комбинирование и вложенность тегов. Например, можно отображать текст на веб-странице шрифтом Arial и курсивным начертанием одновременно.

Фрагмент текста

 

Задание 4. Создать  фрагмент HTML-документа с использованием тега <font>.

Методика выполнения Задания 4.

- наберите текст программы на языке HTML на вкладке Текст;

 

<p><font face=”Arial” color=red> Шрифт Arial красного цвета

<font size=+3> вдруг стал большим. </font>

<p><font size=-3> Внезапно текст уменьшился. </font>

<p><font face=”Tahoma color=green>Текст превратился в  Tahoma  зеленого цвета </font>

 

- перейдите на вкладку HTML и просмотрите результат;

- перепишите  текст  HTML-документа  в отчет и дайте комментарии о назначении каждого тега, имеющегося в этом документе.

 

 

Задание 5. Создать документ с помощью логических и физических стилей.

 

Методика выполнения Задания 5.

- наберите текст программы на языке HTML на вкладке Текст;

 

<html>

<head>

<title>Стили</title>

</head>

<body>

<h1>Шрифтовое выделение фрагментов текста</h1>

<p> Теперь мы знаем, что фрагменты текста можно выделять

<b> жирным или </b>

 <i> наклонным шрифтом,</i>  

<u> а можно и подчеркнуть</u> </p>

<p> Кроме того, существует ряд логических стилей:</p>

<p><sup> sup - верхний индекс</sup> <br>

 <p><sub> sub - нижний индекс</sub> <br>

</body>

</html>

 

- перейдите на вкладку HTML и просмотрите результат;

- перепишите  текст  HTML-документа  в отчет и дайте комментарии о назначении каждого тега, имеющегося в этом документе.

 

Самостоятельная работа

Создайте HTML-документ следующего диалога:

«Диалог» устройств компьютера

На фирму пришла работать новая Мышь. Вечером она решила расспросить Клавиатуру о работниках фирмы.

Слушай, Клава, а кто у Вас на фирме главный?

 А сама как думаешь?

Ну, Сервер, наверное…

 Нет, судя по зарплате, он не является главным.

Тогда Принтер… Цветной, лазерный световой…

Нет, Мышь, опять мимо. Ты жизни не знаешь. Вот видишь, на столе маленький с красными глазками? Ладно, скажу - Модем. Он является самым главным, так как связывает нас со всем Миром.

 

3. Содержание отчета

а. Титульный лист

б. Цель работы

в. Дидактическое и методическое обеспечение

г. Последовательность выполнения работы по заданиям с описанием основных этапов осуществляемых действий

д. Заключение в виде анализа полученных результатов и выводов

 

 Контрольные вопросы

1. Какие основные теги описывают HTML-документ?

2. Для чего используются атрибуты в тегах?

3. Как задать фон и цвет текста на веб-странице с помощью атрибутов?

4. Как выводятся заголовки в языке HTML?

5. Как задается начало текстового абзаца?

6. Как задается тип, размер и цвет символа?

7. Какие возможности начертания текста предоставляет язык HTML?