Рисунки.В этой главе я расскажу о том как добавить на нашу страничку графические изображения фотографию например, или рисунок, а также о том, что можно с ними вытворять используя предложенный набор тегов html языка. Путь к файлуИтак, допустим Вы пишете сайт о себе любимом и хотите вставить в него свою фотографию, чтобы люди зашедшие на страничку смогли не только читать Ваши рукописи, но и вдоволь полюбоваться Вашим портретом. Есть у Вас значит фотография, которая где-то лежит на Вашем жёстком диске.. копируем ёе и вставляем в ту папку (директорию) где уже лежит заготовка будущей страницы, ну то есть туда же, куда сохраняете блокнотом html документ. Так, вот для того чтобы теперь вставить её в нашу страничку к ней нужно указать путь. делается это так: <img src="foto.jpg">Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем. Да, помните, тег <img> не требует закрывающего тега! Теперь приведу ряд примеров где путь указывается: <img src="myfoto/foto.jpg"> - Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg<img src="myfoto/graphics/foto.jpg"> - Значит рядом с документом расположена папка myfoto, в ней еще одна папка с названием graphics, и уже в ней нужная нам фотография foto.jpg которую нужно выложить для всеобщего обозрения. <img src="../foto.jpg"> - А это значит, что фото размещено на уровень выше от документа <img src="../../foto.jpg"> - Так соответственно на два уровня выше, сколько поставите../ настолько и поднимитесь. Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс Ну что, давайте попробуем выложить фото. Вот мой пример: <html>
<head> <title>Моя первая страничка с фото</title> </head> <body text="#484800" bgcolor="#e8e8e8"> <center> <h2> <font color="#008000"> Привет мир!!!</font> </h2> </center> <p align="justify"> <font size="+1"> <img src="graphics/foto.jpg"> Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!! </font> </p> </body> </html> Как видно из этого примера фотография появилась, но вместе со своим появлением сдвинула текст, а не хотелось бы.. Атрибуты тега <img>Поговорим о расположении изображений относительно текста. Как и другие теги <img> тоже имеет свои атрибуты.. уже знакомый нам атрибут align "выравнивание" применим и к данному тегу <img src="foto.jpg" align="left"> - фото слева от текста<img src="foto.jpg" align="right"> - фото справа от текста <img src="foto.jpg" align="top"> - текст выше фото <img src="foto.jpg" align="bottom"> - текст ниже фото <img src="foto.jpg" align="middle"> - ну и соответственно текст посередине Помимо align тег <img> имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель (точка), наверное Вы не раз слышали это слово и думаю основная масса народа которая держала мышку в руках знает что это такое, но всё же.. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 - будет соответственно при разрешении 800 на 600 точек. Впрочем, эта информация пригодится нам потом, а сейчас нужно усвоить, что все расстояния в графических изображениях меряются пикселями.. так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран. Теперь продолжим.. <img src="foto.jpg" vspace="15"> - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей<img src="foto.jpg" hspace="25"> - Расстояние по горизонтали соответственно <img src="foto.jpg" width="180"> - Ширина непосредственно самого изображения <img src="foto.jpg" height="240"> - Высота изображения. Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений. <img src="foto.jpg" border="5">- Бордюр, рамка вокруг изображения и её толщина в пикселях. <img src="foto.jpg" border="5" bordercolor="#008000 "> - bordercolor - это цвет рамки. <img src="foto.jpg" alt="Это моя фотка!!!"> -Атрибут alt - это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!! <img src="foto.jpg" title="Это моя фотка!!!"> - альтернатива alt в данном случае. А еще изображение можно сделать фоном страницы.. для этого используем атрибут background "фон" открывающего тега <body> Вот так: <body background="foto.jpg">Выравнивание рисунка.Теперь расскажу о том как разместить нашу фотографию в нужном месте страницы. На самом деле об этом я уже рассказывал.. вспомните вторую главу, где говорилось о том как можно выровнять текст.. эти же теги применимы и к выравниванию изображения… так что, пожалуй, повторятся не буду, просто приведу пример, а Вы уж самими подумайте почему одно и тоже фото очутилось в том или ином месте.. Пример: <html>
<head> <title>Расположение изображения</title> </head> <body> <img src="foto.jpg "> <center><img src="foto.jpg "></center> <div align="left"><img src="foto.jpg"></div> <br> <div align="right"><img src="foto.jpg"></div> <br> <div align="center"><img src="foto.jpg"></div> </body> </html> Советую Вам самостоятельно поупражняется с размещением фотографии на своей странице. Меняйте размеры, положения, используйте различные сочетания с текстом, отступы, рамки.. Тренируйтесь! Итог главы: <html>
<head> <title>Моя первая страничка с фото</title> </head> <body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg"> <center> <img src="graphics/privet.jpg" width="400" height="80" alt="Привет мир!!!"> </center> <p align="justify"> <img src="graphics/foto.jpg" align="left" hspace="15" width="140"height="120" alt="Это моя фотка!!!"> <font size="+1"> Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!! </font> </p> </body> </html> Единственное, что Вам в этом примере не знакомо так это надпись - - это есть так называемый спецсимвол в данном случае - пробел.. о спецсимволах и их назначении я расскажу более подробно в отдельной главе. Честно говоря, мне мой пример не сильно по вкусу, неряшливо как-то.. Но цель показать, что можно делать с изображениями думаю достигнута.. Полезные советы:
|