Введение в HTML и CSS Основы HTML Учебный курс
реклама
Учебный курс
Введение в HTML и CSS
Лекция 3
Основы HTML
кандидат технических наук
Павел Брониславович Храмцов
paul@kiae.su
1
HTML: В чем прелесть?
Разработчики HTML смогли решить две задачи:
• предоставить дизайнерам гипертекстовых баз данных
простое средство создания документов;
• сделать это средство достаточно мощным, чтобы отразить
имевшиеся на тот момент представления об интерфейсе
пользователя гипертекстовых баз данных.
2
HTML: возможности
Язык НТМL :
• позволяет размечать электронный документ,
который отображается на экране с
полиграфическим уровнем оформления;
•
результирующий документ может содержать
самые разнообразные метки, иллюстрации,
аудио- и видеофрагменты и так далее.
• В состав языка вошли развитые средства для
создания различных уровней заголовков,
шрифтовых выделений, различные списки,
таблицы и многое другое.
3
HTML: простое решение
Вид HTML-файла:
Обычный текстовый файл. Такой файл можно создать в любом
текстовом редакторе на любой аппаратной платформе в
среде какой угодно операционной системы;
Посети можно передавать в соответствии с RFC 822 текстовые
файлы LATIN1. К моменту разработки HTML существовал
американский стандарт для разработки сетевых
информационных систем — Z39.50, в котором в качестве
единицы хранения указывался простой текстовый файл в
кодировке LATIN1, что соответствует US ASCII.
4
HTML: Версии
HTML 1.0 - Первая версия языка была направлена на
представление языка как такового, где описание его
возможностей носило скорее рекомендательный характер.
HTML 2.0 - Вторая версия языка фиксировала практику
использования его конструкций.
HTML++ - представляла новые возможности, расширяя набор
тегов HTML в сторону отображения научной информации и
таблиц, а также улучшения стиля компоновки изображений и
текста.
HTML 3.2 - смогла упорядочить все нововведения и
согласовать их с существующей практикой. Она позволяет
реализовать использование таблиц, выполнение кодов
языка Java, обтекание графики текстом, а также отображение
верхних и нижних индексов.
5
HTML: Версии
HTML 4.0 - кроме возможностей разметки текста, включения
мультимедиа и формирования гипертекстовых связей, уже
существовавших в предыдущих версиях HTML, в версию
4.01 включены дополнительные средства работы с
мультимедиа, языки программирования, таблицы стилей,
упрощенные средства печати изображений и документов.
HTML 5.0 – сведение вместе разметки, стилей отображения,
программирования и объектной модели документов.
XHTML 1.0 - миграция с HTML 4.0 в формат XML.
6
HTML: Принцип теговой разметки
HTML является описательным языком разметки документов, в
нем используются указатели разметки (теги).
Тег – это конструкция вида:
“<“ нечто “>”
Весь HTML-документ представляет из себя вложенный набор
элементов разметки.
Элемент разметки (контейнер) – это:
• полный элемент разметки;
• неполный элемент разметки;
• Символьный примитив (Character Entity Reference)
7
HTML: Элементы разметки
Полный элемент разметки:
< «имя элемента» [«атрибуты элемента»] >
«содержание элемента»
</ «имя элемента>
Примеры:
<html>
<head>
<title> Это заголовок документа </title>
</head>
<body bgcolor=weat>
<h1>Это заголовок</h1>
</body>
</html>
8
HTML: элементы разметки
Неполный элемент разметки:
< «имя элемента» [«атрибуты элемента»] >
Примеры:
<img src=./001.jpg width=100 height=100>
<p>
<br>
<hr>
9
HTML: элементы разметки
Символьные примитивы:
10
Структура HTML-документа
Условно все HTML документы можно разбить на:
• Простые документы(классические, плоские);
• Документы, состоящие из фреймов;
• Документы, состоящие из слоев.
11
Структура HTML-документа
Простой документ:
<HTML>
<HEAD>
<TITLE>Простейший документ</TITLE>
</HEAD>
<BODY TEXT=#0000ff BGCOLOR=#f0f0f0>
<H1>Пример простого документа</H1>
<HR> Формы HTML-документов
<UL>
<LI>Классическая
<LI>Фреймовая
</UL>
<HR>
</BODY>
</HTML>
12
Структура HTML-документа
Документ с фреймами:
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC=frame1.htm NAME=LEFT>
<FRAME SRC=frame2.htm NAME=RIGHT>
</FRAMESET>
</HTML>
13
Структура HTML-документа
Документ со слоями:
<html>
<head>
<title>Untitled</title>
<style>
#first {position: absolute; top:100; left:100;}
#second {position: absolute; top:110; left:110;}
</style>
</head>
<body>
<p class=first id=first>KUKU</p>
<p class=second id=second>KUKU</p>
</body>
</html>
14
HTML: Элеметы заголовка документа
•
•
•
•
•
•
•
•
HEAD(элемент разметки HEAD)
TITLE(заглавие документа)
BASE(база URL)
ISINDEX(поисковый шаблон)
META(метаинформация)
LINK(общие ссылки)
STYLE(описатели стилей)
SCRIPT(скрипты)
15
HTML: HEAD
<head [profile=meta-URL]>
контейнеры заголовка
</head>
Необязательный атрибут profile указывает на внешний файл метатагов. В качестве значения этого атрибута указывается URL
этого файла.
16
HTML: HEAD: TITLE
<title> название документа </title>
Заголовок не является обязательным контейнером документа.
Его можно опустить. Роботы многих поисковых систем
используют содержание элемента TITLE для создания
поискового образа документа. Слова из TITLE попадают в
индекс поисковой системы. Из этих соображений элемент
TITLE всегда рекомендуется использовать на страницах
Web-узла.
17
HTML: HEAD: BASE
Общепринятым стилем разметки гипертекстовых ссылок
является разметка в частичнозаданных(относительных)
адресах, когда URL задается относительно текущего
местоположения документа.
<a href=../next_level/document.html>...</a>
<base href=http://kuku.ru/start/>
<html>
<head>
<base href=http://kuku.ru/cgi-bin/>
... </head>
<body>
<base href=http://kuku.ru/start/
... </body>
<html>
target=window_name>
18
HTML: HEAD: ISINDEX
Задание шаблона поиска. Формат:
<isindex [prompt=текст] [action=URL]>
19
HTML: HEAD: META
Управление документом:
<meta [name=имя] [http-equiv=имя_HTTP-оператора] content=текст>
<meta http-equiv="Refresh“ content="1; url=refresh.htm">
<meta http-equiv="Content-type" content="text/html; charset=windows1251">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
20
HTML: HEAD: META
Управление документом и его индексирование поисковыми
машинами:
<meta name="description" http-equiv="description"
content="Учебный цикл WEB-инжиниринг. Тема: Заголовок
HTML-Документа. Элемент разметки META. Дается краткое
описание основных способов применения контейнера META в
заголовке HTML-докумета. Рассматривается управление
HTTP-обменом и индексирование документов.">
<meta name="keywords" http-equiv="keywords"
content="учебный курс; web-технология; web; технология;
HTML; язык гипертекстовой разметки; заголовок HTMLдокумента; заголовок; HTML; документ; контейнер; META;
элемент; HEAD; пример; разметка; методика">
21
HTML: HEAD: LINK и STYLE
Общие связи:
<link [rel=тип_отношения] [href=URL] [type=тип_содержания]>
Загрузка стилей из внешнего файла:
<link rel=stylesheet href="../css/css.htm" type="text/css">
Описание стилей документа:
<style type=тип_описания_стилей>
описание стиля/стилей
</style>
22
HTML: HEAD: SCRIPT
Определение внешних объектов, свойств и объектов
страницы до момента разбора тела документа:
<script [type=тип_языка_программирования] [src=URL]>
JavaScript/VBScript-код
</script>
Пример:
<script language="JavaScript" src=script.code>
</script>
23
