2016-10-31 17:08:50 +00:00
|
|
|
|
---
|
|
|
|
|
|
language: html
|
2017-08-25 08:20:57 +00:00
|
|
|
|
filename: learnhtml-ru.html
|
2016-10-31 17:08:50 +00:00
|
|
|
|
contributors:
|
|
|
|
|
|
- ["Christophe THOMAS", "https://github.com/WinChris"]
|
|
|
|
|
|
translators:
|
|
|
|
|
|
- ["Lana Tim", "https://github.com/LanaTim"]
|
2016-11-16 23:21:24 +00:00
|
|
|
|
lang: ru-ru
|
2016-10-31 17:08:50 +00:00
|
|
|
|
---
|
|
|
|
|
|
|
2022-04-07 13:58:24 +00:00
|
|
|
|
HTML расшифровывается как Hypertext Markup Language (гипертекстовый язык разметки).
|
2022-04-08 08:16:06 +00:00
|
|
|
|
Этот язык используют для написания страниц для World Wide Web (всемирной паутины).
|
2022-04-07 13:58:24 +00:00
|
|
|
|
Этот язык разметки позволяет описать веб-страницу с помощью кода, чтобы определить,
|
|
|
|
|
|
как на ней должны быть отображены текст и данные.
|
2016-10-31 17:08:50 +00:00
|
|
|
|
На самом деле, HTML файлы представляют собой простые текстовые файлы.
|
2022-04-07 13:58:24 +00:00
|
|
|
|
Что такое разметка? Это способ организации данных страницы
|
|
|
|
|
|
путем открытия и закрытия тегов и помещения данных внутрь этих тегов.
|
|
|
|
|
|
Эта разметка служит, чтобы придать значение тексту, который она окружает.
|
2016-10-31 17:08:50 +00:00
|
|
|
|
Как и в других языках программирования, HTML имеет много версий. Здесь мы будем говорить о HTML5.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Примечание:** Вы можете тестировать различные теги и элементы по мере продвижения
|
2022-04-07 13:58:24 +00:00
|
|
|
|
через учебник на сайте [codepen](http://codepen.io/pen/) для того, чтобы увидеть
|
2016-10-31 17:08:50 +00:00
|
|
|
|
их влияние, понять, как они работают и ознакомиться с языком.
|
2022-04-07 13:58:24 +00:00
|
|
|
|
В данной статье рассматривается в основном HTML-синтаксис и некоторые полезные советы.
|
2016-10-31 17:08:50 +00:00
|
|
|
|
|
|
|
|
|
|
```html
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- Комментарии заключаются как эта линия! -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
|
|
|
|
|
|
<!-- #################### Теги #################### -->
|
|
|
|
|
|
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- Ниже приведен пример HTML-файла, который мы будем анализировать. -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
|
|
|
|
|
|
<!doctype html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<title>Мой сайт</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<h1>Привет, мир!</h1>
|
|
|
|
|
|
<a href = "http://codepen.io/anon/pen/xwjLbZ">
|
2022-04-07 13:58:24 +00:00
|
|
|
|
Переходите сюда, чтобы посмотреть, как это выглядит.
|
2016-10-31 17:08:50 +00:00
|
|
|
|
</a>
|
|
|
|
|
|
<p>Это параграф.</p>
|
|
|
|
|
|
<p>Это другой параграф.</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Это элемент не нумерованного списка (маркированный список)</li>
|
|
|
|
|
|
<li>Это другой элемент</li>
|
|
|
|
|
|
<li>Это последний элемент в списке</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- HTML-файл всегда начинается с указанием браузеру, что страница - это HTML. -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
<!doctype html>
|
|
|
|
|
|
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- После этого страница начинается с <html> тега. -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
<html>
|
|
|
|
|
|
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- Страница будет закрыта в конце с помощью тега </html>. -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Ничто не должно появиться после этого заключительного тега. -->
|
|
|
|
|
|
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- Внутри (между открывающим и закрывающим тегами <html> </ html>) мы находим: -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- Заголовок определяется <head> (и он должен быть закрыт </head>). -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
<!-- Заголовок содержит описание и дополнительную информацию, которая не отображается; это метаданные. -->
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<title>Мой сайт</title><!-- Тег <title> указывает браузеру заголовок, который следует показать в строке заголовка названия и вкладки браузера окна. -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- После секции <head> находится секция <body> -->
|
|
|
|
|
|
<!-- До этого момента ничего описаное не будет отображаться в окне браузера. -->
|
|
|
|
|
|
<!-- Мы должны наполнить <body> содержанием, которое будет отображаться. -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<h1>Hello, world!</h1> <!-- Тег h1 создает заголовок. -->
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- Также существуют другие заголовки от имеющего большее значение <h1> до меньшего <h6>. -->
|
|
|
|
|
|
<a href = "http://codepen.io/anon/pen/xwjLbZ">Переходите сюда, чтобы посмотреть, как это выглядит.</a>
|
|
|
|
|
|
<!--гиперссылка на URL, заданная атрибутом href="" -->
|
|
|
|
|
|
<p>Это параграф.</p> <!-- Тег <p> позволяет нам добавлять текст на странице HTML. -->
|
2016-10-31 17:08:50 +00:00
|
|
|
|
<p>Это другой параграф.</p>
|
|
|
|
|
|
<ul> <!-- Тег <ul> создает маркированный список. -->
|
2022-04-07 13:58:24 +00:00
|
|
|
|
<!-- Для того, чтобы иметь пронумерованный список, лучше использовать <ol>
|
|
|
|
|
|
тогда первый элемент будет иметь значение 1., для второго элемента 2. и так далее. -->
|
|
|
|
|
|
<li>Это элемент в ненумерованном списке (маркированный список)</li>
|
2016-10-31 17:08:50 +00:00
|
|
|
|
<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/)
|
