Главная Коллекция "Otherreferats" Программирование, компьютеры и кибернетика Оформление текстов

Оформление текстов

Использование текстового процессора, отображение текста в 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

Подобные документы

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.

© 2000 — 2025, ООО «Олбест» Все наилучшее для вас