38036

Вставка изображений на WEB-страницу

Лабораторная работа

Информатика, кибернетика и программирование

Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так img src= путь к картинке название картинки.расширение картинки Для вашего удобства кладите картинку в ту же директорию что и документ тогда путаницы будет меньше и записывать короче img src= название картинки.расширение картинки Если картинка лежит на уровень выше а документ находится в поддиректории то ссылка на неё будет такой: img src= . название картинки.

Русский

2013-09-25

274.5 KB

43 чел.

Лабораторная работа №5. «Вставка изображений на WEB-страницу»

<img a >  - вставляет изображение на WEB-страницу.

Атрибуты:

src="" - URL-адрес файла-изображения с расширением .gif, .jpeg (.jpg), .xbm, или .png (два последних формата использовать не желательно);

alt=""  - альтернативный текст. Описание изображения выводится на место изображения до ввода изображения, а также появляется, как всплывающая подсказка, если задержать курсор мыши на изображении. Наличие этого атрибута помогает броузеру быстрее загружать страницу;

height="" , width=""  - задают высоту и ширину изображения, соответственно. (Размер изображения можно получить из редактора изображений, например, Adobe PhotoShop или Paint. Некоторые броузеры тоже показывают размер файла изображения в строке названия, если просматривать изображение само по себе, без текста).  Если загружаемое изображение больше указанных размеров, то оно уменьшается "втискиванием", а если меньше - растягивается. Можно не задавать размеры изображения, но наличие этого атрибута помогает броузеру быстрее загружать страницу;  Задается как в пикселах, так и в процентах от ширины и высоты экрана.

border=""  - задает ширину рамки вокруг изображения;

vspace="" , hspace=""  - задают расстояние по вертикали и по горизонтали от изображения до кромки текста, соответственно;

align="" - задает положение текста относительно изображения.

Значения:

top - выровнять по верху строку, следующую за изображением, 

middle - выровнять по середине строку, следующую за изображением, 

bottom - выровнять по низу строку, следующую за изображением, 

left - текст должен обтекать изображение, прижатое к левой стороне окна, 

right - текст должен обтекать изображение, прижатое к правой стороне окна. 

Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так

<img src="/путь к картинке/название картинки.расширение картинки">

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

<img src="название картинки.расширение картинки">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../ название картинки.расширение картинки">

Если картинка лежит на другом сайте, то путь прописывается полностью:

<img src="http://www.homepage.ru/my/my.jpg">

Тег этот не "контейнерный", поэтому в закрывающей части не нуждается.

Со своими атрибутами тег картинки будет выглядеть примерно так:

<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left">

hspace и vspace - эти теги тоже не являются обязательными, но при их наличии вокруг картинки образуется отступ в соответствующее количество пикселей от текста. Согласитесь, это намного проще, чем вымучивать эти пробелы при помощи таблиц, пробелов и слоев или же вообще лепить текст «впритык» к картинке...

Вокруг картинки при помощи border="1" можно соорудить элегантную рамочку, а при необходимости (если очень лень или по стратегическим замыслам) изменить размеры отображения картинки при помощи все тех же width и height - если указать в них меньшие размеры, чем реально у картинки, можно вписать ее в практически любой дизайн.

Зачем это нужно? Почему бы не обрезать картинку графическим редактором - что намного более практично?!

Рассмотрим минусы занижения размеров картинки при помощи HTML:

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

теперь плюсы занижения размеров:

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

Пример.


<
html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html>

Таким образом выглядит страничка.

Посмотрите, что у нас получилось. Не очень симпатишно, не так ли? Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

У картинок есть параметр align:

<img src="pr1.png" align="left"> 

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наооборот (картинка справа, текст слева) надо прописать right:

<img src="pr1.png" align="right"> 

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">

(2) - <img src="pr1.png" align="middle">

(3) - <img src="pr1.png" align="top">

Применяем описанные выше теги.

Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись –

"моя фотография". 

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699" bgcolor="#000000">

<center>

<H3>Здравствуйте, это моя первая страница.</H3>

<br>

<font color="#CC0000"> Добро пожаловать!</font> :) </center>

<p align="justify">

<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)

</p>

</body>

</html> 

Посмотрим какие изменения произошли со страничкой.

Замечу, что картинку можно сделать фоном документа. Это прописывается в открывающем тэге <body>:

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg"> 

Параметр Background и указывет на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ.  Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда будет работать цвет фона.

Пример.

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body bgcolor="#000000" background="1.jpg">

<center>

<H1>Здравствуйте, это моя первая страница.</H1>

<br>

<font color="#CC0000"> Добро пожаловать!</font> :) </center>

<p align="justify"><H3>

<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотогра-фия"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)</H3>

</p>

</body>

</html>

Как она выглядит можно посмотреть здесь.

Задание.  

  1.  Поместить в свое резюме фотографию.
  2.  Добавить разный фон с помощью картинок ко всем ранее созданным страницам (кроме резюме).
  3.  Создать новую страницу, которая должна содержать фото вашей семьи и небольшую историю о вашей семье (это можно сделать на странице с бегущей строкой).
  4.  Создать 2-3 страницы о каждом члене вашей семьи, применяя уже полученные навыки, написав краткую информацию о ваших родственниках (использовать фото).


 

А также другие работы, которые могут Вас заинтересовать

48102. Техноекологія. Опорний конспект лекцій 368.5 KB
  Контроль забруднення довкілля. Якість вимірювань складу та властивостей об'єктів довкілля та джерел їх забруднення В. Отже антропогенне забруднення атмосфери спричиняється насамперед роботою промислових сільськогосподарських підприємств а також підприємств енергетики автотранспорту тощо що може призвести до таких негативних наслідків: перевищення гранично допустимих концентрацій ГДК багатьох токсичних речовин у містах і населених пунктах; утворення смогу і кислотних дощів; поява парникового ефекту підвищення середньої...
48103. Мікроекономіки. Конспект лекцій 3.63 MB
  Варіації факторів виробництва та оптимум товаровиробника 85 Тема 8. Витрати виробництва 96 Тема 9. Ринок факторів виробництва 155 Тема 13. Він також вважав що багатство створюється в процесі виробництва а розподіл праці конкуренція продуктивність праці ринок підвищують ефективність виробництва.
48104. СУТЬ БІРЖІ ТА ЇЇ ЕКОНОМІЧНА ПРИРОДА 383.5 KB
  СУТЬ БІРЖІ ТА ЇЇ ЕКОНОМІЧНА ПРИРОДА Роль та місце біржі в економіці Суть біржі та її економічна природа Функції та характерні ознаки біржової торгівлі Види бірж 1. Роль та місце біржі в економіці Етимологiчно поняття бiржа походить вiд грецького слова âbyrzâ що в перекладі означає сýма гаманець. Три основних значення біржі: обєднання комерційних посередників Місце торгівлі; гуртовий ринок. Суть біржі та її економічна природа Біржа це постійно діючий ринок масових замінних цінностей який функціонує за визначеними...
48105. ІСТОРІЯ УКРАЇНИ. ОПОРНИЙ КОНСПЕКТ ЛЕКЦІЙ 712 KB
  Латигіна доцент кандидат політичних наук Навчальнометодичне видання Історія України Опорний конспект лекцій Запропонований студентам Київського національного торговельноекономічного університету опорний конспект лекцій з курсу Історія України розроблено відповідно до його програми.Стародавня історія України.
48106. Психологія і педагогіка як наука про людину, її світ і діяльність 1.03 MB
  Педагогіка як наука про навчання і виховання людини. Психологія як наука про людину її світ і діяльність Психологія наука і система знань про закономірності механізми психічні факти і явища в житті людини. Протиріччя внутрішнього і зовнішнього в психіці людини розв'язуються через рухи дії і вчинки що виражають ставлення людини до інших людей природи й суспільства. Зміст і динамічну характеристику стосунків людини слід шукати в її мотивах потребах меті якої вона прагне а також у властивостях темпераменту характеру і здібностях.
48107. НАВЧАЛЬНО-МЕТОДИЧНЕ ЗАБЕЗПЕЧЕННЯ. РЕГІОНАЛЬНА ЕКОНОМІКА 2.25 MB
  Реформування економіки України на ринкових засадах вимагає не тільки суттєвих трансформацій у механізмах державного регулювання у інституційному середовищі у виробничій фінансовокредитній податковій бюджетній законодавчій системах України але й відповідних змін на регіональному рівні у соціальноекономічному житті регіонів. Це значно актуалізує значення регіональних аспектів розвитку України. Предмет регіональної економіки охоплює регіональні аспекти державної економічної політики економіки виробництва трудової та фінансової...
48108. Судово-бухгалтерська експертиза 337.5 KB
  Теоретичні основи судовобухгалтерської експертизи Сутність судовобухгалтерської експертизи та її місце в юридичній та економічній науках. Особливості судовобухгалтерської експертизи. Класифікація судовобухгалтерської експертизи. Предмет та обєкти судовобухгалтерської експертизи.
48109. Країнознавство. Опорний конспект лекцій 655 KB
  Курс Країнознавство є складовою циклу економічних дисциплін. Важливість та доцільність введення цього курсу пояснюється збільшуючим значенням комплексу знань про країни з якими Україна має культурні політичні та економічні звязки.
48110. Цивільний процес. Опорний конспект лекцій 3.66 MB
  У травні 2006 року Указом Президента України була схвалена Концепція вдосконалення судівництва для утвердження справедливого суду в Україні відповідно до європейських стандартів що ставить перед собою такі завдання як створення цілеспрямованої науково обґрунтованої методологічної основи розвитку правосуддя в Україні на найближчі десять років; визначення шляхів удосконалення законодавства у цій сфері; якісне підвищення фахового рівня суддівського корпусу. До них належать: 1 незалежність суддів і підпорядкування їх тільки закону; 2...