HTML (HyperText Markup Language) — стандартный язык разметки документов, с помощью которого составляются страницы сайтов сети Интернет.
Вовсе не обязательно каждому человеку знать HTML, но иметь представлением о нём будет полезно. Здесь я составлю небольшой учебник для начинающих, который в дальнейшем, возможно, буду использовать для повторения.
Для изучения HTML понадобятся:
- Текстовый редактор (рекомендую Notepad++)
- Возможность видеть и менять расширения файлов (для этого можно настроить отображение расширений файлов в Windows (Как включить отображение расширений файлов в Windows 7) или использовать файловый менеджер вроде Far Manager или Total Commander)
- Любой браузер
Содержание:
- Привет, Мир!
- Абзац <p></p>
- Перевод строки <br>
- Часть текста <span></span>
- Блок <div></div>
- Предварительно форматированный текст <pre></pre>
- Код <code></code>
- Заголовки <h1></h1>, <h2></h2>…
- Списки <ol></ol>, <ul></ul>
- Ссылки <a></a>
- Картинки <img>
- Таблицы <table></table>
- Формы <form></form>
- Фреймы <iframe></iframe>
- Специальные символы
- Заключение
Привет, Мир!
Начнём с самого простого документа. Откройте текстовый редактор и скопируйте туда вот этот код:
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Заголовок1</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> Привет, Мир! <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#helloworld">Учебник HTML</a> </body> </html> |
Сохраните его в файл «hello-world.html». Принято, что HTML-документы имеют расширение «.htm» или «.html». С помощью этого расширения операционная система сможет распознать, что этот файл является HTML-документом, и будет открывать его браузером.
При сохранении нужно указать кодировку utf-8. Вообще HTML-документ может иметь любую кодировку, главное правильно указать её в строке
1 |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
Но я бы рекомендовал всегда использовать utf-8, поскольку этим решаются многие проблемы с кодировкой.
Чтобы выбрать кодировку в Notepad++ нужно выбрать в меню «Encoding» и кликнуть на пункт «Convert to UTF-8».
Теперь откройте сохранённый файл браузером. Должна получиться страница вот такого вида.
Ни в коем случае не переопределяйте программу по умолчанию для файлов «*.html» и «*.html». Для последующего редактирования открывайте файл с помощью «Edit with Notepad++» в контекстном меню файла или с помощью меню «Файл» -> «Открыть» вашего текстового редактора.
Теперь давайте разберём, что же из себя собственно представляет наш HTML-документ.
Первая строка:
1 |
<!DOCTYPE html> |
Обозначает версию HTML. В данном случае это HTML5. Есть довольно большое количество видов <!DOCTYPE>, но нам на этом этапе достаточно запомнить один этот.
Вторая строка:
1 |
<html> |
Является началом контейнера, который заключает в себя весь HTML-документ. Обратите внимание, что последняя строка в документе выглядит так:
1 |
</html> |
Она закрывает контейнер html, открытый во второй строке. Такая штука <html>...</html> называется тегом. В нашем документе есть другие теги, которые мы разберём чуть позже: <head>...<head>, <title>...<title>, <meta>, <body>...</body>, <a>...</a> .
Общий вид тегов следующий:
1 2 |
<тег1 атрибут1="значение1" атрибут2="значение2"...> <тег2 атрибут3="Значение3" атрибут4="значение4"...>...</тег2> |
Теги бывают одиночные и парные. Здесь тег1 является одиночным тегом, а тег2 является парным тегом. Парные теги могут включать в себя другие теги или текст. Парные теги всегда имеют закрывающий тег, который похож на открывающий, но добавляется символ «/» после открывающей угловой скобки.
В нашем документе теги <html>, <head>, <title>, <body> и <a> являются парными, а тег <meta> — одиночный.
В третьей строке у нас открывается тег <head>. Тег <head> содержит в себе другие теги, помогающие браузеру отобразить страницу.
Внутри тега <head> у нас расположен тег <title>. Он определяет заголовок, который будет отображаться в качестве названия вкладки браузера. В данном случае это «Заголовок1»:
Следующая строка:
1 |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
Здесь указывается кодировка. Обратите внимание на часть charset=utf-8 . Вместо неё могло быть написано charset=windows-1251 или charset=koi8-r или ещё какая-нибудь другая кодировка.
Дальше тег <head> заканчивается с помощью </head>, и начинается тег <body>, который содержит в себе отображаемое тело документа. У нас тело документа содержит одну строку: «Привет, Мир!».
Тег <a> задаёт ссылку на этот учебник. Смотрите описание в разделе «Ссылки <a></a>».
Абзац <p></p>
С помощью тега <p>…</p> можно делить текст на абзацы. Между абзацами добавляется одна пустая строка. Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>HTML p example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p> Это первый абзац. Здесь можно написать очень много текста. Жил-да-был старик со старухой где-то далеко-далеко. Так далеко, что и не вспомнить уже. </p> <p> Это второй абзац. Обратите внимание на то, что он отделён от первого абзаца одной пустой строкой. А давеча к нам мужик один заходил. Лапти словно пылают, а сам в стельку. </p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#p">Абзац <p></p></a> </body> </html> |
Перевод строки <br>
Тег <br> одиночный. Он задаёт перевод строки. Любое количество пробелов, табуляторов и переводов строки в браузере преобразуются в один пробел, поэтому для вставки перевода строки нужно использовать специальный тег <br>.
Пример:
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 |
<!DOCTYPE html> <html> <head> <title>HTML br example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> Обратите внимание, что все пробелы, табуляторы и переводы строк преобразуются при просмотре в браузере в один пробел. Чтобы вставить перевод строки нужно использовать специальный тег<br> Этот тег вставляет один перевод - строки<br> Вот<br> так.<br> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#br">Перевод строки <br></a> </p> </body> </html> |
Часть текста <span></span>
Парный тег <span>...</span> используется, когда нужно указать отдельный стиль CSS для части текста.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>HTML span example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p> Можно указать <span style="color:#ff0000;">отдельный стиль</span> для части текста. </p> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#span">Часть текста <span></span></a> </p> </body> </html> |
Блок <div></div>
Тег <div>...</div> позволяет сгруппировать элементы и применить к ним какой-нибудь стиль CSS. Это блочный элемент, и он так же, как и <p></p> всегда начинается с новой строки и после него автоматически вставляется перевод строки.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>CSS div example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div style="border : 1px solid #000000;"> содержимое первого div. </div> <div style="background-color:#f0f0f0;"> содержимое второго div. </div> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#div">Блок <div></div></a> </body> </html> |
Предварительно форматированный текст <pre></pre>
Тег <pre>...</pre> позволяет определить блок предварительно форматированного текста. Он обычно отображается моноширинным шрифтом. Внутри этого тега все пробелы, переводы строк и табуляторы сохраняются при выводе страницы. По умолчанию же все пробелы, табуляторы и переводы строк склеиваются в один пробел. Внутри этого тега можно применять другие теги.
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 |
<!DOCTYPE html> <html> <head> <title>HTML pre example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <div> Обычный текст внутри одного div. </div> <pre> Преформатированный текст внутри тега pre </pre> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#pre">Предварительно форматированный текст <pre></pre></a> </p> </body> </html> |
Код <code></code>
Тег <code>...</code> предназначен для отображения куска кода. Он обычно отображается моноширинным шрифтом уменьшенного размера. Все пробелы, табуляторы и переводы строк внутри него склеиваются в один пробел, как это происходит в других элементах, чтобы вывести перевод строки нужно использовать элемент <br>.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>HTML code example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <p> Обычный текст </p> <code> Тег внутри code.<br> Можно писать текст программы.<br> Program lab1;<br> begin<br> {Пробелы склеиваются. Поэтому используем нерастяжимые пробелы.}<br> Writeln('Привет');<br> end.<br> </code> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#code">Код <code></code></a> </p> </body> </html> |
Заголовки <h1></h1>, <h2></h2>…
Всего в HTML существует шесть заголовков. От <h1>...</h1> до <h6>...</h6>. Заголовок <h1>...</h1> называется заголовком первого уровня. Это самый важный заголовок, и он отображается самым большим шрифтом. Заголовок <h6>...</h6> является заголовком шестого уровня. Это наименее значимый заголовок, и он отображается самым мелким шрифтом среди заголовков. Все заголовки — блочные элементы. Они начинаются с новой строки, и после них другие элементы тоже начинаются с новой строки.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>HTML h1, h2, h3, h4, h5, h6 example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <h1>Заголовок 1-го уровня h1</h1> <h2>Заголовок 2-го уровня h2</h2> <h3>Заголовок 3-го уровня h3</h3> <h4>Заголовок 4-го уровня h4</h4> <h5>Заголовок 5-го уровня h5</h5> <h6>Заголовок 6-го уровня h6</h6> <p> Обычный текст. </p> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#h">Заголовки <h1></h1>, <h2></h2>...</a> </p> </body> </html> |
Списки <ol></ol>, <ul></ul>
Тег <ol>...</ol> задаёт упорядоченный список. Элементы в нём имеют нумерацию. Используется когда порядок перечисления элементов имеет значение.
Тег <ul>...</ul> задаёт неупорядоченный список. Используется когда порядок перечисления элементов не имеет значения.
Внутри тегов <ol>...</ol> и <ul>...</ul> пункты списков перечисляются с помощью тега <li>...</li>.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>HTML ol ul example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> Упорядоченный список: <ol> <li>Яйцо</li> <li>Цыплёнок</li> <li>Курица</li> </ol> Неупорядоченный список: <ul> <li>Кошка</li> <li>Собака</li> <li>Суслик</li> </ul> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#olul">Списки <ol></ol>, <ul></ul></a> </p> </body> </html> |
Ссылки <a></a>
С помощью тега <a>...</a> вставляются ссылки. Адрес перехода указывается в атрибуте href, а текст ссылки пишется внутри тега:
1 |
<a href="http://yandex.ru">Яндекс</a> |
Можно делать ссылки на конкретное место в документе, тогда браузер будет прокручивать страницу до этого места. Для этого нужно сначала сделать якорь в этом месте с помощью атрибута name:
1 |
<a name="myplace1"></a> |
Теперь можно сделать ссылку на это место. Для этого нужно использовать адрес <адрес_страницы>#myplace1. Если якорь находится на той же самой странице, то адрес страницы можно опустить.
Либо вместо якоря через тег <a>...</a> можно использовать идентификаторы элементов. Например, если есть div с id="mydiv1", то ссылку можно делать вот так (но этот способ считается устаревшим):
1 2 3 |
<div id="mydiv1"> </div> <a href="#mydiv1">К моему div-у</a> |
Пример:
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 |
<!DOCTYPE html> <html> <head> <title>HTML a example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> </body> <p> <a name="firstp"></a> Первый абзац. </p> <p> <a name="secondp"></a> Второй абзац. </p> <p> <a name="infotext"></a> Может показаться, что переход по ссылкам в этой странице не работает. Но это не так. Попробуйте уменьшить размер окна браузера на столько, чтобы страница не помещалась в него целиком без полос прокрутки. </p> <p> <a href="#firstp">К первому абзацу</a> </p> <p> <a href="https://urvanov.ru/projects/html-examples/a/#secondp">Ко второму абзацу</a> </p> <p> <a href="#infotext">К третьему абзацу</a> </p> <p> <a href="http://yandex.ru">Яндекс</a> </p> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#a">Ссылки <a></a></a> </p> </body> </html> |
Картинки <img>
С помощью тега <img> можно вставить изображение на страницу. Можно использовать картинки в формате GIF, JPEG, SVG, PNG. Адрес изображения указывается с помощью атрибута src. Также нужно обязательно указать атрибут alt, который содержит текст, выводящийся в случае отключённых картинок в браузере. Можно с помощью атрибутов width и height указать ширину и высоту изображения, чтобы по окончании загрузки текст на странице не прыгал из-за изменения размеров области, занимаемой тегом <img>.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>HTML img example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <img alt="картинка" src="image0001.png" width="100" height="100"> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#img">Картинки <img></a> </p> </body> </html> |
Таблицы <table></table>
Тег <table>...</table> позволяет рисовать таблицы. Внутри тега <table>...</table> могут быть несколько элементов. Обычно иерархия там такая:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<table> <thead> <tr> <th>Столбец 1</th> <th>Столбец 2</th> ... </tr> </thead> <tbody> <tr> <td>Данные 1</td> <td>Данные 2</td> ... </tr> <tr> <td>Данные 3</td> <td>Данные 4</td> ... </tr> ... </tbody> </table> |
Внутри <thead>...</thead> объявляется одна или несколько строк (но чаще одна), которая обычно представляет собой шапку таблицы.
Внутри <tbody>...</tbody> объявляются строки таблицы.
Тег <tr>...</tr> представляет собой строки таблицы.
Тег <th>...</th> представляет собой ячейку в шапке таблицы.
Тег <td>...</td> представляет собой ячейку данных.
У тегов <th>...</th> и <td>...</td> есть два важных атрибута: colspan и rowspan. Они указывают, сколько ячеек нужно объединить по горизонтали и по вертикали соответственно.
По умолчанию у ячеек таблицы нет никаких рамок, поэтому нужно использовать свойства CSS border и border-collapse.
Пример:
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 |
<!DOCTYPE html> <html> <head> <title>HTML table example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> table, td, th { border : 1px solid; border-collapse : collapse; } </style> </head> <body> <table> <thead> <tr> <th>Королевство</th> <th>Город</th> <th>Население</th> <th>Эльфы</th> <th>Гномы</th> <th>Золото</th> </tr> </thead> <tbody> <tr> <td rowspan="3">Тридевятое</td> <td>Авалон</td> <td>15 000</td> <td>300</td> <td>254</td> <td>12 кг</td> </tr> <tr> <td>Святоградск</td> <td>7 452</td> <td>12</td> <td>1</td> <td>3 кг</td> </tr> <tr> <td>Итого</td> <td>22452</td> <td colspan="2"></td> <td>15 кг</td> </tr> <tr> <td rowspan="4">Заморское</td> <td>Небесный</td> <td>45 000</td> <td>25 000</td> <td>100</td> <td>78 кг</td> </tr> <tr> <td>Пантеон</td> <td>32 000</td> <td>12 000</td> <td>14 000</td> <td>40 кг</td> </tr> <tr> <td>Ангельск</td> <td>56 000</td> <td>40 000</td> <td>2 000</td> <td>80 кг</td> </tr> <tr> <td>Итого</td> <td>133 000</td> <td colspan="2"></td> <td>198 кг</td> </tr> <tr> <td colspan="2">Итого</td> <td>155 452</td> <td colspan="2"></td> <td>213 кг</td> </tr> </tbody> </table> <p> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#table">Таблицы <table></table></a> </p> </body> </html> |
Формы <form></form>
С помощью тега <form>...</form> можно отправить данные на сервер и получить ответ. Сама форма на странице никак не отображается. На странице может содержаться любое количество форм, но я бы не рекомендовал делать формы вложенными, так как в этом случае в Internet Explorer могут быть проблемы.
У тега <form>...</form> есть несколько важных атрибутов:
action — URL обработчика действий формы.
enctype — Способ кодирования данных формы при отправке на сервер. Возможные значения: application/x-www-form-urlencoded, multipart/form-data, text/plain. По умолчанию используется application/x-www-form-urlencoded, при котором вместо пробелов ставится «+», а символы, которые не могут присутствовать в URL заменяются на шестнадцатеричные коды. Значение multipart/form-data используется для отправки файлов.
method — Метод отправки: get или post. При методе get параметры добавляется к URL после символа вопросительного знака через символ «&». Метод post добавляет параметры к телу запроса, что позволяет обойти ограничение на максимальную длину URL.
target — целевой фрейм, в который нужно загрузить ответ сервера. Можно указывать имя фрейма, указанное в атрибуте name, либо одно из значений _blank (в новом окне), _self (текущее окно), _parent (родительский фрейм), _top (убирает все фреймы и загружает в самом окне).
Внутри <form>...</form> могут содержаться любые теги, но на сервер отправляются данные из элементов <input>.
Основные атрибуты <input>:
name — имя поля при отправке данных на сервер.
type — тип поля. Возможные значения: text (по умолчанию, текстовое поле), password (поле ввода пароля), radio (переключатель), checkbox (флажок), hidden (скрытое поле, не показывается пользователю, но отправляется на сервер), file (для выбора файла при загрузке файла на сервер), submit (кнопка отправки формы), reset (кнопка сброса значений формы) и некоторые другие для ввода даты, времени, выбора цвета и прочее, но мне их ещё ни разу не пришлось использовать.
value — начальное значение в поле.
При отправке на сервер поля text, password, hidden отправляют свои значения.
Поле checkbox отправляет on, если галочка установлена.
Элемент radio отправляет значение value у выбранного элемента.
Для checkbox и radio можно сделать элемент выбранным по умолчанию, добавив к нему checked:
1 |
<input type="checkbox" checked> |
Пример:
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 |
<!DOCTYPE html> <html> <head> <title>HTML form example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <form method="post" action="action.php"> <div> <label for="text1id">text1:</label><input type="text" id="text1id" name="text1" value="text1 value"> </div> <div> <label for="hidden1id">hidden1:</label><input type="hidden" id="hidden1id" name="hidden1" value="hidden1 value"> </div> <div> <label for="password1id">password1:</label><input type="password" id="password1id" name="password1" value="password1 value"> </div> <div> <label for="checkbox1id">checkbox1:</label><input type="checkbox" id="checkbox1id" name="checkbox1"> </div> <div> <label for="radio1value1id">radio1 value1</label><input type="radio" id="radio1value1id" name="radio1" value="radio1 value1" checked> <label for="radio1value2id">radio1 value2</label><input type="radio" id="radio1value2id" name="radio1" value="radio1 value2"> <label for="radio1value3id">radio1 value3</label><input type="radio" id="radio1value3id" name="radio1" value="radio1 value3"> </div> <div> <input type="reset" value="Сбросить значения формы"> <input type="submit" value="Отправить на action.php"> </div> </form> <div> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#form">Формы <form></form></a> </div> </body> </html> |
В этом примере используется новый для нас тег <label>...</label>, который позволяет задать надпись для элемента формы с id, указанным в атрибуте for.
Для этого примера был также составлен файл «action.php»:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>action.php</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <?php print "text1=".$_REQUEST['text1'].'<br>'; print 'hidden1='.$_REQUEST['hidden1'].'<br>'; print 'password1='.$_REQUEST['password1'].'<br>'; print 'checkbox1='.$_REQUEST['checkbox1'].'<br>'; print 'radio1='.$_REQUEST['radio1'].'<br>'; ?> <div> <a href="index.html">назад к форме.</a> </div> </body> </html> |
Фреймы <iframe></iframe>
Тег <iframe>...</iframe> позволяет загружать в область заданных размеров любой другой документ. Основной атрибут — src. Он задаёт адрес подгружаемого элемента.
Пример:
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 |
<!DOCTYPE html> <html> <head> <title>HTML iframe example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> /* Обязательно нужно задать ширину и высоту для iframe*/ iframe { width : 200pt; height : 200pt; } </style> </head> <body> <iframe src="https://urvanov.ru"> Этот текст будет отображаться только в браузерах, которые не поддерживают iframe. </iframe> <iframe src="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/"> </iframe> <div> <a href="https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#iframe">Фреймы <iframe></iframe></a> </div> </body> </html> |
Специальные символы
Некоторые символы невозможно отобразить в HTML обычным способом, поэтому для их отображения нужно применять специальные коды. Такие символы называются «специальными».
Коды некоторых специальных символов:
Символ | Описание | Мнемоника | Код |
---|---|---|---|
Неразрывный пробел | |   | |
< | Меньше чем | < | < |
> | Больше чем | > | > |
© | Знак охраны авторского права | © | © |
® | Зарегистрированный товарный знак | ® | ® |
& | Знак амперсанда | & | & |
« | Левая двойная угловая кавычка. Используется в типографии в качестве кавычек для русского языка. | « | « |
» | Правая двойная угловая кавычка. Используется в типографии в качестве кавычек для русского языка. | » | » |
° | Знак градуса | ° | ° |
„ | Внутренняя открывающая кавычка для русского языка. | „ | „ |
“ | Внутренняя закрывающая кавычка для русского языка. | “ | “ |
Заключение
После прочтения этого учебника у вас должно быть общее представление о HTML, и вы должны уметь составлять простенькие HTML-страницы. Многие аспекты HTML здесь были опущены. Возможно, когда-нибудь я напишу ещё одну статью, в которой опишу недостающие здесь вещи. А пока я рекомендую вам приступить к изучению CSS учебника. Это будет ваш второй шаг в мир WEB.