Как сделать веб страницу 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="https://www.sitedelkino.ru/kartinka.jpg"> (при условии: страница и картинка находятся в одной папке).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

📎📎📎📎📎📎📎📎📎📎