Учебник HTML

HTML (HyperText Markup Language) — стандартный язык разметки документов, с помощью которого составляются страницы сайтов сети Интернет.

Вовсе не обязательно каждому человеку знать HTML, но иметь представлением о нём будет полезно. Здесь я составлю небольшой учебник для начинающих, который в дальнейшем, возможно, буду использовать для повторения.

Для изучения HTML понадобятся:

Содержание:

  1. Привет, Мир!
  2. Абзац <p></p>
  3. Перевод строки <br>
  4. Часть текста <span></span>
  5. Блок <div></div>
  6. Предварительно форматированный текст <pre></pre>
  7. Код <code></code>
  8. Заголовки <h1></h1>, <h2></h2>…
  9. Списки <ol></ol>, <ul></ul>
  10. Ссылки <a></a>
  11. Картинки <img>
  12. Таблицы <table></table>
  13. Формы <form></form>
  14. Фреймы <iframe></iframe>
  15. Специальные символы
  16. Заключение

Привет, Мир!

Начнём с самого простого документа. Откройте текстовый редактор и скопируйте туда вот этот код:

Сохраните его в файл «hello-world.html». Принято, что HTML-документы имеют расширение «.htm» или «.html». С помощью этого расширения операционная система сможет распознать, что этот файл является HTML-документом, и будет открывать его браузером.

При сохранении нужно указать кодировку utf-8. Вообще HTML-документ может иметь любую кодировку, главное правильно указать её в строке

Но я бы рекомендовал всегда использовать utf-8, поскольку этим решаются многие проблемы с кодировкой.

Чтобы выбрать кодировку в Notepad++ нужно выбрать в меню «Encoding» и кликнуть на пункт «Convert to UTF-8».

notepad++ Convert to UTF-8

Теперь откройте сохранённый файл браузером. Должна получиться страница вот такого вида.

Ни в коем случае не переопределяйте программу по умолчанию для файлов «*.html» и «*.html». Для последующего редактирования открывайте файл с помощью «Edit with Notepad++» в контекстном меню файла или с помощью меню «Файл» -> «Открыть» вашего текстового редактора.

Edit with notepad++

Теперь давайте разберём, что же из себя собственно представляет наш HTML-документ.

Первая строка:

Обозначает версию HTML. В данном случае это HTML5. Есть довольно большое количество видов <!DOCTYPE>, но нам на этом этапе достаточно запомнить один этот.

Вторая строка:

Является началом контейнера, который заключает в себя весь HTML-документ. Обратите внимание, что последняя строка в документе выглядит так:

Она закрывает контейнер html, открытый во второй строке. Такая штука <html>...</html>  называется тегом. В нашем документе есть другие теги, которые мы разберём чуть позже: <head>...<head>, <title>...<title>, <meta>, <body>...</body>, <a>...</a> .

Общий вид тегов следующий:

Теги бывают одиночные и парные. Здесь тег1 является одиночным тегом, а тег2 является парным тегом. Парные теги могут включать в себя другие теги или текст. Парные теги всегда имеют закрывающий тег, который похож на открывающий, но добавляется символ «/» после открывающей угловой скобки.

В нашем документе теги <html>, <head>, <title>, <body>  и <a>  являются парными, а тег <meta>  — одиночный.

В третьей строке у нас открывается тег <head>. Тег <head>  содержит в себе другие теги, помогающие браузеру отобразить страницу.

Внутри тега <head>  у нас расположен тег <title>. Он определяет заголовок, который будет отображаться в качестве названия вкладки браузера. В данном случае это «Заголовок1»:

HTML title

Следующая строка:

Здесь указывается кодировка. Обратите внимание на часть charset=utf-8 . Вместо неё могло быть написано charset=windows-1251  или charset=koi8-r или ещё какая-нибудь другая кодировка.

Дальше тег <head>  заканчивается с помощью </head>, и начинается тег <body>, который содержит в себе отображаемое тело документа. У нас тело документа содержит одну строку: «Привет, Мир!».

Тег <a>  задаёт ссылку на этот учебник. Смотрите описание в разделе «Ссылки <a></a>».

Абзац <p></p>

С помощью тега <p>…</p> можно делить текст на абзацы. Между абзацами добавляется одна пустая строка. Пример:

Посмотреть результат.

Перевод строки <br>

Тег <br>  одиночный. Он задаёт перевод строки. Любое количество пробелов, табуляторов и переводов строки в браузере преобразуются в один пробел, поэтому для вставки перевода строки нужно использовать специальный тег <br>.

Пример:

Посмотреть результат.

Часть текста <span></span>

Парный тег <span>...</span>  используется, когда нужно указать отдельный стиль CSS для части текста.

Пример:

Посмотреть результат.

Блок <div></div>

Тег <div>...</div>  позволяет сгруппировать элементы и применить к ним какой-нибудь стиль CSS. Это блочный элемент, и он так же, как и <p></p>  всегда начинается с новой строки и после него автоматически вставляется перевод строки.

Пример:

Посмотреть результат.

Предварительно форматированный текст <pre></pre>

Тег <pre>...</pre> позволяет определить блок предварительно форматированного текста. Он обычно отображается моноширинным шрифтом. Внутри этого тега все пробелы, переводы строк и табуляторы сохраняются при выводе страницы. По умолчанию же все пробелы, табуляторы и переводы строк склеиваются в один пробел. Внутри этого тега можно применять другие теги.

Посмотреть результат.

Код <code></code>

Тег <code>...</code>  предназначен для отображения куска кода. Он обычно отображается моноширинным шрифтом уменьшенного размера. Все пробелы, табуляторы и переводы строк внутри него склеиваются в один пробел, как это происходит в других элементах, чтобы вывести перевод строки нужно использовать элемент <br>.

Пример:

Посмотреть результат.

Заголовки <h1></h1>, <h2></h2>…

Всего в HTML существует шесть заголовков. От <h1>...</h1>  до <h6>...</h6>. Заголовок <h1>...</h1>  называется заголовком первого уровня. Это самый важный заголовок, и он отображается самым большим шрифтом. Заголовок <h6>...</h6>  является заголовком шестого уровня. Это наименее значимый заголовок, и он отображается самым мелким шрифтом среди заголовков. Все заголовки — блочные элементы. Они начинаются с новой строки, и после них другие элементы тоже начинаются с новой строки.

Пример:

Посмотреть результат.

Списки <ol></ol>, <ul></ul>

Тег <ol>...</ol>  задаёт упорядоченный список. Элементы в нём имеют нумерацию. Используется когда порядок перечисления элементов имеет значение.

Тег <ul>...</ul>  задаёт неупорядоченный список. Используется когда порядок перечисления элементов не имеет значения.

Внутри тегов <ol>...</ol>  и <ul>...</ul>  пункты списков перечисляются с помощью тега <li>...</li>.

Пример:

Посмотреть результат.

Ссылки <a></a>

С помощью тега <a>...</a>  вставляются ссылки. Адрес перехода указывается в атрибуте href, а текст ссылки пишется внутри тега:

Можно делать ссылки на конкретное место в документе, тогда браузер будет прокручивать страницу до этого места. Для этого нужно сначала сделать якорь в этом месте с помощью атрибута name:

Теперь можно сделать ссылку на это место. Для этого нужно использовать адрес <адрес_страницы>#myplace1. Если якорь находится на той же самой странице, то адрес страницы можно опустить.

Либо вместо якоря через тег  <a>...</a> можно использовать идентификаторы элементов. Например, если есть div с id="mydiv1", то ссылку можно делать вот так (но этот способ считается устаревшим):

Пример:

Посмотреть результат.

Картинки <img>

С помощью тега <img>  можно вставить изображение на страницу. Можно использовать картинки в формате GIF, JPEG, SVG, PNG. Адрес изображения указывается с помощью атрибута src. Также нужно обязательно указать атрибут alt, который содержит текст, выводящийся в случае отключённых картинок в браузере. Можно с помощью атрибутов width  и height  указать ширину и высоту изображения, чтобы по окончании загрузки текст на странице не прыгал из-за изменения размеров области, занимаемой тегом <img>.

Пример:

Посмотреть результат.

Таблицы <table></table>

Тег <table>...</table>  позволяет рисовать таблицы. Внутри тега <table>...</table>  могут быть несколько элементов. Обычно иерархия там такая:

Внутри <thead>...</thead>  объявляется одна или несколько строк (но чаще одна), которая обычно представляет собой шапку таблицы.

Внутри <tbody>...</tbody>  объявляются строки таблицы.

Тег <tr>...</tr>  представляет собой строки таблицы.

Тег <th>...</th>  представляет собой ячейку в шапке таблицы.

Тег <td>...</td>  представляет собой ячейку данных.

У тегов <th>...</th>  и <td>...</td>  есть два важных атрибута: colspan  и rowspan. Они указывают, сколько ячеек нужно объединить по горизонтали и по вертикали соответственно.

По умолчанию у ячеек таблицы нет никаких рамок, поэтому нужно использовать свойства CSS border и border-collapse.

Пример:

Посмотреть результат.

Формы <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:

Пример:

В этом примере используется новый для нас тег <label>...</label>, который позволяет задать надпись для элемента формы с id, указанным в атрибуте for.

Для этого примера был также составлен файл «action.php»:

Посмотреть результат.

Фреймы <iframe></iframe>

Тег <iframe>...</iframe> позволяет загружать в область заданных размеров любой другой документ. Основной атрибут — src. Он задаёт адрес подгружаемого элемента.

Пример:

Посмотреть результат.

Специальные символы

Некоторые символы невозможно отобразить в HTML обычным способом, поэтому для их отображения нужно применять специальные коды. Такие символы называются «специальными».

Коды некоторых специальных символов:

Символ Описание Мнемоника Код
Неразрывный пробел &nbsp; &#160;
< Меньше чем &lt; &#60;
> Больше чем &gt; &#62;
© Знак охраны авторского права &copy; &#169;
® Зарегистрированный товарный знак &reg; &#174;
& Знак амперсанда &amp; &#38;
« Левая двойная угловая кавычка. Используется в типографии в качестве кавычек для русского языка. &laquo; &#171;
» Правая двойная угловая кавычка. Используется в типографии в качестве кавычек для русского языка. &raquo; &#187;
° Знак градуса &deg; &#176;
Внутренняя открывающая кавычка для русского языка. &bdquo; &#8222;
Внутренняя закрывающая кавычка для русского языка. &ldquo; &#8220;

Посмотреть результат.

Заключение

После прочтения этого учебника у вас должно быть общее представление о HTML, и вы должны уметь составлять простенькие HTML-страницы. Многие аспекты HTML здесь были опущены. Возможно, когда-нибудь я напишу ещё одну статью, в которой опишу недостающие здесь вещи. А пока я рекомендую вам приступить к изучению CSS учебника. Это будет ваш второй шаг в мир WEB.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *