Разделы презентаций


Основы языка HTML

Содержание

Средства создания HTML-документовПростейшие текстовые редакторы – Блокнот, Far Editor, Norton EditorОфисные программы, входящие в состав Microsoft Office (Word, PowerPoint) Специализированные HTML-редакторы – Homesite, Hotdog Professional, CoffeeCup HTML Editor ++ Редакторы визуального

Слайды и текст этой презентации

Слайд 1Основы языка HTML

Основы языка HTML

Слайд 2Средства создания HTML-документов
Простейшие текстовые редакторы – Блокнот, Far Editor, Norton

Editor
Офисные программы, входящие в состав Microsoft Office (Word, PowerPoint)
Специализированные

HTML-редакторы – Homesite, Hotdog Professional, CoffeeCup HTML Editor ++
Редакторы визуального конструирования –Microsoft FrontPage, Adobe (Macromedia) Dreamweaver и др.
Средства создания HTML-документовПростейшие текстовые редакторы – Блокнот, Far Editor, Norton EditorОфисные программы, входящие в состав Microsoft Office

Слайд 3Общие сведения
HTML (HyperText Markup Language) – язык гипертекстовой разметки
HTML-документ включает:
Текстовое

содержимое страницы
Структура и формат страницы
Мультимедийные объекты
Гиперссылки



Общие сведенияHTML (HyperText Markup Language) – язык гипертекстовой разметкиHTML-документ включает:Текстовое содержимое страницыСтруктура и формат страницыМультимедийные объектыГиперссылки

Слайд 4Синтаксис языка HTML
Объекты языка HTML:
Текст
Теги (управляющие конструкции)



Синтаксис языка HTMLОбъекты языка HTML:ТекстТеги (управляющие конструкции)

Слайд 5Синтаксис языка HTML
Парный тег

фрагмент текста


Непарный тег
фрагмент

текста

Синтаксис языка HTMLПарный тег   фрагмент текстаНепарный тег фрагмент текста

Слайд 6Синтаксис языка HTML (пример тега)
– тег физического форматирования текста, обозначает

полужирное начертание
Этот текст набран
полужирным шрифтом
Код HTML
Этот текст набран полужирным

шрифтом

Отображение

Синтаксис языка HTML (пример тега) – тег физического форматирования текста, обозначает полужирное начертаниеЭтот текст набран полужирным шрифтомКод

Слайд 7Синтаксис языка HTML
Вложение тегов
Этот текст набран полужирным курсивом
Код

HTML
Этот текст набран полужирным курсивом
Отображение

Синтаксис языка HTMLВложение теговЭтот текст набран полужирным курсивом Код HTMLЭтот текст набран полужирным курсивомОтображение

Слайд 8Синтаксис языка HTML
Атрибуты (параметры) уточняют действие тегов
Каждый тег имеет свой

набор допустимых атрибутов
Для парных тегов атрибуты указывают в открывающем теге
Можно

использовать несколько атрибутов, разделенных пробелами
Атрибуту присваивается заданное или произвольное значение
Атрибуты записываются в виде пары: имя=значение, причем нечисловое значение заключается в кавычки

Синтаксис языка HTMLАтрибуты (параметры) уточняют действие теговКаждый тег имеет свой набор допустимых атрибутовДля парных тегов атрибуты указывают

Слайд 9Синтаксис языка HTML
Необходимо соблюдать порядок вложенности тегов

полужирный курсив
полужирный курсив
В

большинстве случаев атрибуты необязательны
Значения атрибутов необязательно заключать в кавычки, если

они содержат только буквы, цифры, точки и дефисы

Синтаксис языка HTMLНеобходимо соблюдать порядок вложенности теговполужирный курсивполужирный курсив В большинстве случаев атрибуты необязательныЗначения атрибутов необязательно заключать

Слайд 10Синтаксис языка HTML
Регистр имен тегов и атрибутов не имеет значения

= = =

Наличие и количество пробелов между

тегом и текстом или тегом и тегом не имеет значения
полужирный курсив
полужирный курсив
полужирный курсив
Синтаксис языка HTMLРегистр имен тегов и атрибутов не имеет значения = = = Наличие и количество пробелов

Слайд 11Синтаксис языка HTML
!
Интерпретирует код HTML программа-браузер
Браузеры не проверяют правильность написания

кода HTML
Неправильно записанный код браузером игнорируется

Синтаксис языка HTML!Интерпретирует код HTML программа-браузерБраузеры не проверяют правильность написания кода HTMLНеправильно записанный код браузером игнорируется

Слайд 12Структура документа HTML

Структура документа HTML

Слайд 13Служебная часть документа HTML
Тег определяет текст заголовка Web-страницы
В отсутствие

этого тега в строке заголовка выводится (в зависимости от браузера):
No

title
Адрес загруженной страницы
Ничего

Сайт школы

Служебная часть  документа HTMLТег определяет текст заголовка Web-страницыВ отсутствие этого тега в строке заголовка выводится (в

Слайд 14Элементы форматирования на уровне блоков
Заголовки – теги …, …, …, …

Атрибут

– ALIGN (выравнивание)
={LEFT, RIGHT, CENTER, JUSTIFY}

Заголовок важного раздела


Текст важного раздела

Код HTML

Отображение

Заголовок


Заголовок


Заголовок


Заголовок


Заголовок

Заголовок

Элементы форматирования на уровне блоковЗаголовки – теги …, …, …, …Атрибут – ALIGN (выравнивание)={LEFT, RIGHT, CENTER, JUSTIFY}

Слайд 15Элементы форматирования на уровне блоков
Новый абзац – тег
Атрибут – ALIGN

(выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY}



Первый абзац

Второй абзац

Код HTML
Отображение

Элементы форматирования на уровне блоковНовый абзац – тег Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY}Первый абзацВторой

Слайд 16Элементы форматирования на уровне блоков
Разрыв строки – тег


Текст
можно разбить на


cтроки произвольно


Текст

можно разбить
на

cтроки
произвольно

Код HTML
Отображение

Элементы форматирования на уровне блоковРазрыв строки – тег Текстможно разбить на cтроки произвольноТекст можно разбитьна cтрокипроизвольноКод HTMLОтображение

Слайд 17Элементы форматирования на уровне блоков
Предварительно отформатированный текст – тег …


Текст
разбит
на

строки

Код HTML
Отображение
Текст
разбит
на

строки
Элементы форматирования на уровне блоковПредварительно отформатированный текст – тег …Текст разбитна

Слайд 18Физическое форматирование текста
Теги физического форматирования текста:
Полужирный - …
Курсив - …
Подчеркнутый

- …
Зачеркнутый - … или …
Верхний индекс - …
Нижний индекс

-


Физическое форматирование текстаТеги физического форматирования текста:Полужирный - …Курсив - …Подчеркнутый - …Зачеркнутый - … или …Верхний индекс

Слайд 19Элементы форматирования на уровне блоков
Горизонтальная линия – непарный тег

Атрибуты:
ALIGN (выравнивание)={LEFT, RIGHT, CENTER}
WIDTH (ширина)
SIZE (толщина)
COLOR (цвет)

Часть1

Часть2
Код HTML
Отображение

Элементы форматирования на уровне блоковГоризонтальная линия – непарный тег  Атрибуты:ALIGN (выравнивание)={LEFT, RIGHT, CENTER}WIDTH (ширина)SIZE (толщина)COLOR (цвет)Часть1Часть2Код

Слайд 20Физическое форматирование текста
Определение параметров фрагмента текста – тег …
Атрибуты:
COLOR -

цвет текста
FACE  гарнитура шрифта
SIZE  размер шрифта

Физическое форматирование текстаОпределение параметров фрагмента текста – тег …Атрибуты:COLOR - цвет текстаFACE  гарнитура шрифтаSIZE  размер

Слайд 21Физическое форматирование текста
Атрибут SIZE тега
SIZE = {1,2,3,4,5,6,7}
По умолчанию SIZE=3
Для

MS Internet Explorer

Физическое форматирование текстаАтрибут SIZE тега SIZE = {1,2,3,4,5,6,7}По умолчанию SIZE=3Для MS Internet Explorer

Слайд 22Физическое форматирование текста
По умолчанию размер шрифта 3.

Размер увеличен

на 3 ед.

Размер - 2 единицы.

Код HTML
Отображение

Физическое форматирование текстаПо умолчанию размер шрифта 3. Размер увеличен на 3 ед. Размер - 2 единицы.Код HTMLОтображение

Слайд 23Физическое форматирование текста
Атрибут FACE тега



Это -

шрифт Symbol: abcd
Код HTML
Отображение

Физическое форматирование текстаАтрибут FACE тега Это - шрифт Symbol: abcd Код HTMLОтображение

Слайд 24Атрибуты тега
BGCOLOR – цвет фона документа
BACKGROUND – фоновое изображение
TEXT

– цвет текста
LINK – цвет непросмотренной ссылки
VLINK – цвет просмотренной

ссылки
ALINK – цвет просматриваемой ссылки
Атрибуты тега BGCOLOR – цвет фона документаBACKGROUND – фоновое изображениеTEXT – цвет текстаLINK – цвет непросмотренной ссылкиVLINK

Слайд 25Цвет в HTML
Способы указания цвета:
Название цвета
Схема RGB

Цвет в HTMLСпособы указания цвета:Название цветаСхема RGB

Слайд 26Названия цветов HTML

Названия цветов HTML

Слайд 27Схема RGB
RGB - Red-Green-Blue,
Красный-Зеленый-Синий

Интенсивность компоненты записывается двузначным шестнадцатеричным числом.
Шестнадцатеричные

цифры:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

A, B, C, D, E, F
Схема RGBRGB - Red-Green-Blue, Красный-Зеленый-СинийИнтенсивность компоненты записывается двузначным шестнадцатеричным числом.Шестнадцатеричные цифры:0, 1, 2, 3, 4, 5, 6,

Слайд 28Атрибуты тега

Атрибуты тега

Слайд 29Бегущая строка
Атрибут direction – указывает направление движения:
Direction= right - слева

направо
Direction= left – справа налево

Внимание!

текст
Бегущая строкаАтрибут direction – указывает направление движения:Direction= right - слева направоDirection= left – справа налево Внимание! текст

Слайд 30Графика в HTML
Вставка графического изображения: тег (непарный)
Обязательный атрибут SRC

указывает адрес графического файла

Графика в HTMLВставка графического изображения: тег (непарный)Обязательный атрибут SRC указывает адрес графического файла

Слайд 31Графика
Атрибуты тега
ALIGN - выравнивание текста относительно изображения
WIDTH и HEIGHT

– ширина и высота в пикселях или процентах от размеров

экрана
BORDER – толщина рамки вокруг изображения в пикселях
HSPACE и VSPACE – пустые поля вокруг изображения в пикселях
ALT – альтернативный текст


ГрафикаАтрибуты тега ALIGN - выравнивание текста относительно изображенияWIDTH и HEIGHT – ширина и высота в пикселях или

Слайд 32Графика
Альтернативный текст

MSIE отображает графику
MSIE не отображает графику

ГрафикаАльтернативный текстMSIE отображает графикуMSIE не отображает графику

Слайд 33Гиперссылки
Указатель ссылки – тег …
Адресная часть ссылки – атрибут HREF

тега
Хотите ознакомиться с моей
биографией?
Зайдите на сайт
Гимназия 22

г.Минска

Пишите мне!

ГиперссылкиУказатель ссылки – тег …Адресная часть ссылки – атрибут HREF тега Хотите ознакомиться с моейбиографией?Зайдите на сайтГимназия

Слайд 34Гиперссылки
Указатель ссылки – изображение



ГиперссылкиУказатель ссылки – изображение

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика