Как вставить картинку в html за минуту?

Приветствую друзей блога int-net-partner.ru и тех, кто впервые посетил его страницы. Давайте поговорим о том, как вставить картинку в html код и украсить обычную текстовую статью изображениями. Вам это интересно, но вы далеки от программирования? Без паники, я научу вас, как за пару минут решать этот вопрос.

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

Сайт на Вордпресс позволяет пользователю добавить картинку более упрощенным методом, через специальную клавишу, но что делать, если вам необходимо создать код вручную?

Путь новичка

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

Мне лично часто удобнее откорректировать данные страницы именно через код, а не настройки. Вот так выглядит та же страница в html.

Так как в моем примере много сплошного текста и отсутствуют различные вставки, то и кода не так много, но когда вы заинтересуетесь изучением языков программирования, то поймете, что правильное написание кода страницы – залог верного ее отображения и каждая отсутствующая кавычка или неверное написание тега, влечет за собой визуальный сбой.

Тег img

Как и любая кодировка, язык html насчитывает множество специальных значений, которые принято называть тегами. Например, таблица – table, а изображение имеет код —  img.

На странице в режиме html приблизительно он выглядит так:

<img src=»http://ваш-сайт/images/article/11012015/atr.jpg» width=»504″ height=»506″>

Все теги в коде указываются в угловых скобках:

• Открытие тега обозначается такой скобкой <  ;
• Закрытие тега вот такой > .

Путь к картинке обычно обозначается атрибутом src, как вы видите из примера. Далее идет указание конкретных данных, поэтому ставится знак равенства. Для обозначения адреса пути, где расположена нужное изображение, используются двойные кавычки, они открывают и закрывают путь.

Давайте обратим внимание на путь, который следует указать в двойных кавычках. Он указывает на место, где хранится изображение на хостинге. Очень важно правильно сортировать изображения по папкам, а не размещать их все в одной. Учитесь этому сразу, чтобы впоследствии у вас не возникло путаницы.

Из примера следует, что на хостинге в корне находится папка «images», чаще всего она стандартная, а в ней уже папка «article», в которой создана папка с датой добавления статьи «11012015». Сама же img называется atr.jpg. Как видите, никаких пробелов не требуется, путь, как и весь код, нужно писать предельно внимательно.

Если ваша картинка уже оптимизирована и вы заранее подготовили ее размер, пользуясь одной из редакторских программ (например, Photoshop), то вы можете не указывать параметры ее ширины и высоты.

Но если вы скачали из сети фото с размером 1000 пикселей в ширину и 700 в высоту, а для статьи вам нужен размер изображения 500 пикселей, вы можете сократить к примеру, параметры в 2 раза и прописать в атрибутах картинки: 500 пикселей по ширине и 350 по высоте, выглядеть это будет так:

width=»500″ height=»350″

Дополнительные атрибуты

Размещаемому изображению можно придать дополнительные атрибуты:

• alt — информирует поисковые системы о находящемся на странице рисунке и его названии, которое раскрывает ключевые слова (alt=»Король Лев»);
• title — сообщает гостям сайта о находящемся img и его названии, которое содержит ключевики (title=»Король Лев»);
• align – позволяет выравнивать изображение (например: align=»center» – выравнивание по центру).

Если вы хотите сделать фото с ссылкой, то ее нужно заключить в тег ссылки. Как это делается. С тем, как прописать код для вставки картинки, вы уже ознакомились, верно?

Теперь перед его началом понадобится указать:

<a href=»http://ваш-сайт/multfilmi/king.html» target=»_blank»><img src=»http://ваш-сайт/images/article/11012015/atr.jpg» width=»504″ height=»506″ align=»center» title=»Король Лев» alt=»Король Лев»></a>

Итак, как видите, тег ссылки открывается перед кодом img и после закрывается, о чем символизирует вот такой вид тега: <a href…</a>.

Что касается его открытия. Атрибут href задается для указания пути ссылки, а после него вы видите в двойных кавычках ссылку на определенную страницу. То есть, при клике на картинку, человек перейдет на определенную страницу, а если вы хотите, чтобы эта ссылка открылась в новом окне, то прописать следует вот такой атрибут: target=»_blank».

Теперь вы знаете основы, которые помогут вам вставить изображение в документ или статью, а может даже и комментарий на форуме. Будут вопросы – задавайте их в комментариях, а чтобы узнавать полезную информацию для верстки сайтов и не только, подписывайтесь на объявления.

До новых встреч.

P/S

Хочу порекомендовать всем начинающим вебмастерам, тем кто хочет знать язык верстки на практике пройти обучение в университете по обучению онлайн-профессиям «Нетология». Это реально крутой университет, не пожалеете это точно.

С уважением, Александр Сергиенко