Market. Вставка картинок в тексти і на свою З І

1. Word і ілюстрації
2. Додавання простих ілюстрацій
3. Основи HTML стосовно самвидаву
4. Приклад 1. Орнамент з боків
5. HTML-код таблиці

попередній варіант

Вставка картинок в текст, в анотації, на задній план сторінки з текстом, на поля тексту.

Оформлення даної статті демонструє можливості, про які йтиметься нижче.

Тут я зовсім коротко розповім про мову HTML, про який треба мати хоча б якесь більш-менш уявлення, щоб вставити в свій текст картинки. Справа в тому, що це мова веб-сторінок (інтернет-сторінок), тому і СамИздат без нього не обходиться.

Word і ілюстрації

Якщо вантажити ворд-файл з ілюстраціями і формулами, набраними на Microsoft Equation, то ілюстрації та формули не буде завантажено. Тому їх треба завантажувати і вставляти окремо. Якщо у вашому файлі повинно бути не багато ілюстрацій, і це все картинки типу gif та jpg, то краще вчинити так: написати текст без картинок взагалі, а картинки вже додавати потім. Як це робиться - буде розказано нижче, а прямо тут спробую допомогти тим, хто пише тексти на ворде і при цьому вставляє багато формул і малюнків, створених на самому ворде.

Що Вам треба зробити? Якщо Ви не хочете возитися, або Вам не під силу розібратися в мові HTML, якого ми торкнемося нижче, то опишу один спосіб. До того ж він стане в нагоді і тим, хто готовий розбиратися в HTML. Просто коли формул і картинок багато, з кожної возитися вручну - занадто багато честі. Тому спосіб такий:

Готовий до викладання Word-файл треба зберегти як веб-сторінку через меню "файл" вибрати "зберегти як" та в типах файлів вибрати веб-сторінку з фільтром.

Обов'язково вибирайте з фільтром, а то нічого не вийде !!!

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

Отже, створіть під вашу "веб-сторінку" спеціальну папку, а самому файлу дайте ім'я простіше, наприклад з однієї літери "a". Тільки обов'язково запам'ятайте - російська або латинська у вас буде буква.

Далі, якщо ви зайдете в ту папку, куди зберегли web-сторінку, то побачите там файл:

a.html (або, може бути a.htm - що те ж саме).

і папку:

a.files.

В папці a.files лежать малюнки до тексту. Формули теж були перетворені в малюнки.

Заходимо в папку a.files. Там можна бачити малюнки в форматі gif, jpg, png. Якщо Ви бачите файли з розширенням wmz - значить, зберегли без фільтра! Це дуже погано, значить треба все, що стосується веб-сторінки (папку з малюнками і файл html) стерти, а вордовий файл заново зберегти як Веб-сторінку з фільтром. Малюнки wmz дублюють gif (тобто це те ж саме), але вони навряд чи розуміються самвидаву, тому Вам треба зробити так, щоб їх не було взагалі - тобто зберегти з фільтром.

Треба виділити малюнки і перенести їх з паки a.files в ту ж саму папку, де лежить файл a.html (як би назовні, або інакше це називається - на рівень вгору, або в корінь основний папки). Це треба зробити обов'язково - саме так ми починаємо готувати наш текст до того, щоб викласти його на самвидаві. Самвидав влаштований так, як ніби-то ілюстрації і сам файл лежать в одній папці (без внутрішніх подпапочек). Ось це ми і починаємо здійснювати, поки на своєму домашньому комп'ютері.

Тепер, якщо ви запустите a.html, малюнків в тексті не буде. Тому що текст шукає малюнки в папці a.files, а їх там вже немає!

І тепер важливий крок - як зробити так, щоб наш файл знову знайшов картинки на новому місці: для цього відкриваємо його блокнотом (його можна знайти в меню "Пуск" → Програми → Стандартні → Блокнот.

(Просунуті користувачі можуть скористатися і Ворд, якщо знають як, - він швидше працює).

Або, якщо у вас встановлений Windows Commander або Total Commander досить просто вибрати Ваш файл a.html і натиснути F4 edit - можна як на клавіатурі (F4), так і в самому вікні програми Commander.

Відкрили Блокнотом - наступний крок - зайти в меню Блокнота - "правка" і вибрати там "Замінити". Відкриється віконце з двома рядками. Перший рядок "Що" - сюди вписуємо

a.files /

Зверніть увагу, що після a.files варто слеш / - його обов'язково треба написати, відразу без пробілу!

Другий рядок "Чим" - залишаємо порожній, оскільки нам треба все такі фрагменти тексту просто прибрати. Це посилання на нашу папку, де раніше лежали картинки, тепер вони в ній не лежать, а лежать в тій же папці, де і файл, тому цю частину і треба прибрати, щоб файл картинки в ній не шукав.

Далі, написавши цей рядок натискаємо "Замінити все". І якщо відкритий нами текст поїхав вниз - це добра ознака, значить заміна пішла. Якщо нічого не сталося - значить, ми набрали назву папки з помилкою. Чи то а у нас не латинська "а" російська (тоді слід спробувати набрати замість латинської російську "а" і натиснути кнопку ще раз) чи щось інше не так.

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

Тепер можна змінити Вашому файлу назва перейменувавши його як Вам подобається. Тільки не змінюйте розширення. Якщо воно html, можна скоротити до htm, але ні на що інше міняти не можна.

Тепер, якщо картинок багато, їх можна все запакувати в один zip (rar, arj) архів, і завантажити на СІ все разом.

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

Краще використовувати zip-архів, з ним, звичайно, проблем не буває. rar постійно винаходить нові версії, і можуть виникнути проблеми, що сервер просто не зможе з цієї новою версією впоратися.

З ворд-файлом, що містить велику кількість картинок і формул все. Далі інструкції для тих, хто створив текст без картинок, а картинки додавати буде потім.

Додавання простих ілюстрацій

Можна додавати їх в уже завантажений файл, відкривши його за допомогою textedit, а можна заздалегідь на своєму домашньому комп'ютері підготувати Ваш файл як Web-сторінку і вставити картинки на потрібні місця.

Для другого способу - файл потрібно перетворити в Web-сторінку - можна за допомогою Word зберегти як Web-сторінку з фільтром (обов'язково з фільтром !!!), а потім в потрібні місця додати відповідні записи. Але щоб це зробити добре і грамотно, треба уявляти собі, що ж таке HTML-код.

Так що коротенько познайомимося з тим, що ж таке HTML - з самими елементарними речами.

Основи HTML стосовно самвидаву

Якщо відкрити завантажений на СІ текст або збережену Ворд Web-сторінку з фільтром, то можна бачити якісь написи в кутових дужках. Це керуючі команди, які називаються називаються тегами. Тег буває відкриває <тег> і закриває </ тег> - зі слешем попереду. Теги відокремлюють одні об'єкти від інших, і до того, що між ними можуть бути застосовані деякі властивості, зазначені в відкриваючому тезі.

Так, наприклад текст, укладений між тегами <a> і </a> буде або посиланням або якорем, в залежності від того, який атрибут ми вкажемо в відкриваючому тезі.

Якщо вказати <a href="адрес_файла"> текст_ссилкі </a> - то буде посилання, яка відправляє нас за вказаною адресою. Адреси можуть бути в Інтернеті, вони починаються з http: // - адреси в режимі передачі сторінок, найбільш поширені і доступні, ftp: // - адреси в режимі передачі файлів, або локальні, вони починаються прямо з местопололженія файлу. Адреса будь-якої окремої сторінки на сайті можна дізнатися, якщо подивитися в адресний рядок браузера. Там він написаний. Його можна скопіювати і вставити після напису href = "" в лапки. Тоді буде посилання на цю сторінку.

Примітка (важливо): на СІ в деяких випадках посилання треба поміщати без лапок, тому що інакше вони глючать. Без лапок посилання треба вставляти в поля для анотацій. У сам текст можна і з лапками.

Так наприклад, тег <p> відкриває абзац. </ P> означає що абзац скінчився, робиться новий рядок.

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

<P align = "left"> - абзац буде вирівняно за лівим краєм

<P align = "right"> - по правому

<P align = "center"> - по центру

<P align = "justify"> - по ширині

Чи можна визначити для абзаців відступ з нового рядка і інтервал між абзацами? Взагалі можна, але конкретно на СІ - не можна. Так що відступ з нового рядка доведеться набивати пробілами, при тому не простими, а нерозривними, які в HTML-коді набираються як (Все, що виділено жирним треба повторити - від значка амперсанта (&) до крапки з комою). Кілька простих прогалин поспіль, набивають клавішею Space (довга клавіша для залишення пробілів) в HTML сприймаються як один.

Якщо не хочете з цим мучитися, замість <p> треба використовувати інший тег <dd>, він з червоним рядком.

Теги заголовків аналогічні тегам абзаців, тільки заголовки більше звичайного тексту. Тег заголовків: <h1> <h2> <h3> <h4> <h5> <h6>. В порядку зростання номера заголовка, зменшується розмір шрифту. Не забувайте, що кожному типу заголовка і тегу <dd> потрібен відповідний закриваючий тег, а так само для заголовків можна вказати вирівнювання, таке ж, як і для абзаців. Самі заголовки теж можна використовувати як абзаци при бажанні.

Картинка сама по собі вставляється за допомогою такого тега, до якого закриває тег не потрібний. це тег

<img src = "путь_к_файлу_с_картінкой / імя_файла_с_картінкой.расшіреніе">

Щоб вставляти завантажену на СІ ілюстрацію в тіло тексту (нема на задній план і не на поля, а саме в текст), шляху до файлу з картиною вказувати не треба. Хоча файли з картинками на СІ зберігаються не там же, де файли з текстом, Програміст Сайту зробив так, що ваш файл знаходить ілюстрації і без вказівки шляху до них. Це добре, це спрощує нам життя. Коли Ви на своєму домашньому комп'ютері готуєте файл вже у вигляді WEB-сторінки, можете вставити ілюстрації заздалегідь і відразу подивитися, вставили вони чи ні. Для цього файл треба перетворити в веб-сторінку (якщо це робить ворд - обов'язково брати веб-сторінку з фільтром!). Картинки помістити в ту ж папку, де знаходиться Ваш файл (веб-сторінка), а в саму веб-сторінку в потрібні місця додати теги картинок:

<img src = "імя_файла_с_картінкой.расшіреніе">

Далі можна запустити ваш файл і подивитися, як в ньому виглядають картинки. А потім вже завантажувати і файл і картинки на СІ.

Можна піти іншим шляхом - менш зручним: спочатку завантажити Ваш текст на СамИздат, потім за допомогою опції textedit відкрити ваш текст і у вікні редактора вписати такі команди в потрібні місця.

Увага! Не можна вставляти ваші команди додавання картинок всередину тегів - тобто всередину ось таких дужок <тег>, в яких щось написано. Вставляти треба окремої дужкою, напрімерт так:

<тег1> <тег2> <img src = "імя_файла_с_картінкой.расшіреніе"> <тег3> - ось так вставляти правильно

<тег1> <тег2> текст1 <img src = "імя_файла_с_картінкой.расшіреніе"> Текст2 </ тег2> - так теж правильно, якщо між тегами є текст, в принципі можна вставляти картинку в будь-яке місце цього тексту. Але тоді будьте готові до того, що вона в цьому самому тексті і з'явиться, наприклад ось так:

текст 1 Текст2

Тобто картинка вставляється в текстовий рядок в тому місці, де ви розташували в цьому рядку керуючу команду вставки картинки.

Далі, замість напису <img src = "імя_файла_с_картінкой.расшіреніе"> ми просто будемо використовувати ось цю ось картинку з трояндою. Так буде наочніше.

Якщо ви не хочете, щоб картинка плавала в абзаці тексту, якому разі не вставляйте її між відкривається і закривається тегами, що містять текст. Тобто, вставляти треба якось так:

<тег1> текст </ тег1> <тег2> текст1 Текст2 </ тег2>

Тільки треба мати на увазі, що існують вкладені теги, наприклад такі:

<тег зовнішній> <тег внутрішній> текст </ тег внутрішній> </ тег зовнішній>

Вставляти картинку між відкриває зовнішнім і відкриває внутрішнім тегами не завжди можна.

Не можна вставляти картинки (та й текст теж) між вкладеними тегами структури. Наприклад, не можна впихати картинку між тегами таблиці.

<тег зовнішній> <тег внутрішній> текст </ тег внутрішній> </ тег зовнішній>

Чи є вкладені теги тегами однієї структури - це просто треба знати. Ось наприклад, як впізнати таблицю:

Зовнішній відкриває тег таблиці <table> відкриває таблицю. У нього може бути вкладено декілька тегів <tr> - відкривають рядки, а між тегами <tr> </ tr> - кілька пар тегів, які відкривають стовпці <td> </ td>.

І виглядає код найпростішої таблиці ось так:

<table>

<tr>

<td>

Все, що тут знаходиться - поміщається всередині комірки стовпчика. Тут можна що-небудь писати, або вставляти картинку , Або текст укладений в теги абзацу <p> текст </ p>, заголовка <h1> текст </ h1> або <dd> текст </ dd> - все разом.

</ td>

</ tr>

</ table>

Це таблиця з одним рядком і одним стовпцем. Щоб рядків або стовпців було більше, треба

Так само можна знати, які вкладені теги не є однією структурою, і тоді, якщо такі нам трапляються, сміливо вставляти картинку. Наприклад, теги <i> (похилий шрифт), <a ...> (посилання або якір), <b> (жирний шрифт), <u> (підкреслений шрифт), <font ...> (параметри шрифту) < span>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <dd>, <strong>, <cite>, <div> і деякі інші - не належать до будь-якої структурі. Це теги самі по собі, і можуть бути вкладені одна в одну в будь-яких комбінаціях і поєднаннях, між такими відкривають і закривають тегами можна розташовувати картинку.

Ось приклад:

<p> текст абзацу 1 <b> текст, написаний жирним шрифтом </ b> текст абзацу 2 </ p>

Тут картинку можна вставити відразу в кілька місць:

<p> текест абзацу 1 <b> текст, написаний жирним шрифтом </ b> текст абзацу 2 </ p>

Детальніше про оформлення тексту читайте здась: Белоглазов Артем Ірековіч: Html і Самвидав . Тут дуже докладно написано, що таке HTML-формат і як ним користуватися (саме стосовно самвидаву, що важливо). Справа в тому, що мова HTML має куди як більше можливостей, ніж дозволяє СамИздат, і на увазі цих обмежень, користувачам самвидаву немає сенсу розбиратися у всіх можливостях мови НТМ, оскільки їх все одно на СІ ніяк не задіювати.

Якщо хтось хоче відкривати свій сайт або робити сторінки для зберігання на домашньому комп'ютері, або ще краще розібратися, він може використовувати практично всі можливості, про які коротко розповідається тут: ( читати завантажити ) І в кінці статті даються посилання на електронні книги, які допоможуть в подальшому просуванні.

У тексті Бєлоглазова Артема досить докладно і правильно написано, як надати тексту додаткове оформлення. Але дуже мало сказано про картинки. Наприклад, немає нічого про те, як додати картинку на задній фон або в анотацію.

Тут, на жаль, СамИздат не сприймає файли з картинками так, немов вони лежать в тій же папці, де і файл з текстом. Тому, щоб вставляти картинки на задній фон або з боків тексту, доведеться вказувати повний шлях до файлів з картинками.

Спочатку просто познайомимося з тим, як в принципі поміщаються картинки на задній фон.

Щоб взагалі створити задній фон будь-якого кольору (на самвидав), текст треба помістити в табличку. Про це написано в Артема Бєлоглазова. Щоб зробити задній фон або орнамент з боків тексту - текст теж треба помістити в табличку. І зараз ми розглянемо, як саме.

Приклад 1. Орнамент з боків

Якщо треба зробити орнамент з боків, як в цьому файлі, Вам знадобляться відповідні шматочки орнаменту. У мене вони виглядають так:

І мають ширину по 80 пікселів кожен. У вас ширина може бути інша, але вона повинна відповідати ширині країв. Особено це стосується правого краю. Щоб додати їх на боки тексту, треба весь текст помістити в таблицю з трьома стовпцями. Нижче наведено HTML-код такої таблиці. Жирним шрифтом наведено сам код, а тонким - коментарі. В кінцевому HTML-коді в таких місцях не повинно бути ніяких текстових рядків, вони можуть пошкодити таблицю. Як говорилося вище, в єдиній структурі, якою є таблиця, нічого вставляти між двома відкривають або двома закривають тегами не можна.

HTML-код таблиці

<table width = "100%" border = "0" cellpadding = "5" cellspacing = "0">

Тег, що відкриває таблицю. Тут вказуються властивості, загальні для всієї таблиці

width - ширина таблиці. Вказувати можна в процентах або якщо знак відсотків опустити, то ширина таблиці буде відраховуватися в пікселях. Параметр ширини можна не вказувати взагалі, тоді таблиця сама буде підганяти свої розміри, в залежності від того, скільки в ній тексту.

border - товщина рамки таблиці. Якщо вказати рівним нулю, рамка буде невидимою.

cellpadding - відступ від країв елементів таблиці. Якщо таблиця з видимою рамкою або все осередки планується заповнювати текстом, краще зробити більше нуля.

cellspacing - відстань між самими елементами таблиці. На зображенні нижче показано, що це означає

Таблиця для якої cellspacing = "10"
Таблиця для якої cellspacing = "0"

Якщо ми хочемо використовувати таблицю з трьох стовпців для того, щоб додати боковики як в цьому файлі, у нас cellspacing = "0" - має дорівнювати нулю, інакше будуть небажані щілини між боковик і серединою.

<tr> - відкріває рядок табліці. За правилами спочатку треба создать рядок, потім Вже в ній - потрібну Кількість стовпців. У всех рядках число стовпців має буті однаково. Або, воно может буті різнім, но только если для стовпців вікорістовується Спеціальний параметр colspan, в якому, например, можна вказаті, что Сейчас стовпець поточного рядка треба розтягнуті на декілька стовпців других рядків - например <td colspan = "n">. Замість n треба підставіті ціле число. Ця Запис означає, что Сейчас стовпець представляет собою n об'єднаних в один стовпців. У рядку, що містить такий стовпець, загальне число стовпців має бути менше, ніж в інших на n-1 стовпець. І такий стовпець не може бути останнім у рядку, йому повинно "вистачити місця", він можт бути по рахунком не менше ніж n-й від кінця!

<td background = "путь_к_файлу_с_картінкой / імя_файла_с_картінкой" width = "80"> & nbsp; </ td>

відкриває і закриває стовпець. Замість & nbsp; можна що-небудь написати або вставити фрагменти тексту, з тегами абзаців, заголовків або <dd>. Так само можна вставити картинку. Але в моєму випадку цей стовпець залишається порожнім. Якщо нічого не пишете і не вставляєте, стовпець обов'язково повинен містити цей знак & nbsp; . параметр background якраз визначає, яка картинка буде заднім фоном стовпчика. Але тут не дарма написано, що вказати треба не тільки ім'я файлу, але і шлях. Тому що СІ просто по імені файлу в якості заднього фону картинки не вставляє. Як вказати шлях - про це пізніше. Параметр width визначає ширину стовпчика, вона може бути або у відсотках (не ставте більше ста), або якщо знак відсотка опущений - в пікселях. Якщо ви в крайній стовпець ставите орнамент, то його ширина повинна відповідати ширині орнаменту.

<td bgcolor = "# EFF7EF">

Це відкриває тег стовпця. У нашому випадку це середній стовпець, для основного тексту. Тут присутній параметр bgcolor - це колір заднього фону стовпчика. Його треба вказувати в шістнадцятковому вигляді, або можна писати словами Black -чёрний, white - білий і ін .. І знак # тоді писати не слід. Але словами передається тільки обмежене число відтінків. Цифрами - куди більше. Можна і в середній стовпець помістити замість кольору картинку на задній фон, точно так же, як і в перший стовпець.

У середній стовпець ми поміщаємо основний наш текст - з усіма тегами, наприклад:

<H1> заголовок тексту </ h1>

<Img src = "ім'я файлу з картінкой.расшіреніе">

<H2> назва глави </ h2>

<P> абзац1 </ p>

<P> абзац2 </ p>

и т.д.

Тобто, ось це все ось в такому вигляді можна поміщати між відкриває і закриває тегами стовпчика. І у нас в стовпці таблиці виходить не коротенька замітка, а повноцінний великий текст.

</ td> - не забудемо закрити наш стовпець!

<td background = "путь_к_файлу_с_картінкой / імя_файла_с_картінкой" width = "80"> & nbsp; </ td> - це у нас третій стовпець, теж боковик. Сюди, судячи з усього, на задній план треба вставити іншу картинку.

</ tr> - закриває рядок.

Далі можна відкрити ще один рядок. Тут наведена така ж, але можна помістити в боковики інші картинки.

<tr>

<td background = "путь_к_файлу_с_картінкой / імя_файла_с_картінкой" width = "80"> & nbsp; </ td>

<td bgcolor = "# EFF7EF"> & nbsp; </ td>.

<td background = "путь_к_файлу_с_картінкой / імя_файла_с_картінкой" width = "80"> & nbsp; </ td>

</ tr>

</ table> - закриває таблицю.

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

Тобто текст розбити на кілька частин і помістити його в середні стовпчики послідовно йдуть один за одним таблиць. Між таблицями майже не видно швів, тільки будуть спостерігатися нестиковки орнаменту.