Горизонтальное выравнивание объектов

ВВЕДЕНИЕ

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

Цель курсовой работы:

изучить средства создания сайта: язык HTML и CSS;

- разработка сайта «Салон сотовой связи».

Для достижения поставленной цели необходимо решить следующие задачи:

разработать структуру сайта;

выбрать средства программирования, наиболее подходящие для создания сайта;

создать сайт организации «Салон сотовой связи Мобител»;

Для разработки был выбран язык гиперстекстовой разметки HTML потому что этостандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. Он прост и в изучении и в применении.

Так же будут использованы каскадные таблицы стилей. CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью CSS является разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое производится с помощью формального языка CSS). Такое разделение увеличивает доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

Горизонтальное выравнивание объектов

Выравнивать блочные элементы (таблицы, изображения, объекты, абзацы и т.д.) можно с помощью атрибута align <https://citforum.ru/internet/html40/present/graphics.html>.

Хотя этот атрибут может устанавливаться для многих элементов HTML, диапазон его возможных значений в разных элементах может быть различным. Здесь обсуждается только значение атрибута align для текста.

Определения атрибутов

= left|center|right|justify [CI] <https://citforum.ru/internet/html40/types.html>

Нежелателен. <https://citforum.ru/internet/html40/conform.html>

Этот атрибут задает горизонтальное выравнивание своего элемента относительно окружающего контекста.

Возможные значения:

· left: строки текста выравниваются по левому краю.

· center: строки текста выравниваются по центру.

· right: строки текста выравниваются по правому краю.

· justify: строки текста выравниваются по обоим краям.

Значение по умолчанию зависит от общего направления текста.

Для текста, направленного слева направо, по умолчанию используется значение align=left, я для текста, направленного справа налево - align=right.

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:

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

<H1 align="center"> How to Carve Wood </H1>

С использованием CSS, например, Вы можете достичь того же эффекта следующим образом:

<HEAD>

<TITLE>How to Carve Wood</TITLE>

<STYLE type="text/css">{ text-align: center}

</STYLE>

<BODY>

<H1> How to Carve Wood </H1>

Будут выровнены все объявления H1 <https://citforum.ru/internet/html40/struct/global.html>. Вы можете ограничить область действия стиля, установив атрибут class <https://citforum.ru/internet/html40/struct/global.html>:

<HEAD>

<TITLE>How to Carve Wood</TITLE>

<STYLE type="text/css">.wood {text-align: center}

</STYLE>

<BODY>

<H1 class="wood"> How to Carve Wood </H1>

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:

Аналогично, чтобы выровнять абзац по правому краю с помощью атрибута HTML align <https://citforum.ru/internet/html40/present/graphics.html> можно записать:

<P align="right">...Текст абзаца...

а с использованием CSS:

<HEAD>

<TITLE>How to Carve Wood</TITLE>

<STYLE type="text/css">.mypar {text-align: right}

</STYLE>

<BODY>

<P class="mypar">...Текст абзаца...

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:

Чтобы выровнять по правому краю ряд абзацев, сгруппируйте их с помощью элемента DIV <https://citforum.ru/internet/html40/struct/global.html>:

<P>...текст первого абзаца...

<P>...текст второго абзаца...

<P>...текст третьего абзаца...

</DIV>

С использованием CSS свойство выравнивания текста наследуется от родительского элемента, поэтому Вы можете использовать:

<HEAD>

<TITLE>How to Carve Wood</TITLE>

<STYLE type="text/css">.mypars {text-align: right}

</STYLE>

<BODY>

<P>...текст первого абзаца...

<P>...текст второго абзаца...

<P>...текст третьего абзаца...

</DIV>

Чтобы отцентрировать с использованием CSS весь документ

<HEAD>

<TITLE>How to Carve Wood</TITLE>

<STYLE type="text/css">{text-align: center}

</STYLE>

<BODY>

.тело документа отцентрировано...

</BODY>

Использование элемента CENTER абсолютно эквивалентно использованию элемента DIV <https://citforum.ru/internet/html40/struct/global.html> с атрибутом align <https://citforum.ru/internet/html40/present/graphics.html>, для которого установлено значение "center". Использование элемента CENTER <https://citforum.ru/internet/html40/present/graphics.html> нежелательно <https://citforum.ru/internet/html40/conform.html>.

Создание формы

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

Пользователь заполняет форму и нажимает кнопку Send (отправить), данные обрабатываеются специальной программой (скриптом) на сервере, и мы получаем на адрес техподдержки вопросы пользователей:-)

Создание форм начинается с элемента

<form>

</form>

У элемента формы form существуют два обязательных атрибута metod и action.- атрибут определяет способ, с помощью которого будет осуществляться связь между формой и Web сервером. Атрибут может принимать значение "get" и "post" (если атрибут не указан явно, его значение по умолчанию ="get").

action - значением атрибута action является конкретный адрес скрипта, обрабатывающего данные.

Атрибуты записываются в тег <form>, например так:

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

Текстовое поле

Для создания поля ввода используют элемент input с атрибутом type.может принимать различные значения. Для самого простого поля ввода текста атрибут type будет иметь значение text.

Нпример, html код

<b>Зaполните Ваши данные:</b>

Имя: <input type=text maxlength=25 size=20>

Фамилия:<input type=text maxlength=25 size=20>

</form>

Таблица 1 - значения параметров

Параметр	Описание
size=...	Ширина поля.
maxlength=...	Максимальное количество символов разрешенных в тексте. Если этот параметр опустить, то можно вводить строку длинее самого поля.
name=...	Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
value=...	Начальный текст содержащий в поле.
align=...	Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений.

Поле для пароля

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

Задается кодом

Например:

<b>Логин: </b><input type=text maxlength=25 size=20 name="text">

<b>Пароль:</b> <input type=password maxlength=15 size=20 name="pass">

</form>

Многострочный текст

Для возможности введения в поле несколько строк текста используем тег textarea.

Например:

<b>Введите ваш отзыв: </b>

</form>

каскадный таблица сайт телефон

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

Таблица 2 - параметры: для тега textarea

Параметр	Описание
name=...	Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
cols=...	Количество столбцов текста.
rows=...	Число строк текста.
value=...	Значение поля определяет, что будет отправлено на сервер.
wrap=...	Параметры переноса строк. Возможные значения: off - отключает перенос строк; virtuals - показывает переносы строк, но отправляет текст как он введен; physical - переносы строк вставляются где указано и в таком виде текст отправляется.

Кнопки

Кнопка - это элемент интерфейса, на который нужно нажимать.

Используем type=button, "button" переводится как "кнопка".

Код html

</form>

Таблица 3 - Параметры для кнопок

Параметр	Описание
name=...	Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
value=...	Надпись на кнопке, а также ее значение.
align=...	Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений.

Кнопка SUBMIT

При нажатии на кнопку SUBMIT данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега form.

Используем type=submit

Например,

Кнопка RESET

При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение. Используем type=reset

Пример кода

</form>

Флажки (checkbox)

Флажки используют, когда необходимо выбрать два или более варианта из предложенных. Используем type=checkbox

<form action="/cgi-bin/handler.cgi"> <b>С какими операционными системамы вы знакомы?</b>

<input type=checkbox name=option1 value=a1 checked>Windows 95/98

<input type=checkbox name=option2 value=a2>Windows 2000

<input type=checkbox name=option3 value=a3>Linux

</form>

Значение поля value= определяет, что будет отправлено на сервер при поставленной галочке. Остальные параметры аналогичны параметрам кнопок.

Переключатели (radiobutton)

Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Используем type=radio

<form action="/cgi-bin/handler.cgi"> <b>Какое время года Вы больше любите?:-)</b>

<input type=radio name=answer value=a1>Весну

<input type=radio name=answer value=a2>Лето

<input type=radio name=answer value=a3>Осень

<input type=radio name=answer value=a4>Зиму

</form>

То есть, используя радиокнопки можно выбрать только ОДНО значение.

Поле со списком

В ниспадающем списке можно выбирать одно или несколько значений. Сделаем выбор времени года с помощью ниспадающего списка. Поля выбора начинаются тегом <select> и заканчиваются </select>

Каждое выбираемое поле заключено в теги <option> и </option >

Пример:

<b>Какое время года Вы больше любите? </b>

<option>Весну</option>

<option>Осень</option>

</select>

</form>

Таблица 4 - параметры для списков

Параметр select	Описание
name=...	Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле.
size=...	Количество видимых строк. По умолчанию одна строка.
multiple	Этот параметр позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift.
Параметр option	Описание
selected	Видимое поле по умолчанию.
value=...	Значение определяет, что будет отправлено на сервер при выбранном пункте списка.

Кнопка с изображением

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

Используем type=image

<tr><td colspan=2>Введите ваше имя: <tr>

</tr>

</table>

</form>

Картинка задается при помощи тега scr и адреса картинки.

=images/stories/key.jpg

Таким образом, комбинируя разные способы создания форм, мы можем на одной странике разместить несколько форм сразу. Для отдедения одного вида формы от другого будем использовать тег <fieldset>

Но чтобы заставить форму работать, то есть отправлять введенные данные, входить в систему и тому подобное, форму необходимо обработать. Обработка HTML форм может производиться посредством php или JavaScript.

Горизонтальное выравнивание объектов

Поиск по сайту