Html что это такое – Основы HTML

Содержание

HTML5 — Википедия

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году[1][2] (предыдущая, четвёртая, версия опубликована в 1999 году[3]), уже с 2013 года[4] браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений

[5].

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5

[5]. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами[6].

WHATWG начал работу над новым стандартом в 2004 году[7], когда World Wide Web Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года[8]. В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истёк, и решил не возобновлять его. Впоследствии W3C и WHATWG совместно разрабатывали HTML5[9].

Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 года. После этого глава компании Apple Inc. Стив Джобс[10][11]

[12][13] написал публичное письмо, заголовок которого гласил: «мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash[14]. По этому поводу вспыхивали дебаты в кругу веб-разработчиков, причём некоторые намекали, что, хотя HTML5 и обеспечивает расширенную функциональность, разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash[15].

Процесс стандартизации[править | править код]

WHATWG начал работу над спецификацией в июне 2004 года под названием Web Applications 1.0[16]. С января 2011 года спецификация в Draft Standard (Стандартизация проекта) утверждается в WHATWG, Working Draft (рабочий проект) утверждается в W3C. Ян Хиксон из компании Google является редактором спецификации HTML5

[17].

Спецификация HTML5 была принята в качестве точки начала работы над новым HTML рабочей группой W3C в 2007 году. Эта рабочая группа опубликовала спецификацию как первый публичный рабочий проект (working draft) 22 января 2008 года[18]. Рабочий проект — это текущая работа, она оставалась на несколько лет, её части HTML5 были закончены и реализованы в браузерах до того момента, когда вся спецификация достигла финального статуса «Рекомендовано»[19].

Ян Хиксон ожидал достижения Candidate Recommendation в течение 2012 года[19].

Чтобы спецификация получила статус W3C Рекомендации, необходимы две законченные на 100 % и полностью взаимодействующие реализации[19].

В интервью TechRepublic Хиксон предполагал, что это случится в 2012 году или позже

[20][21]. Однако многие части спецификации были стабильны и могли быть реализованы в продуктах:

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

— WHAT Working Group, Когда HTML5 будет закончен?[19], FAQ

В декабре 2009 года WHATWG переключилась на универсальную модель разработки для спецификации HTML5[22]. W3C всё ещё продолжала публиковать снимки со спецификацией HTML5[23].

14 февраля 2011 года W3C увеличил срок работы для рабочей группы HTML с промежуточными снимками для HTML5. Рабочая группа предполагала продвинуть HTML5 в Last Call, приглашая сообщества к сотрудничеству с W3C, чтобы подтвердить техническое отсутствие дефектов в спецификации в мае 2011 года. Затем группа переключилась на тестирование своей реализации. W3C также разрабатывала всестороннюю проверку, чтобы добиться широкой функциональной совместимости для финальной спецификации 2014 года — ожидаемой даты для Рекомендации

[24].

«Даже как инновационное продолжение, продвижение HTML5 в «Рекомендации» обеспечивает всю веб-экосистему стабильным, проверенным и взаимодействующим стандартом. Решение наметить внедрение HTML5 в Last Call в мае 2011 года было важным шагом для урегулирования производственных ожиданий. Сегодня мы сделали следующий шаг, объявив о намерении осуществления цели с получением рекомендации к 2014 году.»

— Джеф Джэйф, Генеральный директор W3C[24]

С 28 октября 2014 года W3C официально рекомендует использовать HTML5 — это значит, что стандарт окончательно финализирован и готов к широкому использованию.[2]

План выпуска новых версий стандартов[править | править код]

2012 2013 2014 2015 2016 2017 2018
HTML 5.0[36][37] Candidate Rec Call for Review Recommendation
HTML 5.1[38] 1st Working Draft Last Call Candidate Recommendation Recommendation
HTML 5.2[39] W3C First Public Working Draft Candidate Recommendation,
Recommendation
HTML 5.3[40] W3C First Public Working Draft

Разметка[править | править код]

HTML5[41][42][43] вводит несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных (<div>) и строчных (<span>) элементов, например,

<nav> (блок навигации по сайту), <footer> (обычно относится к нижней части страницы или последней строке HTML кода) или <audio> и <video> вместо <object>[44][45]. Некоторые устаревшие элементы, которые можно было использовать в HTML 4.01, были исключены, включая чисто оформительские элементы, такие как <font> и <center>, чьи эффекты выполняются с помощью каскадных таблиц стилей. Также в поведении гипертекстовых страниц снова заострено внимание на важности скриптов DOM (например, Javascript).

Синтаксис HTML5 больше не базируется на SGML, несмотря на подобие его разметки. Однако он был разработан обратно совместимым с обычным парсингом более старых версий HTML. В HTML5 применяется новая вводная строка, которая выглядит как объявление типа документа в SGML, <!DOCTYPE html>, запускающая соответствующий стандартам режим визуализации

[46]. С 5 января 2009 года HTML5 также включает в себя Web Forms 2.0, ранее бывшие отдельной спецификацией WHATWG.

Новые API[править | править код]

В дополнение к определению разметки HTML5 устанавливает API[5][47], который может быть использован с JavaScript. Возможности DOM расширены и фактически используемые свойства задокументированы. Также добавлены новые API, например:

HTML5 APIs and related technologies taxonomy and status
  • элемент холст для непосредственного метода рисования в 2D. См. спецификацию Canvas 2D API Specification 1.0
    [48]
    ;
  • контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео[49];
  • хранение данных в браузере[50];
  • File API: возможность загрузки документа через выбор (тег <input type="file">) или перетаскиванием (Drag-and-drop)
  • Drag-and-drop: предоставляет набор событий для каждого элемента DOM, таких как появление и нахождение в его зоне, благодаря которым разработчик может информировать пользователя о необходимых действиях и идентификаторе перетаскиваемого файла, содержащего адрес, имя, тип, размер и дату изменения;
  • управление историей браузера;
  • тип MIME и регистрация обработчика протокола;
  • микроданные.

Не все выше перечисленные технологии включены в спецификацию W3C HTML5, хотя они есть в спецификации WHATWG HTML[51]. Немного связанных технологий, которые не являются частью ни одной из спецификаций, следуют далее. W3C публикует спецификации для них отдельно.

  • геолокация;
  • база данных SQL для Web, внутренняя база данных (больше не поддерживаемая)[52];
  • Индексированная база данных (IndexedDB) API, индексирование по типу ключ-значение (прежде — WebSimpleDB)[53];
  • Файл API, дескриптор обновления файлов и управления ими[54];
  • Работа с системой. Этот API предназначен для того, чтобы обеспечить хранение информации со стороны клиента без управления базами данных[55];
  • Запись в файл, использование API для записи в файл информации из приложения[56].

XHTML5[править | править код]

XHTML5 — это XML-сериализация языка HTML5. Документы XML должны быть снабжены XML Internet media type, например, application/xhtml+xml или application/xml

[5]. XHTML5 требует строгого и правильно оформленного синтаксиса XML. Выбор между HTML5 и XHTML5 сводится к выбору типа MIME/содержимого: тип медиа, который будет выбран, определит, какой тип документа должен быть использован[57]. В XHTML5 doctype <html> необязателен и может быть просто пропущен[58]. HTML, который был написан, чтобы соответствовать техническим требованиям и HTML и XHTML — и который производит то же DOM дерево, разбирающее HTML или XML, — назван многоязычным[59].

Обработка ошибок[править | править код]

Спецификация HTML5 предъявляет требования как к юзер-агентам (браузерам), так и к документам. Документы могут содержать не всегда корректный синтаксис, но HTML5-совместимые браузеры, так же, как и их предшественники, применяют алгоритмы разбора ошибок разметки в документах для построения правильной объектной модели (DOM). Чёткое определение требований к юзер-агентам делается с целью достижения совместимости между браузерами разных производителей. Так же, как и требования к синтаксису разметки документов с целью корректного отображения их в различных браузерах

[60]. В старых версиях браузеров новые теги HTML5 просто игнорируются.

Отличия HTML5 от HTML4.01 и XHTML1.0[править | править код]

Ниже представлен список отличий:

  • Изменён синтаксис
  • Встраивание SVG и MathML в text/html
  • Новые элементы: <article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <main>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>, <video>, <wbr>[61]
  • Новые компоненты ввода: date/time, email, url, search, number, range, tel, color[62]
  • Новые атрибуты: charset (в <meta>), async (в script)
  • Глобальные атрибуты, которые могут быть применены ко всем элементам: id, tabindex, hidden, data-* (пользовательские атрибуты данных)
  • Элементы, которые будут исключены: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <isindex>, <noframes>, <strike>, <tt>

Полный список изменений в HTML5 представлен в обновляющемся рабочем проекте W3C «Отличия HTML5 от HTML4» (последняя версия от 9 декабря 2014 года)[5].

18 января 2011 года W3C ввёл логотип, чтобы представить использование или добавить интерес к HTML5. В отличие от других знаков, выпущенных ранее компанией W3C, он не подразумевает соответствие определённому стандарту. С 1 апреля 2011 года этот логотип считается официальным[63].

Во время первого показа его публике, W3C объявил логотип HTML5 как символ «универсальной визуальной идентификации данных для широкого набора открытых Веб-технологий, включая HTML, CSS, SVG, WOFF и другие»[64]. Некоторые защитники веб-стандартов, включая и The Web Standards Project, раскритиковали это определение HTML5 как обобщённое и размытое понятие[64]. Тремя днями позже W3C ответил на отзыв сообщества и изменил определение логотипа, убрав перечисление связанных технологий[65]. Затем W3C заявил, что логотип «представляет HTML5, краеугольный камень для современных Веб приложений»[63].

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>
         (Это title) Пример страницы на HTML5
      </title>
   </head>
   <body>
      <header>
         <hgroup>
            <h2>
               Заголовок "h2" из hgroup
            </h2>
            <h3>
               Заголовок "h3" из hgroup
            </h3>
         </hgroup>
      </header>
      <nav>
         <menu>
            <li>
               <a href="link1.html">
                  Первая ссылка из блока "nav"
               </a>
            </li>
            <li>
               <a href="link2.html">
                  Вторая ссылка из блока "nav"
               </a>
            </li>
         </menu>
      </nav>
      <section>
         <article>
            <h2>
               Заголовок статьи из блока "article"
            </h2>
            <p>
               Текст абзаца статьи из блока "article"
            </p>
            <details>
               <summary>
                  Блок "details", текст тега "summary"
               </summary>
               <p>
                  Абзац из блока "details"
               </p>
            </details>
         </article>
      </section>
      <footer>
         <time>
            Содержимое тега "time" блока "footer"
         </time>
         <p>
            Содержимое абзаца из блока "footer"
         </p>
      </footer>
   </body>
</html>
  1. ↑ HTML5 is a W3C Recommendation
  2. 1 2 Анонс HTML5
  3. ↑ HTML4.01 Specification
  4. ↑ W3C Working Draft 29 October 2013 (неопр.). Working Draft. World Wide Web Consortium (29 октября 2013 года).
  5. 1 2 3 4 5 HTML5 Differences from HTML4 (неопр.). World Wide Web Consortium (19 Октября 2010 года). Дата обращения 4 Декабря 2010 года. Архивировано 7 июня 2012 года.
  6. ↑ 1.9.2 Syntax Errors (неопр.). HTML5 (16 Ноября 2010 года). Дата обращения 4 Декабря 2010 года. Архивировано 7 июня 2012 года.
  7. ↑ A feature history of the modern Web Platform
  8. ↑ HTML 4 Errata (неопр.). World Wide Web Consortium. Дата обращения 4 Декабря 2010 года. Архивировано 7 июня 2012 года.
  9. ↑ Frequently Asked Questions (FAQ) About the Future of XHTML (неопр.). World Wide Web Consortium. Дата обращения 4 Декабря 2010 года. Архивировано 7 июня 2012 года.
  10. ↑ FOX News: No Flash on the iPhone? Apple’s Steve Jobs Finally Explains Why
  11. ↑ TIME: Steve Jobs: ‘Flash is No Longer Necessary’ and Other Musings
  12. ↑ CBS News: Steve Jobs: Why Apple Banned Flash
  13. ↑ FastCompany: Steve Jobs: Adobe’s Flash Is Old PC History, Open Web Is the Future
  14. ↑ «Thoughts on Flash», by Steve Jobs, CEO of Apple, Inc.
  15. ↑ Is HTML5 Replacing Flash?
  16. ↑ [whatwg] WHAT open mailing list announcement (неопр.). lists.whatwg.org Mailing Lists. Дата обращения 4 Марта 2010 года. Архивировано 7 июня 2012 года.
  17. ↑ HTML5: A vocabulary and associated APIs for HTML and XHTML (Editor’s Draft). (неопр.). World Wide Web Consortium. Дата обращения 12 Апреля 2010 года. Архивировано 7 июня 2012 года.
  18. ↑ HTML5: A vocabulary and associated APIs for HTML and XHTML. (неопр.). World Wide Web Consortium. Дата обращения 28 января 2009 года. Архивировано 7 июня 2012 года.
  19. 1 2 3 4 When Will HTML5 Be Finished? (неопр.). WHATWG. WHATWG Wiki. Дата обращения 10 Сентября 2009 года. Архивировано 7 июня 2012 года.
  20. ↑ HTML 5 Editor Ian Hickson discusses features, pain points, adoption rate, and more
  21. ↑ HTML 5 Editor Ian Hickson discusses the spec’s current status
  22. Ян Хиксон. WHATWG: Switching to an Unversioned Development Model (неопр.). Дата обращения 21 Января 2011 года. Архивировано 7 июня 2012 года.
  23. Ян Хиксон. HTML Is the New HTML5 (неопр.). Дата обращения 21 Января 2011 года. Архивировано 7 июня 2012 года.
  24. 1 2 W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5 Standard (неопр.). World Wide Web Consortium (14 Февраля 2011 года). Дата обращения 18 Февраля 2011 года. Архивировано 7 июня 2012 года.
  25. ↑ HTML5 W3C Recommendation
  26. ↑ Open Web Platform Milestone Achieved with HTML5 Recommendation
  27. ↑ Начало разработки версии 5.1 W3C
  28. ↑ HTML 5.1 W3C Working Draft 17 December 2012
  29. ↑ HTML 5.1 W3C Recommendation
  30. ↑ HTML 5.1 is a W3C Recommendation | W3C News
  31. ↑ HTML 5.1 2nd Edition is a W3C Recommendation | W3C News
  32. ↑ HTML 5.1 is the gold standard | W3C Blog
  33. ↑ HTML 5.2 W3C Recommendation
  34. ↑ HTML 5.2 is now a W3C Recommendation | W3C News
  35. ↑ HTML 5.2 is done, HTML 5.3 is coming | W3C Blog
  36. ↑ HTML Working Group Charter
  37. ↑ HTML Media Extensions Working Group Charter
  38. ↑ Web Platform Working Group Charter
  39. ↑ Web Platform Working Group Charter
  40. ↑ HTML 5.3 W3C First Public Working Draft, 14 December 2017
  41. ↑ Новые элементы в HTML 5
  42. ↑ Новые структурные теги HTML5
  43. ↑ Основы HTML5: Часть 1-4
  44. ↑ Introduction to HTML5 Video
  45. ↑ Введение в видео HTML5
  46. ↑ HTML5: Worth the Hype?
  47. ↑ Differences from HTML4 — APIs WHATWG.
  48. ↑ «HTML Canvas 2D Context». World Wide Web Consortium.
  49. ↑ Доступное видео в HTML5 с субтитрами на JavaScript (неопр.) (13 Января 2010 года). Архивировано 7 июня 2012 года.
  50. ↑ «Web Storage Specification». World Wide Web Consortium.
  51. ↑ HTML Standard
  52. ↑ «Web SQL Database». World Wide Web Consortium.
  53. ↑ «Indexed Database». World Wide Web Consortium.
  54. ↑ «File API». World Wide Web Consortium.
  55. ↑ «Filesystem API». World Wide Web Consortium.
  56. ↑ «File API: Writer». World Wide Web Consortium.
  57. ↑ Сергей Анатольевич Мавроди «Sergey’s HTML5 & CSS3 Quick Reference». Belisso Corp., 2010. ISBN 978-0-615-43321-9
  58. ↑ The XHTML syntax ― HTML5 (неопр.). WHATWG. Дата обращения 1 Сентября 2009 года. Архивировано 7 июня 2012 года.
  59. ↑ Polyglot Markup: HTML-Compatible XHTML Documents, W3C Working Draft 05 April 2011
  60. ↑ FAQ – WHATWG Wiki (неопр.). WHATWG. Дата обращения 2 декабря 2010. Архивировано 7 июня 2012 года.
  61. Б. Лоусон Р. Шарп. Изучаем HTML5. Библиотека специалиста / Перевод Т. Качковская, Е. Шикарева. — СПб.: Питер, 2011. — С. 272. — (Библиотека специалиста). — 2000 экз. — ISBN 978-5-459-00269-0.
  62. ↑ HTML5: The Markup Language Reference: Input Control (неопр.) (недоступная ссылка). World Wide Web Consortium. Дата обращения 17 Февраля 2011 года. Архивировано 16 августа 2011 года.
  63. 1 2 W3C HTML5 Logo FAQ (неопр.) (недоступная ссылка). World Wide Web Consortium. — «Is this W3C’s «official» logo for HTML5? Yes, as of 1 April 2011.». Дата обращения 21 Января 2011 года. Архивировано 14 августа 2011 года.
  64. 1 2 HTML5 Logo: Be Proud, But Don’t Muddy the Waters! (неопр.) (недоступная ссылка). The Web Standards Project. Дата обращения 22 Января 2011 года. Архивировано 10 августа 2011 года.
  65. ↑ The HTML5 Logo Conversation (неопр.) (недоступная ссылка). World Wide Web Consortium. Дата обращения 21 Января 2011 года. Архивировано 6 августа 2011 года.
  • Питер Лабберс, Брайан Олберс, Фрэнк Салим. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. — М.: «Вильямс», 2011. — С. 272. — ISBN 978-5-8459-1715-7.
  • Дженнифер Нидерст Роббинс. HTML5, CSS3 и JavaScript. Исчерпывающее руководство = Learning Web Design, 4th Edition / пер. англ. М.А. Райтман. — 4-е издание. — М.: «Эксмо», 2014. — С. 528. — ISBN 978-5-699-67603-3.
  • Стивен Хольцнер. HTML5 за 10 минут, 5-е издание = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. — М.: «Вильямс», 2011. — ISBN 978-5-8459-1745-4.
  • Арсений Мирный. HTML5 против Flash-видео // UP Special : журнал. — 2010. — № 5. — С. 42—45.

ru.wikipedia.org

Что такое язык HTML и для чего он нужен

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

И начнём мы их изучать с html.

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

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

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

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

Учиться мы будем при помощи редактора Notepad++, который Вам нужно установить на свой компьютер.

В этом редакторе файлов, можно написать код, и тут-же посмотреть, как отобразит его браузер. Очень удобно.

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

НТМL (HyperText Markup Language) дословно — язык разметки гипертекста. С помощью его создаются веб-страницы.

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

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

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

Код html состоит из следующих элементов:

1. Теги.

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

3. Значения атрибутов.

Давайте рассмотрим их по порядку.

Тег html — это основной элемент кода. Пишется он так:

<html></html>

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

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

Тег <html> сообщает браузеру, что это html-документ, и является основным (родительским) тегом для всех остальных элементов.

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

Например, если поставить в угловых скобках букву h2, то на экране выведется текст в виде заголовка.

<h2>Здравствуйте<h2>

То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.

Если в угловые скобки поставить букву p, то текст заключённый в тег, будет выведен в виде абзаца.

<p>Здравствуйте</p>

То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.

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

Более подробно, каждый из них, мы рассмотрим по ходу этого курса

Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. А в последнее время и того меньше, так как все функции атрибутов перенесены в css.

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

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

<h2 color></h2>

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

Это указание и будет значением атрибута. Выглядит оно так:

<h2 color=»#FF000D»></h2>

Это красный цвет.

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

Хотя, оформление всё больше переходит к CSS, а атрибуты оформления постепенно устаревают и выходят из практики.

Всё это мы рассмотрим далее по ходу курса, подробно и наглядно.

А сейчас делаем вывод из всего вышесказанного:

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

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

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

Полный список тегов и атрибутов html, если кому то интересно, всегда можно посмотреть в Шпаргалках. .

Хотя, если вы не собираетесь профессионально заниматься программированием, будет достаточно знать несколько (около десятка) основных тегов и несколько же атрибутов.

Ну, и всё, пожалуй. Мало? А больше пока и не надо. Остальное будем узнавать в процессе обучения на конкретных примерах.

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

Перемена

Только сядешь за учёбу — так обязательно какая-то падла разбудит!!!

В школе учитель говорит ученикам:
— Кто из вас окончательно считает себя тупицей? Встаньте.
После долгой паузы поднимается один ученик:
— Так ты считаешь себя тупицей?
— Ну не совсем, но как — то неловко, что вы стоите один.

Как сделать иконку для сайта — favicon < < < В раздел > > > Комментарии

Рекомендую: Готовые HTML шаблоны на русском

starper55plys.ru

Что такое HTML? (коротко о главном)

Источник изображения

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

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

Что представляет собой HTML?

Как уже упоминалось, HTML — это язык гипертекстовой разметки, с помощью которого наши коллеги верстальщики непосредственно создают структуру web-страниц (одной из разновидностей которых являются лендинги) и email-писем.

Если объяснить суть данного понятия простыми и наглядными образами, то можно сказать, что HTML — это тело, а CSS (Cascading Style Sheets — каскадные таблицы стилей) — одежда. В то время как CSS определяет внешний вид web-страницы, HTML формирует ее структуру (скелет) посредством заголовков, списков и других подобных элементов, начиная от начала страницы — хедера, и до ее конца — футера.

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

Основные функциональные понятия HTML

Как показано на примере HTML-кода, помещенного ниже, он всегда начинается с <!DOCTYPE html>. Для браузера появление этого элемента указывает на то, что ему следует отображать HTML-структуру:

<!DOCTYPE html>

<html>

<body>

<h2>Тут будет размещен заголовок</h2>

<p>А в этом месте будет первый абзац</p>

</body>

</html>

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

  • <body></body> — открывающий и закрывающий тэг, указывающий на начало и окончание той части страницы, в которой будет содержаться ее контент. На русский язык этот тэг переводится словом «тело»;
  • <h2></h2> — опять таки открывающий и закрывающий тэг, указывающий на начало и окончание заголовка. Всего таких тегов может быть 6, и отличаются они величиной шрифта — чем выше числовой порядок заголовка, тем меньшими буквами он будет отражаться. Вместе с тегом <p>, <h2> формирует структуру самого контента: в частности метки <p></p> определяют начало и конец абзацев текста.

Таким образом один за другим формируются разные элементы, которые впоследствии будут представлены на целевой странице. Как вы, наверное, уже поняли, для того, чтобы указать на закрытие определенного тэга, в HTML принято ставить слэш «/».

Для закрепления только что полученного навыка можно дописать еще несколько строчек кода. До этого мы оперировали в рамках «тела» контента, за которое отвечает тэг <body>, но пока это самое тело у нас без «головы». Исправить это досадное недоразумение можно добавив следующие строки:

<!DOCTYPE html>

<html>

<head>

  <title>

  Тут будет название всей страницы

  </title>

</head>

<body>

<h2>Тут будет заголовок, написанный самым большим шрифтом</h2>

<p>А это — усовершенствованный, частично <strong>выделенный жирным шрифтом</strong>абзац.</p>

<h4>Тут будет тоже заголовок, но не такой заметный, как предыдущий — он будет выполнен более мелким шрифтом</h4>

<p>Еще один абзац для полноты картины.</p>

</body>

</html>

По сути, приведенный выше второй фрагмент HTML кода — это расширенный вариант первого:

  • появилось титульное название страницы, которое помещено между тэгами <title></title>, которые, в свою очередь формируют заглавную, а не контентную частью страницы, так как они размещены внутри тега <head></head>, а не <body></body>;
  • появился еще один заголовок более низкого порядка (он будет менее заметен), который будет размещен в рамках <h4></h4>;
  • преобразится часть текста в первом по порядку абзаце: фраза, заключенная в тэг <strong></strong> (на русский язык переводится «сильный»), будет выделена жирным.

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

Не так страшен HTML, как его рисуют, верно?

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

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

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

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

Также к вашим услугам отдел верстки нашей компании ([email protected]), который с удовольствием исполнит любую вашу прихоть в рамках платформы: слайдеры, поп-апы, сложные лид-формы, галереи и т.д. В нашем редакторе можно все!

Высоких вам конверсий!

Игорь Кизин,

руководитель отдела верстки LPgenerator

По материалам blog.hubspot.com

21-10-2013

lpgenerator.ru

Что такое 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 код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Структура HTML документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="Описание страницы" />
<meta name="keywords" content="Ключевые слова страницы" />
</head>
<body>
...
</body>
</html>

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

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

2. Далее идет тег <html>, в конце страницы этот тег нужно закрыть, поставив </html>.

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

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

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

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

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

Понравилось? Поделитесь с друзьями!

siteblogger.ru

HTML — Структура html-документа и теги для его создания / ProgLang

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

  • Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
  • Как следует из названия, HTML — это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.

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

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

HTML-документ

В следующем примере показан HTML-документ в простейшей форме:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Заголовок</h2>
    <p>Здесь содержание документа...</p>
  </body>
</html>

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Теги для создания HTML-документа

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

В приведенном выше примере используются следующие теги для создания HTML-документа:

ТегОписание
<!DOCTYPE…>Этот тег определяет тип документа и версию HTML.
<html>Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами <head></head> и телом документа, которое представлено тегами <body></body>.
<head>Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как <title>, <link> и т.д.
<title>Тег <title> используется внутри тега <head>, чтобы указать название документа.
<body>Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как <h2>, <div>, <p> и другие.
<h2>Этот тег представляет заголовок.
<p>Этот тег представляет абзац.

Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

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

Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.

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

Структура типичного HTML-документа будет иметь следующий вид:

Тег декларации документа
<html>
  <head>
    <title>Теги, связанные с заголовком документа</title>
  </head>
  <body>
    Теги, связанные с телом документа
  </body>
</html>

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

Декларация <!DOCTYPE>

Тег декларация <!DOCTYPE> используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML — 5, и она использует следующее объявление:

<!DOCTYPE html>

Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега <!DOCTYPE…> вместе с другими тегами HTML.

Поделитесь:

proglang.su

что это такое и почему HTML нужно освоить хотя бы минимально? Экопарк Z

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

HTML является теговым языком разметки гипертекста: чтобы превратить текст в гипертекст, используют разделители (дескрипторы), для краткости названные тегами. Вот пример тега: <strong> — этот открывающий тег обеспечивает вывод текста жирным шрифтом до тех пор, пока не встретится закрывающий тег </strong>.

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

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

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

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

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

При создании сайта с использованием CMS WordPress основная нагрузка по написанию HTML-кода приходится на WordPress, но полностью полагаться на WordPress нельзя, ибо даже самая последняя версия имеет некоторые несовершенства.

Самое главное из них — неумение делать корректные таблицы, которые благополучно проходят проверку Валидатором. Перенеся на страницу достаточно объёмную таблицу из Excel, можно получить страницу, на которой Валидатор обнаружит сотни ошибок! Подробности правки таких таблиц смотрите на странице Таблицы.

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

Когда понадобится углубить знания языка HTML, найдите в Интернете учебник и справочник языка HTML и держите их всегда во вкладках браузера, сохраняющего вкладки при перезапуске браузера или компьютера. Вот ссылка на классный сайт, содержащий  онлайновые учебники и справочники ( wisdomweb.ru ), причём не только HTML, но и CSS, а также JavaScript.

Самыми интересными новыми тегами HTML 5-й версии являются, по моему мнению, теги <video> и <audio>, которые обеспечивают поддержку Видео и Аудио и  существенно оживляют страницы сайта!

…!N — эти 5-ть символов (N — номер дополнения) означают, что эта страница нуждается в дополнении: собирался и уже создал страницы Аудио и Видео, а выше дал на них ссылки. Используя стандартный поиск WordPress, легко последовательно находить страницы, на которых стоят …!, и последовательно вносить дополнения. Чтобы не зависеть от особенностей поиска WordPress, ставлю первые 4-ре символа и в Excel-таблице страниц сайта.

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

И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Продолжение тут…

ep-z.ru

Что такое html, основные понятия

Из истории HTML


HTML появился приблизительно в 1986-1991 годах в Европейском Центре ядерных исследований в Женеве (Швейцария). Разработал его британский учёный Тим Бернерс-Ли.
Тим Бернерс-Ли — cоздатель HTML

В настоящее время большинство страниц в Интернете создаются при помощи HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

HTML


( от англ. HyperText Markup Language — язык гипертекстовой разметки)

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

Теги


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

Пример конструкции

<открывающий тег>   Текст в тегах   </закрывающий тег>

Пример кода
<b>жирный шрифт</b> <!--тег <b> для обозначения жирного шрифта, а тег </b> обозначает прекращение выделения жирным -->
<i>курсив</i> <!--тег <i> для обозначения курсива-->

В браузере данный код отобразит следующее:

жирный шрифт
курсив

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

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

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

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

Пример кода

<img src="image.jpg" width="100" height="100">

Атрибут тега имеет определённый тип (например: текст, число, путь к файлу и тд), который обязательно должен учитываться при написании атрибута. Тег img служит для обозначения изображения, атрибут src для введение его адреса относительно данного файла, а другие атрибуты width и height обозначают соответственно Ширину и Высоту нашего изображения.

Ссылки


Язык HTML позволяет связывать страницы между собой с помощью ссылок (линков).
<a href="index.html">На главную</a>

Наличие ссылок являтся основным свойством веб-страниц. Ссылкой может являться не только некоторая часть текста, но изображение, ее часть или область сайта.

Пример кода готовой страницы


(файл index.html):
<html>
  <head>
    <title>
    Название странички
    </title>
  </head>

  <body>
    <h2>Заголовок</h2>
    Это моя web-страничка!
    <a href="index.html">Ссылка на саму себя</a>
  </body>
</html>

Демонстрация Скачать исходники

Спасибо за внимание! Продолжение в следующих уроках!

tradebenefit.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о