Главная » Бизнес в Интернете

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

Например:

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

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

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

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

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

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

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

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

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

.style9 {
font-family: Arial;
color: #FF0000;
font-size: 14pt;
}

в которой внутри фигурных скобок будут прописаны все атрибуты этого стиля.

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


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

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

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


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

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

6 комментариев »

  • Андрей Сосевич пишет:

    На данный момент для создания одностраничников пользуюсь программой WebPageMaker, о которой когда-то рассказывал Тим Ворон. О SharePoint Designer не слышал, но буду иметь ввиду.

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

  • Тамара пишет:

    Спасибо Александр за подробное разьяснение про теги html кода.Я делаю одностраничный сайт в программе Dreamweaver. Но в видео узнала про теги для заголовка.

  • Anna пишет:

    Александр, здравствуйте! Вот Вы — профи, ничего не скажешь. Всё в ваших руках и словах так просто.Для меня HTML-код, это как английский язык без словаря и перевода. Понимаю, что нужно знать, но всегда очень боюсь что-то делать в нём. Нужно учиться, учиться, учиться...Благодарю за статью, есть к кому обратиться за помощью.

  • Александр Ризун (автор) пишет:

    Здравствуйте, Анна! Не нужно бояться, начинайте делать, и все будет получаться.

  • Алена пишет:

    Здравствуйте.а как сделать так чтобы был фон темного цвета а там где текст лист был белым

  • Александр Ризун (автор) пишет:

    Здравствуйте! сделайте таблицу, и в нее поместите текст. Фон всего документа сделайте темным, а фон таблицы — белым.

Оставьте свой комментарий и ответный визит Вам обеспечен