Текст

HTML text formatting

In HTML, there are tags for changing the appearance of the text, such as and . They are used to select text in bold or italic, such tags in HTML are called tags for formatting.

Text formatting

This example demonstrates how you can edit text in an HTML document using special tags:

Text
 
Text
 
Text
 
Text
 
Text
 
This is the subscript and the superscript
 

Tag

The

tag allows you to select a part of the source text that should be displayed by the browser in its original form, that is, the same characters and with the same number of spaces and line breaks. All text between the opening 
tag and the closing
 
 tag will be displayed in monospaced font:
 
 
It saves the author's text formatting (leaves unchanged) and makes the font monospaced
 
Tags for code
 
The example shown below demonstrates the difference in output of the contents of the tags to the screen:
 
Source code 
Keyboard input 
Sample code 
Selecting a variable 
 
These tags are usually used to show the program code on the page.
 
 
Tag
 
The address is a common element of many HTML documents, to allocate an address on the page, there is a special tag separating the text enclosed in it from all other content.
 
Most often it is used to highlight contact information, for example, an e-mail address or a method of communication with the author/owner of the document, article or site:
 
Abbreviations
 
The example shows how you can write an abbreviation:
 
UFO

 
The title attribute is needed for the tooltip, it appears when you move the cursor over the abbreviation.
 
 
Text direction
 
The example shows how you can change the direction of the text:
 
 
The bdo tag specifies the direction of the text - from left to right and vice versa.
 
 This is our text 
 
 
Quotations
 
In HTML, there are two tags for highlighting quotes in the text - and . The tag is a inline element and is intended to highlight short citations directly in the paragraph text. Text placed inside the element is displayed by default in double quotes by most browsers.
 
Unlike the tag, the tag is a block element, it is intended to highlight long quotes that are more similar in volume to whole paragraphs. In most browsers, the text of the element will be displayed with a small indent to the right and have line breaks before and after itself:
 
A long quote:
 
This is a very long quote.This is a very long quote.This is a very long quote. This is a very long quote.This is a very long quote.This is a very long quote.
 
For long quotes, the browser inserts indents from all sides. 
 
Short quote: This is a short quote. 
Short quotes are enclosed in double quotes. 
 
 
Removed and inserted text
 
The example demonstrates how you can mark text in a document that has been deleted (marked as a crossed outline) or inserted (marked as underlined):
 
 
The contents of the del tag, most browsers display strikethrough, and the content of the ins tag - underlined 
 
 
Note: you can also specify a strikethrough and an underscore using the CSS property of text-decoration .
 
Copying materials from this site is possible only with the permission of the site administration and 
when you specify a direct active link to the source. 
2011 - 2021 © puzzleweb.ru
 
Источник
 
HTML Text Formatting
 
HTML contains several elements for defining text with a special meaning.
 
Example
 
This is subscript and superscript
 
HTML Formatting Elements
 
Formatting elements were designed to display special types of text:
 
 
- Bold text
 
- Important text
 
- Italic text
 
- Emphasized text
 
- Marked text
 
- Smaller text
 
- Deleted text
 
- Inserted text
 
- Subscript text
 
- Superscript text
 
 
HTML and Elements
 
The HTML element defines bold text, without any extra importance.
 
Example
 
The HTML element defines text with strong importance. The content inside is typically displayed in bold.
 
Example
 
HTML and Elements
 
The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
 
Tip: The tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
 
Example
 
The HTML element defines emphasized text. The content inside is typically displayed in italic.
 
Tip: A screen reader will pronounce the words in with an emphasis, using verbal stress.
 
Example
 
HTML Element
 
The HTML element defines smaller text:
 
Example
 
HTML Element
 
The HTML element defines text that should be marked or highlighted:
 
Example
 
Do not forget to buy milk today.
 
 
HTML Element
 
The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:
 
Example
 
My favorite color is blue red.
 
 
HTML Element
 
The HTML element defines a text that has been inserted into a document. Browsers will usually underline inserted text:
 
Example
 
HTML Element
 
The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:
 
Example
 
HTML Element
 
The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] :
 
Example
 
This is superscripted text.
 
 
HTML Exercises
 
HTML Text Formatting Elements
 
 
 
Tag
 
Description
 
 
 
 
Defines bold text
 
 
 
 
Defines emphasized text
 
 
 
 
Defines a part of text in an alternate voice or mood
 
 
 
 
Defines smaller text
 
 
 
 
Defines important text
 
 
 
 
Defines subscripted text
 
 
 
 
Defines superscripted text
 
 
 
 
Defines inserted text
 
 
 
 
Defines deleted text
 
 
 
 
Defines marked/highlighted text
 
 
 
For a complete list of all available HTML tags, visit our HTML Tag Reference.
 
Источник
 
Форматирование текста
 
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
 
 Табл. 1. Теги для форматирования текста 
  Код HTML Описание Пример   Текст Жирное начертание текста Текст   Текст Курсивное начертание текста Текст   Текст Верхний индекс e=mc 2   Текст Нижний индекс H2O    
Текст
  Текст пишется как есть, включая все пробелы 
 
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.
 
Пример 1. Жирный курсивный текст
 
      
Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.
  
 
Результат данного примера показан на рис. 1.
 
 
Рис. 1. Вид курсивного жирного начертания текста
 
Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
 
Пример 2. Создание нижнего индекса
 
      
Формула изумруда: Be3Al2(SiO3)6
  
 
Результат данного примера показан на рис. 2.
 
 
Рис. 2. Нижний индекс в тексте
 
Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.
 
Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
 
Источник
 
Purpose and Placement of 
HTML Commands
 
We offer this table as a quick reference to supplement the HTML tutorial. It shows the commands, a brief statement of their use, which attributes can modify them, and which commands they can inhabit or include, but it doesn't go over the basics of HTML syntax. If you're new to HTML, visit Spin Doctor's Web Design 101 first. 
 
name="key" of key/value pair. 
content="value" of key/value pair.    indicates the full URL of the current document href="URL"     allows you to select a title that will appear in the title bars of browser windows and in bookmarks (default is the actual filename of your document)   Body 
 
 
 
 
Top
 
Next>>
 
 
    Formatting 
 
 
 
Top
 
Next>>
 
 
    .  centers
enclosed
text  
. or 
 
.
 
. 
. 
. 
. 
. 
. 
. 
. 
. 
.   
.
 
the value for the size attribute can be a number from 1 to 7 (default is 3), or (in quotation marks) a number relative to the current size, e.g. "+2".  

.
.
.
.
..
.
.
.
.
.  
.
 
.
 
.
.
.
, , or
 
.
.
.
.
 
.
 
.
 . 
.
.
.    
. 
 or 
 .    .  tells browser to emphasize 
enclosed text   
.  tells browser to place stronger emphasis on enclosed text   
.  a citation   .  distinguishes text to be typed   
.  sample text   .  renders text in monospaced typewriter font   .  puts the text in italics    
.
  preformatted 
 opens an indented list item (with a number, in an ordered list, 
or a
 bullet, in an unordered list)  type= sets the type of marker (1, A, a, i, disc, circle, square) introducing each list item 
value= allows you to set the number or letter of an ordered list item .
em strong code samp kbd var cite tt . i 
ol ul dir menu dl 
 
.
 
.
  dir menu ol ul    these tags mark the terms and definitions (respectively) in a definition list  
.
    Tables 
 
 
 
Top
 
Next>>
 
 
     .  creates a table Netscape extensions:
border=
(width, in pixels, of the border to be drawn around the table. a value of FRAME will enclose just the outside of the table; BASIC, the border and cells) 
cellpadding= (spacing between the contents of the cell and the cell borders) 
cellspacing= (size of the lines dividing the data cells) width= (width in pixels or a percentage of the window)  . 
.
 
 table  .    Hypertext 
 
 
 
 
Top
 
Next>>
 
 
    .  creates a link to another document or to another segment of the same document href="URL" or "file" or "#name" of subfile in the document 
name="name of subfile in this document"
 
rel, rev, urn, title, methods 
 
.
.
.
.
.
.
.
.
.
. .
 
.
 
 b cite code , or 
.
..
. 
.
 
.
.
.
.
 . 
 or 
 .    Images 
 
 
 
Top
 
Next>>
 
 
     loads an inline image ismap= 
src= 
alt="text" 
Netscape extensions:
align texttop/ absmiddle /baseline /bottom, 
vspace 
hspace 
width 
height 
border 
lowsrc="https://transaction.net/web/tutor/file%20to%20be%20loaded%20with%20the%20main%20document" . 
.
 
.
cite code , , or
 
em 
. i kbd p samp strong tt var   Forms
 
 
 
 
Top
 
Next>>
 
 
     
.
  creates a form action="URL" of script to process form input 
method="get" or "post" how the input will 
be sent to the gateway on the server side 
enctype=
"application/ x-www-form-urlencoded" only one value possible right now . p, lists, pre, 
.
 
 , isindex table hr address input select textarea  
.
 
.or
 
 . 
 or 
 .     input widget for a form type="(checkbox/ hidden/ radio /reset /submit /text /image)" 
name="name of this item as passed to the script (in name/value pair)," 
value="default value (for text or hidden widget); 
value to be submitted with the form (for a checkbox or radio button);
or label (for Reset or Submit buttons)" 
src="source file for an image",\ 
checked indicates that checkbox or radio button is checked 
size="size in chars of text widget" 
maxlength="no of characters in a text field" 
align="(texttop/ absmiddle /baseline /bottom,)"  
.
    . <br /> multiline text entry widget name=" (name to be passed to the script as part of name/value pair)" 
rows="no. of rows"
cols="(no. of cols.)"  
.
     creates a menu or scrolling list of possible items name=name of data field 
size=#of items to display
multiple allows multiple selections   
.
     indicates a possible item within a select widget selected=default selection 
value="data submitted if this option is selected"  Breaks, Headings, and Titles 
 
 
 
Top
 
 
     allows you to select a title 
that will appear above your browser window 
(default is the actual filename of your document) inside 
.    
.
 
 
.
 
 
.
 
 
.
 
 
.
 
 
.
  marks six levels of headings 
(1 is largest; 
6 smallest) align=center (3.0) . img 
br em strong code samp kbd var cite tt . i  
.
 
.
 
.
 
 
.
 
 
.
 
 . 
 or 
 .     creates a paragraph 
break .
and 
 
em strong code samp kbd var cite tt . i  
.
 
.or
 
 
.
     forces 
a 
line 
break clear=right, left, all (3.0) .
 
.
 
.
cite 
code 
, or
 
.
em 
i 
kbd 
, 
 
.
 
samp 
strong 
tt 
var    draws a horizontal rule line Netscape extensions: 
size=(in pixels, the width of the line itself) 
width=(in pixels, or a "#%" of the screen, the width traversed by the line) 
align=(horizontal placement of the line, if it doesn't cross the entire screen) 
noshade eliminates the line's shadow  
.
 
. , 
 
.
 
 , 
 
.
 
 , 
 .    
Источник
 
Читайте также:  Анонимный блок