Презентация разработана к уроку по теме «Введение в язык HTML» При использовании данной презентации при объяснении новой темы появляется возможность применять методы личностно-ориентированного обучения: проблемный метод, метод эвристической беседы и элементы исследования. Постановка проблемы ставит учащихся в условия, которые побуждают его решать учебную проблему, проводить анализ материала и оперировать им. Такая деятельность позволяет учащимся получить новую информацию, освоит новые способы применения знаний

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

Синтаксис языка HTML Открывающий тег Закрывающий тег  Парный тег фрагмент текста  Непарный тег

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

Структура документа HTML Служебная часть Заголовок окна Содержание документа Содержательная часть

Введение в язык HTML

Служебная часть документа HTML  Тег определяет текст заголовка  В отсутствие этого тега в строке Web-страницы заголовка выводится (в зависимости от браузера): - No title - Адрес загруженной страницы - Ничего <HEAD><TITLE>Республиканский институт высшей школы БГУ

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

Схема RGB RGB - Red-Green-Blue, Красный-Зеленый-Синий Интенсивность компоненты записывается двузначным шестнадцатеричным числом 0 1 2 3 4 5 6 7 8 9 A(10) B(11) C(12) D(13) E(14) F(15) A26720

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

Элементы форматирования на уровне блоков  Новый абзац – тег

Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY} Код HTML

Первый абзац

Второй абзац Отображение

Введение в язык HTML

Элементы форматирования на уровне блоков Заголовки – теги

…

, …,

…

Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY} Код HTML

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

Текст важного Отображение

Введение в язык HTML

Элементы форматирования на уровне блоков Горизонтальные линии – тег

Атрибуты: -ALIGN (выравнивание)={LEFT, RIGHT, CENTER} -WIDTH (ширина) -SIZE (толщина) -COLOR (цвет) Код HTML Часть1

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

Введение в язык HTML

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

…

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

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

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

Введение в язык HTML

Физическое форматирование текста Теги физического форматирования: формат отображения шрифта в графических браузерах Полужирный - … Курсив - … Подчеркнутый - … Зачеркнутый - … или … Телетайпный - … Нижний индекс - _… Верхний индекс - ^… Мерцание - … Не отображается в MS Internet Explorer

Введение в язык HTML

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

Введение в язык HTML

Физическое форматирование текста  Атрибут SIZE тега SIZE = {1,2,3,4,5,6,7} По умолчанию SIZE=3 Для MS Internet Explorer единицы 1 пункты 8 2 10 3 12 4 14 5 18 6 24 7 36

Введение в язык HTML

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

Введение в язык HTML

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

Введение в язык HTML

Физическое форматирование текста Определение параметров шрифта по умолчанию для всего документа: тег (непарный) Атрибуты: -COLOR - цвет текста -FACE  гарнитура шрифта -SIZE  размер шрифта Netscape Communicator не интерпретирует атрибут FACE

Введение в язык HTML

Каскадные таблицы стилей (CSS)  Таблица стилей управляет форматированием тегов в документе  Правило состоит из: - селектора (тега) - определения – свойства и значения H2 {color: green; font-size: 20 pt}

Введение в язык HTML

Каскадные таблицы стилей. Связывание с документом Связывание – таблица стилей хранится в отдельном файле (.css) Присоединятся к документу с помощью тега LINK в служебной части документа Внедрение – таблица стилей задается в самом документе

Введение в язык HTML

Каскадные таблицы стилей (CSS)

Введение в язык HTML

Каскадные таблицы стилей (CSS) Класс

Введение в язык HTML

Каскадные таблицы стилей (CSS) Код HTML Отображение Первый абзац

Второй абзац

Введение в язык HTML

Каскадные таблицы стилей (CSS) Преимущества использования каскадных таблиц стилей: В основной части документа отсутствуют теги физического форматирования текста, т.е. представлена лишь логическая структура документа Сокращается объем HTML- документа Упрощается процедура правки документа

Введение в язык HTML

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

Введение в язык HTML

Графика  Атрибуты тега - ALIGN - выравнивание текста относительно изображения - WIDTH и HEIGHT – ширина и высота в пикселях или процентах от размеров экрана - BORDER – толщина рамки вокруг изображения в пикселях - HSPACE и VSPACE – пустые поля вокруг изображения в пикселях - ALT – альтернативный текст

Введение в язык HTML

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

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

Введение в язык HTML

Гиперссылки  Указатель ссылки – тег …  Адресная часть ссылки – атрибут HREF тега Хотите ознакомиться с моей биографией? Зайдите на сайт РИВШ БГУ Пишите мне!

Введение в язык HTML

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

Введение в язык HTML

Таблицы заголовок столбца 1 заголовок столбца 2 содержимое ячейки 1 содержимое ячейки 2

Введение в язык HTML

Таблицы

заголовок столбца 1	заголовок столбца 2
содержимое ячейки 1	содержимое ячейки 2

Введение в язык HTML

Таблицы Заголовок таблицы - тег (после тега ) Расположение заголовка – атрибут ALIGN = {TOP,BOTTOM}

Введение в язык HTML

Таблицы Атрибуты тега  BORDER – наличие и ширина рамки в пикселях  BORDERCOLOR – цвет рамки  CELLSPASING – расстояние между рамками ячеек в пикселях  CELLPADDING – расстояние между рамкой ячейки и данными в ячейке  WIDTH и HEIGHT – ширина и высота в пикселях или процентах от ширины экрана

Введение в язык HTML

Фреймы  Общий вид установочного файла фреймов: Деление окна на фреймы Адреса документ ов в фреймах документа 1”> документа 2”> Информация, отображаемая неграфическими браузерами

Введение в язык HTML

Фреймы

Введение в язык HTML

Фреймы Атрибуты тега :  SCROLLING = {YES, NO, AUTO} – определяет наличие или отсутствие полосы прокрутки у фрейма  NORESIZE – наличие этого атрибута запрещает изменение размера фрейма в браузере с помощью мыши  BORDERCOLOR – цвет границы между фреймами  NAME – имя фрейма  Атрибут тега FRAMEBORDER задает толщину границы между соответствующими фреймами в пикселях

Введение в язык HTML

Фреймы ссылка1 ссылка2 1. Используя атрибут NAME, дать фрейму, в котором должны загружаться ссылки, некое имя, например, RIGHT 2. Открыть документ, содержащий ссылки, ввести в каждый тег атрибут TARGET и присвоить ему

Введение в язык HTML

Средства создания HTML-документов  Простейшие текстовые редакторы – Блокнот, Far Editor, Norton Editor  Специализированные HTML- редакторы – Homesite, Hotdog Professional, CoffeeCup HTML Editor ++

Введение в язык HTML

Служебная часть документа HTML  Теги описывают свойства страницы  Каждый тег имеет два атрибута: - NAME или HTTP-EQUIV + - CONTENT

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута CONTENT зависят от значений атрибутов NAME и HTTP-EQUIV  Теги с атрибутом NAME в основном содержат информацию для поисковых машин  Теги с атрибутом HTTP- EQUIV в основном содержат информацию для браузера

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - DESCRIPTION - Атрибут CONTENT содержит краткое описание сайта

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - KEYWORDS - Атрибут CONTENT содержит ключевые слова (через запятую)

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - SITE-CREATED - Атрибут CONTENT указывает дату создания ресурса в формате МЕСЯЦ- ДЕНЬ-ГОД

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - EXPIRES - Атрибут CONTENT указывает предполагаемую дату закрытия ресурса

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - REVISIT - Атрибут CONTENT указывает количество дней (от 1 до 30), по прошествии которых необходимо переиндексировать ресурс

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - CONTENT-LANGUAGE - Атрибут CONTENT указывает язык ресурса (на английском языке)

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - AUTHOR - Атрибут CONTENT содержит имя автора ресурса

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - OWNER - Атрибут CONTENT содержит имя человека (название организации), являющегося владельцем ресурса

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута NAME тега : - GENERATOR - Атрибут CONTENT содержит название программного продукта, средствами которого был создан данный ресурс

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута HTTP-EQUIV тега : - REFRESH - Атрибут CONTENT задает количество секунд, через которые необходимо перезагружать страницу или количество секунд, через которое необходимо перейти по указанному адресу

Введение в язык HTML

Служебная часть документа HTML  Значения атрибута HTTP-EQUIV тега : - CONTENT-TYPE - Атрибут CONTENT указывает кодировку ресурса

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

30.04.2018