В настоящее время любой веб-программист уверенно ответит на вопрос: 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 и для чего он предназначен - 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.

Приветствую вас на своем блоге о веб-технологиях. Сегодня я хотел бы написать статью для тех, кто является новичками в сфере сайтостроения. В частности, о языке html . Что это такое и для чего оно нужно? Я попытаюсь объяснить вам максимально подробно.
Содержание статьи

Официальное определение

Я считаю, что лучше Википедии сформулировать определение не смогу, поэтому:
Цитата

HTML (от англ. HyperText Markup Language - «язык гипертекстовой разметки») - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML).

А теперь я попытаюсь вам это издалека объяснить. Все в нашей жизни из чего-то состоит. Дом из строительных материалов, воздух – из таких элементов, как азот, кислород, углекислый газ и другие. А у нас, значится, веб-страницы (например, сейчас вы находитесь на такой странице). И они тоже из чего-то должны состоять, не так ли? Так вот, это что-то и является языком html. Правда, не он один формирует страницу, но об этом уже далее по ходу статьи.

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

Итак, html – это специальный язык, с помощью которого создаются веб-странички, из которых собственно состоит весь интернет. Он является строительным материалом для страниц. На английском аббревиатуре расшифровывается так: HyperText Markup Language .

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

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

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

Html формат – что это такое и чем его открыть

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

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

Статический файл также можно легко открыть в любом веб-обозревателе, но если он содержит расширение php, то только на виртуальном или локальном сервере.

Из чего состоит html

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

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

Как пишутся теги

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

Содержимое тега

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

Например, тег img отвечает за вставку картинки на веб-страницу. Согласитесь, в изображение не нужно вписывать дополнительно никакую информацию, все необходимое задается в атрибутах. В нашем случае атрибут src задает путь к изображению.

Ну а первый пример – это парный тег p . Он отвечает за вывод абзаца (paragraph ). Тут мы видим закрывающую часть, она показывает, что в этом месте абзац нужно закончить. Также есть содержимое, что логично. Не может же абзац быть пустым, без текста? Весь нужный текст записывается между открывающей и закрывающей частями.

Вот таким вот образом работают в html все теги. Конечно, все я описывать не буду, ведь их несколько десятков (самых основных). Например, за вывод крупного заголовка отвечает тег h1 , за создание таблицы – table , нумерованного списка – ol . ().

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

Атрибуты тегов

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

<тег имя атрибута="значение атрибута">

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

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

Второй пример: атрибутом charset определяем кодировку страницы как utf-8 .

Третий: записываем абзацу атрибут class = "two" , который привязывает к нему стилевой класс с указанным именем (имя может быть произвольным) и теперь в каскадных таблицах стилей (css) мы можем обратиться к этому элементу и оформить его.

Итог

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

А зачем это мне?

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

Начну, пожалуй, с начала..

HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.

Теперь о командах - их называют дескрипторами, но чаще - тегами.

Вернемся к нашей первой страничке.. итак мы написали:

Привет мир!!!

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

Так что же мы написали? и как это читает браузер?

Мысли браузера:

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

1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий

Хотя есть и исключения как например у нас тег
- он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")

2) Все документы должны иметь вот такой шаблон кода:

Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..

3) О порядке:

Открывающий и закрывающий тег по типу <…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:

Если писать, например, так:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание

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

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

При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!

При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:






Привет мир!!!

Меня зовут Карлсон, это моя первая страничка!



Значительно легче, чем так:






Привет мир!!!

Меня зовут Карлсон, это моя первая страничка!



И уж тем более чем вот так:

Привет мир!!!
Меня зовут Карлсон, это моя первая страничка!

Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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