Урок 15. Вставляем изображение
Теперь применим знания из предыдущих уроков и добавим к нашему тексту изображение. Для этого будем использовать знакомый нам тэг <<strong>img
В блок с контентом после заголовка добавим следующую строчку:
<img src="Подпапка/logo.png" alt="лого">
А в файле стилей укажем свойства для нашего изображения:
#content img {<br /> float:left;<br /> margin:10px;<br />}
Вот, что мы увидим в браузере:
У нас появился рисунок, а рядом расположился текст. Если увеличить количество текста, то проявится свойство обтекания, когда текст занимает все свободное пространство вокруг изображения, как бы обтекая его.
Добавим текст в документ HTML:
<p>        Приступая к созданию собственного сайта начинающий веб-мастер как правило оказывается погребен под лавиной новой информации. Он сталкивается с множеством неизвестных доселе понятий, специфических терминов и различных направлений. Каждая новая ссылка ведет на очередной ресурс, а там, то идет речь о HTML, то о раскрутке проекта. Но чаще о том, как заработать в сети.<br /><br /><br />          Начинающему сайтостроителю трудно разобраться в этом море разнообразной информации. Он теряется и может просто разочароваться в своем начинании. Бросить его, побоявшись, что не в состоянии освоить новую область знаний.<br /><br /><br />        Но все не так плохо, как может показаться на первый взгляд. Можно сказать, что все очень просто, если подойти к делу с умом. Если иметь четкий план погружения в новый мир веб-строительства. Следуя этому плану, осваивая новые знания в определенной логической последовательности можно не только не утонуть в океане информации, но и прийти к конечной цели - создать собственный Интернет сайт. Причем, следуя инструкции это не потребует сверхчеловеческих усилий и больших затрат времени. Уже в ближайшее время можно будет гордиться собой, и демонстрировать результат собственного труда.</p>
В браузере мы увидим следующее:
Примечание: Перенос строк выполнен с помощью тэга
, а отступы абзацев сделаны знаком неразрывного пробела .
Далее... Урок 16. Ссылки и списки
Вернуться к Оглавлению