- Заработок без сайта
- Заработок на сайте
- Раскрутка сайта
- Темная раскрутка
- Рефералы
- Лохотроны
- Черный список
- Архив
- Домены
- Таблицы стилей CSS
- Контакты
- Ссылки
- Статьи
- Вводная
- Учимся раскрашивать
- Выравнивание текста
- Заголовки и выделение текста
- Шрифты в Html
- Вставляем картинки
- Картинки и текст в Html
- Текстовые ссылки
- Картинка как ссылка
- Навигационные карты
- Якоря
- Таблицы
- Выравнивание текста в таблицах
- Объединяем ячейки
- Расстояние между ячейками таблицы
- Вложенные таблицы
- Примеры с использованием таблиц
- Фреймы
- Полоса прокрутки во фреймах
- Плавающий фрейм
- Списки в документах Html
- Спецсимволы в документах html
- Линии в документах Html
- МЕТА теги
- Список основных тегов
- Таблица цветов
HTML
Начинающим
Учимся вставлять картинки
На этой странице я расскажу как вставлять изображение в Web-документ и как правильно прописывать ссылки на другие документы или Web-ресурсы.
Рисунки позволяют существенно повысить привлекательность Web-страницы, лучше передать содержание документа. Рисунки на Web-странице должны быть созданы в таком графическом формате, который поддерживается браузером. К стандартным форматам Web-графики относятся GIF, JPG и PNG. Эти форматы обеспечивают эффективное сжатие изображений и минимальный размер файлов, что значительно сокращает время загрузки вашей страницы из сети. Для вставки изображения в Web-документ используется тег <img>, тэг <img> не требует закрывающего тэга.
photo.jpg это имя картинки и вы можете подставить имя любой картинки. Самое главное понять, что все расположенное между кавычками это ссылка, путь к картинке. В моем примере картинка лежит в той же папке (директории), в которой лежит документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:
Такая ссылка означает, что картинка лежит в папке index.files с именем photo.jpg.
У себя на компьютере я сохранил картинку с именем photo.jpg на диске Е: внутри папки
Мой первый сайт (в этой папке я сохранял свой документ html)
Если картинка лежит на уровень выше, а документ находится в поддиректории, то
ссылка на неё будет такой:
Если картинка лежит на другом сайте, то путь прописывается полностью:
Хочу обратить ваше внимание на то, что имя графического файла в теге следует указывать с соблюдением регистра PHOTO.jpg, photo.JPG, photo.jpg и PHOTO.JPG это разные имена файлов.
|
<html>
<head> <title>Моя первая страничка</title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> <h2>Это моя первая страница.</h2> <br> <font color="#009933">У меня все получится.</font></div> <hr color="#FF0033"> <div align="Justify"> <font color="#CCCCFF"> <img src="photo.jpg" width="320" height="256"> <font size="+2" face="Cosmic Sans, arial, verdana, courier"> Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font> <b> Он словно сошел с картинки </b> парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. <i> Однако внимание привлекал не столько щегольской наряд пассажира, </i> сколько импозантная, можно даже сказать, эффектная внешность. <u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u> ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках. <p align="right">Борис АКУНИН</p> </font> </div> </body> </html> посмотреть |
Из примера видно, что рядом с картинкой одна строчка текста, чтобы текст располагался весь рядом с картинкой надо вспомнить об уже знакомом вам атрибуте align, который отвечает за выравнивание.
- <img src="photo.jpg" align="left"> Картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.
- <img src="photo.jpg" align="right"> Картинка будет прижата к правому краю экрана, а текст будет обтекать ее слева.
- <img src="photo.jpg" align="bottom"> Текст будет располагаться внизу картинки.
- <img src="photo.jpg" align="middle"> Текст будет располагаться посередине картинки.
- <img src="photo.jpg" align="top"> Текст будет располагаться вверху картинки.
Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:
- <img src="photo.jpg" vspace="10"> Атрибут vspace - задает расстояние между текстом и рисунком по вертикали (в пикселях).
- <img src="photo.jpg" hspace="30"> Атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали (в пикселях).
- <img src="photo.jpg" alt="моя фотография"> Атрибут alt - краткое описание картинки.
- <img src="photo.jpg" width="100"> Атрибут width - ширина самой картинки (в пикселях).
- <img src="photo.jpg" height="200"> Атрибут height - высота самой картинки (в пикселях).
- <img src="photo.jpg" border="5"> Атрибут border - рамка вокруг самой картинки (в пикселях).
Напоминаю, что атрибуты для одного тэга могут употребляться одновременно друг с другом, В документе это будет выглядеть примерно так:
Картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей, ширина картинки 320 пикселей, высота картинки 256 пикселей, рамка вокруг картинки отсутствует, ну и если вы наведете на картинку курсор, то выскочит подсказка "Просто картинка".
|
<html>
<head> <title>Моя первая страничка</title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> <h2>Это моя первая страница.</h2> <br> <font color="#009933">У меня все получится.</font></div> <hr color="#FF0033"> <div align="Justify"> <font color="#CCCCFF"> <img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" border="0" alt="Просто картинка"> <font size="+2" face="Cosmic Sans, arial, verdana, courier"> Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font> <b> Он словно сошел с картинки </b> парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. <i> Однако внимание привлекал не столько щегольской наряд пассажира, </i> сколько импозантная, можно даже сказать, эффектная внешность. <u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u> ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках. <p align="right">Борис АКУНИН</p> </font> </div> </body> </html> посмотреть |
Чтоб расположить саму картинку в центре экрана, справа или слева, вспомните параграфы
<p></p> или <div></div> эти теги
выравнивают не только текст.
Картинку можно сделать основным фоном документа, добавляем атрибут background="photo.jpg"
для открывающего тега <body>
Атрибут background указывает на то, где лежит фоновая картинка, в данном примере он указывает на то, что фоновая картинка лежит в той же папке, что и наш документ. Попробуйте у себя в блокноте добавить атрибут background для открывающего тега <body> и посмотрите, что у вас получится. В качестве фона можете взять любую картинку или сохранить у себя на компьютере мой образец.
| Вернуться назад | Перейти к следующей странице |
|---|