Hyper Text Markup Language Язык разметки гипертекста

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

Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы он помещался

История создания HTML (Hyper Text Markup Language – язык разметки гипертекста)

Некоторые даты: 1960 -е годы: сотрудники компании IBM взялись за решение

Некоторые даты: 1980 -е годы: учёный-физик Тим Бернерс-Ли, сотрудник CERN

Главные причины популярности HTML: 1. Простота 2. Переносимость 3. HTML-документ – это гипертекст

HTML-документ – это обычный текстовый документ, содержащий специальные разметочные

Документ HTML имеет три структурных типа содержимого: 1. Теги – команды в <

Тэг – инструкция браузеру, указывающая способ отображения текста Тэг всегда начинается

Всё содержимое файла Интернет-страницы заключается в контейнер <html>…</html>, указывающий браузеру, что данный текст

СТРУКТУРНЫЕ ТЭГИ Эту базовую структуру в простейшем виде можно наглядно показать

СТРУКТУРНЫЕ ТЭГИ Указанная вами строка-название будет выводиться в заголовке окна браузера,

КОММЕНТАРИИ <! -- и -- > - такой полутэг используется

Теги и атрибуты Каждый тег состоит из имени тега, за

Структура HTML-документа <html> <head> <title> Мой первый шаг

Заголовок документа – теги <Head> и <Title> Тег <Head>…</Head> заключает в себе

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

Параметры тега <body> Bgcolor – изменяет цвет фона. Цвет задается словом или

Оформление текста Заголовки Существует 6 уровней заголовков: <h 1>. . . </h 1>,

Абзацы Тег <p> указывает на начало нового абзаца и вставляет

Точные интервалы Тег <nobr>… </nobr> создает область, в которой текст не

Физическое и логическое форматирование текста 1. Физическая разметка документа – это

Теги физических стилей Полужирный <b>…</b> <big>…

Изменение шрифта тег <font> … </font>- изменяет размер, цвет и стиль

<html> <head> <title>Мой второй шаг </title> </head> <body> Это обычный шрифт <p> <font size=5

теги логических стилей Сокращение, <abbr> </abbr>

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

Создание WEB-страниц в блокноте • В своей папке

Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные

GIF – (Graphics Interchange Format) формат

JPEG - (Joint Photographic Expert Group) – организация по

Тэг <IMG> - вставка изображений Атрибуты: Src - обязательный, значение- адрес изображения <img src

align – выравнивание. Положение изображения лучше всегда указывать явно. Значения: left, right

border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения border= толщина рамки в

Центрирование изображения Выровнять изображение по центру можно, только выделив его из текста тэгами

Обтекание изображения текстом Значения left и right атрибута align помещают изображение

Если в тэге <src> не указывать атрибут align=left или right, то текст на сайте

Можно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед

<body bgcolor=

Пояснения 1. Обе картинки имеют значение атрибута width=

Если выводятся несколько картинок с одинаковым выравниванием (left или right), то следующее изображение позиционируется

Использование видео Корректно работает только в Internet Explorer Атрибут dynsrc тэга <img>

Управление проигрыванием Клип начинает проигрываться 1 раз сразу после загрузки документа. Для изменения

Звуковой фон Корректно работает только в Internet Explorer Тэг <bgsound>

1. Вывод стандартных табличных данных 2. Позиционирование различных элементов – картинок, фрагментов текста –

Тег <table> </table> - создает таблицу. Все прочие элементы таблицы –

Атрибуты для тэга <table> Align выравнивание таблицы относительно документа. Возможные значения: center,

Атрибуты для тэга <table> title =“Текст“ всплывающая подсказка width = число ширина

A" src="https://present5.com/presentation/3/45907518_50151701.pdf-img/45907518_50151701.pdf-56.jpg" alt="

A" />

Атрибуты для тэга <table> rules - описывает рамки внутри таблицы. Значения:

<tr>- строка таблицы В этом тэге можно использовать почти все атрибуты, что

<table border=2 cols=2 bgcolor=yellow align=center> <TR> <TH>Заголовок столбца 1</TH> <TH>Заголовок столбца 2</TH> </TR> <TD>Ячейка

<html> <head> <title>Таблица Звери</title> </head> <body bgcolor=#9966 FF> <table width=800 height=550 border=6 bgcolor=#990099 align=center>

Гиперссылки Фундаментальное свойство гипертекста состоит в том, что он позволяет связывать

Создание гиперссылок Тэг <a> Атрибуты: href=“URL” – адрес перехода.

2. <a href=“http: //uchinfo. com. ua/lessons. php”> Уроки по информатике </a> Переход к документу,

Гиперссылки внутри одного документа Создание гиперссылки внутри текущего

Создание метки (якоря) 1 способ: использование атрибута name тэга <a> name=“Строка

Использование рисунков в качестве гиперссылки <a href=“адрес ссылки“><img src=“адрес картинки“></a> <a

Списки Упорядоченные Неупорядоченные Списки определений Вложенные списки

Упорядоченные списки Используются для: • Оглавлений • Перечня

Тэг <ol>…</ol> заголовок списка Тэг <li> элемент списка Атрибуты start=“число“ устанавливает номер

1. Теги структуры документа 2. Теги разметки текста 3. Табличные теги … Пример

Неупорядоченные списки Используются для перечня элементов, для которых не важен

• Теги структуры документа • Теги разметки текста

Списки определений Используются для: • Словарей; •

Вложенные списки В любой из типов списков можно вкладывать другие списки.

Фреймы дают возможность разбить окно браузера на несколько прямоугольных областей, в каждой из которых

Использование фреймов • Для создания на экране области с меню, которое должно

Тэг <frameset> Позволяет определять набор фреймов и управлять их размерами

<frameset rows=“ 100, 25%, *” cols=“ 30%, *”> * обозначает оставшееся пространство. Заполнение фреймов

Пропорциональные размеры rows=“ 100, 25%, *” cols=“ 30%, *” число – ширина или высота

Тег <frame> Может появляться только в теге <frameset> и определяет

Вложение тегов <frameset> В тег <frameset> … </frameset> можно поместить еще

<frameset cols=“ 2*, 3*”> <frame src=“ 1. html” name=“f 1”> <frameset rows=“ 30%,

Навигация во фреймах В каждую область фрейма должен быть загружен HTML- документ.

<frameset cols=“ 25%, *”> <frame src=“menu. html” name=“menu”> <frame src=“ 1. html” name=“view-frame”> </frameset>

Файл menu. html: <html> … <body> … <a href=“ 1. html” target=“view-frame”>Ссылка 1</a> <a

Скачать презентацию Hyper Text Markup Language Язык разметки гипертекста

HTML_1.ppt

Количество слайдов: 83

> Hyper Text Markup Language Язык разметки гипертекста Hyper Text Markup Language Язык разметки гипертекста

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

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

> История создания HTML (Hyper Text Markup Language – язык разметки гипертекста) История создания HTML (Hyper Text Markup Language – язык разметки гипертекста) Некоторые даты: 1945 год: американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста. 1968 год: Дуглас Энджельбарт (создатель программного диалогового интерфейса, который реагировал на действия специального указателя - курсора, а так же создатель манипулятора - мыши) демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.

> Некоторые даты: 1960 -е годы: сотрудники компании IBM взялись за решение Некоторые даты: 1960 -е годы: сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80 -х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Langugage), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации.

> Некоторые даты: 1980 -е годы: учёный-физик Тим Бернерс-Ли, сотрудник CERN Некоторые даты: 1980 -е годы: учёный-физик Тим Бернерс-Ли, сотрудник CERN (Европейский Центр Ядерных Исследований) в Женеве в конце 80 -х годов занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой. В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

> Термин Термин "гипертекст" впервые был введён Тедом Нельсоном в 1969 году. Гипертекст – электронный документ, содержащий в себе ссылки на другие документы.

> Главные причины популярности HTML: 1. Простота 2. Переносимость 3. HTML-документ – это гипертекст Главные причины популярности HTML: 1. Простота 2. Переносимость 3. HTML-документ – это гипертекст

> HTML-документ – это обычный текстовый документ, содержащий специальные разметочные HTML-документ – это обычный текстовый документ, содержащий специальные разметочные указатели (тэги). HTML-файл имеет расширение . htm или. html

>Документ HTML имеет три структурных типа содержимого: 1. Теги – команды в < Документ HTML имеет три структурных типа содержимого: 1. Теги – команды в < >. 2. Комментарии –пояснения к документу. Они помогают разобраться в его содержании