Урок 3. Редактирование текста. Создание таблицы

Урок 3. Редактирование текста. Создание таблицы

Для форматирования текста существует много тегов. Одни их них используются часто, другие – редко.

Теги, делающие текст заголовками.

Эти теги выделяют текст в виде заголовков. Т. е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого – самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:

left – слева;

right – справа;

center – по центру;

jastify - по ширине.

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

<h1>Это заголовок первого уровня</h1>

<h2>Это заголовок второго уровня</h2>

<h3>Это заголовок третьего уровня</h3>

<h4 align=”right”>Это заголовок четвертого уровня</h4>

<h5 align=”center”>Это заголовок пятого уровня</h5>

<h6 align=”justify”>Это заголовок шестого уровня</h6>

Это просто текст

</body>

</html>

В окне браузера это будет выглядеть так:

Теги разделения на абзацы и переноса строки

Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.

Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличие от тега <br> абзацы отделяются друг от друга пустой строкой.

НЕ нашли? Не то? Что вы ищете?

У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:

left – слева;

right – справа;

center – по центру;

justify – по ширине.

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

<p align=”left”>Этот абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по левому краю.</p>

<p align=”right”>Этот абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по правому краю.</p>

<p align=”center”>Этот абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по центру.</p>

Это просто текст. <br> Это текст с новой строки.

</body>

</html>

В окне браузера это будет выглядеть так:

Теги, выделяющие текст курсивом

<i></i>

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

Теги <cite></cite> используются для логического выделения названия книг, статей и цитат.

Теги <dfn></dfn> используются для выделения определений.

Теги <em></em> и <i></i> выделяют важные фрагменты текста. Последний не рекомендуется к употреблению.

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

<cite>

Этот текст в тегах cite

</cite><br>

<dfn>

Этот текст в тегах dfn

</dfn><br>

<em>

Этот текст в тегах em

</em><br>

<i>

Этот текст в тегах i

</i>

</body>

</html>

В окне браузера это будет выглядеть так:

Теги, выделяющие текст полужирным шрифтом

<b></b>

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

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

Просто текст <br>

Этот текст в тегах strong

</strong><br>

<b>

Этот текст в тегах b

</b>

</body>

</html>

В окне браузера это будет выглядеть так:

Теги, выделяющие текст подчеркиванием

<u></u>

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

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

Просто текст<br>

<ins>

Этот текст в тегах ins

</ins><br>

<u>

Этот текст в тегах u

</u>

</body>

</html>

В окне браузера это будет выглядеть так:

Теги, выводящие текст в верхнем и нижнем индексах

Теги <sub></sub> выводят текст ниже уровня строки шрифтом меньшего размера.

Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.

Удобны для вывода математических и химических формул.

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

Y=x<sup>2</sup> - уравнение параболы.<br><br>

H<sub>2</sub>O – формула воды.

</body>

</html>

В окне браузера это будет выглядеть так:

Тег font и его параметры

Теги <font></font> указывают параметры шрифта текста.

Face – название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.

Size – размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

Color – цвет текста (по умолчанию – черный).

Существует два способа задания цвета – по имени и указаниям шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color=”blue”).

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа «#». Получить его можно, например, в программе Photoshop.

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

Это простой текст.<br>

Этот текст красный, размера 5.

</font>

Этот текст синий, размера 2.

</font>

</body>

</html

В окне браузера это будет выглядеть так:

Тег center

Теги <center></center> предназначен для выравнивания всех элементов внутри него по центру окна браузера.

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

Это простой текст

<center>Это выровненный по центру текст.</center>

</body>

</html>

В окне браузера это выглядит так:

Совместное использование тегов

Если нам необходимо сделать какое-нибудь слово в тексте жирным красным и курсивом одновременно, то тогда придется применять теги strong, font и em вместе. Здесь главное соблюдать порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.

Пример.

Выделим слово «текст» красным цветом:

<font color=”red”>Текст</font>

Теперь добавим теги курсива (открывающий – слева, закрывающий – справа):

<em><font color=”red”>Текст</font></em>

А теперь – теги полужирного начертания.

<strong><em><font color=”red”>Текст</font></em></strong>

В окне браузера это будет выглядеть так:

Каждый раз все предыдущие теги мы помещаем в новые. Это и называется порядком вложенности. Вы можете использовать разные теги для оформления текста, главное не нарушать порядок вложенности.

Тег hr

Тег <hr> рисует горизонтальную линию, отделенную сверху и снизу пустыми строками. У этого тега есть следующие параметры:

align – выравнивает линию по центру (center), слева (left) или справа (right);

width – устанавливает длину линии в пикселях или в процентах от ширины экрана;

size – устанавливает толщину линии в пикселях.

color – устанавливает цвет линии.

noshade – убирает рельефность линии.

Пример кода:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

Линия без параметров

<hr>

Линия по центру

Линия слева

</body>

</html>

В окне браузера это будет выглядеть так:

Тег pre

Теги <pre></pre> используются тогда, когда необходимо отобразить текст так, как он набран. Сколько бы пробелов вы не сделали в коде без этого тега, отображается только один. Остальные игнорируются, что не всегда удобно. Например, при отображении стихов хочется сохранить все отступы и пробелы. В этом случае и используются теги <pre></pre>

Пример кода:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

<pre>

Как набрал,

так и отображается.

</pre>

</body>

</html>

В окне браузера это будет выглядеть так:

Были рассмотрены основные теги для редактирования текста.

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

Таблица - один из основных инструментов для создания web-страниц. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки.

Например:

Рассмотрим нашу таблицу с точки зрения HTML:

· сама таблица задается с помощью тегов <table></table>;

· у таблицы есть название – теги <caption></caption>;

· таблица состоит из строк – теги <tr></tr>;

· каждая строка состоит из столбцов – теги <td></td>;

· столбцы имеют названия, расположенные в первой строке – теги <th></th>.

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

<html>

<head>

<title>html table</title>

</head>

<body>

<table>

<caption>Название таблицы</caption>

</table>

</body>

</html>

Результат:

Видим, что получилось не очень красиво. Будем украшать.

Параметры html таблиц: отступ, ширина, цвет фона, рамка

Для этого у тега существует ряд параметров:

width - задает ширину таблицы (в пикселах или % от ширины экрана);

bgcolor - задает цвет фона ячеек таблицы;

background - заливает фон таблицы рисунком;

border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы;

cellpadding - задает отступ в пикселях между границей клетки и ее содержимым.

Применим эти параметры:

<html>

<head>

<title>html table</title>

</head>

<body>

<caption>Название таблицы</caption>

</table>

</body>

</html>

Результат:

Уже лучше, но таблица прижата к левому краю окна, также, как и текст в ней. Исправим это, добавив еще три параметра:

align - задает выравнивание таблицы: слева (right), справа (left), по центру (center);

cellspacing - задает расстояние между ячейками таблицы (в пикселах);

cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).

Применим эти параметры:

<html>

<head>

<title>html table</title>

</head>

<body>

<caption>Название таблицы</caption>

</table>

</body>

</html>

Результат:

Обратим внимание, границы у таблицы двойные. Если указать cellspacing=”0”, то границы примут привычный вид:

Результат:

Вообще, за границы отвечают два параметра:

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

· void - рамки нет;

· above - только верхняя рамка;

· below - только нижняя рамка;

· hsides - только верхняя и нижняя рамки;

· vsides - только левая и правая рамки;

· lhs - только левая рамка;

· rhs - только правая рамка;

· box - все четыре части рамки.

rules - задает вид внутренних границ таблицы и может принимать следующие значения:

· none - между ячейками нет границ;

· groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже);

· rows - границы только между строками;

· cols - границы только между столбцами;

· all - отображать все границы.

С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведен только один пример, сами же поэкспериментируйте со всеми.
<html>

<head>

<title>html table</title>

</head>

<body>

<caption>Название таблицы</caption>

</table>

</body>

</html>

Результат:

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

HTML тэги tr и td

Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра:

align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center);

valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle);

bgcolor - задает цвет строки.

Посмотрим на примере:

<html>

<head>

</head>

<body>

<caption>Название таблицы</caption>

<td>

11 Текст во всех ячейках этой строки центрирован по центру как по вертикали, так и по горизонтали

</td>

</tr>

<td>

21 Здесь текст прижат к левому краю по горизонтали и к низу – по вертикали

</td>

</tr>

<td>

31 Текст во всех ячейках этой строки прижат по горизонтали к правому краю, по вертикали - кверху

</td>

</tr>

</table>

</body>

</html>

Результат:

Эти же параметры можно применять к отдельным ячейкам, т. е. к любому тегу <td>, действие будет распространяться только на саму ячейку.

Например, в предыдущем коде добавим в любой тег <td> параметр bgcolor=”red”.

21 Здесь текст прижат к левому краю по горизонтали и к низу – по вертикали

</td>

Результат:

Но к ячейкам можно применять еще два параметра:

· width – задает ширину столбца (в пикселях или в процентном соотношении, где за 100% принимается ширина таблицы).

· height – задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

Например, добавим в наш код, в теги <th> следующие параметры

<tr>

</tr>

Результат:

Потренируйтесь создавать и оформлять таблицы.

Урок 3. Редактирование текста. Создание таблицы

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы