Создание таблиц в HTML. Объединение ячеек в таблице.

Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.

Тэг <TH> используется для создания ячеек с заголовками.

Тэг <TD> - для обыкновенных ячеек с данными.

Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.

Для создания заголовка таблицы служит тэг <CAPTION>.

Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Рисунки в HTML. Примеры.

Для вставки графических элементов (в виде файлов с расширениями .jpg .gif. ) служит тэг <IMG>. Атрибут Alt позволяет создать текст, который при необходимости должен быть отображен вместо графики. <img src="img/tigr.jpg" alt="Это изображение тигра"> Для создания рамки служит атрибут BORDER тэга <IMG>. Используя этот атрибут можно указать толщину линии рамки в пикселях. С помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. Атрибут ALIGN тэга <IMG> допускает задание двух значений – left, right. Значение left - изображение слева от текста, а right - справа от него. Тэг BR с атрибутом CLEAR, указывают позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики. Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom задает вертикальное положение текста относительно границ изображения. <p> <img src="img/majak.jpg" align="top">Выравнивание по верхней кромке</p> Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.

Атрибут HSPACE -ширина чистой области СЛЕВА И СПРАВА от изображения. VSPACE - СВЕРХУ и СНИЗУ.<p><img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. </p>

Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию – толщина линейки в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH. По умолчанию – выравнивание линейки посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN. Атрибут NOSHADE устраняет эффект объемности линейки.<hr align="left" width="50" size="5" noshade>

Фрагментация в HTML. Примеры.

Frame - рамка, кадр. Фреймы делят пространство окна браузера на независимые разделы, в которых отображается различная информация.

<FRAME>Определяет набор данных фрейма

Scrolling Обеспечивает сокрытие или отображение полос прокрутки фрейма

Bordercolor изменяет цвет линий рамки фрейма

Frameborder Обеспечивает сокрытие рамки фрейма

Marginheight Изменяет высоту верхнего и нижнего полей фрейма

Marginwidth Изменяет ширину левого и правого полей фрейма

<FRAMESET>Создает набор фреймов

<html>

<head>

<title>Пример работы с фреймами</title>

</head>

</frameset>

</html>

Навигационные карты на Web-страницах.

Навигационная карта - это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку. Прежде чем создавать карту ссылок, надо в графическом редакторе определить координаты крайних точек зон. Зоны могут быть трех типов. Прямоугольная зона (rect). В этом случае задаются координаты двух точек - левого верхнего угла, правого нижнего угла. Многоугольник (poly). В этом случае задаются координаты каждой точки многоугольника. Круг (circle). В этом случае задается координата центра круга и его радиус.

Для создания карты ссылок необходимо вставить нужное изображение с помощью дескриптора <IMG>, затем, при помощи атрибута USEMAP, присвоить ему имя. После этого ввод данных при помощи тэга <MAP>.Дескриптор <AREA> определяет зоны изображения карты ссылок.Атрибут SHAPE описывает форму зоны карты ссылок.Атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон (прямоугольник, круг, многоугольник).Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.

Тэги для описания форм. Обработка форм.

Для создания html-формы используется команда form. У нее могут быть следующие параметры:

NAME - определяет имя формы, обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм.

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

METHOD - определяет способ отправки параметров формы. Принимает значение GET или POST.

TARGET - определяет окно, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна.

Поле ввода для строки <input type=text name=text value="Начальное значение" size=40 maxlength=80>.Для созданиякнопки атрибут type должен быть равен button - <input type=button value=Кнопка>Кнопка для отправки формы создается так: <input type=submit value="Опубликовать">.Для создания радиокнопки атрибут type должен быть равен radio. <input type=radio name=smile value=images/smiles/icon18.gif>

список

<OPTION value=1>one

<OPTION value=2>two

<OPTION value=0 SELECTED>zero

</SELECT>

Область ввода для текста создается командой <textarea name=textarea cols=45 rows=6>Здесь текст по умолчанию</textarea>

Понятие и назначение стиля.

Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.

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

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

Виды CSS, их применение. Примеры.

Существует несколько видов CSS селекторов. Перейдем к рассмотрению этих видов и примеров их применения .

Универсальный селектор

Универсальный селектор задает стиль всем элементам документа. Обозначается символом звездочки (*). Например, данное определяет, что все элементы будут иметь красный цвет:* {color: red;}

Селекторы элементов

Когда пишутся стили для HTML документа, то в качестве элементов выступают HTML теги (h1, p, img, a, body...). Например: h1 {font-family:Verdana;font-size:12px; color:#666;}

В данном случае все заголовки первого уровня в документе будут иметь шрифт Verdana, размер 12px и серый цвет.

Селекторы классов

Данный селектор позволяет назначить стиль независимо от типа элемента. Но для их работы нужно добавить некоторые пометки в HTML код, а именно атрибут class с каким либо значением, которое вы будите использовать при создании CSS правила.

Допустим, необходимо некоторые изображения на странице обвести в рамку. Для этих изображений прописывается атрибут class. Например: <img class="border_img" src="site.ru/img.png" />

А в файле стилей пишем правило border_img {border:1px solid #00f;}

Данный класс можно применять ко многим элементам страницы и не обязательно только к изображениям. К одному HTML элементу можно применить сразу несколько классов, которые пишутся через пробел:1 <a class="logo shadow" href="#">Ссылка</a>

Предыдущая 1 2 3 456 7 Следующая

Не нашли, что искали? Воспользуйтесь поиском по сайту: