русс | укр

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

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

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

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


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

Основные элементы языка HTML


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


Приступим к рассмотрению стандартного HTML-документа. В самой первой строке, она помечена «<!», размещена информация о версии HTML.

Пример написания: < ! DOCTYPE HTML PUBLIC “ – // W3C // DTD HTML 4,0 // EN” “http://www.w3.org/TR/REC–html40/strict.dtd”>

Здесь DTD – (document type definition) определение типа документа. Существует 3 DTD для HTML 4,0:

  • HTML 4,0 strict DTD (строгое определение) не включает нежелательные элементы и атрибуты (мы придерживаемся и требуем от студентов)
  • HTML 4,0 Transitional DTD (переходное определение) включает строгое и нежелательные элементы. Пример написания: // DTD HTML 4,0 Transitional
  • HTML 4,0 Frameset DTD (определяется для фреймов (кадров)) включает переходное определение и фреймы. Пример написания: // DTD HTML 4,0 FrameSet

// EN – используемый язык английский, в DTD для HTML всегда EN.

Затем идет URL–адрес стандарта HTML, это может быть один из вариантов:

  • “http://www.w3.org/TR/REC–html40/strict.dtd ” строгое DTD
  • “http://www.w3.org/TR/REC–html40/loose.dtd” переходное DTD
  • “http://www.w3.org/TR/REC–html40/frameset.dtd” для фреймов

Каждый ресурс имеет адрес кодируемый универсальным идентификатором ресурсов (Univergal Resource Identifier) URI, (URL – является подмножеством URI). Состав абсолютного адреса:

1.схема механизма доступа к ресурсу (протокол, как правило http или ftp)

2.имя машины на который расположен ресурс (в сети WWW, например, www.w3.org)

3.имя ресурса в виде пути.

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

Любой HTML документ состоит из элементов. Элемент – это начальный тег, содержимое и конечный тег. Команда в HTML называется «тег» (tag) (открывающий и закрывающий) и может иметь параметры – атрибуты. Конструкция <символы> – открывающий тег, </символы> – закрывающий тег. Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково, однако рекомендуется писать маленькими буквами. Все что находиться между открывающим и закрывающим тегами называют содержимым тега. Не все команды языка HTML парные, т.е. имею закрывающий тег. Непарные теги немеют содержимого. Параметры тегов изменяют его влияние на содержимое, в общем виде это можно записать как <тег атрибут = “значение”>. Шаблон, описывающий общую структуру HTML-документа:



<html>

<head>

Теги заголовка

</ head>

<body>

Текст странички

</ body>

</ html>

Html-файл может быть одновременно открыт и в текстовом редакторе (например Notepad), и в любом браузере, который имеется на компьютере. Сохранив изменения в текстовом редакторе, просто нажмите кнопку Reload («перезагрузить» или «обновить») в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.

Элемент <html> и </ html>(начальный и конечный теги необязательны). Атрибуты:

lang – код языка (регистр не учитывается) по умолчанию не определен, зависит от агента пользователя. Предназначен, чтобы генерировать изображение на основе принятой культурной практикой для данного языка. Информация атрибута полезна поисковым машинам, синтезаторам речи, для выбора высококачественной типографии, программам проверки грамматики и орфографии. Некоторые значения атрибута:

“EN” – английский

“RU” – русский

“FR” – французский

“DE” - немецкий

“IT” – итальянский

“NL” - голландский

“ES” - испанский

“HE” - иврит

“ZH” - китайский

“JA” – японский

dir – направление текста, по умолчанию значение “ltr” (слева направо). Для значений не учитывается регистр: LTR (ltr) слева направо, RTL (rtl) справа налево.

Элемент < head > </ head > необязательно наличие тегов в тексте, если нет тегов, элемент все равно присутствует. Элемент Head содержит информацию о тексте документа, информацию используемую поисковыми машинами, информация не считается содержимым документа и не отображается агентом (браузеры могут предоставлять пользователю информацию из раздела HEAD с помощью собственных механизмов)

Атрибуты:

Profile – местоположение профиля метаданных, значением является url-адрес. Метаданные это информация о документе HTML

lang и dir работают также как и в элементе Html.

В разделе Head могут присутствовать следующие элементы: Meta, Title, Link, Style, Script.

Элемент <TITLE> начальный и конечный теги обязательны (содержание отражается в заголовке окна браузера). Используется для идентификации содержания документа, отражает смысл.

Элемент <LINK> только начальный тег, нет содержимого, вся информация содержится только в атрибутах (большое количество атрибутов)

Основные атрибуты элемента Link:

href – указание ссылки на внешний документ, значением является url-адрес.

rev – отношение текущего к указанному документу.

rel – отношение указанного к текущему документу (не учитывает регистр)

Возможные значения для атрибутов rev и rel:

”next” – следующий

“prev”- предыдущий

“alternate” – альтернативная версия документа (вместе с атрибутом lanlg указывает на версию документа на другом языке)

“start” – первый документ в наборе.

Примеры написания:

<LINK rel = “alternate” type = “text/html” href = “mydoc-fr.html” lang = “fr”>

<LINK rel= “start” type= “text/html” href= “page1.html”>

Пусть сайт состоит из двух документов gl1.html и gl2.html, тогда в gl1.html:
<LINK href = “gl2.html” type = “text/html” rel = “next”>

в gl2.html:
<LINK href = “gl1.html” rel = “prev” rev = “next“>

type – атрибут указывающий тип внешнего документа. Возможные варианты

«text\html» «image\gif» «video\mpeg» «audio\basic», «text/javascript»

Элемент <meta> (нет конечного тега) в виде атрибутов может содержать различную информацию полезную для поисковых машин. Заголовок HTML-документа может включать неограниченное количество так называемых meta-инструкций. meta-инструкция — это просто способ определить некоторую переменную путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее типичные meta-инструкции.

Атрибуты

 

http-equiv

“expires” браузер должен обновить данные, когда загрузит новую копию документов в указанное в контенте время <meta http-equiv=“expires” content = «sat, 25 dec 15:30:00 gmt»>

"Refresh"

<meta http-equiv ="Refresh" content="[время]; URL=[документ]"> дает браузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". Более конкретно это может выглядеть, к примеру, вот так:

<meta http-equiv="Refresh" content="10; URL=http://www.yar.ru/mysait/"> Если пользователь не предпримет никаких видимых действий в течение 10 секунд после загрузки документа, содержащего такую инструкцию, автоматически будет загружен документ http://www. yar.ru/mysait/. Можно использовать для: показа рекламы и возвращения на основные страницы, электронной презентации и прочее. meta-инструкцию Refresh можно использовать, например, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее meta-инструкцию Refresh и адрес документа на новом сервере. Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки html-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого рода приветственных речей.

"Content-type"

<meta http-equiv="Content-type" content="text/html; charset=windows-1251"> — meta-инструкция дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows/1251.

<meta http-equiv="Content-type" content="text/html; charset=koi8-r"> — meta-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8. Используется в сочетании с атрибутом content.

lang – указывается язык html-странички

name – имя meta-инструкции, некоторые значения атрибута

"keywords"

<meta name="keywords" content="Интернет, HTML, WWW, руководство, публикация, гипертекст"> — meta-инструкция определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. На практике поиск по ключевым словам очень удобно использовать при строительстве поискового механизма, работающего в пределах одного сервера. Ключевые слова позволяют повысить «релевантность» (соответствие запросу) поиска. При выводе информации о странице в результатах поиска многие роботы, индексирующие документы html, пользуются описанием, которые они находят в инструкции "description". Если этой инструкции в документе не окажется, то поисковая машина вернет первые символы найденные на странице, за вычетом команд html.

"description"

<meta name="description" content="Это учебник по программированию для глобальной компьютерной сети Интернет">. Такая meta-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей.

“author” - указывает автора

“robots” – описание правил индексирования документа со всеми гиперсвязями (для получения дополнительных ссылок) поисковыми машинами (роботами). При этом значения атрибута

content:

all- разрешение индексирования всего документа со всеми гиперсвязями.

none – запрещает индексирование всего документа со всеми присутствующими ссылками

index – разрешение индексирования самого документа

noindex – запрет индексирования самого документа

follow – разрешение индексирования присутствующих в документе гиперсвязей

nofollow – запрет индексирования присутствующих в документе гиперсвзей

при отсутствии конструкции <meta name=”robots”> поисковый робот индексирует документ со всеми присутствующими в нем гиперссылками, т.е отсутствие равносильно мета-инструкции <meta name=”robots” content=”all”>

Пример: <meta lang=”ru” content=“отпуск, Греция, солнце”>

< META lang=”en-us” content=”vacation, Greece, sunshine”>

Элемент STYLE используется для создания встроенных таблиц стиля. Обязательны открывающий и закрывающий теги <style> </style>. Подробнее об этом элементе пойдет речь чуть позже.

Элемент SCRIPT предназначен дл встраивания скриптов (небольших фрагментов программ написанных на скриптовых языках) в текст странички. Обязательны открывающий и закрывающий теги <script> < /script>

Раздел BODY. Теги <body> </ body >. В разделе располагается содержимое html-странички, которое браузер выведет на экран. Тег <body> может содержать следующие атрибуты:

Background – задает фоновый рисунок

Text – задает цвет текста

Link – задает цвет ссылки по которой не переходили (по умолчанию его значение “blue” голубой)

Vlink – задает цвет ссылки по которой переходили

Alink – цвет ссылок, выбранных пользователем (активных, в момент нажатия левой клавиши мыши)

Атрибуты тега <body> в строгом определении недопустимы, а значит их использование при написании лабораторных работ тоже недопустимо.

Антипример написания странички:

<!DOCTYPE HTML PUBLIC” -//W3C//DTD HTML 4.0 Transitional//EN” “http:// www. w3. org/ TR/REC-html40/loose. dtd”>

<HTML>

<HEAD>

<TITLE> Динамика популяции</TITLE>

</HEAD>

<BODY bdcolor = “white” text = “black” link = “red” alink = “fuchsia” vlink=”maroon”>

Сам документ

</BODY>

</HTML>

Лучше так, потому что используются встроенные таблицы стилей:

<!DOCTYPE HTML PUBLIC” -//W3C//DTD HTML 4.0 Transitional//EN” “http:// www. w3. org/ TR/REC-html40/strict. dtd”>

<HTML>

<HEAD>

<TITLE> Динамика популяции</TITLE>

<STYLE type=”text/class”>

body {background: white; color: black}

A: link {color: red}

A: visited {color: maroon}

A: active {color: fuchsia}

</STYLE>

</HEAD>

<BODY>

Сам документ

</BODY>

</HTML>

Или с использованием внешних таблиц стилей:

Содержание внешнего файла:

body {background: white; color: black}

A: link {color: red}

A: visited {color: maroon}

A: active {color: fuchsia}

Файл со страничкой:

<!DOCTYPE HTML PUBLIC” -//W3C//DTD HTML 4.0 Transitional//EN” “http:// www. w3. org/ TR/REC-html40/strict. dtd”>

<HTML>

<HEAD>

<TITLE> Динамика популяции</TITLE>

<LINK rel = “stylesheet” type = “text / css” href = “mystyle. css”>

</HEAD>

<BODY>документ

</BODY>

</HTML>

<pre></pre> - Обрамляет предварительно отформатированный текст.

<h1></h1> - Создает САМЫЙ БОЛЬШОЙ заголовок

<h6></h6> - Создает самый маленький заголовок

<b></b> - Создает жирый текст

<i></i> - Создает наклонный текст

<tt></tt> - Создает текст - имитирующий стиль печатной машинки.Используется для цитат, обычно наклонный текст.

<em></em> - Используется для выделения из текста слова (наклонный или жирный текст)

<strong></strong> - Используется для выделения наиболее выжных частей текста (наклонный или жирный текст)

<font size=?></font> - Устанавливает размер текста в пределах от 1 до 7.

<font color=?></font> - Устанавливает цвет текста, используя значение цвета в виде RRGGBB.



<== предыдущая лекция | следующая лекция ==>
Введение | Графические элементы


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


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

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

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


 


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

 
 

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

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