Поделиться страницей

Изучите X за Y минут

Где X=html

HTML расшифровывается как Hypertext Markup Language(гипертекстовый язык разметки). Это язык используют для написания страниц для World Wide Web(всемирной паутины). Это язык разметки позволяет писать веб-страниц с помощью кода, чтобы определять, как должны быть отображены текст и данные. На самом деле, HTML файлы представляют собой простые текстовые файлы. Что такое разметка? Это способ организации данных страницы, путем открытия и закрытия тегов(помещая данные внутрь этих тегов). Эта разметка служит, чтобы придать значение тексту, который он окружает. Как и в других языках программирования, HTML имеет много версий. Здесь мы будем говорить о HTML5.

Примечание: Вы можете тестировать различные теги и элементы по мере продвижения через учебник на сайте, как codepen для того, чтобы увидеть их влияние, понять, как они работают и ознакомиться с языком. В данной статье рассматривается в основном 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.

Узнать больше


Хотите предложить свой перевод? Может быть, улучшение перевода? Откройте Issue в репозитории Github или сделайте Pull Request сами!

Первоначально предоставлено автором Christophe THOMAS, и обновлено 0 автором (-ами).