Пользователь

Добро пожаловать,

Регистрация или входРегистрация или вход
Потеряли пароль?Потеряли пароль?

Ник:
Пароль:

Меню сайта




Ваше мнение
Оцените дизайн сайта

Супер
Симпатично
Пойдет
Ничего хорошего
Просто клиника


Результаты
Другие опросы

Всего голосов: 891
Комментарии: 2


Наши партнеры



Статистика




Programming books  Download software  Documentation  Scripts  Content Managment Systems(CMS)  Templates  Icon Sets  Articles  Contacts  Voting  Site Search




Статьи и обзоры



Основные приемы форматирования html-страниц

Речь пойдет о том, как с минимальными усилиями добиться максимального результата, сделать сайт, который был бы удобным для пользователя, имел привлекательный внешний вид. Вы узнаете как сделать сайт популярным, посещаемым, научитесь правильно использовать языки разметки, цветовые схемы, схемы расположения элементов. Сколь бы вы грамотны в этой области не были, вы все равно найдете здесь для себя много интересного. Существует несколько разных способов форматирования элементов веб-страниц. Вообще под форматирование подразумевается придание им каких-либо нужных веб-дизайнеру атрибутов - например размер шрифта и его цвет. Но в этой статье мы не будем рассматривать именно такую работу со стилями - как показала практика их лучше менять средствами каскадных таблиц стилей - CSS. А это уже тема других статей.




Вы уже знаете, что для разделения страницы горизонтальной полоской необходимо воспользоваться тегом <hr>. Теперь давайте рассмотрим еще несколько методов изменения внешнего вида элементов нашей веб-страницы

Форматирование текста

В нашей страничке у есть строка ссылок "<p><a href="index.html">Главная страница</a> - <a href="aboutme.html">Обо мне</a></p>".

Попробуем сделать текст ссылок более крупным. Это можно сделать с помощью тега <b>, который отвечает за жирный шрифт (bold.

Поэтому наша строка "<p><a href="index.html">Главная страница</a> - <a href="aboutme.html">Обо мне</a></p>" преобразуется в "<p><a href="index.html"><b>Главная страница</b></a> - <a href="aboutme.html"><b>Обо мне</b></a></p>".

Вот как это будет выглядеть в коде:

Код
<p><a href="index.html"><b>Главная страница</b></a> - <a href="aboutme.html"><b>Обо мне</b></a></p>




Добавление изображений в веб-страницу

С помощью добавления изображений на страниц можно значительно увеличить ее привлекательность и добавить информативности. Пусть у вас есть изображение test.jpg, которое лежит в папке images. Тогда для его отображения на странице необходимо воспользоваться вот таким кодом:

Код
<p><img src="images/test.jpg" width="20" height="20" title="Some image" alt="Some image" /><p/>




У тега, который отвечает за вывод изображения, есть несколько параметров:

* Расположение изображения (директория).
* Ширина (width) и высота (height).
* Заголовок (title).
* Альтернативный текст (alt).

Параметры ширина и высота должны соответствовать реальным размерам изображения. В противном случае они уменьшат или увеличат его (естественно, что исходное изображение при этом останется прежних размеров).

Параметр заголовок используется для краткого описания картинки. Эта надпись появляется при наведении курсором мышки поверх картинки.

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

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

Окончательный результат:

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Моя домашняя страница</title>
</head>
<body>
<h1>My Cool Site!</h1>
<hr /> <p><a href="index.html"><b>Главная страница</b></a> - <a href="aboutme.html"><b>Обо мне</b></a></p>
<hr />
<p>Привет всем! Это моя первая веб-страница. Надеюсь, она вам понравилась :)</p>
<p><img src="images/test.jpg" width="20" height="20" title="Some image" alt="Some image" /><p/>
</body>
</html>



Нет комментариев. Почему бы Вам не оставить свой?
Вы не можете отправить комментарий анонимно, пожалуйста войдите или зарегистрируйтесь.
Внимание! Если у вас не получилось найти нужную информацию, используйте рубрикатор или воспользуйтесь поиском


.



Статьи и обзоры Веб-дизайн Основные приемы форматирования html-страниц Существует несколько разных способов форматирования элементов веб-страниц Вообще под форматирование подразумевается придание им каких-либо нужных веб-дизайнеру атрибутов например размер шрифта его цвет Но этой статье мы не будем рассматривать именно такую работу со стилями как показала практика их лучше менять средствами каскадных таблиц стилей это уже тема других статей Вы знаете что для разделения