Об истории HTML5 (стр. 1 )

Об истории HTML5

СОДЕРЖАНИЕ

ТЕМА 1. ВВЕДЕНИЕ.. 4

Урок 1. Общие понятия. 4

Что такое Internet?. 4

Зачем нужен язык разметки?. 4

Об истории HTML. 5

Браузеры. 6

HTML-файлы. 6

Редакторы HTML-файлов. 7

Урок 2. Общая структура HTML-документа. 8

ТЕМА 2. ОФОРМЛЕНИЕ ТЕКСТА.. 11

Урок 3. Формирование абзацев и заголовков. 11

Абзацы.. 11

Заголовки. 11

Горизонтальные линии. 12

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

Урок 4. Работа со шрифтами. 16

Урок 5. Создание списков. 20

ТЕМА 3. ВСТАВКА ГРАФИКИ И МУЛЬТИМЕДИА. 24

Урок 6. Вставка изображений. 24

Урок 7. Вставка звука и видео.. 28

ТЕМА 4. ГИПЕРССЫЛКИ.. 30

Урок 8. Создание гиперссылок. 30

Урок 9 . Структура HTML-приложения. 34

ЦЕПОЧКА.. 34

ПРОСТОЕ МЕНЮ... 34

ИЕРАРХИЯ.. 34

ТЕМА 5. ФРЕЙМЫ... 36

Урок 10. Создание фреймов.. 36

Создание фреймов. 36

Урок 11. Создание «плавающих» фреймов.. 39

Создание гиперссылок с учетом фреймов. 39

ТЕМА 6. ТАБЛИЦЫ... 41

ТЕМА 6. ТАБЛИЦЫ... 42

Урок 12. Создание таблиц. 42

Урок 13. Создание сложных таблиц. 45

Урок 14. Оформление таблиц. 47

Урок 15. Создание форм. 49

Упражнение 3... 51

Приложение 1. FRONT PAGE.. 52

Введение. 52

Создание WEB-узла из шаблона. 53

Редактирование WEB-узла. 58

Изменение текста. 59

Использование таблиц. 61

Использование ссылок. 61

Вставка рисунков. 62

Настройка панели навигации. 63

Приложение 2. HTML-элементы... 64

Приложение 3. Коды специальных символов.. 68

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

ТЕМА 1. ВВЕДЕНИЕ

Урок 1. Общие понятия.

Что такое Internet?

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

На сегодняшний день это самый массовый и оперативный источник информации. В Интернет расположены электронные варианты большинства газет и журналов, работают радиостанции. Крупнейшие библиотеки и музеи мира имеют свои электронные фонды и каталоги. Свою страничку в Сети имеет практически каждая организация, ВУЗы, гимназии, лицеи, школы.

Интернет сегодня – это и крупнейший источник развлечений, и идеальное место для размещения рекламы, и средство виртуального общения, и возможность для занятий бизнесом.

А еще Интернет – это возможность заявить о себе на весь мир. Для этого нужно просто создать свою Web-страничку.

Зачем нужен язык разметки?

При создании обычного документа в любом текстовом процессоре, легко можно выполнить форматирование документа, например, задать размер и начертание шрифта, цвет букв, ширину полей. То, что вы делаете с документом на экране монитора, в том же виде переносится на бумагу при распечатке на принтере. Это возможно благодаря графическому интерфейсу пользователя (GUI), кото­рый поддерживает технологию точного отображения WYSIWIG (сокращение от «What You See Is What You Get» — что видите, то и получаете).

В случае Web-страниц пользователь имеет дело не с бумажными, а с элек­тронными документами, полученными через Internet. Принцип отображения документа средствами форматирования родительского приложения здесь не­приемлем. Слишком много приложений или всевозможных конверторов пользователю пришлось бы иметь на своем компьютере, чтобы эффективно ра­ботать с множеством возможных форматов документов.

Идея решения проблемы обмена документами между различными ком­пьютерами и приложениями через Internet основана на языке разметки гипер­текста HTML (HyperText Markup Language). Этот язык был создан более 20 лет назад как стандарт оформления документов и был принят подавляющим боль­шинством пользователей Internet, а главное, — всеми производителями про­граммного обеспечения и оборудования для Web. Документы, размеченные согласно HTML, могут читаться на любом компьютере, на котором установле­на всего лишь одна программа просмотра таких документов — браузер.

Благодаря языку разметки HTML клиент Web может на экране своего компьютера просмотреть документ в том виде, в каком его задумал разработ­чик: с определенными размерами шрифта и разбивкой на абзацы, с определен­ным расположением рисунков и гиперссылок. Текстовой документ, со­ставленный на HTML, имеет размер в байтах в несколько раз меньший, чем размер аналогичного документа, подготовленного в текстовом процессоре (на­пример, Word).

Разметка документа — это описание различных фрагментов документа и их взаимного расположения. Выполняется разметка с помощью команд языка HTML — тегов.

В языке HTML имеется множество тегов, среди которых — теги создания заголовка документа, задания параметров шрифта, вычерчивания линий, вставки гиперссылок, вставки графических элементов и т. д. В итоге Web-стра­ница, кроме текста и ссылок, может содержать графику, звуки, видео, то есть иметь такой вид, который вы и видите на экране компьютера.

Получить представление о том, как выглядит код HTML, вы сможете, если откроете в браузере любую Web-страницу и перейдете к представлению HTML. При этом вы можете видеть, как создана та или иная страница — это вам пригодится при разработке своих документов

Об истории HTML

История языков разметки уходит в 60-е годы 20 в., когда сотрудники ком­пании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language — общий язык разметки).

Следующий этап развития языков разметки связан с именами ученых-фи­зиков, сотрудников Европейского центра ядерных исследований (CERN) в Женеве. Так, в конце 80-х годов Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, при­менял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.

В основу разрабатываемого языка Бернерс-Ли положил язык GML и приемы работы с гипертекстом, с чем и связано название созданного им языка — HTML. Новый язык использовал основные конструкции GML для опи­сания документов и гипертекстовых ссылок.

Возможность применения гипертекста была предсказана Ваневаром Бушем в 1945 году, а термин «гипертекст» впервые был введен Тедом Нельсоном в 60-х годах, то есть задолго до появления Internet.

Понятие «гипертекст» обозначает электронный документ, который содержит в себе ссылки на другие документы.

Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения World Wide Web, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (HyperText Transfer Protocol — протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере.

Браузеры.

Чтобы отобразить на экране компьютера HTML-документы в том виде, как они задумывались разработчиками, необходимо иметь специальную программу, называемую «браузер». (От английского слова browse, которое переводится как «пастись, ощипывать молодые побеги, заниматься беспорядочным чтением»). Браузер Internet Explorer входит в виде интегрированного модуля в Windows.

HTML-файлы.

Web-страница, загружаемая в браузер, представляет собой HTML-файл. Это текстовой файл с расширением. htm, .html или. htmll. Файлы. htm созда­ются для обработки в операционной системе DOS (где принято расширения обо­значать тремя буквами). Для работы в Windows допустимо сохранять HTML-файлы с расширениями. htm и .html, причем более предпочтительным яв­ляется использование расширения. html.

Для просмотра HTML-кода страницы в браузере Internet Explorer можно выполнить любое из следующих действий:

·  щелкните правой кнопкой мыши в окне документа и в появившемся контекстном меню выберите команду Просмотр в виде HTML;

·  выберите команду меню Вид — в виде HTML.

После этого на экране откроется окно приложения Блокнот с HTML-кодом просматриваемой вами страницы.

Если вы работаете в браузере Netscape, то просмотреть HTML-код загру­женного документа вы сможете с помощью команды View — Page source или нажатия клавиш Ctrl+U.

Редакторы HTML-файлов.

Так как HTML-документ представляет собой текстовый файл, для его создания и редактирования можно использовать любой текстовый редактор, например, Блокнот. Существуют также более серьезные программы для подготовки Web-страниц. Их можно разделить на два типа:

·  Редакторы HTML-текстов, которые автоматизируют набор кода. Наиболее известные из них это HomeSite, HotDog.

·  Визуальные редакторы HTML, в которых пользователь имеет дело не с кодом, а с графическими образами элементов HTML. К ним относятся редакторы Microsoft Front Page, Macromedia Dreamveawer.

Коротко о главном:

Урок 2. Общая структура HTML-документа.

Разметка HTML-документов выполняется с помощью тегов, которые за­писываются с соблюдением определенных правил. Теговая модель предпола­гает разбиение документа на отдельные фрагменты, которые заключаются в теги или начинаются тегом.

 

<HTML>

<HEAD>

<TITLE>Проба 1</TITLE>

</HEAD>

<BODY>

<H1>Моя первая страничка</H1>

<HR>

<HR>

Привет! Меня зовут....!

Это моя личная домашняя страничка.

</BODY>

</HTML>

Web - страница разделяется на две логические части: заголовок и содержание (тело).

Заголовок заключается между тегами <HEAD> и </HEAD>. В заголовке HTML - документа содержится название странички, а также справочная информация (например, тип кодировки), которые появятся в рамке окна программы просмотра.

Название странички располагается между тегами <TITLE> и </TITLE>. Например, <ТIТLЕ>Моя страничка</ТIТLЕ>

Содержание – это то, что будет выводиться на экран программой просмотра - текст, картинки, видеофрагменты. Содержание заключается между двумя тегами <BODY> и </BODY>.

Теги бывают парные и непарные, открывающие и закрывающие. Отличительным признаком закрывающего тега является символ /.

Область действия парного тега начинается с того места, где стоит открывающий тег, а кончается, где встречается закрывающий. Так, например, текст будет выводиться на экран полужирным шрифтом, если стоит между тэгами <В> и </В>.

Часто теги, помимо имени, содержат дополнительные элементы, которые называются атрибутами, например: <BODY bgcolor=green text=red>

Атрибуты - это компоненты тега, содержащие указания о том, как браузер должен воспринять и обработать тег.

Коротко о главном:

Вид Web-страницы задаётся тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными и парными, для которых обязательно наличие открывающего и закрывающего тэга (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш ( / ) перед обозначением. Весь HTML-документ помещается внутрь контейнера <HTML> </HTML> Заголовок Web-страницы заключается в контейнер <HEAD> </HEAD> Название Web-страницы содержится в контейнере <TITLE> </TITLE> Основное содержание страницы помещается в контейнер <BODY> </BODY>

Задание 1

В Блокноте создайте HTML-документ следующей структуры.

<HTML>

<HEAD>

<TITLE>Упражнение 1</TITLE>

</HEAD>

<BODY bgcolor=black text=yellow>

<HR>

<H1 align=center>Моя первая страничка</H1>

<HR>

<H2> Привет! Меня зовут....! </H2>

Это <B> моя </B> личная домашняя страничка.

</BODY>

</HTML>

Сохраните его в своей папке под именем U1.HTML

Просмотрите результат выполнение HTML-программы в браузере.

Выберите команду меню Вид — в виде HTML. Дополните содержимое Web-странички информацией о своих увлечениях, о школе, о своем городе. Сохраните файл с дополнениями.

В окне браузера на панели инструментов нажмите кнопку .

Задание 2

В Блокноте создайте HTML-документ следующей структуры.

<HTML>

<HEAD>

<TITLE>Упражнение 2</TITLE>

</HEAD>

<BODY>

<H3>Устройство ПК</H3>

<HR>

<P> Основных частей у компьютера всего четыре:

-  Клавиатура - устройство для ввода информации.

-  Память – устройство для хранения информации.

-  Процессор – устройство для обработки информации.

- 

Рис.1

Монитор – устройство для вывода информации. </P>

</BODY>

</HTML>

Сохраните его в своей папке под именем U2.HTML

Просмотрите результат выполнение HTML-программы в браузере.

ТЕМА 2. ОФОРМЛЕНИЕ ТЕКСТА

Урок 3. Формирование абзацев и заголовков.

Абзацы

Для разделения документа на отдельные логические части и улучшения читаемости текста используются заголовки и разбиение текста на абзацы.

Для разбивки текста на абзацы используется тег-контейнер <P> Текст</P>. Текст можно выровнять с помощью атрибута align:

<P align=left> - по левому краю,

<P align=right> - по правому краю,

<P align=center> - по центру.

Кроме абзацев текст можно разбивать на разделы. Они задаются тегами <DIV> и </DIV>. Перед разделом вставляется пустая строка.

Для центрирования текста можно воспользоваться парным тегом <CENTER>, хотя он и считается устаревшим.

Для сохранения авторского форматирования используется тег-контейнер <PRE>Текст</PRE>. Текст, расположенный внутри тега, выводится на экран так, как он записан в программе.

Для выделения текста в отдельный блок используется тег-контейнер <BLOCKQUOTE>Текст</BLOCKQUOTE>. Текст выводится на экран с большими отступами от края.

Тег <CITE>Текст</CITE> применяется для форматирования цитат. Обычно текст, оформленный с помощью этого тега, выделяется курсивом.

Для перехода на новую строку используется непарный тег <Br>

Заголовки

В HTML-документе поддерживаются заголовки шести уровней при помощи тега-контейнера <Hn> Текст заголовка</Hn>. Здесь в качестве n следует использовать одну из цифр 1-6, обозначающую уровень. Самый крупный заголовок – первого уровня (Н1), самый мелкий – шестого (Н6). Заголовки отделяются от остального текста пустыми строками.

У тега <Hn> есть атрибут align – выравнивание заголовка на странице. Он может принимать следующие значения: left, right, center.

<H1>Заголовок первого уровня</H1>

<H3>Заголовок третьего уровня</H3>

<H6>Заголовок шестого уровня</H6>

Горизонтальные линии

Различные части большого документа можно визуально отделить одну от другой с помощью горизонтальных линий.

Горизонтальные линии рисуются с помощью непарного тега <HR >.

Тег имеет несколько атрибутов:

Size – толщина линии в пикселях,

Width - длина линии в процентах или пикселях,

Noshade - делает линии “плоскими”,

Color – задает цвет линии.

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

Можно заставить текст двигаться по экрану влево или вправо с помощью парного тега <MARQUEE> текст </MARQUEE>.

Тег имеет атрибуты:

Width – ширина поля бегущей строки (в пикселах или процентах от ширины окна);

Height - высота поля бегущей строки (в пикселах);

Direction – определяет направление движения строки. Может принимать следующие значения: left, right;

Behavior – определяет способ движения строки. Может принимать значения: scroll – текст появляется от одного края и скрывается за другим;

Slide – текст вытягивается с одного края и останавливается у другого;

Alternate – попеременное движение от одного края к другому и обратно.

Bgcolor – цвет поля бегущей строки.

Коротко о главном:

<P> Текст</P> –Выделение абзаца <DIV> Текст </DIV> - Выделение раздела <Hn> Текст заголовка</Hn> - Заголовки <CENTER> Текст</СENTER> - Центрирование текста <PRE>Текст</PRE> - Авторское форматирование текста <BLOCKQUOTE>Текст</BLOCKQUOTE> - Выделение текста в блок <CITE> Текст</CITE> - Цитата (курсив) <HR >- Горизонтальная линия <BR> - Переход на новую строку. <MARQUEE> Текст </MARQUEE> - Бегущая строка

Задание 1:

Создайте страницу с названием «Заголовки»

<HTML>

<HEAD> <TITLE> Заголовки </TITLE> </HEAD>

<BODY>

<H1>Это заголовок первого уровня</H1>

<H2>Это заголовок второго уровня</H2>

<H3>Это заголовок третьего уровня</H3>

<H4>Это заголовок четвертого уровня</H4>

<H5>Это заголовок пятого уровня</H5>

<H6>Это заголовок шестого уровня</H6>

</BODY>

</HTML>

Сохраните программу в своей папке под именем U3.HTML

Рис. 2

Задание 2:

Создайте страницу с названием «Горизонтальные линии».

<HTML>

<HEAD>

<TITLE> Горизонтальные линии </TITLE>

</HEAD>

<BODY>

<HR>

<HR size=10>

<HR size=10 width=”50%” align=left>

<HR size=5 noshade>

<HR size=5 width=”300” noshade>

<HR color=blue>

</BODY>

</HTML>

Сохраните программу в своей папке под именем U4.HTML

Задание 3:

Создайте страницу с названием «Авторское форматирование».

<HTML>

<HEAD>

<TITLE> Авторское форматирование </TITLE>

</HEAD>

<BODY>

<H1 align=center>Агния Барто</H1>

<HR>

<PRE>

Идет бычок,

Качается,

Вздыхает на ходу:

- Ой, доска кончается!

Сейчас я упаду!

</PRE>

</BODY>

</HTML>

Рис 3.

Сохраните программу в своей папке под именем U5.HTML

Задание 4:

Откройте программу U2.html, созданную на предыдущих занятиях. Используя авторское форматирование, добейтесь того, чтобы текст в окне браузера выглядел точно так же, как на рисунке 1.

Задание 5:

Создайте страницу с названием «Астрид Линдгрен», используя известные вам теги.

Рис. 4

Урок 4. Работа со шрифтами.

Шрифты различаются гарнитурой и размером.

Гарнитура - это особенности оформления и начертания шрифта.

Шрифты условно делятся на три группы: с «засечками», «рубленные» и «рукописные». Обычный текст лучше читается, если выбран шрифт с «засечками» (Times, Courier). В одной и той же гарнитуре существуют несколько начертаний – обычный шрифт, курсив, полужирный курсив.

Размер шрифта определяется в «пунктах» (1 pt = 0,353 мм). Для отображения основного текста лучше всего подходит шрифт размером 12 Pt.

Для определения свойств шрифта используется тег-контейнер <FONT> со следующими атрибутами:

size – размер шрифта,

color – цвет шрифта,

face – гарнитура шрифта или список допустимых шрифтов.

Размер шрифта задается относительно размера, установленного в программе просмотра по умолчанию (FONT size=+4).

Кроме тега <FONT> для изменения свойств шрифта можно использовать следующие теги:

полужирный шрифт (Bold) – <B> текст </B>

подчеркивание (Underline) – <U> текст </U>

курсивный шрифт (Italic). –<I> текст </I>

зачеркнутый текст (Strike Out)- <S> текст </S>

усиленное выделение (полужирный шрифт) - <STRONG>…</STRONG>

укрупнение шрифта по сравнению с обычным - <BIG>…</BIG>

уменьшение шрифта по сравнению с обычным - <SMALL>…</SMALL>

пишущая машинка - <TT>текст</TT>

верхние индексы - <SUP> т е к с т </SUP>

нижние индексы - <SUB> т е к с т </SUB>

Цвет шрифта всего документа можно задать с помощью атрибута text = цвет тега <BODY>

Коротко о главном:

<FONT> Текст</FONT> –изменение свойств шрифта <B> Текст </B> - полужирный шрифт <I> Текст</I> - курсивный шрифт <U> Текст</U> - подчеркивание <S>Текст</S> - зачеркнутый текст <BIG>Текст</BIG> - укрупнение шрифта <SMALL> Текст</SMALL> - уменьшение шрифта <STRONG> Текст</STRONG> - усиленное выделение <SUP > Текст </SUP >- верхние индексы <SUB> Текст </SUB> - нижние индексы <TT>Текст</TT> - пишущая машинка

Задание 1:

Загрузите браузер Internet Explorer. В меню Файл выберите позицию Открыть…, откройте файл U1.HTM, который находится в вашей папке. Чтобы увидеть текст HTML-документа в меню Вид выберите позицию “Просмотр HTML-кода”. Доработайте страничку, используя различные теги для оформления текста.

<HTML>

<HEAD>

<TITLE>Моя страничка </TITLE>

</HEAD>

<BODY>

<H1>

Привет! Это моя личная домашняя страничка!

</H1>

<HR size=5 width="50%">

<H2 align = center>

Мой город

Рис.5

</H2>

Я живу в

<FONT color=red face="Comic Sans MS" size = +5>Бресте </FONT>

<H4 align = center>

Мои увлечения :

</H4>

<FONT color=blue face="Arial" size = +2>

<B>Музыка - гитара</B>,

<U>Спорт - футбол</U>,

<I> Люблю рисовать</I>.

</FONT>

<H5> Мои друзья </H5>

<U>Moи друзья </U> учатся со мной в <I> одном классе</I>

</BODY> </HTML>

Добавьте несколько новых строчек самостоятельно. Например «Моя семья» «Мои домашние животные». Для оформления можете использовать бегущую строку.

Сохраните созданную страничку в своей папке под именем U1new. html

Задание 2:

Создайте Web-страницу.

Заголовок и каждый абзац текста должны быть написаны разным шрифтом (цвет, размер, гарнитура).

КАКУЮ СОБАКУ ВЫБРАТЬ?

Собака верный помощник. Однако, если вам нужен, например, только страж, купите лучше систему сигнализации.

Первейшая функция собаки в доме – быть другом, и нет друга более верного. Прежде, чем завести собаку, важно убедиться, что вы сможете обеспечить ей необходимые условия.

Выбор подходящей породы – очень личное дело.

Но есть много руководств, помогающих в этом.

Задание 3:

Создайте Web-страницу. Заголовок и каждый абзац текста должны быть написаны разным шрифтом (цвет, размер, гарнитура).

ВЛАСТЕЛИН КОЛЕЦ

Фродо почувствовал, что продрог до костей, замерз смертельно, навсегда. А голос становился все различимее, и волосы Фродо встали дыбом, когда бормотание превратилось в заклинание.

Черный камень, черный лед

Сердце холодом скует;

Будет долог черный сон.

Лишь тогда прервется он,

Когда Солнце и Звезда

Омертвеют навсегда.

Откуда-то из-за головы послышался скребущий, царапающийся звук. Опершись на руку, Фродо приподнялся и огляделся.

Д. ТОЛКИЕН

Задание 4:

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

Интеллектуальная разминка.

Английские загадки:

Что такое длинное, желтое и все время показывает на север?

(Намагниченный банан)

Что говорит одно насекомое другому, влюбленному в него?

(«Не ходи за мной, как энтомолог!»)

Австралийские загадки:

Почему мамы-кунгуру так не любят дождливые дни?

(Ведь тогда малыши резвятся дома, в кармане!)

Французские загадки:

Какая еда самая непитательная?

(Пирог, который едят глазами)

Энтомолог – ученый, который ловит насекомых и пристально их изучает. Он их очень любит.

Урок 5. Создание списков.

HTML допускает задание в документах списков трех типов:

Маркированный	Нумерованный
q  Физика q  Химия q  Биология q  Информатика	1.  Минск 2.  Брест 3.  Витебск 4.  Гродно 5.  Гомель 6.  Могилев
	Список определений
	Клавиатура Предназначена для ввода информации. Монитор Предназначен для вывода информации.

Маркированный список задает тег <UL>, который имеет следующую структуру:

<UL>

<LH>Заголовок списка</LH>

<LI>Элемент списка

<LI>Элемент списка

…

<LI>Элемент списка

</UL>

Вид маркера настраивается атрибутом type.

<UL type=circle> - окружность

<UL type=disc> - диск

<UL type=square> - квадрат

Рис. 6

Нумерованный список задает тег <OL>, который имеет следующую структуру:

<OL>

<LI>Элемент списка

…

<LI>Элемент списка

</OL>

Вид номера настраивается атрибутом

type.

<OL type=1> - (1, 2, 3,…)

<OL type=A> - (A, B, C, …)

<OL type=a> - (a, b, c, …)

Рис. 7

<OL type=I> - (I, II, III, IV, …)

<OL type=i> - (i, ii, iii, …)

Список определений задает тег <DL>, имеющий следующую структуру:

<DL>

<DT>Термин

<DD>Определение

<DT>Термин

<DD>Определение

…

</DL>

Рис. 8

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

<OL type=I>

<LI>Деревья

<UL> <LI>ДУБ

<LI>КЛЕН

<LI>ГРАБ </UL>

<LI>Цветы

<UL><LI>АСТРА

<LI>РОЗА

Рис. 9

<LI>ЛИЛИЯ </UL>

</OL>

Коротко о главном

<UL>-</UL> - Маркированный список <OL> - </Ol> - Нумерованный список <DL> - </DL> - Список определений <LI> - Элемент маркированного или нумерованного списка <LH> - Заголовок списка (необязательный элемент) <DT> - Термин списка определений <DD> - Определение из списка определений.

Задание 1.

Создайте HTML-документы, содержащие нумерованный и маркированный списки.

Устройства ввода

1.  Клавиатура

2.  Сканер

3.  Джойстик

4.  Веб-камера

Устройства вывода

·  Монитор

·  Принтер

·  Колонки

Задание 2.

Откройте в блокноте HTML-документ U2.html, который находится в вашей папке. Внесите изменения в программу, оформив текст в виде списка.

Рис. 10

Задание 3.

А) Создайте вложенный список:

Рис. 11

Б) Создайте список определений:

Рис. 12

ТЕМА 3. ВСТАВКА ГРАФИКИ И МУЛЬТИМЕДИА.

Урок 6. Вставка изображений.

Иллюстрации в тексте делают документ более привлекательным. Однако графические изображения довольно медленно загружаются. Поэтому использовать графику на Web-страницах нужно в разумных пределах.