- •Основные понятия
- •Создание html-документа
- •Работа с текстом
- •Любое количество пробелов идущих подряд, на веб-странице отображается как один
- •Нет расстановки переносов в тексте
- •Текст занимает ширину окна браузера
- •То, что выделено цветом, на занятие не изучалось. Сохраните пока себе это для справки. К этому типу форматирования текста мы еще вернемся, когда будем изучать продвижение. Списки
- •Маркированный список
- •Нумерованный список
- •Открытие ссылки в новом окне
- •Изображения
- •Атрибуты colspan и rowspan позволяют объединять ячейки, таким образом, создаются сложные таблицы.
Открытие ссылки в новом окне
По умолчанию, при переходе по ссылке документ открывается в текущем окне. При необходимости, это условие может быть изменено параметром target тега <a>. Если установить у target значение _blank, то откроется новое окно и документ, на который ведет ссылка, загрузится в нем.
<a href="http://www.htmlbook.ru" target="_blank">Ссылка откроется в новом окне</a>
Изображения
Для встраивания изображения в документ используется тег <img>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Открывающий тэг |
Закрывающий тэг |
Атрибуты |
Что означают |
<img> |
нет |
width=”…px” |
Ширина |
height=”…px” |
Высота |
Путь к файлу изображения зависит от того, где лежит файл. Точно также как и ссылки на документы.
Чаще всего под изображения отводят отдельную папку под названием images. Формат изображения должен быть: jpg, png или gif.
<html> <head> <title>вставка изображения </title>
</head>
<body>
<img src="images/picture.jpg"> </body> </html>
Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <img> . В качестве значений используется пиксел (элементарная точка на мониторе) или проценты.
<img src=" images/picture.jpg " height="100px" width="100px">
Если указать только ширину изображения, то высота подстроится самостоятельно, сохраняя исходные пропорции и наоборот.
Важно: Сейчас редко изменяют размер изображения средствами HTML, чаще всего имеют уже изображения с нужными размерами, а если и требуется изменить размер, то делают это при помощи css.
Таблицы
Таблицы используются для упорядочения и представления данных. Раньше, с помощью таблиц верстали макеты страниц, расположив нужным образом фрагменты текста и изображений. Сейчас такую методику создания сайтов не используют.
Открывающий тэг |
Закрывающий тэг |
Атрибуты |
Что означают |
<table> |
</table> |
width=”…” |
ширина таблицы (в % или в px) |
border=”…px” |
устанавливает толщину рамки |
||
cellspacing=”…px” |
задает расстояние между внешними границами ячеек |
||
cellpadding=”…px” |
определяет расстояние между границей ячейки и ее содержимым |
||
<td> |
</td> |
width=”…” |
ширина ячейки (в % или в px) |
height=”…” |
высота ячейки (в % или в px) |
||
colspan=”n” |
объединить n ячеек в данной строке |
||
rowspan=”n” |
объединить n ячеек в данном столбце |
Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td> соответственно. Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега <td> использовать тег <th>. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. В остальном, разницы между ячейками, созданными через теги <td> и <th>, нет.
<html>
<head> <title>таблица </title>
</head> <body> <table border="1" width="40%" cellpadding="5"> <tr> <th>Ячейка 1</th> <th>Ячейка 2</th> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table> </body> </html>
Вид таблицы, полученной в данном примере, показан ниже.
Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
Ячейка 4 |
Ячейки формируются по строкам, вначале указывается первая строка, затем вторая и т.д.