Тема выпуска: HTML для начинающих. Урок 5

 Здравствуйте!

О чем мы еще не говорили?  О-о! Познакомимся с тегом <div>, с одним из основных и важных тегов в HTML, точнее в среде разработки сайтов, веб-приложений, компьютерных программ и т.д., в частности <div> широко используется в CSS, PHP, JavaScript и других языках программирования, но это уже совсем другая история…

Мы же с вами изучаем HTML, где данный тег также используется, пусть реже, но используется. Итак, если вы заключите какой-нибудь абзац или часть текста в тег <div> и посмотрите результат в браузере, то не заметите каких-либо кардинальных изменений, но они и не должны появиться. 

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

Данный тег начнет работать в том случае, когда мы придадим ему какой-либо атрибут, к примеру, атрибут align с выравниваем по правому краю. В коде HTML это выглядим следующим образом:

О данном теге мы еще будем говорить в цикле статей по изучению CSS (каскадные таблицы стилей), который я планирую начать писать сразу после уроков по HTML, а пока научимся вставлять в нашу веб-страницу изображения, за внедрение которых отвечает одинарный тег <img>, и линии.

Вставка изображений и линий в HTML-страничку

Для примера попробуем вставить в наш текст какую-нибудь картинку, делается это так:

HTML-код

Вид в браузере

В атрибуте src="…" прописывается путь до туда, где лежит ваша картинка. Также можно указать ширину и высоту изображения с помощью атрибутов width (ширина) и height (высота).

Для поисковых систем в изображениях рекомендуется прописывать атрибут alt="…", по нему поисковики смогут находить вашу картинку, что позволит получить дополнительный трафик. Особенно это актуально для «молодого» сайта или блога. На первых порах трафик с картинок Google и Яндекса может вообще стать единственным, который вы будете получать.

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

Если вы хотите чтобы отображалась всплывающая подсказка при наведении курсора на картинку, пропишите атрибут title="…".

Чтобы текст обтекал картинку с правого или левого края прописывается знакомый нам уже атрибут align="…".

Для отступов с краев предназначен атрибут hspace="…", для отступа сверху – атрибут vspace="…".

С изображениями вроде бы разобрались, идем дальше…

На очереди у нас одинарный тег <HR> с помощью которого можно вставлять линии в HTML-документ.

У тега <HR> есть атрибуты ширины (width="…"), цвета (color="…") и размера, так называемой толщины линии (size="…"), применение которых вы можете видеть на изображении ниже:

Ну, вот и все! Очередной урок подошел к концу, надеюсь, он был полезен для вас.