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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

WordPress звичайно краще тим що потім дасть більше можливосте, але трошки тяжче засвоїти чим  Incomedia WebSite X5. Але повторю з WordPress коли навчитись працювати на ньому, потім надасть вам більше можливостей. Свою точку зору я сказав, а тепер переходимо до нашої основної теми, це як додати зображення до 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→ це ще не все, тепер необхідно поставити крапку і вказати розширення файлу, обовязково вказати точка і далі розширення в мене .jpg

Повністю вигляд коду⇒  <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">


43а

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


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

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

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

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

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

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

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

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

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

44а

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

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

Жартую.

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

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

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

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

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

<img src= “images/595615.jpg” width= “307” height= “250” align = “left” додаємо до нього hspace= “60” > і в нас получилось все як має бути, код і картинка

45a

hspace= “60” >

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

46а

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=— рамка навколо зображення (це єдиний атрибут який ми не розглянули, як його застосовувати розгляну в наступних публікаціях)

 

На цьому все, до зустрічі.