Как сделать веб страницу html с картинкой

для чайников 

 

сделать веб страницу html с картинкой

 

 

 

Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.

  

HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).

 

То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (тэги).

При помощи тэгов ваша страница (файл) общается с браузером, то есть она ему говорит, что здесь находиться текст определенного шрифта, размера, цвета и т.д. а браузер в свою очередь размещает этот текст, в своем окне, исключительно таким образом каким вы указали при создании страницы.

Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”.  Для этого нам понадобится любой текстовый редактор.  Я вам посоветую «Notepad++».  Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами.
Это будет выглядеть так:
 «page.html»

И так, открываем наш редактор, и пишем следующий код:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета
</body>
</html>

Сохраняем созданный текст.
Для просмотра созданной страницы html в любом браузере, нужно просто кликнуть на пиктограмме «page.html».

Вставить картинку в html страницу

Чтоб вставить картинку в html страницу, её необходимо предварительно подготовить.
Выбираем нужное изображение, редактируем его  либо в документе Word (простой вариант), либо в Photoshop.
Сохраняем картинку в формате  JPEG, в нашей папке для создания страниц html.
Пример:
название папки:  user_page
в этой папке:
страница: page.html
картинка: kartinka.jpg

Для вставки картинки в страницу применяется тег <img>. 
Для указания пути к картинке в теге используется параметр src=
Вот так будет выглядеть код  html, при помощи которого можно вставить картинку в страницу  html:
<img src="/kartinka.jpg"> (при условии: страница и картинка находятся в одной папке).

А это код страницы html с картинкой

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета

<img src="/kartinka.jpg">
</body>
</html>

 

Если вы выполнили все так, то в браузере будет отражен результат вашей работы.
Оказывается,  сделать html страницу совсем  не сложно!

Ниже приведены атрибуты для тега <img>, и их предназначение:

<img src="/kartinka.jpg">

Без атрибутов - текст по умолчанию находится снизу картинки

<img src="/kartinka.jpg" align="right">

align="right" - картинка справа, текст слева

<img src="/kartinka.jpg" align="left">

align="left" - картинка слева, текст обтекает справа

<img src="/kartinka.jpg" align="bottom">

align="bottom" - как и по умолчанию, текст внизу картинки

<img src="/kartinka.jpg" align="middle">

align="middle" - текст посередине картинки

<img src="/kartinka.jpg" align="top">

align="top" - текст вверху картинки

<img src="/kartinka.jpg" vspace="10">

vspace - задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - самая маленькая единица изображения (точка). Например, если экран Вашего монитора 800х600, это значит, что он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10 пикселям (точкам).


<img src="/kartinka.jpg" hspace="20">

hspace - задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)

<img src="/kartinka.jpg" alt="Сайт для сайтостроителей">

alt - задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись "Сайт для сайтостроителей". Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой).


<img src="/uzeron_pc.jpg" width="150">

width - задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!)

<img src="/uzeron_pc.jpg" height="150">

height - задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!)

<img src="/uzeron_pc.jpg" border="0">

border - задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.

<p align="center"><img src="/uzeron_pc.jpg"> </p>

<p></p> - размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например:
align="left" - слева
align="center" - в центре
align="right" - справа

<body bgcolor="#000000" background= "uzeron_pc.jpg"></body>

background="Ваш_фон.jpg"- Ваша картинка будет фоном HTML странички. В атрибуте background="Ваш_фон.jpg" нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.

Комментарии   

Гварди
-1 # Гварди 01.06.2016 11:10
Все так просто оказалось как создать веб страницу.
Ответить | Ответить с цитатой | Цитировать
E-Pages
0 # E-Pages 01.06.2016 11:13
Спасибо! Полезная статья в помощь копирайтеру. Добавил себе в закладки
Ответить | Ответить с цитатой | Цитировать
Епистафий
+8 # Епистафий 24.11.2016 05:46
Немного не разобрался, но нужно подробнее для чайников растолковать.
Ответить | Ответить с цитатой | Цитировать
Строительство дома
0 # Строительство дома 10.02.2017 12:49
Спасибо
Ответить | Ответить с цитатой | Цитировать
VikaForsina
+2 # VikaForsina 01.04.2017 22:18
Очень познавательно!
Ответить | Ответить с цитатой | Цитировать
BHW
0 # BHW 02.04.2017 16:05
Hi there to every body, it's my first go to see of this weblog; this webpage contains awesome and genuinely excellent data in support of readers.
Ответить | Ответить с цитатой | Цитировать
clck.ru
0 # clck.ru 05.04.2017 11:31
Oh my goodness! Amazing article dude! Thank you so much, However I
am going through problems with your RSS. I don't know the reason why I am unable to subscribe to it.
Is there anyone else getting identical RSS problems? Anyone that
knows the solution can you kindly respond? Thanx!!
Ответить | Ответить с цитатой | Цитировать
indian
0 # indian 07.04.2017 00:39
Ahaa, its good dialogue on the topic of this article here at this webpage, I have read
all that, so now me also commenting here.
Ответить | Ответить с цитатой | Цитировать
BHW
0 # BHW 10.04.2017 04:42
Hello, everything is going nicely here and ofcourse
every one is sharing facts, that's truly excellent, keep up writing.
Ответить | Ответить с цитатой | Цитировать
BHW
0 # BHW 16.04.2017 00:22
Asking questions are in fact nice thing if you are not understanding something totally,
except this post offers nice understanding yet.
Ответить | Ответить с цитатой | Цитировать
BHW
0 # BHW 23.04.2017 05:01
Hello, this weekend is good in support of me, as this moment i am reading this fantastic informative paragraph here at my house.
Ответить | Ответить с цитатой | Цитировать
BHW
0 # BHW 24.04.2017 00:47
My brother recommended I might like this website.
He was entirely right. This post actually made my day. You cann't imagine simply how much time I had spent for this info!
Thanks!
Ответить | Ответить с цитатой | Цитировать
http://bin-bags.info
0 # http://bin-bags.info 28.04.2017 21:30
Wow, superb weblog structure! How lengthy have you been running a blog for?
you made running a blog glance easy. The total
glance of your web site is fantastic, let alone the content material![X-N-E-W-L-I-N-S-P-I-N-X]I simply couldn't depart your web site before suggesting that
I actually enjoyed the standard info a person provide for your visitors?
Is gonna be again continuously in order to inspect new posts.
Ответить | Ответить с цитатой | Цитировать
manicure
0 # manicure 03.05.2017 04:51
Hey there, You've done a great job. I will definitely
digg it and personally suggest to my friends. I'm sure they'll be benefited from this site.
Ответить | Ответить с цитатой | Цитировать
Maryann
0 # Maryann 07.05.2017 16:18
Hello there, You have performed a great job. I will definitely digg it and in my opinion suggest
to my friends. I'm sure they will be benefited from this website.
Ответить | Ответить с цитатой | Цитировать

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


Защитный код
Обновить