Форматирование текста Списки. Списки. Списки HTML поддерживает маркированные, нумерованные, вложенные списки и списки определений. HTML поддерживает маркированные,

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



Advertisements
Похожие презентации
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
Advertisements

HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ.
Урок информатики в 9 классе. Автор: учитель информатики и ИКТ ГБОУ СОШ 891 Пулова Светлана Анатольевна.
Основы Html HTML – HyperText Markup Language – язык разметки гипертекста
Задание: изучить тему, записать все теги форматирования.
Форматирование текста на Web- странице. Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
Язык создания web- страниц - HTML. Основные теги Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
HTML Правила языка и его группы Лекция 1. HTML HTML - это язык структурной разметки, используемый для создания Web-страниц. Он представляет собой простой.
УРОК 2. Форматирование текста. Пока созданная страница выглядит не слишком привлекательно - мелкий шрифт черного цвета на белом фоне. Заголовки С помощью.
Название страницы содержание страницы Структура любого HTML файла.
Основные понятия HTML расшифровывается HyperText Markup Lang uage (в переводе означает Язык Разметки ГиперТекста). HTML предназначен для создания веб-
Лекция 4. Тема «Форматирование Web-документа ». Вопросы темы: 1.Теги тела документа; 2.Теги управления разметкой; 3.Теги, управляющие формой отображения;
Вставка изображений и гиперссылок на Web- страницы. Списки на Web-страницах.
Списки на Web- страницах - нумерованный список - нумерованный список - маркированный список - маркированный список - список терминов - список терминов.
Работа с текстом в HTML. Размер и форма шрифта Тег - определяет выводимый шрифт, его размер и цвет. Атрибуты тега: FACE – определяет гарнитуры шрифтов.
Атрибуты тэгов. Учитель физики и информатики Дзагалова Т.И. МОУ «Февральская СОШ2» 2010г.
Инструментальные средства создания электронных образовательных ресурсов План лекции 1 Общее представление о языке HTML. Подготовка к созданию HTML-документа.
Основы языка HTML: тэги, атрибуты тэгов, комментарии.
Транксрипт:

Форматирование текста Списки. Списки. Списки HTML поддерживает маркированные, нумерованные, вложенные списки и списки определений. HTML поддерживает маркированные, нумерованные, вложенные списки и списки определений. Маркированные списки Маркированные списки Маркированный список имеет вид: Маркированный список имеет вид: список пунктов список пунктов например: например: яблоки яблоки бананы бананы

Форматирование текста Начиная с версии HTML 3.0 тэги списков расширены. Возможно использование вложенных списков с определенным порядком прогрессии типов маркеров, зависящих от уровня вложенности списка. Тип меняется со сплошного диска на окружность, а затем на квадрат. Добавлен тэг TYPE, так что вы можете указать тот тип маркера, который хотите: TYPE=disc, TYPE=circle, или TYPE=square для всего списка ( ) или отдельного элемента ( ). Например: Начиная с версии HTML 3.0 тэги списков расширены. Возможно использование вложенных списков с определенным порядком прогрессии типов маркеров, зависящих от уровня вложенности списка. Тип меняется со сплошного диска на окружность, а затем на квадрат. Добавлен тэг TYPE, так что вы можете указать тот тип маркера, который хотите: TYPE=disc, TYPE=circle, или TYPE=square для всего списка ( ) или отдельного элемента ( ). Например: яблоки яблоки бананы бананы апельсины апельсины

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

Форматирование текста Браузер автоматически нумерует элементы такого списка. В обычном нумерованом списке пункты помечаются цифрами 1, 2, 3,... и т.д. В HTML 3.0 добавлен тэг TYPE, позволяющий автору указывать тип пометок элементов списка: заглавные буквы (TYPE=A), маленькие буквы (TYPE=a), большие римские цифры (TYPE=I), маленькие римские цифры (TYPE=i) или обычные, арабские цифры (TYPE=1). Браузер автоматически нумерует элементы такого списка. В обычном нумерованом списке пункты помечаются цифрами 1, 2, 3,... и т.д. В HTML 3.0 добавлен тэг TYPE, позволяющий автору указывать тип пометок элементов списка: заглавные буквы (TYPE=A), маленькие буквы (TYPE=a), большие римские цифры (TYPE=I), маленькие римские цифры (TYPE=i) или обычные, арабские цифры (TYPE=1). Для списков, которые желают начинаться со значений, отличных от 1, имеется элемент START. START может применяться в тэгах и и всегда указывается в арабских цифрах, но преобразуется в указаный тип перед показом. Таким образом при START=5 первый элемент может быть помечен как 'E', 'e', 'V', 'v', или '5' в зависимости от элемента TYPE. Для списков, которые желают начинаться со значений, отличных от 1, имеется элемент START. START может применяться в тэгах и и всегда указывается в арабских цифрах, но преобразуется в указаный тип перед показом. Таким образом при START=5 первый элемент может быть помечен как 'E', 'e', 'V', 'v', или '5' в зависимости от элемента TYPE. Добавляя элемент VALUE в тэг, можно менять значение счетчика текущего элемента и всех последующих. Добавляя элемент VALUE в тэг, можно менять значение счетчика текущего элемента и всех последующих.

Форматирование текста Вложенные списки Вложенные списки Списки могут быть вложенными. Возможно вложение нумерованных списков в маркированные и наоборот. Ограничений на уровень вложения нет, но не рекомендуется использовать более трех уровней. Пример: Списки могут быть вложенными. Возможно вложение нумерованных списков в маркированные и наоборот. Ограничений на уровень вложения нет, но не рекомендуется использовать более трех уровней. Пример: Список серверов НГТУ Список серверов НГТУ корпус корпус TOWER BULLDOZER TOWER BULLDOZER корпус корпус учебные учебные GOLDEN PANDEMONIUM GOLDEN PANDEMONIUM коммерческие коммерческие ARES SINETIC ARES SINETIC

Форматирование текста Списки определений Списки определений Список определений обычно состоит из чередования термина (DT) и определения (DD). Обычно Web browser располагает определения на новой строке. Например: Список определений обычно состоит из чередования термина (DT) и определения (DD). Обычно Web browser располагает определения на новой строке. Например: НГТУ НГТУ НГТУ (Новосибирский государственный технический университет). НГТУ (Новосибирский государственный технический университет). АВТФ АВТФ АВТФ(Факультет Автоматики и Вычислительной Техники). АВТФ(Факультет Автоматики и Вычислительной Техники).

Форматирование текста Существуют также тэги меню Существуют также тэги меню и каталог и каталог,, которые менее гибки, а потому редко используются. которые менее гибки, а потому редко используются. Для всех видов списков существует компактная форма, например: Для всех видов списков существует компактная форма, например:

Форматирование текста Авторский стиль редактирования Авторский стиль редактирования Как уже говорилось выше, браузер формирует текст документа, игнорируя пробелы и переносы строк. Используя можно описать в тексте заданный авторский стиль. (То есть пробелы и пустые строки показаны как пробелы и пустые строки, и строки будут прерываться там же что и в исходном HTML-файле.) Это полезно, например, для изображения программ: Как уже говорилось выше, браузер формирует текст документа, игнорируя пробелы и переносы строк. Используя можно описать в тексте заданный авторский стиль. (То есть пробелы и пустые строки показаны как пробелы и пустые строки, и строки будут прерываться там же что и в исходном HTML-файле.) Это полезно, например, для изображения программ:

Форматирование текста #include #include При этом на экране текст пишется шрифтом фиксированной ширины. Ширина (в символах) задается тэгом При этом на экране текст пишется шрифтом фиксированной ширины. Ширина (в символах) задается тэгом В пределах могут использоваться гиперссылки, однако необходимо избегать использования других методы форматирования HTML-документов. Заметим, что поскольку, и & имеют специальное значение в HTML, необходимо использовать вместо них символы ( & lt;, & gt;, и & amp;, соответственно). Смотрите также Специальные символы. В пределах могут использоваться гиперссылки, однако необходимо избегать использования других методы форматирования HTML-документов. Заметим, что поскольку, и & имеют специальное значение в HTML, необходимо использовать вместо них символы ( & lt;, & gt;, и & amp;, соответственно). Смотрите также Специальные символы.

Форматирование текста Цитаты Цитаты Используя, можно включить в текст отдельную цитату. Большинство browsers отделяет такую цитату от окружающего текста. Например: Используя, можно включить в текст отдельную цитату. Большинство browsers отделяет такую цитату от окружающего текста. Например: Для того чтобы перейти в другой каталог на том же диске, можно нажать комбинацию клавиш [Alt-F10]. Для того чтобы перейти в другой каталог на том же диске, можно нажать комбинацию клавиш [Alt-F10].

Форматирование текста Адреса Адреса используется, чтобы определить автора документа и способы контакта c ним (например, адрес). Обычно это последний пункт в файле. Например, последняя строка этого документа в HTML-виде могла бы выглядеть: используется, чтобы определить автора документа и способы контакта c ним (например, адрес). Обычно это последний пункт в файле. Например, последняя строка этого документа в HTML-виде могла бы выглядеть: Введение в HTML. НГТУ, каф. Автоматики, Гунько А.В. Введение в HTML. НГТУ, каф. Автоматики, Гунько А.В. Что дает на экране: Что дает на экране: Введение в HTML. НГТУ, каф. Автоматики, Гунько А.В. Введение в HTML. НГТУ, каф. Автоматики, Гунько А.В. Внимание! НЕ используется для почтового адреса. Внимание! НЕ используется для почтового адреса.

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

Форматирование текста Логические стили Логические стили - служит для описания определений. - служит для описания определений. - служит для выделения слов. - служит для выделения слов. -служит для выделения заголовков книг, фильмов, цитат и т.п. -служит для выделения заголовков книг, фильмов, цитат и т.п. - служит для выдлеления программных кодов, текстов программ и т.п. Изображается шрифтом фиксированной ширины. (The header file) - служит для выдлеления программных кодов, текстов программ и т.п. Изображается шрифтом фиксированной ширины. (The header file)

Форматирование текста - используется для ввода с клавиатуры пользователя. Может быть изображено жирным шрифтом (но в большинстве browser изображается специальным шрифтом). - используется для ввода с клавиатуры пользователя. Может быть изображено жирным шрифтом (но в большинстве browser изображается специальным шрифтом). - используется для машинных сообщений. Изображается шрифтом фиксированной ширины. - используется для машинных сообщений. Изображается шрифтом фиксированной ширины. - служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом. - служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом. - используется для символьных переменных. - используется для символьных переменных.

Форматирование текста Физические стили Физические стили Существуют физические способы выделения - автор задает стиль написания текста, описывая шрифт в исходном HTML- документе. Вы можете задать: Существуют физические способы выделения - автор задает стиль написания текста, описывая шрифт в исходном HTML- документе. Вы можете задать:, - жирный шрифт (это жирный шрифт), - жирный шрифт (это жирный шрифт), -наклонный шрифт (это наклонный шрифт), -наклонный шрифт (это наклонный шрифт), -фиксированный шрифт ( это fixed шрифт ), -фиксированный шрифт ( это fixed шрифт ) -Подчеркнутый -Подчеркнутый - Перечеркнутый (часто не поддерживается) - Перечеркнутый (часто не поддерживается) - Верхний индекс - Верхний индекс - Нижний индекс - Нижний индекс -Центрированный -Мигающий. -Центрированный -Мигающий.

Форматирование текста Специальные символы. Специальные символы. Специальные символы Специальные символы Символы, & и " имеют в HTML особое значение, как символы форматирования. Но иногда нам необходимо использовать их в тексте по своему прямому назначению. Для их введения в текст, Вы должны использовать: Символы, & и " имеют в HTML особое значение, как символы форматирования. Но иногда нам необходимо использовать их в тексте по своему прямому назначению. Для их введения в текст, Вы должны использовать: & lt; -левая скобка < & lt; -левая скобка < & gt; -правая скобка > & gt; -правая скобка > & amp; -& & amp; -& & quot; -" & quot; -" &reg; -Зарегестрированная Торговая Марка ® &reg; -Зарегестрированная Торговая Марка ® &copy; -Копирайт © &copy; -Копирайт © - Неразделяющий пробел - Неразделяющий пробел Внимание! Специальные символы чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо &lt;. Внимание! Специальные символы чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо &lt;.

Форматирование текста Прерывание строки Прерывание строки Используя Вы можете перейти на новую строку, не начиная нового абзаца. Например: Используя Вы можете перейти на новую строку, не начиная нового абзаца. Например: Кафедра Автоматики Новосибирского Государственного Технического Университета Кафедра Автоматики Новосибирского Государственного Технического Университета Начиная с HTML 3.0 добавлен элемент CLEAR к тэгу и теперь CLEAR=left вызывает не просто переход на новую строку, но двигаясь вниз находит место со свободной левой границей (где нет плавающих картинок). CLEAR=right делает то же самое, но проверяет правую границу, CLEAR=all ищет место, полностью свободное от плавающих изображений. Начиная с HTML 3.0 добавлен элемент CLEAR к тэгу и теперь CLEAR=left вызывает не просто переход на новую строку, но двигаясь вниз находит место со свободной левой границей (где нет плавающих картинок). CLEAR=right делает то же самое, но проверяет правую границу, CLEAR=all ищет место, полностью свободное от плавающих изображений.

Форматирование текста Тэг служит для запрещения автоматической вставки переносов в текст между и. полезен при использовании некоторых последовательностей символов, которые нежелательно разделять на разные строки. Тэг служит для запрещения автоматической вставки переносов в текст между и. полезен при использовании некоторых последовательностей символов, которые нежелательно разделять на разные строки. Тэг означает Word BReak (Слова ПЕренос). Он нужен для того редкого случая, когда у Вас есть NOBR секция и Вы точно знаете, где можно устроить переносы строк. WBR помогает броузеру догадаться, в каком месте ему позволено вставить при необходимости перенос. Сам WBR перенос не делает (для этого есть BR), но лишь говорит, что в этом месте его можно сделать при необходимости. Тэг означает Word BReak (Слова ПЕренос). Он нужен для того редкого случая, когда у Вас есть NOBR секция и Вы точно знаете, где можно устроить переносы строк. WBR помогает броузеру догадаться, в каком месте ему позволено вставить при необходимости перенос. Сам WBR перенос не делает (для этого есть BR), но лишь говорит, что в этом месте его можно сделать при необходимости.

Форматирование текста Горизонтальная линия. Горизонтальная линия. Горизонтальная линия Горизонтальная линия Тэг описывает горизонтальный разделитель некоторого рода (по умолчанию это оттененная вдавленная линия). В HTML 3.0 к этому тэгу добавлены 4 новых элемента, предоставляющих автору документа некоторые возможности описания того, как этот горизонтальный разделитель должен бы выглядеть. Тэг описывает горизонтальный разделитель некоторого рода (по умолчанию это оттененная вдавленная линия). В HTML 3.0 к этому тэгу добавлены 4 новых элемента, предоставляющих автору документа некоторые возможности описания того, как этот горизонтальный разделитель должен бы выглядеть. - позволяет автору указать желаемую толщину разделительной линии в пикселях. - позволяет автору указать желаемую толщину разделительной линии в пикселях.

Форматирование текста Обычно разделитель имеет ширину равную ширине страницы. С помощью WIDTH автор может указать точную ширину разделителя в пикселах, или относительно ширины страницы в процентах. Обычно разделитель имеет ширину равную ширине страницы. С помощью WIDTH автор может указать точную ширину разделителя в пикселах, или относительно ширины страницы в процентах. Когда разделитель может иметь ширину не во всю страницу, можно дать автору возможность указать куда прижимать этот самый разделитель, к левой границе, правой границе или разместить по центру. Когда разделитель может иметь ширину не во всю страницу, можно дать автору возможность указать куда прижимать этот самый разделитель, к левой границе, правой границе или разместить по центру. Если вам хочется получить простой сплошной прямоугольник, то сделать это поможет элемент NOSHADE, запрещающий всякое оттенение разделителя. Если вам хочется получить простой сплошной прямоугольник, то сделать это поможет элемент NOSHADE, запрещающий всякое оттенение разделителя.

Использование шрифтов Использование шрифтов. Использование шрифтов. Использование шрифтов Использование шрифтов Размер. Размер. Вы можете менять размер шрифта с помощью тэга Вы можете менять размер шрифта с помощью тэга Возможные значения от 1 до 7. Значение по умолчанию: 3. Значение также может содержать необязательный символ '+' или '-', чтобы указать размер по отношению к базовому для документа. Базовый размер шрифта для документа по умолчанию равен 3 и может быть изменен с помощью тэга BASEFONT. Возможные значения от 1 до 7. Значение по умолчанию: 3. Значение также может содержать необязательный символ '+' или '-', чтобы указать размер по отношению к базовому для документа. Базовый размер шрифта для документа по умолчанию равен 3 и может быть изменен с помощью тэга BASEFONT.

Использование шрифтов Цвет. Цвет. Цвет шрифта задается тэгом Цвет шрифта задается тэгом где $$ - шестнадцатиричный номер цвета в формате RGB. Возможно задание цвета названием: RED, GREEN, BLUE и т.д. (Всего 16). где $$ - шестнадцатиричный номер цвета в формате RGB. Возможно задание цвета названием: RED, GREEN, BLUE и т.д. (Всего 16).

Использование шрифтов Выбор шрифта Выбор шрифта Выбор гарнитуры шрифта задается тэгом Выбор гарнитуры шрифта задается тэгом где *** - название шрифта (Times New Roman, Arial и т.п.). Срабатывает лишь в том случае, когда на компьютере - клиенте установлен соответствующий шрифт. где *** - название шрифта (Times New Roman, Arial и т.п.). Срабатывает лишь в том случае, когда на компьютере - клиенте установлен соответствующий шрифт. Атрибуты шрифта полностью кумулятивны. Текст внутри чего-то вроде Атрибуты шрифта полностью кумулятивны. Текст внутри чего-то вроде Здесь Текст Здесь Текст будет жирным курсивом с фиксированой шириной букв размера 6. будет жирным курсивом с фиксированой шириной букв размера 6.