Поточний час:
Сьогодні 18 січня, четверг 2018 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 3 роки 0 місяців 30 днів

Ваш ip адрес:54.227.104.40

Добрий вечір!
Ви обновили сторінку в 22 : 00
Статистика

Кількість публікацій на блозі: 372
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_28Привет всем читателям блога, всем тем кто интересуется веб-дизайном. Как я сам делаю вывод, меня тоже уже достаточно заинтересовала эта сфера, и несмотря на то что сайт создан и функционирует, у меня есть желания попробовать другие способы для создания сайта.

Создать сайт только на одном языке 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">

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 = – рамка вокруг изображения (это единственный атрибут который мы не рассмотрели, как его применять рассмотрю в следующих публикациях) 

до встречи. 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *