HTML расшифровывается как Hypertext Markup Language (гипертекстовый язык разметки). Этот язык используют для написания страниц для World Wide Web (всемирной паутины). Этот язык разметки позволяет описать веб-страницу с помощью кода, чтобы определить, как на ней должны быть отображены текст и данные. На самом деле, HTML файлы представляют собой простые текстовые файлы. Что такое разметка? Это способ организации данных страницы путем открытия и закрытия тегов и помещения данных внутрь этих тегов. Эта разметка служит, чтобы придать значение тексту, который она окружает. Как и в других языках программирования, HTML имеет много версий. Здесь мы будем говорить о HTML5.
Примечание: Вы можете тестировать различные теги и элементы по мере продвижения через учебник на сайте codepen для того, чтобы увидеть их влияние, понять, как они работают и ознакомиться с языком. В данной статье рассматривается в основном HTML-синтаксис и некоторые полезные советы.
1<!-- Это комментарий. -->
2
3<!-- #################### Теги #################### -->
4
5<!-- Ниже приведен пример HTML-файла, который мы будем анализировать. -->
6
7<!doctype html>
8 <html>
9 <head>
10 <title>Мой сайт</title>
11 </head>
12 <body>
13 <h1>Привет, мир!</h1>
14 <a href = "http://codepen.io/anon/pen/xwjLbZ">
15 Переходите сюда, чтобы посмотреть, как это выглядит.
16 </a>
17 <p>Это параграф.</p>
18 <p>Это другой параграф.</p>
19 <ul>
20 <li>Это элемент не нумерованного списка (маркированный список)</li>
21 <li>Это другой элемент</li>
22 <li>Это последний элемент в списке</li>
23 </ul>
24 </body>
25 </html>
26
27<!-- HTML-файл всегда начинается с указания браузеру, что страница — это HTML. -->
28<!doctype html>
29
30<!-- После этого страница начинается с <html> тега. -->
31<html>
32
33<!-- Страница будет закрыта в конце с помощью тега </html>. -->
34</html>
35
36<!-- Ничто не должно появиться после этого заключительного тега. -->
37
38<!-- Внутри (между открывающим и закрывающим тегами <html> </ html>) мы находим: -->
39
40<!-- Заголовок определяется <head> (и он должен быть закрыт </head>). -->
41<!-- Заголовок содержит описание и дополнительную информацию, которая не отображается; это метаданные. -->
42
43<head>
44 <title>Мой сайт</title><!-- Тег <title> указывает браузеру заголовок, который следует показать в строке заголовка названия и вкладки браузера окна. -->
45</head>
46
47<!-- После секции <head>, находится секция - <body> -->
48<!-- До этого момента, ничего из описанного не будет отображаться в окне браузера. -->
49<!-- Мы должны наполнить <body> содержанием, которое будет отображаться. -->
50
51<body>
52 <h1>Hello, world!</h1> <!-- Тег h1 создает заголовок. -->
53 <!-- Также существуют другие заголовки от имеющего большее значение <h1> до меньшего <h6>. -->
54 <a href = "http://codepen.io/anon/pen/xwjLbZ">Переходите сюда, чтобы посмотреть, как это выглядит.</a>
55 <!--гиперссылка на URL, заданная атрибутом href="" -->
56 <p>Это параграф.</p> <!-- Тег <p> позволяет нам добавлять текст на странице HTML. -->
57 <p>Это другой параграф.</p>
58 <ul> <!-- Тег <ul> создает маркированный список. -->
59 <!-- Для того, чтобы иметь пронумерованный список, лучше использовать <ol>
60 тогда первый элемент будет иметь значение 1., для второго элемента 2. и так далее. -->
61 <li>Это элемент в ненумерованном списке (маркированный список)</li>
62 <li>Это еще один элемент</li>
63 <li>И это последний пункт в списке</li>
64 </ul>
65</body>
66
67<!-- Вот так просто можно создать HTML страницу. -->
68
69<!--Но можно добавить множество дополнительных типов HTML тегов. -->
70
71<!-- Для вставки картинки -->
72<img src="http://i.imgur.com/XWG0O.gif"/> <!-- Источник изображения указывается с помощью атрибута src="" -->
73<!-- Источником может быть URL или даже путь к файлу на вашем компьютере. -->
74
75<!-- Кроме того, можно создать таблицу. -->
76
77<table> <!-- Мы открыли <table> элемент. -->
78 <tr> <!-- <tr> позволяет создать ряд. -->
79 <th>Первый заголовок</th> <!-- <th> позволяет дать название для столбца таблицы. -->
80 <th>Второй заголовок</th>
81 </tr>
82 <tr>
83 <td>Первый ряд, первая колонка</td> <!-- <td> позволяет нам создать ячейку таблицы. -->
84 <td>Первый ряд, вторая колонка</td>
85 </tr>
86 <tr>
87 <td>Второй ряв, первая колонка</td>
88 <td>Второй ряд, вторая колонка</td>
89 </tr>
90</table>
Применение ¶
HTML файлы имеют окончание(расширение) .html.