- •Уральский государственный педагогический университет
- •Введение
- •1.1. Информационные ресурсы Интернет. Основные понятия.
- •1.2. Решение поисковых задач. Электронная почта.
- •Электронная почта
- •1.3. Информационная технология www.
- •Существует множество редакторов html-файлов, которые автоматически генерируют код html, но с точки зрения минимального объема и быстродействия они уступают страницам, созданным в блокноте.
- •Ip address (ip-адрес) – номер хоста, выраженный 32-разрядным числом, записанным четырьмя байтами, разделенными точкой (например, 234.049.123.101).
- •1.4. Работа с графикой.
- •2. Язык разметки html.
- •2.1. Синтаксис языка html, структура документа.
- •Все теги нтмl по их назначению и области действия можно разделить на следующие основные группы:
- •2.2. Основные теги и их атрибуты. Разметка текста. Гиперссылки.
- •2.3. Графика, звук и видео. Активные изображения.
- •2.4. Таблицы. Оформление таблиц. Формы на странице. Создание форм.
- •2.5. Каскадные листы стилей. Файлы css.
- •3. Размещение страниц в Интернете.
- •3.1. Цели, основные этапы проектирования сайта.
- •3.2. Требования, предъявляемые к представлению информации и Web-дизайну
- •3.2 Анализ основных требований к дизайну web-ресурсов.
- •Основные типы серверов и предоставляемые ими услуги
- •Список поисковых серверов и каталогов
- •Основные возможности программы Internet Explorer 5.0
- •Escape-последовательности cer (Character Entity Reference)
- •Основные цвета
- •Базисные элементы html
- •Основные атрибуты и их значения
- •Единицы измерения значений свойств
- •Глоссарий
- •Литература
Все теги нтмl по их назначению и области действия можно разделить на следующие основные группы:
определяющие структуру документа;
оформление блоков гипертекста (параграфы, списки, таблицы, картинки);
гипертекстовые ссылки и закладки;
формы для организации диалога;
вызов программ.
Тэги, определяющие структуру HTML-документа
При подготовке документов HTML используется идентификатор текста DTD (Document Type Declaration, определение типа документа) в качестве первой строки. Это позволяет браузеру идентифицировать документ как соответствующий стандарту HTML. Обычно (но не обязательно) каждый документ HTML начинается со строки типа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Здесь содержится информация о том, что документ соответствует версии HTML 4.0; разработанной W3C; используемый язык — английский.
Сам HTML-документ заключается в тэги <html> и </html>. Между этими тэгами располагаются две секции: секция заголовка (между тэгами <head> и </head>) и секция тела документа (между тэгами <body> и </body>).
В тексте HTML-документа для удобства принято употреблять Комментарии - текст комментария размещается в тэге <!-- ….текст комментария…. --> и не отображается в окне Браузера.
Секция заголовка содержит описание параметров, используемых при отображении документа, но не отображающихся непосредственно в окне обозревателя. Обязательным тегом является заголовок страницы <title>Название</title> . Данное название прописывается в заголовке браузера при просмотре страницы и предлагается при сохрании файла в виде Web-страницы.
Секция тела документа содержит текст, предназначенный для отображения обозревателем и тэги, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее.
Пример:
<html>
<head>
<title>Пример НТМL-документа</title>
</head>
<body>
<p>Разметка HTML-документа</p>
</body>
</html>
Браузер отобразит это документ, выведя в своем окне строку текста:
Разметка HTML-документа,
расположенную в секции тела документа. Благодаря наличию тэга <title> в заголовке окна Браузера будет выведено не имя файла, а заголовок, обычно несущий смысловое содержание. В данном случае заголовок окна Браузера будет: Пример НТМL-документа.
Фреймы (frame) дают возможность поделить окно браузера на части, загрузив в каждую из частей – отдельный HTML-файл. Для создания фреймов используется парный тег <frameset> вместо тега <body>
Атрибуты <frameset>:
cols– определяет количество колонок, напр.,cols="200,*" – 2 колонки, одна размером 200 рх, другая – оставшееся пространство окна, илиcols="30%,70%"
rows- определяет количество горизонтальных фреймов, напр.,rows="200,400" и т.д.
border – толщина рамок, приborder="0" рамки отсутствуют.
bordercolor – цвет границ между фреймами.
frameborder –управление рамками фрейма,frameborder="0" или "1"
Содержимое каждого фрейма, т.е. загружаемый файл-документ задается отдельным тегом <frame>. Его обязательный атрибутsrcс указанием имени отображаемого во фрейме файла, напр. <framesrc=”file1.htm”>.
Атрибуты <frame>:
name – имя фрейма, обязательно, если фрейм целевой, т.е. в него назначаются ссылки.noresise – фиксация размеров фрейма, иначе его границы можно передвигать.
marginwidth, marginheight –определение свободных полей в рх слева, справа, сверху и снизу фрейма.
scrolling– отображение полос прокрутки,yes, no илиauto.
Структура страницы с фреймами
<html><head>
<title>фреймы</title>
</head>
<frameset cols="200,500*" frameborder="NO" border="0" framespacing="0" rows="*">
<frame name="leftFrame" scrolling="yes" src="frame1.htm" marginwidth=5 marginheight=5>
<frame name="main" src="frame2.htm" marginwidth=1 marginheight=1></frameset>
</frameset>
</html>
Мета-тэги Используются в секции заголовка между тэгами <head></head> и содержат информацию для браузера и поисковых машин. Большинство мета-тэгов не являются обязательными, но бывают очень полезны.
Существует 2 вида метa - тегов.
Первый вид – с атрибутом name, напр. Указание имени автора. Впишите свое имя или Nickname.
<meta name="Author" content="имя автора">
Пример: <meta name="Author" content="Владимир">
Описание документа.Текст, который Вы укажите в этом тэге, будет отображаться поисковиками. Длина описания не должна превышать 200 символов.
<meta name="Description" content="описание">
Пример:<meta name="Description" content="Все про взлом программного обеспечения. Инструменты, вирусы, исходники."> Применяется для ускорения процесса индексации ресурса поисковыми машинами. Наличие этого тега многократно увеличивает шансы вашего ресурса попасть в первые ряды сайтов, найденных по соответствующему запросу.
Ключевые слова для поисковиков.Укажите поисковикам, по каким словам им осуществлять поиск информации, содержащейся на Вашей странице. Не пишите в этом тэге одних и тех же слов. Длина списка до 800 символов. Слова стоит набирать и строчными, и заглавными буквами
<meta name="Keywords" content="слова через запятую или пробел">
Пример: <meta name="Keywords" content="crack cracking взлом">
Указание E-Mail.Содержит адрес автора сайта.
<meta name="Reply-to" content="адрес E-Mail">
Пример: <meta name="Reply-to" content="irina@hotmail.com">
Дата создания сайта.Содержит информацию о дате и времени создания сайта (на английском языке).
<meta name="Date" content="месяц, число, год и время через пробел">
Пример: <meta name="Data" content="May 28 1999 15:34 Am">
Второй тип мета - тегов – с директивой http-equiv. Они играют роль при передаче документов посредством протокола http. Кодировка. При наличии этого тега обозреватель будет правильно отображать текст страницы, если вы оформите ее именно в указанной кодировке, иначе может получиться каша. На первых порах использовать осторожно.
<meta http-equiv="content-type" content="text/html; charset=Кодировка">
Пример: <meta http-equiv="content-type" content="text/html; charset=Windows-1251">
Показ дополнительного файла перед основным. Вы можете использовать этот мета-тэг для переадресации, не прибегая к навороченным скриптам.
<meta http-equiv ="Refresh" content="число (в секундах); url="имя файла с расширением">
Пример: <meta name="Refresh" content="10; url=index.htm">
Данный пример загружает документ index.htm через 10 секунд. Данная функция – редирект – перенаправляет пользователя при смене адреса ресурса или при переключении с заглавной (splash) на стартовую страницу
Базовый адрес (тэг ваse). Тэг <ваsе> (непарный) связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную. НТМL разрешает использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной. Тэг <ваsе> позволяет определить эту базу. Так, например, если в заголовке будет задано: <base href="http://my.narod.ru/">
гипертекстовая ссылка (в теле документа) вида: <a href="/docs/index.htm">
будет расширена до <a href="http://my.narod.ru/docs/index.htm">
Это же касается и других импортируемых в документ тэгов.