Размер шрифта

Вы можете изменять размер шрифта при помощи тэга <FONT SIZE=+|- n>

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга:

<BASEFONT SIZE=n>

Вы можете изменить цвет шрифта при помощи тэга <FONT COLOR="#xxxxxx>

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

Таблицы

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

Таблица объявляется с помощью тэгов:

TABLE - создаёт таблицу;

CAPTION - задаёт заголовок таблицы;

TR - создаёт новый ряд (строку) ячеек таблицы;

TD и TH - создаёт ячейку с данными в текущей строке.

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

Код HTML:

<TABLE BORDER>

<TR>

<TD>ячейка1.1</TD> <TD>ячейка1.2</TD> <TD>ячейка1.3 </TD>

</TR>

<TR>

<TD>ячейка2.1</TD> <TD>ячейка2.2</TD> <TD>ячейка2.3 </TD>

</TR>

</TABLE>

Основным тэгом, применяемым при создании таблицы, является тэг <TABLE>. Он может использоваться с рядом параметров, каждый из которых допустимо опускать:

ALIGN Горизонтальное выравнивание таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.

VALIGN Вертикальное выравнивание содержимого таблицы. Возможные значения: top, bottom, middle.

BORDER Ширина внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.

CELLPADDING Расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащейся в ней инфе.

CELLSPACING Расстояние (в пикселах) между границами соседних ячеек.

WIDTH Ширина таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

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

BGCOLOR Цвет фона ячеек таблицы.

BACKGROUND Фоновый рисунок таблицы.

Элемент CAPTION

Тэг заголовка таблицы <CAPTION> имеет единственный допустимый параметр <ALIGN>.

Атрибуты: top помещает заголовок над таблицей (значение по умолчанию)

Bottom помещает заголовок под таблицей

Код HTML:

<TABLE BORDER="1">

<CAPTION ALIGN="bottom">Заголовок таблицы</CAPTION>

<TR>

<TD>Ячейка таблицы</TD>

</TR>

</TABLE>

Элемент TR

Атрибуты: ALIGN определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right

VALIGN определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle

BGCOLOR определяет цвет фона для всех ячеек данного ряда

Элементы TD и TH

Table Data & Table Head - элемент TD создаёт ячейку с данными в текущей строке. Элемент TH также создаёт ячейку, но определяет её как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Текст, находящийся между тэгами <TH></TH>, отображается жирным шрифтом, т.е. <TH>текст</TH> равносильно <TD><b>текст</b></TD>

Атрибуты: ALIGN определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование

VALIGN определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR

WIDTH определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы

HEIGHT определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы

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

ROWSPAN определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1

NOWRAP блокирует автоматический перенос слов в пределах текущей ячейки

BGCOLOR определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов

BACKGROUND заполняет ячейку фоновым рисунком

Приемы форматирования текста.

1. Откройте документ first.html в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.

3. Введите тег <BASEFONT SIZE="5" COLOR="BROWN">. Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.

4. Введите произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега <Р>.

5. Введите теги: <Р><FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.

6. Введите очередной абзац текста, закончив его тегом </FONT>.

7. В следующем абзаце используйте по своему усмотрению парные теги: <В> (полужирный шрифт), <I> (курсив), <U> (подчеркивание), <S> (вычеркивание), <SUB> (нижний индекс), <SUP> (верхний индекс).

8. В следующем абзаце используйте по своему усмотрению парные теги: <ЕМ> (выделение), <STRONG> (сильное выделение), <CODE> (текст программы), <KBD> (клавиатурный ввод), <SAMP> (пример вывода), <VAR> (компьютерная переменная).

9. Сохраните полученный документ под именем format.html

10. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

11. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл format.html

12. Изучите, как использованные элементы HTML влияют на способ отображения текста.

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

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.

Приемы создания списков.

1. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.html в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.

3. Вставьте в документ тег <OL TYPE="I">, который начинает упорядоченный (нумерованный) список.

4. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.

5. Завершите список при помощи тега </OL>.

6. Сохраните полученный документ под именем list.html

7. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

8. Дайте команду файл > Открыть. Щелкните на кнопке Обзор и откройте файл list.html

9. Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE=.

10. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

11. Вставьте в документ тег <UL TYPE="square">, который начинает неупорядоченный (маркированный) список.

12. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.

13. Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=.

15. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

16. Вставьте в документ тег <DL>, который начинает список определений.

17. Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом <DT>.

18. Вставьте в список соответствующие определения, предваряя их тегом <DD>.

19. Завершите список при помощи тега </DL>. Сохраните документ под тем же именем.

20. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений.

Создание таблиц.

1. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.html в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>. В данном упражнении используется список номеров телефонов.

3. Введите тег <TABLE BORDER="10" WIDTH="100%">.

4. Введите строку: <CAPTION ALIGN="TOP"> Список телефонов </CAPTION>.

5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:
<TR BGCOLOR="YELLOW" ALIGN="CENTER"><TH>Фамилия<TH>Номер телефона

6. Определите последующие строки таблицы, предваряя каждую из них тегом <TR> и помещая содержимое каждой ячейки после тега <TD>.

7. Последнюю строку таблицы задайте следующим образом: <TR><TD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания имеется бесплатный телефон-автомат.

8. Завершите таблицу тегом </TABLE>.

9. Сохраните документ под именем table.html

10. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

11. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл table.html

12. Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое внимание на влияние заданных атрибутов.

13. Измените ширину окна обозревателя и установите, как при этом изменяется внешний вид таблицы.

Создание описания фреймов.

1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Введите следующий документ:
<HTML>
<HEAD><TITLE>Описание фреймов </TITLE></HEAD>
<FRAMESET ROWS="60%,*">
<FRAME SRC="table.htm">
<FRAMESET COLS="35%,65%" NORESIZE> <FRAME SRC="first.htm"><FRAME SRC="links.htm">
</FRAMESET>
</HTML>

3. Сохраните этот документ под именем frames.html

4. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

5. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл frames.html

6. Изучите представление нескольких созданных ранее документов, в отдельных фреймах.

7. Посмотрите, что происходит при изменении ширины окна обозревателя.

8. Проверьте, можно ли изменить положение границ фреймов методом перетаскивания при помощи мыши.

9. Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.

10. Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу на нарушает структуру фреймов.

11. Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.

Самостоятельная работа

ЗАДАНИЕ 1. Создать следующий HTML- документ, используя тэги форматирования текста

1. Откройте окно текстового редактора Блокнот. Сохраните данный документ как Задание1.html

2. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Поэтому в первой строке нашего документа набираем <HTML>.

3. Чтобы ввести заголовок окна, далее набираем:

<HEAD>
< TITLE> Пример работы

Дата добавления: 2014-12-16