diff options
Diffstat (limited to 'ru-ru/html-ru.html.markdown')
| -rw-r--r-- | ru-ru/html-ru.html.markdown | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/ru-ru/html-ru.html.markdown b/ru-ru/html-ru.html.markdown new file mode 100644 index 00000000..5cf95fc4 --- /dev/null +++ b/ru-ru/html-ru.html.markdown @@ -0,0 +1,128 @@ +--- +language: html +filename: learnhtml.html +contributors: + - ["Christophe THOMAS", "https://github.com/WinChris"] +translators: + - ["Lana Tim", "https://github.com/LanaTim"] +--- + +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/) |