Создание таблиц в HTML. Объединение ячеек в таблице.
Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.
Тэг <TH> используется для создания ячеек с заголовками.
Тэг <TD> - для обыкновенных ячеек с данными.
Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.
Для создания заголовка таблицы служит тэг <CAPTION>.
Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.
Дело в том, что, используя таблицы, можно сделать аккуратную компоновку информации в пределах Вэб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Например, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации.
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</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 rows="200,*">
<frame name="frame1" src="lsn017.html">
<frame name="frame2" src="lsn016.html">
</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> <img src=images/smiles/icon18.gif>
<input type=checkbox name=checkbox>
список
<SELECT NAME=list>
<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>
Не нашли, что искали? Воспользуйтесь поиском по сайту:
©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.
|