Для того, чтобы задать отступы внутри ячеек применяется атрибут cellpadding. Если в нашем HTML-коде поменять первую строку вот так
< table border="5" cellpadding="10">
то мы получим:
| Первая ячейка
| Вторая ячейка
| Третья ячейка
|
| Четвертая ячейка
| Пятая ячейка
| Шестая ячейка
|
Чтобы расширить ячейки по горизонтали (столбцам) или по вертикали (строкам), в HTML применяются следующие атрибуты:
colspan — расширение ячеек по горизонтали (столбцам);
Rowspan — расширение ячеек по вертикали (строкам).
Например, изменим наш HTML-код так:
< table border="5" cellpadding="10">
< tr>
< td colspan="2">Первая и вторая ячейки< /td>< td>Третья ячейка< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
< /tr>
< /table>
в браузере увидим:
| Первая и вторая ячейки
| Третья ячейка
|
| Четвертая ячейка
| Пятая ячейка
| Шестая ячейка
|
| | | |
А если так:
< table border="5" cellpadding="10">
< tr>
< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td rowspan="2">Третья и шестая ячейки< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>
< /tr>
< /table>
то получим:
| Первая ячейка
| Вторая ячейка
| Третья и шестая ячейки
|
| Четвертая ячейка
| Пятая ячейка
|
Изменить размеры таблицы и ячеек можно с помощью атрибутов width (ширина) и height (высота). Их значения задаются в пикселях или процентах. Например,
< table height="25%">
Аналогично и для ячеек. Горизонтальное выравнивание таблицы относительно html-страницы производится с помощью уже известного вам из предыдущих разделов атрибута align. Его значения также вам уже знакомы: center (по центру), left (по левому краю) и right (по правому краю). Этот же атрибут применяется для выравнивания содержимого ячеек. Например, для выравнивания всей таблицы это выглядит так:
< table border="5" align="center"> < tr> < td>Первая ячейка.< /td>< td>Вторая ячейка.< /td> < /tr> < /table>
| Первая ячейка.
| Вторая ячейка.
|
а для того, чтобы изменить расположение текста в строке нужно записать так:
< table border="5" align="center"> < tr align="center"> < td>Первая ячейка.< /td>< td>Вторая ячейка.< /td> < /tr> < /table>
| Первая ячейка.
| Вторая ячейка.
|
Для вертикального выравнивания содержимого ячеек предназначен атрибут valign, у которого есть следующие значения:
baseline — по базовой линии;
bottom — по нижнему краю;
middle — по середине (значение по умолчанию);
Top — по верхнему краю.
Пример: < td ячейка.< /td>
Цвет фона всей таблицы или отдельных ее ячеек устанавливается с помощью атрибута bgcolor. О том, как выбрать значение цвета в HTML мы говорили ранее.
Пример:
< table border="5" cellpadding="10" bgcolor="#FFFFFF">
< tr>
< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td rowspan="2">Третья и шестая ячейки< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td bgcolor="#FF0000">Пятая ячейка< /td>
< /tr>
< /table>
В браузере мы увидим:
| Первая ячейка
| Вторая ячейка
| Третья и шестая ячейки
|
| Четвертая ячейка
| Пятая ячейка
|
При помощи атрибута background можно задать фон всей таблицы или отдельных ячеек графическим изображением. Пример для фона всей таблицы:
< table background="путь до картинки">
Для ячейки, как вы понимаете HTML-код будет таким:
< td background="путь до картинки">
Как я уже говорил выше, в ячейку можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому таблицы так удобны для разметки html-страницы на отдельные блоки.
В общем, сейчас настало самое время для самостоятельных экспериментов, так как раздел о создании таблиц в HTML закончен. А вместе с ним закончен и мой рассказ об основах HTML. Имея эти знания, я начал делать этот сайт. Поэтому вам я настоятельно рекомендую применить полученные знания на практике. Хотя впереди еще предстоит раздел о метатегах , но прямого отношения к созданию html-страницы они не имеют.
| Метатеги в HTML:
|
|
Ну вот, наконец, мы и добрались до раздела, в котором я расскажу вам, что такое метатеги в HTML и как они используются при создании сайта. Как я уже говорил , метатеги располагаются в заголовке html-страницы между тегами < HEAD> и < /HEAD> и никак не отображаются браузером (за исключением содержимого тега TITLE). Мета-тегов заголовка существует несколько, но нас в первую очередь будут интересовать эти:
title — текст, отображаемый в заголовке окна браузера или, другими словами, название html-документа;
meta — тег, в котором содержатся данные для использования серверами и поисковыми системами.
Первый метатег < TITLE>< /TITLE> очень важен. Создавай его для каждой страницы. Помимо того, что его содержимое выводится в заголовке окна браузера, оно еще и становится ссылкой на страницу в результатах выдачи поисковиков. HTML-код будет выглядеть так:
< html>
< head>
< title>Название страницы.< /title>
< /head>
< body>Основное содержимое страницы.< /body>
< /html>
Кроме того, ключевые слова, которые вы поместите в этом мета теге (title), крайне положительно воспримутся поисковиками. Поэтому, давая название html-странице, постарайтесь включить в него ключевые слова. Тут нужно вкратце упомянуть о том, что же это такое — ключевые слова.
Те слова, которые наиболее полно характеризуют содержимое html-страницы и будут для нее ключевыми. Это могут быть как отдельные слова, так и словосочетания, но они обязательно должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу. При создании страницы определите для нее несколько ключевых слов и используйте их в заголовке (title) и в значениях атрибутов метатегов, о которых мы сейчас и поговорим.
Для указания служебной информации об html-странице применяются метатеги (< META>). Все атрибуты этого мета тега разбиты на две группы: HTTP-EQUIV (HTTP-эквиваленты) и NAME. Атрибутов этих много, мы рассмотрим самые распространенные. Начнем с атрибутов, входящих в группу HTTP-EQUIV.
content-type — тип документа и его кодировка. Выбор кодовой страницы для правильного отображения символов браузером. Например,
< head>
< meta http-equiv="content-type" content="text/html; charset=windows-1251">
< /head>
content-language — указание языка документа. Значение этого атрибута используется как поисковыми роботами, так и web-серверами. Например,
< meta http-equiv="content-language" content="ru">
refresh — время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно записать так:
< meta http-equiv="refresh" content="30">
А, чтобы спустя 5 секунд перейти на страницу по адресу http://internetzarabotoc.front.ru/, нужно записать так:
< meta http-equiv="refresh" content="5; http://internetzarabotoc.front.ru/">
Теперь перейдем к атрибутам группы мета-тегов NAME:
description — описание документа. Один из самых важных параметров, влияющих на ранжирование страницы поисковиками. Нормальное описание представляет из себя краткое содержание информации, содержащейся на странице. В описании также нужно использовать ключевые слова. Кроме того, содержимое мета тега description выводится поисковой системой на странице выдачи по запросу сразу под содержимым мета тега TITLE. И обычно после его прочтения пользователь решает посещать ему эту страницу или нет. Пример HTML-кода:
< meta name="description" content="Описание страницы, до 100 символов">
keywords — ключевые слова. Именно сюда нужно внести те ключевые слова и словосочетания, которые вы составите для страницы. Добавлять их нужно через запятую. Раньше содержимое этого тега было важно для ранжирования в поисковых системах, сейчас же поисковики практически не придают ему значения. Но это еще один способ честно разместить ключевые слова на странице, так что глупо было бы его не использовать. Пример HTML-кода:
< meta name="keywords" content="слово1, слово2, слово3 и т.д.">
Это все метатеги HTML, которые будут нужны новичку. Остальные специфичны и могут понадобиться вам после того, как наберётесь опыта и будете точно знать, что делаете. Из всех же вышеперечисленных мной настоятельно рекомендую использовать на каждой странице твоего сайта следующие:
< head>
< meta http-equiv="content-type" content="Тип документа и кодовая страница">
< meta name="keywords" content="Ваши ключевые слова">
< meta name="description" content="Ваше описание страницы">
< title>Заголовок страницы< /title>
< /head>
Остальные применяйте по мере необходимости, но особо не заморачивайтесь. Помните, что метатеги не сделают ваш сайт интересным, они могут лишь помочь браузеру и web-серверу правильно отобразить страницы сайта, а поисковой системе их найти.
|
- задается описание типа документа [декларация];
- открывается контейнер HTML [<html>];
- начинается голова документа [<head>];
- задается название документа между соответствующими тегами [<title></title>];
- закрывается голова документа [</head>];
- начинается тело документа [<body>];
- вносится вся необходимая информация [текст, таблицы, изображения, видео и т.д.] - контент;
- закрывается тело документа [</body>];
- закрывается контейнер HTML [</html>];
Дата добавления: 2018-08-06; просмотров: 162; | Поделиться с друзьями:
|
Мы поможем в написании ваших работ!
