Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Сравнительный анализ создания и отображения документов в технологиях разметки НТМL4.01 и XHTML1.0 - основные элементы.

No description
by

krivichev alexandr

on 18 April 2018

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Сравнительный анализ создания и отображения документов в технологиях разметки НТМL4.01 и XHTML1.0 - основные элементы.

Сравнительный анализ создания и отображения документов в технологиях разметки НТМL4.01 и XHTML1.0 - основные элементы.
Элементы управления гипертекстовой страницей
Все элементы логической разметки можно подразделить на два типа: блочные (block) и внутристрочные (inline).

Разница между ними заключается в том, что при визуальном отображении страницы следующие друг за другом блочные элементы располагаются вертикально, а внутристрочные — горизонтально. Иными словами, любой блочный элемент всегда разрывает строку, а внутристрочный — нет.

Абзац является примером блочного элемента — он всегда начинается с новой строки. Любой элемент, который следует за абзацем, будет также перенесен на новую строку
Гиперссылки.
Контекстная гиперссылка.

<!DOCTYPE html PUBLIC “-W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head><title>Тема: Определение структуры веб-страницы при помощи таблиц. </title>
</head>
<body>
<table width="100%" height="100%" border="2">
<tr><th colspan="2" height="15%">&nbsp;</th></tr>
<tr><td width="17%">&nbsp;</td><td>&nbsp;</td></tr>
<tr><th colspan="2" height="70">&nbsp;</th></tr>
</table>
</body>
</html>
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>
<title>Связь листов стилей с HTML-документом</title>

<!-- Подключение внешнего листа стилей style1.css -->
<link rel="stylesheet" href="style1.css" type="text/css" />

<!-- Определение внутреннего листа стилей -->
<style type="text/css">
<!--
/* Подключение внешнего листа стилей style2.css */
@import url(style2.css);

/* Правила внутреннего листа стилей */
body {background-color:red;}
h1 {
background-color: rgb(0, 0, 300); /* Ярко-синий цвет фона для всех заголовков первого уровня */
}
p {background-color:#fff;
color: black;
}
-->
</style>
</head>
<body>
<h1>Ярко-синий цвет фона для всех заголовков первого уровня</h1>
<p style="font-weight: bold">Ярко-красный цвет фона всей страницы(заливка). <br />Белый цвет фона для обзацев.</p>
</body>
</html>
Табличная модель разметки.
<!DOCTYPE HTML PUBLIC "-//W3C//
DTD HTML 4.0 Transitional//EN"
""http://www.w3.org/TR/html4/DTD/html4-transitional.dtd">
<html xmlns-"http://www.w3.org./1999/html">
<head><title>Name, student, ...</title>
<meta http-equiv="refresh" content="8; url=text1.html">
</head>
<body bgcolor="navy" text="white">
<p>
<img src="les.jpg" alt="Зимний пейзаж" width="300" height="200" align="left" border="2" hspace="10" vspace="10"></p>
<h3 align="center" style="text-align: center">Зимний лес</h3>
<p>Отлично выйти утром в зимний лес и пройтись по хрустящему, свежему снегу. Неожиданно птица вспорхнет над головой, осыпая вас пушистым снегом и хвоей. Прекрасно вдохнуть морозного свежего воздуха, и полюбоваться вековыми деревьями.</p>
</body>
</html>
position № 1
position № 2
<!DOCTYPE HTML PUBLIC "-//W3C//
DTD HTML 4.0 Transitional//EN"
""http://www.w3.org/TR/html4/DTD/html4-transitional.dtd">
<html xmlns-"http://www.w3.org./1999/html">
<head><title>ФИО, курс, группа</title>
<meta http-equiv="refresh" content="7; url=text2.html">
</head>
<body bgcolor="orange" text="darkgreen">
<p>
<img src="zakat.jpg" width="300" alt="Закат солнца" height="200" align="right" border="2" hspace="10" vspace="10"></p>
<h3 align="center" style="text-align: center">Вечерний морской пейзаж</h3>
<p>С моего балкона открывается великолепный вид на море. Каждый вечер можно любоваться вечерним морем, наблюдая закат солнца.</p>
</body>
</html>
position № 3
<!DOCTYPE HTML PUBLIC "-//W3C//
DTD HTML 4.0 Transitional//EN"
""http://www.w3.org/TR/html4/DTD/html4-transitional.dtd">
<html xmlns-"http://www.w3.org./1999/html">
<head><title>ФИО, курс, группа</title>
<meta http-equiv="refresh" content="8; url=text.html">
</head>
<body bgcolor="lightgreen" text="white">
<h3 style="text-align: center">Розовый куст</h3>
<p>
<img src="roza.jpg" alt=“Розы" width="100%" height="100%" align="center" border="2" hspace="10" vspace="10"></p>
<p></p>
</body>
</html>
элемент управления: style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head><title>Тема: Определение структуры веб-страницы при помощи таблиц. </title>
<style type="text/css">
<!--
table { width:100%; border: solid 4px #d00; }
th { height: 60px; border: solid 4px #d00; }
td { border: solid 4px #d00; } -->
</style>
</head>
<body>
<table>
<tr><th colspan="2">&nbsp;</th></tr>
<tr><td width="200"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="table_1_2.html">link_1</a></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="table_1_3.html">link_2</a></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="table_1_1.html">link_3</a></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="table_1_1.html">link_4</a></p></td>
<td><img src="img.jpg" width="100%" height="412"></td></tr>
<tr><th colspan="2">&nbsp;</th></tr>
</table>
</body>
</html>
Справка по атрибутам тега: <table>.

align
Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю.

bgcolor
Устанавливает цвет фона таблицы.

border
Устанавливает толщину границы в пикселах вокруг таблицы и отображает границы между ячеек.

cellpadding
Определяет расстояние между границей ячейки и ее содержимым.

cellspacing
Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.
Спарвка по атрибутам тегов: <td> и <th>

align
Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки.

bgcolor
Устанавливает цвет фона ячейки. Используя этот атрибут совместно с атрибутом bgcolor тега <table> можно получить разнообразные цветовые эффекты в таблице.

colspan
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.

height
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

rowspan
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.


valign
Задает выравнивание содержимого ячейки по вертикали. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю.

width
Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.
Example
Пример табличной разметки с использованием управляющего элемента: style
Особенности табличной модели
Одну таблицу допускается помещать внутрь ячейки другой таблицы.
Если размеры таблицы изначально не установлены, то они вычисляются на основе содержимого ячеек.
Если ширина и высота таблицы заданы, то содержимое таблицы подстраивается под указанные размеры.
Исключением является изображение: если указан размер изображения, то ширина и высота таблицы увеличиваются, на этот размер.
Связь между гипер-страницами
в табличной модели, с использованием принципа вложения контента в ячейку отображения
Тег <meta> является универсальным, с его помощью можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое.
Данная строка определяет отображение браузером кодировки UTF-8 (Unicode transformation format, формат преобразования Юникод).
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Обычная страница: изображение с текстом
Табличная модель (table_1.html) с изображением пейзажа в ячейке отображения (вторая ячейка второй строки)
HTML 4.01 Strict
XHTML 1.0 Strict
Связь table_1 по гиперссылке "вставка изображения" с table_1_2. Замена контента в ячейке отображения.
table_1_2
Спасибо за внимание!
Full transcript