--- language: html filename: learnhtml.html contributors: - ["Christophe THOMAS", "https://github.com/WinChris"] translators: - ["Lana Tim", "https://github.com/LanaTim"] lang: ru-ru --- HTML расшифровывается как Hypertext Markup Language(гипертекстовый язык разметки). Это язык используют для написания страниц для World Wide Web(всемирной паутины). Это язык разметки позволяет писать веб-страниц с помощью кода, чтобы определять, как должны быть отображены текст и данные. На самом деле, HTML файлы представляют собой простые текстовые файлы. Что такое разметка? Это способ организации данных страницы, путем открытия и закрытия тегов(помещая данные внутрь этих тегов). Эта разметка служит, чтобы придать значение тексту, который он окружает. Как и в других языках программирования, HTML имеет много версий. Здесь мы будем говорить о HTML5. **Примечание:** Вы можете тестировать различные теги и элементы по мере продвижения через учебник на сайте, как [codepen](http://codepen.io/pen/) для того, чтобы увидеть их влияние, понять, как они работают и ознакомиться с языком. В данной статье рассматривается в основном HTML синтаксис и некоторые полезные советы. ```html <!-- Комментарии заключаются как эта лини\! --> <!-- #################### Теги #################### --> <!-- Ниже приведен пример HTML-файл, который мы будем анализировать. --> <!doctype html> <html> <head> <title>Мой сайт</title> </head> <body> <h1>Привет, мир!</h1> <a href = "http://codepen.io/anon/pen/xwjLbZ"> Переходите сюда, чтоб посмотреть как это выглядит. </a> <p>Это параграф.</p> <p>Это другой параграф.</p> <ul> <li>Это элемент не нумерованного списка (маркированный список)</li> <li>Это другой элемент</li> <li>Это последний элемент в списке</li> </ul> </body> </html> <!-- HTML-файл всегда начинается с указанием браузеру, что страница это HTML. --> <!doctype html> <!-- После этого, страница начинается с <html> тега. --> <html> <!-- страница будет закрыта в конце с помощью тега </html>. --> </html> <!-- Ничто не должно появиться после этого заключительного тега. --> <!-- Внутри (между открывающим и закрывающим тегами <html> </ html>), мы находим: --> <!-- Заголовок определяется <head> (it он должен быть закрыт </head>). --> <!-- Заголовок содержит описание и дополнительную информацию, которая не отображается; это метаданные. --> <head> <title>Мой сайт</title><!-- Тег <title> указывает браузеру заголовок, чтобы показать в строке заголовка названия и вкладки браузера окна. --> </head> <!-- После секция <head>, находится секция - <body> --> <!-- До этого момента, ничего описаное не будет отображаться в окне браузера. --> <!-- Мы должны наполнить <body> содержанием, которое будет отображаться. --> <body> <h1>Hello, world!</h1> <!-- Тег h1 создает заголовок. --> <!-- Так же существуют другие заголовки от имеющего большее значение <h1> по убыванию к <h6>. --> <a href = "http://codepen.io/anon/pen/xwjLbZ">Переходите сюда, чтоб посмотреть как это выглядит.</a> <!--гиперссылка на URL, заданнf атрибутом href="" --> <p>Это параграф.</p> <!-- Тег <p> позволяет нам добавдять текст на странице HTML. --> <p>Это другой параграф.</p> <ul> <!-- Тег <ul> создает маркированный список. --> <!-- Для того, чтобы иметь пронумерованный список лучше использовать <ol> тогда первый элемент будет иметь значение 1. для второго элемента, 2. и так далее. --> <li>Это элемент в не нумерованном списке (маркированный список)</li> <li>Это еще один элемент</li> <li>И это последний пункт в списке</li> </ul> </body> <!-- Вот так просто можно создать HTML страницу. --> <!--Но можно добавить множество дополнительных типов HTML тегов. --> <!-- Для вставки картинки --> <img src="http://i.imgur.com/XWG0O.gif"/> <!-- Источник изображения указывается с помощью атрибута src="" --> <!-- Источником может быть URL или даже путь к файлу на вашем компьютере. --> <!-- Кроме того, можно создать таблицу. --> <table> <!-- Мы открыли <table> элемент. --> <tr> <!-- <tr> позволяет создать ряд. --> <th>Первый заголовок</th> <!-- <th> позволяет дать название для столбца таблицы. --> <th>Второй заголовок</th> </tr> <tr> <td>Первый ряд, первая колонка</td> <!-- <td> позволяет нам создать ячейку таблицы. --> <td>Первый ряд, вторая колонка</td> </tr> <tr> <td>Второй ряв, первая колонка</td> <td>Второй ряд, вторая колонка</td> </tr> </table> ``` ## Применение HTML файлы имеют окончание(расширение) `.html`. ## Узнать больше * [википедиа](https://ru.wikipedia.org/wiki/HTML) * [HTML учебник](https://developer.mozilla.org/ru/docs/Web/HTML) * [htmlbook](http://htmlbook.ru/)