Html для блоггеров #2
0 likes564 views
Урок посвящен работе с изображениями в HTML для блогеров, разъясняя ключевые параметры, такие как 'src', 'width', 'height', и 'align'. Обсуждаются способы изменения размера изображений и их отображение на веб-страницах, включая использование процентов для ширины. Также упоминается возможность создания предпросмотра изображения, который ведет на полную версию.
Html для блоггеров #2
- 1. HTML для блоггеров(Урок 2)VDas.livejournal.com © 2009 presentsПродолжаем работать с картинками
- 2. Как менять размер картинкиВспомним что такое картинка в описании для интернета<imgsrc=“http://fastid.eu/_host/zagadka.png”>Обратим внимание на src=Это параметр картинки «источник т.е. откуда взять» и таких параметров есть еще…
- 3. Какие еще параметры могут быть?<imgsrc=“http://fastid.eu/_host/zagadka.png”>Например вот такие:width– можно задать ширину картинкиheight– можно задать высоту картинкиalign– можно задать выравниваниеРассмотрим их подробнее:
- 4. Внимание!Параметры не меняют саму картинку – они только указывают как её показать!Т.е., например, если мы укажем, что огромная картинка должна быть шириной 100 – она всё равно будет скачиваться целиком и только при отображении будет прямо в бровзере сжиматься до указанных 100
- 5. Параметр width - ширина<imgsrc=“http://fastid.eu/_host/zagadka.png” width = “100”>Параметры можно указывать в любой последовательности, отделяя пробелом. Лучше заключать в кавычки.Абсолютно то же самое<imgwidth=“100”src=“http://fastid.eu/_host/zagadka.png”>
- 6. Как это выглядитОригинал <imgsrc=“http://fastid.eu/_host/zagadka.png”>C указанием width <imgsrc=“http://fastid.eu/_host/zagadka.png” width = “200”>
- 7. Пара моментовТ.е. можно отображать картинку как больше, так и меньше её реальной величиныШирину можно указывать в процентах, например:<imgsrc=“http://fastid.eu/_host/zagadka.png” width = “50%”>покажет картинку на пол экрана, а <imgsrc=“http://fastid.eu/_host/zagadka.png” width = “100%”>на весь экран (Тут всё немного сложнее – экспериментируйте…)
- 8. А что с высотой?Если высоту картинки не указать – она автоматически вычислится, чтобы сохранились пропорции
- 9. Параметр height - высотаОригинал <imgsrc=“http://fastid.eu/_host/zagadka.png”>C указанием height <imgsrc=“http://fastid.eu/_host/zagadka.png” height= “200”>Обратите внимание, что ширина подобралась автоматически, с сохранением пропорций
- 10. А если указать и то и то?<imgsrc=“http://fastid.eu/_host/zagadka.png” width = “100”height=“200”> Оригинал С указанием высоты и ширины
- 11. Параметр align - выравнивание<imgsrc=“http://fastid.eu/_host/zagadka.png”>И еще какой-то текст, который мы хотим указать около картинкиИ еще какой-то текст, который мы хотим указать около картинкиИ еще какой-то текст, который мы хотим указать около картинкиИ еще какой-то текст, который мы хотим указать около картинки<imgsrc=http://fastid.eu/_host/zagadka.pngalign=“left”><imgsrc=http://fastid.eu/_host/zagadka.pngalign=“right”>
- 12. Следующий урокЕсли я хочу не показать уменьшенную картинку, а реально поменять её размерЕсли я хочу, чтобы сделалась маленький предпросмотр, клик на котором будет приводить на новую страницу с полной картинкойКод можно будет копировать
- 13. ждуЛюбые советы, пожелания, уточнения…