Категории
Самые читаемые
Лучшие книги » Компьютеры и Интернет » Интернет » Интернет – легко и просто! - Егор Александров

Интернет – легко и просто! - Егор Александров

Читать онлайн Интернет – легко и просто! - Егор Александров

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 15 16 17 18 19 20 21 22 23 ... 47
Перейти на страницу:

Рис. 6.1. Форматирование текста

Цвета

Помимо манипуляций с текстом, HTML позволяет изменять цвета элементов вебстраницы. Цвета в HTML обозначаются в шестнадцатеричном виде.

Для справки: если в десятичной системе каждая цифра числа находится в пределах от 0 до 9, то в шестнадцатеричной – от 0 до F (после 9 идет А, затем В, С, D, Е и F), то есть числу 16 соответствует F, a 17—10.

Так, белому цвету в HTML соответствует код FFFFFF, черному – 000000, а между ними находится более 16 млн других цветов.

Цвет фона устанавливается с помощью параметра BGCOLOR в обязательном теге <BODY>. По умолчанию фон белый.

Чтобы установить, к примеру, оранжевый, необходимо ввести следующее:

<B0DY BGCOLOR="#FF9900">

Для изменения цвета шрифта во всем документе существует параметр TEXT все в том же теге <BODY>.

Например, синий шрифт можно получить следующим образом:

<B0DY TEXT="#0000FF">

Можно применять и оба параметра одновременно:

<B0DY BGCOLOR="#FF9900» TEXT="#0000FF">

Если же цвет шрифта устанавливать во всем документе нет необходимости, а нужно, к примеру, выделить только несколько слов, то следует воспользоваться следующей конструкцией:

<F0NT C0L0R="#3399FF">Текст</F0NT>

Ниже приведен список основных цветов. Более полный перечень можно найти в Интернете (или же получить нужный цвет «на ощупь").

– Черный – 000000.

– Белый – FFFFFF.

– Синий – 0000FF.

– Зеленый – 00FF00.

– Желтый – FFFF00.

– Красный – FF0000.

– Оранжевый – FF9900 и FFA500.

– Голубой – 00CCFF.

– Серый – 999999.

– Коричневый – 996633.

Изображения

Чтобы вставить в документ изображение, необходимо воспользоваться тегом <IMG>. Данный тег имеет множество параметров, главным из которых является SRC, задающий имя файла с изображением. Если картинка находится в той же папке, что и HTML-файл, то достаточно просто указать ее название:

<IMG SRC="picture.j pg">

Если изображение расположено во вложенной папке, то ссылка на него будет примерно такой:

<IMG SRC="pics/picture.jpg">

Аналогично можно указывать расположение изображения в Интернете:

<IMG SRC="http://www.somewhere.ru/pics/picture.jpg">

Немаловажными являются параметры WIDTH и HEIGHT – соответственно, ширина и высота изображения в пикселах. Если эти параметры не заданы, то будут использоваться реальные размеры изображения.

Картинка, вставляемая в документ описанным выше способом, просто «встраивается» в текст, занимая одну из его строк наравне с остальными словами. Зачастую это выглядит довольно некрасиво. Ситуацию можно исправить, используя параметр ALIGN тега <IMG>.

– Обтекание текстом справа:

<IMG SRC="picture.j pg» ALIGN="LEFT">

– Обтекание текстом слева (рис. 6.2): <IMG SRC="picture.jpg» ALIGN="RIGHT">

Рис. 6.2. Размещение рисунков.

Помимо всего прочего, картинку можно использовать для задания фонового изображения. Для этого существует параметр BACKGROUND тега <BODY>:

<B0DY BACKGROUND="picture.jpg">

Выбранное изображение будет находиться на заднем плане, а все остальные элементы – располагаться поверх него.

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

Ссылки

Ссылка является основным инструментом для перехода от одной веб-страницы к другой. Она задается тегом <А> с параметром HREF, указывающим на файл, который будет открыт при щелчке на данной ссылке.

Типичными являются следующие конструкции:

<А HREF="chap1.htm">Teкст ссылки</А>

<А HREF="content/chap1.htm">Teкст ссылки</А>

<А HREF="

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

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

<А TARGET="_BLANK» HREF="chap1.htm">Tекст ссылки</А>

При работе с большими документами очень полезными бывают ссылки на другие места того же файла. Для этого, помимо самой ссылки, понадобится метка (якорь), указывающая место, в которое нужно перейти. Для создания якоря используется параметр NAME тега <А>. Значение параметра на экране не отображается и может быть любым:

<А NAME="Iabel1">Текст</А>

Ссылка на данный якорь будет следующей:

<А HREF="#Iabel1">Текст ссылки</А>

При щелчке на этой ссылке экран будет сфокусирован на тексте, заданном в якоре.

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

<А HREF="chap1.htm"> <IMG SRC="picture.j pg"> </A>

Таблицы

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

Для организации таблицы существует тег <TABLE>. Кроме того, необходимы такие теги, как <TR> – строка таблицы и <TD> – столбец.

Создадим таблицу 2x4. Для этого сначала необходимо организовать две строки:

<TABLE>

<TR></TR>

<TR></TR> </TABLE>

Затем нужно в каждой строке задать по четыре столбца:

<TABLE> <TR> <Т0>Текст ячейки</Т0>

<ТО>Текст ячейки</ТО>

<ТО>Текст ячейки</ТО>

<ТО>Текст ячейки</ТО> </TR> <TR>

<ТО>Текст ячейки</ТО>

<ТО>Текст ячейки</ТО>

<ТО>Текст ячейки</ТО>

<ТО>Текст ячейки</ТО> </TR> </TABLE>

Создать рамку для таблицы можно с помощью параметра BORDER, значение которого соответствует ширине рамки. Параметр BORDERCOLOR определяет ее цвет:

<TABLE B0RDER="2" BORDERCOLOR="#00FF00">

Чтобы изменить цвет фона во всей таблице или в отдельно взятой ячейке, можно использовать уже известный нам параметр BGCOLOR применительно, соответственно, к тегу <TABLE> или к тегу <TD>.

Теперь поговорим о размерах. Размеры определяются с помощью параметров WIDTH и HEIGHT (ширина и высота) и могут задаваться как для всей таблицы, так и для каждой отдельной ячейки. Если, к примеру, используется конструкция:

<TABLE WIDTH="700" НЕIGHT="400">,

то это значит, что таблица имеет ширину 700 и высоту 400 пикселов. Все ячейки поделят выделенное пространство поровну. Можно задавать размеры каждой отдельной ячейки, используя все те же параметры. В этом случае ширина и высота могут задаваться не только в пикселах, но и в процентах от габаритов таблицы:

<TD WIDTH="50%">Tекст ячейки</Т0>

Здесь указанный столбец будет занимать половину всей ширины таблицы.

Теперь давайте разберемся с содержимым ячеек. При горизонтальном выравнивании текста в ячейках используются те же инструменты, что и при форматировании обычного текста. Кроме того, можно выравнивать содержимое по вертикали. Для этих целей применяется параметр VALIGN тега <TD>.

– По центру:

<TD VALIGN="middIе">Текст ячейки</Т0>

– По верхнему краю:

<TD VALIGN="top">Текст ячейки</Т0>

– По нижнему краю:

<TD VALIGN="bottom">Текст ячейки</Т0>

Следует отметить, что содержимым ячеек может быть не только текст, но и изображения, и даже другие таблицы. Благодаря вложенным таблицам на веб-странице можно организовать сколь угодно сложную структуру данных (рис. 6.3).

Рис. 6.3. Пример страницы, построенной с помощью таблиц

Фреймы

Фреймы позволяют разделить веб-страницу на несколько независимых окон и в каждом из них разместить отдельную веб-страницу. Спор о том, нужно это или нет, продолжается. Я скажу одно: при умелом использовании фреймов можно создать страницу-шедевр, а в противном случае – трудно усваиваемый документ-гибрид.

Для создания фреймов необходим специальный HTML-документ с несколько необычной структурой:

<HTML>

<TITLE></TITLE>

<FRAMESET></FRAMESET> </HTML>

От обычного такой HTML-документ отличается тем, что вместо тега <BODY> присутствует тег <FRAMESET>, имеющий два основных параметра: COLS (колонки) и ROWS (ряды).

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

Допустим, нужно разделить страницу на три столбца. Высота первого из них должна составлять 100 пикселов, второго – 200, а на третий пусть остается все свободное пространство. В таком случае можно использовать следующую конструкцию:

<FRAMESET ROWS="100,200,*">

Если необходимо разбить страницу на два столбца, чтобы ширина первого составляла 15 % от всего доступного пространства, следует ввести:

<FRAMESET C0LS="15%,85%">

Но этого мало. Теперь нужно сообщить браузеру, какие документы будут открываться в каждой из полученных областей. Для этого существует тег <FRAME> и его параметр SRC:

1 ... 15 16 17 18 19 20 21 22 23 ... 47
Перейти на страницу:
На этой странице вы можете бесплатно скачать Интернет – легко и просто! - Егор Александров торрент бесплатно.
Комментарии
Открыть боковую панель
Комментарии
Сергей
Сергей 24.01.2024 - 17:40
Интересно было, если вчитаться