Программы просмотра Web – страниц

НАЗНАЧЕНИЕ ЯЗЫКА HTML

Простейшим документом Всемирной паутины является Web -страница.

Совокупность Web-страниц, объединенных по смыслу и имеющих одинаковое дизайнерское решение, называется Web -сайтом.

Документы Web находятся на Web-серверах в различных уголках земного шара.

Web -сервер – мощный компьютер, который хранит документы WWW.

Web-сервером называется также программа, управляющая доступом к документам, собранных на некотором узле (компьютере) Web.

Для просмотра документов Всемирной паутины используется так называемый Web -браузер (броузер) или обозреватель Web..

Распространенными браузерами являются MS Internet Explorer, Netscape Navigator.

Web-браузер – это программа, с помощью которой пользователь запрашивает, принимает и отсылает информацию. Основное назначение обозревателя – загрузка Web-страницы из Internet и отображение ее на экране.

Т.к. в сети Internet встречаются компьютеры совершенно разных типов, то документы на Web-серверах нельзя хранить в формате какой-то определенной программы.

Для подготовки документов WWW используется язык разметки гипертекста HTML  (Hyper Text Markup Language).

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

Команды HTML вставляются в текст документа и определяют логический статус отдельных фрагментов текста.

Язык разметки гипертекста не задает конкретных атрибутов форматирования.

Эти функции выполняет Web-браузер, который получает документ, интерпретирует команды HTML и обеспечивает наилучшее представление информации на экране пользователя.

Для доступа к документам WWW применяется протокол HTTP (Hyper Text Transfer Protocol) - протокол передачи гипертекста.

Каждая Web-страница имеет уникальный адрес называемый URL (Universal Resource Locator) универсальный указатель ресурса.

В общем виде URL включает в себя:

- указатель на используемый протокол (HTTP);

- доменное имя компьютера;

- имени файла (в структуре каталогов).

URL – это адрес некоторого документа на Web-сервере.

Гипертекст – это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы.

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

Гиперссылка – выделенная область документа, которая позволяет перейти к другому документу, содержащему связанную информацию. Указатель принимает вид ладони.

Основа используемой в HTML технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы (теги), в результате чего получаем Web-страницы.

Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тегами.

Для создания и редактирования HTML – страницы необходимо использовать простейший текстовый редактор (блокнот). Текст сохраняется, а затем загружается в браузер для просмотра.

Под разметкой понимается вставка в текст специальных кодов (тегов).

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

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

ПРОГРАММЫ-РЕДАКТОРЫ HTML

Web-страницы можно создавать вручную, т.е. при помощи обычного текстового редактора (например, Блокнот).

Создание Web-страниц непосредственно на HTML требует больших усилий, времени и досконального знания синтаксиса языка.

Существует огромное количество HTML-редакторов, начиная от простейших, которые только немного автоматизируют процесс разметки документа, до мощных систем, которые позволяют не только создавать HTML-документы, но и редактировать целые сайты.

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

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

Невизуальные требуют знания языка HTML.

Одним из мощных средств автоматического создания и публикации Web-документов считается пакет MS Front Page.

Мы будем создавать свои HTML - документы в редакторе Блокнот или в HTMLPad - компактном и простом редакторе тегов HTML.

Рассмотрим HTML-редактор HTMLPad (hp. exe).

 

 

Используя пункты меню, в этом редакторе можно вводить нужные теги. Из окна этого редактора можно просматривать создаваемый документ. HTML-документ сохраняется с расширением. htm или. html.

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

 

СИНТАКСИС HTML

Язык HTML – это язык разметки гипертекста. Разметка заключается в том, что в обычный текст добавляются специальные команды HTML, описывающие, как должен выглядеть данный текст. Язык HTML представляет собой коллекции управляющих символов – тегов (дескрипторов), с помощью которых можно добавлять и форматировать элементы документа. Для настройки внешнего вида и функционирования элемента страницы устанавливаются его атрибуты. HTML постоянно развивается, дополняется новыми элементами.

Теги бывают одиночный и парный, начальный и конечный (открывающий и закрывающий).

Например:

< br > - одиночный тег

< html > и </ html >; < head > и </ head > - парные теги.

Теги состоят из следующих друг за другом в определенном порядке элементов:

· левой угловой скобки <;

· необязательного символа / (слэш), который означает, что тег явля­ется конечным тегом, закрывающим некоторую структуру, напри­мер </ title >;

· имени тега, например html;

· необязательных параметров (атрибутов). Теги могут иметь один или несколько параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Параметры записываются внутри тега и разделяются пробелами. В некоторых случаях значение не требуется, важен сам факт указания параметра. Например, <body bgcolor= " #008000 " >;

· параметр тега состоит из имени, знака равенства и значения, которое задается строкой символов. Значения атрибутов обычно заключаются в кавычки, например align =" center ". Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить. При наличии в значении параметра пробелов кавычки также обязательны.

· правой угловой скобки >.

Большинство тегов спарены: за открывающим тегом следует соответ­ствующий ему закрывающий тег, а между ними содержится текст или дру­гие теги. В таких случаях два тега и часть документа, заключенная между ними, образуют блок, называемый элементом HTML. Некоторые теги, например <hr>, являются одиночными и для них закрывающий тег не применяется. Такие теги сами по себе являются элементами HTML.

Для имен тегов можно использовать и прописные и строчные буквы. Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head> эквивалентны.

В любом документе HTML существуют элементы, определяющие его структуру – это структурные теги. Взаимное расположение структурных элементов HTML, HEAD, TITLE и BODY должно быть стандартным на любой странице (в тех случаях, когда не используются фреймы).

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

Для подготовки документов WWW используется HTML - язык разметки гипертекста (HyperText Markup Language).

Под разметкой понимается вставка в текст специальных кодов (управляющих символов).

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

 

Основа используемой в HTML-технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы – теги. В результате чего получаем Web‑страницу. Код HTML-документа записывается в обычном текстовом файле. Подготовить и отредактировать его можно при помощи любого текстового редактора, позволяющего сохранять неформатированный текст (например, Блокнота).

 

Web‑браузер получает документ, интерпретирует команды HTML и обеспечивает наилучшее представление информации на экране пользователя.

Любой HTML-код (или HTML-документ) состоит из трех частей:

1. Строки, содержащей информацию о версии HTML.

2. Блока заголовка документа.

3. Тела документа, содержащего непосредственно отображаемую информацию.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>  <TITLE> Untitled </TITLE> </HEAD> <BODY>   </BODY> </HTML>

 

Прежде всего надо указать на то, что данный документ описывает Web‑страницу на языке HTML. Для этого текст начинается с тега <HTML>. Для него требуется закрывающий тег </HTML>, обозначающий конец документа.

Далее идет тег заголовка <HEAD> </HEAD>. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т.д.).

Тег описания (тела страницы) <BODY> </BODY> определяет информационную часть описания страницы. В ней располагаются текст, рисунки и другие элементы.

Тег <TITLE> </TITLE>, расположенный в заголовке страницы, указывает название страницы, которое большинство браузеров отображают в заголовке окна.

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

Существует три типа документов:

1. HTML 4.0 Strict – такой документ не должен содержать отмененных тегов и атрибутов (параметров) и не должен быть контейнером для фреймов.

2. HTML 4.0 Transitional – может содержать все то, что и HTML 4.0 Strict, а также отмененные элементы и атрибуты.

3. HTML 4.0 Frameset – указывает на то, что данный документ является контейнером для набора фреймов.

Пример 1. Создание простейшего документа HTML.

1. Открыть текстовый редактор Блокнот.

2. Набрать в Блокноте следующий текст:

<HTML>

<HEAD>

<TITLE> Мой первый документ HTML</TITLE>

</HEAD>

<BODY>

Всем привет!

</BODY>

</HTML>

3. Сохранить набранный текст в свою рабочую папку под именем Пример1.htm или Пример1.html.

4. Загрузить файл Пример1.html в программу просмотра HTML-документов (Web-страниц) Internet Explorer. (Два раза щелкнуть по значку файла).

5. Откроется окно программы с просматриваемым файлом.

 

 

6. В заголовке окна программы отображается заголовок HTML-документа, а в рабочей области – тот текст, который был введен в тело документа.

7. Задание для самостоятельной работы:

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

- сохранить файл под именем Сам1.html;

- просмотреть созданный файл в Internet Explorer;

- сделать выводы по проделанной работе.

 

Тег <BODY> заключает в себе гипертекст, который определяет собственно Web-страницу. Эта часть отображается браузером.

Внутри тега <BODY>можно использовать все элементы, предназначенные для дизайна Web-страницы.

Тег <BODY> имеет параметры (атрибуты), которые обеспечивают установки для всей страницы в целом. (См. таблицу "Теги, определяющие структуру HTML-документа").

Один из самых полезных для дизайна параметров – параметр, определяющий фон страницы – bgcolor. Параметр bgcolor задает цвет фона Web-страницы. Параметр background определяет адрес файла, который будет использован в качестве фона документа. Параметр text  определяет цвет текста.

 

Пример 2. Создание HTML -документа с использованием параметров элемента BODY

1. Скопировать к себе в папку файл с именем mixedroses_tn.jpg

2. Запустить программу Блокнот или любой HTML-редактор.

3. Набрать следующий текст:

<HTML>

<HEAD>

<TITLE> Мой второй документ HTML</TITLE>

</HEAD>

<BODY background="mixedroses_tn.jpg">

Поздравляем!

</BODY>

</HTML>

4. Сохранить файл под именем Пример2.html.

5. Просмотреть созданный файл в браузере.

6. Сделать выводы.

7. Отредактировать созданный файл следующим образом: заменить

<BODY background="mixedroses_tn.jpg"> на

<BODY bgcolor=#008000 text=silver>

8. Сохранить файл под именем Пример2_2.html.

9. Просмотреть созданный файл в браузере.

10. Сделать выводы.

 

ФИЗИЧЕСКОЕ ФОРМАТИРОВАНИЕ ТЕКСТА

Текст – это основное наполнение Web-страниц. Легкость и удобство восприятия текстовой информации определяются в основном тремя факторами:

1. стилем изложения;

2. соблюдением правил орфографии и пунктуации;

3. формой визуального представления текстовой части документа.

Существуют два способа форматирования (разметки) текста: физическая и логическая разметка. При физической разметке указывается точный вид каждого фрагмента текста. При логической разметке каждой части документа ставится в соответствие некоторый логический признак. Например, некоторые слова имеют признак "выделить".

Рассмотрим теги физического форматирования текста.

Один из способов форматирования текста Web-страницы – это деление на абзацы.

Теги <р> и </р> указывают начало и конец абзаца. Текст и другие теги, заключенные между парой этих блочных тегов принадлежат одному абзацу.

          Специфика тега <р> заключается в том, что после текста, который находится в его пределах, пустая строка добавляется автоматически.

Рассмотрим пример:

Введем следующий HTML-код в редакторе

<HTML>

<HEAD>

 <TITLE> Пример использования тега абзаца </TITLE>

</HEAD>

<BODY>

<P>Я памятник себе воздвиг нерукотворный,</P>

<P>К нему не зарастет народная тропа.</P>

<P>А.С. Пушкин</P>

</BODY>

</HTML>

 

В некоторых случаях необходимо, чтобы каждая следующая строка текста находилась сразу под предыдущей. Для этих целей используют тег < br >. Это переход на новую строку, но не на новый абзац! При переходе на новую строку сохраняется выравнивание. Тег < br > одиночный.

Рассмотрим пример:

<HTML>

<HEAD>

 <TITLE> Пример использования тега принудительного перехода на другую строку </TITLE>

</HEAD>

<BODY>

<P>В первом куплете используется тег абзаца</P>

<P>У Танюши дел немало</P>

<P>У Танюши много дел:</P>

<P>Утром брату помогала -</P>

<P>Он с утра конфеты ел.</P>

<P>Во втором куплете используется тег принудительного разрыва строки</P>

<P>Вот у Тани сколько дела:<BR>

Таня ела, чай пила,<BR>

Села, с мамой посидела,<BR>

Встала, к бабушке пошла.<BR></P>

</BODY>

</HTML>

В окне браузера текст Web-страницы, который следует за тегом < br >, будет начат с новой строки.

В HTML нет средств для создания абзацного отступа, поэтому для удобочитаемости текста между абзацами браузер вводит пустую строку.

Закрывающий тег </р> необязателен

Тег <р> не должен быть пустым (т.е. должен содержать какой-либо текст, рисунок и т.д.), т.к. браузер игнорирует пустые абзацы.

Чтобы вставить пустую строку надо использовать < p >& nbsp </ p >.

Обычно абзацы выравнивают по левому краю листа, что соответствует

<p align=”left”>

атрибут align указывает другой тип горизонтального выравнивания.

<p align = “center”>

<p align = “right”>

<p align = “justify”>

 

Рассмотрим пример

<HTML>

<HEAD>

 <TITLE> Пример использования тега абзаца </TITLE>

</HEAD>

<BODY>

<P ALIGN=Center>Жизнь - бесконечное повторение.</P>

<P ALIGN=Right>Атомас Далчев</P>

</BODY>

</HTML>

Задания для самостоятельной работы:

1. Используя теги абзаца и принудительного перехода на другую строку, получите текст следующего вида:

ГРИБОЕДОВ АЛЕКСАНДР СЕРГЕЕВИЧ (1795 – 1829) драматург, поэт, дипломат   А.С. Грибоедов родился в Москве в родовитой дворянской семье.   Грибоедов знал 9 языков и был талантливым музыкантом.   В дни Отечественной войны 1812 года Грибоедов добровольцем вступает в гусарский полк. После войны он занимается литературной работой, совмещая ее с дипломатической службой.

 

2. Используя теги абзаца и принудительного перехода на другую строку, получите текст следующего вида:

 

Часто возникает необходимость поместить на страницу заголовок раздела или страницы в целом. Для этого используются теги заголовков. Можно задать заголовки шести уровней (размеров) <H1>…<H6>.

Рассмотрим пример.

Введем редакторе HTML-код.

<HTML>

<HEAD>

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

</HEAD>

<BODY>

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

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

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

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

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

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

</BODY>

</HTML>

Затем просмотрим в браузере.

 

В языке HTML существует специальный тег < HR >, который описывает горизонтальную линию. Внешний вид горизонтальной линии контролируется следующими параметрами:

- size – толщина линии (по умолчанию – 2 пиксела);

- width – протяженность линии в пикселах (по умолчанию – растянута на всю ширину окна браузера);

- align – выравнивание линии на странице влево, вправо, по центру. Этот параметр применим только в том случае, если установлен параметр width.

- color – цвет линии.

Рассмотрим пример:

Введем в редакторе HTML-код:

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<H1> Фамилия </H1>

<H2 ALIGN=Center> Имя </H2>

<H3 ALIGN=Right> Отчество </H3>

<HR>

<HR width=50%>

<HR size=8>

<HR noshade>

<HR size=8 color=#800000>

<HR size=100 color=violet>

<HR color=#800000 size=10 width=10>

</BODY>

</HTML>

 

Просмотрите документ в браузере и сделайте выводы, что дает разметка тегом <HR> с различными параметрами.

 

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

Оформление текста применяется для акцентирования внимания пользователя на наиболее важных моментах текста. Для этого используются следующие теги:

< B ></ B > - полужирный шрифт;

< I ></ I > - курсив;

< U ></ U > - подчеркивание;

< S ></ S > - перечеркнутый текст.

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

Задание для самостоятельной работы:

Написать HTML-код, который при просмотре дает следующее:

 

Тег < FONT > позволяет устанавливать параметры текста, такие как тип, размер и цвет шрифта.

С помощью параметра FACE можно установить тип (гарнитуру) шрифта. Надо просто указать его имя: < FONT FACE =" ARIAL " > текст </ FONT >.

С помощью параметра SIZE задают размер шрифта. Значение размера могут быть от 1 (самый маленький) до 7 (самый большой). < FONT SIZE =5> Текст размер 5 </ FONT >.

С помощью параметра COLOR можно установить нужный цвет шрифта.

< FONT COLOR =#808000> Текст … цвета </ FONT >.

Рассмотрим пример:

В текстовом редакторе введем следующий HTML-документ.

<HTML>

<HEAD>

 <TITLE> РАДУГА </TITLE>

</HEAD>

<BODY>

<H1>

<FONT COLOR=RED>Р

<FONT COLOR=BLUE>А

<FONT COLOR=#FFA000>Д

<FONT COLOR=#00D000>У

<FONT COLOR=#800080>Г

<FONT COLOR=YELLOW>А

</FONT>

</H1></BODY>

</HTML>

 

Интересный способ привлечения внимания к короткому, но емкому сообщению состоит в использовании бегущей строки. Бегущая строка – это анимационный эффект, при котором строка текста перемещается на странице один раз, несколько раз, или постоянно. Для создания бегущей строки используется тег < MARQUEE > </ MARQUEE >. Атрибуты этого тега контролируют параметры перемещения текста.

BEHAVIOR — способ выполнения эффекта бегущей строки:

• scroll — текст исчезает за краем Web-страницы:

• slide — после выполнения заданного числа циклов, текст остается у левого или правого поля Web-страницы;

• alternate — направление перемещения текста в строке меняется на противоположное после выполнения каждого цикла. По завершении последнего цикла текст остается у края страницы (Колебательные движения налево и направо).

BGCOLOR — цвет фона бегущей строки.

DIRECTION — направление перемещения текста;

• left — влево;

• righ t — вправо.

HEIGHT — высота бегущей строки.

HSPACE — отступ в пикселях текста бегущей строки от левого и правого полей Web-страницы.

LOOP — число показов текста в строке:

•? — целочисленное значение, указывающее число повто­ров;

• infinite — бесконечное повторение эффекта по циклу. -

SCROLLAMOUNT — смещение текста в пикселях за один шаг.

SCROLLDELAY — временной промежуток между смешениями в мил­лисекундах, по умолчанию 60 мс. Используйте этот атрибут, чтобы замедлить перемещение текста в строке, так как значения менее 60 мс будут игнорироваться обозревателем. Чтобы ускорить перемещение текста, переустановите минимальное значение смещения текста в атрибуте TRUESPEED.

VSPACE – отступ в пикселях по вертикали от текста до рамки бегущей строки.

TRUESPEED – минимальное значение смещения текста, по умолчанию 60 мс.

WIDTH – ширина бегущей строки в пикселях.

Текст бегущей строки можно размечать также, как обычный текст Web-страницы.

 

Рассмотрим пример:

<HTML>

<HEAD>

 <TITLE> Бегущая строка </TITLE>

</HEAD>

<BODY>

<MARQUEE BGCOLOR=YELLOW>

<h1><I><B>Минздрав предупреждает:

<FONT COLOR=RED> Курение опасно для Вашего здоровья!</font></B></I></h1>

</MARQUEE>

</BODY>

</HTML>

Просмотрите документ в браузере.

 

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

 

<MARQUEE BEHAVIOR=ALTERNATE DIRECTION="right"> Здесь ваш текст </MARQUEE>

СПИСКИ

 

Список – это один из наиболее распространенных способов упорядочивания текстовых данных Web-страниц.

Кроме очевидного удобства – нумерации данных, с помощью списков можно внести некоторое разнообразие в монотонные абзацы емких Web-страниц.

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

- маркированный (неупорядоченный) список;

- нумерованный (упорядоченный) список;

- список определений.

Маркированные списки

Являются самыми простыми. В таких списках важен только перечень элементов списка. В начале каждого элемента списка устанавливаются маркеры – точки, черточки, кружки.

Для разметки маркированного списка в HTML применяют шаблон:

< ul >

< li > пункт 1 списка </ li >

< li > пункт 2 списка </ li >

</ ul >

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

Если необходимо, чтобы элементы списка находились в строгом порядке, то следует использовать тег нумерованного списка <ol></ ol >.

HTML-код нумерованного списка выглядит следующим образом:

< ol >

< li > первый элемент списка </ li >

< li > второй элемент списка </ li >

< li > третий элемент списка </ li >

</ ol >

Хотя тег < li ></ li > - парный, но закрывать его не обязательно.

 

Рассмотрим пример.

Введем в редакторе следующий HTML-код:

<html>

Для того, чтобы создать список, необходимо:

<ol>

<li>Терпение.

<li>Внимание.

</ol>

</html>

Каждый элемент списка нумеруется автоматически арабскими цифрами.

 

 

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

Задание

Добавить третий элемент списка: Желание научиться.

 

Начальный номер списка

В некоторых случаях номером первого элемента списка должна быть не 1, а другая цифра.

Рассмотрим пример:

<html>

<head>

<title>Продолжение нумерованного списка</title>

</head>

<body>

<p>Последовательная нумерация элементов списка</p>

<ol start=5 >

<li> Первый элемент нумерованного списка.

<li> Второй элемент нумерованного списка.

<li> Третий элемент нумерованного списка.

</ol>

<p>Дополнительная информация</p>

<ol>

<li value="4"> Четвертый элемент нумерованного списка.</li>

</ol>

</body>

</html>

 

Задание для самостоятельной работы.

Создать HTML-документ, при просмотре которого в браузере информация будет воспроизводиться следующим образом

Списки определений

Помимо обычных списков существуют списки определений.

Часто списки строятся по принципу: сначала – короткая фраза или слово (как правило, выделенное полужирным шрифтом или как-нибудь иначе), потом – более подробное разъяснение.

В HTML такие фрагменты можно организовать как список определений.

Каждый элемент такого списка состоит из некоторого термина и его определения.

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

Разметка списка определений осуществляется с помощью трех тегов < dl >, < dt > и < dd >.

< dl > - описывает весь список в целом;

< dt > - определяет термин;

< dd > - определение.

 

Пример (список определений)

<html>

<h4>Пример списка определений</h4>

<dl>

<dt>Полка</dt>

<dd>Предмет мебели</dd>

<dt>Самолет</dt>

<dd>Летающее средство транспорта</dd>

<dt>Незабудка</dt>

<dd>Красивый цветок</dd>

<dt>Ель</dt>

<dd>Хвойное дерево</dd>

<dt>Родник</dt>

<dd>Природный источник подземной воды</dd>

<dt>Облако</dt>

<dd>Скопление водяного пара в атмосфере</dd>

</dl>

</html>

 

 

Задания для самостоятельной работы:

 

1. Создать HTML-документ:

 

В MS ACCESS при заполнении таблиц можно вводить данные следующих типов:

a) текстовый;

b) поле MEMO;

c) числовой;

d) дата и время;

e) денежный;

f) логический;

g) поле объекта OLE;

h) гиперссылка.

2. Создать HTML-документ:

- фон страницы – голубой;

- заголовок "Считалка" разметить как заголовок 2 уровня; цвет шрифта – зеленый;

- элементы маркированного списка сделать полужирным

 

Считалка

На золотом крыльце сидели:

· из царей:

1. царь;

2. царевич;

 

· из королей:

3. король;

4. королевич;

 

· из прочего люда:

5. сапожник;

6. портной…

 

3. Создать HTML-документ, применяя теги списка определений. После заголовка провести линию на длину заголовка (это значит подобрать параметр width). Названия знаков зодиака сделать разными цветами.

ГОРОСКОП

____________

Водолей

Начните неделю с оказания помощи детям.

Рыбы

Начните активно заниматься квартирным вопросом.

Овен

Вы должны нести ответственность за тех, кого приручили.

Телец

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

Близнецы

Нужно много трудиться и меньше руководить другими людьми.

Рак

Вам необходимо добиться поставленных перед собой целей.

Лев

Вам нужно согласовывать личные и партнерские отношения.

Дева

Непременно отдохните, чтобы восстановить силы.

Весы

Вам нужно руководить идущими процессами и окружающими людьми.

Скорпион

Необходимо принимать активное участие в коллективном или общественно полезном труде.

Стрелец

Вам придется сделать выбор между стремлением раскрыть творческую силу и реализовать свои профессиональные навыки.

Козерог

Вам необходимо проявлять инициативу.

ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ

 

Internet не был бы столь популярен в мире, если бы Web-страницы содержали только текст. Мир Internet – это мир красок, фотографий, анимационных эффектов, видео и аудиоклипов. Благодаря использованию графики удается сообщить посетителю Web-страницы необходимый эмоциональный настрой и представить информацию более наглядно.

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

Из множества форматов графики в Internet используются всего лишь три:

· JPEG – файлы этого формата сохраняются с расширением. jpg.

· GIF – файлы этого формата сохраняются с расширением. gif.

· PNG – файлы этого формата сохраняются с расширением. png. (Не все обозреватели могут поддерживать этот формат).

 

Для размещения рисунков в HTML-документе служит одиночный тег

< IMG SRC ="имя файла">

Этот тег должен всегда содержать параметр src, значением которого будет абсолютный или относительный путь к графическому файлу. Абсолютный путь начинается с указания буквы диска и всех вложенных папок (например, "C:\Моя_папка\Мой_файл.jpg"). Относительный путь указывается следующим образом: "имя файла.jpg". Но в этом случае рисунок должен обязательно находиться в той же папке, что и Web-страница.

Рассмотрим пример использования рисунка в HTML-документе.

1. Найдем на своем компьютере какой-нибудь рисунок с расширением. jpg или. gif. (Например, в папке HTML \Images-Anim\ dog. gif)

2. Скопируем его к себе в папку.

3. В редакторе наберем следующий HTML-код:

<HTML>

<HEAD>

 <TITLE> Использование изображений</TITLE>

</HEAD>

<BODY>

<H2 align=center> Пример вставки рисунка </H2>

<IMG SRC="dog.gif"

</BODY>

</HTML>

4. Получим следующее:

 

 

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

 

 

Границы вокруг рисунка создаются с помощью параметра border. По умолчанию обозреватель показывает рисунок без границ. Чтобы прорисовать границы вокруг рисунка, параметру border необходимо присвоить значение толщины границы в пикселях.

Добавим в предыдущем документе следующее:

<IMG SRC="dog.gif" border=10>

Получим рисунок в рамке, толщиной 10 пикселей.

 

С помощью параметра alt рисунок можно снабдить альтернативным текстом. Альтернативный текст отображается во время выгрузки изображения или в обозревателях, в которых показ графики отключен пользователем

Добавим в предыдущем документе следующее:

< IMG SRC =" dog. gif " border =10 alt ="Это замечательный добрый песик">

 

При наведении указателя мыши на рисунок появится альтернативный текст.

 

 

Для выравнивания рисунков в тексте Web-страницы используется параметр align.

По умолчанию обозреватели оставляют лишь несколько пикселей между текстом и рисунком. Увеличение отступа может усилить зрительный эффект. Отступ текста от рисунка контролируется параметрами hspace – отступы слева и справа от рисунка, и vspace – над и под рисунком.

С помощью параметров width и height можно изменять размер изображения, увеличив или уменьшив его. Если размер изображения устанавливается в %, то при просмотре рисунок всегда будет занимать размер в % относительно окна обозревателя. В этом случае можно указывать только один параметр.

Задание для самостоятельной работы:

Оформить Web-страницу, содержащую заголовок, рисунок и текст.

1. Требования к заголовку:

· расположить по центру;

· назначить 2 уровень заголовка.

· название – "Наша Брестчина".

2. Требования к вставляемому рисунку:

· должен быть выровнен по левому краю;

· отступ справа от рисунка – 40, под рисунком – 20;

· установить ширину рисунка – 45%;

· предусмотреть ввод альтернативного текста (например, "Это древнее Берестье" или "Это Беловежская пуща")

3. Требования к тексту:

· выровнять текст по ширине;

· для первого слова первого абзаца установить размер шрифта =5 и цвет шрифта – красный.

ВНЕШНИЕ И ВНУТРЕННИЕ ССЫЛКИ

Самое ценное программное средство HTML – гиперссылки.

Только благодаря ссылкам посетители Web-страниц могут быстро открыть нужную Web-страницу или мгновенно просмотреть отдельные фрагменты емкого HTML‑документа.

У каждой Web-страницы, любого Internet ресурса, файлов есть свой собственный адрес.

Такой адрес называется универсальным указателем информационного ресурса, или URL. (Uniform Resource Location).

Для того чтобы подключиться к Internet-ресурсу (или открыть Web-страницу), в окне Web-браузера в поле со списком Адреса необходимо ввести соответствующий URL.

Гиперссылка – фрагмент текста HTML–документа, с помощью которого осуществляется переход на другую Web-страницу.

Для того чтобы создать гиперссылку, нужно использовать тег <а>.

Тег <а> имеет обязательные атрибуты