Добавить материал

и получить 10 документов
и свидетельство СМИ

Изображение пользователя Куприянова Елена Львовна Куприянова Елена Львовна

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

  • Презентации учебные
  • ppt
  • 01.05.2018
Публикация в СМИ для учителей

Публикация в СМИ для учителей

Бесплатное участие. Свидетельство СМИ сразу.
Мгновенные 10 документов в портфолио.

Добавить материал
Презентация разработана к уроку по теме «Введение в язык HTML» При использовании данной презентации при объяснении новой темы появляется возможность применять методы личностно-ориентированного обучения: проблемный метод, метод эвристической беседы и элементы исследования. Постановка проблемы ставит учащихся в условия, которые побуждают его решать учебную проблему, проводить анализ материала и оперировать им. Такая деятельность позволяет учащимся получить новую информацию, освоит новые способы применения знаний
Иконка файла материала 6.ppt
Введение в язык HTML
Общие сведения HTML (HyperText Markup Language) – язык гипертекстовой разметки HTML-документ: Текстовое содержимое страницы Структура и формат страницы Мультимедийные объекты Гиперссылки
Синтаксис языка HTML Объекты языка HTML:  Текст  Теги (управляющие конструкции) <имя_тега>
Синтаксис языка HTML Открывающий тег Закрывающий тег  Парный тег фрагмент текста  Непарный тег
Синтаксис языка HTML - тег физического форматирования текста, обозначает полужирное начертание Код HTML Отображение Этот текст набран полужирным шрифтом Этот текст набран полужирным шрифтом
Синтаксис языка HTML  Вложение тегов Код HTML Этот текст набран полужирным курсивом Отображение Этот текст набран полужирным курсивом
Синтаксис языка HTML Атрибуты (параметры) уточняют действие тегов Каждый тег имеет свой набор допустимых атрибутов Для парных тегов атрибуты указывают в открывающем теге Атрибуту присваивается заданное или произвольное значение Можно использовать несколько атрибутов, разделенных пробелами
Синтаксис языка HTML Регистр имен тегов и атрибутов не имеет значения = = = Наличие и количество пробелов между тегом и текстом или тегом и тегом не имеет значения полужирный курсив полужирный курсив полужирный курсив
Синтаксис языка HTML  Необходимо соблюдать порядок вложенности тегов полужирный курсив полужирный курсив  В большинстве случаев атрибуты необязательны  Значения атрибутов необязательно заключать в кавычки, если они содержат только буквы, цифры, точки и дефисы
Синтаксис языка HTML ! Интерпретирует код HTML программа- браузер Браузеры не проверяют правильность написания кода HTML Неправильно записанный код браузером игнорируется
Структура документа HTML Служебная часть Заголовок окна Содержание документа Содержательная часть
Служебная часть документа HTML  Тег определяет текст заголовка  В отсутствие этого тега в строке Web-страницы заголовка выводится (в зависимости от браузера): - No title - Адрес загруженной страницы - Ничего <HEAD><TITLE>Республиканский институт высшей школы БГУ
Атрибуты тега  BGCOLOR – цвет фона документа  BACKGROUND – фоновое изображение ссылки ссылки  TEXT – цвет текста  LINK – цвет непросмотренной  VLINK – цвет просмотренной ссылки  ALINK – цвет просматриваемой
Цвет в HTML Способы указания цвета:  Название цвета  Схема RGB
Названия цветов 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 Текст
можно разбить на
cтроки произвольно Отображение Текст можно разбить на cтроки произвольно
Элементы форматирования на уровне блоков  Новый абзац – тег

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

Первый абзац

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

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

…

,

…

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

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

Текст важного Отображение
Элементы форматирования на уровне блоков Горизонтальные линии – тег
Атрибуты: -ALIGN (выравнивание)={LEFT, RIGHT, CENTER} -WIDTH (ширина) -SIZE (толщина) -COLOR (цвет) Код HTML Часть1
Часть2 Отображение
Элементы форматирования на уровне блоков Предварительно отформатированный текст – тег 
…
Код HTML Отображение 
Текст 
разбит
на              
строки
Текст разбит на строки
Физическое форматирование текста Теги физического форматирования: формат отображения шрифта в графических браузерах Полужирный - … Курсив - … Подчеркнутый - … Зачеркнутый - … или … Телетайпный - … Нижний индекс - … Верхний индекс - … Мерцание - … Не отображается в MS Internet Explorer
Физическое форматирование текста  Определение параметров фрагмента текста – тег …  Атрибуты: - COLOR - цвет текста - FACE  гарнитура шрифта - SIZE  размер шрифта
Физическое форматирование текста  Атрибут 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 По умолчанию размер шрифта 3.
Размер увеличен на 3 ед.
Размер - 2 единицы.
Отображение
Физическое форматирование текста  Атрибут FACE тега Это - шрифт Symbol: abcd Код HTML Отображение
Физическое форматирование текста Определение параметров шрифта по умолчанию для всего документа: тег (непарный) Атрибуты: -COLOR - цвет текста -FACE  гарнитура шрифта -SIZE  размер шрифта Netscape Communicator не интерпретирует атрибут FACE
Каскадные таблицы стилей (CSS)  Таблица стилей управляет форматированием тегов в документе  Правило состоит из: - селектора (тега) - определения – свойства и значения H2 {color: green; font-size: 20 pt}
Каскадные таблицы стилей. Связывание с документом Связывание – таблица стилей хранится в отдельном файле (.css) Присоединятся к документу с помощью тега LINK в служебной части документа Внедрение – таблица стилей задается в самом документе
Каскадные таблицы стилей (CSS)
Каскадные таблицы стилей (CSS) Класс
Каскадные таблицы стилей (CSS) Код HTML Отображение Первый абзац

Второй абзац

Каскадные таблицы стилей (CSS) Преимущества использования каскадных таблиц стилей: В основной части документа отсутствуют теги физического форматирования текста, т.е. представлена лишь логическая структура документа Сокращается объем HTML- документа Упрощается процедура правки документа
Графика в HTML  Вставка графического изображения: тег (непарный)  Обязательный атрибут SRC указывает адрес графического файла
Графика  Атрибуты тега - ALIGN - выравнивание текста относительно изображения - WIDTH и HEIGHT – ширина и высота в пикселях или процентах от размеров экрана - BORDER – толщина рамки вокруг изображения в пикселях - HSPACE и VSPACE – пустые поля вокруг изображения в пикселях - ALT – альтернативный текст
Графика  Альтернативный текст “По-моему, MSIE отображает графику MSIE не отображает графику
Гиперссылки  Указатель ссылки – тег …  Адресная часть ссылки – атрибут HREF тега Хотите ознакомиться с моей биографией? Зайдите на сайт РИВШ БГУ Пишите мне!
Гиперссылки  Указатель ссылки - изображение
Таблицы заголовок столбца 1 заголовок столбца 2 содержимое ячейки 1 содержимое ячейки 2
Таблицы
заголовок столбца 1 заголовок столбца 2
содержимое ячейки 1 содержимое ячейки 2
Таблицы Заголовок таблицы - тег (после тега ) Расположение заголовка – атрибут ALIGN = {TOP,BOTTOM}
Таблицы Атрибуты тега
 BORDER – наличие и ширина рамки в пикселях  BORDERCOLOR – цвет рамки  CELLSPASING – расстояние между рамками ячеек в пикселях  CELLPADDING – расстояние между рамкой ячейки и данными в ячейке  WIDTH и HEIGHT – ширина и высота в пикселях или процентах от ширины экрана
Фреймы  Общий вид установочного файла фреймов: Деление окна на фреймы Адреса документ ов в фреймах документа 1”> документа 2”> Информация, отображаемая неграфическими браузерами
Фреймы
Фреймы Атрибуты тега :  SCROLLING = {YES, NO, AUTO} – определяет наличие или отсутствие полосы прокрутки у фрейма  NORESIZE – наличие этого атрибута запрещает изменение размера фрейма в браузере с помощью мыши  BORDERCOLOR – цвет границы между фреймами  NAME – имя фрейма  Атрибут тега FRAMEBORDER задает толщину границы между соответствующими фреймами в пикселях
Фреймы ссылка1 ссылка2 1. Используя атрибут NAME, дать фрейму, в котором должны загружаться ссылки, некое имя, например, RIGHT 2. Открыть документ, содержащий ссылки, ввести в каждый тег атрибут TARGET и присвоить ему
Средства создания HTML-документов  Простейшие текстовые редакторы – Блокнот, Far Editor, Norton Editor  Специализированные HTML- редакторы – Homesite, Hotdog Professional, CoffeeCup HTML Editor ++
Служебная часть документа HTML  Теги описывают свойства страницы  Каждый тег имеет два атрибута: - NAME или HTTP-EQUIV + - CONTENT
Служебная часть документа HTML  Значения атрибута CONTENT зависят от значений атрибутов NAME и HTTP-EQUIV  Теги с атрибутом NAME в основном содержат информацию для поисковых машин  Теги с атрибутом HTTP- EQUIV в основном содержат информацию для браузера
Служебная часть документа HTML  Значения атрибута NAME тега : - DESCRIPTION - Атрибут CONTENT содержит краткое описание сайта
Служебная часть документа HTML  Значения атрибута NAME тега : - KEYWORDS - Атрибут CONTENT содержит ключевые слова (через запятую)
Служебная часть документа HTML  Значения атрибута NAME тега : - SITE-CREATED - Атрибут CONTENT указывает дату создания ресурса в формате МЕСЯЦ- ДЕНЬ-ГОД
Служебная часть документа HTML  Значения атрибута NAME тега : - EXPIRES - Атрибут CONTENT указывает предполагаемую дату закрытия ресурса
Служебная часть документа HTML  Значения атрибута NAME тега : - REVISIT - Атрибут CONTENT указывает количество дней (от 1 до 30), по прошествии которых необходимо переиндексировать ресурс
Служебная часть документа HTML  Значения атрибута NAME тега : - CONTENT-LANGUAGE - Атрибут CONTENT указывает язык ресурса (на английском языке)
Служебная часть документа HTML  Значения атрибута NAME тега : - AUTHOR - Атрибут CONTENT содержит имя автора ресурса
Служебная часть документа HTML  Значения атрибута NAME тега : - OWNER - Атрибут CONTENT содержит имя человека (название организации), являющегося владельцем ресурса
Служебная часть документа HTML  Значения атрибута NAME тега : - GENERATOR - Атрибут CONTENT содержит название программного продукта, средствами которого был создан данный ресурс
Служебная часть документа HTML  Значения атрибута HTTP-EQUIV тега : - REFRESH - Атрибут CONTENT задает количество секунд, через которые необходимо перезагружать страницу или количество секунд, через которое необходимо перейти по указанному адресу
Служебная часть документа HTML  Значения атрибута HTTP-EQUIV тега : - CONTENT-TYPE - Атрибут CONTENT указывает кодировку ресурса

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

Посмотрите также