Элементы html-кода одностраничного сайта

Теперь, когда у Вас есть свой одностраничный сайт, сделанный либо в программе Dreamweaver, либо в SharePoint Designer, Вы можете более внимательно посмотреть на его html-код, попробовать изменить что-то на сайте и посмотреть, как это изменение отражается в коде. И наоборот, можно попробовать что-то изменить в html-коде, и посмотреть, какие изменения произойдут на сайте. Риска никакого нет, даже если что-то произойдет не так, Вы всегда можете отменить операцию.

Где Ваш одностраничный сайт сделан, в каком визуальном редакторе html — не особо важно. Он может быть сделан в программе Dreamweaver, а может быть в сделан в SharePoint Designer, или еще в какой-нибудь программе — суть сделанной работы от этого не меняется. В любом случае визуальный редактор html, которым Вы пользуетесь, на основе того, что Вы делаете, создает соответствующий html-код в файле index.html Вашего одностраничного сайта. Этот код отображается перед Вами так, как он будет отображаться затем в браузере пользователя, который зайдет на Ваш одностраничный сайт в Интернете. В визуальном редакторе html Вы можете это изображение редактировать.

Файл index.html — это, по сути дела, текстовый файл, который можно открыть в обыкновенном блокноте, и редактировать напрямую, если конечно, Вы в коде разбираетесь.

Код html нужно знать — иногда бывают такие ситуации, что просто необходимо напрямую зайти в html-код и что-то в нем подредактировать.

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

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

Выделите в области визуального отображения, например, заголовок. Соответствующая часть html-кода тоже будет выделена. Если Вы посмотрите на этот код, то увидите, что заголовок окружен какими-то элементами. Это — тэги, которые показывают браузеру, что этот текст нужно отображать именно как заголовок, а не просто как обычный текст.

Тэг — это основной элемент html-кода. Все тэги начинаются с открывающей угловой скобки <, и заканчиваются закрывающей угловой скобкой >. Например, тэг заголовка выглядит так: <h1>. Обычно имеются два тэга — открывающий и закрывающий. Закрывающий тэг похож на открывающий, но в нем добавляется слэш (косая черта) после открывающей угловой скобки. Например, закрывающий тэг заголовка выглядит так: </h1>.

Все вместе: открывающий тэг, содержимое и закрывающий тэг, называется элементом или контейнером.

Например, элемент:

<h1> Крупный заголовок </h1>

будет представлен браузером именно как заголовок благодаря тэгам.

<h2> Подзаголовок </h2>

А вот заголовок помельче. Всего существует шесть видов заголовков: от h1 до h6. Самый маленький заголовок h6 выглядит в браузере даже еще мельче, чем обычный текст.

Тэги бывают самые разные, с самыми различными функциями. Например:

<center> содержимое </center> — выравнивает то, что в нем находится, по центру

<p> текст </p> — создает абзац текста

<strong> текст </strong> — выделяет текст жирным шрифтом

<em> текст </em> — делает текст курсивом

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

первая строка <br/>
вторая строка

означает, что в браузере появятся две строки, а не одна.

Также многие  тэги имеют атрибуты — дополнительные параметры. Атрибуты прописываются внутри открывающего тэга и имеют четкие правила написания, которые нельзя нарушать, иначе может ничего не отобразиться. Сначала идет название атрибута, затем знак =, и потом в кавычках пишется значение или свойство атрибута.

Например:

<h1> Заголовок </h1> — заголовок без атрибутов.

<h1 align="center"> Заголовок </h1> — заголовок, выровненный по центру.

Во втором случае атрибуту выравнивание align присвоено свойство center — выравнивание по центру.

Есть тэги, которые сами по себе ничего не изменяют, но служат только для размещения в них каких-то атрибутов. Таковы тэги <div>, <span> и <font>.

Например, тэг <font> в тексте сам по себе ничего не изменяет, но в таком виде:

<font size="5"> текст </font> увеличивает шрифт соответствующего текста.

Тэг <style> тоже сам по себе ничего в тексте не изменит, но в такой строке:

<span class="style9">текст</span> добавляет к тексту определенный стиль, который прописывается в совсем другом месте html-кода, между тэгами <style>.

Там Вы найдете соответствующую строку:

.style9 {
font-family: Arial;
color: #FF0000;
font-size: 14pt;
}
в которой внутри фигурных скобок будут прописаны все атрибуты этого стиля.

Видео о различных элементах html-кода

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

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