Навигация
Главная
Новости
Скачать
Шаблоны сайтов
Партнеры

Графика
Adobe Photoshop

Программирование
Теория алгоритмов
Code Snippets
Все о PHP
Visual C++
WIN32 API
Delphi
ASP

Java
VBScript
CGI
VRML
PERL
HTML
XML

Сети
Cisco
IP-сети
Сетевые термины

IT
UNIX-системы
Хостинг

Операционные системы
Windows
Linux

Поисковая оптимизация
Основы SEO
Мастер-класс SEO
Анализ трафика
Google AdSense

В перерыве
Интересное
Поиск работы
Немного юмора
Материалы
Публикации


Минутку внимания
Андрей Лазарев
  Основные приемы форматирования 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>


Мы рекомендуем вам ознакомиться со следующими материалами на тему:
Информация для интересующихся веб-дизайном и программированием:
Фарватер. Пластиковые окна производство.

Online from 2006-2008 #We are the CoDeRs! Наши статьи и новости можно свободно перепечатывать при указании обратной ссылки на источник Связь с админом