Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML. (История появления HTML)

Содержание:

1. Введение

С созданием сетей Интернет и внутренних сетей предприятий и корпораций появилась возможность с любого оборудованного компьютером рабочего места получить доступ к информационному ресурсу мировой сети. World Wide Web, что означает в переводе с английского языка -«всемирная паутина», получила столь широкое распространение в мире из за многих своих преимуществ, в том числе из-за простоты своих пользовательских интерфейсов. Для работы в мировой сети был создан особенный язык. Простой и гениальный язык, обосновавшийся на просторах всемирной сети HTML — это язык, объединивший World Wide Web. С помощью его простых принципов была разработана фантастически разнообразная сеть: от крупнейших Google, eBay, Youtube, до индивидуальных блогов и сайтов любого человека в мире. Принцип нажимай на то, что интересно, лежащий в основе гипертекста, сразу всем понятен. Такой способ представления информации называется гипертекстом, а документы, представленные в таком виде –гипертекстовыми документами. HTML язык по своей сути не является языком программирования, он является языком разметки гипертекстовых документов. Иначе говоря, он отвечает за расположение в документе текстов, рисунков, таблиц, предназначенных для жизни в сети Интернет. Язык не может посчитать, сколько будет дважды два, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре. Читается этот язык при помощи программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "переводя" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа. Название языка HTML происходит от английских слов HyperTextMarkupLanguage – язык разметки гипертекста. HTML – похож на обычный текстовый файл, в котором находится как стандартный текст, так и особые коды форматирования или разметки. Эти коды указывают, каким образом должен отображаться данный документ программой — просмотрщиком (браузером). HTML-документ является переносимым продуктом. Это означает, что авторский труд будет легко доступен огромному числу пользователей, независимо от марки компьютера и типа операционной системы. Именно это свойство HTML-документов, а также их относительно малый размер, позволили с успехом использовать HTML-технологию для подготовки WWW-страниц в Интернете.

Разработчики HTML смогли решить две задачи:

 предоставить дизайнерам гипертекстовых баз данных простое средство создания документов;

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

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

Язык НТМL позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее. В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое.

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

Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки). Гипертекстовые ссылки, устанавливающие связи между текстовыми документами, постепенно стали объединять самые различные информационные ресурсы, в том числе звук и видео; в результате возникло новое понятие — гипермедиа.

Такой подход предполагает наличие еще одного компонента технологии — интерпретатора языка. В World Wide Web функции интерпретатора разделены между Web-сервером гипертекстовой базы данных и интерфейсом пользователя. Сервер, кроме доступа к документам и обработки гипертекстовых ссылок, обеспечивает предпроцессорную обработку документов, в то время как интерфейс пользователя осуществляет интерпретацию конструкций языка, связанных с представлением информации.

2. История появления HTML.

История HTML началась в конце 1980-х годов, когда у ученых из Европейской лаборатории элементарных частиц (CERN) возникла необходимость обмениваться множеством различных документов при помощи быстро развивающейся сети Интернет. Тогда необходимо было придумать способ публикации документов в сети таким образом, чтобы к любому нужному документу можно было легко получить доступ. К тому же нужно было, чтобы документы отображались на всех компьютерах одинаковым образом.

Решение поставленной задачи было найдено сотрудником CERN Бернерс-Ли. В 1989 году Тим Бернерс-Ли создал новый язык форматирования документов. В его основу был положен другой ранее созданный язык – SGML, который предусматривал установку связей между

документами с помощью гиперссылок. Новый язык разметки был назван HTML. Этот же человек реализовал и первую программу для просмотра HTML - документов – браузер. Затея с гипертекстом очень быстро прижилась. Вскоре в Интернете выросла большая сеть гипертекстовых документов, которую постепенно стали называть World Wide Web. К тому же в 1993 году команда программистов, руководителем которой являлся основатель компании Netscape Марк Андриессен, разработала первый браузер, имеющий полноценный графический интерфейс и позволяющий работать с мышью, – Mosaic. Это не могло не добавить популярности быстро развивающейся Сети.

Со временем Интернет стал востребован не только учеными: к нему пришли и рядовые пользователи, причем их число неуклонно возрастало. Для многих было очевидно, что HTML, не предполагающий никакой динамики в создаваемых с его помощью документах, достаточно скучен и невзрачен. Это дало толчок развитию технологий CSS, введению поддержки апплетов Java, а после и сценариев (первым языком был JavaScript). Нельзя не отметить, что с образованием и ростом Сети создателей HTML не на шутку взволновала «чистота» своего детища. Существовали небезосновательные опасения, что производители браузеров, которые скоро должны были прийти на рынок, будут «баловать» своих пользователей фирменными нововведениями, которые, естественно, будут поддерживаться только фирменными браузерами. В 1994 году была создана организация, взявшая на себя разработку единых стандартов развития WWW – World Wide Web Consortium (W3C). Эта организация и занялась подготовкой стандартов HTML (начиная с HTML 2.0). Правда, несмотря на наличие W3C, нововведения в HTML начинали поддерживаться производителями браузеров гораздо раньше, чем эта организация их стандартизировала (так, например, обстояло дело с фреймами, с внедрением сценариев в HTML-документы, с объектной моделью документов и т. д.). Развитие языка HTML сегодня практически завершено.

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

3. Структура HTML-документов.

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

Все теги заключаются в скобки “” и заканчиваются символом “” тег ( возможно, с указанием одного или нескольких дополнительных атрибутов с заданными значениями; строчный и прописной регистр в записи тегов и параметров, как правило, не различается, за исключением отдельных, особо оговариваемых случаев). Действие этой тега в зависимости от его действий либо выполняется однократно в данной позиции текста, либо распространяется на весь последующий текст до «ответного» данному «закрывающего» тега или до появления такого же тега с иными значениями атрибутов. Также есть «закрывающиеся» теги является почти точной копией «открывающего», но его название предваряется символом дробной черты «/» и в нем не требуется указание каких-либо атрибутов в закрытии тега. Такая конструкция из «открывающего» и «закрывающего» тегов называется контейнером, а действие его распространяется на весь текстовый фрагмент, заключенный внутри контейнера

Теги записываются в угловых скобках и могут содержать дополнительные параметры. Большинство тегов располагается в виде ``скобок'' вокруг текста (как теги <I> и </I> вокруг слова ``курсивом'' в приведенном выше примере). Благодаря этому свойству, теги можно подразделить на открывающие и закрывающие. Не у всех тегов существуют соответствующие им закрывающие, такие теги иногда называют ``пустыми''(empty). Общую структуру открывающего тега можно записать так:

Соответствующий закрывающий тег будет иметь вид

</NNNNN>

Теги HTML:

Заглавные теги

<HTML> (соответственно, в конец документа, закрывающего тега </HTML>; никогда не забывайте закрывать скобки!). Заголовок HTML-файла находится в обязательной секции <HEAD>, которая должна находиться в самом начале, то есть сразу после тега <HTML>. Оформляется заголовок с помощью тега <TITLE>.

BACKGROUND - позволяет задать фоновую картинку для документа. Картинка будет размножена (tiled) и покроет всю видимую площадь области отображения окна программы просмотра.

TEXT - задает цвет текста документа. Цвет задается так же как и для параметра BGCOLOR.

LINK - задает цвет для текста и рамок изображений в активных зонах документа, содержащих ссылки (anchors).

VLINK - (Visited LINKs color) задает цвет для ранее выбранных ссылок.

ALINK - (Active LINKs color) задает цвет для ссылок в момент выбора.

Форматирующие теги

Для того чтобы вставить ``насильный'' перевод строки, необходимо воспользоваться тегом <BR> . Если вам необходимо сделать так, чтобы в определенном месте текст НЕ МОГ быть разорван, напишите в этом месте тег <NOBR>

Для разбивки текста на параграфы используется тег <Pпараметры>ТЕКСТ<P> Тег <P> имеет один параметр ALIGN, указывающий на способ выравнивания текста внутри параграфа: текст может быть выровнен по правому (RIGHT), левому (LEFT) краям или отцентрирован (CENTER). Если параметр опущен, текст выравнивается по левому краю.

Чтобы отцентрировать параграф можно также пользоваться тегом

Еще одним способом разделения текста на части можно назвать горизонтальную линию. Линия является элементом языка HTML и вставляется в текст посредством тега<HRпараметры>,где параметры могут быть следующими:

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

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

align = “left”

align = “center”

align = “right”

align = “justify”

Можно задать толщину линии:

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

Можно управлять длиной линии:

width = длина в пикселях

width = длина в процентах

Можно выбрать цвет:

color = “цвет”

<A></a>

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

<A name = “>Произвольный текст</a>

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

<P>Переход к <A href = “#метка”>метке</a></p>

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

Списки

Списки в HTML бывают трех типов: ненумерованные, нумерованные и так называемые списки терминов. Ненумерованный список оформляется с помощью блока

<UL>

<LI>элемент

<LI> элемент

</UL>

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

<OL>

<LI>элемент

</OL>

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

глоссариев. Оформить такой список можно с помощью

блока

<DL>

<DT>Термин1<DD>Описание1

<DT>Термин2<DD>Описание2

</DL>

4. Таблицы

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

Нарисуем таблицу:

Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и

столбцов, для этого есть ещё два тега:

<tr> - строка таблицы

<td> - столбец таблицы

Вместе эти теги пишутся так:

<table>

<tr>

<td>ячейка</td>

</tr>

</table>

Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку

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

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td>строка1 ячейка1 </td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1 </td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1 </td>

<td>строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</body>

</html>

Объединение ячеек.

Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну (правильнее было бы говорить не объединить, а "растянуть").

Эту задачу решают атрибуты colspan и rowspan.

 colspan - определяет какое количество столбцов будет занимать данная ячейка

 rowspan - количество рядов занимаемое ячейкой

Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td>строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1</td>

<td colspan="2">строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</body>

</html>

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

Допущена эта оплошность, чтобы понять принцип данного действия.

Исправленный пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td>строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1</td>

<td colspan="2">строка3 ячейка2</td>

</tr>

</table>

</body>

</html>

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

rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и сразу уберём лишнее.

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td rowspan="3">строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td colspan="2">строка3 ячейка2</td>

</tr>

</table>

</body>

Размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом. Атрибут width - ширина и height - высота, которые мы использовали для растягивания рисунков, так же применимы к тегам <table>, <tr> и <td>. Приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center>

Пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td rowspan="3" width="150">строка1 ячейка1</td>

<td height="30">строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td height="30">строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td colspan="2" >строка3 ячейка2</td>

</tr>

</table>

</center>

</body>

</html>

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

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

Вот пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<td width="15%"> строка1 ячейка1</td>

<td width="25%">строка1 ячейка2</td>

<td width="60%">строка1 ячейка3</td>

</tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<td>строка3 ячейка1</td>

<td>строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</center>

</body>

</html>

В этом примере от общей ширины таблицы в 640 пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке, а половину места второй. Главное, чтобы в сумме было 100%.

Существуют группы элементов, которые используются совместно. К ним относятся элементы для создания таблиц, списков, фреймов. В этом случае порядок вложения элементов определяется логикой создания того или иного объекта на странице. Таблицы и фреймы часто используются для того, чтобы разместить детали страницы (рисунки, текст и др.) в определённом порядке. Например, располагая рисунок внутри ячейки таблицы, можно добиться определённого его положения.

Большое количество элементов, которые используются для форматирования текста, допускают самые разнообразные варианты вложения. И сами они обязательно должны располагаться внутри определённых элементов.

Например, есть два абзаца (первый в зелёной рамке) и таблица:

<P style = “border: 3px solid green”> Текст абзаца 1</p>

<P> Текст абзаца 2 </p>

Таблица в данном случае - независимый элемент. Её можно, например, выравнивать независимо от остального текста.

Можно использовать другой код:

<P style = “border: 3px solid green “>Текст абзаца 1

<P> текст абзаца 2</p>

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

И наоборот, элемент P может находиться внутри таблицы: например, один элемент ячейки TD может содержать несколько абзацев P.

Правила синтаксиса распространяются и на использование стартового и конечного тегов, атрибутов и содержимого элемента. Нельзя путать понятия «элемент» и «тег». Элемент - это контейнер, содержащий атрибуты внутри стартового тега и полезную информацию между стартовым и конечным тегами. Тег - это конструкция, заключённая в угловые скобки и используемая для обозначения области действия элемента.

Некоторые элементы не имеют конечного тега. Элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом и без него. Элемент абзаца P может иметь конечный тег , но если тег не задан, то признаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент P, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и др.

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

Списки

<UL>

<LI>элемент

<LI> элемент

</UL>

<OL>

<LI>элемент

</OL>

5. Необходимая информация.

Существующие уровни заголовков.

В самом деле их шесть: от <h1> до <h6>. Браузер обычно отображает их, различая благодаря последовательному уменьшению размера шрифта. Но до тех пор, пока вы не начнете создавать большие и сложные документы, вы вряд ли будете использовать заголовки дальше <hЗ>.

Почему необходим тег <html>.

Тег <html> говорит браузеру, что ваш документ действительно является НТМL- документом. В то время как одни браузеры не обратят внимания на то, что вы опустите этот тег, другие вам это не пропустят. Использование этого тега действительно важно.

Что делает файл НТМL-файлом.

По своей сути НТМL-файл- это обычный текстовый файл. В отличие от файлов специальных текстовых редакторов, он неимеет возможности форматирования. Обычно в конце имени файла добавляется .html или.htm (в системах, которые помещают только три буквы в расширении файла), чтобы система определила тип файла. Действительно имеет значение лишь содержимое файла.

Способ вставлять комментарии в НТМL-код.

Если поместить свои комментарии между символами , то браузер их просто проигнорирует. Например, чтобы написать комментарий «Это начало нашей гостевой)), нужно сделать так: <•-- Это начало нашей гостевой --> Обратите внимание, что комментарий может

быть написан в несколько строк. Помните, что все написанное между , даже НТМL-код, будет проигнорировано браузером.

Рассмотрим НТМL-код для гостевой Head First:

<html> - говорит браузеру что это начало НТМL кода.

<head> - начинается название веб страницы (элемент-контейнер для метаданных).

<titlе> - начинается заголовок страницы.

</head> - Конец заголовка

<Ьоdу> - начинается основная часть страницы (содержимое, не относящееся к метаданным документа).

<hl> - Добро пожаловать в гостевую Head First</hl> - говорит браузеру, что это заглавие

<img src="drinks.gif"> - добавляет изображение

<р> - начинается абзац

Заходите к нам каждый вечер, чтобы попробовать

освежающие эликсиры, поболтать и, возможно,

<еm>станцевать разок-другой</еm>.

Всегда обеспечен беспроводной доступ

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

</р> - заканчивается абзац

-<h2>Указатели</h2> - говорит браузеру, что это подзаголовок.

<р> - начинается новый абзац.

Вы найдете нас в самом центре Webville.

Присоединяйтесь к нам!

</р> - заканчивается абзац

</body> - заканчивается основная часть страницы

</html> - говорит браузеру, что этом конец НТМL кода

. 6. Список HTML-элементов

Тег	Описание
<!--...-->	Используется для добавления комментариев.
<!DOCTYPE>	Объявляет тип документа и предоставляет основную информацию для браузера - его язык и версия.
<a>	Создаёт гипертекстовые ссылки.
<abbr>	Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address>	Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area>	Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article>	Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside>	Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio>	Загружает звуковой контент на веб-страницу.
<b>	Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base>	Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi>	Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo>	Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote>	Выделяет текст как цитату, применяется для описания больших цитат.
<body>	Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br>	Перенос текста на новую строку.
<button>	Создает интерактивную кнопку. Внутрь тега можно поместить содержимое - текст или изображение.
<canvas>	Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption>	Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite>	Используется для указания источника цитирования. Отображается курсивом.
<code>	Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col>	Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup>	Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data>	Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
<datalist>	Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd>	Используется для описания термина из тега <dt>.
<del>	Помечает текст как удаленный, перечёркивая его.
<details>	Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn>	Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog>	Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div>	Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl>	Тег-контейнер, внутри которого находятся термин и его описание.
<dt>	Используется для задания термина.
<em>	Выделяет важные фрагменты текста, отображая их курсивом.
<embed>	Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset>	Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption>	Заголовок/подпись для элемента <figure>.
<figure>	Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer>	Определяет завершающую область (нижний колонтитул) документа или раздела.
<form>	Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h1-h6>	Создают заголовки шести уровней для связанных с ними разделов.
<head>	Элемент-контейнер для метаданных HTML-документа, таких как<title>, <meta>, <script>, <link>, <style>.
<header>	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr>	Горизонтальная линия для тематического разделения параграфов.
<html>	Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i>	Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe>	Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img>	Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input>	Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins>	Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd>	Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<label>	Добавляет текстовую метку для элемента <input>.
<legend>	Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>.
<li>	Элемент маркированного или нумерованного списка.
<link>	Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
<main>	Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента <main>.
<map>	Создаёт активные области на карте-изображении. Является контейнером для элементов <area>.
<mark>	Выделяет фрагменты текста, помечая их желтым фоном.
<meta>	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter>	Индикатор измерения в заданном диапазоне.
<nav>	Раздел документа, содержащий навигационные ссылки по сайту.
<noscript>	Определяет секцию, не поддерживающую сценарий (скрипт).
<object>	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol>	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup>	Контейнер с заголовком для группы элементов <option>.
<option>	Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output>	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p>	Параграфы в тексте.
<param>	Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture>	Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre>	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress>	Индикатор выполнения задачи любого рода.
<q>	Определяет краткую цитату.
<ruby>	Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb>	Определяет вложенный в него текст как базовый компонент аннотации.
<rt>	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc>	Отмечает вложенный в него текст как дополнительную аннотацию.
<rp>	Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s>	Отображает текст, не являющийся актуальным, перечеркнутым.
<samp>	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script>	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section>	Определяет логическую область (раздел) страницы, обычно с заголовком.
<select>	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small>	Отображает текст шрифтом меньшего размера.
<source>	Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span>	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong>	Расставляет акценты в тексте, выделяя полужирным.
<style>	Подключает встраиваемые таблицы стилей.
<sub>	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary>	Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup>	Задает надстрочное написание символов.
<table>	Тег для создания таблицы.
<tbody>	Определяет тело таблицы.
<td>	Создает ячейку таблицы.
<template>	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea>	Создает большие поля для ввода текста.
<tfoot>	Определяет нижний колонтитул таблицы.
<th>	Создает заголовок ячейки таблицы.
<thead>	Определяет заголовок таблицы.
<time>	Определяет дату/время.
<title>	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr>	Создает строку таблицы.
<track>	Добавляет субтитры для элементов <audio> и <video>.
<u>	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul>	Создает маркированный список.
<var>	Выделяет переменные из программ, отображая их курсивом.
<video>	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr>	Указывает браузеру возможное место разрыва длинной строки.

Чтo coздaeт 6раузер:

Когда браузер читает НТМL-страницу , он интерпретирует все теги, которые окружают основной текст программы. Те и это обычны е слова или символы в угловых скобках, например, <head>, <р>, <hl> и т. д. С помощью тег браузер распознает структуру и значенuе вашего текста. Итак ,вместо того , чтобы nросто передавать браузеру кусок текста, благодаря HTML можно использовать теги, чтобы сказать браузеру, какая часть текста является названием , где начинается новый абзац, что нужно подчеркнуть и где расположить изображения.

7. HTML формы.

Html формы - это самая сложная часть языка html. Приведу html форму заказа обучающего диска:

Введите ФИО:
Введите пароль:
Какой диск вы хотите получить?
CD
DVD
Какие обучающие курсы вы хотите видеть на диске?
Курсы по Фотошопу
Курсы по Adobe Dreamweaver
Курсы по PHP
Выберите способ доставки:
Срочная
Введите адрес для доставки:
Сделать заказ
Отмена

html форма - это всего лишь каркас, созданный при помощи языка html, т.е. мы можем указать браузеру где у нас будет какое поле и что написано на той или иной кнопке. Но для того, чтобы при нажатии на кнопку ваш комментарий добавился в гостевую книгу или данные заказа полетели в офис - нужна иная технология - программа, скрипт, который привязывается к форме.

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

Пример 1:

<form>

</form>

Как видите здесь два базовых тега : открывающий <form> и обязательный закрывающий тег </form> .

Но в этом выше, как бы голый каркас, т.е. без атрибутов. А теперь рассмотрим более реальный каркас html формы:

Пример 2:

</form>

Атрибуты:

NAME – определяет имя формы, уникальное для данного документа. Используется только , если в документе присутствует несколько форм.

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

METHOD – определяет способ отправки содержимого html формы. Возможные значения GET (по умолчанию) и POST.

Методы передачи:

Метод GET используется для передачи различных переменных , или очень коротких сообщений. Информация передается в явном виде через строку браузера , т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде

http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В html формах обычно не используется.

Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Передает информацию в скрытом виде.

Разберем элементы формы:

Введите ФИО: <br>

<br>

Введите пароль:<br>

</form>

В результате получим:

Введите ФИО:

Введите пароль:

Мы видим следующее:

Элемент INPUT - создает поле html формы (кнопку, поле ввода, чекбокс и т.п.), Элемент не имеет конечного тега.

Основные атрибуты :

TYPE - определяет тип поля для ввода данных. По умолчанию – это "text". В данном примере еще используется тип "password" который указывает на то, чтоб информация звездочками.

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

SIZE - определяет размер поля в символах. По умолчанию имеет значение равное 24.

Т.е. если этот атрибут не писать то длина будет равна 24 символа.

Есть еще и такой полезный атрибут как MAXLENGTH , который определяет

максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.

Ну вот например:

Введите пароль(максимум шесть символов):<br>

</form>

Результат:

Введите пароль(максимум шесть символов):

Ну как работает? А вы попробуйте ввести больше шести символов :)

Еще есть атрибут VALUE который определеят что будет по умолчанию написано в поле для ввода.

Смотрите пример:

Введите свой e-mail: <br>

</form>

Результат:

Введите свой е-mail:

пример: admin@zvirec.com

Теперь рассмотрим следующий элемент формы:

<p> Какой диск вы хотите получить?</p>

<p>

CD<br>

DVD </p></form>

Результат:

Какой диск вы хотите получить?

DVD

Данный тип элементов html формы называется радиопереключатель (переключает: либо одно значение, либо другое - два одновременно быть не может). Поэтому атрибут type имеет значение type="radio". Раз мы выбераем между CD и DVD то радиопереключателя у нас два, поэтому два раза пользуемся элементом INPUT. Как видите у них одинаковое

имя - name="disc" и разные значения value . Почему это так? давайте подумаем логически:

Нас интересует какой диск хочет получить клиент, CD или DVD . Поэтому у нас одинаковое значение имени name="disc" и разные значение ( value="cd" и value="dvd").

Т.е. если мы выбираем первый вариант, то переменная disc примет значение cd а если второй- то dvd. Логично? по другому и быть не может...

Если вы хотите сделать, чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флаг checked(включен). Примечание:в радиопереключателе обязательно должен присутствовать атрибут value иначе ничего работать не будет.

Последний элемент:

<p>Какие обучающие курсы вы хотите видеть на диске?</p>

Курсы по Фотошопу <br>

Курсы по Adobe Dreamweaver <br>

<input type="checkbox" name="php" value="yes">Курсы по PHP

</form>

Результат:

Какие обучающие курсы вы хотите видить на диске?

Курсы по Фотошопу

Курсы по Adobe Dreamweaver

Курсы по PHP

Данный тип элементов html формы называется checkbox и отличается от

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

type="checkbox" означает что тип элемента - Чекбокс, атрибут name нужен для того, чтобы обработчик мог идентифицировать данное поле и наконец value - определяет тот параметр, который будет отправлен при поставленной галочке. В данном элементе, атрибут value не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке,как значение переменной в обработчик полетит текст который написан рядом с галочкой.

8. Управление цветом

Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий и фона, других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами. Существует несколько атрибутов, значениями которых являются параметры цвета. Самый простой способ определить цвет - написать название цвета на английском языке. Так, например, задаётся красный цвет шрифта в элементе FONT:

Color = “red”

Допустимые названия цветов:

Русское название Английское название RGB - код

Аквамарин Aqua #00FFFF

Белый White #FFFFFF

Жёлтый Yellow #FFFF00

Зелёный Green #008000

Золотой Gold #FF0700

Индиго Indigo #4B0080

Каштановый Maroon #800000

Красный Red #FF0000

Оливковый Olive #808000

Оранжевый Orange #FF0000

Пурпурный Purple #800080

Светло-зелёный Lime #00FF00

Серебристый Silver #C0C0C0

Серый Gray #808080

Сизый Teal #008080

Синий Blue #0000FF

Ультрамарин Navy #000080

Фиолетовый Violet #EE80EE

Фуксиновый Fuchsia #FF00FF

Чёрный Black #000000

Но в общем случае цвет определяется RGB - кодом. Любой цвет в этом случае представляется как комбинация красного (R), зелёного (G), синего (B) цветов, взятых в определённых пропорциях. Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двуразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255. В Windows-95 это соответствует цветовому режиму монитора True Color (24-разрядное двоичное кодирование цвета).

В выше приведённой таблице видно, что для формирования стандартных цветов часто используются или крайние значения интенсивности базового цвета 00 и FF, или среднее значение 80. Выбрав цвет, можно увидеть его численные характеристики, и наоборот, задав численные значения, получить новый оттенок.

Ещё одно направление применения цвета: элемент HR, создающий горизонтальную линию, допускает использование ряда атрибутов. С их помощью линию можно превратить в цветной прямоугольник. Его можно использовать для разделения частей страницы или в качестве маркеров списка.

HTML - код, рисующий радугу на Web-странице:

<FONT color = “ red “> Радуга </ front>

<TR><TD bgcolor = #FF3030 >K

<TR><TD bgcolor = FFD000 >0

<TR><TD bgcolor = #F3FF5F >Ж

<TR><TD bgcolor = #00FF00 >З

<TR><TD bgcolor = #6FD3F7 >Г

<TR><TD bgcolor = # 5F72FDF >С

<TR><TD bgcolor = # B568F4 >Ф

</ table>

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

Заключение

На сегодняшний день перспективы HTML продолжают расти. Консорциум всемирной паутины разрабатывает HTML версии 5. Первый вариант спецификации языка появился в Интернете 20 ноября 2007 года. Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (англ.Extensible Hypertext Markup Language— «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, основан наXML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума всемирной паутины26 января2000 года.

Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых веб-разработчиков и производителей браузеров. ГруппойWHATWG(англ.Web Hypertext Application Technology Working Group) разрабатывается спецификацияWeb Applications1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов ит.д., которые не очень удачно вписываются в модель XHTML 2.

Список литературы

1. Чак Муссиано и Билл Кеннеди "HTML и XHTML. Подробное руководство" 6-е издание. Издательство: Символ-Плюс, 2008 г. 458 с.

2. Andy Harris HTML, XHTML and CSS All–In–One For Dummies® / Andy Harris. - Москва: Машиностроение, 2012. - 254 c.

3. Дакетт Джон Основы веб-программирования с использованием HTML, XHTML и CSS / Джон Дакетт. - М.: Эксмо, 2015. - 768 c.

4. Дебольт HTML и CSS. Совместное использование / Дебольт, Вирджиния. - М.: НТ Пресс, 2016. - 512 c.

5. Дронов Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, 2016. - 416 c.

6. Квинт Игорь Создаем сайты с помощью HTML, XHTML и CSS / Игорь Квинт. - М.: Питер, 2014. - 448 c.

7. Лазаро Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2016. - 943 c.

8. Мержевич Влад HTML и CSS на примерах / Влад Мержевич. - М.: "БХВ-Петербург", 2016. - 448 c.

9. Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: РГГУ, 2015. - 768 c.

10. Прохоренок Николай HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера (+ CD-ROM) / Николай Прохоренок. - М.: БХВ-Петербург, 2013. - 912 c.

11. Пфаффенбергер HTML, XHTML и CSS. Библия пользователя / Пфаффенбергер и др. - М.: Вильямс; Издание 3-е, 2014. - 752 c.

12. Ташков Петр Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / Петр Ташков. - М.: Книга по Требованию, 2012. - 512 c.

13. Фримен Элизабет Изучаем HTML, XHTML и CSS / Элизабет Фримен, Эрик Фримен. - М.: Питер, 2016. - 720 c.

14. Чебыкин Ростислав Самоучитель HTML и CSS. Современные технологии / Ростислав Чебыкин. - Москва: Мир, 2013. - 624 c.

17. Шафер Стивен HTML, XHTML и CSS. Библия пользователя / Стивен Шафер. - Москва: Высшая школа, 2012. - 656 c.