Category Archives: Учебник HTML

Таблицы

Как уже говорилось в первом уроке «С чего начать?», структуру сайта легко представить в виде таблицы. Рассмотрим эту тему подробнее.

Создать таблицу на нашей страничке можно при помощи тега <table></table>.

Картинки

В этом уроке мы научимся размещать на сайте изображения (файлы с расширением jpg, gif, png, bmp и т.п.). А также делать так, чтобы картинка была ссылкой.

Возьмите понравившуюся Вам картинку или фотографию, сохраните ее в той же папке, где лежит файл index.html под именем picture.jpg.

Ссылки

Сайт как правило состоит из нескольких страниц. Главная страница обычно – index.html.

Представим, что у нас на сайте есть также страничка «Контакты».

Шрифты

Итак, мы подошли к очень важному уроку с точки зрения дизайна сайта. Это использование шрифтов.

Для того, чтобы все пользователи могли видеть Вашу страничку, необходимо пользоваться стандартными шрифтами. К таким шрифтам относятся:

Прочие теги для форматирования

Рассмотрим еще несколько полезных тегов для форматирования.

Линия.

Тег <hr>используется для создания горизонтальной линии в документе. Пример использования есть в уроке «Декорирование текста». По умолчанию линия будет шириной 100% от размера области в которой она размещается и будет выглядеть, как «канавка». Для данного тега можно использовать атрибут width (ширина), уже знакомый нам align и size (размер, в данном случае высота), а также noshade (отсутствие тени):

Спецсимволы

Для отображения спецсимволов применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). Ниже приведена таблица со спецсимволами:

Декорирование текста

Этот урок совсем легкий.

Жирный, курсив и подчеркивание.

Чтобы сделать текст жирным, достаточно в нужном месте открыть и закрыть тег <b> bold – жирный или <strong>:

<p>основной текст <b>жирный текст</b> продолжение основного текста</p>

Размер текста (шрифта)

В предыдущем уроке мы научились выравнивать текст. В этом уроке мы научимся устанавливать тексту нужный размер.

Для этого можно использовать, например, заголовки <hi></hi>:

<h1> текст </h1>
<h2> текст </h2>
<h3> текст </h3>
<h4> текст </h4>
<h5> текст </h5>
<h6> текст </h6>

Выравнивание текста

В предыдущих уроках мы попробовали разместить на нашем сайте текст. Это также можно сделать при помощи тега <p></p> – абзац (или параграф).

Фон

В предыдущем уроке мы потренировались раскрашивать текст различными цветами.

В этом уроке мы научимся раскрашивать фон.

Цвета

Варианты записи цвета.

Есть несколько вариантов записи цвета в HTML.

Цветовая модель RGB (Red, Green, Blue) была разработана для описания цвета на цветном мониторе.

Первый код

Начнем наши уроки по созданию сайтов.

Совсем не обязательно сразу выкладывать свой сайт в Интернет. О том, как разместить сайт в интернете мы поговорим позже.

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

С чего начать?

С чего начинается разработка сайта?

Естественно с идеи о том, каким будет Ваш сайт.

Вы должны определиться со следующими параметрами:

  • Тематика сайта, или о чем будет Ваш сайт, или чего Вы вообще хотите от своего сайта

  • Какие сервисы будут на вашем сайте (фотогалерея, форум, интернет-магазин и пр.)

  • Структура сайта, хотя бы приблизительно

  • Дизайн сайта