Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации , HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2, 4.0 и т.д.

Для освоения HTML по этому Руководству Вам понадобятся две вещи:

Любой браузер , т.е., программа, пригодная для просмотра HTML-файлов (Internet Explorer);

Любой редактор текстовых файлов, поддерживающий русский язык в выбранной кодировке. Если на компьютере установлен Windows , вполне подойдет Word .

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

1. 2. Первый html-документ

   2. 2.1 Как устроен html-документ

   HTML-документ – это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).

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

   Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, ) называется меткой (по-английски – tag, читается "тэг").

   Большинство HTML-меток – парные, т.е. на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением "/".

   Метки можно вводить как большими, так и маленькими буквами. Например, метки , и будут восприняты браузером одинаково.

   1. 2.2 Обязательные метки ...

   Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.

   ...

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

   Все, что находится между метками , толкуется браузером как название документа. Internet Explorer , например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

   ...

   Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

   < H 1> ... H 1> - < H 6> ... H 6>

   Метки вида (где i – цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня – самый крупный, шестого уровня, естественно, – самый мелкий.

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

   Метки и

   Могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

   Выравнивание заголовка

   по центру

   Образец абзаца с выравниванием

   Слышали про html? Или, может быть, слышали об html страницах в Интернете? На самом деле, все просто. HTML – это, упрощенно говоря, один из языков программирования, и не самый сложный из них.

   HTML – сокращение от HyperText Markup Language, что переводится как язык гипертекстовой разметки.
   Содержание:

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

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

   По сути, html – это изнанка страниц многих сайтов. Часто их красивое оформление создается с помощью языка разметки html. Иначе это еще называют создание страниц с помощью html верстки.

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

   Ученый из Британии Тим Бернерс Ли разработал язык html в 1986-1991 годах в Швейцарии. По сути html позволяет создавать простые, но при этом красивые документы. Уже позже в html были добавлены мультимедийные возможности (видео и т.п.) и поддержка работы с гипертекстом (для создания гиперссылок).

   Для работы с html были созданы всем известные программы-браузеры, они же , такие как:

   • Mozilla Firefox (Мозилла Фаерфокс),
   • Internet Explorer (Интернет Эксплорер),
   • Google Chrome (Гугл Хром),
   • Opera (Опера),
   • Яндекс (Yandex) браузер,
   • Safari (Сафари) и
   • другие.

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

   Что такое html страница?

   Документы, файлы, страницы, созданные на языке html, имеют расширение вида.html или.htm. Например, html-страница (или html-файл, или html-документ) может иметь название вида:

   • тест.html,
   • html,
   • html или
   • название.html.

   Строго говоря, тест.html – это имя файла (или имя страницы), где

   • тест – имя файла, а
   • .html – расширение имени файла (или расширение имени страницы), которое обычно просто называют «расширение».

   Сейчас более распространенным вариантом вместо слова «расширение» стало слово «формат». Поэтому выражение «формат html» означает, что файл (или страница) написан на языке html и имя такого файла имеет расширение html. Значит,

   файл c именем тест.html имеет формат html.

   Операционная система Windows по умолчанию скрывает расширения файлов (то есть, форматы файлов). Программисты сделали это «не со зла», а для того, чтобы уберечь пользователя от бездумного изменения расширений файлов. Можно сделать так, чтобы по умолчанию расширения файлов были открыты. В Windows 7 для этого:

   • кликаем по кнопке Пуск,
   • открываем Панель управления,
   • находим Параметры папок,
   • открываем вкладку Вид, прокручиваем в самый низ и
   • убираем галочку напротив опции «Скрывать расширения для зарегистрированных типов файлов»,
   • жмем «ОК».
   Рис. 1. Открываем все расширения файлов

   Если сейчас Вы поднимите глаза вверх и посмотрите в адресную строку своего браузера, то увидите там имя той страницы, которую сейчас читаете, а в конце имени стоит.html. Это пример html страницы блога, которая размещена в Интернете. Обычно у блога (у сайта) много html страниц. Например, каждая статья на этом блоге является отдельной html страницей.

   В Интернете также встречаются сайты-одностранички, состоящие всего из одной html страницы. Например, это может быть

   • интернет-визитка человека или фирмы, либо
   • страница, продающая через Интернет какой-либо товар или услугу.

   Язык HTML постоянно развивается и на сегодняшний день существует несколько его версий, начиная от HTML 2.0 от 22 сентября 1995 года и заканчивая последней версией языка HTML 5 от 28 октября 2014 года. В сентябре 2016 года планируется выпуск HTML 5.1.

   Что такое HTML теги?

   HTML – это язык разметки документов с помощью тегов. Теги заключаются в треугольные скобки “< >”. Теги могут быть парными и непарными.

   • Например, тег “b”, заключенный в треугольные скобки, делает текст жирным

   текст, выделенный жирным

   В результате получится так: текст, выделенный жирным

   • А тег “i” делает текст курсивным.

   текст, выделенный курсивом

   В результате получим: текст, выделенный курсивом

   • Есть еще тег для перевода строки “br”.
   • С помощью тега “a href” выделяют гиперссылку.
   • Тег для заголовка документа – . Это тег, открывающий документ. Он является парным в том смысле, что для него обязательно нужен закрывающий тег со слешем .
   • После заголовка идет основная часть, которая находится между открывающим тегом и закрывающим тегом . Этот тег так же, как тег head, является парным: его нужно открыть и не забыть закрыть.

   В парных тегах закрывающий тег со слешем необходим по той причине, что он отменяет (точнее, корректно завершает) действие открывающего тега.

   Тегов HTML существует много, в Интернете можно без труда найти учебники HTML.

   Как создать html файл

   Создать самостоятельно html страницу (или html файл) на своем компьютере и запустить свое творение в браузере очень просто.

   1) Открываем Блокнот (простой текстовый редактор, который входит в состав Windows). Его можно найти на своем компьютере, введя в строку Поиск запрос: Блокнот.

   2) Копируем и вставляем в Блокнот следующий текст:

   
   
   
   
   
   
   Привет! Это моя первая HTML страница.
   
   Вторая строка, ура!
   
   

   3) Важный момент, без которого html файл не будет работать: в Блокноте сохраняем файл строго(!) в формате html, как показано на скриншоте. Файл можно для простоты сохранить на Рабочем столе на своем компьютере.

   
   Рис. 2. Обращаем внимание на Тип файла и сохраняем файл в формате html

   1 на рис. 2 – Кликаем «Рабочий стол», чтобы там сохранить html файл.
   2 на рис. 3 – Открываем выпадающее меню напротив «Тип файла».
   3 – В этом меню выбираем «Все файлы».
   4 – вводим любое имя (у меня 001) и после точки обязательно(!) вводим html.
   5 на рис. 2 – жмем «Сохранить».

   4) На Рабочем столе находим файл 001.html:

   Рис. 3. Html файл на Рабочем столе

   У меня браузером по умолчанию является Google Chrome, поэтому значок у файла имеет вид значка этого браузера. Если будет другой браузер по умолчанию, то у файла 001.html будет другой значок.

   Кликаем по файлу (рис. 3) 2 раза мышкой и в итоге видим в браузере свою первую страницу на html:

   
   Рис. 4. Проверка, как выглядит html страница в браузере

   Таким образом, у нас получилась локальная страница html в том смысле, что она доступна только с вашего, локального компьютера. Чтобы страница была доступна другим, надо ее загрузить в Интернет. Точнее, разместить , который доступен всегда: 24/7/365 (24 часа в сутки, 7 дней в неделю, весь год). Тогда такую страницу сможет увидеть каждый пользователь Интернета.

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

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

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

   Что же такое HTML?

   HTML ("HyperText Markup Language" ) - это язык разметки гипертекста. Хорошо, определение классное, но что же это за разметка, и какого такого гипертекста? Ну давайте по порядку. Прежде всего в данном случае мы размечаем текст, который соответсвенно мы сначала печатаем, неважно где главное,что этот текст иметься у нас на компьютере. Что подразумевает собой разметка текста? Ну тут просто, это банальное его форматирование, как например тут:

   Хммм... почему я с краю? Зачем меня туда засунули, А?

   Ооо какой я ваажный, только немного жирный.

   Не жизнь а одна черная полоса

   1. И так далее.

   Это как раз и есть пример той самой разметки, с этим разобрались. А что же такого гипертекстового в нем в этом тексте и HTML? Ну начать нужно, наверное, с истории самого языка:

   Далеко-далеко в 1986 годах...

   Думали я пойду все это рассказывать? Хе-е... я лучше в конце поделюсь с вами ссылкой на материал, чтобы при желании вы могли более подробно ознакомиться с его историей. Статья не резиновая, а краткость сестра таланта... да-да.

   Почему же его называют язык гипертекстовый? Потому что позволяет связывать в единую сеть множество документов в сети интернет посредством гиперссылок. Думаю объяснять вам, что такое гиперссылки я не буду, вы же как-то перешли на мой блог нажав на подобную надпись .

   Продолжим...

   Что такое теги в HTML

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

   Все тэги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком ">".

   Как правило, все теги имеют 2 формата написания — открывающий тег : и закрывающий : . Различие в том, что в закрывающем имеется слэш «/».

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

   В HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат в себе текст, а являются метками, например, перенос строки выглядит так:
   .

   Итак, кратко мы осветили, что же такое HTML. Так как же вам начать изучать его? Для этого необходимо изучать и писать

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

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

   сайт Права на контент защищены.

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

   Основные сведения

   Начнем с определения. HTML-код - разметка любой веб-страницы, которая выполнена с помощью языка HTML.

   Данный код состоит из тэгов, благодаря которым браузер определяет, как выглядит та или иная страница. Структура его делится на две части: head - заголовок документа, в котором прописывается название страницы, а также информация о самом документе, и body - тело документа, в котором задаются параметры страницы.

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

   Тэги

   

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

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

   Парные состоят из открывающего тэга и закрывающего, при этом в последнем после левой угловой скобки стоит прямой сленш. Например: текст.

   Между двумя тэгами находится текст, таблица, картинка или иной элемент, который и отображается на веб-странице.

   Одиночные же состоят из одного тэга и не содержат в себе прямого слеша. Например:

   ---

   .

   Тэги могут иметь параметры, задать которые можно, используя специальные коды для HTML.

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

   Основные тэги

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

   • < body> - содержит основные параметры документа, такие как ссылок, поля и прочие;
   • < p> - обозначает абзац;
   • < b> - выделяет текст жирным;
   • < i> - курсив;
   • < u> - подчеркивает текст;
   • < s> - перечеркивает текст;
   • < sup> - задает текст как верхний индекс;
   • < sub> - нижний индекс;
   • < font> - задает парамерты шрифта: размер, шрифт, цвет;
   • < div> - с его помощью вы можете выровнять ваш текст;
   • < h>- тэг заголовков;
   • < a> - с его помощью задаются ссылки;
   • < table> - помогает вставить в документ таблицы, с ним связаны тэги < tr> (строка) и < td> (ячейка).

   

   Одиночные:

   • 
     - одиночный, переносит текст, следующий после него, на новую страницу;

   • ---

     - с его помощью можно вставить в текст горизонтальную черту.

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

   Параметры тэгов

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

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

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

   • face - задает вид шрифта;
   • size - задает размер;
   • color - задает цвет;
   • align - выравнивание;
   • name - имя;
   • href - с помощью данного параметра задается адрес ссылки;
   • alt - альтернативный текст;
   • width - ширина;
   • height - высота;
   • background - фоновый рисунок;
   • bgcolor - фон.

   Это далеко не все параметры, мы перечислили лишь наиболее употребляемые и известные.

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

   Таблица цветов

   

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

   Начинающим веб-мастерам следует знать, что есть специальные таблицы цветов, в которых даются коды каждого оттенка. Есть всего 16 базовых цветов, которые можно задавать не только с помощью таблицы, но и просто указывая их название на английском языке. Также к ним можно добавлять слова светло- и темно-, задавая нужный оттенок.

   Также есть которая насчитывает 216 всевозможных оттеков.

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

   Данный код достаточно скопировать и подставить в параметры нужного вам тэга.

   Как посмотреть код страницы

   

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

   Но как это сделать? Есть два способа, довольно простых и понятных. Первый - открыть нужную вам страницу и нажать сочетание клавиш Ctrl+U. В новом окне появится исходный код страницы, который вы сможете посмотреть и изучить.

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

   Отметим, что, читая код, вы также сможете просматривать комментарии к нему, прописываемые в тэге «Комментарий», который выглядит так: . При этом сам комментарий пишется после восклицательного знака. В браузере он не отображается. А пишется, в основном, для того, чтобы другие программисты и веб-дизайнеры смогли понять, что за блок информации находится ниже, зачем был указан тот или иной кусочек кода.

   Выводы

   

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

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

   Что такое HTML и для чего он предназначен - 3.7 out of 5 based on 3 votes

   Прежде чем приступить к изучению , предлагаю рассмотреть, что такое html и для чего он предназначен.

   HTML расшифровывается как, Hyper Text Markup Language, что можно перевести как язык гипертекстовой разметки. При помощи данного языка создаются интернет страницы.

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

   И так каким же образом при помощи языка HTML мы можем редактировать текст? Дело в том, что язык ХТМЛ состоит из тэгов (tags). Каждый тэг определяет, каким образом будет выглядеть текст на вашей страничке.

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

   Поэтому сам код вы не видите, браузер на экран вашего монитора выводит уже готовый отформатированный текст и графику. Если же вы хотите увидеть сам html код и теги, с помощью которых происходит форматирование текста, который Вы сейчас читаете, то пройдите в вашем браузере Internet Explorer в пункт меню > вид и из раскрывающегося списка выберите пункт > источник. Смотрите на рисунок.

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

   Но на самом деле ХТМЛ теги могут не только форматировать текст, с помощью них вы можете вставлять изображение на страницу, создавать таблицы, создавать ссылки и многое другое.

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

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

   Каждый тег состоит из угловых скобок, < > внутри которых помещены определенные символы. Большинство из них состоят из открывающихся и закрывающихся.

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

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

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

   Для создания ХТМЛ страниц можно использовать специальные программы, такие как , а можно создавать страницы при помощи простого текстового редактора, который имеется в любой версии Windows.