Всемирная паутина соткана из web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о «Программировании (именно с большой буквы) на HTML», HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.
Структура HTML-документа
M в аббревиатуре HTML означает «mark up» – размечать.
Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «<» и «>».
Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.
Отмечают же его для того, чтобы браузер показывал текст на экране в заданном тегами виде.
Закрывающий тег отличается от открывающего наличием косой черты «/».
Некоторые теги имеют атрибуты, которые уточняют правило отображения содержимого. Атрибуты могут указываться только в открывающем теге.
Естественно, нельзя обойтись без комментариев. Они служат для удобства разработчика, для пояснений. Комментарии не обрабатываются браузером и не отображаются, но они загружаются вместе со всем документом и влияют на время загрузки. Поэтому, добавляя комментарии, надо придерживаться «золотой середины».
Комментарии заключаются между фрагментами <!— и —> и могут занимать несколько строк.
Общий вид HTML-документа:
<!DOCTYPE html> <html> <head> Заголовок HTML-документа (не отображается на экране) </head> <body> Тело HTML-документа (отображается на экране) <!-- Это комментарий для внесения пояснений в HTML-документ --> </body> </html>
<!DOCTYPE html>
Первый тег <!DOCTYPE> – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.
подробнее о !DOCTYPE…
Информация в заголовке <head>
Контейнер <head> содержит информацию для браузеров и поисковых систем.
подробнее об информации в контейнере <head>…
htmlweb.ru
Это статья из цикла «Что такое?». В ней вы узнаете, что такое html. Те, кто знаком с этим термином – можете не читать эту статью.
С каждым годом число пользователей интернет увеличивается минимум 10-20 миллионов человек. Всего, по различным данным, так или иначе, интернетом пользуются более 2 миллиарда человек. Как же сделать так, чтобы пользователь из Новой Зеландии и Норильска при отображении сайта «www.domain.com» видел одну и ту же картинку? Ответ прост: необходим единый язык, понимаемый различными компьютерами. В качестве такого языка в данный момент выступает HTML.
HTML (HyperText Markup Language) — язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не для того. HTML дает возможность производить переход от одной части текста к другой, и, что замечательно, эти части могут храниться на совершенно разных компьютерах.
HTML не стоит путать с языками программирования, он создан специально для разметки вэб-страниц. Именно язык разметки дает браузеру необходимые инструкции о том, как отображать тексты и другие элементы страницы на мониторе. Важно заметить, что не только различные браузеры, но и различные их версии могут по-разному воспринимать и отображать на экране код. Следовательно, некоторые элементы корректно выглядящие в браузере Operа могут выглядеть иначе в Internet Explorer и других браузерах.
При верстке (грубо говоря, создании страниц) HTML-страниц это необходимо помнить, и просматривать их в самых популярных браузерах типа Mozilla Firefox, Internet Explorer и Operа.
Код разметки в HTML состоит из так называемых «тегов». Теги предоставляют информацию браузерам о форматировании и разметке страницы. Название тега заключается в угловые скобки «<» и «>». Некоторые тэги бывают открывающимися и закрывающимися, например, тег b, который делает текст жирным.
Они влияют на отображение содержимого, находящегося в нем. Данные, находящиеся между такими символами, называются содержимым тега. Иногда встречаются теги, являющиеся одновременно и закрывающими и открывающими, например hr — линия.
Чтобы писать на HTML надо его просто знать. Однако, учитывая огромную популярность Интернета, и огромное количество пользователей, желающих сделать свои странички, было создано множество редакторов, упрощающих работу с кодом. Один из самых простых из них – это FrontPage, входящий в пакет Microsoft Office. Это программное обеспечение (ПО) достаточно просто в обращении. И все же FrontPage имеет ряд существенных минусов: засоряет страницы (до 70% лишнего кода), снижает быстродействие, имеет ограниченные возможности дизайна.
Более продвинутые редакторы – HomeSite и DreamWeaver. Они помогут создать как сайт-визитку, так и настоящий шедевр современного искусства. К минусам этого ПО можно отнести: долгую обработку массивного кода и небольшое засорение кода лишними тегами. Требуется знание HTML в этом случае на порядок-два выше, чем при работе с FrontPage.
Наконец, высший пилотаж – это написание страниц в Блокноте. Работает быстро и легко. Некоторые веб-мастера (особенно старой закалки) работают с ним. Большинство же предпочитают ПО уровня DreamWeaver и выше.
Для работы с html страницами я использую программу PHP Desigber 2008, также неплохой программой – редактором является Notepad ++.
Моя персональная рекомендация всем: учите html. Это очень простой «язык» и изучить его можно в короткие сроки. Не обязательно в точности запоминать все теги, важно хотя бы понимать их назначение. Тогда можно легко форматировать текст и изменять html страницы.
Есть сайт, который мне постоянно помогал в изучении HTML — это сайт htmlbook.ru. На сайте есть полезный раздел — . С него и можно начать изучение.
Источник: Работа в интернете.
Постовой:
Нашел в блоге Записки Жука хорошую программу для авто. постинга в социальные закладки.
blogwork.ru
Основы языка HTML
HTML тэги — это ключевые слова, вписанные в треугольные скобки, например:
Где:
- <!DOCTYPE html> — задаёт тип документа, написанный в HTML и помогает браузерам правильно отображать содержание страницы.
- Текст заключённый в тёги <html> и </html> содержит всё содержание страницы.
- Текст заключённый в тёги <head> и </head> содержит основное описание страницы.
- Текст заключённый в тёги <title> и </title> отображает название страницы.
- Текст заключённый в тёги <body> и </body> является основным, видимым содержанием страницы.
- Текст заключённый в тёги <h1> и </h1> будет являться заглавием страницы.
- Текст заключённый в тёги <p> и </p> будет являться отдельным параграфом.
Такой код все браузеры выведут так, как показано на картинке справа.
Используя эту стандартную структуру, все браузеры будут отображать содержание страницы, а также задавать странице описание содержания и размечать параграфы. Все интернет страницы написанные на чистом языке HTML имеют расширения .htm или .html.
HTML тэги
Синтаксис или правила написания HTML очень просты. Как уже отмечалось, HTML тэги — это ключевые слова языка программирования, которые вписываются в треугольные скобки:
Где <tagname> — тот или иной тэг. Поэтому необходимо знать главные правила:
- В основном все тэги идут парами, например: <p> Текст или другое содержание страницы </p>.
- Первый тэг называется открывающим тэгом <p>, второй тэг называется закрывающим тэгом </p>.
- Закрывающий тэг — идентичный открывающему тэгу, но имеет лишь наклонную черту — «/»
Структура HTML страницы
Учитывая вышеизложенное, ниже представлена схема страницы в HTML:
- Внутри тэга <head> задаётся название страницы, описание, ссылки на оформление CSS и другие настройки.
- Внутри тэга <body> отображается в браузерах всё содержимое HTML страницы (выделено белой зоной). Оформление страниц также осуществляется через специальные тэги HTML. Как это делается, читайте в другихьстатьях посвящённых данной тематике. Но более предпочтительный вариант оформления страниц осуществляется через CSS.
Версии HTML
Начиная с первых дней появления HTML и с развитием интернет технологий, браузеров, в язык HTML вносились дополнения, улучшения, чтобы возможно было правильно вносить в содержание страниц различный контент — музыка, картинки, видео и др., как с точки зрения программирования, так и для понимания содержания страниц поисковыми системами. Ниже таблица с появлением разных версий HTML:
| История версий HTML | |
|---|---|
| Год | Версия HTML |
| 1991 | HTML |
| 1995 | HTML 2.0 |
| 1997 | HTML 3.2 |
| 1999 | HTML 4.01 |
| 2000 | XHTML |
| 2014 | HTML5 |
Заключение
Сегодня существую много различных редакторов, для создания интернет страниц, которые имеют набор инструментов для управления содержанием на странице, в то время как HTML формируется автоматический, однако знание HTML помогает в дальнейшем более глубоко понимать другие языки программирования и аспекты создание сайтов с точки зрения оптимизации сайта для поисковых систем.
Если есть какие-либо вопросы по данной теме или есть жаление просто принять участие в обсуждении создания сайтов на HTML, то это можно сделать в теме про HTML на нашем форуме.
ru.wikijournal.org
Далее. Следующие уроки по HTML.
Для того, чтобы понять что такое HTML и зачем он нужен, давайте откроем любую страницу в браузере и посмотрим на ее исходный код.
Например, я открою страницу поисковой системы Яндекс.
Вся графика и текст, которую вы видите на странице, формируется при помощи HTML-кода.
HTML – это связующее звено между веб-страницей и дополнительными технологиями, которые на ней будут использоваться.
По сути, все команды языка HTML, которые вы видите на изображении выше, это обычный текст, который может быть написан в любом текстовом редакторе. Изменив у текстового файла расширение на *.html (как это сделать мы поговорим позже) мы получаем полноценную веб-страницу, которую может обрабатывать браузер.
Теперь давайте разберемся с самим определением и рассмотрим, что оно означает.
HTML – это аббревиатура, которая расшифровывается как HyperText Markup Language или в переводе на русский язык «Язык Разметки Гипертекста».
Чтобы понять, что все это значит, давайте разберем каждое слово в этой аббревиатуре отдельно.
Язык.
HTML – в первую очередь, это язык с помощью которого можно сообщить браузеру информацию о том какие элементы есть на веб-странице и какую смысловую нагрузку они несут.
Как у любого языка, в HTML есть слова (команды) и правила написания этих слов (синтаксис языка).
Разметка.
Прошу обратить внимание, что основная задача HTML – это сообщить браузеру о смысловой нагрузке, которую несут элементы на веб-странице.
HTML код позволяет «разметить» веб-страницу на отдельные элементы и сообщить браузеру какой элемент чем является.
Например, такая форма записи:
<p>Абзац</p>
Сообщает браузеру о том, что он имеет дело с абзацем.
А такая форма записи:
<h1>Заголовок</h1>
Говорит о том, что элемент является заголовком.
Из этого следует, что HTML не отвечает за внешний вид и оформление документа.
Чтобы убедиться в этом, давайте для примера возьмем одну веб-страницу и отключим на ней стили, которые отвечают за оформление и посмотрим, как она преобразится.
Страница со стилями оформления:
Та же самая страница, но с отключенными стилями (используется только один HTML-код):
Также HTML – это не язык программирования и не отвечает за выполнение логических и программных операций на странице и обработку данных. В этом можно легко убедиться, если вы отключите поддержку клиентского языка веб-программирования в браузере.
Часто новички забывают это правило и пытаются с помощью HTML заставить элемент отображаться тем или иным образом или заставить с помощью HTML выполнять какие-то действия на странице, но это не правильно. За каждое действие над элементом отвечают свои технологии.
Гипертекст.
И, наконец, последнее слово в определении языка HTML – это гиперссылка. На веб-страницах есть элемент, который делает эти страницы особенными и отличает их от обычного текста с картинками. Этот элемент — ссылки.
Ссылка – это такой элемент на странице, который делает возможным открытие другой части текущей страницы или совершенно другой страницы при клике по нему.
Приставка «гипер» означает то, что при клике на ссылку может открываться другой ресурс (страница) в сети интернет, который может располагаться на другом сервере.
HTML – это язык, который разрабатывался специально для того, чтобы создавать страницы, которые содержат гиперссылки.
Подводя итог можно сказать, что HTML – это язык, который создавался для того, чтобы помочь браузеру понять из каких частей состоит веб-страница, и какую смысловую нагрузку эти элементы несут.
Пока с теорией все. Переходим к следующему практическому шагу. Сейчас наша задача подготовить программы, которыми будем пользоваться для работы с HTML.
Далее. Следующие уроки по HTML.
webgyry.info
Немного теории…
Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль.
Это похоже на большую стену из кирпичиков. Если все кирпичики на ней положены аккуратно, то и вся стена выглядит красиво. Поэтому при написании структуры страницы необходимо уделять внимание каждому тегу, потому что он является "кирпичиком" для нашей будущей страницы.
Но что такое тег в HMTL?
Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже:
Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? ?
Из этой структуры можно увидеть те теги, которые должны обязательно присутствовать. Это теги:
- <html> и закрывающий </html>
- <head> и закрывающий </head>
- <body> и закрывающий </body>
Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:
Все, что мы будем писать между тегами <head> и </head> мы не увидим на нашей странице. Эти теги могут сообщать браузеру о кодировке, о заголовке нашей страницы, здесь могут подключить различные стили, скрипты и так далее. Все это Вы увидите в последующих уроках.
А вот все теги, которые мы будем писать между тегами <body> и </body>, в зависимости от его предназначения, будет влиять именно на структуру нашей HTML страницы.
Ну что, стало более понятно что такое HTML? ? Но мы не останавливаемся и движемся дальше…
Некоторые теги могут иметь закрывающий тег, а некоторые нет. Например тега <body> есть закрывающий тег </body>. Как Вы могли уже догадаться, закрываются теги с помощью наклонной черты.
Очень важно соблюдать открытие и закрытие тегов. Чтобы не было ошибок. Браузер ошибку может и не показать, а вот структура Вашей страниц будет неправильной и при дальнейшей работе со стилями (где займемся внешним видом) будут большие проблемы. Поэтому если у тега есть закрывающий тег, то он обязательно должен присутствовать в правильном месте.
Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:
То, что Вы видите выше — это правильный порядок написания закрывающих тегов. Но может быть такая ситуация
Так закрывать теги категорически запрещается!
Практика, чтобы понять что такое HTML…
Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++. В данном редакторе есть все возможности для создания и редактирования HTML страниц.
Начнем. После открытия программы вы увидите такое окошко:
Чтобы создать HTML страницу, необходимо ввести "тело" страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам.
Итак, у вас должно получиться следующее:
Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.
Сейчас можно открыть этот файл в любом браузере. И если Вы в своем браузере увидели такую вот картину:
То необходимо дописать после закрывающего тега </title> вот такую строчку:
И убедиться в том, что в текстовом редакторе выбрана кодировка UTF-8 (без BOM):
И тогда Вы увидите следующую страничку в своем браузере:
Видео урок — что такое HTML? (практика)
Если при прочтении Вам было тяжело, то посмотрите данный видео урок:
Вывод
Замечательно, у нас получилась первая HMTL страничка. Если же что-то пошло не так, то обязательно повторите все шаги и убедитесь в том, что Вы все сделали точно также. Теперь у Вас сложилось первое впечатление о HTML и что это такое.
Понравилась статья — расскажи друзьям! 🙂
www.sitehere.ru
Официальное определение
Я считаю, что лучше Википедии сформулировать определение не смогу, поэтому:
Цитата
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML).
А теперь я попытаюсь вам это издалека объяснить. Все в нашей жизни из чего-то состоит. Дом из строительных материалов, воздух – из таких элементов, как азот, кислород, углекислый газ и другие. А у нас, значится, веб-страницы (например, сейчас вы находитесь на такой странице). И они тоже из чего-то должны состоять, не так ли? Так вот, это что-то и является языком html. Правда, не он один формирует страницу, но об этом уже далее по ходу статьи.
Немного теории
Итак, html – это специальный язык, с помощью которого создаются веб-странички, из которых собственно состоит весь интернет. Он является строительным материалом для страниц. На английском аббревиатуре расшифровывается так: HyperText Markup Language.
Почему гипертекст? Все просто, он отличается от обычного текста тем, что по ходу чтения информации в интернете вы можете спокойно нажать на другие ссылки и перейти на другие страницы, а при обычном чтении книги или текстового документа вы так сделать не можете.
Ну и еще надо разобраться со словом разметка, чтобы стало еще понятней. Наверняка вы в своей жизни не раз играли в какую-нибудь спортивную игру, вроде волейбола или футбола. Тогда вы прекрасно должны знать, что площадка для игры имеет свою разметку.
Например, в футболе есть боковые и лицевые линии, штрафная и вратарская зоны, центральный круг, угловые флажки и т.д. Так вот, html отвечает за разметку веб-странички, за ее структуру. Это можно сравнить со скелетом человека или каркасом здания.
Html формат – что это такое и чем его открыть
Итак, документы, содержащие команды на языке html, имеют одноименный формат. Это статические странички, на которых можно разместить какую-то информацию. Если в них добавляют язык php, то расширение документа изменяется на php, но при этом в нем по-прежнему могут находиться html-теги.
Открываются такие файлы с помощью любого текстового редакторе. Лучше при этом использовать специальный софт, в котором будет поддержка синтаксисов языков, подсветка символов и т.д. (смотрите статью «чем открыть html файл»).
Статический файл также можно легко открыть в любом веб-обозревателе, но если он содержит расширение php, то только на виртуальном или локальном сервере.
Из чего состоит html
Синтаксисом, как правило, называют правила написания кода на различных языках. Html полностью состоит из тегов и их атрибутов, а также непосредственного содержимого. Таким образом, изучение языка заключается в изучении роли основных тегов и атрибутов.
Как вообще, по вашему формируется информация на веб-странице? Например, хотите вы написать статью и выделить какие-то слова как заголовок? Как браузер поймет это? С помощью html тегов, конечно же, потому что он умеет их распознавать и понимать.
Как пишутся теги
Тег пишется так: его имя заключается в угловые скобки, а зависимости от ситуации ему дописываются атрибуты и содержимое. Примеры:
<p class = “red”>Содержимое тега</p> <img src = “image.jpg”>
Теги бывают парными и одинарными. В данном случае я как раз привел вам пример как парного, так и одинарного. Суть в том, что одинарный не имеет закрывающей части (</>), а еще в нем не нужно писать содержимое.
Например, тег img отвечает за вставку картинки на веб-страницу. Согласитесь, в изображение не нужно вписывать дополнительно никакую информацию, все необходимое задается в атрибутах. В нашем случае атрибут src задает путь к изображению.
Ну а первый пример – это парный тег p. Он отвечает за вывод абзаца (paragraph). Тут мы видим закрывающую часть, она показывает, что в этом месте абзац нужно закончить. Также есть содержимое, что логично. Не может же абзац быть пустым, без текста? Весь нужный текст записывается между открывающей и закрывающей частями.
Вот таким вот образом работают в html все теги. Конечно, все я описывать не буду, ведь их несколько десятков (самых основных). Например, за вывод крупного заголовка отвечает тег h1, за создание таблицы – table, нумерованного списка – ol. (смотрите здесь).
Все их описывать ни к чему, вы сможете самостоятельно их выучить, если возникнет желание получше разобраться.
Атрибуты тегов
Атрибуты, это дополнительные команды, которые применяются к тегам. Все они пишутся только в открывающей части тега и записываются по такому принципу:
<тег имя атрибута = “значение атрибута”></тег>
Таким образом, мало просто знать теги, нужно еще и уметь записывать для них различные атрибуты. Примеры:
<a href = “http://site.ru” target = “_blank”></a> <meta charset = “utf-8”> <p class = “two”></p>
В первой строчке кода мы с помощью тега a создали ссылку и для нее прописали такие атрибуты: href – путь, по которому нужно перейти, target – специальная команда, которая определяет, нужно ли открывать ссылку в новом окне, а значение _blank как раз это и делает. Как видите, атрибуты записываются через пробел, а их значения в двойных кавычках.
Второй пример: атрибутом charset определяем кодировку страницы как utf-8.
Третий: записываем абзацу атрибут class = "two", который привязывает к нему стилевой класс с указанным именем (имя может быть произвольным) и теперь в каскадных таблицах стилей (css) мы можем обратиться к этому элементу и оформить его.
Итог
Целью этой статьи было донести до вас, что собой представляет html, для какой цели он нужен и из каких элементов он состоит. На самом деле это одна из самых простых веб-технологий, с которой можно разобраться буквально за пару недель. Как изучить этот язык я написал в этой статье, советую вам почитать, если интересно. На этом я буду заканчивать, а вам рекомендую не бояться начинать изучение, если вы сомневаетесь.
А зачем это мне?
Опять же, может быть, вам это и не нужно. Сегодня в любой системе управления сайтами встроены визуальные редакторы, где вы можете абсолютно без проблем оформить текст так, как нужно. Изучение же html позволит вам лучше разобраться с тем, как это все работает, а также при необходимости самостоятельно вносить правки на свои веб-страницы, изменяя их структуру и внешний вид.
dolinacoda.ru