Структура html-кода одностраничного сайта

<Предыдущая статья 2 комментария Следующая статья>

Вы уже знаете различные элементы html-кода одностраничного сайта, рассмотрим теперь html-код сайта подробнее. Запустите визуальный редактор html, которым Вы пользуетесь, это может быть SharePoint Designer, может быть Dreamweaver, и откройте в нем файл index.html своего одностраничного сайта.

Посмотрите на его код. Первый тэг, который прописан в коде — это тэг <!DOCTYPE>, который дает понять браузеру пользователя, к какому типу файл относится. Затем Вы увидите тэг <html>. В самом конце html-кода находится закрывающий тэг </html>. Весь сайт заключен между этими тэгами, которые показывают браузеру, что перед ним — html-документ.

Код одностраничного сайта состоит из двух частей: «головы» и «тела», и выглядит следующим образом:

части html-кода сайта

В элементе кода head (голова) находится название одностраничного сайта, кодировка, стили, мета-тэги для поисковых роботов и так далее — то, что не отображается непосредственно на самой веб-странице.

В элементе кода body (тело) находится то, что на странице отображается: текст, картинки, видео и другие отображаемые элементы.

И в head и в body вложены другие элементы кода, например, в head находится

<title>, который содержит название сайта,

<style>, в котором прописаны стили.

В одном из одиночных тегов <meta/> Вы также найдете кодировку своего одностраничного сайта, как свойство атрибута charset.

вложение тэгов в html-коде Вы можете сами убедиться в том, что все элементы кода вложены друг в друга, как матрешки, и не бывает такого, чтобы они как-то пересекались между собой.

Рассмотрим теперь некоторые элементы кода, которые находятся в body, и их свойства.

html-код ссылки

Тэг ссылки <a> имеет различные атрибуты, и основной атрибут — это href, который указывает, куда будет направлен посетитель, который на эту ссылку нажал.

К примеру, в элементе:

<a href="http://pro444.ru"> Блог о бизнесе в Интернете </a>

атрибут href указывает, что ссылка Блог о бизнесе в Интернете приведет того, кто по ней кликнет, на адрес http://pro444.ru.

Теперь, предположим, Вы хотите, чтобы ссылка открывалась в новой вкладке браузера. Для этого нужно в тэге ссылки прописать атрибут targer со свойством _blank. Выглядеть это будет так:

<a href="http://pro444.ru" target="_blank"> Блог о бизнесе в Интернете </a>

html-код картинки

Одиночный тэг картинки <img/> указывает браузеру, что в том месте, где этот тэг находится, должна быть картинка. Адрес картинки указывается атрибутом src. Сам адрес может быть абсолютным, например, таким:

http://pro444.ru/wp-content/uploads/2011/06/akademalt.png Данный адрес означает, что картинка akademalt.png находится во всех папках, которые указаны справа налево, и все это находится на хостинге.

html-код для сайта

Также адрес может быть относительным, относительно файла, где находится html-код ссылки. Например, если мы укажем адрес: akademalt.png, мы дадим понять, что картинка находится в той же папке, где и файл. А адрес images/akademalt.png указывает на то, что в папке с файлом есть еще одна папка images, а уже в ней данная картинка.

html-код для сайта

Часто указываются атрибуты width и height — ширина и высота картинки.

Также встречается атрибут alt="текст" и title="текст". Текст, который находится в свойствах этих атрибутов, браузер показывает вместо картинки, если графика браузером не поддерживается. Также этот текст появляется при наведении мышью на картинку. Разные браузеры интерпретируют эти атрибуты по-разному, поэтому если Вы пропишете оба этих атрибута, с одинаковым текстом, то точно не ошибетесь.

html-код таблицы

html-код сайта Таблица <table> содержит в себе строки <tr>, а каждая строка содержит ячейки <td>. Например, структура таблицы из двух строк и двух столбцов выглядит так:

<table>
<tr>
<td>ячейка1</td><td>ячейка2</td>
</tr>
<tr>
<td>ячейка3</td><td>ячейка4</td>
</tr>
</table>

Тэг <table> может иметь множество атрибутов, например:

align="center" — выравнивание, в данном случае по центру
bgcolor="#FFFFFF" — цвет фона таблицы (в примере указан цвет белый)
bordercolor="#C0C0C0" — цвет границы таблицы (указан серый)
width="950px" — ширина в пикселях
border="10" — толщина границы в пикселях
cellpadding="10" — расстояние между границами ячеек и их содержимым
cellspacing="0" — расстояние между границами соседних ячеек, определяет, насколько сами ячейки отодвинуты друг от друга

Видео о структуре html-кода сайта

Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:

Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья

Следующая статья >>

Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:

2 комментария »

Виктория пишет:

Как интересно — основы HTML, полезная вещь, а то не совсем понимаешь и знаешь где оно и что на сайте/блоге находится и что редактировать.

С вами надеюсь хоть основные теги и атрибуты узнать!

# 8 февраля 2013 в 18:36

Константин пишет:

Чтобы сделать самостоятельно одно-много страничный сайт, необходимо знать хоть какие то навыки и основы HTML, CSS, PhP программирования.

Нужно сначала попрактиковаться на практике с помощью некоторых готовых уже примеров проверенного в работе кода сначала на компьютере, применяя виртуальный сервер, программу Денвер, которая уже имеется без применения установки на компьютер.

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

# 19 апреля 2013 в 11:54