Вчимося вставляти картинки

Вчимося вставляти картинки

На цій сторінці я розповім як вставляти зображення в Web-документ і як правильно прописувати посилання на інші документи або Web-ресурси.

Якщо картинка лежить на іншому сайті, то шлях прописується повністю:

Хочу звернути вашу увагу на те, що ім'я графічного файлу в тезі слід вказувати з дотриманням регістру PHOTO.jpg, photo.JPG, photo.jpg і PHOTO.JPG це різні імена файлів.



Моя перша сторінка



Це моя перша сторінка.




У мене все вийде.





Ледве ранковий петербурзький поїзд, ще толком не виринувши з клубів паровозного диму, зупинився біля перону Миколаївського вокзалу, ледь кондуктори відкинули драбинки і взяли під козирок, як з вагона першого класу на платформу зістрибнув молодий чоловік дуже помітною зовнішності.
Він немов зійшов з картинки
паризького журналу, що оспівує моди літнього сезону 1882 року: світло-пісочний чесучевий костюм, крислатий капелюх італійської соломки, гостроносі туфлі з білими гамашами і срібними кнопками, в руці - витончена тростина з срібним же набалдашником.
Однак увагу привертав увагу не стільки франтівською наряд пасажира,
скільки імпозантна, можна навіть сказати, ефектна зовнішність.
Молодий чоловік був високий, стрункий, широкоплечий, на світ дивився ясними блакитними очима,
йому надзвичайно йшли тонкі підкручені вусики, а чорні, акуратно зачесане волосся мали дивну особливість - інтригуюче сріблилися на скронях.

Борис АКУНІН


подивитися

З прикладу видно, що поряд з картинкою одна строчка тексту, щоб текст розташовувався весь поруч з картинкою треба згадати про вже знайомого вам атрибуті align, який відповідає за вирівнювання.

  • Картинка буде притиснута до лівого краю екрана, а текст буде обтікати її справа.
  • Картинка буде притиснута до правого краю екрану, а текст буде обтікати її зліва.
  • Текст буде розташовуватися внизу картинки.
  • Текст буде розташовуватися посередині картинки.
  • Текст буде розташовуватися вгорі картинки.

Крім атрибута align для тега можна ввести ще кілька атрибутів:

  • Атрибут vspace - задає відстань між текстом і малюнком по вертикалі (в пікселях).
  • Атрибут hspace - теж задає відстань між текстом і малюнком, але по горизонталі (в пікселях).
  • Атрибут alt - короткий опис картинки.
  • Атрибут width - ширина самої картинки (в пікселях).
  • Атрибут height - висота самої картинки (в пікселях).
  • Атрибут border - рамка навколо самої картинки (в пікселях).

Нагадую, що атрибути для одного тега можуть вживатися одночасно один з одним, В документі це буде виглядати приблизно так:

Картинка буде притиснута до лівого краю екрана, текст буде обтікати її справа, відстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, ширина картинки 320 пікселів, висота картинки 256 пікселів, рамка навколо картинки відсутня, ну і якщо ви наведете на картинку курсор, то вискочить підказка "Просто картинка".



Моя перша сторінка



Це моя перша сторінка.




У мене все вийде.





Ледве ранковий петербурзький поїзд, ще толком не виринувши з клубів паровозного диму, зупинився біля перону Миколаївського вокзалу, ледь кондуктори відкинули драбинки і взяли під козирок, як з вагона першого класу на платформу зістрибнув молодий чоловік дуже помітною зовнішності.
Він немов зійшов з картинки
паризького журналу, що оспівує моди літнього сезону 1882 року: світло-пісочний чесучевий костюм, крислатий капелюх італійської соломки, гостроносі туфлі з білими гамашами і срібними кнопками, в руці - витончена тростина з срібним же набалдашником.
Однак увагу привертав увагу не стільки франтівською наряд пасажира,
скільки імпозантна, можна навіть сказати, ефектна зовнішність.
Молодий чоловік був високий, стрункий, широкоплечий, на світ дивився ясними блакитними очима,
йому надзвичайно йшли тонкі підкручені вусики, а чорні, акуратно зачесане волосся мали дивну особливість - інтригуюче сріблилися на скронях.

Борис АКУНІН


подивитися

Щоб розташувати саму картинку в центрі екрана, праворуч або ліворуч, згадайте параграфи

або
ці теги вирівнюють не тільки текст.
Картинку можна зробити основним фоном документа, додаємо атрибут background = "photo.jpg" для відкриваючого тега

Атрибут background вказує на те, де лежить фонова картинка, в даному прикладі він вказує на те, що фонова картинка лежить в тій же папці, що і наш документ. Спробуйте у себе в блокноті додати атрибут background для відкриваючого тега і подивіться, що у вас вийде. В якості фону можете взяти будь-яку картинку або зберегти у себе на комп'ютері мій зразок.

Схожі статті