Графика в html
Графика в HTML» – шестой урок учебника HTML. В этом уроке речь пойдет о работе с веб графикой, как частью HTML страниц. Мы научимся создавать изображения в рамках HTML и настраивать их отображение.
Работа с изображениями и графикой в HTML очень важна, именно она позволяет сделать внешний вид страницы таким, каким мы его и хотим видеть, создание фона, добавление графических объектов и многое другое будет рассмотренно в этом разделе.
Использование графики на html страницах.
В современном интернет очень популярно оспользование всевозможной графики на веб страницах, использование звуков и анимации. Многие веб–мастера используют графику на своих сайтах для привлечения новых клиентов, для создания броского и уникального дизайна для сайта.
Но не стоит забывать, что графика должна гармонично сочетаться с общим настроением сайта. Она не должна резко выделяться, а лишь немного подчеркивать тематику сайта. Нельзя использовать яркие, кислотные цвета, резко контрастирующие с цветом текста, нельзя использовать фоновые цвета, близкие к цвету текста, нельзя перегружать страницу большим количеством анимации - все это отпугивает пользователя и сильно увеличивает время загрузки страницы.
Простота - есть гениальность.
Придерживайтесь этого правила и ваши страницы будут притягивать внимание.
Но простота и примитивность – совершенно разные понятия. Найдите баланс. Экспериментируйти для получения своей, уникальной формулы дизайнерского успеха...
Как создать страницу html
Для начала создадим на рабочем столе папку, в которую будем складывать все файлы в процессе обучения. Для этого щелкните правой кнопкой мыши в любом месте рабочего стола, затем нажмите Cоздать и из выпавшего списка выберите Папку. Дайте имя папке, например - Уроки HTML
Теперь можно приступать к созданию страницы. Создать простую страницу HTML очень просто, Вы в этом очень скоро убедитесь.
О
ткройте
программу "Блокнот", "WordPad"
или любой другой текстовый редактор,который
есть на Вашем компьютере.
Перепишите
или скопируйте код красного цвета, но
для более успешного запоминания, лучше
начинать писать код вручную.
Заполняйте
очень внимательно, важен каждый знак,
каждая запятая, каждая ковычка, иначе
может не получиться. Код можно писать
как заглавными, так и маленькими буквами.
<HTML> <HEAD> <TITLE>Наша пробная страница</TITLE> </HEAD> <BODY BGCOLOR="#CCCCFF">Наша пробная страница </BODY> </HTML>
Этим кодом мы создали страницу сайта. Теперь надо сохранить эту страницу в формате HTML. В меню текстового редактора нажмите "Файл" "Сохранить как..", в открывшемся окне выберите место для сохранения файла. У нас это рабочий стол и укажите папку в которой будет лежать файл - это папка "Уроки HTML". и нажмите на кнопку "Открыть"
Затем в строке Имя файла напишите например: page.html и нажмите кнопку "Сохранить". В папке "Уроки HTML", взависимости от браузера, установленного у Вас, появится один из этих значков, изображенных на картинке справа.
В дальнейшем, когда Вы будете добавлять или изменять код, в меню текстового редактора нажимаете "Сохранить"
Ч
тобы
открыть и посмотреть на созданную
страницу, нажмите на значок правой
кнопкой мыши и в выпавшем списке выберите
"Открыть". Страница откроется в
браузере, правда пока она пустая или,
если вы вписали текст "Наша пробная
страница", этот текст и будет отображен
на странице.
Если вы закрыли текстовый
редактор в котором писали код, чтобы
открыть его вновь и продолжить работу,
нажмите на значок и в выпавшем списке
выберите "Открыть
с помощью" и
из списка выберите"Блокнот"
Сайты создаются с помощью тегов. Открывает и закрывает страницу теги<HTML>и </HTML>, они ставятся в начале и конце страницы. Затем идут теги<HEAD> и </HEAD>,это служебные теги,между ними пишутся команды для браузера.Например теги <TITLE> и </TITLE>, все что написано межу этими тегами будет отображаться при открытии страницы в самом верху браузера. Между тегами <BODY> и </BODY> помещается все содержимое страницы сайта, таблицы, тексты,картинки, в общем все из чего состоит сайт.
Цвет страницы прописывается в теге <BODY> атрибутом bgcolor="#CCCCFF". В ковычках обозначается код цвета, может быть любым, на Ваше усмотрение. Таблицу со цветовой гаммой,а также картинки,которые мы будем применять для нашего сайта, можете скачать ЗДЕСЬ
Созданная нами страница выглядит ТАК Теперь можно форматировать страницу, заполнять ее текстом, менять цвет. Так же фоном страницы можно сделать картинку. Для этого в теге <BODY> вместо атрибута BGCOLOR, применим атрибут BACKGROUND="images/имя картинки". Код будет таким:
<HTML> <HEAD> <TITLE>Наша пробная страница</TITLE> </HEAD> <BODY BACKGROUND="images/texture1.gif" >Наша пробная страница</BODY> </HTML>
Вставка изображения в HTML код страницы:
-
<html> <head> <title>Вставка изображения в HTML код страницы</title> </head> <body> <img src="xxx.jpg" alt="Альтернативный текст" width="100" height="80" /> </body> </html>
Тег <img /> – непарный. Обратите внимание на способ его закрытия.
Атрибуты и значения
src="" – обязателен, он указывает на источник изображения.
alt="" – определяет альтернативный текст, комментарий, который считывает поисковый робот при анализе содержимого web-страницы. Его также нужно обозначать.
width="" – определяет ширину изображения в пикселях.
height="" – определяет высоту изображения в пикселях.
Ссылка наверх текущей страницы:
Код примера:
-
<title>HTML изображение - ссылка</title> </head> <body> <p> <a href="#"><img src="../images/strelkavverx.png" alt="" border="0" /></a> </p>
border="0" – отменяет границу графической ссылки.