Скачать презентацию Язык гипертекстовой разметки HTML Основные понятия языка Скачать презентацию Язык гипертекстовой разметки HTML Основные понятия языка

Информатика Html.pptx

  • Количество слайдов: 65

Язык гипертекстовой разметки HTML • Основные понятия языка создания гипертекстовых документов HTML. • Основы Язык гипертекстовой разметки HTML • Основные понятия языка создания гипертекстовых документов HTML. • Основы CSS. http: //htmlbook. ru/html/table

Основные понятия языка создания гипертекстовых документов HTML (Hyper. Text Markup Language) • HTML - Основные понятия языка создания гипертекстовых документов HTML (Hyper. Text Markup Language) • HTML - язык, предназначенный для создания форматированного текста, который насыщен изображениями, звуком, анимацией и ссылками на другие объекты, например, гипертекстовые документы, графические файлы и т. д.

Тег (Tag) • команда HTML Тег (Tag) • команда HTML

Тег состоит из следующих элементов: • левой угловой скобки < • слэша /, который Тег состоит из следующих элементов: • левой угловой скобки < • слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру • имени тега • необязательных атрибутов • правой угловой скобки >

Парный тег • имеет открывающий тег <BODY> • закрывающий тег с тем же именем Парный тег • имеет открывающий тег • закрывающий тег с тем же именем • В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом

Атрибут тега • относящиеся к тегу уточнения Атрибут тега • относящиеся к тегу уточнения

Спецификация атрибута • имя атрибута, например WIDTH; • знак равенства =; • значение атрибута, Спецификация атрибута • имя атрибута, например WIDTH; • знак равенства =; • значение атрибута, которое задается строкой символов, например, "80".

ОБЩИЙ ВИД ДОКУМЕНТА HTML ОБЩИЙ ВИД ДОКУМЕНТА HTML

Это тело страницы" src="https://present5.com/presentation/1/32637018_157961558.pdf-img/32637018_157961558.pdf-9.jpg" alt=" Это заглавие Здесь титул Это тело страницы" /> Это заглавие Здесь титул Это тело страницы Пример

РАЗБИЕНИЕ ТЕКСТА НА СТРОКИ И АБЗАЦЫ РАЗБИЕНИЕ ТЕКСТА НА СТРОКИ И АБЗАЦЫ


Это тело" src="https://present5.com/presentation/1/32637018_157961558.pdf-img/32637018_157961558.pdf-11.jpg" alt=" Это заглавие Здесь титул
Это тело" /> Это заглавие Здесь титул
Это тело страницы 

 Предварительно отформатированный текст
Пример

ЗАГОЛОВКИ ЗАГОЛОВКИ

<BODY> <BR> <H 1>Заголовок</H 1> Это тело страницы <HR> <PRE> Предварительно отформатированный текст </PRE>
Заголовок Это тело страницы 

 Предварительно отформатированный текст
Пример

ВЫРАВНИВАНИЕ ТЕКСТА ВЫРАВНИВАНИЕ ТЕКСТА

<BODY> <BR> <LEFT> Влево </LEFT> <BR> <CENTER> По центру </CENTER> </BODY>
Влево

По центру

ФОРМАТИРОВАНИЕ ШРИФТОВ ФОРМАТИРОВАНИЕ ШРИФТОВ

<BODY> <BR> <B>Пример</B> <EM>работы</EM> <U>с</U> <S>текстом</S> <BR> <TT> Пишущая машинка </TT> <BR> Что-то <SUP>Верхний
Пример работы с текстом
Пишущая машинка
Что-то Верхний индекс
Что-то Нижний индекс

Работа со шрифтами • Семейство шрифта [font-family] • Свойство font-family указывает приоритетный список шрифтов, Работа со шрифтами • Семейство шрифта [font-family] • Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или webстраницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий. • Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. • Family-name Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma". • Generic family Его можно проще описать как группу familynames, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Работа со шрифтами • h 1 {font-family: arial, verdana, sans-serif; } • h 2 Работа со шрифтами • h 1 {font-family: arial, verdana, sans-serif; } • h 2 {font-family: "Times New Roman", serif; }

Стиль шрифта [font-style] • Свойство font-style определяет normal, italic или oblique. • h 1 Стиль шрифта [font-style] • Свойство font-style определяет normal, italic или oblique. • h 1 {font-family: arial, verdana, sans-serif; } h 2 {font-family: "Times New Roman", serif; • font-style: italic; }

РАЗМЕР ШРИФТА РАЗМЕР ШРИФТА

ГАРНИТУРА И ЦВЕТ ШРИФТА ГАРНИТУРА И ЦВЕТ ШРИФТА

<BODY BGCOLOR=BLUE TEXT=YELLOW> <BR> Жёлтый текст на синем фоне </BODY>
Жёлтый текст на синем фоне

<BODY> <BR> <FONT FACE=Arial COLOR=BLU E> Синиий Arial </BODY>
Синиий Arial

Работа с цветом • “#RRGGBB”, где RR, GG, BB соответственно интенсивность красного, зеленого или Работа с цветом • “#RRGGBB”, где RR, GG, BB соответственно интенсивность красного, зеленого или синего цветов. Интенсивность задается в виде двузначного шестнадцатеричного числа (от 00 до FF). • атрибут COLOR=”НАЗВАНИЕ ЦВЕТА”

Стандартные цвета Стандартные цвета

Стандартные цвета Стандартные цвета

СОЗДАНИЕ СПИСКОВ СОЗДАНИЕ СПИСКОВ

<BR> Нумерованный список <OL> <LI>Первый <LI>Второй <LI>. . . </OL> <BR> Маркированный список <UL>
Нумерованный список

  1. Первый
  2. Второй
  3. . . .

Маркированный список
  • Первый
  • Второй
  • . . .

<BR>Список определений <DL> <DT>Первый термин <DD>Первое определение <DT>Второй термин <DD>Второе определение </DL>
Список определений

Первый термин
Первое определение
Второй термин
Второе определение

РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ

РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ

РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ • Тег <img> предназначен для отображения на веб-странице изображений в РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ • Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. • Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. • Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег .

Атрибуты тега img • • • align Определяет как рисунок будет выравниваться по краю Атрибуты тега img • • • align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. alt Альтернативный текст для изображения. border Толщина рамки вокруг изображения. height Высота изображения. hspace Горизонтальный отступ от изображения до окружающего контента. ismap Говорит браузеру, что картинка является серверной картойизображением. L ongdesc Указывает адрес документа, где содержится аннотация к картинке. src Путь к графическому файлу. vspace Вертикальный отступ от изображения до окружающего контента. width Ширина изображения. usemap Ссылка на тег , содержащий координаты для клиентской картыизображения.

Тег IMG

" src="https://present5.com/presentation/1/32637018_157961558.pdf-img/32637018_157961558.pdf-35.jpg" alt="Пример рисунка • • • Тег IMG

" /> Пример рисунка • • • Тег IMG

РАБОТА С ТАБЛИЦАМИ РАБОТА С ТАБЛИЦАМИ

РАБОТА С ТАБЛИЦАМИ. Атрибуты • • • • align Определяет выравнивание таблицы. background Задает РАБОТА С ТАБЛИЦАМИ. Атрибуты • • • • align Определяет выравнивание таблицы. background Задает фоновый рисунок в таблице. bgcolor Цвет фона таблицы. border Толщина рамки в пикселах. bordercolor Цвет рамки. cellpadding Отступ от рамки до содержимого ячейки. cellspacing Расстояние между ячейками. cols Число колонок в таблице. frame Сообщает браузеру, как отображать границы вокруг таблицы. height Высота таблицы. rules Сообщает браузеру, где отображать границы между ячейками. summary Краткое описание таблицы. width Ширина таблицы.

2.