© 2019 783 0
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Введение в язык HTML
Категория:
Информатика
01.11.2019 09:34
Просмотр содержимого документа
«Введение в язык HTML»
Введение в язык HTML
И.В.Брезгунова
Кафедра технологий образования
РИВШ БГУ
Общие сведения
HTML (HyperText Markup Language) – язык гипертекстовой разметки
HTML- документ:
- Текстовое содержимое страницы
- Структура и формат страницы
- Мультимедийные объекты
- Гиперссылки
Синтаксис языка HTML
Объекты языка HTML:
- Текст
- Теги (управляющие конструкции)
Синтаксис языка HTML
- Парный тег
фрагмент текста
- Непарный тег
Открывающий тег
Закрывающий тег
Синтаксис языка HTML
- тег физического форматирования текста, обозначает полужирное начертание
Код HTML
Отображение
Этот текст набран
полужирным шрифтом
Этот текст набран полужирным шрифтом
Синтаксис языка HTML
- Вложение тегов
Код HTML
Отображение
Этот текст набран полужирным курсивом
Этот текст набран полужирным курсивом
Синтаксис языка HTML
- Атрибуты (параметры) уточняют действие тегов
- Каждый тег имеет свой набор допустимых атрибутов
- Для парных тегов атрибуты указывают в открывающем теге
- Атрибуту присваивается заданное или произвольное значение
- Можно использовать несколько атрибутов, разделенных пробелами
Синтаксис языка HTML
- Регистр имен тегов и атрибутов не имеет значения
=
=
=
- Наличие и количество пробелов между тегом и текстом или тегом и тегом не имеет значения
полужирный курсив
полужирный курсив
полужирный курсив
Синтаксис языка HTML
- Необходимо соблюдать порядок вложенности тегов
полужирный курсив
полужирный курсив
- В большинстве случаев атрибуты необязательны
- Значения атрибутов необязательно заключать в кавычки, если они содержат только буквы, цифры, точки и дефисы
Синтаксис языка HTML
Интерпретирует код HTML программа-браузер
Браузеры не проверяют правильность написания кода HTML
Неправильно записанный код браузером игнорируется
!
Структура документа HTML
Служебная часть
Заголовок окна
Содержательная часть
Содержание документа
Служебная часть документа HTML
- Тег определяет текст заголовка Web -страницы
- В отсутствие этого тега в строке заголовка выводится (в зависимости от браузера):
- No 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)
A 26720
Атрибуты тега
Элементы форматирования на уровне блоков
- Разрыв строки – тег
Код 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
пункты
2
8
3
10
4
12
5
14
6
18
7
24
36
Физическое форматирование текста
Код HTML
По умолчанию размер шрифта 3.
Размер увеличен на 3 ед.
Размер - 2 единицы.
Отображение
Физическое форматирование текста
- Атрибут FACE тега
Код HTML
Это - шрифт Symbol: abcd
Отображение
Физическое форматирование текста
- Определение параметров шрифта по умолчанию для всего документа: тег (непарный)
- Атрибуты:
- COLOR - цвет текста
- FACE гарнитура шрифта
- SIZE размер шрифта
Netscape Communicator не интерпретирует атрибут FACE
Каскадные таблицы стилей (CSS)
- Таблица стилей управляет форматированием тегов в документе
- Правило состоит из:
- селектора (тега)
- определения – свойства и значения
H2 {color: green; font-size: 20 pt}
Каскадные таблицы стилей. Связывание с документом
- Связывание – таблица стилей хранится в отдельном файле (.css)
Присоединятся к документу с помощью тега LINK в служебной части документа
- Внедрение – таблица стилей задается в самом документе
Каскадные таблицы стилей (CSS)
H2 {color: green; font-size: 20 pt}
Каскадные таблицы стилей (CSS)
- Класс
.special {color: blue; font-size: 14 pt; text-align: center; background-color: red}
Каскадные таблицы стилей (CSS)
Код HTML
Отображение
.special {color: blue; font-size: 14 pt; text-align: center; background-color: red}
Первый абзац
Второй абзац
Каскадные таблицы стилей (CSS)
Преимущества использования каскадных таблиц стилей:
- В основной части документа отсутствуют теги физического форматирования текста, т.е. представлена лишь логическая структура документа
- Сокращается объем HTML- документа
- Упрощается процедура правки документа
Логическое форматирование текста
- Теги логического форматирования обозначают структурные типы своих текстовых фрагментов
- Цитата (отметка цитат, названий источников) - …
Обычно выводится курсивом
- Удаленный текст - …
Обычно отображается перечеркнутым текстом
Логическое форматирование текста
- Определение - …
Обычно отображается курсивом
- Выделение важных фрагментов текста - …
Обычно отображается курсивом
- Выделение очень важных фрагментов текста - …
Обычно отображается полужирным шрифтом
Логическое форматирование текста
- Аббревиатура - …
Код HTML
Отображение в MSIE
РИВШ
Графика в HTML
- Вставка графического изображения: тег
(непарный)
- Обязательный атрибут SRC указывает адрес графического файла
Графика
- Атрибуты тега
- ALIGN - выравнивание текста относительно изображения
- WIDTH и HEIGHT – ширина и высота в пикселях или процентах от размеров экрана
- BORDER – толщина рамки вокруг изображения в пикселях
- HSPACE и VSPACE – пустые поля вокруг изображения в пикселях
- ALT – альтернативный текст
MSIE отображает графику MSIE не отображает графику " width="640"
Графика
- Альтернативный текст
ALT=“ По-моему, это лайка ”
MSIE отображает графику
MSIE не отображает графику
Гиперссылки
- Указатель ссылки – тег …
- Адресная часть ссылки – атрибут HREF тега
Хотите ознакомиться с моей
биографией ?
Зайдите на сайт
РИВШ БГУ
Пишите мне!
Гиперссылки
- Указатель ссылки - изображение
Таблицы
| заголовок столбца 1 | заголовок столбца 2 |
|---|---|
| содержимое ячейки 1 | содержимое ячейки 2 |
Таблицы
| заголовок столбца 1 | заголовок столбца 2 |
|---|---|
| содержимое ячейки 1 | содержимое ячейки 2 |
Таблицы
- Заголовок таблицы - тег ( после тега
)
Расположение заголовка – атрибут ALIGN = {TOP,BOTTOM}
Таблицы
Атрибуты тега
- BORDER – наличие и ширина рамки в пикселях
- BORDERCOLOR – цвет рамки
- CELLSPASING – расстояние между рамками ячеек в пикселях
- CELLPADDING – расстояние между рамкой ячейки и данными в ячейке
- WIDTH и HEIGHT – ширина и высота в пикселях или процентах от ширины экрана
Фреймы
- Общий вид установочного файла фреймов:
Деление окна на фреймы
Адреса документов в фреймах
Информация, отображаемая неграфическими браузерами
Фреймы
Фреймы
Атрибуты тега :
- SCROLLING = {YES, NO, AUTO} – определяет наличие или отсутствие полосы прокрутки у фрейма
- NORESIZE – наличие этого атрибута запрещает изменение размера фрейма в браузере с помощью мыши
- BORDERCOLOR – цвет границы между фреймами
- NAME – имя фрейма
- Атрибут тега FRAMEBORDER задает толщину границы между соответствующими фреймами в пикселях
Фреймы
ссылка1
ссылка2
- Используя атрибут NAME , дать фрейму, в котором должны загружаться ссылки, некое имя, например, RIGHT
- Открыть документ, содержащий ссылки, ввести в каждый тег атрибут TARGET и присвоить ему значение RIGHT
Средства создания 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 содержит ключевые слова (через запятую)
" width="640"
Служебная часть документа HTML
- Значения атрибута NAME тега :
- SITE-CREATED
- Атрибут CONTENT указывает дату создания ресурса в формате МЕСЯЦ-ДЕНЬ-ГОД
CONTENT =”11-04-2001”
" width="640"
Служебная часть документа HTML
- Значения атрибута NAME тега :
- EXPIRES
- Атрибут CONTENT указывает предполагаемую дату закрытия ресурса
CONTENT =”01-01-2003”
Служебная часть документа HTML
- Значения атрибута NAME тега :
- REVISIT
- Атрибут CONTENT указывает количество дней (от 1 до 30), по прошествии которых необходимо переиндексировать ресурс
" width="640"
Служебная часть документа HTML
- Значения атрибута NAME тега :
- CONTENT-LANGUAGE
- Атрибут CONTENT указывает язык ресурса (на английском языке)
CONTENT=”russian”
Служебная часть документа HTML
- Значения атрибута NAME тега :
- AUTHOR
- Атрибут CONTENT содержит имя автора ресурса
Служебная часть документа HTML
- Значения атрибута NAME тега :
- OWNER
- Атрибут CONTENT содержит имя человека (название организации), являющегося владельцем ресурса
" width="640"
Служебная часть документа HTML
- Значения атрибута NAME тега :
- GENERATOR
- Атрибут CONTENT содержит название программного продукта, средствами которого был создан данный ресурс
CONTENT=” Microsoft FrontPage 4.0 ”
Служебная часть документа HTML
- Значения атрибута HTTP - EQUIV тега :
- REFRESH
- Атрибут CONTENT задает количество секунд, через которые необходимо перезагружать страницу или количество секунд, через которое необходимо перейти по указанному адресу
" width="640"
Служебная часть документа HTML
- Значения атрибута HTTP - EQUIV тега :
- CONTENT - TYPE
- Атрибут CONTENT указывает кодировку ресурса
CONTENT=” text/html; charset=Windows-1251 ”
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
Полезное для учителя
