русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Последовательность, логичность, постоянство — вот необходимые качества хорошего Web-узла.


Дата добавления: 2013-12-23; просмотров: 356; Нарушение авторских прав


Пример

Пример

Пример

Пример

Пример

Пример

Пример

Выравниваем параграф по правому краю с помощью соответствующего атрибута <p align="right">

<HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD>

<BODY bgcolor="yellow" text="green">

<p align="right">

Тело документа (страничка)</BODY> </HTML>

Тег <BR> не требует парного закрывающего тега

Тег <BR>(BReak line) вставляет перевод строки

Пример<HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD>

<BODY bgcolor="yellow" text="green">

<p align="center"><BR>

Тело документа (страничка) <BR> <BR>

Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку <BR>



А это уже длинный текст, разбитый <BR> на две строки с помощью тега

</BODY> </HTML>

Тег <Hx> и обязательныйпарный ему </Hx>

Тег <Hx> служит для создания заголовка. Всего существует 6 видов заголовков - от H1 до H6. Тегу <H1> соответствует самый большой заголовок, тегу <H6> - самый маленький

Атрибуты - align - выравнивает заголовок в соответствии со следующими значениями:

Center - по центру; left - по левому краю; right - по правому краю

<HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD>

<BODY bgcolor="yellow" text="green">

<p align="center"><BR>

Тело документа (страничка) <BR>

Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку <BR>



А это уже длинный текст, разбитый <BR> на две строки с помощью тега

<H1>Очень большой заголовок с тегом “H1”</H1>

<H2>Заголовок поменьше с тегом “H2”</H2>

<H3 align=right>Еще меньше с тегом “H3 align=right”</H3>

<H4>Маленький заголовок с тегом “H4”</H4>

<H5>Очень маленький заголовок с тегом “H5”</H5>

<H6 align=center>Самый маленький заголовок с тегом “H6 align=center”</H6>

</BODY> </HTML>

 

Создание гиперссылок.

Тег <A> служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается форматированию. Закрывающий тег обязателен. Тег должен содержать либо атрибут name, либо href

Атрибуты: name - задает имя элемента. Имя используется, например, для создания ссылок между файлами

href - задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа. Для создания гиперссылки вызова почтовой программы для написания письма используется <a href="mailto:your@email">

<HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD>

<BODY bgcolor="yellow" text="green">

<p align="center"><BR>

Тело документа (страничка) <BR>

Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку <BR>



А это уже длинный текст, разбитый <BR> на две строки с помощью тега

<H1>Очень большой заголовок с тегом “H1”</H1>

<H2>Заголовок поменьше с тегом “H2”</H2>

<H3 align=right>Еще меньше с тегом “H3 align=right”</H3>

<H4>Маленький заголовок с тегом “H4”</H4>

<H5>Очень маленький заголовок с тегом “H5”</H5>

<H6 align=center>Самый маленький заголовок с тегом “H6 align=center”</H6>

<a href="http://mousosh10.ru" title="гиперссылка на сайт школы">А это уже гиперссылка на сайт http:// mousosh10.ru </a></BODY> </HTML>

 

 


Тема: Работа с графикой. Шрифты. Основные правила разработки Web-страниц.

Добавление графического изображения на страницу (тэг <IMG> и его атрибуты).

Тег <img> служит для внедрения графики на страницы. На данный момент поддерживаются форматы файлов GIF, JPG, JPEG

Атрибуты - src - обязательный атрибут, указывающий URL рисунка

align - выравнивает изображение к одной из сторон документа

left Выравнивание по левому краю bottom Выравнивание по нижнему краю
right Выравнивание по правому краю top Выравнивание по верхнему краю
center Выравнивание по центру middle Выравнивание по середине

border - устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения

height - высота картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

width - ширина картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

Пример код с использованием тега <img>

<HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> <img src="1.jpg" ></BODY> </HTML>

Форматы графических файлов JPEG и GIF.

Graphics Interchange Format (GIF) — формат растровых графических файлов, поддерживается приложениями для различных операционных систем. Включает алгоритм сжатия без потерь информации, позволяющий уменьшить объем файла в несколько раз. Рекомендуется для хранения изображений, создаваемых программным путем (диаграмм, графиков и так далее) и рисунков (типа аппликации) с ограниченным количеством цветов (до 256). Используется для размещения графических изображений на Web-страницах в Интернете.

Joint Photographic Expert Group (JPEG) — формат растровых графических файлов, который реализует эффективный алгоритм сжатия (метод JPEG) для отсканированных фотографий и иллюстраций. Алгоритм сжатия позволяет уменьшить объем файла в десятки раз, однако приводит к необратимой потере части информации. Поддерживается приложениями для различных операционных систем. используется для размещения графических изображений на Web-страницах в Интернете.

Графические гиперссылки.

<HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> <img src="1.jpg" ><a href="http://mousosh10.ru"> <img src="1.jpg" ></a></BODY> </HTML>

Тэги изменения шрифта (<FONT>, <I>, <В>,<U>).

Тег <font>

Тег <font> определяет выводимый шрифт, его цвет и размер. Закрывающий тег требуется

Атрибуты - color - устанавливает цвет текста, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета, например для зеленого цвета<font color= "green">

face - определяет гарнитуру шрифта

size - размер текста в пределах от 1 до 7,где 1 - самый мелкий шрифт. По умолчанию равен 3

Это обычный текст

А это уже текст с использованием тега <font size=1>

Используем тег <font size=5 color="blue">

Тег <i> и обязательный парный ему </i>

Тег <i> создает наклонный текст

Это обычный текст

А это уже наклонный текст с использованием тега <i>

Тег <B> и обязательный парный ему </B>

Тег <B> создает жирный текст

Это обычный текст

А это уже жирный текст с использованием тега <B>

Тег <u> и обязательный парный ему </u>

Тег <u> указывает, что текст должен быть подчеркнут

Это обычный текст

А это уже текст с использованием тега <u>

Пример странички

<HTML>

<HEAD>

<TITLE>Заголовок</TITLE>

</HEAD>

<BODY>

Это обычный текст<br>

<font size=1>А это уже текст с использованием тега “font size=1”</ font><br>

<font size=5 color="blue"> Используем тег “font size=5 color="blue"” </ font><br>

Это обычный текст<br>

<i>А это уже наклонный текст с использованием тега “i”</i><br>

Это обычный текст<br>

<B>А это уже жирный текст с использованием тега “B”</B><br>

Это обычный текст<br>

<u>А это уже текст с использованием тега “u”</u><br>

</BODY>

</HTML>

Основные правила разработки Web-страниц.

При наполнении Web-узла всегда нужно помнить два принципа: уникальность и достоверность публикуемых материалов.

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

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

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

Структура: Web-документ должен содержать в себе следующие разделы: заглавие, название, навигационную панель, собственно содержание, контактную информацию, дату и время обновления, авторские права и статус документа.

Логотип: создавая Web-страницу, необходимо позаботиться о том, чтобы название всегда присутствовало на экране. Для этого в начале каждого Web-документа обычно помещается красочно оформленный логотип. Кроме того, название должно присутствовать и в выходных данных ко всем документам.

Навигационная панель - одним из наиболее важных разделов Web-документа является навигационная панель или панель управления. Навигационная панель вашего Web-узла должна присутствовать в каждом документе. Она должна включать в себя направляющие ссылки типа "Вперед"-"Назад" ("Следующий"-"Предыдущий"), указывающие на соседние документы в структуре Web-узла. Далее от панели управления обязательно должны идти ссылки на все крупные разделы Web-узла — так называемые разделы первого уровня. И, наконец, пользователь всегда должен иметь возможность мгновенно вернуться на главную страницу Web-узла.

Содержание: Прежде всего, следует отметить, что содержание Web-документов должно в полной мере отвечать всем требованиям, предъявляемым к обычным газетным или журнальным публикациям: грамматическая и орфографическая корректность, точность и достоверность предлагаемых материалов и многое другое.

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

Графика - при разработке Web-страницы нужно очень внимательно выбирать оптимальное соотношение графических и текстовых материалов. Одна хорошая картинка может заменить тысячу строк текста, но и загружаться по сети она будет в тысячу раз дольше. Поэтому графикой нужно пользоваться осторожно. Графики на странице должно быть чуть меньше, чем хочется Web-мастеру. Пользователям может просто не хватить терпения, и они закроют документ еще до того, как он полностью загрузится. Задержка отклика системы вызывает у пользователя раздражение. Время задержки, в телефонных линиях, возрастает в зависимости от времени суток, по разным оценкам до 15-60 секунд. Теперь представьте, что у клиента только модем на 19200 бит/с. Тогда за минуту, то есть до того, как клиент потеряет терпение, можно передать только около 170 Кбайт данных. Следовательно, размер документа не должен превышать этого значения.



<== предыдущая лекция | следующая лекция ==>
Теги HTML | Лавинообразный поток трафика стирает все на своем пути, серверы останавливаются. Не справляясь с объемом информации.


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.087 сек.