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

Створити сайт тільки на одній мові html, і без всяких спеціальних програм, що полегшують процес розробки сайту.

Сьогодні до речі мова піде про те, як вставити картинку в html-сторінку, як розмістити какртінку зліва, або справа або по центру, а текст навколо картинки зробити обтічним, які потрібно прописувати теги і атрибути.

В даний час у мене сайт зроблений на сsm WordPress. І у мене з'явилося бажання попитатся зробити сайт іншим способом, я вирішив для початку зайнятися розробкою сайту, який повинен бути написаний тільки на кодах html, без допоміжних програм, вручну прописуючи коди і таким чином створюючи сторінки, а згодом підключити каскадну таблицю стилів CSS.

Пару слів додам про моїх спостереженнях, судячи за деякими матеріалами які я переглядав відвідуючи інші ресурси, про мову гіпертекстової розмітки html, з багатьох джерел звідки я переглядав інформацію, зробив для себе такий висновок.

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

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

На даний момент існує багато програм, які полегшують створювати сайти тільки вписуючи коди, на одній мові html. Але все одно що стосується такого поняття як вимоги, то у всіх вони одні, це мати базові знання про те як писати сторінки на мові html.

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

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

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

Я не маю на увазі що він виглядає круто, та й сама мета моя інша, не бачу сенсу поставити готову тему, хоч у неї вигляд буде краще, але що з того.Я не маю на увазі что ВІН Виглядає суперово, та и сама мета моя Інша, що не бачу СЕНС поставити готову тему, хоч в неї вигляд буде кращий, но что з того.

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

Всім початківцям пропоную, якщо ще не створювали сайти, то спробуйте сайт на WordPress або Incomedia WebSite X5В.

WordPress звичайно краще тим, що потім дасть більше можливостей, але його буде трохи важче засвоїти ніж Incomedia WebSite X5. Але повторю з WordPress коли навчитися працювати з програмою WebSite X5В, потім надасть вам більше можливостей. Свою точку зору я висловив, а тепер переходимо до нашої основної теми, це як додати зображення до html сторінки.

Як додати зображення в html-сторінку.

Спочатку що треба зробити перед тим як додати зображення, обов'язково створити папку, куди ми будемо розміщувати наші фотографії, в тому місці де розташована ця папка, там будуть наші фотографії, ми будемо на ету папку прописувати посилання на сторінці.

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

1 крок необхідний для того щоб написати сайт на мові html, мається на увазі сайт а не одну сторінку, це створити папку. Назву можна звичайно дати будь-яку, я назвав її «mysite». Назви краще давати на латині, і по англійськи.

2 крок це створити в нашій створеній папці «mysite», папку з назвою «images» саме туди і поміщати наші графічні файли.

3-крок звичайно створити головну сторінку, і назва просто необхідно дати index.html. Запам'ятайте що назва файлу який вказує на головну сторінку, повинна мати саме таку назву index.html. Я свою перейменують, а тому краще зроблю нову з цією назвою. Ну а ви зграя свою.

До речі приклади різних html-кодів я вирішив поміщати в одну сторінку за посиланням, яку ви можите подивитися тут .

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

У нас присутній файл index.html, і папка images з нашим зображенням.

Відкриваємо файл index.html. за допомогою текстового редактора, Notepad ++ або візьміть свій яким ви користуєтеся.

Куди вставляти код, в принципі його можна вставляти в будь-яку область сайту, або в header ето шапка сайту, також бачив сайти де зображення розміщують в futer (підвалі). Можна сказати від і до.

Я вирішив вставляти картинку на моїй тренувальної сторінці після заголовка, перд списком цікавих посилань, після тега <p> (означає параграф), і перед тегом <type = circle>, «circle» означає маркований список (список з прозорими кружечками)

Зображення ви можите вставляти куди хочете, головне знати як прописувати код.

Код, який вказує, що це картинка пішіться <img> «images- перекладається картинка (англ)» Мовою html означаеце тег, ставимо його на початку рядка, цей тег називається одинарним, його потрібно закривати ..

Далі в наш тег поміщаємо атрибут «src» <img src- тепер потрібно вказати джерело де знаходиться картинка, (вона повинна знаходитися в папці, яку ми створили заздалегідь) вказуємо знак рівності, він означає, що продовження = і в лапках «вказуємо джерело» - де знаходиться наш файл.

Джерело, вказуємо місце де знаходиться наша папка з зображеннями, у мене вона називається «images» <img src = "images → далі виставляємо слеш, не забувайте про слеш» / «→ <img src =" images / → назва фото. моє фото «595615» <img src = "images / 595615 → це ще не все, тепер необхідно поставити крапку і вказати розширення файлу, обов'язково вказати точка і далі розширення у мене.

Повністю вид коду ⇒ <img src = "images / 595615.jpg»> Незабутній закрити лапки і дужки.

Пробуємо що у нас вийде, відкриваємо файл в браузері, і ого-го вийшло зображення але дуже велика. На весь екран ноутбука, не влаштовує, будемо щось з цим робити, і я звичайно вже все виправив, все вийшло «Ок», що саме потрібно зробити далі, щоб картинка придбала необхідних розмірів.

Після лапок, перед закриттям тега>, потрібно дописати довжину і ширину <img src = "images / 595615.jpg width =" 307 "height =" 250 "→ вказали висоту і ширину. Висота пішіться по англійськи »width« далі знак рівності = і лапки «250», в лапках вказаний висота в цифрах.

width = "307" height = "250" такі координати я вказав, ширину width 307 и висоту heigh t250, вкажем код Повністю

Код вставки картинки в html-сторінку

<Img src = "images / 595615.jpg» width = "307" height = "250"> і у вас з'явиться картинка нормальних розмірів, а не на весь екран.

<Img src = "images / 595615.jpg" width = "307" height = "250">

ця картинка нормальних розмірів, а не на весь екран

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

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

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

Як дізнатися розміри картинки і при необхідності поміняти

В пікселях, як дізнатися розміри, підводимо курсор миші до картинки → відкриваємо «Властивості» → вгорі у вікні натискаємо на «Докладно» → внизу позначка зображення, вкаже розміри картинки в пікселях, а також і багато іншої різної інформації.

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

Як перемістити картинку по центру або зліва чи справа

За зображенні додам ще такі нюанси, які, хто читав попередню публікацію вони відомі, це можливість перемістити картинку по центру або праворуч. Додаємо до нашого коду атрибут align = "left" або "right» або «center» в ценр.

Ага додав і подивіться уважно на картинку знизу, я додав left → додав і заодно знайшов собі зайву роботу.

прозорі гуртки потрапили на картинку

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

Жартую.

Цікаво записувати свої дії online в публікацію, ніколи відразу не знаєш який буде результат.

Довелося повозитися з пошуком як виправити, я ще до того неправілно вказував букву «с». А вказав замість неї іншу букву «s», в слові hspace.

Але вже маючи невеликий досвід, додивився що колір зазначеного слова в коді чорний, це змусило звернути увагу, тому що в самому редакторі Notepad ++, чорний колір зустрічається тільки тоді, коли назва або текст виводяться в браузері.

Для того щоб текст обтікав картинку, потрібен атрибут hspace цей атрибут застосовують для обтікання тексту навколо картинки, додаємо до атрибуту hspace знак рівності = «» а в лапка вказуємо відступ від картинки,

повністю код має такий вигляд

<Img src = "images / 595615.jpg» width = "307" height = "250" align = "left" додаємо до нього hspace = "60"> і у нас вийшло все як годиться, код і картинка

hspace = "60">

<img src = "images / 595615.jpg» width = "307" height = "250" align = "left" hspace = "60">

vspase = "50"

давайте експерементіровать додадім ще vspase = "50".

Ну що картинка спустилася вниз, і вигнала знизу пару посилань вліво.

Допомога hspace означає по горизонталі, а vspaсe по вертикалі. Застосовують ці атрибути для обтікання тексту, а тепер весь код повністю.

код повністю.

<Img src = "images / 595615.jpg» width = "307" height = "250" align = "left" hspace = "60" vspace = "50">

<Img src = "images / 595615.jpg" width = "307" height = "250" align = "left" hspace = "60">

вказує зображення

<Img src = "images / 595615.jpg»> ⇒ вказує зображення

який вказує зображення, і розміри

<Img src = "images / 595615.jpg» width = "307" height = "250"> ⇒ вказує зображення, і розміри

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

<Img src = "images / 595615.jpg» width = "307" height = "250" align = "left"> ⇒код який вказує зображення, розміри, і як розмістити картинку на всі боки (положення картинки).

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

<Img src = "images / 595615.jpg» width = "307" height = "250" align = "left" hspace = "60" vspace = "50"> ⇒указивает на зображення, розміри, положення (вліво, вправо, в центрі), а також як розмістити по горизонталі і вертикалі.

<Img src = "images / 595615.jpg" width = "307" height = "250" align = "left" hspace = "60" vspace = "50">

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

alt = - альтенатівній текст, який буде відображатися замість зображення, якщо в браузері не встановлено налащтування «Відображати малюнки»

src = - url графічного файлу в форматі gif, jpeg, png

align = - вирівнювання зображення на сторінці, можливі значення top (вгору), middle (середина), bottom (низ), left (ліворуч), right (праворуч)

height = - висота зображення в (пікселях)

width = - ширина зображення hspace = - горизонтальний відступ від зображення до навколишнього контенту. (В пікселях) vspace = -вертикальний відступ від зображення до навколишнього контенту. (В пікселях) border = - рамка навколо зображення (це єдиний атрибут який ми не розглянули, як його застосовувати розгляну в наступних публікаціях)

до зустрічі.