html - WordPress.com
advertisement
Урок 3. Редактирование текста. Создание таблицы Для форматирования текста существует много тегов. Одни их них используются часто, другие – редко. Теги, делающие текст заголовками. <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого – самый маленький). Эти теги могут использоваться с параметром горизонтального выравнивания 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> В окне браузера это будет выглядеть так: Теги, выделяющие текст курсивом <cite></cite> <dfn></dfn> <em></em> <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> В окне браузера это будет выглядеть так: Теги, выделяющие текст полужирным шрифтом <strong></strong> <b></b> Оба используются для выделения предпочтительнее первый. важных Пример кода: <html> <head> <title>Форматирование html</title> </head> <body> Просто текст <br> <strong> Этот текст в тегах strong </strong><br> <b> Этот текст в тегах b </b> </body> </html> фрагментов текста, но В окне браузера это будет выглядеть так: Теги, выделяющие текст подчеркиванием <ins></ins> <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> <font face=”Verdana” size=5 color=”red”> Этот текст красный, размера 5. </font> <font face=”Arial” size=2 color=”blue”> Этот текст синий, размера 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> Линия по центру <hr align=”center” color=”red” size=2 width=50%> Линия слева <hr align=”left” color=”blue” size=3 width=”150”> </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> <tr><th>1</th><th>2</th><th>3</th></tr> <tr><th>11</th><th>12</th><th>13</th></tr> <tr><th>21</th><th>22</th><th>23</th></tr> <tr><th>31</th><th>32</th><th>33</th></tr> </table> </body> </html> Результат: Видим, что получилось не очень красиво. Будем украшать. Параметры html таблиц: отступ, ширина, цвет фона, рамка Для этого у тега существует ряд параметров: width - задает ширину таблицы (в пикселах или % от ширины экрана); bgcolor - задает цвет фона ячеек таблицы; background - заливает фон таблицы рисунком; border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы; cellpadding - задает отступ в пикселях между границей клетки и ее содержимым. Применим эти параметры: <html> <head> <title>html table</title> </head> <body> <table width=”300” bgcolor=”plum” border=”1”> <caption>Название таблицы</caption> <tr><th>1</th><th>2</th><th>3</th></tr> <tr><th>11</th><th>12</th><th>13</th></tr> <tr><th>21</th><th>22</th><th>23</th></tr> <tr><th>31</th><th>32</th><th>33</th></tr> </table> </body> </html> Результат: Уже лучше, но таблица прижата к левому краю окна, также, как и текст в ней. Исправим это, добавив еще три параметра: align - задает выравнивание таблицы: слева (right), справа (left), по центру (center); cellspacing - задает расстояние между ячейками таблицы (в пикселах); cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах). Применим эти параметры: <html> <head> <title>html table</title> </head> <body> <table width=”300” bgcolor=”plum” cellspacing=”5” cellpadding=”10”> border=”1” <caption>Название таблицы</caption> <tr><th>1</th><th>2</th><th>3</th></tr> <tr><th>11</th><th>12</th><th>13</th></tr> <tr><th>21</th><th>22</th><th>23</th></tr> <tr><th>31</th><th>32</th><th>33</th></tr> </table> </body> </html> Результат: align=”center” Обратим внимание, границы у таблицы двойные. Если указать cellspacing=”0”, то границы примут привычный вид: <table width=”300” bgcolor=”plum” border=”1” align=”center” cellspacing=”0” cellpadding=”10”> Результат: Вообще, за границы отвечают два параметра: frame - задает вид рамки вокруг таблицы и может принимать следующие значения: void - рамки нет; above - только верхняя рамка; below - только нижняя рамка; hsides - только верхняя и нижняя рамки; vsides - только левая и правая рамки; lhs - только левая рамка; rhs - только правая рамка; box - все четыре части рамки. rules - задает вид внутренних границ таблицы и может принимать следующие значения: none - между ячейками нет границ; groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже); rows - границы только между строками; cols - границы только между столбцами; all - отображать все границы. С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведен только один пример, сами же поэкспериментируйте со всеми. <html> <head> <title>html table</title> </head> <body> <table width=”300” bgcolor=”plum” border=”1” cellspacing=”5” cellpadding=”10” rules=”rows” frame=”void”> align=”center” <caption>Название таблицы</caption> <tr><th>1</th><th>2</th><th>3</th></tr> <tr><th>11</th><th>12</th><th>13</th></tr> <tr><th>21</th><th>22</th><th>23</th></tr> <tr><th>31</th><th>32</th><th>33</th></tr> </table> </body> </html> Результат: Следует отметить, что границы в разных браузерах отображаются немного поразному. HTML тэги tr и td Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра: align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center); valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle); bgcolor - задает цвет строки. Посмотрим на примере: <html> <head> <title>html tr</title> </head> <body> <table width=”300” bgcolor=”plum” border=”1” cellspacing=”0” cellpadding=”10” rules=”rows” frame=”void”> align=”center” <caption>Название таблицы</caption> <tr><th>1</th><th>2</th><th>3</th></tr> <tr align=”center” valign=”moddle” bgcolor=”yellow”> <td> 11 Текст во всех ячейках этой строки центрирован по центру как по вертикали, так и по горизонтали </td> <td>12</td> <td>13</td> </tr> <tr align=”left” valign=”bottom” > <td> 21 Здесь текст прижат к левому краю по горизонтали и к низу – по вертикали </td> <td>22</td> <td>23</td> </tr> <tr align=”right” valign=”top” bgcolor=”yellow” > <td> 31 Текст во всех ячейках этой строки прижат по горизонтали к правому краю, по вертикали - кверху </td> <td>32</td> <td>33</td> </tr> </table> </body> </html> Результат: Эти же параметры можно применять к отдельным ячейкам, т.е. к любому тегу <td>, действие будет распространяться только на саму ячейку. Например, в предыдущем коде добавим в любой тег <td> параметр bgcolor=”red”. <td bgcolor=”red”> 21 Здесь текст прижат к левому краю по горизонтали и к низу – по вертикали </td> Результат: Но к ячейкам можно применять еще два параметра: width – задает ширину столбца (в пикселях или в процентном соотношении, где за 100% принимается ширина таблицы). height – задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты. Например, добавим в наш код, в теги <th> следующие параметры <tr> <th width=”50” height=”50”>1</th> <th width=”30%”>2</th> <th width=”20%”>3</th> </tr> Результат: Потренируйтесь создавать и оформлять таблицы.
