Простой пример HTML странички

Анатолий Бузов — Tue, 13 Nov 2018 08:42:02 +0000

Ранее я писал о редакторах, а именно блокноте и notepad++. Перейдем к рассмотрению структуры странички.

С чего стоит начать

Все HTML-документы должны начинаться с объявления типа документа: . При этом если вы не укажете тип документа, но сохраните в формате html то в браузере страница будет отображаться корректно, но лучше сразу приучить себя указывать тип.

Зачем его указывать? Указание типа необходимо для того, что бы браузер понимал, какую версию HTML вы используете на своей страничке. А так же для задания типа синтаксиса. Но не суть, ведь цель этого материала показать код простой страницы.

Документ HTML начинается с и заканчивается .

Заголовок, который отображается на вкладке браузера, заключается между тегами и .

Тег находится внутри тега <head></p> <p>Видимая часть документа HTML находится между <body> и </ body>. То есть это содержимое, которое будет отображаться в браузере.</p> <p>Пример:</p> <pre> </pre> <h1>Заголовок</h1> <p> </p> <p>Параграф</p> <p> </p> <pre> </pre> <p><h1> — тег заголовка html. Тег имеет уровни от 1 до 6.</p> <p>Пример:</p> <pre> </pre> <h1>Заголовок 1</h1> <p> </p> <p>Параграф с описанием</p> <p> </p> <h2>Подзаголовок</h2> <p> </p> <p>Параграф с описанием подзаголовка</p> <p> </p> <h2>Подзаголовок 2</h2> <p> </p> <p>Параграф с описанием подзаголовка 2</p> <p> </p> <pre> </pre> <p>Тег <p> — параграф в html.</p> <p>В принципе работу параграфа демонстрирует предыдущий пример.</p> <p>Далее в данной категории я буду приводить подробное описание и примеры различных тегов html.</p> </article> <article> <h1>Введение в HTML</h1> <p>Анатолий Бузов — Fri, 09 Nov 2018 11:24:43 +0000</p> <p>HTML (от англ. HyperText Markup Language) — язык гипертекстовой разметки. Он описывает структуру веб-страниц с при помощи тегов.<br /> Теги обозначают фрагменты контента, такие как «заголовок», «абзац», «таблица».<br /> Браузеры не отображают теги HTML, но используют их для отображения содержимого (контента) страницы.<span id="more-943"></span></p> <p>Пример простого HTML документа:</p> <pre class=""> </pre> <h1>Мой первый заголовок</h1> <p> </p> <p>Мой первый параграф</p> <p> </p> <pre class=""> </pre> <p>Разъяснение примера.</p> <p>Объявление<! DOCTYPE html> определяет этот документ как HTML5.<br /> Элемент <html> является корневым элементом HTML-страницы.<br /> Элемент <head> содержит мета информацию о документе.<br /> Элемент <title> указывает заголовок документа.<br /> Элемент <body> содержит видимое содержимое страницы.<br /> Элемент <h1> определяет заголовок.<br /> Элемент <p> определяет абзац.</p> <h2>HTML-теги</h2> <p>HTML-теги — это имена элементов, окруженные угловыми скобками:</p> <p><имя тега> содержимое идет здесь … </ имя тега></p> <p>HTML-теги обычно бывают с закрывающими тегами, такими как <p> и </ p><br /> Первый тег — это открывающий тег, второй тег — закрывающий.<br /> Закрывающий тег отличается от открывающего наличием косой черты.</p> <h3>Браузеры</h3> <p>Браузер не отображает теги HTML, но использует их для отображение содержимого страницы.</p> <figure id="attachment_949" aria-describedby="caption-attachment-949" style="width: 341px" class="wp-caption aligncenter"><figcaption id="caption-attachment-949" class="wp-caption-text">Результат выполнения кода браузером</figcaption></figure> <p>В браузере отображается только контент внутри раздела <body> (белая область выше).</p> <h3>Структура HTML страницы схематично</h3> <p>Визуально страница имеет следующую структуру:</p> <figure id="attachment_951" aria-describedby="caption-attachment-951" style="width: 916px" class="wp-caption aligncenter"><figcaption id="caption-attachment-951" class="wp-caption-text">Структура HTML страницы</figcaption></figure> <h3>Объявление типа документа <! DOCTYPE></h3> <p>Объявление типа документа <! DOCTYPE> позволяет браузерам правильно отображать веб-страницы.</p> <p>Он должен появляться только один раз, в верхней части страницы (перед любыми тегами HTML).</p> <p>Объявление <! DOCTYPE> не чувствительно к регистру.</p> <p>Объявление <! DOCTYPE> для HTML5:</p> <pre class=""></pre> <h3>Версии HTML</h3> <p>С первых дней существования Интернета было много версий HTML, а именно:</p> <table class="table table-bordered" width="100%"> <tbody> <tr> <th>Версия</th> <th>Год</th> </tr> <tr> <td>HTML</td> <td>1991</td> </tr> <tr> <td>HTML 2.0</td> <td>1995</td> </tr> <tr> <td>HTML 3.2</td> <td>1997</td> </tr> <tr> <td>HTML 4.01</td> <td>1999</td> </tr> <tr> <td>XHTML</td> <td>2000</td> </tr> <tr> <td>HTML5</td> <td>2014</td> </tr> </tbody> </table> </article> </main></body></html>

Самоучитель HTML — Блог Анатолия Бузова

Простой пример HTML странички

С чего стоит начать