Язык HTML представляет собой набор специальных правил.

Все элементы языка можно условно разделить на три группы.

Три варианта установки цвета фона (белого):

Заголовки, создаваемые при помощи элементов Н1...Н6.

Определение порядка обхода элементов таблицы по клавише табуляции

$Max\min$

$Max\min$

594.90K

Category:

internet

HTML как основа создания Web - страниц

1.

ЯЗЫК HTML

2. HyperText Markup Language

HYPERTEXT MARKUP LANGUAGE
(язык разметки гипертекста)
Понятие HTML включает в себя различные способы
оформления гипертекстовых документов, дизайн,
гипертекстовые редакторы, браузеры и многое
другое.
HTML как основа создания Web-страниц имеет
прямое отношение и к новому направлению
изобразительного искусства — Web-дизайну.

3.

Многие называют HTML языком
программирования. Это не совсем верно, так
как в традиционном понимании HTML
является языком разметки электронных
документов, лишь указывающим
программам просмотра HTML-страниц
(браузерам) форму представления описанной
в документе информации.

4. Браузер

БРАУЗЕР
Специальные программы для просмотра веб-
сайтов (электронных документов, созданных по
правилам языка разметки HTML), называются
браузерами.
Основная функция браузера заключается в
интерпретации кода HTML и выводе
визуального результата на экран монитора
пользователя.
Сегодня существует большое количество самых
разнообразных браузеров

5.

Самым первым обозревателем с
графическим интерфейсом
является Mosaic от фирмы NCSA.
Более продвинутым был второй
браузер — Netscape Navigator.

6. Специальные термины

СПЕЦИАЛЬНЫЕ ТЕРМИНЫ
• Элемент (element) — конструкция языка
HTML. Это контейнер, содержащий данные и
позволяющий отформатировать их
определенным образом. Любая
• Web-страница представляет собой набор
элементов. Одна из основных идей гипертекста
— возможность вложения элементов.
• Тег (tag) — начальный или конечный
маркеры элемента. Теги определяют границы
действия элементов и отделяют элементы друг от
друга. В тексте Web-страницы теги заключаются
в угловые скобки, а конечный тег всегда
снабжается косой чертой.

7.

Атрибут (attribute) — параметр или свойство элемента.
Это переменная, которая имеет стандартное имя и
которой может присваиваться определенный набор
значений. Атрибуты располагаются внутри начального
тега и отделяются друг от друга пробелами.
• Гиперссылка — фрагмент текста, который является
указателем на другой файл или объект. Гиперссылки
необходимы для того, чтобы обеспечить возможность
перехода от одного документа к другому.
• Фрейм (frame) — этот термин имеет два значения.
Первое — область документа со своими полосами
прокрутки. Второе значение — одиночное изображение в
сложном (анимационном) графическом файле (по
аналогии с кадром кинофильма). Вместо термина
≪фрейм≫ в специальной литературе и локализованных
программных продуктах иногда можно встретить термин
≪кадр≫ или ≪рамка≫.

8.

Апплет (applet) — программа, передаваемая
на компьютер клиента в виде отдельного
файла и запускаемая при просмотре Webстраницы.
• Скрипт или сценарий (script) — программа,
включенная в состав Web-страницы для
расширения ее возможностей. Броузер Internet
Explorer в определенных ситуациях выводит
сообщение: ≪Разрешить выполнение сценариев
на странице?≫ В этом случае имеются в виду
скрипты.

9.

Расширение (extension) — элемент, не
входящий в спецификацию языка, но
использующийся, обеспечивая возможность
создания нового интересного эффекта
форматирования.
• Программный код или просто код — аналог
понятия ≪текст программы≫.
• Код HTML — гипертекстовый документ в
своем первоначальном виде, когда видны все
элементы и атрибуты.

10.

World Wide Web, WWW или просто Web —
Всемирная паутина, распределенная система
доступа к гипертекстовым документам,
существующая в Интернете.
• Web-страница — документ (файл),
подготовленный в формате гипертекста и
размещенный в World Wide Web.
• Сайт (site) — набор Web-страниц, принадлежащих
одному владельцу.

11.

Код http указывает на то, что программа должна
работать с системой гипертекстовых документов и
использовать соответствующий протокол (HyperText
Transfer Protocol).

12. HTML-файл или HTML-страница

HTML-ФАЙЛ ИЛИ HTMLСТРАНИЦА
— документ, созданный в виде гипертекста
на основе языка HTML. Такие файлы имеют, как
правило, расширения htm или html. В
гипертекстовых редакторах и браузерах эти
файлы имеют общее название ≪документ≫.
HTML является основным языком для создания
документов в WWW.

13. Особенности гипертекста

ОСОБЕННОСТИ ГИПЕРТЕКСТА
Способ создания гипертекста обеспечивает его
абсолютную платформенную независимость.
Одной из основных особенностей HTML является
принцип, по которому не только допускается
вложение одних элементов в другие, но и
декларируется необходимость такого вложения. Это
отличает HTML от многих других языков.

14.

Если рассмотреть исходные тексты
различных Web-страниц, то можно
легко увидеть схожесть их структур.
Это объясняется тем, что документы
создаются по определенным
правилам.
В основу синтаксиса языка HTML
лег стандарт ISO 8879:1986
≪Information processing. Text and
office systems. Standard Generalized
Markup Language (SGML)≫.

15. Язык HTML представляет собой набор специальных правил.

ЯЗЫК HTML ПРЕДСТАВЛЯЕТ СОБОЙ
НАБОР СПЕЦИАЛЬНЫХ ПРАВИЛ.
Каждому правилу соответствует свое
название, свойство и значение.
Например, чтобы задать правило
жирного начертания обыкновенного
текста, необходимо использовать
следующую HTML-конструкцию:
<В>Обыкновенный текст</В>

16.

Как видно из примера, текст, который
должен отображаться жирным
начертанием, обособлен группами
символов <в> и </в>.
Такие группы принято называть
тегами.
Теги бывают одинарными и парными. В
случае с нашим примером тег </в>
является парным, т. к. он закрывает
HTML-конструкцию вместе с символом
"/" (прямой слэш). Иногда теги, которые
необходимо закрывать парным тегом,
называют тегами-контейнерами.

17. Все элементы языка можно условно разделить на три группы.

ВСЕ ЭЛЕМЕНТЫ ЯЗЫКА МОЖНО
УСЛОВНО РАЗДЕЛИТЬ НА ТРИ ГРУППЫ.
К первой относятся элементы, которые создают
структуру гипертекстового документа.
Ко второй группе можно отнести элементы,
создающие эффекты форматирования. Их
использование диктуется конкретными
требованиями к документу, фантазией
разработчика.
К третьей группе относятся элементы, которые
позволяют управлять программными средствами,
установленными и работающими на компьютереклиенте.

18.

Структура любого тега подразумевает
указание самого тега, его параметра и
значения этого параметра.
При этом наименование параметра и
его значения может писаться как
строчными, так и прописными буквами.
Значение параметра ставится в
кавычки.

19.

Параметры и их значения могут либо
вообще отсутствовать у какого-то
определенного тега:
<TABLE WIDTH="100%" BORDER>
В приведенном примере для тега построения
таблицы <TABLE> один параметр (WIDTH)
указан со значением, другой (BORDER)
такового не содержит.

20.

Любой HTML-документ содержит
три основных обязательных
раздела: HTML, HEAD и BODY.
Рассмотрим подробнее каждый из
них.

21. Раздел HTML

РАЗДЕЛ HTML
Раздел HTML описывается тегом-
контейнером <HTMLX/HTML> и дает
браузеру информацию о том, что
документ разработан с помощью языка
разметки HTML.
Сегодня большинство браузеров способно
распознать HTML-документ и без
указания данного тега, тем не менее,
пропускать раздел HTML разработчикам
не рекомендуется.

22. <HTML> </html>

<HTML> </HTML>
- Данный элемент является самым внешним,
так как между его начальным и конечным
тегом должна находиться вся Web-страница.
Он допускает вложение элементов HEAD,
BODY, FRAMESET и других, определяющих
общую структуру Web-страницы.
Конечным тегом </html> заканчиваются все
подобные документы.

23. Раздел HEAD

РАЗДЕЛ HEAD
Раздел HEAD выполняет функцию рабочего
заголовка HTML-документа и является, по
сути, "бойцом невидимого фронта" - - теги,
указываемые внутри этого раздела,
чрезвычайно важны и могут сильно влиять на
внешний вид документа, но сами остаются
незаметными глазу пользователя.
Данному разделу сопоставлен парный тег
<HEADX/HEAD>.
Рассмотрим теги HTML, которые указываются
внутри раздела HEAD.

24. <HEAD> </head>

<HEAD> </HEAD>
Область заголовка Web-страницы. Иными
словами, ее первая часть. Так же, как
предыдущий элемент, HEAD служит только
для формирования общей структуры
документа. Этот элемент может иметь
атрибуты lang и d i r , должен включать
элемент TITLE и допускает вложение
элементов BASE, МЕТА, LINK, OBJECT,
SCRIPT, STYLE.

25. Название документа <TITLE>

НАЗВАНИЕ ДОКУМЕНТА <TITLE>
Парный тег <TITLEX/TITLE> предназначен
для указания имени созданному электронному
документу. Следует помнить, что под именем
документа в данном случае имеется в виду не
файловое наименование, а визуальный
заголовок HTML-страницы.
Указание конструкции <TITLEX/TITLE> не
является обязательным, однако рекомендуется
Эта строка часто используется при
организации поиска в WWW. Поэтому авторы
должны позаботиться о том, чтобы эта строка,
не будучи слишком длинной, достаточно точно
отражала назначение документа.

26. <TITLE> </title>

<TITLE> </TITLE>
Поисковые системы, столкнувшись с
безымянной страницей, занесут ее в
свои базы данных под заголовком
Untitled, что сделает HTML-документ
безликим и похожим на миллионы
других электронных документов,
размещенных в Интернете.

27. Связь между документами <LINK>

СВЯЗЬ МЕЖДУ ДОКУМЕНТАМИ <LINK>
Часто бывает так, что несколько различных
документов структурно или функционально
взаимосвязаны между собой. В этом случае
используется тег <LINK>, который не является
парным, а значит не требует указания
закрывающего тега:
<LINK HREF="styles/main.ess" TYPE="text/css"
REL="stylesheet">
Приведенный пример показывает отношение между
HTML-документом, в разделе HEAD которого
указана данная кодовая конструкция, и внешним
файлом шаблона стилей main.ess.

28.

Элементы <STYLE> и <SCRIPT>
В структуру раздела документа HEAD также
могут входить теги-контейнеры
<STYLEX/STYLE> И <SCRIPTX/SCRIPT>.
первый парный тэг описывает стилевые
шаблоны документа, второй — содержит код
исполняемых сценариев (скриптов).

29. <STYLE> </style>

<STYLE> </STYLE>
Описание стиля некоторых элементов Web-
страницы.
Для каждого элемента существует стилевое
оформление по умолчанию, поэтому
употребление элемента STYLE не
обязательно, но желательно.

30. <МЕТА>

<МЕТА>
Этот элемент содержит служебную
информацию, которая не отражается при
просмотре Web-страницы. Внутри него нет
текста в обычном понимании, поэтому нет и
конечного тега. Каждый элемент МЕТА
содержит два основных атрибута, первый из
которых определяет тип данных, а второй —
содержание.

31. Вот несколько примеров meta-данных:

ВОТ НЕСКОЛЬКО ПРИМЕРОВ
META-ДАННЫХ:
• Дата, обозначающая ≪срок годности≫
документа:
name="Expires" content=«Дата"
• Адрес электронной почты:
name="Reply-to" content="Имя@Адрес"
Имя автора Web-страницы:
name ="Author" content="Имя автора"

32.

Набор ключевых слов для поиска:
name="Keywords" content="cnoBo1, слово2, словоЗ . . "
• Краткое описание содержания Web-страницы:
name="Description" content="Содержание страницы"
• Описание типа и характеристик Web-страницы:
name="Content-Type" content="Описание страницы"
• Указание приложения, в котором была создана
Web-страница:
name="Generator" content=«Название HTMLредактора"

33. <BODY> </body>

<BODY> </BODY>
Этот элемент заключает в себе гипертекст,
который определяет собственно Web-страницу.
Раздел BODY является одним из самых важных
компонентов любого HTML-документа, т. к. в нем
располагается содержательная часть, которая
выводится браузером на экран монитора
пользователя.
Конечный тег этого элемента надо искать в конце
HTML-файла.
Внутри элемента BODY можно использовать все
элементы, предназначенные для дизайна Webстраницы.

34.

Раздел описывается парным тегом
<BODYX/BODY>, внутри которого
размещается большинство
существующих тегов HTML. Гипертекст,
расположенный внутри элемента BODY,
может иметь произвольную структуру.
Тег <BODY> имеет ряд параметров,
которые условно можно разделить на
четыре основные группы (параметры
фона, границ документа, текста и
гиперссылок).

35.

Параметр
Функция
BGCOLOR
Определение цвета фона
BACKGROUND
Указание фонового рисунка
BGPROPERTIES
Изменение свойств фона
(например, фиксирование фонового рисунка)
TOPMARGIN, BOTTOMMARGIN Определение
размера отступов
LEFTMARGIN, RIGHTMARGIN,
MARGINWIDTH, MARGINHEIGHT
TEXT
Определение цвета основного текста
LINK, ALINK, VLINK
Определение цвета
гиперссылок

36.

Один из самых полезных для дизайна — атрибут,
определяющий фон страницы:
background=«Путь к файлу
фона"
Более простое оформление фона сводится к
заданию его цвета:
bgcolor="#RRGGBB"
Цвет фона задается тремя двуразрядными
шестнадцатеричными числами, которые
определяют интенсивность красного, зеленого и
синего цветов соответственно.

37. Параметры фона

ПАРАМЕТРЫ ФОНА
Параметрами фона документа являются BGCOLOR,
BACKGROUND и BGPROPERTIES.
BGCOLOR устанавливает цвет фона, значение
которого может быть введено в символьном
эквиваленте, в шестнадцатеричном коде или в
формате цветовой модели RGB (Red, Green, Blue).
Любое значение RGB может быть преобразовано в
шестнадцатеричный формат(от 00 до FF с
приставкой # (читается "диез")).
Некоторым значениям упомянутых моделей
соответствует символьное название цвета.
Таким образом, один и тот же цвет можно указать
тремя возможными способами.

38. Три варианта установки цвета фона (белого):

ТРИ ВАРИАНТА УСТАНОВКИ ЦВЕТА ФОНА
(БЕЛОГО):
П <BODY BGCOLOR="white">
П <BODY BGCOLOR="#FFFFFF">
П <BODY BGCOLOR="255,255,255">

39.

Параметр BACKGROUND позволяет
накладывать на фон документа графическое
изображение:
<BODY BACKGROUND="images/bg.gif">
Наряду с графическим изображением фона
рекомендуется использовать и параметры
цвета на тот случай, если рисунок не
загрузится (тогда браузер отобразит цвет).

40. Параметры границ документа

ПАРАМЕТРЫ ГРАНИЦ ДОКУМЕНТА
Параметры границ HTML-документа создают
отступы заданного размера от верхнего,
нижнего, левого и правого краев документа.
Этим отступам соответствуют параметры
TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN и RIGHTMARGIN.
Значения для них задаются в пикселах:
<BODY TOPMARGIN="5" BOTTOMMARGIN="5"
LEFTMARGIN="10" RIGHTMARGIM="10">

41. Параметры текста

ПАРАМЕТРЫ ТЕКСТА
Из параметров текста документа реально
применяется только один — TEXT.
Он задает цвет основного текста на странице
(значение параметра может быть введено
аналогично цвету фона документа):
<BODY TEXT="black">

42. Параметры гиперссылок

ПАРАМЕТРЫ ГИПЕРССЫЛОК
Параметры гиперссылок (связей с
внутренними или внешними документами)
определяют цвет активных (ALINK), не
посещенных (LINK) и посещенных (VLINK)
ссылок:
<BODY LINK="#OOOOFF" ALINK="#OOOOFF"
VLINK="blue">

43.

Для задания цвета текста имеется
следующий атрибут:
text="#RRGGBB"
Для задания цвета текста
гиперссылок используется атрибут:
link="#RRGGBB"
Точно так же можно задать цвет для
просмотренных гиперссылок:
vlink="#RRGGBB"
Можно также указать изменение цвета для последней
выбранной пользователем гиперссылки:
alink="#RRGGBB"

44. <!-- Комментарий — >

45. <Hlx/hl>

<HLX/HL>
Элемент заголовка. Существует шесть
уровней заголовков, которые обозначаются
Н1...Н6.
Заголовок уровня 1 самый крупный, а уровень
6 обеспечивает самый маленький заголовок.
Для заголовков можно использовать атрибут,
задающий выравнивание влево, по центру
или вправо:
align="left"
align="center"
align="right"

46. Заголовки, создаваемые при помощи элементов Н1...Н6.

ЗАГОЛОВКИ, СОЗДАВАЕМЫЕ ПРИ
ПОМОЩИ ЭЛЕМЕНТОВ Н1...Н6.
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Шрифт второго заголовка переопределен

47. <HR>

<HR>
Горизонтальная линия (horizontal rule) —
очень часто используемый элемент.
Во-первых, потому что с его помощью очень
удобно делить страницу на части.
Во-вторых, потому что выбор подобных
элементов оформления у автора страницы
очень небольшой. Действительно, в HTML
практически отсутствуют похожие
конструкции, только для горизонтальной
линии почему-то было сделано исключение.

48.

Элемент не имеет конечного тега, но
допускает ряд атрибутов для
выравнивания
влево, по центру, вправо, по ширине:
align="left"
align="center"
align="right"
align="justify"

49.

Можно задавать толщину линии:
Size=толщина в пикселах
Можно управлять длиной линии:
width= длина в пикселах
width=длина в процентах
Можно выбрать цвет:
со1ог="цвет"

50. Правила синтаксиса

ПРАВИЛА СИНТАКСИСА
При использовании каждого элемента важно
знать, какие элементы могут располагаться
внутри него и внутри каких элементов может
находиться он сам. Так, взаимное
расположение элементов HTML, HEAD, TITLE
и BODY должно быть стандартным на любой
странице.
Если же страница представляет собой
документ планировки фреймов, то вместо
элемента BODY используется элемент
FRAMESET.

51.

Существуют группы элементов, которые
используются совместно. К ним относятся
элементы для создания таблиц, списков,
фреймов.
Таблицы и фреймы часто используются для
того, чтобы разместить детали страницы
(рисунки, текст и т. д.) в определенном
порядке. Например, располагая рисунок
внутри ячейки таблицы, можно добиться
определенного его положения.

52.

В приведенном ниже примере есть два
абзаца (первый в зеленой рамке) и
таблица:
<Р style="border: Зрх solid green">Текст
абзаца 1</р>
<TABLE> . . . </table>
<Р> Текст абзаца 2</р>
Таблица в данном случае —
независимый элемент. Ее можно,
например, выравнивать независимо от
остального текста.

53.

Можно использовать другой код:
<Р style="border: Зрх solid green">Текст
абзаца 1
<TABLE> . . . </table>
<Р> Текст
Исчез конечный тег первого абзаца.
Теперь таблица является частью
первого абзаца, и зеленая рамка будет
охватывать таблицу и текст. абзаца
2</р>

54.

Браузеры построены таким образом, что они
≪стараются≫ не реагировать на ошибки разметки
гипертекста. Если страница может быть
отображена, то она выводится на экран без какихлибо предупреждающих сообщений.
Программа интерпретирует ошибочно
расставленные теги определенным образом и
формирует изображение, следуя логике,
заложенной в нее разработчиками. При этом вид
страницы может и не соответствовать замыслу
автора. И только в случае очень серьезных ошибок
или явных противоречий браузер выводит
сообщение о невозможности отобразить страницу.
Косвенным признаком ошибки разметки может
служить появление на странице фрагментов кода
HTML.

55.

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

56.

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

57. Первый HTML-документ

ПЕРВЫЙ HTML-ДОКУМЕНТ
<HTML>
<HEAD>
<TITLE>Мой первый документ</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TOPMARGIN="30"
TEXT="black" LINK="#OOFFOO"
ALINK="#OOFFOO" VLINK="blue">
Это мой первый НТМL-документ!
</BODY>
</HTML>

58.

Код можно написать в блокноте.
Теперь сохраните код под любым
именем, не забыв присвоить файлу
расширение html или htm. Откройте
файл в браузере.
Увидите там текст:
Это мой первый HTML-документ!

59. Изменим цвета фона и шрифта:

ИЗМЕНИМ ЦВЕТА ФОНА И ШРИФТА:
<HTML>
<HEAD>
<TITLE>Мой первый документ</TITLE>
</HEAD>
<BODY BGCOLOR="#00FFFF"
TOPMARGIN="30" TEXT="blue"
LINK="#OOFFOO"
ALINK="#OOFFOO" VLINK="blue">
Это мой первый НТМL-документ
</BODY>
</HTML>

60. Изменим цвета еще раз:

ИЗМЕНИМ ЦВЕТА ЕЩЕ РАЗ:
<HTML>
<HEAD>
<TITLE>Мой первый документ</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF"
TOPMARGIN="30" TEXT="red"
LINK="#00FF00"
ALINK="#OOFFOO" VLINK="blue">
Это мой первый НТМL-документ
</BODY>
</HTML>

61. Таблицы в HTML

ТАБЛИЦЫ В HTML

62. Таблица в одну строку

ТАБЛИЦА В ОДНУ СТРОКУ
<TABLE BORDER=”1”>
<TR>
<TD>  1  </TD>
<TD>  2  </TD>
<TD>  3  </TD>
</TR>
</TABLE>

63. Таблица в несколько строк

ТАБЛИЦА В НЕСКОЛЬКО СТРОК
<TABLE BORDER=”1”>
<TR>
<TD> 1.1 </TD>
<TD> 1.2 </TD>
<TD> 1.3 </TD>
</TR>
<TR>
<TD> 2.1 </TD>
<TD> 2.2 </TD>
<TD> 2.3 </TD>
</TR>
<TR>
<TD> 3.1 </TD>
<TD> 3.2 </TD>
<TD> 3.3 </TD>
</TR>
</TABLE>

64. Шапка таблицы

ШАПКА ТАБЛИЦЫ
<TABLE BORDER=”1”>
<TR>
<TH>Фамилия</TH>
<TH>Имя</TH>
<TH>Отчество</TH>
</TR>
<TR>
<TD>Барышников</TD>
<TD>Сергей</TD>
<TD>Николаевич</TD>
</TR>
<TR>
<TD>Павлов</TD>
<TD>Илья</TD>
<TD>Владимирович</TD>
</TR>
<TR>
<TD>Шутов</TD>
<TD>Михаил</TD>
<TD>Михайлович</TD>
</TR>
</TABLE>

65. Заголовок таблицы

ЗАГОЛОВОК ТАБЛИЦЫ
<TABLE BORDER=”1”>
<CAPTION
ALIGN=TOP>Список
сотрудников</CAPTION>
.
.
.
</TABLE>

66. Выравнивание текста в ячейках

ВЫРАВНИВАНИЕ ТЕКСТА В ЯЧЕЙКАХ
<TABLE BORDER=”1” WIDTH=100%>
<TR VALIGN=TOP >
<TD>
<BR><BR><BR>
</TD>
<TD ALIGN=LEFT>Left-Top</TD>
<TD ALIGN=CENTER>Center-Top</TD>
<TD ALIGN=RIGHT>Right-Top</TD>
</TR>
<TR VALIGN=MIDDLE>
<TD>
<BR><BR><BR>
</TD>
<TD ALIGN=LEFT>Left-Middle</TD>
<TD ALIGN=CENTER>Center-Middle</TD>
<TD ALIGN=RIGHT>Right-Middle</TD>
</TR>
<TR VALIGN=BOTTOM>
<TD>
<BR><BR><BR>
</TD>
<TD ALIGN=LEFT>Left-Bottom</TD>
<TD ALIGN=CENTER>Center-Bottom</TD>
<TD ALIGN=RIGHT>Right-Bottom</TD>
</TR>
</TABLE>

67. Объединение ячеек

ОБЪЕДИНЕНИЕ ЯЧЕЕК
<TABLE BORDER=1
WIDTH=100%>
<TR>
<TD COLSPAN=2
ALIGN=center>...</TD>
</TR>
<TR>
<TD ALIGN=center>...</TD>
<TD ALIGN=center>...</TD>
</TR>
<TR>
<TD ALIGN=center>...</TD>
<TD ALIGN=center>...</TD>
</TR>
</TABLE>

68. Объединение ячеек

ОБЪЕДИНЕНИЕ ЯЧЕЕК
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD ALIGN=center>...</TD>
<TD ALIGN=center>...</TD>
<TD ALIGN=center>...</TD>
</TR>
<TR>
<TD ROWSPAN=2
ALIGN=center>...</TD>
<TD ALIGN=center>...</TD>
<TD ALIGN=center>...</TD>
</TR>
<TR>
<TD ALIGN=center>...</TD>
<TD ALIGN=center>...</TD>
</TR>
</TABLE>

69. Объединение ячеек

ОБЪЕДИНЕНИЕ ЯЧЕЕК
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD COLSPAN=5 ALIGN=center>Стоимость
размещения</TD>
</TR>
<TR>
<TD ROWSPAN=2 COLSPAN=2 ALIGN=center>Номер</TD>
<TD COLSPAN=3 ALIGN=center>Период</TD>
</TR>
<TR>
<TD ALIGN=center>01.01-31.01</TD>
<TD ALIGN=center>01.02-28.02</TD>
<TD ALIGN=center>01.03-31.03</TD>
</TR>
<TR>
<TD ROWSPAN=2 ALIGN=center>Standart</TD>
<TD ALIGN=center>Одноместный</TD>
<TD ALIGN=center>100$</TD>
<TD ALIGN=center>90$</TD>
<TD ALIGN=center>150$</TD>
</TR>
<TR>
<TD ALIGN=center>Двухместный</TD>
<TD ALIGN=center>150$</TD>
<TD ALIGN=center>140$</TD>
<TD ALIGN=center>200$</TD>
</TR>
<TR>
<TD ROWSPAN=2 ALIGN=center>Lux</TD>
<TD ALIGN=center>Одноместный</TD>
<TD ALIGN=center>200$</TD>
<TD ALIGN=center>190$</TD>
<TD ALIGN=center>250$</TD>
</TR>
<TR>
<TD ALIGN=center>Двухместный</TD>
<TD ALIGN=center>250$</TD>
<TD ALIGN=center>240$</TD>
<TD ALIGN=center>300$</TD>
</TR>
</TABLE>

70. Изменение цвета в таблице

ИЗМЕНЕНИЕ ЦВЕТА В ТАБЛИЦЕ
Пример: <TABLE BGCOLOR=olive>
<TD BGCOLOR=”#CC22BB”>
Пример: <TABLE BACKGROUND=”image.jpg”>

71. Изменение размера таблицы

ИЗМЕНЕНИЕ РАЗМЕРА ТАБЛИЦЫ
Язык HTML позволяет создавать таблицу как
фиксированной ширины, так и
пропорционально размеру окна браузера.
Пример: <TABLE WIDTH=75%>
<TABLE WIDTH=600>

72. Изменение размера таблицы

ИЗМЕНЕНИЕ РАЗМЕРА ТАБЛИЦЫ
<TABLE BORDER=1 WIDTH=90%>
<TR>
<TD WIDTH=25%><br><br><br></TD>
<TD WIDTH=50%><br><br><br></TD>
<TD WIDTH=25%><br><br><br></TD>
</TR>
</TABLE>

73. Изменение размера таблицы

ИЗМЕНЕНИЕ РАЗМЕРА ТАБЛИЦЫ
Изменение ширины разрыва между соседними ячейками.
Пример: <TABLE CELLSPACING=10>
Установка отступа текста от границы ячейки (клеточный
отступ – cell padding).
Пример: <TABLE CELLPADDING=5>

74. Группировка элементов таблицы

ГРУППИРОВКА ЭЛЕМЕНТОВ ТАБЛИЦЫ
Теги:
<THEAD>
<TFOOT>
<TBODY>
…</THEAD> (один)
… </TFOOT> (один)
… </TBODY> (м.б. несколько)

75. Определение порядка обхода элементов таблицы по клавише табуляции

ОПРЕДЕЛЕНИЕ ПОРЯДКА ОБХОДА
ЭЛЕМЕНТОВ ТАБЛИЦЫ ПО КЛАВИШЕ
ТАБУЛЯЦИИ
Атрибут tabindex устанавливает порядок
получения фокуса при переходе между
элементами с помощью клавиши Tab.
tabindex="число"

76. Типы элементов

ТИПЫ ЭЛЕМЕНТОВ
-
блочные (block);
-
встроенные (inline);
-
специальные типы для табличных элементов;
-
специальные типы для списков;
-
др.
между типами элементов можно переключаться с помощью
display
76

77. Типы элементов

ТИПЫ ЭЛЕМЕНТОВ
Блочные элементы
начинаются с новой строки;
могут накладываться друг на друга;
занимают всю доступную ширину;
могут быть вложены друг в друга;
могут обёртывать строчные элементы;
...
77

78. Типы элементов

ТИПЫ ЭЛЕМЕНТОВ
Строчные элементы
не начинаются с новой строки;
они попадают в обычный поток документа, выстраиваются друг
за другом;
их ширина основана на их содержимом;
могут быть вложены друг в друга;
не могут обёртывать блочные элементы;
...
78

79. Типы элементов

ТИПЫ ЭЛЕМЕНТОВ
В большинстве случаев CSS работает с линейными и блочными
элементами одинаково.
Исключение составляют такие свойства как отступы и поля –
для линейных элементов браузеры обрабатывают эти свойства
иначе, чем для блочных
Обычно поля или отступы слева\справа работают в обычном
режиме, но не вертикальные.
79

80. Блочные элементы

БЛОЧНЫЕ ЭЛЕМЕНТЫ
Блочным называется элемент, который отображается на вебстранице в виде прямоугольника.
Такой элемент занимает всю доступную ширину (по отношению к
элементу-контейнеру),
высота
элемента
определяется
его
содержимым, и он всегда начинается с новой строки.
К блочным элементам относятся контейнеры <div>, <h1>, <p> и
др.
80

81. Пример

ПРИМЕР
Что отобразится в браузере?
81

82. Результат

РЕЗУЛЬТАТ
первый блок <div>
второй блок <div>
Нужно ли в нашем случае задавать свойства, прописанные в
стилях в строках 4 и 5?
82

83. display

DISPLAY
Свойство
display
позволяет
определить,
как
именно
отображаются элементы — как блочные или строчные или как-то
ещё.
Каждый элемент содержит значение свойства display по
умолчанию, но как и с любым другим значением свойств, это
значение может быть переписано.
Наиболее распространённые из значений это block, inline, inlineblock и none.
83

84. display

DISPLAY
С помощью свойства display можно менять тип html-элементов.
Пример,
span {
display: inline-block;
}
Линейный элемент будет восприниматься как блочный, но по
своей сути останется линейным: т.е. сработают вертикальные
отступы\поля к нему будут применимы, но по своей позиции он
останется в элементе-контейнере не разбивая его
84

85. Пример

ПРИМЕР
<p>
начало текста
<b>выделенный текст</b>
продолжение текста
</p>
85

86. Пример

ПРИМЕР
86

87. Высота и ширина

ВЫСОТА И ШИРИНА
Свойства height и width назначают высоту и ширину области
стилизуемого элемента
ВАЖНО:
Данные
свойства
содержимого
устанавливают
стилизуемого
высоту\ширину
элемента
–
области
пространства,
в
которое заключены текст, изображения и другие вложенные теги
Фактическая высота\ширина элемента состоит из ширины
полей, границ, отступов и явно указанного значения ширины
содержимого
87

88. Высота и ширина

ВЫСОТА И ШИРИНА
Общее правило по регулированию высоты элементов на
веб-странице утверждает:
НЕ ДЕЛАЕМ ЭТОГО!
Высота
элементов-контейнеров
должна
регулироваться
(в
большинстве случаев) объемом контента – т.е. при добавлении
объема
содержимого
высота
контейнера
увеличивается,
при
уменьшении объема содержимого контейнера высота уменьшается
88

89. Ширина

ШИРИНА
Ширина блочных элементов
1.
По умолчанию 100% от родителя
2.
Складывается из ширины самого блока (width), отступов
(margin), полей (padding) и границ (border)
89

90. Ширина

ШИРИНА
div
{
width: 300px;
margin: 7px;
padding: 10px;
border: 4px solid black;
background-color: #fc0456;
}
Какая ширина у элемента div?
90

91. Ширина

ШИРИНА
342px
91

92. Ширина

ШИРИНА
342px
92

93. Высота

ВЫСОТА
Высота блочного элемента:
1.
Если высота слоя не установлена явно, то она вычисляется
автоматически исходя из объема содержимого.
2.
Складывается из высоты самого блока (height), отступов
(margin), полей (padding) и границ (border)
3.
Если высота указана явно, а содержимое не помещается, ваша
верстка начнет «ехать». Содержимое будет наложено поверх
слоя.
93

94. Высота

ВЫСОТА
div
{
height: 337px;
margin: 17px;
padding: 11px;
border: 14px solid black;
background-color: #fc0456;
}
Какая высота у элемента div?
94

95. Высота

ВЫСОТА
421px
95

96. Цвет фона

ЦВЕТ ФОНА
Цвет фона блочного элемента:
1.
Свойство background
2.
Фоном при этом заливается область, которая определяется
значениями width, height и padding
3.
margin не принимает участия в формировании цветной
области (!по отношению к текущему элементу).
96

97. Переопределение ширины

ПЕРЕОПРЕДЕЛЕНИЕ ШИРИНЫ
В
связи
с
тем,
что
фактическая
высота\ширина
объекта
определяется суммированием различных свойств (а в некоторых
случаях это все усложняется при плавающей разметке) есть
свойство,
которое
изменяет
порядок
вычисления
браузером экранной ширины (высоты) элементов –
box-sizing
97

98. Переопределение ширины

ПЕРЕОПРЕДЕЛЕНИЕ ШИРИНЫ
Значение
content-box устанавливает ранее рассмотренный способ
padding-box сообщает браузеру, что отступы идут как часть
значения ширины\высоты (общая ширина = ширина контента +
отступ слева + отступ справа)
border-box сообщает браузеру, что и отступы и рамки идут в
суммарное значение ширины\высоты
98

99. Overflow

OVERFLOW
Когда содержимое стилизуемого тега имеет размеры больше
определенных свойствами width\height, зачастую содержимое
отображается за пределами границ элемента, накладываясь на
него
В этой ситуации браузер использует свойство overflow, в
качестве значений можно указать одно из четырех ключевых
слов, которые определяют, как должно отображаться содержимое,
не вместившееся в пределы блочного элемента
99

100. Overflow

OVERFLOW
Visible – значение, принимаемое браузером по умолчанию
Scroll – добавляет полосы прокрутки для блока-контейнера (даже
если
содержимое
вместилось
при
таком
значении
полосы
прокрутки все равно будут присутствовать)
Auto – полосы прокрутки добавятся только при необходимости
Hidden – скрывает любое содержимое, выходящее за пределы
блочного
разметок)
элемента
(используется
при
создании
плавающих
100

101. Max\min

MAX\MIN
Max-width – задает максимальную ширину элемента
удобный вариант для адаптивного дизайна
По аналогии работают: max-height, min-width, min-height
101

102. Свойство float

СВОЙСТВО FLOAT
Линейное (или последовательное) расположение тегов-блоков
удобно
и
логично,
но
слишком
ограничивает
возможности
дизайна.
Возникает
необходимость
позиционировать
теги-блоки
таким
образом, чтобы нарушить линейное следование.
102

103. Свойство float

СВОЙСТВО FLOAT
Свойство float
- еще один способ управлять расположением элементов – сделать
их плавающими
Определяет, по какой стороне будет выравниваться элемент, при
этом остальные элементы будут обтекать его с других сторон.
Когда значение свойства float равно none, элемент выводится на
странице как обычно, при этом допускается, что одна строка
обтекающего текста может быть на той же линии, что и сам
элемент.
103

104. Свойство float

СВОЙСТВО FLOAT
Свойство float
Left Выравнивает элемент по левому краю, а все остальные
элементы, вроде текста, обтекают его по правой стороне.
Right Выравнивает элемент по правому краю, а все остальные
элементы обтекают его по левой стороне.
None Обтекание элемента не задается.
Inherit Наследует значение родителя.
104

105. Свойство float

СВОЙСТВО FLOAT
Свойство float перемещает любой элемент в нужное место,
выравнивая его по левому или правому краю веб-страницы (или
другого тега-контейнера);
остальной контент, находящийся ниже (по структуре html-
верстки) позиционируемого плавающего элемента, смещается
вверх и плавно обтекает сам плавающий элемент
105

106. Пример

ПРИМЕР
.layer1 {
float: left; /* Обтекание по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin-right: 20px; /* Отступ справа */
width: 40%; /* Ширина блока */
}
106

107. Пример

ПРИМЕР
107

108. Float

FLOAT
Если подряд идут несколько плавающих элементов (с одним
ориентированием, например, left)
- они будут выравниваться в
строку один за другим, пока не закончится место и тогда
следующий элемент сместиться ниже, на новую строку
108

109. Пример

ПРИМЕР
div {
width: 200px;
float: left;
height: 200px;
margin: 10px;}
<div class="first">First</div>
<div class ="second">Second</div>
.first { background: #fccd95;
border: 1px solid
#f68a0a;}
У плавающего объекта
.second {background: #f59379;
обязательно
border: 1px solid
должна быть
#d84119;}
задана ширина
109

110. Пример

ПРИМЕР
Создайте
пример,
где
блоки
из
пяти
компонентов
будут
располагаться равномерно по ширине страницы
110

111. Пример

ПРИМЕР
// задайте для каждого блока свой фоновый цвет, чтобы увидеть
их;
// увеличьте высоту блоков, оставляя возможность
111
подстраиваться под объем контента

112. Float

FLOAT
ВАЖНО:
Порядок написания html-кода оказывает большое влияние на
отображение плавающих элементов.
Обтекать плавающий элемент будет то содержимое, которое идет
после тега, которому задали свойство float.
112

113. Float

FLOAT
ВАЖНО:
Фон и границы не переносятся таким же образом – они
располагаются под плавающим элементом;
чтобы исключить
такой вариант можно:
использовать overflow: hidden;
добавление границ вокруг плавающего элемента цвета фона,
закрывающую необходимую часть;
использовать margin;
...
113

114. Clear

CLEAR
Есть случаи, когда необходимо отобразить содержимое тега таким
образом,
чтобы
на
него
не
влияла
способность
обтекания
плавающего элемента.
Если необходимо, чтобы обычный элемент страницы не обтекал
плавающий
элемент,
а
находился
под
ним,
то
следует
воспользоваться параметром clear, который может принимать
значения left, right, both, none
114

115. Clear

CLEAR
left
–
стилизуемый
элемент
смещается
вниз
относительно
плавающего с установленным левым обтеканием, но правое
обтекание остается в силе
right
-
стилизуемый
элемент
смещается
вниз
относительно
плавающего с установленным правым обтеканием, но левое
обтекание остается в силе
both – вызывает перемещение стилизуемого элемента вниз
относительно плавающего с установленными левым и правым
обтеканиями
none – сохраняется стандартная форма обтекания
115

116. Float

FLOAT
ИТОГО ПРИ РАБОТЕ С ПЛАВАЮЩИМИ ЭЛЕМЕНТАМИ:
ширина для плавающего задается всегда;
плавающий в коде идет первым;
стилевые компоненты (фон, рамка) ведут себя иначе, так как
контентом не являются, и не обтекают плавающие объекты;
отмену обтекания стоит задавать для первого объекта по коду,
который не должен обтекать плавающий элемент;
...
116

117. Пример

ПРИМЕР
117

118. Пример

ПРИМЕР
!? Что
можно
организовать
иначе
118

119. Пример

ПРИМЕР
!? Что
можно
организовать
иначе
119

120. Пример

ПРИМЕР
!? Для чего свойство в строке 5
Зачем оно для двух блоков
120

121. Пример

ПРИМЕР
!? Опишите действия
приведенных свойств
121

122. Пример

ПРИМЕР
122

123. Пример

ПРИМЕР
!? Опишите действия
приведенных свойств
123

124. Пример

ПРИМЕР
124

125. Пример

ПРИМЕР
!? При увеличении/уменьшении объема контента основного блока
отображение структуры не «распалось», а перестроилось
125

126. Создание двух колонок

СОЗДАНИЕ ДВУХ КОЛОНОК
Создание двух колонок, CSS
#leftcol { /* Левая колонка */
float: left; /* Обтекание справа */
width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 220px; /* Отступ слева */
}
// поясните код и приведите другие способы задания двух колонок
126

127. Создание трех колонок

СОЗДАНИЕ ТРЕХ КОЛОНОК
Создание трех колонок, CSS
#leftcol, #centercol { /* Левая колонка */
float: left; /* Обтекание справа */
width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 420px; /* Отступ слева */
}
// предложите еще варианты
127

128. Примеры компоновки сайтов

ПРИМЕРЫ КОМПОНОВКИ САЙТОВ
128

129. Примеры компоновки сайтов

ПРИМЕРЫ КОМПОНОВКИ САЙТОВ
129

130. Примеры компоновки сайтов

ПРИМЕРЫ КОМПОНОВКИ САЙТОВ
130

131. Блочная верстка

БЛОЧНАЯ ВЕРСТКА
С развитием CSS появились способы вёрстки без использования
таблиц. Таблицы обладают рядом особенностей, из-за которых
порой невозможно добиться желаемого эффекта. Особенно это
было актуально ранее, когда браузеры были менее совершенными
в применении современных стандартов. В таких случаях для
оформления лучше подходят альтернативные приёмы, которые и
были рассмотрены выше.
131

132. Блочная верстка

БЛОЧНАЯ ВЕРСТКА
ВАЖНО:
в соответствии с концепцией блочной модели, каждый элемент
на странице представляет собой прямоугольный блок и может
иметь ширину, высоту, поля, границы и отступы.
132

English Русский Rules