HTML **** 2 - WordPress.com

Редактирование текста.
Создание таблицы
УРОК 3
План урока
1) редактирование текста;
2) создание таблиц.
Редактирование текста
Теги, делающие текст заголовками.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Редактирование текста
Эти теги могут использоваться с параметром
горизонтального выравнивания align. Возможные значения
этого параметра:
left – слева;
right – справа;
center – по центру;
jastify - по ширине.
Пример кода:
Отображение в браузере
Тег <br>
тег принудительного перевода строки. Текст, после этого
тега начинается с новой строки.
Теги <p></p>
Теги <p></p> разделяют текст на абзацы. Перед началом
каждого абзаца следует поместить тег <p>, закрывающий тег
не обязателен. В отличие от тега <br> абзацы отделяются
друг от друга пустой строкой.
Теги <p></p>
У тега <p> есть параметр align, который задает способ
выравнивания текста внутри параграфа. Возможные
значения этого параметра:
left – слева;
right – справа;
center – по центру;
justify – по ширине.
Пример кода
Отображение в браузере
Теги, выделяющие текст
курсивом
<cite></cite>
<dfn></dfn>
<em></em>
<i></i>
Теги, выделяющие текст
полужирным шрифтом
<strong></strong>
<b></b>
Оба используются для выделения важных фрагментов
текста, но предпочтительнее первый.
Теги, выделяющие текст
подчеркиванием
<ins></ins>
<u></u>
Оба используются для подчеркивания важных фрагментов
текста, но предпочтительнее использовать первый.
Теги, выводящие текст в
верхнем и нижнем индексах
Теги <sub></sub> выводят текст ниже уровня строки
шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки
шрифтом меньшего размера.
Удобны для вывода математических и химических формул.
Тег font и его параметры
Теги <font></font> указывают параметры шрифта текста.
Face – название шрифта. Названий шрифтов можно
привести несколько, через запятую. В этом случае, если
первый указанный шрифт не будет найден, браузер станет
использовать следующий по списку.
Size – размер шрифта в условных единицах от 1 до 7. По
умолчанию размер шрифта равен 3.
Color – цвет текста (по умолчанию – черный).
Тег center
Теги <center></center> предназначен для выравнивания
всех элементов внутри него по центру окна браузера.
Тег hr
Тег <hr> рисует горизонтальную линию, отделенную
сверху и снизу пустыми строками. У этого тега есть
следующие параметры:


align – выравнивает линию по центру (center), слева
(left) или справа (right);
width – устанавливает длину линии в пикселях или в
процентах от ширины экрана;

size – устанавливает толщину линии в пикселях.

color – устанавливает цвет линии.

noshade – убирает рельефность линии.
Тег pre
Теги <pre></pre> используются тогда, когда необходимо
отобразить текст так, как он набран. Сколько бы пробелов
вы не сделали в коде без этого тега, отображается только
один. Остальные игнорируются, что не всегда удобно.
Например, при отображении стихов хочется сохранить все
отступы и пробелы. В этом случае и используются теги
<pre></pre>.
Создание таблиц
Таблица - один из основных инструментов для создания
web-страниц. Любая таблица представляет собой набор
строк и столбцов, на пересечении которых находятся
ячейки.
Пример таблицы
Таблица с точки зрения HTML

сама таблица задается с помощью тегов <table></table>;

у таблицы есть название – теги <caption></caption>;

таблица состоит из строк – теги <tr></tr>;

каждая строка состоит из столбцов – теги <td></td>;

столбцы имеют названия, расположенные в первой
строке – теги <th></th>.
Таблица с точки зрения HTML

сама таблица задается с помощью тегов
<table></table>;

у таблицы есть название – теги <caption></caption>;

таблица состоит из строк – теги <tr></tr>;

каждая строка состоит из столбцов – теги <td></td>;

столбцы имеют названия, расположенные в первой
строке – теги <th></th>.
Параметры html таблиц: отступ,
ширина, цвет фона, рамка
У тега существует ряд параметров:

width - задает ширину таблицы (в пикселах или % от
ширины экрана);

bgcolor - задает цвет фона ячеек таблицы;

background - заливает фон таблицы рисунком;


border - задает рамку указанной ширины (в пикселах)
вокруг всей таблицы;
cellpadding - задает отступ в пикселях между границей
клетки и ее содержимым.
Параметры html таблиц: отступ,
ширина, цвет фона, рамка
align - задает выравнивание таблицы: слева (right), справа
(left), по центру (center);
cellspacing - задает расстояние между ячейками таблицы (в
пикселах);
cellpadding - задает расстояние между текстом и
внутренней границей ячейки таблицы (в пикселах).
Границы таблицы
rame - задает вид рамки вокруг таблицы и может принимать
следующие значения:

void - рамки нет;

above - только верхняя рамка;

below - только нижняя рамка;

hsides - только верхняя и нижняя рамки;

vsides - только левая и правая рамки;

lhs - только левая рамка;

rhs - только правая рамка;

box - все четыре части рамки.
Границы таблицы
rules - задает вид внутренних границ таблицы и может
принимать следующие значения:


none - между ячейками нет границ;
groups - границы только между группами строк и
группами столбцов (будут рассмотрены чуть позже);

rows - границы только между строками;

cols - границы только между столбцами;

all - отображать все границы.
HTML тэги tr и td
Таблицы формируются построчно. Поэтому, заданные в
строке (tr) параметры распространяют свое действие на все
ячейки (td) строки. У строк можно использовать три
параметра:
align - выравнивает текст в ячейках по горизонтали, может
принимать значения: слева (right), справа (left), по центру
(center);
valign - выравнивает текст в ячейках по вертикали, может
принимать значения: вверх (top), вниз (bottom), по центру
(middle);
bgcolor - задает цвет строки.
Параметры применяемые к
ячейкам
width – задает ширину столбца (в пикселях или в
процентном соотношении, где за 100% принимается ширина
таблицы).
height – задает высоту ячейки, причем все ячейки в этой же
строке станут этой высоты.
Контрольные вопросы
1. С помощью каких тегов вносится в документ текст?
2. С помощью каких тегов вставляется таблица, строки,
столбцы?
3. Какой атрибут имеет тег параграф?
Домашнее задание
Выучить записи в тетрадях.