Учебник html для начинающих: Структура HTML документа

HTML формы

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

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

Основные теги, используемые для создания HTML форм, — это тег <form>, тег <input>, тег <textarea>, тег <select> и тег <option>.

Тег <form> создает форму. Он требует наличия одного обязательного атрибута – action. В этом атрибуте указывается адрес, по которому форма будет отсылать свои данные после того, как пользователь отдаст команду «отправить».

Необязательный атрибут method указывает на то, каким образом должны отсылаться данные формы. Он может принимать два значения – get (значение по умолчанию) и post. При последнем значении данные во время отсылки скрываются (при значении get данные формы прикрепляются к URL).

Таким образом, элемент формы будет иметь приблизительно следующий вид:

<form action='processingscript.php' method='post'>
   ...
</form>

Тег <input> – это основа всего мира форм. Он может быть десяти видов:

• <input type=»text» /> — стандартное текстовое поле. Также здесь может присутствовать атрибут value, который определяет текст по умолчанию, заданный в текстовом поле.
• <input type=»password» /> — то же текстовое поле, однако вводимые пользователем символы будут скрыты.
• <input type=»checkbox» /> — создает поле выключателей (checkbox) или флажков, которые пользователь может либо включить, либо отключить. Также здесь можно использовать атрибут checked, который используется в формате <input type=»checkbox» checked=»checked» /> и который задает начальное состояние флажка «включен».
• <input type=»radio» /> — создает поле переключателей, которые очень похожи на флажки, однако в этом случае пользователь может выбрать только один объект в группе переключателей. Здесь также можно использовать атрибут checked, который задается аналогичным образом, как и в случае с флажками.
• <input type=»file» /> — создает поле ввода, которое показывает файлы на вашем компьютере подобно тому, как вы открываете или сохраняете документы в большинстве программ. Оно позволяет пользователям загружать файлы на сервер.
• <input type=»submit» /> — создает кнопку отправки данных формы программе-обработчику. Можно самому задавать текст, который будет отображаться на кнопке отправки (то же самое можно сделать и с типами button и reset – см.ниже). Это делается при помощи атрибута value, например, <input type=»submit» value=»Ого. Надпись на кнопке» />.
• <input type=»image» /> — создает специальную кнопку отправки, в качестве которой будет использоваться активное изображение. При этом серверу кроме данных формы еще отправляются и координаты (x, y) нажатия мыши на изображение. Также необходимо указывать атрибут src, который играет ту же роль, что и в теге <img>.
• <input type=»button» /> — создает кнопку, которая без дополнительного кода ничего не будет делать.
• <input type=»reset» /> — создает кнопку, которая при нажатии на нее возвращает все поля формы к значениям по умолчанию.
• <input type=»hidden» /> — создает поле, которое не отображается в окне браузера. Оно используется для передачи различной вспомогательной информации, например, имени страницы, на которой находится пользователь, или электронный адрес, куда должна пересылаться форма.

Обратите внимание, что тег <input> закрывает сам себя при помощи конструкции «/>».

Тег <textarea> – создает многострочную область ввода текста. Он требует использование атрибутов rows и cols, которые задают размер области ввода:

<textarea rows="5" cols="20">Здесь вводят много текстовой информации</textarea>

Тег <select> и тег <option> используются для создания разворачивающего или выпадающего меню. Они работают следующим образом:

<select>
  <option value="first option">Опция 1</option>
  <option value="second option">Опция 2</option>
  <option value="third option">Опция 3</option>
</select>

При отправке данных формы посылается выбранный элемент списка.

Аналогично атрибуту checked в флажках и переключателях тег <option> может иметь атрибут selected:

<option value="mouse" selected="selected">Грызун</option>

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

<input type="text" name="talkingsponge" />

Форма может иметь, например, следующий вид. (Внимание: форма не будет работать до тех пор, пока не будет реализован скрипт «contactus.php», указанный в атрибуте action тега <form>, и который обрабатывает передаваемые данные.)

<form action='contactus.php' method="post">
   <p>Имя:</p>
   <p><input type="text" name="name" value="Ваше имя" /></p>
   <p>Комментарий: </p>
   <p><textarea name="comments" rows="5" cols="20">Ваш комментарий</textarea></p>
   <p>Вы:</p>
   <p><input type="radio" name="areyou" value="male" /> Мужчина</p>
   <p><input type="radio" name="areyou" value="female" /> Женщина</p>
   <p><input type="radio" name="areyou" value="hermaphrodite" /> Ни то ни другое</p>
   <p><input type="submit" /></p>
   <p><input type="reset" /></p>
</form>

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

Промежуточные итоги Вверх HTML таблицы — начало

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

Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML.

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

Измените свой документ следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    Это моя первая веб-страница
</body>
</html>

Теперь сохраните документ, вернитесь в браузер и выберите команду «Обновить» (это перезагрузит вашу веб-страницу).

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

Первая строка, начинающаяся с «<!DOCTYPE…» говорит браузеру, что вы знаете, что делаете. Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим «обратной совместимости» и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа HTML. Подробнее о типах документов вы узнаете несколько позже. А пока просто запомните, что эту команду следует включать в начало любой веб-страницы.

Вернемся к нашему примеру. Следующая команда в структуре документа HTML, команда <html>, — открывающий тег, который прекращает все недомолвки и прямо говорит браузеру, что все, что между ним и закрывающим тегом </html>, является HTML документом. Все что находится между <body> и </body> является основным содержимым веб-страницы и выводится в окне браузера.

Закрывающие теги

Теги </body> и </html> закрывают соответствующие открывающие теги. Все теги в структуре документа HTML 4.01 (XHTML) должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой.

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

Атрибуты

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

<тег атрибут="значение">контент</тег>

Подробнее о тегах с атрибутами мы поговорим немного позже.

Элементы

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

Заголовок веб-документа Вверх Что нужно, чтобы создать веб-страницу

HTML таблицы — окончание

Итак, вы думаете, что знаете, как создать HTML таблицу. Наверняка вам знакомы теги <table>, <tr>, <td> и <th>. Наверное вы даже можете создавать более сложные таблицы при помощи атрибутов rowspan и colspan. Тогда вы действительно кое-что умеете. А хотелось бы вам уметь еще больше? Тогда продолжим.

Столбцы наносят ответный удар

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

К счастью положение спасают тег <colgroup> и тег <col>.

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

Вот пример использования этих тегов:

<table>
   <colgroup>
      <col />
      <col />
      <col />
   </colgroup>
   <tr>
      <td>Это</td>
      <td>То</td>
      <td>Другое</td>
   </tr>
   <tr>
      <td>Птичка</td>
      <td>Крокодил</td>
      <td>Завтрак</td>
   </tr>
</table>

Стили класса «alternate» будут применяться ко второму столбцу или ко второй ячейке каждой строки.

В тегах <colgroup> и <col> можно также использовать атрибут span, который работает так же как rowspan и colspan. Использование этого атрибута в теге <colgroup> будет определять количество строк, к которым будет относиться эта группа, например, <colgroup span=»2″></colgroup> сгруппирует первые два столбца. При использовании этого атрибута с тегом <colgroup> тег <col> не используется.

Использование атрибута span в теге <col> более целесообразно. Например, в коде предыдущего примера его можно применить следующим образом:

<table>
   <colgroup>
      <col />
      <col span="2" />
   </colgroup>
...

В результате класс «alternate» будет применен к последним двум столбцам.

Да, но здесь должна быть какая-нибудь особенность, не так ли? Конечно есть. И вот она: К столбцам применимы только следующие стили – border, background, width и visibility.

Описание и заглавие

Из соображения доступности всегда стоит определять описание и заглавие таблицы.

Описание таблицы определяется при помощи атрибута summary, который задается в открывающем теге <table>. Описание не отображается браузером, однако помогает в невизуальном представлении таблицы.

Тег <caption>, место которого сразу же после открывающего тега <table>, определяет заглавие таблицы. По умолчанию заглавие отображается над таблицей, однако при помощи CSS свойства caption-side может принимать положение top, right, bottom или left, хотя IE обо всем этом не имеет никакого понятия.

<table summary="Брачные привычки цикад, демонстрирующие особенности по сравнению с саранчой">
   <caption>Брачные особенности цикад</caption>
...

Заголовки, нижние колонтитулы и прокрутка таблиц

Тег <thead>, тег <tfoot> и тег <tbody> позволяют разделять таблицу на заголовок, нижний колонтитул и тело. Это особенно полезно, когда таблицы имеют очень большой размер и когда (например, при распечатывании на принтере) необходимо, чтобы заголовок и нижний колонтитул появлялись на каждой странице.

Эти элементы должны определятся в следующем порядке: <thead> – <tfoot> – <tbody>.

<table>
   <thead>
      <tr>
         <td>Заголовок 1</td>
         <td>Заголовок 2</td>
         <td>Заголовок 3</td>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>Нижний колонтитул 1</td>
         <td>Нижний колонтитул 2</td>
         <td>Нижний колонтитул 3</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Ячейка 1</td>
         <td>Ячейка 2</td>
         <td>Ячейка 3</td>
      </tr>
      ...
   </tbody>
</table>

Определив стиль «overflow: auto; max-height: [любое значение];«, можно сделать элемент <tbody> прокручиваемым в браузерах Mozilla. При этом заголовок и нижний колонтитул будут оставаться на месте, а справа от тела таблицы появится полоса прокрутки. Свойство max-height используется из-за того, что IE не распознает его, и поэтому оно безопаснее свойства height, которое IE присвоит каждой строке.

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

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

Доступные формы Вверх Осваиваем текст

Основы HTML — Изучение веб-разработки

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

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

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

<p>Моя кошка очень раздражена</p>

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключенного в открывающие и закрывающие угловые скобки.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.
3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
2. Имя атрибута, за которым следует знак равенства.
3. Значение атрибута, заключенное с двух сторон в кавычки.

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:

<p>Моя кошка <strong>очень</strong> раздражена.</p>

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведенное ниже неверно:

<p>Моя кошка <strong>очень раздражена.</p></strong>

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

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмем  элемент <img>, который уже имеется в нашем HTML:

<img src="images/firefox-icon.png" alt="Моё тестовое изображение">

Он содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернемся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Моё тестовое изображение">
  </body>
</html>

Здесь мы имеем:

• <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включен для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
• <html></html> — элемент <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
• <head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
• <body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то еще.
• <meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
• <title></title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.

Давайте снова обратим наше внимание на элемент изображения:

<img src="images/firefox-icon.png" alt="Mоё тестовое изображение">

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

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

1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передает изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).

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

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

Заголовки

Элементы заголовка позволяют вам указывать определенные части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2>–<h6>, хотя обычно вы будете использовать не более 3-4 :

<h2>Мой главный заголовок</h2>
<h3>Мой заголовок верхнего уровня</h3>
<h4>Мой подзаголовок</h4>
<h5>Мой под-подзаголовок</h5>

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше  элемента <img>.

Абзацы

Как было сказано раньше, элемент <p> предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

<p>Это одиночный абзац</p>

Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img>.

Списки

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

1. Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.
2. Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>

Мы могли бы изменить разметку на эту:

<p>Mozilla, мы являемся мировым сообществом</p>

<ul>
  <li>технологов</li>
  <li>мыслителей</li>
  <li>строителей</li>
</ul>

<p>работающих вместе ... </p>

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a> — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

1. Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
2. Оберните текст в элемент <a>, например так:

   <a>Манифест Mozilla</a>

3. Задайте элементу <a> атрибут href, например так:

   <a href="">Манифест Mozilla</a>

4. Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:

   <a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

Теперь добавьте ссылку на вашу страницу, если вы еще не сделали этого.

Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть ее здесь):

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

Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

HTML — Учебник для начинающих / ProgLang

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

HTML был создан Тимом Бернерс-Ли в конце 1991 года, но первой стандартной спецификацией HTML стала «HTML 2.0», которая была опубликована в 1995 году. Основной версией HTML была 4.01, и она была опубликована в конце 1999 года. Хоть версия HTML 4.01 широко распространена, но в настоящее время существует версия HTML 5, которая является расширением HTML 4.01 и была опубликована в 2012 году.

Аудитория

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

Предпосылки

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

• иметь опыт работы с любым текстовым редактором, таким как блокнот, notepad++ и другие;
• уметь создать каталоги (папки) и файлы на своем компьютере;
• уметь перемещаться по различным каталогам;
• уметь записывать содержимое в файл и сохранять его на компьютере;
• иметь понимание изображений в разных форматах, таких как JPEG, JPG и PNG.

Попробовать HTML онлайн

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

<!DOCTYPE html>
<html>
   <body>
      <h2>Привет мир!</h2>
   </body>
</html>

Поделитесь:

Учебник HTML5

260

Web-программирование — Учебник HTML5

С первого взгляда можно предположить, что HTML5 — это пятая версия языка HTML для создания веб-страниц. Но в действительности все не так просто.

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

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

Разобраться в HTML5 — задача не из легких. Самой большой проблемой является то обстоятельство, что термин «HTML5» используется для обозначения свыше дюжины отдельных стандартов. (Как мы узнаем, эта ситуация является результатом эволюции HTML5, который начинался как единый стандарт, но впоследствии был разделен на более управляемые части.)

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

Теоретический материал:

• 1. Введение в HTML5

• 2. Веб-формы

• 3. Аудио и видео

• 4. Canvas

• 5. Web Storage API и File API

• 6. Автономные приложения

• 7. Взаимодействие с веб-сервером

• 8. Geolocation API, Web Workers и другие средства

Учебник HTML для начинающих. — PDF Free Download

1 Учебник HTML для начинающих. Версия для печати раздела «Учебник HTML» сайта Введение Этот учебник целиком и полностью посвящѐн языку HTML, без знаний которого не обойтись в создании какой либо веб-страницы. HTML язык — это основа, база которую просто таки необходимо знать любому начинающему веб-мастеру! Этот язык, сам по себе (в чистом виде), достаточно простой, думаю его с легкостью может освоить любой «продвинутый» шестиклассник.. в тоже время он позволяет самостоятельно создавать полноценные страницы и сайты. Рассчитан этот HTML учебник для начинающих «с нуля» людей, которые только только решили освоить веб-ремесло, поэтому старался писать его как можно более развернуто и что называется «доходчиво», в тоже время стараясь охватить весь курс до мелочей, так что может быть и опытный веб-мастер найдет в нѐм для себя что-то новое или будет использовать его в качестве «шпаргалки», изложенной в прилагаемом справочнике тегов: ( Где нет «воды» и нудноватого для уже опытного человека «разжѐвывания» материала. Ну и сразу к делу.. начнем с классики.. Откройте блокнот, да да, тот самый блокнот.. Пуск> Стандартные> Блокнот и напишите в нем следующий текст: <title>моя первая страничка </title> Привет мир!!! <br> Меня зовут (здесь впишите Ваше имя), это моя первая страничка! Далее, сохраните этот текст как html документ, название придумайте сами.. главное чтобы расширение было html Повторюсь, чтобы не было казусов.. в блокноте кликаем по меню «Файл», выбираем «Сохранить как..» в строке «Имя файла» пишем: index.html, просто по умолчанию блокнот предлагает сохранить файл с расширением *.txt, а нам нужно расширение *. html Далее открываем этот файл при помощи Вашего браузера.. ну к примеру того же Internet Explorerа (правой кнопкой по нашему файлу.. «Открыть с помощью..» Internet Explorer) Поздравляю, Вы написали свою первую страничку!!! Если в Вашей душе загорелась искорка, проснулась тяга к знаниям и творчеству, предлагаю планомерно ознакомится с главами этого учебника. В них на доступном языке с множеством примеров я постараюсь объяснить то, что мы только что написали, а так же как сделать этот документ более привлекательным, вставить в него графику, таблицы, прописать ссылки.. в общем, сделать его полноценным сайтом, заслуживающим место во всемирной паутине. Семикопенко Алексей Алексеевич 1

2 Глава 1 Что такое HTML язык и с чем его едят.. Начну, пожалуй, с начала.. HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре — это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые «знают» стандартные команды html языка, и «пережевывая» их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер — составитель документа. Теперь о командах — их называют дескрипторами, но чаще — тегами. Вернемся к нашей первой страничке.. итак мы написали: <title>моя первая страничка</title> Привет мир!!! <br> Меня зовут Карлсон, это моя первая страничка! Так вот то что написано между < > — называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью. Так что же мы написали? и как это читает браузер? Мысли браузера: — начало документа.. опять работы привалило.. — смотрим словарик английского переводим «голова» в голове моей опилки не беда!!… здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят? <title> — «название» значит.. это в шапке окна нужно написать его название: Моя первая страничка — опять чайник тренируется.. </title> — все название закончилось.. можно идти дальше.. — ага и в голове кроме названия больше никаких вздорных мыслей не держим.. — «тело» документа все, что написано ниже выставляем на всеобщее обозрение Привет мир!!! — как мило! Достали уже!!! <br> — переносим текст на следующую строчку.. я даже догадываюсь, что в ней будет… Меня зовут (здесь Ваше имя), это моя первая страничка! — ну да так и есть.. ничего Семикопенко Алексей Алексеевич 2

3 пооригинальнее придумать не могут.. — что всѐ что ли? Больше ничего не отображать? — ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!! Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чѐткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи: 1) Необходимо раз и навсегда запомнить что если есть открывающий тег < > то обязательно должен быть и закрывающий </ > Хотя есть и исключения как например у нас тег <br> — он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой «Меня зовут..» и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку «обновить») 2) Все документы должны иметь вот такой шаблон кода: — начало документа — начало головы — закрытие головы — начало тела — закрытие тела — конец документа Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всѐ с ног на голову.. 3) О порядке: Открывающий и закрывающий тег по типу < > </ > представляет собой своего рода ѐмкость, ящик в который могут складываться другие теги — ящички поменьше.. следовательно, согласно логики документ должен выглядеть так: <Тег «большой ящик»> <Тег «ящик средний»> <Тег «ящик маленький»> содержание </Тег «ящик маленький» > </Тег «ящик средний» > </Тег «большой ящик»> Если писать, например, так: <Тег «большой ящик»> <Тег «ящик средний»> <Тег «ящик маленький»> содержание </Тег «большой ящик»> </Тег «ящик маленький»> </Тег «ящик средний»> То получится белиберда, которая в голове не укладывается, «большой» уже закрыт, а из него «торчит» «маленький», который заперт в «среднем», а «содержание» рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чѐтко структурируйте код Вашей странички иначе ничего работать не будет.. Семикопенко Алексей Алексеевич 3

4 Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать.. Полезные советы: При написании сайта создайте папку в любом удобном месте на Вашем жѐстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы таких файлов названия которых нужно держать в голове, чтобы связать их перекрѐстными ссылками. Порядок, прежде всего! При написании кода советую придерживаться «хорошей манере письма», то есть писать теги «лесенкой» по мере вложенности одного тега в другой. Со временем Вы поймете, что читать код написанный вот так: <title>моя первая страничка</title> Привет мир!!! <br> Меня зовут Карлсон, это моя первая страничка! Значительно легче, чем так: <title>моя первая страничка</title> Привет мир!!! <br> Меня зовут Карлсон, это моя первая страничка! И уж тем более чем вот так: <title>моя первая страничка</title>привет мир!!!<br>меня зовут Карлсон, это моя первая страничка! Хоть это и дело привычки.. всѐ же лучше привыкнуть писать «разборчиво». Семикопенко Алексей Алексеевич 4

5 Глава 2 Редактируем текст на своей странице.. Вы наверняка не раз печатали документы в текстовых редакторах, так вот.. что можно сделать с текстом в том же Word, то же можно сделать и с текстом на нашей страничке. В этой главе я расскажу о том, как изменить шрифт и его размер, как сделать текст жирным, курсивом, подчѐркнутым и о том как его выравнивать по краям или центру документа. Параграф. Я думаю, Вы знаете, что такое параграф.. это такой кусочек текста, одно или несколько предложений, который в книгах обычно печатается с новой строки, тем самым, выделяя этот текст из основной массы, Книгу разбитую на параграфы легко читать, потому что, как правило, одному параграфу соответствует одна мысль или логическая часть текста. Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> — собственно параграф. Параграф имеет атрибут align «выравнивание» который в свою очередь может быть равен тому ли иному значению. Рассмотрим на примерах: С помощью параграфа можно расположить наш текст по центру: <p align=»center»>привет мир!!!</p> По левому краю: <p align=»left»>привет мир!!!</p> По правому краю: <p align=»right»>привет мир!!!</p> Или же обоим краям документа: <p align=»justify»>привет мир!!! — здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p> Давайте слегка изменим нашу первую страничку: <title>мой первый сайт </title> <p align=»center»>привет мир!!!</p> <br> <p align=»justify»> Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньѐ!!! С нетерпеньем буду ждать Вашего Семикопенко Алексей Алексеевич 5

6 приглашения на чай. Прилечу!! </p> Так уже лучше, не правда ли? Запомним некоторые вещи: 1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так: <p> <p> </p> </p> Нельзя! — это нелогично, как может один параграф содержать в себе другой? 2) Так же, нельзя писать пустые теги без текста или других тегов. <p> здесь, что-то обязательно должно быть!!!</p> 3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут align=»left» для параграфа можно не указывать. 4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пшится так: <div align=»center»>привет мир!!!</div> <div align=»left»>привет мир!!!</div> <div align=»right»>привет мир!!!</div> <div align=»justify»>привет мир!!!</div> Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу: <div> <p align=»left»>пишем слева</p> <p align=»right»>пишем справа</p> </div> А вообще тег <div> многофункциональный.. и по своей сути он является пустым блокомконтейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div>, но об остальных возможностях данного тега мы поговорим позже.. 5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так: <center>привет мир!!!</center> Заголовки В наборе тегов html языка имеется шесть типов заголовков: <h2> Привет мир!!! </h2> Семикопенко Алексей Алексеевич 6

7 <h3> Привет мир!!! </h3> <h4> Привет мир!!! </h4> <h5> Привет мир!!! </h5> <h5> Привет мир!!! </h5> <h6> Привет мир!!! </h6> Думаю с этим понятно.. <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки — на то он и заголовок. Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст? Знакомимся тег <font> в переводе на русский — «шрифт».. Тег <font> помимо прочих атрибутов, о которых ещѐ пойдет речь, имеет атрибут size — размер. Пишется и выглядит это так: <font size=»+4″>привет мир!!!</font> <font size=»+2″>привет мир!!!</font> <font size=»+0″>привет мир!!!</font> <font size=»-1″>привет мир!!! </font> <font size=»-2″>привет мир!!!</font> Добавим эти теги на нашу страницу. <title>мой первый сайт</title> <center><h3>привет мир!!!</h3></center> <br> <p align=»justify»> <font size=»+1″>меня зовут Карлсон! Я в меру упитанный муж

HTML-теги на HTML.com