Структура html-кода одностраничного сайта
Вы уже знаете различные элементы html-кода одностраничного сайта, рассмотрим теперь html-код сайта подробнее. Запустите визуальный редактор html, которым Вы пользуетесь, это может быть SharePoint Designer, может быть Dreamweaver, и откройте в нем файл index.html своего одностраничного сайта.
Посмотрите на его код. Первый тэг, который прописан в коде — это тэг <!DOCTYPE>, который дает понять браузеру пользователя, к какому типу файл относится. Затем Вы увидите тэг <html>. В самом конце html-кода находится закрывающий тэг </html>. Весь сайт заключен между этими тэгами, которые показывают браузеру, что перед ним — html-документ.
Код одностраничного сайта состоит из двух частей: «головы» и «тела», и выглядит следующим образом:
<html>
<head>
</head>
<body>
</body>
</html>
В элементе кода head (голова) находится название одностраничного сайта, кодировка, стили, мета-тэги для поисковых роботов и так далее — то, что не отображается непосредственно на самой веб-странице.
В элементе кода body (тело) находится то, что на странице отображается: текст, картинки, видео и другие отображаемые элементы.
И в head и в body вложены другие элементы кода, например, в head находится
<title>, который содержит название сайта,
<style>, в котором прописаны стили.
В одном из одиночных тегов <meta/> Вы также найдете кодировку своего одностраничного сайта, как свойство атрибута charset.
Вы можете сами убедиться в том, что все элементы кода вложены друг в друга, как матрешки, и не бывает такого, чтобы они как-то пересекались между собой.
Рассмотрим теперь некоторые элементы кода, которые находятся в 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-код ссылки. Например, если мы укажем адрес: akademalt.png, мы дадим понять, что картинка находится в той же папке, где и файл. А адрес images/akademalt.png указывает на то, что в папке с файлом есть еще одна папка images, а уже в ней данная картинка.
Часто указываются атрибуты width и height — ширина и высота картинки.
Также встречается атрибут alt="текст" и title="текст". Текст, который находится в свойствах этих атрибутов, браузер показывает вместо картинки, если графика браузером не поддерживается. Также этот текст появляется при наведении мышью на картинку. Разные браузеры интерпретируют эти атрибуты по-разному, поэтому если Вы пропишете оба этих атрибута, с одинаковым текстом, то точно не ошибетесь.
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-кода сайта
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Вам понравилась статья? Поделитесь, буду весьма признателен:
Также приглашаю добавиться в друзья в социальных сетях:

Как интересно — основы HTML, полезная вещь, а то не совсем понимаешь и знаешь где оно и что на сайте/блоге находится и что редактировать.
С вами надеюсь хоть основные теги и атрибуты узнать!
Чтобы сделать самостоятельно одно-много страничный сайт, необходимо знать хоть какие то навыки и основы HTML, CSS, PhP программирования.
Нужно сначала попрактиковаться на практике с помощью некоторых готовых уже примеров проверенного в работе кода сначала на компьютере, применяя виртуальный сервер, программу Денвер, которая уже имеется без применения установки на компьютер.
Все проделанные Вами работы в создании сайта будут отображаться идентично что в открытом браузере на компьютере, то одинаково отобразятся и во всех Интернет ресурсах.
Выберите рубрику
Успех и личностный рост
Компьютерная Азбука
Бизнес в Интернете
Продвижение сайтов
Инвестиции
Бизнес на земле
Интересно
Подписка на pro444.ru
Что у нас
часто ищут
Бесплатные сервисы