Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ПРОЕКТ № 4 - пятница.docx
Скачиваний:
1
Добавлен:
27.08.2019
Размер:
1.19 Mб
Скачать

Вложенные таблицы

Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере нашей последней разметки. Итак, у нас есть вот такой код:

<html>

<head>

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

</head>

<body>

<table width="715" border="1"

align="center" cellspacing="0" cellpadding="10">

<tr bgcolor="darkred">

<td width="70%" height="60">шапка</td>

<td rowspan="2">меню</td>

</tr>

<tr bgcolor="oldlace">

<td height="200">контент</td>

</tr>

<tr bgcolor="darkred">

<td colspan="2" height="30">низ сайта</td>

</tr>

</table>

</body>

</html>

Давайте внутрь нашего контента поместим во такую таблицу:

Картинки для нее подберите сами. Код этой таблицы простой - три строки и два столбца:

<table width="470" border="1"

align="center" cellspacing="0" cellpadding="10">

<tr>

<td width="100"><img src="f1.jpg" width="100" height="70"></td>

<td>Здесь текст о ромашках</td>

</tr>

<tr>

<td width="100"><img src="f2.jpg" width="100" height="70"></td>

<td>Здесь текст о тюльпанах</td>

</tr>

<tr>

<td width="100"><img src="f3.jpg" width="100" height="70"></td>

<td>Здесь текст о герберах</td>

</tr>

</table>

Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код нашей разметки:

<html>

<head>

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

</head>

<body>

<table width="715" border="1"

align="center" cellspacing="0" cellpadding="10">

<tr bgcolor="darkred">

<td width="70%" height="60">шапка</td>

<td rowspan="2">меню</td>

</tr>

<tr bgcolor="oldlace">

<td height="200">

<table width="470" border="1"

align="center" cellspacing="0" cellpadding="10">

<tr>

<td width="100"><img src="f1.jpg" width="100" height="70"></td>

<td>Здесь текст о ромашках</td>

</tr>

<tr>

<td width="100"><img src="f2.jpg" width="100" height="70"></td>

<td>Здесь текст о тюльпанах</td>

</tr>

<tr>

<td width="100"><img src="f3.jpg" width="100" height="70"></td>

<td>Здесь текст о герберах</td>

</tr>

</table>

</td>

</tr>

<tr bgcolor="darkred">

<td colspan="2" height="30">низ сайта</td>

</tr>

</table>

</body>

</html>

Результат:

Теперь уберем все границы у вложенной таблицы. Для этого в теге <table> этой таблицы зададим параметр <border="0">

<table width="470" border="0"

align="center" cellspacing="0" cellpadding="10" >

Результат:

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

Вот серия наших уроков и подошла к концу. Теперь вы знаете, как сделать простой сайт и разместить его в интернете. Согласитесь, что это совсем не сложно. Пробуйте, продолжайте учиться и развивайте свои проекты. Удачи Вам!

ТАБЛИЦА ЦВЕТОВ

Таблица 16 основных цветов, которые используются во всех браузерах.

Название

Цвет

Hex

(RGB)

  Aqua (морская волна)

 

  #00FFFF

(000,255,255)

  Black (черный)

 

  #000000

(000,000,000)

  Blue (голубой)

 

  #0000FF

(000,000,255)

  Fuchsia (фуксин)

 

  #FF00FF

(255,000,255)

  Gray (серый)

 

  #808080

(128,128,128)

  Green (зеленый)

 

  #008000

(000,128,000)

  Lime (ярко-зеленый)

 

  #00FF00

(000,255,000)

  Maroon (темно-бордовый)

 

  #800000

(128,000,000)

  Navy (темно-синий)

 

  #000080

(000,000,128)

  Olive (оливковый)

 

  #808000

(128,128,000)

  Purple (фиолетовый)

 

  #800080

(128,000,128)

  Red (красный)

 

  #FF0000

(255,000,000)

  Silver (серебряный)

 

  #C0C0C0

(192,192,192)

  Teal (серо-зеленый)

 

  #008080

(000,128,128)

  White (белый)

 

  #FFFFFF

(255,255,255)

  Yellow (желтый)

 

  #FFFF00

(255,255,000)

     Таблица пурпурного цвета и его оттенков.

Название

Цвет

Hex

(RGB)

  Magenta (пурпурный)

 

  #FFCBDB

(255,203,219)

  Magenta (пурпурный)

 

  #FF0099

(255,000,153)

  Magenta (маджента)

 

  #F95A61

(249,090,097)

  Fuchsia (фуксия)

 

  #FF00FF

(255,000,255)

  Мовеин (анилиновый пурпур)

 

  #EF0097

(239,000,151)

  Salmon pink (оранжево розовый)

 

  #FF91A4

(255,145,164)

  Cenise (оттенок пурпурного)

 

  #DE3163

(153,149,140)

  Aubergine Eggplant (баклажановый)

 

  #990066

(153,000,132)

  Lavender blush (розовато-лавандовый)

 

  #FFF0F5

(255,240,245)

  Lilac (сиреневый)

 

  #C8A2C8

(200,162,200)

  Magenta (маджента)

 

  #FF008F

(255,000,143)

  Orchid (орхидея)

 

  #DA70D6

(218,112,214)

  Red-violet (фиолетово-красный)

 

  #C71585

(199,021,133)

  Sanguine (сангиновый)

 

  #92000A

(146,000,010)

  Thistle (оттенок пурпурного)

 

  #D8BFD8

(185,211,238)

  Violet-eggplant (оттенок пурпурного)

 

  #991199

(153,017,153)

  Rosa vivo (насыщено розовый)

 

  #FF007F

(255,000,127)

  Lavender-rose (оттенок пурпурного)

 

  #FBA0E3

(108,123,139)

  Mountbatten pink (розовый Маунбаттена)

 

  #997ABD

(153,122,141)

ТАБЛИЦА ОСНОВНЫХ ТЕГОВ ЯЗЫКА HTML.

Основные теги

<html></html>

Указывает программе просмотра страниц что это HTML документ.

<head></head>

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

<body></body>

Определяет видимую часть документа  Теги оглавления

Теги Оглавления

<title></title>

Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

<body bgcolor=?>

Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

<body text=?>

Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

<body link=?>

Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.

<body vlink=?>

Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: #333333 - серый цвет.

<body alink=?>

Устанавливает цвет гиперссылок при нажатии.

Теги для форматирования текста

<pre></pre>

Обрамляет предварительно отформатированный текст.

<h1></h1>

Создает САМЫЙ БОЛЬШОЙ заголовок

<h6></h6>

Создает самый маленький заголовок

<b></b>

Создает жирный текст

<i></i>

Создает наклонный текст

<tt></tt>

Создает текст - имитирующий стиль печатной машинки.

<cite></cite>

Используется для цитат, обычно наклонный текст.

<em></em>

Используется для выделения из текста слова (наклонный или жирный текст)

<strong></strong>

Используется для выделения наиболее важных частей текста (наклонный или жирный текст)

<font size=?></font>

Устанавливает размер текста в пределах от 1 до 7.

<font color=?></font>

Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

<a href="URL"></a>

Создает гиперссылку на другие документы или часть текущего документа.

<a href="mailto:EMAIL"> </a>

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

<a name="NAME"></a>

Отмечает часть текста как цель для гипперссылок в документе.

<a href="#NAME"></a>

Создает гиперссылку на часть текущего документа.

Форматирование текста

<p>

Создает новый параграф

<p align=?>

Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center

<br/>

Вставляет перевод строки.

<blockquote> </blockquote>

Создает отступы с обеих сторон текста.

<dl></dl>

Создает список определений.

<dt>

Определяет каждый из терминов списка

<dd>

Описывает каждое определение

<ol></ol>

Создает нумерованный список

<li>

Определяет каждый элемент списка и присваивает номер

<ul></ul>

Создает ненумерованный список

<li>

Предваряет каждый элемент списка и добавляет кружок или квадратик.

<div align=?>

Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей

Графические элементы

<img src="name">

Добавляет изображение в HTML документ

<img src="name" align=?>

Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

<img src="name" border=?>

Устанавливает толщину рамки вокруг изображения

<hr>

Добавляет в HTML документ горизонтальную линию.

<hr size=?>

Устанавливает высоту(толщину) линии

<hr width=?>

Устанавливает ширину линии, можно указать ширину в пикселах или процентах.

<hr noshade>

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

<hr color=?>

Задает линии определенный цвет. Значение RRGGBB.

Таблицы

<table></table>

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

<tr></tr>

Определяет строку в таблице.

<td></td>

Определяет отдельную ячейку в таблице.

<th></th>

Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Атрибуты таблицы

<table border=?>

Задает толщину рамки таблицы.

<table cellspacing=?>

Задает расстояние между ячейками таблицы.

<table cellpadding=?>

Задает расстояние между содержимым ячейки и ее рамкой.

<table width=?>

Устанавливает ширину таблицы в пикселах или процентах от ширины документа.

<tr align=?> или <td align=?>

Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.

<tr valign=?> или <td valign=?>

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

<td colspan=?>

Указывает кол-во столбцов которое объединено в одной ячейке. (по умолчанию=1)

<td rowspan=?>

Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)

<td nowrap>

Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.