Форматирование текста на Web- странице. Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.

Презентация:



Advertisements
Похожие презентации
© М.Е.Макарова
Advertisements

Знакомство с языком HTML Гипертекст – это электронный документ, который содержит гиперссылки на другие документы. Гипертекстовый документ предназначен.
Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
HTML. Первые шаги.
Подготовил и провел Учитель информатики МОУ СОШ 36 г.Липецка Ефремов М.С.
Hyper Text Markup Language Язык разметки гипертекста.
Знакомство с языком HTML Гипертекст – это электронный документ, который содержит гиперссылки на другие документы. Гипертекстовый документ предназначен.
Автор: Пилишкина Надежда Васильевна. HTML (Hyper Text Markup Language) «Язык гипертекстовой разметки» «Многомерный» текстовый документ, в котором установлены.
(HyperText Markup Language) – язык гипертекстовой разметки.
Web-страницы и Web-сайты. Структура Web- страницы.
Задание: изучить тему, записать все теги форматирования.
Язык HTML Web-дизайн Web – World Wide Web (WWW) Всемирная паутина. Design – проектирование, конструирование. Web-дизайн – проектирование в Интернете.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
Форматирование текста на Web- странице. Заголовки Так выглядит заголовок первого уровня Так выглядит заголовок второго уровня Так выглядит заголовок третьего.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
Работа с текстом в HTML. Размер и форма шрифта Тег - определяет выводимый шрифт, его размер и цвет. Атрибуты тега: FACE – определяет гарнитуры шрифтов.
(HyperText Markup Language) – язык гипертекстовой разметки.
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
Основы языка HTML Теги разметки документа. Тег (tag - указатель, метка) Команда или фрагмент кода, который описывает определенный элемент документа HTML.
Структура HTML-документа HTML – язык разметки гипертекстовых документов.
Транксрипт:

Форматирование текста на Web- странице.

Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа

Заголовок документа – теги и Тег … заключает в себе теги заголовка. 1.Тег … содержит слова, которые появляются в стоке заголовка браузера Мой первый шаг 2. Дополнительные теги заголовка: - содержит дополнительные данные о документе, используемые поисковыми серверами; и - определяют базовый адрес документа и некоторые другие

Тело документа – тег Все, что находится между и, называется содержимым тела документа. Тег может содержать 3 группы параметров: 1.Управление внешним видом документа. 2.Атрибуты программирования – по событию, таблицы стилей и пр. 3.Атрибуты ссылок и идентификации.

Параметры тега Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB Text – задает цвет текста. Background – помещает в качестве фона изображение из файла с картинкой. Bgproperties = fixed – фоновый рисунок не прокручивается вместе со страницей. Link – задает цвет гиперссылок, по которым пользователь еще «не ходил». Vlink – задает цвет посещенных гиперссылок. Alink – цвет активной гиперссылки (под курсором мышки во время нажатия)

Оформление текста Заголовки Существует 6 уровней заголовков:..., …,... Атрибут – align – выравнивание Значения: Left (по умолчанию) Right Centr Title 1 Title 2 Title 3 Title 4 Title 5 Title 6

Абзацы Тег указывает на начало нового абзаца и вставляет пустую строку перед абзацем. Атрибут align. Тег - разрыв строки. Используется для записи текстов стихов и песен. Атрибут clear позволяет продолжить поток текста после (ниже) рисунка или таблицы. Значения left, right, all - продолжают вывод текста там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков. Этот атрибут имеет смысл только с выровненными влево или вправо рисунками или таблицами.

Точные интервалы Тег … создает область, в которой текст не разбивается на строки. Тег используется в сочетании с и указывает браузеру место где, в случае необходимости, можно разорвать строку. Тег … выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и пр. Тег … - содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута align=center

Физическое и логическое форматирование текста 1.Физическая разметка документа – это явное указание браузеру, как должен выглядеть тот или иной фрагмент текста – размер шрифта, курсив и т.п. 2.Логическая разметка учитывает смысл выделенного фрагмента – цитата, сведения об авторе и т.п. Современные стандарты языка HTML советуют использовать по-возможности логическую разметку, хотя физическое форматирование еще никто не отменял.

теги физических стилей … Полужирный шрифт … Увеличенный шрифт … Курсив … Уменьшенный шрифт … Подчеркивание … Верхний индекс … Зачеркнутый шрифт … Нижний индекс … Стиль печатной машинки … Мерцающий текст (в Internet Explorer) Можно комбинировать теги стилей: Полужирный курсив

Изменение шрифта тег … - изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По-умолчанию size=3 Размер изменяется на 20%: 4 размер больше 3 на 20%, 5 размер больше 4 на 20% size=4 – абсолютный размер, size= +1 – относительный (на 1 больше, чем базовый размер шрифта) color - цвет текста, face - название шрифта face="Comic Sans MS, Courier New

Мой второй шаг Это обычный шрифт Это измененный шрифт Это снова обычный шрифт

теги логических стилей Аббревиатура Сокращение, напр., HTML … Библиографическая ссылка, исп. для записи названий книг и пр. (курсив) … Текст с «буквальным» смыслом Для текстов программ … Для имен переменных … Визуальное выделение (курсив) … Логическое выделение (полужирный) … Для специальных терминов … Для технических терминов … Блок цитат (а трибут cite=URL - источник цитаты) … Адрес (курсив)

Теги логического и физического форматирования могут комбинироваться друг с другом и с тегами установки интервалов.

Создание WEB-страниц в блокноте.

Познакомились со структурой и основными командами форматирования WEB-документа. Узнали, как создавать простейшие WEB- документы.

Выучить конспект. Гл. 6, § 4.6