28 марта 2024
карта сайта

Блоги пользователей сайта СПОРТ В ТВОЕМ ДВОРЕ


Здесь Вы найдете информацию, которую добавляют на сайт СПОРТ В ТВОЕМ ДВОРЕ наши блогеры - авторы персональных сетевых журналов (блогов). Статьи появляются на этой странице в хронологическом порядке (последняя из добавленных записей находится в самом верху). Вы можете почитать все статьи каждого блогера в отдельности, выбрав в меню слева (большой зеленый столбец) имя конкретного автора.
Любой посетитель нашего сайта может завести здесь свой блог. Сообщите нам о своем желании стать автором блога - и Вы получите возможность делиться своими впечатлениями, наблюдениями и опытом с широкой аудиторией любителей спорта и поклонников здорового образа жизни.

avatar

Статьи на разные темы

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

Какой же сайт без картинок? В этой статье вы узнаете, как сделать так, чтобы на вашей страничке появились самые разнообразные изображения.

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

Начнем с тега, который отвечает за изображения. Он всего один, безо всяких закрывающих тегов, а значит, запомнить его вдвое проще. Он выглядит так - <img>. Снова скажем спасибо урокам английского языка, научившим нас тому, что image и значит "изображение".

Тем не менее, от одного лишь <img> ничего дельного не выйдет. Нам нужно хотя бы указать, какая картинка должна появиться на странице. Для этого пишем <img src=""> и в кавычки вставляем название картинки. Разумеется, написать нужно не "красивый вид из моего окна зимой", а адрес изображения в интернете. Если картинка, как и создаваемый вами HTML-файл, сохранены на вашем компьютере, сначала убедитесь, что они находятся в одной папке, и потом укажите название картинки. Конечно, не забывайте указывать формат изображения - JPEG, PNG, GIF, и так далее.

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

Например, размер картинки. Здесь можно действовать двумя способами - либо менять ширину и высоту в процентах, либо в пикселях. В любом случае, использовать следует атрибуты height (высота) и width (ширина). Если вы указываете только ширину или только высоту, размер изображения меняется пропорционально и ничего не сплющивается и не растягивается. Если же указать и то, и другое, не учтя пропорций (например, уменьшить картинку размера 600х600 до 300х50), что-нибудь обязательно будет выглядеть не так, как надо. Предположим, вы хотите уменьшить картинку так, чтобы ее ширина была 200 пикселей, а высота - уж какая получится. Как это выглядит на деле - <img src="адрес_картинки" width="200px">. Не забывайте дописывать "px". Проценты указывают на соотношение картинки и страницы. То есть, если вы хотите, чтобы картинка заняла в ширину всю страницу, смело пишите width="100%". Если же вам нужно лишь четверть страницы, укажите width="25%".

Далее - выравнивание картинки. Можно выровнять ее по центру, по левому или по правому краю. И здесь нам тоже пригодятся знания английского языка, ведь теги для выравнивания - <left></left>, <right></right> и <center></center>. Расположите их по обе стороны от тега <img> (сначала открывающий тег, потом закрывающий), и в первом случае картинка будет слева, во втором - справа, и в третьем - в центре.

Как добавить рамку? Все просто - вписываем в тег <img> атрибут border="" и в кавычках пишем число от одного до бесконечности. 1 - самая тонкая рамка, чем больше число, тем она толще.

Иногда у людей бывают проблемы с интернетом, и картинки не загружаются. Но все-таки им тоже хочется узнать, что изображено на картинке, и в этом помогает альтернативный текст. Он появляется на месте картинки, если та не загружается. Альтернативный текст - это атрибут alt="", где он пишется в кавычках.

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

<html>
<head></head>
<body bgcolor="green">
<center><img src="http://boredomfiles.com/wp-content/uploads/2014/10/19-japanese-maple-fall.png" width="300px" alt="Красивый лес в Японии осенью"></center>
</body>
</html>

И вот как это выглядит.

Пример использования атрибутов тега <img>