Что такое тег <div>? Как теги <div> используются для размещения текстов, изображений и ссылок на html странице? Тегд <div> и стили css.
1. Что такое тег <div>?
В этой статье мы разберемся, что такое тег <div>, где он применяется, как с помощью тега <div> разместить картинки, тексты и многое другое. Так же, не мало важным является то, что именно тег <div> очень часто используется в комплексе с таблицами стилей css. Мы тоже разберемся с некоторыми из них.
Итак, тег <div> - блочный элемент html страницы, который предназначен для управления размещением и придания самых разнообразных свойств текстам, изображениям, ссылкам и др объектам.
Сам по себе (без атрибутов и стилей css), тег <div> никак не влияет на элементы html страниц. Без использования стилей, тег <div> предназначен для размещения элементов на html странице. Для этого необходимо обязательно тегу <div> атрибут align.
Но, давайте не будем ходить вокруг да около, и сразу перейдем к практике.
2. Как теги <div> используются для размещения текстовых блоков на html странице?
С помощью тега <div> можно разместить любой элемент в любой части страницы.
К примеру, у нас есть слово "ТЕКСТ". Для его размещения используйте тег <div> таким образом:
Code
<div align="left">ТЕКСТ</div> - слово будет размещено в левой части html страницы
<div align="right">ТЕКСТ</div> - слово будет размещено в правой части html страницы
<div align="center">ТЕКСТ</div> - слово будет размещено по центру html страницы
<div align="justify">ТЕКСТ</div> - слово будет размещено по ширине html страницы
В браузере это выглядит так:
3. Как разместить картинку (изображение) с помощью тега <div>?
Применяя тег <div>, мы можем быстро и легко разместить в необходимом месте html страницы не только текст, но и картинки.
Делается это так:
Допустим, у нас есть картинка, которая называется flow.jpg и размещены она в той же директории (в той же папке), что и файл, на котором она должна быть размещена. Так же она имеет ширину 100 пикселей и высоту - 72 пикселя. В этом случае теги <div> записываются так:
Code
<div align="left">1<img src="flow.jpg" width="100" height="72"></div> - изображение цветка будет размещено в левой части html страницы
<div align="right">2<img src="flow.jpg" width="100" height="72"></div> - картинка будет размещена в правой части html страницы
<div align="center">3<img src="flow.jpg" width="100" height="72"></div> - слово будет размещено по центру html страницы
В браузере это выглядит так:
4. Как разместить ссылку с помощью тега <div>?
С помощью тегов <div> можно размещать на страничке html не только простой текст или изображение, но и ссылки.
Делается это так:
Допустим нам нужно установить где-нибудь на html страничке ссылочку, ведущую на сайт http://uzeron.com. Соответственно, разместить ссылку на страничке html с помощью тега <div> можно так:
Code
<div align="left"><a href="http://uzeron.com/index.php">Ссылка 1</a></div> - ссылка будет размещена в левой части html страницы
<div align="right"><a href="http://uzeron.com/index.php">Ссылка 2</a></div> - ссылка будет размещена в правой части html страницы
<div align="center"><a href="http://uzeron.com/index.php">Ссылка 3</a></div> - слово будет размещено по центру html страницы
Просматривая страничку с такими ссылками в браузере, мы увидим это:
Ну во мы и разобрались, как размещаются тексты, изображения и ссылки на html страничках сайтов с помощью тегов <div>. Ничего сложного здесь нет.
