Архив за ‘Уроки html’ Category

Обтекание картинки текстом

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Использование параметра align тега IMG
(далее…)

Особенности верстки веб-страниц

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

При верстке веб-сайта, несмотря на некоторую аналогию его с печатными изданиями, следует все же помнить, что мы имеем дело с компьютерным текстом, который зависит от ряда особенностей. Учет этих особенностей необходим для создания удобных для восприятия и пользования материалов.

Ширина страницы зависит от размера и разрешения монитора

Данная особенность породила метод верстки веб-страниц, основанный на использовании таблиц с невидимой границей. Идеология HTML рекомендует использовать таблицы только по их прямому назначению, т.е. для создания именно таблиц. Но что делать, располагая столь слабыми средствами верстки, приходится использовать разные ухищрения.
(далее…)

Добавление CSS

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

Таблицы стилей могут быть добавлены на страницу тремя разными способами, которые различаются по своим возможностям.
Таблицы связанных стилей (linked style sheet)

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег LINK в заголовке страницы. Пример 1. Подключение таблицы связанных стилей
<html> (далее…)

Встраивание сценариев в HTML-документ

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

Для того чтобы web странички имели современный вид, были многофункциональными и динамичными, многие авторы используют сценарии. Сценарий — это программный код который включается в текст страницы в виде исходного текста и выполняется браузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript), разработанным фирмой MicroSoft. (далее…)

Бесполезные META-теги

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , ,

Тег, управляющий временем индексации сайта.
<META NAME=«revisit-after» content= «…days»>
Смысл тега в том, что поисковый робот посещает Ваш сайт через заданное количество дней. Сегодня он не работает потому, что крупнейшие поисковики официально объявили, что их роботы больше не слушаются этого тега. Это вполне логично, представим на минутку, что каждый сайт поставит время индексации 1 день, поисковик просто не справиться.
(далее…)

HTML-фильтры часть 2

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , ,

Продолжаем рассматривать возможности фильтров в языке HTML, и у нас на очереди ещё два примера.

Фильтр Chroma

С его помощью можно определённый цвет сделать прозрачным. Открываем пример здесь, и смотрим ниже его код:

<HTML>

<BODY background=»graphic/678.jpg» > (далее…)

HTML-фильтры часть 1

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

Фильтры языка HTML это вещь достаточно экзотическая, очень немногие знают об их существовании, а те, кто знает всё равно не обращают на них внимания. А дело всё в том, что может фильтры, это конечно, и красиво, но уж слишком сложно применить их с пользой на практике.
Тем не менее, пробежавшись по собственному архиву работ, я нашёл несколько самых интересных фильтров и решил рассказать о них вам, уважаемые читатели. А вопрос об их применении оставляю полностью на ваше усмотрение.
Для каждого фильтра имеется пример, который сделан на странице, открывающийся в новом окне. (далее…)

Особенности верстки

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , ,

Хотя прародителем верстки веб-страниц является верстка полиграфических материалов, между ними есть одно важное различие. Любая полиграфия вроде буклета, листовки или брошюры печатается на листах установленного размера и в пределах одного тиража имеет лишь незначительные или даже незаметные глазу различия. Веб-страница же запускается на компьютере под управлением клиентской программы называемой браузером. Понятно, что операционная система, ее настройки и собственно сам браузер отличается от компьютера к компьютеру. Из чего следует банальный вывод, что один и тот же документ сайта по-разному отображается у каждого пользователя.

Напрашивается вопрос, можно ли сделать так, чтобы веб-страница отображалась одинаково? Учитывая, сколько придется принять во внимание разных неоднозначных факторов, следует сказать, что нет, нельзя. Поэтому задача верстки веб-страниц формулируется так: сформировать документ, который бы корректно отображался с небольшими различиями на основных платформах и в браузерах. Корректно означает, что соблюден исходный замысел автора, воплощен требуемый дизайн документа, и он показывается в браузере без ошибок. (далее…)

Модульная сетка

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

Веб-страница фактически рассматривается как набор прямоугольных блоков, которые выкладываются в определенном порядке. При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяют термин одно-, двух-, трехколонный макет и т.д. Для примера рассмотрим главную страницу сайта deviantart.com (рис. 1). (далее…)

Изображения в тексте

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , , , ,

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

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align=»center». Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применять его для нужных абзацев, как показано в примере 1. (далее…)