summaryrefslogtreecommitdiffhomepage
path: root/ru-ru/html-ru.html.markdown
blob: 5069d77f9ab2592c2fdcf98ed31bd6fd7da8ec0c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
---
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/)