Сайт поможет начинающему web-мастеру в создании вашей первой html-страницы. А более опытному мастеру, возможно, напомнит о каких то деталях. Основная тематика сайта - создание сайтов, HTML, web-программирование.


Изображения. Атрибуты тега <IMG>

Автор: admin | Дата: 15.05.2008

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

Итак, как уже говорилось в статье Оптимизация графики для веб, указание размеров рисунка может существенно повлиять на тип загрузки страницы. Посетитель в первую очередь увидит текст на странице, а во время чтения будет грузиться графика. Иначе, если вы проигнорируете эти атрибуты, посетитель должен будет дождаться загрузки графики и только после загрузки всей страницы. Также зачастую изображения являются ссылками на другие документы сайта. В таком случае, по умолчанию, браузер добавит рамку к изображению, тем самым, указав на то, что изображение является ссылкой.

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

Читать далее…

Похожие записи

Теги: , , , , ,

Воспроизводим видео на сайте с помощью своего плеера

Автор: admin | Дата: 08.05.2008

Для того чтобы воспроизвести видео на вашем сайте, вы можете воспользоваться тегом <EMBED>, но в таком случае, у пользователя должно быть установлено соответствующее ПО на компьютере. В этой статье мы рассмотрим универсальный плеер, который сможет воспроизвести музыку, картинки, а главное видео файлы независимо от типа ОС, браузера и других параметров системы, т.к. сам плеер и видео будут расположены на хостинге.

Плеер носит гордое имя JW FLV MEDIA PLAYER. Последняя версия, которая доступна на сайте разработчика - 3.16, весит 854КБ. Преимуществ достаточно, для того, чтобы обратить на него внимание. Но, зачем мне ставить плеер для воспроизведения видео на сайте, когда я могу воспользоваться бесплатными сервисами, например Youtube, Rutube и другие? У всех них есть один существенный для меня недостаток, видео файлы находятся на их серверах, сам плеер тоже, т.е. вы автоматически зависите от этих площадок. А случиться, даже с такими крупными сервисами может все что угодно. От технических работ, переезда, до банального удаления вашего файла.

Плееру уже 4 года, как написано на сайте разработчика. За это время он претерпел серьезные изменения, но что радует, загрузить вы можете даже самую первую версию, правда воспроизводит она только mp3-файлы. В более поздних версиях плеера появлялись дополнительные возможности, среди которых, поддержка плейлистов, скринов для видео, настроек цвета для кнопок, меню, бара поиска видео на Yuotube и многие другие.

Читать далее…

Похожие записи

Теги: , , , ,

Как сделать чтобы при наведении на ссылку она выделялась?

Автор: admin | Дата: 07.05.2008

как сделать чтобы при наведении на ссылку она выделялась?

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

Для сравнения на сайте магазина, посетителю предлагается такой адрес директории:

http://www.site.com/?h=76byrtr5&p=675gvth&c=45

а на сайте другого магазина, директории получили имена

http://www.site1.ru/shop/auto/new.shtml

Второй адрес намного понятнее, его легче запомнить, да и технологии сейчас позволяют легко создавать такие адреса. Как же сделать так, чтобы при наведении на ссылку она выделялась? Приступим к примерам. Мы можем выделить ее, добавив параметр font-weight в описании стиля для ссылки.

<html>
<head>
<title>Выделение ссылки при наведении курсора</title>
<style type=”text/css”>
<!–
a {color: red; font-size: 14px}
a:hover {color: red; font-size: 14px; font-weight: bold}
–>
</style>
</head>
<body>
Рассмотрим пример, при котором <a href=”page.html”>ссылка</a> выделяется при наведении на нее
</body>
</html>

Читать далее…

Похожие записи

Теги: , , , , ,

Создание простых таблиц, теги <TABLE>, <TR> и <TD>

Автор: admin | Дата: 07.05.2008

В HTML уже давно таблицы играют важную роль. Помимо главного значения, а это внесение информации и представление ее в табличном виде, их применяют для создания макета страницы. Для того чтобы представить на странице информацию в двух или более колонках отдельные блоки, добавляют в ячейки таблицы. В последнее время таблицы активно заменяют блоками <DIV>. С помощью блоков и CSS код страницы получается более коротким, хотя иногда наоборот, и редактируемым. Стало вполне возможным, изменив один файл стилей полностью или частично изменить вид страницы. Тогда как раньше, простое изменение ширины таблицы требовало редактирование html-кода на всех страницах. Это преимущество CSS неоспоримо, поэтому, каждый начинающий веб-мастер рано или поздно начинает активно применять CSS.

В этой статье, а таблицам будет посвящено несколько, рассмотрим различные примеры таблиц и значения их атрибутов. Допустим, мы хотим создать обычную таблицу, две строчки, в каждой строчке по две ячейки.

Читать далее…

Похожие записи

Теги: , , , , , , ,

Тег <FONT> - часть II. Изменяем гарнитуру текста

Автор: admin | Дата: 01.05.2008

По умолчанию для текста на вашей странице предлагается простая гарнитура, которую можно поменять на любую другую. Для того чтобы поменять гарнитуру, тег <font> имеет атрибут face, а конструкция выглядит так.

<font face=”Arial”>

Здесь Arial, это название новой гарнитуры, вы можете вставить сюда название той гарнитуры, которую хотели бы использовать. Рассмотрим код, в котором мы применили несколько тегов <font> с атрибутом face и разными гарнитурами.

<html>
<head>
<title>Изменяем гарнитуру текста</title>
</head>
<body>
<h2>Изменяем гарнитуру текста</h2>
<font face=”Arial”>Это гарнитура Arial</font>
<font face=”Tahoma”> Это гарнитура Tahoma</font>
<font face=”Verdana”>Это гарнитура Verdana</font>
<font face=”MyNew”>Это гарнитура MyNew7</font>
</body>
</html>

Читать далее…

Похожие записи

Теги: , , ,