Добавление картинок
Четверг, 12 августа 2010 г.Рубрика: Уроки HTML -> Картинки
Метки: добавление картинок
Просмотров: 796
Подписаться на комментарии по RSS
Сегодня будем учиться добавлять картинки на сайт.
Для начала запомните, страница (сайт) не должна представлять собой супер
графического изыска, который весит десятки мегабайт, т.к. это жестоко, и
ни кто не выдержит подобной пытки (страница будет долго загружаться).
Вот, например, эта страница, содержание которой вы сейчас тщательно
изучаете, весит в картинках не более 70 килобайт (это общий вес всех
картинок, а не вес каждой), что вполне допустимо, и не слишком тяжело.
Также мы посоветуем не изощряться с анимированными картинками: они
отвлекают внимание от содержания страницы, да и анимированные картинки
уже не приемлимы на большинстве сайтов, вместо этого, например эффекты
для кнопки, используют css, он конечно лучше анимации. Постарайтесь
также создавать свои картинки для своего сайта, а не собирать их по
бесплатным коллекциям с графикой, пусть ваш сайт будет уникальным.
Теперь перейдём к тому, как вставлять картинки в страницу:
<img src="my.jpg">
Вместо my.jpg Вы можете подставить имя любой другой картинки
(me.gif, main.png). Самое главное понять, что все расположенное между
кавычками - ссылка (путь к картинке). Наш пример говорит о том, что
картинка лежит в том же каталоге (директории, папке), в которой лежит и
наш сайт. Если картинка лежит в поддиректории (в папке, которая лежит в
вашей основной папке), то ссылка на неё будет выглядеть так:
<img src="my/my.jpg">
Если картинка лежит на уровень выше, а страница находится в
поддиректории, то ссылка на неё будет такой:
<img src="http://web-stroika.ru/my.jpg">
Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src="http://www.homepage.ru/my/my.jpg">
Для вашего удобства кладите картинку в ту же папку, что и документ,
тогда путаницы будет меньше. Также мы хотим обратить Ваше внимание на
то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов.
Никогда не забывайте, что регистр нужно учитывать.
И хотелось бы заметить, что тег img не требует закрывающего тега.
<html> <head> <title>Мой первый сайт</title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> <H3>Это мой сайт</H3> <br> <font color="#CC0000"> Добро пожаловать!</font></div> <p align="justify"> <img src="myimg.jpg"> Эта страница очень проста в понимании и если Вы можете создать именно такую простую страницу, то в последующем изучении html ( а потом и css ) на нашем сайте - <a href="http://web-stroiika.ru">web-stroiika.ru</a> Вы сможете создать уже сложный по структуре и способностям свой персональный сайт. </p> </body> </html>
В заключении к уроку хотелось бы сказать, что на сайте следует
использовать поменьше картинок, для ускорения загрузки страницы, ведь
чем больше картинок, тем браузер будет дольше их обробатывать и
медленней подгружать остальные элементы страницы.
сегодня на уроке в 8 классе проходили вставку изображений. при объяснении новой темы также воспользовался советами из данного урока. он оказался очень даже полезным в тяжком труде учителя - чему-то научить школьника. не желающего учиться.
Хорошая статья для новичка в HTML такого как я! Особенно ценно замечание по поводу собственных картинок, ведь используя чужие можно нарватся на нарушение авторских прав, что приведёт к плачевным последствиям ;)