Файл: Основы программирования на языке HTML (Создание WEB-сайта).pdf

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

Блок контента удалось поместить точно справа, без использования таблиц, за счёт тэга float, который выровнял блок меню слева, а блок контента справа относительно блока меню.

Кнопки имеют чёрный цвет, но при наведении указателя фон меняется на белый, а цвет текста на чёрный.

Заключение

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

В процессе создания WEB-страницы я познакомился с методом программирования HTML, научился создавать WEB-страницы и использовать базовые теги. Работать с файлами разных форматов и расширений для корректного отображения в среде интернета.

Список использованной литературы

1. Алленова Наталья - Самоучитель по html.

2. Мальчук Е. - HTML и CSS. Самоучитель.

Приложение

<HTML>

<HEAD>

<TITLE>Тестовый сайт</TITLE>

/* Блок названия страницы */

#top {

/* Задаём шрифт TNR */

font-family: Times New Roman;

/* Делаем текст жирным */

font-weight: bold;

/* Делаем текст красным */

color: #ff0000;

/* Выравниваем текст по центру */

text-align: center;

/* Отступаем от верха страницы до блока 10 пикс. */

margin-top: 10px;

/* Делаем видимую грань блока сверху (так как ширина блока не задана, блок имеет ширину по экрану */

border-top: 1px solid #cccccc;

/* Отступ внутри блока сверху */

padding-top: 10px;

/* Граница блока снизу */

border-bottom: 1px solid #cccccc;

/* Отступ внутри блока снизу */

padding-bottom: 10px;

}

/* Блок меню с позиционированием слева - для обтекания справа блоком контента */

#menu {

margin-top: 10px;

float: left;

width: 250px;

margin-right: 20px;

border-right: 1px solid #ccc;

/* Блок ссылок - для создания "кнопок" */

}

#link {

width: 200px;

margin: 5px;

padding: 5px;

background-color: #000;

color: #fff;

}

/* Блок ссылок при навидении указателя - якобы "кнопка" реагирует */

#link:hover{

color: #000;

background-color: #fff;

}

/* Заголовок меню */

#menu_top {

width: 200px;

padding: 5px;

margin: 5px;

text-align: center;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

/* Блок с контентом */

#content {

margin-top: 20px;

with: 70%;

}

/* Низ страницы */

#bottom {

margin: 20px;

border-top: 1px solid #ccc;

padding: 10px;

text-align: center;

color: #00cccc;

}

/* Убираем у ссылок подчёркивание */

a {

text-decoration: none;

}

</style>

</HEAD>

<BODY>

<div id="top">ТЕСТОВЫЙ САЙТ</div>

<div id="menu_top">МЕНЮ САЙТА</div>

<a href="#reg"><div id="link">Регистрация</div></a>

<a href="#inf"><div id="link">Информация</div></a>

<a href="#pr"><div id="link">Прайс</div></a>

<a href="#msg"><div id="link">Общение</div></a>

</div>

Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.

</div>