1 что такое html. HTML - что это за расширение? HTML для начинающих: коды, файлы и редакторы

Термин 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 легко?

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

   Давайте приступим к изучению этой увлекательной, и одновременно простой, технологии.

   Немного теории…

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

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

   Но что такое тег в HMTL?

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

   Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂

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

   • и закрывающий
   • и закрывающий
   • и закрывающий

   Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:

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

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

   Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…

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

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

   Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:

   Правильный HTML КОД

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

   ОШИБКА В HTML КОДЕ

   Так закрывать теги категорически запрещается !

   Практика, чтобы понять что такое HTML…

   Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++ . В данном редакторе есть все возможности для создания и редактирования HTML страниц.

   Начнем. После открытия программы вы увидите такое окошко:

   Чтобы создать HTML страницу, необходимо ввести "тело" страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам.

   Итак, у вас должно получиться следующее:

   Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это 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 - что это за расширение? Но ведь не все являются веб-программистами. Наверняка есть люди, не готовые пока дать правильный ответ на такой вопрос. Поэтому рассмотрим связанные с этим понятия, так сказать, с азов.

   HTML - что это?

   HTML (Hypertext Markup Language, язык разметки гипертекста) — это общепринятый язык для разметки интернет-документов (а не язык программирования!). При помощи него формируются практически все веб-страницы. Последние отличаются от обычных документов, содержащих текст, другие элементы (изображения, таблицы), тем, что содержат специальные дескрипторы (тэги), которые необходимы, чтобы текст был понятен любому браузеру. HTML-расширение (или HTM) является признаком того, что файл принадлежит к разряду веб-документов.

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

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

   Из истории стандартов языка разметки

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

   До 1990 года вряд ли кто-нибудь в мире правильно ответил бы на вопрос: HTML - что это? Впервые документация по этому языку опубликована в 1991 году. Автор - физик Тим Бернерс-Ли - придумал его как инструмент, позволяющий превращать набор символов, передаваемый по сети, в заголовки, ссылки и абзацы. Вскоре этот язык стал стандартным для разметки документов в Интернете.

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

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

   

   Она четко регламентирована и должна содержать несколько обязательных тэгов. К таковым относятся:

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

   

   Тэги, которые полезно знать

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

   • - для выделения абзаца.
   • 
     текст
     - для переноса текста на следующую строку.
   • выделение жирным - для выделения полужирным шрифтом.
   • прописью -для выделения текста прописью.
   • анкор - для вставки любого анкора - слова или объекта, инициирующего переход по ссылке, заданной в тэге. Вместо слова "анкор" пишете «ЗДЕСЬ» или вводите любое другое слово, фразу, объект; вместо слова "ссылка" вставляете адрес в Интернете, куда ведёт ссылка.

   • Заголовок

     - для выделения заголовка первого уровня.

   • Подзаголовок

     - то же для заголовка 2-го уровня и т. д. до шестого уровня.

   Как создать HTML-файл в обычном редакторе

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

   

   Редакторы HTML

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

   Для новичка лучше сначала испытать свои силы, пользуясь свободно распространяемыми редакторами. К наиболее популярным из них можно отнести Notepad++, Komodo Edit, Aptana, Alaborn iStyle и KompoZer. Каждая из этих программ обладает своими преимуществами, предоставляет пользователю большие или меньшие функциональные возможности, имеет свой интерфейс. Для выбора подходящей именно вам надо попробовать работать в каждой из них. Это легко осуществимо, поскольку за эти попытки не надо платить.

   

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

   Ознакомление с материалом этой статьи, надеемся, позволит даже начинающему пользователю не сомневаться в ответе на вопрос: HTML - что это?

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

   Что такое HTML?

   HTML расшифровывается, как язык разметки гипертекста (от англ. HyperText Markup Language). Данный язык отвечает за то, как именно будет отображаться гипертекст на страницах сайта. Теперь давайте разберемся, что же такое гипертекст? Не секрет, что отдельная веб-страница может содержать много разнотипной информации, будь то текст, какие-то таблицы, графики, видеоролики, аудио и т.д. Так вот, всю эту информацию можно назвать одним словом — гипертекст.

   Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html или .htm и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.

   Теперь давайте разберемся как же браузер понимает, что и каким образом отображать на веб-странице? Это очень просто. Язык разметки гипертекста HTML имеет встроенные команды, их называют тегами. Именно по ним браузер и ориентируются.

   Структура документа HTML

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

   ...

   Разберем по порядку, что входит в данную структуру:

   1. Первое, что идет в документе HTML — указание версии (первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.

   3. Затем идет область для верхней части сайта (шапки). Для этого служит тег . В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами . Далее указывается кодировка HTML документа (пятая строка). Это делается для правильно отображения кириллицы. Закрываем область шапки тегом .

   4. Мета-тег «description» — краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.

   5. Мета-тег «keywords» — ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.

   6. Тело страницы открывается тегом и закрывается, соответственно, тегом . В теле веб-страницы размещается, как правило, основной контент — текст, видео, аудио и другая информация.

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