Основы языка гипертекстовой разметки HTML
Содержание модуля 4
Литература
Он-лайн редакторы HTML документов
Структура HTML – документа
Что такое HTML
HTML: Версии
СТРУКТУРА HTML ДОКУМЕНТА
СТРУКТУРА HTML ДОКУМЕНТА
HTML: Элементы заголовка документа
HTML элементы основного раздела
Разрыв строки
Установка шрифта
Цвет текста и фона
Нумерованный список
Комментарии для разработчиков
Бегущая строка
Использование гиперссылок
ОСНОВНЫЕ ПОНЯТИЯ
Оформление гиперссылки
Графика на веб-странице
Форматы графических файлов
Добавление рисунка на Web-страницу
Фоновый рисунок
Распределение ссылок по картинке
Создание HTML-документа
Он-лайн редакторы HTML документов
Практические задания:
Практические задания:
Практические задания:
Практические задания:
Практические задания:
Задание для СРС
799.82K

Основы языка гипертекстовой разметки HTML

1. Основы языка гипертекстовой разметки HTML

МОДУЛЬ 4
Проф. Петрова И.Ю.
Каф. САПР

2. Содержание модуля 4

1.
2.
3.
4.
5.
6.
Структура HTML – документа
Основные средства языка HTML
Использование гиперссылок
Создание списков в HTML-документе
Создание таблиц в HTML-документе
Графика на веб-странице

3. Литература

1. Справочник HTML [электронный ресурс] http://html.manual.ru/ (дата обращения: 25.10.2015).
2. Он-лайн редактор HTML документов Real-Time HTML Editor [электронный ресурс]
http://htmledit.squarefree.com/ (дата обращения: 25.10.2015).
3. Он-лайн редактор HTML документов TimsFreeStuff HTML Editor [электронный ресурс]
http://www.timsfreestuff.com/HTMLEditor/ (дата обращения: 25.10.2015).
4. Редактор HTML документов Notepad++ [электронный ресурс] https://notepad-plus-plus.org/ (дата
обращения: 25.10.2015).

4. Он-лайн редакторы HTML документов

Real-Time HTML Editor. Один из самых простых в использовании HTML редакторов
умеет работать с ошибками в синтаксисе и скриптах, которые были допущены при
создании кода. Адрес: http://htmledit.squarefree.com/
TimsFreeStuff HTML Editor. Данный редактор HTML online позволяет решить
проблему с постоянным переключением окон браузеров в режиме реального
времени.
Проблема проверки и тестирования кода при написании упрощается, поскольку
всё происходящее вы можете наблюдать на специальной панели. Адрес:
Редактор HTML документов Notepad++
Notepad++ - бесплатный редактор HTML , обладает мультиязычной поддержкой,
подсвечивает синтаксис самых распространенных языков веб-программирования
(например, CSS, PHP и другие).
Интерфейс данной программы выполнен по принципу вкладок, благодаря чему
можно работать сразу с несколькими документами одновременно.

5. Структура HTML – документа

• Что такое HTML
• Структура HTML документа
• Теги HTML

6. Что такое HTML

HTML (Hyper Text Markup Language – язык гипертекстовой разметки) является
языком программирования, предназначенным для разработки Web-страниц.
Язык был разработан Тимом Бернерсом Ли (1989 год, Женева, Швейцария) в
рамках создания проекта распределенной гипертекстовой системы, которую
он назвал World Wide Web (WWW) или Всемирная паутина. Ему принадле-жит
идея гиперссылок и URL-адресов в стиле структуры доменных имен
www. имя. имя.
Документы HTML являются обычными текстовыми файлами, содержащими специальные теги разметки
(или управляющие элементы, дескрипторы). Теги разметки указывают Web-браузеру (например,
Internet Explorer, Mozilla или Opera), как представить страницу на экране. WEB-браузеры распознают
дескрипторы языка HTML и преобразуют код документа в Web-страницу. Приложения обозревателей
разрабатываются с учетом мировых стандартов языка HTML, поэтому Web-страницы выглядят одинаково
в окнах разных обозревателей.
Документ на языке HTML может включать следующие компоненты:
стилизованный и форматированный текст;
команды включения графических и звуковых файлов;
гиперсвязи с различными ресурсами Internet;
скрипты на языке JavaScript и VBScript;
различные объекты, например Flash-анимацию.
Файлы HTML обычно имеют
расширения htm или html. Их можно
создавать при помощи любого
текстового редактора.

7. HTML: Версии

1) HTML 1.0 - Первая версия языка была направлена на представление языка как такового, где
описание его возможностей носило скорее рекомендательный характер.
2) HTML 2.0 - Вторая версия языка фиксировала практику использования его конструкций.
3) HTML++ - представляла новые возможности, расширяя набор тегов HTML в сторону отображения
научной информации и таблиц, а также улучшения стиля компоновки изображений и текста.
4) HTML 3.2 - смогла упорядочить все нововведения и согласовать их с существующей практикой. Она
позволяет реализовать использование таблиц, выполнение кодов языка Java, обтекание графики
текстом, а также отображение верхних и нижних индексов.
5) HTML 4.0 - кроме возможностей разметки текста, включения мультимедиа и формирования
гипертекстовых связей, уже существовавших в предыдущих версиях HTML, в версию 4.01 включены
дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей,
упрощенные средства печати изображений и документов.
6) HTML 5.0 – сведение вместе разметки, стилей отображения, программирования и объектной
модели документов.
7) XHTML 1.0 - миграция с HTML 4.0 в формат XML.

8. СТРУКТУРА HTML ДОКУМЕНТА

Условно все HTML документы можно разбить на:
Простые документы(классические, плоские);
Документы, состоящие из фреймов;
Документы, состоящие из слоев.
HTML является описательным языком разметки документов, в нем используются указатели разметки
(теги). Тег – это конструкция вида:
“<“ нечто “>”
Слова, заключенные в угловые скобки, являются служебными словами языка HTML. Их принято
называть тегами (tags). Теги никогда не отображаются при просмотре страницы — они служат для
управления оформлением.
Весь HTML-документ представляет из себя вложенный набор элементов разметки.
Теги бывают парными и непарными.
Парные теги состоят из открывающего или начального (<html>, <head>, <body>) и закрывающего или
конечного, отличающегося от первого только значком слэша (</html>, </head>, </body>)
К непарным тегам относится, например, тег разрыва строки <br>.

9. СТРУКТУРА HTML ДОКУМЕНТА

Для представления текста в браузере необходимо создать файл с расширением
HTML, в который будет записан этот текст, как, например, обычный текстовый
документ, хранящийся в txt-файле, и определенный набор слов – тегов.
Каждый HTML- документ содержит три основных обязательных раздела: HTML, HEAD
и BODY. Эти разделы задаются парами тегов: <HTML> и </HTML> , <HEAD> и
</HEAD>, <BODY> и </BODY> .
<HTML> </HTML> - самый внешний тег, между его начальным и конечным тегами
должна находиться вся Web-страница. Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером, дает браузеру
информацию о том, что документ разработан с помощью языка разметки HTML.
<HEAD></HEAD> - область заголовка Web-страницы. Задачей заголовка является представление
необходимой информации для программы, интерпретирующей документ. Теги, находящиеся внутри
раздела HEAD (кроме тега <TITLE>), не отображаются на экране.
<BODY> </BODY> - в нем располагается содержательная часть, которая выводится браузером на экран
монитора пользователя. Внутри элемента BODY можно использовать все элементы, предназначенные для
дизайна Web-страницы. Тег имеет 4 группы параметров:
ФОН
ГРАНИЦЫ ДОКУМЕНТА
ТЕКСТ
ГИПЕРССЫЛКИ
Если эти параметры не указывать, то свойства страницы — отступы, цвета и др. — будут такими, какие
заданы по умолчанию.

10. HTML: Элементы заголовка документа

• HEAD(элемент разметки HEAD – заголовок документа)
• TITLE(заглавие документа)
• BASE(база URL)
• ISINDEX(поисковый шаблон)
• META(метаинформация)
• LINK(общие ссылки)
• STYLE(описатели стилей)
• SCRIPT(скрипты)
<title> название документа </title>
Заголовок HEAD не является обязательным контейнером документа. Его можно опустить. Роботы многих
поисковых систем используют содержание элемента TITLE для создания поискового образа
документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE
всегда рекомендуется использовать на страницах Web-узла.

11. HTML элементы основного раздела

В основном разделе Web-страницы содержится текст документа с множеством элементов HTML
(дескрипторов), которые выполняют форматирование текста и добавление элементов Web-страницы.
Эти дескрипторы также бывают как парные (например, <P>…</P>), так и непарные (<BR>)
<P>…</P> - используется для создания нового абзаца, вставляется в основной раздел Web-страницы
(между дескрипторами <BODY>… </BODY>).
По умолчанию текст выравнивается по левому краю, слова автоматически переносятся, когда текст
достигает края окна обозревателя. Изменить выравнивание можно с помощью атрибута ALIGN в
дескрипторе <P>.
Дескриптор <NORB>… </NORB>, вставленный между тегами <P>…</P> блокирует автоматический
перенос слов.
<P ALIGN=“left”>Выравнивание по левому краю</P>
<P ALIGN=“center”>Выравнивание по центру</P>
<P ALIGN=“right”>Выравнивание по правому краю</P>
<P ALIGN=“justify”>Выравнивание по ширине</P>
<P> <NORB>Этот текст не будет переноситься на другую строку, даже если его длина больше ширины окна</NORB> </P>

12. Разрыв строки

Если текст нужно начать с новой строки, используется непарный дескриптор <BR>. Обозреватель покажет
текст с новой строки без добавления пустой строки. Дескриптор <BR> часто используют для добавления
рисунка с новой строки, так как по умолчанию обозреватель отображает рисунок в той же строке, где
находится дескриптор <IMG>.
Пробелы и отступы текста
Если нужно сохранить форматирование текста из Блокнота, можно использовать пару <PRE>…</PRE>.
Эти дескрипторы заставляют обозреватель сохранять все пробелы и табуляции в тексте, заключенном
между ними.
Комбинация символов &nbsp устанавливает неразрывный пробел. Символы, между которыми стоит
неразрывный пробел, не будут переноситься на другую строку в окне обозревателя.
Для визуального выделения абзаца можно воспользоваться дескрипторами <BLOCKQUOTE>…
</BLOCKQUOTE>, которые автоматически задают отступ от левого и правого краев окна.
Текстовые заголовки
<H1>Заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>
Заголовки шести уровней устанавливаются с помощью парных дескрипторов
от <H1>…</H1> до <H6>…</H6>, причем размер заголовка уменьшается с
каждым уровнем. Дескрипторы заголовков устанавливаются в «тело» Webстраницы и имеют больший приоритет для поисковых программ (Yahoo,
Rambler или Яндекс). Поэтому, чем четче заголовок будет выражать суть
Web-страницы, тем больше вероятность того, что ваш документ будет
найден в Интернете.

13. Установка шрифта

Дескриптор <FONT>…</FONT> позволяет устанавливать параметры текста: шрифт, его размер и цвет.
Шрифт выбирается с помощью параметра FASE. В значении параметра следует указать имя шрифта или нескольких
шрифтов. Например:
<FONT PASE=‘Tahoma, Arial, Georgia’> текст </FONT>
Число шрифтов в списке не ограничено, но некоторые из них могут отсутствовать на компьютере пользователя.
Поэтому обязательно указывайте распространенные шрифты. Обозреватель будет применять шрифты в том
порядке, как они записаны.
Размер шрифта устанавливается с помощью параметра SIZE, значение которого меняется от 1 до 7. Например:
<FONT SIZE=1> текст </FONT>
Шрифт увеличивается при увеличении размера.
Форматирование текста
Для форматирования текста используются следующие дескрипторы:
<B>…</B> - полужирный шрифт;
<I>…</I> - курсив;
<U>…</U> - подчеркивание;
<PRE></PRE> - сохраняет форматирование исходного текста;
<SUP>…</SUP> - надстрочный символ;
<SUB>…</SUB> - подстрочный символ.
Текст для форматирования помещается непосредственно между дескрипторами пары. Например, создадим запись:
х2-3х+2=0, корни этого уравнения – х1=1, х2=2.
<I>x<SUB>2</SUB>-3x+2=0,</I><B> корни этого уравнения –</B><I>x<SUP>1</SUP>=1, x<SUP>2</SUP>=2</I>

14. Цвет текста и фона

Цвет
Шестнадцатеричный код
Именной код
Белый
#FFFFFF
White
Бирюзовый
#008080
Teal
Желтый
#FFFF00
Yellow
Зеленый
#008000
Green
Золотой
#FFD700
Gold
Красно-коричневый
#800000
Maroon
Красный
#FF0000
Red
Лимонный
#00FF00
Lime
Морской волны
#00FFFF
Aqua
Оливковый
#808000
Olive
Пурпурный
#800080
Purple
Серебряный
#C0C0C0
Silver
Серый
#808080
Gray
Синий
#0000FF
Blue
Темно-голубой
#000080
Navy
Фуксиновый
#FF00FF
Fuchsia
Черный
#000000
Black
Цвет текста можно установить двумя способами:
1. с помощью параметра COLOR в дескрипторе
<FONT>;
2. с помощью параметра TEXT в дескрипторе
<BODY>.
Значение цвета в обоих случаях устанавливается
одинаково: либо с использованием шестнадцатеричного кода, либо с помощью именного кода.
Цвет фона устанавливает параметр BGCOLOR в
дескрипторе <BODY>

15. Нумерованный список

TYPE
Тип нумерации
‘1’
1, 2, 3, 4,
…..(задан по
умолчанию)
‘i’
i, ii, iii, iv ….
‘I’
I, II, III, IV….
‘a’
a, b, c, d, ….
‘A’
A, B, C, D,…..
Для создания нумерованного списка используются парные теги
<OL>…</OL>, задающие начало и конец списка и <LI>…</LI>,
устанавливающие начало и конец каждого пункта.
Способ нумерации устанавливается c помощью атрибута TYPE в дескрипторе
<OL>…</OL>
Начальный номер пунктов устанавливается c помощью атрибута START в
дескрипторе <OL>…</OL>
Если нужно пропустить часть номеров и продолжить нумерацию с другого
номера, то это можно сделать c помощью атрибута VALUE в дескрипторе
<LI>…</LI>, присвоив ему нужный номер
Маркированный список
<H2>маркированный список</H2>
<UL TYPE = ‘circle’ >
<LI> окружность</LI>
<UL TYPE = ‘disk’>
<LI> круг </LI>
<UL TYPE = ‘square’>
<LI> квадрат</LI>
</UL>
Для создания маркированного списка вместо тегов <OL>…</OL>
используются теги <UL>…</UL>, а каждая строка списка - также
тегами <LI>…</LI>.
TYPE
Тип маркера
Тип маркера устанавливается
‘disk’
значением атрибута TYPE, который
может принимать следующие
‘circle’

значения:
‘square’

16. Комментарии для разработчиков

Создание отступов
Отступ от левого края создается с помощью следующих тегов:
<DL>…</DL>
начало и окончание списка определений;
<DT>…</DT>
заголовок термина;
<DD>…</DD>
определение термина;
<DD>&nbsp</DD>
пустая строка;
<P><DD> текст абзаца</DD></P> красная строка
Комментарии для разработчиков
Код Web-страницы может быть достаточно сложным, и со временем разработчик может забыть
назначение отдельных блоков. Кроме этого, без комментариев достаточно сложно разобраться в коде
постороннему человеку. Поэтому рекомендуется помечать блоки кодов специальными командными
символами <!-- комментарий-->. Текст, расположенный внутри комментария, не отображается в окне
обозревателя и не меняет внешний вид страницы.
<HTML>
<HEAD>параметры страницы</HEAD>
<BODY>текст страницы</BODY>
</HTML>
<!– заголовок Web-страницы -->
<!– основная часть Web-страницы -->

17. Бегущая строка

Бегущая строка создается с помощью парного дескриптора <MARQUEE>… </MARQUEE>. Текст,
расположенный между этими тегами, можно форматировать так же, как обычный текст.
Атрибуты этого дескриптора:
BEHAVIOR
•scrool
способ выполнения эффекта бегущей строки
текст исчезает за краем страницы;
•slide
•Alternate
текст остается у левого края страницы;
направление перемещения текста меняется на противоположное;
BGCOLOR
цвет фона бегущей строки;
DIRECTION
направление перемещения текста;
•left влево;
•right
вправо;
HEIGHT высота бегущей строки;
WIDTH
ширина бегущей строки;
HSPASE отступ от полей страницы;
LOOP
число показов текста
•любое целое число, указывающее число повторов;
•Infinite
бесконечное повторение.

18. Использование гиперссылок

ЧАСТЬ 2

19. ОСНОВНЫЕ ПОНЯТИЯ

Гиперссылка (hyperlink) — часть гипертекстового документа, ссылающаяся на другой элемент (команда,
текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, каталог,
приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы объекта.
<A HREF=‘адрес гиперссылки’>гиперссылка</A>
Гиперссылки создаются с помощью тега <A>…</A>. Текст или изображения, размещенные между
тегами <А> ... </А>, становятся активной зоной документа, чувствительной к щелчку мыши, который
вызывает загрузку целевого документа.
Атрибуту HREF присваивается следующие значения:
<A HREF=‘mydoc.html’> мой документ </A>
адрес URL на другой Web-странице или путь на
диске к другому документу;
<A HREF=‘http://www.narod.ru/’> адрес в Интернете </A>
адрес URL на ресурс в Интернете
<A HREF=‘ftp://…../’> адрес на сервере </A>
адрес URL на документ FTP-сервера
<A NAME=‘mark1’> текст закладки </A>
<A HREF=‘mark1’> гиперссылка </A>
закладка на текущей Web-странице
<A HREF=‘mailto: [email protected]’> моя почта </A>
адрес электронной почты
<A HREF=‘javascript: open_links();’> адрес гиперссылки </A>
сценарий на языке Web-программирования

20. Оформление гиперссылки

Гиперссылка может быть добавлена к любому элементу гипертекстового документа и
обычно выделяется графически.
В HTML-документах текстовые ссылки по умолчанию выделяются синим цветом, при
наведении на них курсором мыши в окне браузера они изменяются, например,
меняют цвет или выделяются подчеркиванием. Посещенная ранее ссылка обычно
выделяется цветом, отличным от цвета непосещённой ссылки.
Цвет ссылки можно указать специально:
• link - цвет ссылки,
• alink - цвет активной ссылки (нажатой),
• vlink - цвет уже посещенной ссылки.
ПРИМЕР:
<body text=‘#336699’ bgcolor=‘#000000’ link=‘#339999’ alink=‘#339999’ vlink=‘#339999’>

21. Графика на веб-странице

22. Форматы графических файлов

В Интернете используется всего три формата графических файлов:
JPEG – для высококачественных полноцветных изображений, фотографий *.jpg;
GIF – для рисунков, содержащих текст, линии, фигуры и одноцветные области. В этом
формате также сохраняются кнопки, логотипы, анимированные рисунки.
PNG – альтернатива двум первым форматам. Этот формат можно использовать во всех
вышеперечисленных случаях, но он поддерживается не всеми обозревателями.
Добавление рисунка на Web-страницу
Чтобы добавить рисунок, используется непарный тег <IMG SRC=‘имя файла’>. Атрибуту
SRC присваивается путь к файлу на диске или URL-адрес файла рисунка в Интернете.
Если рисунок находится в другой папке, то в ссылке указывается также имя папки.
По умолчанию рисунок отображается без границ. При желании границы можно
сделать видимыми с помощью атрибута BORDER, присвоив ему значение толщины
границы в пикселях. BORDER=‘0’ – границы нет.

23. Добавление рисунка на Web-страницу

Рисунки замедляют выгрузку Web-страницы, поэтому существуют специальные приемы, занимающие
внимание пользователя на время выгрузки.
Например, можно создать две копии рисунка: с высоким и низким разрешением и использовать атрибут
LOWSRC: <IMG SRC=‘имя файла с высоким разрешением’ LOWSRC=‘имя файла с низким
разрешением’ WIDTH=‘100’ HEIGHT=’75’>.
При загрузке сначала появится файл с низким разрешением, который потом заменяется файлом с высоким
разрешением. Атрибут ALT может снабдить рисунок альтернативным текстом, появляющимся вместо
незагрузившегося рисунка.
Размер изображения задается атрибутами WIDTH и HEIGHT в дескрипторе <IMG>. Значения этих
атрибутов могут быть указаны в пикселях или в процентах от истинного размера рисунка. Можно одному из
изображений задать значение auto, чтобы пропорции рисунка сохранялись.
Выравнивание рисунка относительно текста задает атрибут ALIGN, принимающий значения:
left – рисунок слева от текста;
right – рисунок справа от текста;
top – текст выровнен по верхнему краю рисунка;
middle – текст выровнен посередине;
botton – текст выровнен по нижнему краю рисунка.
Отступ текста от рисунка управляется атрибутами HSPASE и VSPASE в пикселях– слева и справа, над и
под рисунком. Все атрибуты устанавливаются в дескрипторе <IMG>

24. Фоновый рисунок

myimg.gif
Рисунок можно использовать в качестве фона, установив в дескрипторе
<BODY> атрибут BACKGROUND, указав в его значении адрес
расположения рисунка.
<BODY BACKGRROUND=‘myimg.gif’ >
При этом выбранный рисунок заполнит область окна обозревателя.
Чтобы зафиксировать фон (не давать ему прокручиваться), можно
установить атрибут BGPROPERTIES=‘fixed’ в дескрипторе <BODY>

25. Распределение ссылок по картинке

<IMG SRC="url"
USEMAP="url#map_name">
Можно создать графическое меню из одной большой картинки
таким образом, чтобы каждый элемент рисунка являлся
ссылкой. Распределение ссылок по картинке описывается в тэге
IMG.
USEMAP задает имя элемента рисунка map_name.
<MAP NAME="map_name"> <AREA
SHAPE=" shape " COORDS="x,y,..."
HREF=" adress” TITLE=‘подсказка’>
</MAP>
<AREA> определяет область на картинке посредством
параметров SHAPE и COORDS.
SHAPE – форма области.
•default -- стандартная форма
•rect -- прямоугольник
•circle -- круг
•poly -- многоугольник произвольной формы
COORDS – координаты области. Задаются в пикселах. Круг
имеет три координаты (центр и радиус), прямоугольник – четыре
(координаты противоположных вершин), а для многоугольника
вы должны описать каждую его вершину в двух координатах.
HREF=“адрес” – определяет ссылку на схеме

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

proba.html
Все файлы
Для создания HTML-документа подойдет любой
текстовый редактор (например, Блокнот). Введите в
текстовый файл HTML-код, а затем сохраните этот
файл с расширением .html.
WEB браузер автоматически преобразует код HTML в
Web-страницу с текстом, графикой и встроенными
объектами мультимедиа.
Редакторы HTML-документа
Времена создания HTML страниц в блокноте Windows прошли. Сейчас создано огромное количество
программного обеспечения для упрощения процесса разработки и верстки веб-страниц.
Визуальный HTML редактор имеет ряд преимуществ:
Выделение синтаксиса популярных языков программирования и верстки;
Вставка распространенных веб-конструкций в автоматическом режиме;
Визуальные редакторы HTML позволяют пользователю создать веб-страницы, не обладая навыками
программирования;
Автоматическое исправление ошибок и коррекция кода;
Работа с несколькими файлами одновременно.

27. Он-лайн редакторы HTML документов

Real-Time HTML Editor. Один из самых простых в использовании HTML редакторов
умеет работать с ошибками в синтаксисе и скриптах, которые были допущены при
создании кода. Адрес: http://htmledit.squarefree.com/
TimsFreeStuff HTML Editor. Данный редактор HTML online позволяет решить
проблему с постоянным переключением окон браузеров в режиме реального
времени.
Проблема проверки и тестирования кода при написании упрощается, поскольку
всё происходящее вы можете наблюдать на специальной панели. Адрес:
Редактор HTML документов Notepad++
Notepad++ - бесплатный редактор HTML , обладает мультиязычной поддержкой,
подсвечивает синтаксис самых распространенных языков веб-программирования
(например, CSS, PHP и другие).
Интерфейс данной программы выполнен по принципу вкладок, благодаря чему
можно работать сразу с несколькими документами одновременно.

28. Практические задания:

1
2
<HTML>
<HEAD>
<TITLE>Проба</TITLE>
</HEAD>
<BODY>
Я хочу сделать Web-страницу
</BODY>
</HTML>
Откройте Блокнот (Пуск->Все программы->Стандартные->Блокнот) и сохраните
документ с расширением .html (Файл->Сохранить как…->имя документа proba. html).
Введите HTML-код из примера. Сохраните документ (Файл -> Сохранить) и закройте его.
Откройте браузер. Найдите сохраненную Web-страницу, откройте ее и посмотрите, что у
вас получилось.
Вставьте листинг (расположен ниже) в основной раздел вашей Web-страницы ниже текста «Я хочу сделать Webстраницу» и посмотрите, что у вас получилось.
<P ALIGN=“left”>Выравнивание по левому краю</P>
<P ALIGN=“center”>Выравнивание по центру</P>
<P ALIGN=“right”>Выравнивание по правому краю</P>
<P ALIGN=“justify”>Выравнивание по ширине</P>
<P> <NORB>Этот текст не будет переноситься на другую строку, даже если его длина больше ширины окна</NORB> </P>
3
Люби, покуда любится,
Терпи, покуда терпится,
Прощай, пока прощается,
И - Бог тебе судья!
Н. А. Некрасов
Введите в документ proba.html между дескрипторами <P>…</P> строфу из
стихотворения «Зеленый шум».
Вставьте в конце каждой строки дескриптор <BR>. Проверьте, как изменился вид
документа.
Вставьте перед именем автора три символа &nbsp. Посмотрите, как теперь выглядит
текст. Добавьте еще необходимое количество символов.

29. Практические задания:

4
Практические задания:
<H1>Заголовок первого уровня</H1>
Введите в документ этот листинг и посмотрите, что у Вас получилось
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>
5 Введите в документ proba.html в дескриптор <BODY> параметры цвета BGCOLOR=#FFFF00 TEXT=‘blue’>
<BODY BGCOLOR=#FFFF00 TEXT=‘blue’> > текст страницы </BODY>
Измените значения параметров, пользуясь таблицей цветов. Посмотрите, как изменится вид Web-страницы.
6
Измените размеры шрифта каждой строки стихотворения. Фамилию автора напишите курсивом.
<FONT SIZE=6 FASE=‘arial’ COLOR=‘red’> Люби, покуда любится,</FONT> <BR>
<FONT SIZE=5 FASE=‘arial’ COLOR=‘red’> Терпи, покуда терпится,</FONT> <BR>
<FONT SIZE=4 FASE=‘arial’ COLOR=‘red’> Прощай, пока прощается </FONT> <BR>
<FONT SIZE=3 FASE=‘arial’ COLOR=‘red’> И - Бог тебе судья! </FONT> <BR>
<BR>
<FONT SIZE=3 FASE=‘arial’ COLOR=‘red’> <I> Н.А. Некрасов </I> </FONT> <BR>

30. Практические задания:

7
Практические задания:
<H2>маркированный список</H2>
<UL TYPE = ‘circle’ >
<LI> окружность</LI>
<UL TYPE = ‘disk’>
<LI> круг </LI>
<UL TYPE = ‘square’>
<LI> квадрат</LI>
</UL>
Вставьте маркированный список в документ proba.html после текста
стихотворения и посмотрите, что у Вас получилось
в документ proba.html следующий после маркированного списка абзац с красной строки. Причем
8 Введите
перед абзацем поставьте тег
<BR> - пропустить строку
<BR>
<P><DD> Структурное форматирование в HTML подразумевает разбиение текстовых фрагментов
электронного документа на логические блоки с информацией, которым соответствует определенный
формат: абзац, текстовый блок, центрирование, отступы и перенос строки, горизонтальный разделитель,
предварительно отформатированный текст и комментарии. </DD></P>
9 Введите бегущую строку в самом начале документа proba.html
<marquee behavior="alternate" direction="left" bgcolor="#ffcc00">
Это мой первый сайт...
</marquee>

31. Практические задания:

10
Сделайте ссылку в конце Вашего HTML документа на стихотворение, которое было опубликовано в начале.
Для этого перед началом стихотворения в тексте нужно поставить метку: <a name="Ссылка 1"></a>
А в конце документа ввести строку:
<H3>Это ссылка на <a href="#ссылка 1">стихотворение</a>, опубликованное в начале документа</H3>
11
Чтобы после стихотворения можно было вернуться в конец документа, поставьте после стихотворения
строку:
<H3> <a href="#ссылка 2">Вернуться в конец страницы </a> </H3>
А в конце документа сделайте метку:
<a name="Ссылка 2"></a>
12
Измените цвета активной и посещенной ссылок. Для этого нужно ввести в самом начале документа в
строку
<BODY BGCOLOR=#FFFF00 TEXT=‘blue’ link='##000000' alink='#ff0000' vlink='##008000'>
Результат этих действий показан на следующей странице

32.

Практические задания 10, 11, 12 (результат)
<HTML>
<HEAD>
<TITLE>Проба</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFF00 TEXT=‘blue’ link='##000000' alink='#ff0000' vlink='##008000'>
………………………………………..……..
<a name="Ссылка 1"></a>
<P>Люби, покуда любится,<BR>
Терпи, покуда терпится,<BR>
Прощай, пока прощается,<BR>
И - Бог тебе судья!<BR>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Н. А. Некрасов
<H3> <a href="#ссылка 2">Вернуться в конец страницы </a> </H3>
………………………………………………….
<H3>Это ссылка на <a href="#ссылка 1">стихотворение</a>, опубликованное в начале документа</H3>
<a name="Ссылка 2"></a>
</BODY>
</HTML>

33. Практические задания:

1. Создайте новую страницу (см. пример).
2. Запишите текст: “Оформление графики в HTML”
3. Добавьте рисунок (images/sova.jpg) на WEBстраницу и измените выравнивание фотографии
относительно текста.
4. Улучшите внешний вид страницы, добавив
анимацию, горизонтальные и вертикальные линии,
рамки и т.п.
5. Сохраните web-страничку, дав ей имя (например,
Графика.html)

34. Задание для СРС

Создать HTML страницу на основе реферата №3, используя
все изученные средства языка HTML
English     Русский Правила