Знакомство с языком HTML Гипертекст – это электронный документ, который содержит гиперссылки на другие документы. Гипертекстовый документ предназначен.

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



Advertisements
Похожие презентации
HTML. Первые шаги.
Advertisements

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

Знакомство с языком HTML Гипертекст – это электронный документ, который содержит гиперссылки на другие документы. Гипертекстовый документ предназначен для вывода информации на экран компьютера. Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют в компьютерных энциклопедиях и учебных программах, прикладных программах для работы со справочной информацией и для организации доступа к информации в W W W, т.е. при работе с WEB-документами. WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы- браузера.

Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы он помещался целиком на экране. Поэтому WEB-документы называют еще WEB-страницами. Несколько WEB-страниц на одну тему называют WEB- узлом или WEB-сайтом. WEB-сайты создают WEB-дизайнеры. WEB-дизайн – это совокупность правил и рекомендаций, которыми должны руководствоваться авторы, чтобы их сайты были информативными и выглядели привлекательно.

Команды языка HTML называются теги и они записываются в. Большинство тегов – парные … Документ HTML имеет три структурных типа содержимого: 1. Теги – команды в. 2. Комментарии –пояснения к документу. Они помогают разобраться в его содержании. 3. Текст – то, что пользователь видит на экране браузера. Мультимедийные элементы – картинки, звук, видео – не являются частью HTML-документа и хранятся в отдельных файлах. HTML-документ содержит только ссылки на эти файлы в виде тегов.

теги и атрибуты Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров) Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства.

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

Заголовок документа – теги и Тег … заключает в себе теги заголовка.

Тело документа – тег Все, что находится между и, называется содержимым тела документа.

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

Оформление текста Заголовки Существует 6 уровней заголовков:..., …,... Атрибут – align – выравнивание Значения: Left (по умолчанию) Right Center 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-страницы. Сохранить этот текст в этой папке под любым именем с расширением.html. Перейти в эту папку. Документ должен иметь значок или Открыть этот документ. (Откроется программа-браузер). Если нужно внести изменения в документ, то выполнить команду ВИД Просмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте. Внести в текст изменения. Сохранить его (Ctrl+S), перейти в программу-браузер и нажать кнопку ОБНОВИТЬ.

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

Задание на урок: Создать две WEB-странички на произвольную тему 1. На первой применить физические стили форматирования (шрифт, курсив и т.п.), фон сделать цветным. 2. На второй применить логические стили форматирования. В качестве фона использовать картинку из файла.

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