Оформление текстов
Использование текстового процессора, отображение текста в HTML и XHTML. Размещение всех сносок на странице, методы цветового кодирования HTML. Список, показывающий несколько цветов с использованием значений RGB. Основные методы цветового кодирования.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лекция |
| Язык | русский |
| Дата добавления | 31.05.2022 |
| Размер файла | 742,5 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Лекция
Тема: Оформление текстов
План:
HTML - форматирование
HTML - Цвета
HTML - шрифты
HTML - форматирование
Если вы используете текстовый процессор, вы должны быть знакомы со способностью делать текст жирным, курсивом или подчеркиванием; Это всего лишь три из десяти доступных вариантов, чтобы указать, как текст может отображаться в HTML и XHTML.
Жирный текст.Все, что появляется внутри элемента <b> … </ b> , отображается жирным шрифтом, как показано ниже:
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b>typeface.</p>
</body>
</html>
Курсивный текст. Все, что появляется внутри элемента <i> … </ i>, выделено курсивом, как показано ниже:
<body>
<p>The following word uses an <i>italicized</i>typeface.</p>
</body>
Подчеркнутый текст. Все, что появляется внутри элемента <u> … </ u> , отображается с подчеркиванием, как показано ниже:
<body>
<p>The following word uses an <u>underlined</u>typeface.</p>
</body>
Текст удара. Все, что появляется внутри элемента <strike> … </ strike>, отображается зачеркиванием, которое представляет собой тонкую линию в тексте, как показано ниже:
<body>
<p>The following word uses a <strike>strikethrough</strike>typeface.</p>
</body>
Моноширинный шрифт. Содержимое элемента <tt> … </ tt> написано моноширинным шрифтом. Большинство шрифтов известны как шрифты переменной ширины, потому что разные буквы имеют разную ширину. Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.
<body>
<p>The following word uses a <tt>monospaced</tt>typeface.</p>
</body>
Верхний текст. Содержимое элемента <sup> … </ sup> написано в верхнем индексе; размер используемого шрифта равен размеру символов, окружающих его, но отображается на половину высоты над другими символами.Пример:
<body>
<p>The following word uses a <sup>superscript</sup>typeface.</p>
</body>
Подстрочный текст. Содержимое элемента <sub> … </ sub> записывается в нижнем индексе; используемый размер шрифта совпадает с символами, окружающими его, но отображается на половину высоты символа ниже других символов.Пример:
<body>
<p>The following word uses a <sub>subscript</sub>typeface.</p>
</body>
Вставленный текст. Все, что появляется внутри элемента <ins> … </ins>,отображается как вставленный текст.Пример:
<body>
<p>I want to drink <del>cola</del><ins>wine</ins></p>
</body>
Удаленный текст. Все, что появляется внутри элемента <del> … </ del> , отображается как удаленный текст.Пример:
<body>
<p>I want to drink <del>cola</del><ins>wine</ins></p>
</body>
Большой текст.Содержимое элемента <big> … </ big> отображается на один размер шрифта больше, чем остальная часть текста, его окружающего, как показано ниже:
<body>
<p>The following word uses a <big>big</big>typeface.</p>
</body>
Меньший текст. Содержимое элемента <small> … </ small> отображается на один размер шрифта меньше, чем остальная часть текста, его окружающего, как показано ниже:
<body>
<p>The following word uses a <small>small</small>typeface.</p>
</body>
Группировка контента. Элементы <div> и <span> позволяют группировать несколько элементов для создания разделов или подразделов страницы.
Например, вы можете разместить все сноски на странице в элементе <div>, чтобы указать, что все элементы в этом элементе <div> относятся к сноскам. Затем вы можете прикрепить стиль к этому элементу <div>, чтобы они отображались с использованием специального набора правил стиля.Пример:
<body>
<divid="menu"align="middle">
<ahref="/index.htm">HOME</a> |
<ahref="/about/contact_us.htm">CONTACT</a> |
<ahref="/about/index.htm">ABOUT</a>
</div>
<divid="content"align="left"bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
Элемент <span>, с другой стороны, может использоваться только для группировки встроенных элементов. Итак, если у вас есть часть предложения или абзаца, которую вы хотите сгруппировать, вы можете использовать элемент <span> следующим образом:
<body>
<p>This is the example of <spanstyle="color:green">span tag</span>
and the <spanstyle="color:red">div tag</span>alongwith CSS</p>
</body>
Эти теги обычно используются с CSS, чтобы позволить вам прикрепить стиль к разделу страницы.
HTML - Цвета
Цвета очень важны, чтобы придать вашему сайту хороший внешний вид. Вы можете указать цвета на уровне страницы, используя тег <body>, или вы можете установить цвета для отдельных тегов, используя атрибут bgcolor .
Тег <body> имеет следующие атрибуты, которые можно использовать для установки разных цветов:
bgcolor - устанавливает цвет фона страницы.
текст - устанавливает цвет для основного текста.
alink - устанавливает цвет для активных или выбранных ссылок.
ссылка - устанавливает цвет для связанного текста.
vlink - устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.
Методы цветового кодирования HTML. Существует три способа настройки цвета на вашей веб-странице:
Названия цветов - Вы можете указать названия цветов, например, зеленый, синий или красный.
Шестнадцатеричные коды - шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.
Цветные десятичные или процентные значения - это значение указывается с помощью свойства rgb ().
Названия цветов. Вы можете указать прямое имя цвета, чтобы установить цвет текста или фона. W3C перечислил 16 основных имен цветов, которые будут проверяться с помощью валидатора HTML, но есть более 200 различных имен цветов, поддерживаемых основными браузерами.Вот список имен W3C Standard 16 Colours, и их рекомендуется использовать.
Вот примеры для установки фона тега HTML по имени цвета
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<bodytext="blue"bgcolor="green">
<p>Use different color names for for body and table and see the result.</p>
<tablebgcolor="black">
<tr>
<td>
<fontcolor="white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML-цвета - шестнадцатеричные коды. Шестнадцатеричное - это 6-значное представление цвета. Первые две цифры (RR) представляют значение красного цвета, следующие две - значение зеленого цвета (GG), а последние - значение синего (BB).Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как AdobePhotoshop, PaintshopPro или MS Paint.Каждому шестнадцатеричному коду будет предшествовать знак фунта или хеша #. Ниже приведен список нескольких цветов с использованием шестнадцатеричной записи.
|
цвет |
Цвет HEX |
|
|
# 000000 |
||
|
# FF0000 |
||
|
# 00FF00 |
||
|
# 0000FF |
||
|
# FFFF00 |
||
|
# 00FFFF |
||
|
# FF00FF |
||
|
# C0C0C0 |
||
|
#FFFFFF |
Вот примеры для установки фона тега HTML по цветному коду в шестнадцатеричном формате:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML-цвета - значения RGB. Это значение цвета указывается с помощью свойства rgb () . Это свойство принимает три значения, по одному для красного, зеленого и синего. Значение может быть целым числом от 0 до 255 или в процентах.
Примечание. Все браузеры не поддерживают свойство цвета rgb (), поэтому рекомендуется его не использовать.
Примечание. Все браузеры не поддерживают свойство цвета rgb (), поэтому рекомендуется его не использовать.
Ниже приведен список, показывающий несколько цветов с использованием значений RGB.
|
цвет |
Цвет RGB |
|
|
RGB (0,0,0) |
||
|
RGB (255,0,0) |
||
|
RGB (0,255,0) |
||
|
RGB (0,0,255) |
||
|
RGB (255,255,0) |
||
|
RGB (0255255) |
||
|
RGB (255,0,255) |
||
|
RGB (192192192) |
||
|
RGB (255,255,255) |
пример
Вот примеры для установки фона тега HTML с помощью цветового кода с использованием значений rgb () -
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML - шрифты
Шрифты играют очень важную роль в том, чтобы сделать веб-сайт более удобным для пользователя и повысить читаемость контента. Лицо и цвет шрифта полностью зависят от компьютера и браузера, который используется для просмотра вашей страницы, но вы можете использоватьтег <font>HTML, чтобы добавить стиль, размер и цвет к тексту на вашем веб-сайте.
Тег шрифта имеет три атрибута: size, color и face для настройки ваших шрифтов. Чтобы изменить любой атрибут шрифта в любое время на вашей веб-странице, просто используйте тег <font>. Текст, который следует, будет изменяться до тех пор, пока вы не закроете тег </ font>. Вы можете изменить один или все атрибуты шрифта в пределах одного тега <font>.
Примечание. Теги font и basefont устарели, и предполагается, что они будут удалены в будущей версии HTML. Поэтому их не следует использовать, рекомендуется использовать стили CSS для управления шрифтами
Вы можете установить размер шрифта содержимого, используя атрибут size . Диапазон принимаемых значений -- от 1 (наименьший) до 7 (наибольший). Размер шрифта по умолчанию -- 3.
пример
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<fontsize="1">Font size = "1"</font><br/>
<fontsize="2">Font size = "2"</font><br/>
<fontsize="3">Font size = "3"</font><br/>
<fontsize="4">Font size = "4"</font><br/>
<fontsize="5">Font size = "5"</font><br/>
<fontsize="6">Font size = "6"</font><br/>
<fontsize="7">Font size = "7"</font>
</body>
</html>
Относительный размер шрифта. Вы можете указать, на сколько размеров больше или на сколько размеров меньше заданного размера шрифта. Вы можете указать его как <fontsize = «+ n»> или <fontsize = «?n»>. Пример:
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
Настройка шрифта face. Вы можете установить шрифт face, используя атрибут face, но имейте в виду, что если у пользователя, просматривающего страницу, шрифт не установлен, он не сможет его увидеть. Вместо этого пользователь увидит шрифт по умолчанию, применимый к компьютеру пользователя.Пример:
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
Укажите альтернативные грани шрифта. Посетитель сможет увидеть ваш шрифт только в том случае, если на его компьютере установлен этот шрифт. Таким образом, можно указать две или более альтернатив шрифта, перечислив имена шрифтов, разделенные запятой.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
Когда ваша страница загружена, их браузер отобразит первый доступный шрифт. Если ни один из указанных шрифтов не установлен, он будет отображать шрифт по умолчанию TimesNewRoman .
Настройка цвета шрифта. Вы можете установить любой цвет шрифта, который вам нравится, используя атрибут color . Вы можете указать нужный цвет либо по имени цвета, либо по шестнадцатеричному коду для этого цвета.Пример: цветовое кодирование html текстовый
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
Контрольные вопросы:
1. Какие теги форматирование знаете?
2. Какой тег устанавливает цвет фона страницы?
3. Перечислите методы цветового кодирования
4. Атрибуты тега <font>
Размещено на Allbest.ru
...Подобные документы
Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Новый язык разметки гипертекста XHTML. Валидация XHTML-документов, определение их типа. Распространённые ошибки в XHTML-разметке. Конформность пользовательских агентов. Использование XHTML с другими пространствами имен. Расширение семантики HTML.
курсовая работа [44,1 K], добавлен 14.07.2009Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Методы арифметического кодирования. Основные функции программ, реализующие алгоритмы кодирования по методам Хаффмана, Голомба, Фибоначчи и Элиаса. Разработка программно-аппаратных средств оптимального арифметического кодирования и их экономический расчет.
дипломная работа [1,1 M], добавлен 26.05.2012Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Значение атрибута TITLE тега HTML-документа. Возможности HTML для разработчиков Web-страниц. Параметры тега
, регулирующие отступы вокруг изображения. Оформление комментариев в CSS. Теги логического форматирования текста (phrase elements).
тест [19,9 K], добавлен 11.10.2012История развития Интернета и принципы его работы. Сквозные протоколы и шлюзы. Логическая и физическая структура сайта. Основы HTML и форматирование текста. Списки, таблицы, гиперссылки. Мультимедиа на web–странице. Формат задания фреймовой структуры.
курсовая работа [1,2 M], добавлен 27.03.2009Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Технология и основные элементы World Wide Web. Язык гипертекстовой разметки документов HTML. Универсальный способ адресации ресурсов в сети URL и интерфейс шлюзов CGI. Алгоритм решения задачи с использованием табличного процессора MS Excel 2007.
курсовая работа [942,0 K], добавлен 03.05.2011Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Размещение кода скрипта JavaScript непосредственно на HTML-странице. Сценарий JavaScript и список основных событий. Полезные конструкции на PHP. Некоторые функции для работы с массивами. Фрагмент кода JavaScript из "Эконометрической модели России".
презентация [331,2 K], добавлен 25.09.2013Применение многоязычного текста. Структура HTML документа. Элементы стиля шрифтов. Разделы, заголовки и горизонтальные линии. Термин и его определение. Изменение основного шрифта. Комментарии, оформление цитат, разрывы строк и цветовые спецификации.
презентация [672,5 K], добавлен 22.06.2014Особенности программирования на языке HTML и JavaScript. Основные стили форматирования текста. Анализ основных приемов и методов создания страниц, рисунков, таблиц и гиперссылок. Основные цвета и их коды. Разработка собственного сайта и его презентация.
курсовая работа [61,3 K], добавлен 29.01.2016Структура систем Transcend Manager, их основные элементы и характеристика, назначение. Методы цветового кодирования. Выбор узла для перехвата пакетов и выделение под перехват пакетов буфер. Установка фильтров и декодирование пакетов, определение ошибки.
лабораторная работа [2,5 M], добавлен 23.08.2009Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа [86,7 K], добавлен 25.03.2013
