metoda / Kl_ITIn_2014

1.Крупные города России:

Москва

Санкт-Петербург

2.Крупные города Украины:

Киев

Списки определений

Списки определений являются способом определения терминов и понятий. Списки определений состоят из трех элементов: элемента списка определений <dl> ... </dl>, элемента определения термина <dt> ... </dt>, элемента определения описания <dd> ... </dd>.

Код примера

<dl> <dt>Пиксель</dt>

<dd>Элементарная цветная точка, совокупность которых образует изображение.</dd>

<dt>Экспозиция</dt>

<dd>Количественная мера световой энергии, падающая на светочувствительный элемент.</dd>

<dt>Диафрагма</dt>

<dd>Параметр, регулирующий количество света, который освещает матрицу.</dd>

</dl>

отобразится в браузере так:

Пиксель Элементарная цветная точка,

совокупность которых образует изображение.

Экспозиция Количественная мера световой энергии, падающая на

светочувствительный элемент. Диафрагма

Параметр, регулирующий количество света, который освещает матрицу.

4.Таблицы.

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

Параметры таблицы

Параметры ячеек

Упражнение

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

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

Для добавления таблицы на веб-страницу используется тег <table>. Таблица должна содержать хотя бы одну строку и колонку.

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

Значение, заданное в пикселах, является фиксированным значением.

В этом примере ширина всегда будет занимать 250 пикселов в окне браузера.

<table width="250"> </table>

Пример самой простой таблицы, имеющей всего одну строку и одну колонку:

Привет :-)

Эта табличка в виде кода выглядит так:

<table border=1 width="250"> <tr>

<td>

Привет :-) </td>

</tr>

</table>

Для добавления строк используются теги <tr> и </tr>.

Чтобы разделить строки на колонки применяются теги <td> и </td>.

Таблица с двумя колонками (используем теги <td> и </td>):

Привет :-)Пока!

Она имеет следующий код:

<table border=1> <tr>

<td> Привет :-)</td> <td> Пока! </td>

</tr>

</table>

Для добавления строк используем теги <tr> и </tr>

Данная таблица имеет две стоки и два столбца:

Весна Лето Зима Осень

Код таблицы будет выглядеть следующим образом:

<table>

<tr> <td>Весна</td> <td>Лето</td>

</tr>

<tr> <td>Зима</td> <td>Осень</td>

</tr>

</table>

Параметры таблицы

Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге <table>

<table параметр1=... параметр2=...>

Параметры ячеек

С помощью параметров ячеек можно изменять вид и оформление таблиц.

Параметры, которые могут быть добавлены к тегам <tr> и <td>.

соответствовать

ширине двух колонок.

Пример таблицы.

Рассмотрим ее код:

<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%> <tr>

<td rowspan=2 align=center><b>Времена года</b></td> <td width=20%>Весна</td>

<td width=20%>Лето</td> </tr>

<tr> <td>Осень</td> <td>Зима</td>

</tr>

</table>

В данном случае было задано для всей таблицы:

border=5- толщина рамки таблицы в 5 пикселей;

bordercolor=#FAD0D0цвет рамки таблицы розовый;

cellpadding=7 - расстояние между ячейками и их содержимым;

width=40%- ширина таблицы в процентах от всего окна браузера;

Для ячеек

width=20%- ширина ячейки от всей ширины таблицы. Ширина ячейки "Весна" будет равна ширине ячейки "Осень".

align=centerразмещение текста по центру. По умолчанию текст в ячейке будет расположен слева.

rowspan=2- задание высоты ячейки "Времена года" в две строки.

5.Изображения

Вставка изображения

Размеры изображения

Рамка вокруг изображения

Альтернативный текст

Выравнивание изображения

Отступы вокруг изображения

Разбиение изображения на части

Упражнение

Вставка изображения

Для вставки изображения в html-документ используется непарный тег <img>, который помещается в то место документа, где должно быть вставлено изображение. У этого тега есть обязательный параметр src, значение которого указывает путь к нужному изображению в каталоге вашего сайта.

Например, чтобы поместить на страничку изображение:

в нужном месте документа помещается строчка:

<img src="http://www.mysite.com/img/1.png">

Это дает браузеру понять, что в корневом каталоге сайта www.mysite.com есть подкаталог img, в нем лежит изображение с именем 1.png, которое и нужно поместить на страничке.

Здесь мы указали полный путь (или абсолютный адрес) до изображения. А можно указать относительный адрес изображения:

<img src="img/1.png">

Такую строчку браузер интерпретирует так: в каталоге, где лежит данный html-документ, есть подкаталог img, в нем лежит изображение с именем 1.png, которое и нужно поместить на страничке.

А вот пример указания относительного адреса изображения, если у вашего сайта более сложная структура и предыдущий пример не подходит:

<img src="../img/1.png">

Такую строчку браузер интерпретирует так: сочетание символов ../ означает, что из каталога, где лежит данный html-документ, нужно выйти на уровень вверх; а далее как в предыдущем примере: в том каталоге, где мы оказались есть подкаталог img, в нем лежит изображение с именем 1.png, которое и нужно поместить на страничке.

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

Размеры изображения

Размер каждого изображения задается двумя параметрами: ширина и высота. У тега <img> есть соответствующие параметры: width и height. Эти параметры принимают значения в пикселах (px).

Вы можете задать истинные размеры изображения:

<img src="img/1.png" width="176" height="146">

Это делать необязательно, но полезно, т.к. немного ускоряет процесс загрузки странички браузером (браузеру не приходится самостоятельно вычислять эти величины). Если размеры изображения сразу заданы в параметрах тега <img>, то под данное изображение будет выделено место на страничке, и структура странички при загрузке уже не будет меняться - текст прыгать, например.

А можете увеличить или уменьшить изображение, присвоив параметрам width и height другие значения. Причем, если вы хотите пропорционально изменить оба параметра, достаточно указать новое значение только одному из них, а второй - просто опустить. Браузер вычислит его автоматически.