SlideShare a Scribd company logo
1 of 48
World Wide Web (сокр. WWW или Web или W3, в переводе
на русский означает - Всемирная паутина), изначально
придуманная для обмена исследовательской
информацией, стала теперь частью повседневной жизни
множества людей.
WWW – одна из самых популярных служб Internet,
поскольку доступ туда может получить каждый, кто имеет
компьютер и модем. Модем (слово «модем» - происходит от
сокращения двух терминов: Модулятор/ДЕМодулятор), это
такое устройство расширения компьютера, которое
позволяет передавать информацию от одного компьютера к
другому в закодированном виде (сигналами определѐнной
частоты и громкости) через телефонную линию.
Прошло немного времени с тех пор, как
в ноябре 1990 г. Тим Бернес-Ли из
Европейского центра ядерных
исследований (CERN) создал прототип
первого сервера Всемирной паутины
(WWW-сервера), который впоследствии
коренным образом изменил облик
Internet.

Но несмотря на то, что концепция функционирования сервера WWW, была
уже создана, практическое применение этого сервиса было невозможно
вплоть до февраля 1993 г., когда в суперкомпьютерном центре
Иллинойского университета была создана альфа (первая, пригодная для
публикации) версия NCSA Mosaic – самой первой программы просмотра
документов на серверах WWW. Именно с этого момента определился
взрывной характер роста Internet.
WWW – это глобальная система гипертекста.
Гипертекст - текст со вставленными в него словами
(командами) разметки, ссылающимися на другие места этого
текста, другие документы, картинки и т.д.
К 1989 году гипертекст представлял новую,
многообещающую технологию, которая имела относительно
большое число реализаций с одной стороны, а с другой
стороны делались попытки построить формальные модели
гипертекстовых систем, которые носили скорее
описательный характер и были навеяны успехом
реляционного подхода описания данных.
Идея Т. Бернерс-Ли заключалась в том, чтобы применить гипертекстовую
модель к информационным ресурсам, распределенным в сети, и сделать
это максимально простым способом. Он заложил три краеугольных камня
системы из четырех существующих ныне, разработав:
• язык гипертекстовой разметки документов HTML (HyperText Markup
Language),
• универсальный способ адресации ресурсов в сети URL (Universal Resource
Locator),
• протокол обмена гипертекстовой информацией HTTP (HyperText Transfer
Protocol).

Позже команда NCSA добавила
к этим трем компонентам
четвертый:
- универсальный интерфейс
шлюзов CGI (Common Gateway
Interface).
Идея HTML – пример чрезвычайно удачного решения
проблемы построения гипертекстовой системы при
помощи специального средства управления
отображением.
В HTML гипертекстовые ссылки встроены в тело
документа и хранятся как его часть. Часто в системах
применяют специальные форматы хранения данных
для повышения эффективности доступа. В WWW
документы – это обычные ASCII-файлы, которые можно
подготовить в любом текстовом редакторе. Таким
образом, проблема создания гипертекстовой базы
данных была решена чрезвычайно просто.

В качестве базы для разработки языка
гипертекстовой разметки был выбран SGML.
В основу синтаксиса языка HTML лег стандарт ISO
8879:1986 «Information processing. Text and office
systems. Standard Generalised Markup Language
(SGML)».
Стремясь завоевать лидерство в сфере продуктов и программ для
WWW, две крупнейшие компании – Netscape, первой утвердившиеся на
этом рынке, и вездесущая (там, где есть деньги) Microsoft Corp.,
которая тоже не может упустить такой лакомый кусок, - наперебой
вводили все новые дополнения и расширения в HTML.

В течение конца 1995-начала 1996 года
обе фирмы (Netscape и MS) делали все
возможное, чтобы следующая версия
стандарта HTML – третья – включала в
себя именно их усовершенствования.
Третья версия стандарта, долго время существовавшая в
черновом варианте, была по всем параметрам очень далека
как от версии 2.0, так и от предложений Netscape и Microsoft.
К сожалению, ни к чему хорошему это не привело –
Консорциум W3, оказавшись не в силах довести до конца
проект HTML3, решил прервать работу над этим стандартом,
а вместо него подготовил в сотрудничестве с Microsoft,
Netscape, Sun и другими фирмами версию стандарта HTML
3.2, которая почти полностью копирует вариант этого языка
фирмы Netscape.
И с появлением в мае 1996-го
HTML 3.2 возможности самого
языка были значительно
расширены. В частности были
реализованы так называемые
таблицы стилей (style sheets),
усовершенствованны средства
форматирования, появились новые
средства компоновки, возможность
разделения документа на разделы,
введена поддержка
математических символов
(основанная на языке LaTeX) и
апплетов языка Java.

Во время чтения гипертекста вы видите подсвеченные
(выделенные) в тексте слова. Если «наехать» на них курсором
мыши и нажать клавишу или на кнопку мышки, то высветится то, на
что ссылалось это слово, например, другой параграф той же главы
этого же текста. Такое представление переходов называется
ссылками (URL, Uniform Resource Locator – Унифицированный
указатель ресурсов)
Имея редактор гипертекстов, вы можете создать любую структуру
рабочей среды, включая документацию, файлы, данные, картины,
программное обеспечение и т.д., и это не будет новое программное
обеспечение, а просто гипертекст. Увы, создание гипертекстовых
редакторов с человеческим лицом (дружественным интерфейсом,
отладчиком и т.д.) задача не из простых и еще не решенная.

WWW напоминает паутину, в которой
каждый узел или WWW-страница
представляют собой систему
расходящихся связей с другими узлами
или страницами, каждая из которых, в
свою очередь, связана с еще большим
числом страниц.
Последняя составляющая технологии
WWW - это уже плод работы группы
NCSA -спецификация Common Gateway
Interface.
CGI была специально разработана для расширения
возможностей WWW за счет подключения всевозможного
внешнего программного обеспечения.

Кроме CGI так же имеется такой инструмент, как
форма. Формы являются составляющими той же
модели взаимодействия, что и CGI-сценарии, и
позволяют вводить данные для своего запроса или в
качестве ответа, - например, делать заказ на
приобретение чего-либо, организовывать поиск
необходимого ресурса, регистрироваться в гостевой
книге какого-либо сайта и т.п. Это – «внешний
интерфейс», с которым пользователи взаимодействуют.

CGI-сценарии составляют скрытую
от глаз пользователя часть
интерактивного взаимодействия.
HTML – это язык разметки документов в среде WEB. То, что
мы видим при просмотре страницы в Internet, это
интерпретация браузером HTML-текста. Чтобы браузер
правильно отображал форматирование к примеру текста
т.е. разделял его на абзацы, выделял цитаты, заголовки,
списки и.т.д. ему надо как-то сообщить , что мол это
заголовок, а это – параграф и.т.д. Этим как раз и
занимается язык html.
Тег – оформленная единица HTML-кода. Например,
<html >, <body>,<h1>,<h2> и так далее. Все тэги имеют
одинаковый формат: они начинаются знаком "<" и
заканчиваются знаком ">".Обычно имеются два тэга –
открывающий и закрывающий. Различие в том, что в
закрывающем имеется слэш "/". Желательно вводить все
теги в нижнем регистре(маленькими буквами), хотя не
обязательно.
Пример :
<h1> Крупный заголовок </h1>
<h2> Заголовок чуть поменьше </h2>
Атрибут –это своего рода дополнительная информация. Атрибуты
всегда записываются внутри тега, затем следует знак равенства и детали
атрибута, заключѐнные в двойные кавычки.

Пример:
<h1> Крупный заголовок </h1>
<h2 align="center"> Заголовок чуть
поменьше </h2>
Элемент – понятие, введенное чисто для удобства
обьяснения. Например, элемент HEAD состоит из
двух
тегов
–
открывающего
<HEAD>
и
закрывающего </HEAD>. Таким образом, элемент –
более общее понятие, обозначающее пару тегов и
участок документа между тегами, на который
распространяется их влияние.
<html></html> Указывает
программе просмотра страниц что это
HTML документ.
<head></head> Определяет место, где
помещается различная информация не
отображаемая в теле документа. Здесь
располагается тег названия документа и
теги для поисковых машин.
<body></body> Определяет видимую
часть документа
<title></title>
Помещает название
документа в оглавление программы
просмотра страниц
<body bgcolor=?> Устанавливает цвет фона документа, используя
значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<body text=?> Устанавливает цвет текста документа, используя
значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
<body link=?> Устанавливает цвет гиперссылок, используя
значение цвета в виде RRGGBB - пример:
00FF00 зеленый цвет.
<body vlink=?> Устанавливает цвет гиперссылок на которых
вы уже побывали, используя значение цвета в виде
RRGGBB - пример: 333333 - серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.
<pre></pre>
Обрамляет предварительно отформатированный текст
<h1></h1>
Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6>
Создает самый маленький заголовок
<b></b>
Создает жирный текст
<i></i>
Создает наклонный текст
<tt></tt>
Создает
текст
имитирующий стиль печатной машинки
<cite></cite>
Используется для цитат,
обычно наклонный текст.
<em></em>
Используется
для
выделения из текста слова (наклонный или
жирный текст)
<strong></strong>
Используется
для
выделения наиболее важных частей текста
(наклонный или жирный текст)
<font size=?></font>
Устанавливает
размер текста в пределах от 1 до 7.
<font color=?></font>
Устанавливает цвет текста,
используя значение цвета в виде RRGGBB.
<a href="URL"></a>
Создает гиперссылку на другие
документы или часть текущего документа.

</a>

<a href="mailto:EMAIL">
Создает гиперссылку вызова почтовой программы для
написания письма автору документа.

<a name="NAME"></a> Отмечает часть текста как цель для
гипперссылок в документе.
<a href="#NAME"></a> Создает гиперссылку на часть текущего документа.
<p>
Создает новый параграф
<p align=?>
Выравнивает параграф относительно одной из
сторон документа, значения: left, right, или center
<br>
Вставляет перевод строки.
<blockquote>
</blockquote> Создает отступы с обеих сторон текста.
<dl></dl>

Создает список определений.

<dt>

Определяет каждый из терминов списка

<dd>

Описывает каждое определение
Создает нумерованный список

<ol></ol>
<li>

Определяет каждый элемент списка и присваивает номер

<ul></ul>

Создает ненумерованный список

<li>
Предваряет каждый элемент списка и добавляет кружок или
квадратик
<div align=?>
Важный тег используемый для форматирования
больших блоков текста HTML документа, также используется в
таблицах стилей
<img src="name">

Добавляет изображение в HTML документ

<img src="name" align=?>
Выравнивает изображение к одной из сторон
документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?>
изображения

<hr>

Устанавливает толщину рамки вокруг

Добавляет в HTML документ горизонтальную линию.

<hr size=?>

Устанавливает высоту(толщину) линии

<hr width=?>
Устанавливает ширину линии, можно указать ширину в
пикселах или процентах.
<hr noshade>

Создает линию без тени.

<hr color=?>

Задает линии определенный цвет. Значение RRGGBB.
<table></table> Создает таблицу.
<tr></tr>

Определяет строку в таблице.

<td></td>

Определяет отдельную ячейку в таблице.

<td></td>

Определяет отдельную ячейку в таблице.

<table border=#>

Задает толщину рамки таблицы.

<table cellspacing=#>

Задает расстояние между ячейками таблицы.

<table cellpadding=#>
ее рамкой.

Задает расстояние между содержимым ячейки и

<table width=#> Устанавливает ширину таблицы в пикселах или процентах
от ширины документа.
<tr align=?> или <td align=?>
Устанавливает выравнивание ячеек в
таблице, принимает значения: left, center, или right.
<tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание
для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> Указывает кол-во столбцов которое объединено в
одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в одной
ячейке. (по умолчанию=1)
<td nowrap>
Не позволяет программе просмотра делать перевод строки в
ячейке таблицы.
<frameset></frameset>
содержащем кадры

Предваряет

тег

<body>

в

документе,

<frameset rows="value,value"> Определяет строки в таблице кадров,
высота которых определена кол-вом пикселов или в процентном
соотношении к высоте таблицы кадров
<frameset cols="value,value">
Определяет столбцы в таблице кадров,
ширина которых определена кол-вом пикселов или в процентном
соотношении к ширине таблицы кадров
<frame> Определяет единичный кадр или область в таблице кадров
<noframes></noframes> Определяет, что будет показано в окне
браузера если он не поддерживает кадры.
<frame src="URL">
показан в кадре.

Определяет какой из HTML документов будет

<frame name="name"> Указывает
Имя
кадра
или
области,
что
позволяет выводить информацию в этот кадр или область из других кадров.
<frame marginwidth=#> Определяет величину отступов по левому и правому
краям кадра; должно быть равно или больше 1.
<frame marginheight=#> Определяет величину отступов по верхнему и
нижнему краям кадра; должно быть равно или больше 1.
<frame scrolling=VALUE>
Указывает будет ли выводится линейка
прокрутки в кадре; значение value может быть "yes," "no," или "auto".
Значение по умолчанию для обычных документов - auto.
<frame noresize>

Препятствует изменению размеров кадра.
Для форм, выполняющих какие-то функции должны быть запущены
соответствующие CGI скрипты на сервере. HTML только создает внешний
интерфейс формы.

<form></form> Создает формы
<select multiple name="NAME" size=?></select> Создает меню со
скролингом. Size устанавливает кол-во пунктов меню, которое будет
показано на экране, остальные будут доступны при использовании
прокрутки.
<option> Указывает каждый отдельный элемент меню
<select name="NAME"></select> Создает ниспадающее меню
<option> Указывает каждый отдельный элемент меню

<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для
ввода текста. Columns указывает ширину окна; rows указывает его
высоту.
<input type="checkbox" name="NAME"> Создает checkbox. За тегом
следует текст.
<input type="radio" name="NAME" value="x">
тегом следует текст

Создает radio кнопку. За

Параметром Size указывается длина в символах.
<input type="submit" value="NAME">
Создает кнопку "Принять"
<input

type="image"
border=0
name="NAME"
src="name.gif">
Создает кнопку "Принять" - для этого используется изображение

<input type="reset">

Создает кнопку "Отмена"
Заголовок HTML-документа определяется
элементом HEAD. Тег <HEAD> не имеет
атрибутов. Элемент HEAD размещается
сразу после тега HTML, перед основной
частью Web-страницы:
<HTML>
<HEAD>
<! - Здесь размещается заголовок
документа>
</HEAD>
•••
</HTML>
Элемент HEAD (как элемент HTML) не
отображается при просмотре Webстраницы, он дает браузеру общую
информацию о HTML-файл.
К заголовку документа входит
обязательный элемент, который представлен
контейнером <TITLE> . Все, что находится
между парой тегов <TITLE> и </TITLE> ,
интерпретируется браузером как название
Web-страницы.
Если в документе есть гиперссылки, то
название документа, на который указана
ссылка, будет появляться в виде плавающей
подсказки при наведении на ссылку курсор
мыши.
Элемент TITLE по отношению к
элементу HEAD является дочерним, т.е.
вложенным в контейнер <HEAD> :
< HTML >
<HEAD>
<TITLE > Название Web-страницы
</TITLE>
•••
</HEAD>
•••
Наличие в HTML-документе элемента
BODY является формальным признаком того,
что данный документ имеет обычную
структуру.
Тег <BODY> размещается
непосредственно после элемента HEAD, а
конечный тег </BODY> является
предпоследним тэгом документа:
< HTML >
<HEAD>
<TITLE >Название Web-страницы
</TITLE>
</HEAD>
<!- - Содержание документа -->
•••
</BODY>
< /HTML >
Начальный тег может дополняться
несколькими атрибутами, которые определяют
внешний вид документа в целом.
*ВАСКGROUND Атрибут задает графическое изображение, которое как
черепица заполнит фон документа. Синтаксис: <BODY> ВАСКGROUND
="(URL)(путь) имя файла">
*ВGCOLOR Этот атрибут задает цвет фона документа при помощи
шестнадцатеричных значений интенсивности цветов КОВ , или при помощи
строчного литерала, соответствующего названию цвета. Синтаксис: <BODY
ВGCOLOR ="#Я0000">или
<BODY
ВGCOLOR
="RED">

*ТЕХТ Этот атрибут задает используемый по умолчанию цвет текста,
который не является гиперссылкой. По умолчанию такой текст будет
черным. Синтаксис: <BODY ТЕХТ="цвет">
*LINK Этот атрибут задает цвет гиперссылки, в большинстве браузеров
он задан по умолчанию темно синим. Синтаксис: <BODY LINK ="цвет">
*ALINK Этот атрибут задает цвет активной гиперссылки, он меняет цвет
гиперссылки в момент щелчка по ней мышью, не желательно задавать
ему цвет фона по понятным причинам. Синтаксис: <BODY ALINK
="цвет">

*VLINK Этот атрибут задает цвет посещенной гиперссылки, не
желательно задавать ему цвет фона и цвет атрибута 1ЛМС по понятным
причинам. Синтаксис: <BODY VLINK ='’цвет">
Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы:
- STRONG Используется для выделения текста жирным
- EM
Используется для выделения текста курсивом
- U Выделение текста подчеркиванием
- S Перечеркивание текста
- SUP
Создание верхнего индекса
- SUB
Создание нижнего индекса
- FONT Изменение цвета, типа, размера шрифта
- HR
Вставляет в текст горизонтальную разделительную линию
STRONG - Выделяет текст, заключенный между открывающим и
закрывающим тегами, жирным шрифтом. Раньше везде использовался тег
<BOLD> (или <b> ), в принципе его можно использовать и сейчас, но это не
приветствуется поисковыми системами.
EM ( Emphasis ) - Выделяет текст, заключенный между открывающим и
закрывающим тегами, курсивом. Также аналогичен по действию тег <I> ,
однако его лучше не использовать т.к. это не приветствуется поисковыми
системами.
U(Underline) - Отображает помещенный
закрывающим тегами текст как подчеркнутый:

между

открывающим

и

S(Strike) - Текст, помещенный между открывающим <s> и закрывающим </s>
тегами, будет перечеркиваться!
SUP ( Superscript) - Отображает текст, заключенный между открывающим
<SUP> и закрывающим </SUP> тегами, как верхний индекс от основного
текста.
SUB(Subscript) - Отображает текст, заключенный между открывающим
<SUB> и закрывающим </SUB> тегами, как нижний индекс от основного
текста.

FONT - Позволяет изменять цвет, размер и тип шрифта текста,
находящегося между открывающим <font> и закрывающим </font> тегами.
Атрибуты:
SIZE - Определяет размер шрифта. Возможные значение - 1 , 2 , 3 , 4 , 5 , 6 , 7.
COLOR - Определяет цвет текста. Задается либо RGB-значением в
шестнадцатиричной системе, либо одним из 16 базовых цветов.

FACE - определяет используемый шрифт. Используйте Times New
Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у
всех. Иначе гарантий нет!
HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет!
Атрибуты HR:
WIDTH – определяет длину линии в пикселах или процентах от ширины
окна браузера.
SIZE – толщина линии в пикселах.
ALIGN – определяет выравнивание горизонтальной линии. Атрибут
может принимать следующие значения:
left – выравнивание по левому краю документа.
right – выравнивание по правому краю документа.
center – выравнивание по центру документа (используется по умолчанию).

NOSHADE – определяет способ закраски линии как сплошной. Атрибут
является флагом и не требует указания значения. Без данного атрибута линия
отображается объемной.
COLOR – задает цвет линии. Можно использовать либо RGB-значение в
шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает
только в Internet Explorer.
Например:
Текст до линии <hr noshade width="50%" align="left">
После линии <br>
А вот пример линии толщиной 2px и без флага
noshade
<hr width="50%" align="left" size ="2">
Списки двух видов:
• упорядоченные (пронумерованные)
• неупорядоченные (непронумерованные)
Элементы:
- UL
Создает неупорядоченный список
- OLСоздает упорядоченный список
- LI Создает пункты списка внутри элементов OL или UL
UL (Unsorted List) - Создает неупорядоченный список.
Обязательно наличие закрывающиего тега, причем между
начальным и конечным тегами должны присутствовать один или
несколько элементов LI, обозначающих отдельные пункты списка.
OL (Ordered List)- Создает упорядоченный список. Между начальным и
конечным тегами должны присутствовать один или несколько элементов LI,
обозначающих отдельные пункты списка.
Атрибуты:
START – определяет первое число, с которого начинается нумерация
пунктов. (только целые числа) . Если не указывать, начинается с начала.
TYPE – определяет стиль нумерации пунктов списка.
Возможные значения:
"A" – заглавные буквы A, B,
C ...

"a" – строчные буквы a, b, c
...
"I" – большие римские
числа I, II, III ...
"i" – маленькие римские
числа i, ii, iii ...
"1" – арабские числа 1, 2, 3
...
Значение по умолчанию
<OL TYPE="1">.
LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL
или UL. Закрывающий тег писать желательно, но не обязательно, это уже
решать Вам.
Атрибуты:
VALUE – изменяет порядок нумерации элементов списка. Используется
только если элемент LI находится внутри элемента OL. В качестве
значения указывается порядковый номер элемента.

Пример:
Чтобы создать сайт на домашнем компьютере необходимо:
<ol ><!--так как тип не указали будет использоваться по умолчанию-->
<li> Выучить html </li>
<!--сейчас нумерация пойдет с пятого номера-->
<li value="5"> Выучить css </li>
<li> Ознакомиться с php </li>
</ol>
<a href="http://www.zvirec.com">Это ссылка на сайт zvirec.com </a>
Если нужно сделать ссылку между собственными страницами?

Если есть две страницы (к примеру page1.htm и page2.htm )
расположенные в одной папке , то код ссылки с page1 на page2
будет выглядеть так:
<a href="page2.htm"> Для перехода на page2 щелкни здесь!
</a>
Eсли страница page 2 находится в подпапке "subfolder", код
ссылки выглядит так:
<a href="subfolder/page2.htm"> Для перехода на page2 щелкни
здесь! </a>
Так будет выглядеть код html ссылки со страницы page 2 на
page1(в обратную сторону):
<a href="../page1.htm"> Для перехода на page1 щелкни здесь!
</a>
Если надо сделать ссылку внутри страницы?
Бывают случаи когда необходимо сделать ссылку с начала страницы
в конец или наоборот, или к примеру с оглавления на главы и.т.д.
Необходимо пометить место документа следующей конструкцией:
<!-- этот способ используется при маркировании заголовков -->
<h2 id="razdel1">Раздел 1</h2>
<!-- а такую метку можно поставить везде где понадобится-->
<h2> <a name="razdel1"></a> Раздел1: </h2>
Теперь вы можете ссылаться на помеченную область(в данном
случае Раздел1) простым указанием ее имени после значка #.

Вот как будет выглядеть ссылка на раздел1:
<a href="#razdel1"> Ссылка на Раздел 1 </a>
Пример:
<h1 > Оглавление </h1> <br>
<a href="#razdel1">Раздел 1: как стать богатым</a> <br>
<a href="#razdel2">Раздел 2: как стать счастливым</a><br>
<a href="#razdel3">Раздел 3: как быть здоровым</a>
<h2 id="razdel1">Раздел 1: как стать богатым </h2>
<p> Для того, чтобы стать богатым необходимо очень много
трудиться ..... </p>
<h2 id="razdel2">Раздел 2: как стать счастливым </h2>
<p>Для того чтобы стать счастливым, нужно использовать каждую
минуту...</p>
<h2>Раздел3:<a name="razdel3"></a> как быть здоровым</h2>
<p>Для того чтобы быть здоровым нужно много заниматься
физкультурой...</p>
Ссылка на почту.
Пример ссылки на е-mail сайта zno.com .
<a href="mailto:admin@zno.com">Написать письмо админу zno.com </a>
В браузере будет выглядеть:
Написать письмо админу zno.com

Дополнительные атрибуты:
TARGET - указывает где открывать страницу на которую ведет html ссылка.
По умолчанию она открывается в том же окне. Если хочется чтобы
открывалась в новом, следует написать target ="_blank".
TITLE - указывает заголовок ссылки, который появляется при наведении на
нее.
Пример:
<a href="http://www.zno.com" target="_blank">
Это ссылка на сайт zno .com, откроется в
новом окне
</a> <br> <br>
<a href="http://www. zno.com" title="Учебник
создания сайта ">
Эта - тоже на zno.com. При наведении
появится заголовок.
</a>
Результат:
Это ссылка на сайт zno.com, откроется в
новом окне
Эта - тоже на zno.com. При наведении
появится заголовок.
Изменение цвета ссылок
Чтобы изменять цвет ссылок во всем документе, существуют
специальные атрибуты элемента BODY .
LINK - цвет просто ссылок.
ALINK(Active Link) - цвет активных ссылок (активная означает
в момент нажатия на нее)
VLINK(Visited Link) - цвет уже посещенных ссылок
Все цвета задаются либо RGB-значением в
шестнадцатиричной системе, либо одним из 16 базовых цветов.
К примеру если при открытии тела документа, элементу body
прописать:
<body link="red" vlink="green" alink="white">
то все ссылки в данном документе станут красными, уже
посещенные ссылки станут зелеными а ссылки в момент нажатия
будут белыми.
А если нужно чтобы в каком -то месте ссылка имела другой цвет?
например по всему документу красные, а именно в одном месте
зеленая?
Тогда нужно внутри html ссылки прописать уже знакомый элемент
font с атрибутом цвета:
<a href="http://www.zvirec.com"><font color="black">Черная
ссылка</font></a>
Если сделать так, то данная ссылка будет черной.
Подводя итог всему, что сказано выше, хочется
отметить, что HTML стал тем форматом передачи
информации, который наиболее полно и качественно
удовлетворяет запросы современного общества.
Несомненным фактом является и то, что будущее
именно за HTML.

More Related Content

What's hot

Scripting languages
Scripting languagesScripting languages
Scripting languagesLev Panov
 
REPL в Node.js: улучшаем быт разработчик
REPL в Node.js: улучшаем быт разработчикREPL в Node.js: улучшаем быт разработчик
REPL в Node.js: улучшаем быт разработчикIT61
 
Дизайн платформа в Avito - Александр Лобашев (Avito)
Дизайн платформа в Avito - Александр Лобашев (Avito)Дизайн платформа в Avito - Александр Лобашев (Avito)
Дизайн платформа в Avito - Александр Лобашев (Avito)AvitoTech
 
Anton Tsitou "Designing hybrid Go/PHP applications using RoadRunner"
Anton Tsitou "Designing hybrid Go/PHP applications using RoadRunner"Anton Tsitou "Designing hybrid Go/PHP applications using RoadRunner"
Anton Tsitou "Designing hybrid Go/PHP applications using RoadRunner"Fwdays
 
Ігор Карпиленко — PHPStorm for drupal developer
Ігор Карпиленко — PHPStorm for drupal developerІгор Карпиленко — PHPStorm for drupal developer
Ігор Карпиленко — PHPStorm for drupal developerLEDC 2016
 
Perl Debugger и mod_perl
Perl Debugger и mod_perlPerl Debugger и mod_perl
Perl Debugger и mod_perlИван mrRico
 
Catalyst – MVC framework на Perl (RIT 2008)
Catalyst – MVC framework на Perl  (RIT 2008)Catalyst – MVC framework на Perl  (RIT 2008)
Catalyst – MVC framework на Perl (RIT 2008)Sergey Skvortsov
 
Теория языков программирования некоторые слайды к лекциям
Теория языков программирования некоторые слайды к лекциямТеория языков программирования некоторые слайды к лекциям
Теория языков программирования некоторые слайды к лекциямSergey Staroletov
 
Django: инструкция по применению
Django: инструкция по применениюDjango: инструкция по применению
Django: инструкция по применениюIvan Kolodyazhny
 
Лекция #6. Введение в Django web-framework
Лекция #6. Введение в Django web-frameworkЛекция #6. Введение в Django web-framework
Лекция #6. Введение в Django web-frameworkЯковенко Кирилл
 
Полный цикл разработки на Python + Django
Полный цикл разработки на Python + DjangoПолный цикл разработки на Python + Django
Полный цикл разработки на Python + DjangoAzamat Tokhtaev
 
Multilanguage Drupal
Multilanguage DrupalMultilanguage Drupal
Multilanguage DrupalInna Tuyeva
 
C++ Базовый. Занятие 01.
C++ Базовый. Занятие 01.C++ Базовый. Занятие 01.
C++ Базовый. Занятие 01.Igor Shkulipa
 
Использование библиотеки анализа кода OpenC++: модификация, улучшение, исправ...
Использование библиотеки анализа кода OpenC++: модификация, улучшение, исправ...Использование библиотеки анализа кода OpenC++: модификация, улучшение, исправ...
Использование библиотеки анализа кода OpenC++: модификация, улучшение, исправ...Tatyanazaxarova
 
Демонизированный PHP - before it was cool
Демонизированный PHP - before it was coolДемонизированный PHP - before it was cool
Демонизированный PHP - before it was coolAndrey Tokarchuk
 
Tasks (batch) in Symfony. Symfony Camp Presentation 2010 UA.
Tasks (batch) in Symfony. Symfony Camp Presentation 2010 UA.Tasks (batch) in Symfony. Symfony Camp Presentation 2010 UA.
Tasks (batch) in Symfony. Symfony Camp Presentation 2010 UA.Alexander Bezruchenko
 
039
039039
039JIuc
 

What's hot (20)

PHP: SAPI
PHP: SAPIPHP: SAPI
PHP: SAPI
 
Scripting languages
Scripting languagesScripting languages
Scripting languages
 
REPL в Node.js: улучшаем быт разработчик
REPL в Node.js: улучшаем быт разработчикREPL в Node.js: улучшаем быт разработчик
REPL в Node.js: улучшаем быт разработчик
 
Дизайн платформа в Avito - Александр Лобашев (Avito)
Дизайн платформа в Avito - Александр Лобашев (Avito)Дизайн платформа в Avito - Александр Лобашев (Avito)
Дизайн платформа в Avito - Александр Лобашев (Avito)
 
Anton Tsitou "Designing hybrid Go/PHP applications using RoadRunner"
Anton Tsitou "Designing hybrid Go/PHP applications using RoadRunner"Anton Tsitou "Designing hybrid Go/PHP applications using RoadRunner"
Anton Tsitou "Designing hybrid Go/PHP applications using RoadRunner"
 
Ігор Карпиленко — PHPStorm for drupal developer
Ігор Карпиленко — PHPStorm for drupal developerІгор Карпиленко — PHPStorm for drupal developer
Ігор Карпиленко — PHPStorm for drupal developer
 
Perl Debugger и mod_perl
Perl Debugger и mod_perlPerl Debugger и mod_perl
Perl Debugger и mod_perl
 
Catalyst – MVC framework на Perl (RIT 2008)
Catalyst – MVC framework на Perl  (RIT 2008)Catalyst – MVC framework на Perl  (RIT 2008)
Catalyst – MVC framework на Perl (RIT 2008)
 
Теория языков программирования некоторые слайды к лекциям
Теория языков программирования некоторые слайды к лекциямТеория языков программирования некоторые слайды к лекциям
Теория языков программирования некоторые слайды к лекциям
 
Django: инструкция по применению
Django: инструкция по применениюDjango: инструкция по применению
Django: инструкция по применению
 
Лекция #6. Введение в Django web-framework
Лекция #6. Введение в Django web-frameworkЛекция #6. Введение в Django web-framework
Лекция #6. Введение в Django web-framework
 
Полный цикл разработки на Python + Django
Полный цикл разработки на Python + DjangoПолный цикл разработки на Python + Django
Полный цикл разработки на Python + Django
 
Multilanguage Drupal
Multilanguage DrupalMultilanguage Drupal
Multilanguage Drupal
 
C++ Базовый. Занятие 01.
C++ Базовый. Занятие 01.C++ Базовый. Занятие 01.
C++ Базовый. Занятие 01.
 
Использование библиотеки анализа кода OpenC++: модификация, улучшение, исправ...
Использование библиотеки анализа кода OpenC++: модификация, улучшение, исправ...Использование библиотеки анализа кода OpenC++: модификация, улучшение, исправ...
Использование библиотеки анализа кода OpenC++: модификация, улучшение, исправ...
 
Демонизированный PHP - before it was cool
Демонизированный PHP - before it was coolДемонизированный PHP - before it was cool
Демонизированный PHP - before it was cool
 
PHP
PHPPHP
PHP
 
Tasks (batch) in Symfony. Symfony Camp Presentation 2010 UA.
Tasks (batch) in Symfony. Symfony Camp Presentation 2010 UA.Tasks (batch) in Symfony. Symfony Camp Presentation 2010 UA.
Tasks (batch) in Symfony. Symfony Camp Presentation 2010 UA.
 
039
039039
039
 
Php and frameworks
Php and frameworksPhp and frameworks
Php and frameworks
 

Similar to Html лаб 2

Similar to Html лаб 2 (20)

Vvedenie html 1
Vvedenie html 1Vvedenie html 1
Vvedenie html 1
 
гипертекст
гипертекстгипертекст
гипертекст
 
9773
97739773
9773
 
HTML
HTMLHTML
HTML
 
компьютерные сети
компьютерные сетикомпьютерные сети
компьютерные сети
 
Практикум Web программирование
Практикум Web программированиеПрактикум Web программирование
Практикум Web программирование
 
Hpc Day
Hpc DayHpc Day
Hpc Day
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
 
JavaScript
JavaScriptJavaScript
JavaScript
 
16 компьютерные сети
16 компьютерные сети16 компьютерные сети
16 компьютерные сети
 
Dhtml 1
Dhtml 1Dhtml 1
Dhtml 1
 
Present.pps
Present.ppsPresent.pps
Present.pps
 
Present.pps
Present.ppsPresent.pps
Present.pps
 
введение в интернет
введение в интернетвведение в интернет
введение в интернет
 
Лекции и задания по рнр
Лекции и задания по рнрЛекции и задания по рнр
Лекции и задания по рнр
 
автоматическое построение оригинал макетов учебников как отч
автоматическое построение оригинал макетов учебников как отчавтоматическое построение оригинал макетов учебников как отч
автоматическое построение оригинал макетов учебников как отч
 
DHTML
DHTMLDHTML
DHTML
 
Web 2
Web 2Web 2
Web 2
 
Основы HTML
Основы HTMLОсновы HTML
Основы HTML
 
Обзор рекомендаций W3C
Обзор рекомендаций W3CОбзор рекомендаций W3C
Обзор рекомендаций W3C
 

More from Vladimir Burdaev

Modul 1 Systems Business Intelligence
Modul 1 Systems Business IntelligenceModul 1 Systems Business Intelligence
Modul 1 Systems Business IntelligenceVladimir Burdaev
 
презентация управления знаниями_каркас
презентация управления знаниями_каркаспрезентация управления знаниями_каркас
презентация управления знаниями_каркасVladimir Burdaev
 
управление знаний3 (2)
управление знаний3 (2)управление знаний3 (2)
управление знаний3 (2)Vladimir Burdaev
 
интелектуальный анализ экономических данных в системе каркас
интелектуальный анализ экономических данных в системе каркасинтелектуальный анализ экономических данных в системе каркас
интелектуальный анализ экономических данных в системе каркасVladimir Burdaev
 
каркас новая версия
каркас новая версиякаркас новая версия
каркас новая версияVladimir Burdaev
 
каркас интеллектуальный анализ вар 2
каркас интеллектуальный анализ вар 2каркас интеллектуальный анализ вар 2
каркас интеллектуальный анализ вар 2Vladimir Burdaev
 
Karkas интеллектуальный анализ
Karkas интеллектуальный анализKarkas интеллектуальный анализ
Karkas интеллектуальный анализVladimir Burdaev
 
продвижение нового товара
продвижение нового товарапродвижение нового товара
продвижение нового товараVladimir Burdaev
 
оценка инновационных рисков предприятия
оценка инновационных рисков предприятияоценка инновационных рисков предприятия
оценка инновационных рисков предприятияVladimir Burdaev
 
источник финансирования
источник финансированияисточник финансирования
источник финансированияVladimir Burdaev
 
каркас 2011 prezent_servis
каркас 2011 prezent_servisкаркас 2011 prezent_servis
каркас 2011 prezent_servisVladimir Burdaev
 
каркас тестирование
каркас тестированиекаркас тестирование
каркас тестированиеVladimir Burdaev
 
Построение базы знаний для агентов
Построение базы знаний для агентовПостроение базы знаний для агентов
Построение базы знаний для агентовVladimir Burdaev
 

More from Vladimir Burdaev (20)

Modul 1 Systems Business Intelligence
Modul 1 Systems Business IntelligenceModul 1 Systems Business Intelligence
Modul 1 Systems Business Intelligence
 
презентация управления знаниями_каркас
презентация управления знаниями_каркаспрезентация управления знаниями_каркас
презентация управления знаниями_каркас
 
2015 04 14_info_b_2
2015 04 14_info_b_22015 04 14_info_b_2
2015 04 14_info_b_2
 
E makros bur_2
E makros bur_2E makros bur_2
E makros bur_2
 
Burdtech
BurdtechBurdtech
Burdtech
 
управление знаний3 (2)
управление знаний3 (2)управление знаний3 (2)
управление знаний3 (2)
 
Paradigma km 0
Paradigma km 0Paradigma km 0
Paradigma km 0
 
парадигма ии
парадигма иипарадигма ии
парадигма ии
 
интелектуальный анализ экономических данных в системе каркас
интелектуальный анализ экономических данных в системе каркасинтелектуальный анализ экономических данных в системе каркас
интелектуальный анализ экономических данных в системе каркас
 
каркас новая версия
каркас новая версиякаркас новая версия
каркас новая версия
 
каркас интеллектуальный анализ вар 2
каркас интеллектуальный анализ вар 2каркас интеллектуальный анализ вар 2
каркас интеллектуальный анализ вар 2
 
Karkas интеллектуальный анализ
Karkas интеллектуальный анализKarkas интеллектуальный анализ
Karkas интеллектуальный анализ
 
продвижение нового товара
продвижение нового товарапродвижение нового товара
продвижение нового товара
 
оценка инновационных рисков предприятия
оценка инновационных рисков предприятияоценка инновационных рисков предприятия
оценка инновационных рисков предприятия
 
источник финансирования
источник финансированияисточник финансирования
источник финансирования
 
каркас рибс1
каркас рибс1каркас рибс1
каркас рибс1
 
каркас 2011 prezent_servis
каркас 2011 prezent_servisкаркас 2011 prezent_servis
каркас 2011 prezent_servis
 
каркас тестирование
каркас тестированиекаркас тестирование
каркас тестирование
 
Построение базы знаний для агентов
Построение базы знаний для агентовПостроение базы знаний для агентов
Построение базы знаний для агентов
 
бурдаев Mac1
бурдаев Mac1бурдаев Mac1
бурдаев Mac1
 

Html лаб 2

  • 1.
  • 2. World Wide Web (сокр. WWW или Web или W3, в переводе на русский означает - Всемирная паутина), изначально придуманная для обмена исследовательской информацией, стала теперь частью повседневной жизни множества людей. WWW – одна из самых популярных служб Internet, поскольку доступ туда может получить каждый, кто имеет компьютер и модем. Модем (слово «модем» - происходит от сокращения двух терминов: Модулятор/ДЕМодулятор), это такое устройство расширения компьютера, которое позволяет передавать информацию от одного компьютера к другому в закодированном виде (сигналами определѐнной частоты и громкости) через телефонную линию.
  • 3. Прошло немного времени с тех пор, как в ноябре 1990 г. Тим Бернес-Ли из Европейского центра ядерных исследований (CERN) создал прототип первого сервера Всемирной паутины (WWW-сервера), который впоследствии коренным образом изменил облик Internet. Но несмотря на то, что концепция функционирования сервера WWW, была уже создана, практическое применение этого сервиса было невозможно вплоть до февраля 1993 г., когда в суперкомпьютерном центре Иллинойского университета была создана альфа (первая, пригодная для публикации) версия NCSA Mosaic – самой первой программы просмотра документов на серверах WWW. Именно с этого момента определился взрывной характер роста Internet.
  • 4. WWW – это глобальная система гипертекста. Гипертекст - текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и т.д. К 1989 году гипертекст представлял новую, многообещающую технологию, которая имела относительно большое число реализаций с одной стороны, а с другой стороны делались попытки построить формальные модели гипертекстовых систем, которые носили скорее описательный характер и были навеяны успехом реляционного подхода описания данных.
  • 5. Идея Т. Бернерс-Ли заключалась в том, чтобы применить гипертекстовую модель к информационным ресурсам, распределенным в сети, и сделать это максимально простым способом. Он заложил три краеугольных камня системы из четырех существующих ныне, разработав: • язык гипертекстовой разметки документов HTML (HyperText Markup Language), • универсальный способ адресации ресурсов в сети URL (Universal Resource Locator), • протокол обмена гипертекстовой информацией HTTP (HyperText Transfer Protocol). Позже команда NCSA добавила к этим трем компонентам четвертый: - универсальный интерфейс шлюзов CGI (Common Gateway Interface).
  • 6. Идея HTML – пример чрезвычайно удачного решения проблемы построения гипертекстовой системы при помощи специального средства управления отображением. В HTML гипертекстовые ссылки встроены в тело документа и хранятся как его часть. Часто в системах применяют специальные форматы хранения данных для повышения эффективности доступа. В WWW документы – это обычные ASCII-файлы, которые можно подготовить в любом текстовом редакторе. Таким образом, проблема создания гипертекстовой базы данных была решена чрезвычайно просто. В качестве базы для разработки языка гипертекстовой разметки был выбран SGML. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalised Markup Language (SGML)».
  • 7. Стремясь завоевать лидерство в сфере продуктов и программ для WWW, две крупнейшие компании – Netscape, первой утвердившиеся на этом рынке, и вездесущая (там, где есть деньги) Microsoft Corp., которая тоже не может упустить такой лакомый кусок, - наперебой вводили все новые дополнения и расширения в HTML. В течение конца 1995-начала 1996 года обе фирмы (Netscape и MS) делали все возможное, чтобы следующая версия стандарта HTML – третья – включала в себя именно их усовершенствования.
  • 8. Третья версия стандарта, долго время существовавшая в черновом варианте, была по всем параметрам очень далека как от версии 2.0, так и от предложений Netscape и Microsoft. К сожалению, ни к чему хорошему это не привело – Консорциум W3, оказавшись не в силах довести до конца проект HTML3, решил прервать работу над этим стандартом, а вместо него подготовил в сотрудничестве с Microsoft, Netscape, Sun и другими фирмами версию стандарта HTML 3.2, которая почти полностью копирует вариант этого языка фирмы Netscape.
  • 9. И с появлением в мае 1996-го HTML 3.2 возможности самого языка были значительно расширены. В частности были реализованы так называемые таблицы стилей (style sheets), усовершенствованны средства форматирования, появились новые средства компоновки, возможность разделения документа на разделы, введена поддержка математических символов (основанная на языке LaTeX) и апплетов языка Java. Во время чтения гипертекста вы видите подсвеченные (выделенные) в тексте слова. Если «наехать» на них курсором мыши и нажать клавишу или на кнопку мышки, то высветится то, на что ссылалось это слово, например, другой параграф той же главы этого же текста. Такое представление переходов называется ссылками (URL, Uniform Resource Locator – Унифицированный указатель ресурсов)
  • 10. Имея редактор гипертекстов, вы можете создать любую структуру рабочей среды, включая документацию, файлы, данные, картины, программное обеспечение и т.д., и это не будет новое программное обеспечение, а просто гипертекст. Увы, создание гипертекстовых редакторов с человеческим лицом (дружественным интерфейсом, отладчиком и т.д.) задача не из простых и еще не решенная. WWW напоминает паутину, в которой каждый узел или WWW-страница представляют собой систему расходящихся связей с другими узлами или страницами, каждая из которых, в свою очередь, связана с еще большим числом страниц. Последняя составляющая технологии WWW - это уже плод работы группы NCSA -спецификация Common Gateway Interface.
  • 11. CGI была специально разработана для расширения возможностей WWW за счет подключения всевозможного внешнего программного обеспечения. Кроме CGI так же имеется такой инструмент, как форма. Формы являются составляющими той же модели взаимодействия, что и CGI-сценарии, и позволяют вводить данные для своего запроса или в качестве ответа, - например, делать заказ на приобретение чего-либо, организовывать поиск необходимого ресурса, регистрироваться в гостевой книге какого-либо сайта и т.п. Это – «внешний интерфейс», с которым пользователи взаимодействуют. CGI-сценарии составляют скрытую от глаз пользователя часть интерактивного взаимодействия.
  • 12. HTML – это язык разметки документов в среде WEB. То, что мы видим при просмотре страницы в Internet, это интерпретация браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. ему надо как-то сообщить , что мол это заголовок, а это – параграф и.т.д. Этим как раз и занимается язык html.
  • 13. Тег – оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">".Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш "/". Желательно вводить все теги в нижнем регистре(маленькими буквами), хотя не обязательно. Пример : <h1> Крупный заголовок </h1> <h2> Заголовок чуть поменьше </h2>
  • 14. Атрибут –это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключѐнные в двойные кавычки. Пример: <h1> Крупный заголовок </h1> <h2 align="center"> Заголовок чуть поменьше </h2>
  • 15. Элемент – понятие, введенное чисто для удобства обьяснения. Например, элемент HEAD состоит из двух тегов – открывающего <HEAD> и закрывающего </HEAD>. Таким образом, элемент – более общее понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.
  • 16. <html></html> Указывает программе просмотра страниц что это HTML документ. <head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. <body></body> Определяет видимую часть документа <title></title> Помещает название документа в оглавление программы просмотра страниц
  • 17. <body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет. <body text=?> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. <body link=?> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 зеленый цвет. <body vlink=?> Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет. <body alink=?> Устанавливает цвет гиперссылок при нажатии.
  • 18. <pre></pre> Обрамляет предварительно отформатированный текст <h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок <h6></h6> Создает самый маленький заголовок <b></b> Создает жирный текст <i></i> Создает наклонный текст <tt></tt> Создает текст имитирующий стиль печатной машинки <cite></cite> Используется для цитат, обычно наклонный текст. <em></em> Используется для выделения из текста слова (наклонный или жирный текст) <strong></strong> Используется для выделения наиболее важных частей текста (наклонный или жирный текст) <font size=?></font> Устанавливает размер текста в пределах от 1 до 7. <font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
  • 19. <a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа. </a> <a href="mailto:EMAIL"> Создает гиперссылку вызова почтовой программы для написания письма автору документа. <a name="NAME"></a> Отмечает часть текста как цель для гипперссылок в документе. <a href="#NAME"></a> Создает гиперссылку на часть текущего документа.
  • 20. <p> Создает новый параграф <p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center <br> Вставляет перевод строки. <blockquote> </blockquote> Создает отступы с обеих сторон текста. <dl></dl> Создает список определений. <dt> Определяет каждый из терминов списка <dd> Описывает каждое определение Создает нумерованный список <ol></ol> <li> Определяет каждый элемент списка и присваивает номер <ul></ul> Создает ненумерованный список <li> Предваряет каждый элемент списка и добавляет кружок или квадратик <div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
  • 21. <img src="name"> Добавляет изображение в HTML документ <img src="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle <img src="name" border=?> изображения <hr> Устанавливает толщину рамки вокруг Добавляет в HTML документ горизонтальную линию. <hr size=?> Устанавливает высоту(толщину) линии <hr width=?> Устанавливает ширину линии, можно указать ширину в пикселах или процентах. <hr noshade> Создает линию без тени. <hr color=?> Задает линии определенный цвет. Значение RRGGBB.
  • 22. <table></table> Создает таблицу. <tr></tr> Определяет строку в таблице. <td></td> Определяет отдельную ячейку в таблице. <td></td> Определяет отдельную ячейку в таблице. <table border=#> Задает толщину рамки таблицы. <table cellspacing=#> Задает расстояние между ячейками таблицы. <table cellpadding=#> ее рамкой. Задает расстояние между содержимым ячейки и <table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа. <tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. <tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
  • 23. <td colspan=#> Указывает кол-во столбцов которое объединено в одной ячейке. (по умолчанию=1) <td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1) <td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
  • 24. <frameset></frameset> содержащем кадры Предваряет тег <body> в документе, <frameset rows="value,value"> Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров <frameset cols="value,value"> Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров <frame> Определяет единичный кадр или область в таблице кадров <noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает кадры.
  • 25. <frame src="URL"> показан в кадре. Определяет какой из HTML документов будет <frame name="name"> Указывает Имя кадра или области, что позволяет выводить информацию в этот кадр или область из других кадров. <frame marginwidth=#> Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1. <frame marginheight=#> Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1. <frame scrolling=VALUE> Указывает будет ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. <frame noresize> Препятствует изменению размеров кадра.
  • 26. Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы. <form></form> Создает формы <select multiple name="NAME" size=?></select> Создает меню со скролингом. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. <option> Указывает каждый отдельный элемент меню <select name="NAME"></select> Создает ниспадающее меню <option> Указывает каждый отдельный элемент меню <textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. <input type="checkbox" name="NAME"> Создает checkbox. За тегом следует текст.
  • 27. <input type="radio" name="NAME" value="x"> тегом следует текст Создает radio кнопку. За Параметром Size указывается длина в символах. <input type="submit" value="NAME"> Создает кнопку "Принять" <input type="image" border=0 name="NAME" src="name.gif"> Создает кнопку "Принять" - для этого используется изображение <input type="reset"> Создает кнопку "Отмена"
  • 28. Заголовок HTML-документа определяется элементом HEAD. Тег <HEAD> не имеет атрибутов. Элемент HEAD размещается сразу после тега HTML, перед основной частью Web-страницы: <HTML> <HEAD> <! - Здесь размещается заголовок документа> </HEAD> ••• </HTML> Элемент HEAD (как элемент HTML) не отображается при просмотре Webстраницы, он дает браузеру общую информацию о HTML-файл.
  • 29. К заголовку документа входит обязательный элемент, который представлен контейнером <TITLE> . Все, что находится между парой тегов <TITLE> и </TITLE> , интерпретируется браузером как название Web-страницы. Если в документе есть гиперссылки, то название документа, на который указана ссылка, будет появляться в виде плавающей подсказки при наведении на ссылку курсор мыши. Элемент TITLE по отношению к элементу HEAD является дочерним, т.е. вложенным в контейнер <HEAD> : < HTML > <HEAD> <TITLE > Название Web-страницы </TITLE> ••• </HEAD> •••
  • 30. Наличие в HTML-документе элемента BODY является формальным признаком того, что данный документ имеет обычную структуру. Тег <BODY> размещается непосредственно после элемента HEAD, а конечный тег </BODY> является предпоследним тэгом документа: < HTML > <HEAD> <TITLE >Название Web-страницы </TITLE> </HEAD> <!- - Содержание документа --> ••• </BODY> < /HTML > Начальный тег может дополняться несколькими атрибутами, которые определяют внешний вид документа в целом.
  • 31.
  • 32. *ВАСКGROUND Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Синтаксис: <BODY> ВАСКGROUND ="(URL)(путь) имя файла"> *ВGCOLOR Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов КОВ , или при помощи строчного литерала, соответствующего названию цвета. Синтаксис: <BODY ВGCOLOR ="#Я0000">или <BODY ВGCOLOR ="RED"> *ТЕХТ Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссылкой. По умолчанию такой текст будет черным. Синтаксис: <BODY ТЕХТ="цвет">
  • 33. *LINK Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим. Синтаксис: <BODY LINK ="цвет"> *ALINK Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам. Синтаксис: <BODY ALINK ="цвет"> *VLINK Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута 1ЛМС по понятным причинам. Синтаксис: <BODY VLINK ='’цвет">
  • 34. Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы: - STRONG Используется для выделения текста жирным - EM Используется для выделения текста курсивом - U Выделение текста подчеркиванием - S Перечеркивание текста - SUP Создание верхнего индекса - SUB Создание нижнего индекса - FONT Изменение цвета, типа, размера шрифта - HR Вставляет в текст горизонтальную разделительную линию
  • 35. STRONG - Выделяет текст, заключенный между открывающим и закрывающим тегами, жирным шрифтом. Раньше везде использовался тег <BOLD> (или <b> ), в принципе его можно использовать и сейчас, но это не приветствуется поисковыми системами. EM ( Emphasis ) - Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом. Также аналогичен по действию тег <I> , однако его лучше не использовать т.к. это не приветствуется поисковыми системами. U(Underline) - Отображает помещенный закрывающим тегами текст как подчеркнутый: между открывающим и S(Strike) - Текст, помещенный между открывающим <s> и закрывающим </s> тегами, будет перечеркиваться! SUP ( Superscript) - Отображает текст, заключенный между открывающим <SUP> и закрывающим </SUP> тегами, как верхний индекс от основного текста.
  • 36. SUB(Subscript) - Отображает текст, заключенный между открывающим <SUB> и закрывающим </SUB> тегами, как нижний индекс от основного текста. FONT - Позволяет изменять цвет, размер и тип шрифта текста, находящегося между открывающим <font> и закрывающим </font> тегами. Атрибуты: SIZE - Определяет размер шрифта. Возможные значение - 1 , 2 , 3 , 4 , 5 , 6 , 7. COLOR - Определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. FACE - определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет! HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет!
  • 37. Атрибуты HR: WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – толщина линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа. right – выравнивание по правому краю документа. center – выравнивание по центру документа (используется по умолчанию). NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной. COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer. Например: Текст до линии <hr noshade width="50%" align="left"> После линии <br> А вот пример линии толщиной 2px и без флага noshade <hr width="50%" align="left" size ="2">
  • 38. Списки двух видов: • упорядоченные (пронумерованные) • неупорядоченные (непронумерованные) Элементы: - UL Создает неупорядоченный список - OLСоздает упорядоченный список - LI Создает пункты списка внутри элементов OL или UL UL (Unsorted List) - Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка. OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
  • 39. Атрибуты: START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа) . Если не указывать, начинается с начала. TYPE – определяет стиль нумерации пунктов списка. Возможные значения: "A" – заглавные буквы A, B, C ... "a" – строчные буквы a, b, c ... "I" – большие римские числа I, II, III ... "i" – маленькие римские числа i, ii, iii ... "1" – арабские числа 1, 2, 3 ... Значение по умолчанию <OL TYPE="1">.
  • 40. LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам. Атрибуты: VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента. Пример: Чтобы создать сайт на домашнем компьютере необходимо: <ol ><!--так как тип не указали будет использоваться по умолчанию--> <li> Выучить html </li> <!--сейчас нумерация пойдет с пятого номера--> <li value="5"> Выучить css </li> <li> Ознакомиться с php </li> </ol>
  • 41. <a href="http://www.zvirec.com">Это ссылка на сайт zvirec.com </a> Если нужно сделать ссылку между собственными страницами? Если есть две страницы (к примеру page1.htm и page2.htm ) расположенные в одной папке , то код ссылки с page1 на page2 будет выглядеть так: <a href="page2.htm"> Для перехода на page2 щелкни здесь! </a> Eсли страница page 2 находится в подпапке "subfolder", код ссылки выглядит так: <a href="subfolder/page2.htm"> Для перехода на page2 щелкни здесь! </a> Так будет выглядеть код html ссылки со страницы page 2 на page1(в обратную сторону): <a href="../page1.htm"> Для перехода на page1 щелкни здесь! </a>
  • 42. Если надо сделать ссылку внутри страницы? Бывают случаи когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и.т.д. Необходимо пометить место документа следующей конструкцией: <!-- этот способ используется при маркировании заголовков --> <h2 id="razdel1">Раздел 1</h2> <!-- а такую метку можно поставить везде где понадобится--> <h2> <a name="razdel1"></a> Раздел1: </h2> Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #. Вот как будет выглядеть ссылка на раздел1: <a href="#razdel1"> Ссылка на Раздел 1 </a>
  • 43. Пример: <h1 > Оглавление </h1> <br> <a href="#razdel1">Раздел 1: как стать богатым</a> <br> <a href="#razdel2">Раздел 2: как стать счастливым</a><br> <a href="#razdel3">Раздел 3: как быть здоровым</a> <h2 id="razdel1">Раздел 1: как стать богатым </h2> <p> Для того, чтобы стать богатым необходимо очень много трудиться ..... </p> <h2 id="razdel2">Раздел 2: как стать счастливым </h2> <p>Для того чтобы стать счастливым, нужно использовать каждую минуту...</p> <h2>Раздел3:<a name="razdel3"></a> как быть здоровым</h2> <p>Для того чтобы быть здоровым нужно много заниматься физкультурой...</p>
  • 44. Ссылка на почту. Пример ссылки на е-mail сайта zno.com . <a href="mailto:admin@zno.com">Написать письмо админу zno.com </a> В браузере будет выглядеть: Написать письмо админу zno.com Дополнительные атрибуты: TARGET - указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank". TITLE - указывает заголовок ссылки, который появляется при наведении на нее.
  • 45. Пример: <a href="http://www.zno.com" target="_blank"> Это ссылка на сайт zno .com, откроется в новом окне </a> <br> <br> <a href="http://www. zno.com" title="Учебник создания сайта "> Эта - тоже на zno.com. При наведении появится заголовок. </a> Результат: Это ссылка на сайт zno.com, откроется в новом окне Эта - тоже на zno.com. При наведении появится заголовок.
  • 46. Изменение цвета ссылок Чтобы изменять цвет ссылок во всем документе, существуют специальные атрибуты элемента BODY . LINK - цвет просто ссылок. ALINK(Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее) VLINK(Visited Link) - цвет уже посещенных ссылок Все цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. К примеру если при открытии тела документа, элементу body прописать: <body link="red" vlink="green" alink="white"> то все ссылки в данном документе станут красными, уже посещенные ссылки станут зелеными а ссылки в момент нажатия будут белыми.
  • 47. А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте зеленая? Тогда нужно внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета: <a href="http://www.zvirec.com"><font color="black">Черная ссылка</font></a> Если сделать так, то данная ссылка будет черной.
  • 48. Подводя итог всему, что сказано выше, хочется отметить, что HTML стал тем форматом передачи информации, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML.