Как сделать веб страницу html с картинкой
для чайников
Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.
HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).
То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (тэги).
При помощи тэгов ваша страница (файл) общается с браузером, то есть она ему говорит, что здесь находиться текст определенного шрифта, размера, цвета и т.д. а браузер в свою очередь размещает этот текст, в своем окне, исключительно таким образом каким вы указали при создании страницы.
Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”. Для этого нам понадобится любой текстовый редактор. Я вам посоветую «Notepad++». Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами.
Это будет выглядеть так:
«page.html»
И так, открываем наш редактор, и пишем следующий код:
<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> <img src="/kartinka.jpg"> |
Если вы выполнили все так, то в браузере будет отражен результат вашей работы.
Оказывается, сделать 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 пикселям (точкам). |
|
hspace - задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам) |
<img src="/kartinka.jpg" alt="Сайт для сайтостроителей"> |
alt - задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись "Сайт для сайтостроителей". Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой). |
|
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. Есть, например: |
<body bgcolor="#000000" background= "uzeron_pc.jpg"></body> |
background="Ваш_фон.jpg"- Ваша картинка будет фоном HTML странички. В атрибуте background="Ваш_фон.jpg" нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка. |