- •Министерство образования украины донбасская государственная машиностроительная академия конспект лекции
- •Тема 1.1. История развития технологий Всемирной Сети и ее основные компоненты.
- •Основные компоненты технологии World Wide Web
- •Архитектура построения системы
- •Язык гипертекстовой разметки html
- •Принципы построения и интерпретации html
- •Тема 1.2. Введение в технологию создания web-сайтов Классификация сайтов
- •Этапы разработки web-сайта
- •Регистрация доменного имени.
- •Разработка структуры сайта.
- •Разработка дизайна главной страницы сайта.
- •Html-верстка страниц.
- •Подключение сайта к системе управления.
- •Корректировка и написание текстовых материалов (по необходимости).
- •Ввод информации (до 100 страниц).
- •Первичная seo-оптимизация.
- •Размещение сайта на сервере.
- •Создание e-mail адресов.
- •Установка счетчиков статистики.
- •Регистрация пользователей клиента в системе управления сайтом.
- •Редакторы веб-страниц
- •Тема 1.3. Основы web-дизайна.
- •Модульные сетки
- •Одноколонная сетка
- •Двухколонная сетка
- •Трехколонная сетка
- •Акценты в шрифтовых композициях
- •Виды акцентов
- •Цвета в web-дизайне: Выбор правильного сочетания для вашего сайта Цветовая теория: основные принципы. Умение сочетать цвета
- •Красный
- •Тема 1.4. Технология css.
- •Способы применения css
- •Переопределение стиля
- •Элемент style
- •Ссылка на внешнее описание
- •Импорт описания стилей
- •Поддержка свойств css различными браузерами
- •Модуль 2. Основи роботи з html-редактором Adobe Dreamweaver cs3
- •Тема 2.2. Html-редактор Adobe Dreamweaver cs3. Реализация структуры сайта.
- •Тема 2.3. Html-редактор Adobe Dreamweaver cs3. Форматирование html-страниц: логическое и визуальное.
- •Тема 2.4. Html-редактор Adobe Dreamweaver cs3. Изображения и другие элементы.
- •Тема 2.5. Html-редактор Adobe Dreamweaver cs3. Создание текстових заданий с использованием интерактивных элементов CourseBuilder
- •Литература
Принципы построения и интерпретации html
Теговая модель описывает документ как совокупность элементов, каждый из которых окружен тегами. По своему значению теги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т. п. Теги определяют область действия правил интерпретации текстовых элементов документа. Типичным примером такого рода является таг стиля Italic, который определяет область отображения курсива.
Текст на языке HTML:
Текст следующий за словом "Italic" <I>отображается как курсив</I>.
Текст отображаемый программой интерпретации:
Текст следующий за словом "Italic" отображается как курсив.
В приведенном выше примере элемент текста, который должен быть выделен курсивом, заключен между тагом начала стиля "Italic" - <I> и тагом конца стиля - </I>. Общая схема построения элемента текста в формате HTML может быть записана в следующем виде:
"элемент" := <"имя элемента" "список атрибутов">
содержание элемента </"имя элемента">
Конструкция перед содержанием элемента называется тегом начала элемента, а конструкция, расположенная после содержания элемента, - тегом конца элемента.
Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка - это адрес другого HTML документа, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена.
Для записи гипертекстовых ссылок в системе WWW была разработана специальная форма, которая называется Universe Resource Locator. Типичным примером использования этой записи можно считать следующий пример:
Этот текст содержит
<A HREF="http://polyn.net.kiae.su/altai/index.html">
гипертекстовую ссылку</A>.
В приведенном выше примере элемент "A", который в HTML называют якорем (anchor), использует атрибут "HREF", который обозначает гипертекстовую ссылку (HyperText REFerence), для записи этой ссылки в форме URL. Данная ссылка указывает на документ с именем "index.html" в директории "altai" на сервере "polyn.net.kiae.su", доступ к которому осуществляется по протоколу "http".
Гипертекстовые ссылки в HTML делятся на два класса: контекстные гипертекстовые ссылки и общие. Контекстные ссылки вмонтированы в тело документа, как это было продемонстрировано в предыдущем примере, в то время как общие ссылки связаны со всем документом в целом и могут быть использованы при просмотре любого фрагмента документа. Оба класса ссылок присутствуют в стандарте языка с самого его рождения, однако, первоначально наибольшей популярностью пользовались контекстные ссылки. Эта популярность привела к тому, что механизм использования общих ссылок практически полностью "атрофировался". Однако по мере стандартизации интерфейса пользователя и стилей представления информации разработчики языка снова вернулись к общим ссылкам и стремятся приспособить их к задачам управления этим интерфейсом.
Структура HTML-документа позволяет использовать вложенные друг в друга элементы. Собственно, сам документ - это один большой элемент с именем "HTML":
<HTML> Содержание документа </HTML>
Сам элемент HTML или гипертекстовый документ состоит из двух частей: заголовка документа (HEAD) и тела документа (BODY):
<HTML>
<HEAD>
Содержание заголовка
</HEAD>
<BODY>
Содержание тела документа
</BODY>
</HTML>
Приведенная выше форма записи определяет классический HTML-документ. Введение в язык HTML фреймов определило еще один шаблон документа:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="40%,*">
<NOFRAMES>
<BODY>
Sorry there are not a frame support in your browser.
</BODY>
</NOFRAMES>
<FRAMESET ROWS="120,*,60">
<FRAME SRC=banner.htm NAME=banner>
<FRAME SRC="www.htm" NAME=content>
<FRAME SRC="bottom.htm" NAME=bottom>
</FRAMESET>
<FRAMESET ROWS="100%">
<FRAME SRC="www_hist.htm" NAME=info>
</FRAMESET>
</FRAMESET>
</HTML>
В данном примере представлен документ, который состоит из трех окон внутри рабочего окна программы просмотра, в каждое из которых загружается обычный документ.
Рассмотрим пример классического документа:
<HTML>
<HEAD>
<TITLE>This is a Baner</TITLE>
</HEAD>
<BODY BACKGROUND=www_wall.jpg VLINK=0000FF LINK=FF0000>
<CENTER>
<TABLE>
<TR><TD><IMG SRC="interne0.jpg"></TD>
<TD CENTER>
<H3>Администрирование Internet</H3>
<I>Центр Информационных Технологий, 1996.</I>
</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Все, что расположено между <HTML> и </HTML> - это документ. Содержание элемента HEAD определяет заголовок документа, который состоит из двух элементов: TITLE и BASE. Вслед за заголовком начинается тело документа, которое содержит в своих первых строках некоторую вводную информацию и содержание документа, оформленное в виде списка.
Каждый документ в системе World Wide Web имеет свое имя, которое указывается в элементе TITLE заголовка документа. Его мы видим в первой строке интерфейса.
Контейнер BODY открывает тело документа. В качестве фона в этом элементе определена картинка back.gif. Эта картинка - "back.gif" - задана частичной формой спецификации URL, которая не задает полного адреса ресурса в сети.
Тег <HTML> является предком всех тегов HTML-документа, его еще часто называют корневым элементом. Вне этого элемента не должно появляться ни одного тега, а сам он может содержать теги <HEAD> и <BODY>, причем каждый только в единственном числе.
Тег <BODY> является контейнерным элементом, между открывающим и закрывающим тегами которого находятся все те элементы, которые мы видим на странице, поэтому его и называют телом HTML-документа.
Блочные элементы создают впереди и после себя перенос строки в начало, а встроенные – отображаются на одной строке.
Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементах HTML. Атрибуты всегда используются в виде пары "имя/значение". Общий формат задания атрибутов имеет вид: <имя_тега имя_атрибута="значение">. Например, тег: <body bgcolor="red">означает, что цвет фона страницы должен быть красным. А тег: <p align="center">означает, что параграф необходимо выровнять по центру страницы отображения браузера. Атрибуты всегда помещаются в начальном теге элемента HTML. Значения атрибутов всегда полезно заключать в кавычки. Наиболее широко используются двойные кавычки, но одиночные кавычки также допустимы. В некоторых редких ситуациях, когда, например, значение атрибута само содержит кавычки, необходимо использовать одиночные кавычки.
Лекция 3.
Основные теги HTML. Теги по назначению:
Документ:
<!DOCTYPE>
Данная конструкция определяет тип документа (DTD) и объявляет, к какой версии HTML относится страница.
<BASE>
Используется для установки базового адреса текущего документа, относительно которого будут высчитываться все относительные адреса (URL) на странице.
<BODY>
Определяет тело документа, в котором находится его отображаемое содержимое.
<HEAD>
Предназначен для содержания элементов с информацией о текущей странице, так называемая «шапка» HTML-документа.
<HTML>
Является корневым элементом HTML-страницы, в котором находятся все теги «шапки» и тела документа.
<LINK>
Используется для создания ссылки связывающей текущую HTML-страницу и какой-либо документ в интернете. Например, внешнюю таблицу стилей (CSS), иконку сайта, ну, или дополнительные шрифты, нужные для правильного отображения страницы.
<META>
Служит для указания информации об HTML-документе, которая помогает браузерам правильно отображать страницы, а поисковым машинам — их индексировать.
<STYLE>
Применяется для размещения внутренних каскадных таблиц стилей (CSS) в HTML-коде страницы.
<TITLE>
Указывает заголовок HTML-документа, который преследует целый ряд абсолютно разных целей. Но он обязательно должен быть осмысленным и соответствовать содержанию страницы.
Звук:
Изображение:
Комментарии:
Объекты:
Поисковые системы:
Лекция 4.
Основные теги HTML. Теги по назначению:
Документы