Hypertext Markup Language: HTML Css
Uploaded by
ბორისი ლომიძეHypertext Markup Language: HTML Css
Uploaded by
ბორისი ლომიძეelement border body width auto
left font height
properties
background
element properties right Style
top
properties
edge
COLOR
Style
right
text
line
display
div
box font body must
VALUE width
padding
user
FLOAT
user
text
auto normal
element
Style COLOR
bottom
flow
height auto border COLOR
user
text
normal font text auto
text
HyperText
Markup Language
HTML&CSS
text
properties
VALUE
margin
text
auto
properties
box
normal
text
flow
user
COLOR COLOR
COLORdiv height
line FLOAT
font left display
background
edge
background background
attribute
Style div
properties
text
user user
div
text text
VALUE
COLOR
must
user
auto
FLOAT
width
font box
normal
element
bottom
font body
text
height left right border VALUE
text
user
COLOR
COLOR font
flow text
auto
text
auto
text
right
attribute left border text
Style right Style
top
top
left right
COLOR
COLOR
attribute
display
Style box
background
right properties Style
top
Style
top
COLOR
display
COLOR
line
COLOR properties properties
line
normal
edge
margin
FLOAT
box font box
margin
font
user
text
user
text
COLOR left border
Lesson 2
Text formatting
by means of HTML
Contents
Text Formatting with HTML....................................................3
Block and Inline Tags.................................................................4
Tags of physical and logical formatting...................................8
Deprecated tags and attributes...............................................12
Character Entities in HTML. Using Them
in an HTML Page.....................................................................16
Copyright or Trademark Signs...........................................17
Using spaces and hyphens..................................................18
The Use of Entities...............................................................22
CSS properties for text formatting.........................................26
Home Assignment....................................................................36
Assignment................................................................................37
HTML Special Entities.............................................................37
Block tags...................................................................................46
Inline tags..................................................................................61
2
Text Formatting with HTML
Text Formatting with HTML
In the last lesson, we considered a number of tags that
make up the basic structure of the html document and allow
you to divide the text into basic blocks — paragraphs, headings,
divs. As you know, these tags are not enough to create a full-
fledged html-page, in which there are quite a lot of elements.
Today our task is to understand the classification of tags
from the point of view of the space they occupy on the page
and from the point of view of semantics — the logical structure
of document markup.
մմ There are references to files with examples and home
task in the text. You can find them in the archive
attached to the PDF of this lesson.
3
Lesson 2. Text formatting by means of HTML
Block and Inline Tags
We have already examined the differences between block
and line elements in the last lesson. Let us return to this
question once more, because it is important when marking
an html document.
Block elements are such HTML elements, which by default
occupy all available space inside the browser or parent element,
even if their content is very small. Inline elements are such
elements that take up as much space as there are text in them,
and they are placed inside the block ones. It is important to
note that line elements are always located next to each other if
they go in a row in the markup of the document, and block ones
are to be moved to the next line. In addition, block elements
are intended for structuring a page, and inline ones are used
to give a specific function to a text (a link, for example) or
to format this text (<b> or <i>). Another difference between
block and inline tags is that block tags always contain both
an opening and a closing tag, and inline tags can consist of
only one opening tag (for example, <br> or <img>).
From the standpoint of CSS, the differences between
these two groups are specified by different values of the same
css property: display: block (for block elements) or display:
inline (for inline elements).
Also, let's define what is a parent element, or a parent
container? This is the element in which the required tag will
be nested. Most often this container is the <body> tag, because
everything that should be displayed on the html page is placed
in this tag. But, if we are talking about the inline tags <del>
4
Block and Inline Tags
and <ins>, then most likely they will be placed in the <p> tag,
which will be parent for them. Tags <del> and <ins> will be
called nested, or child in this case.
Which elements apply to each of the categories?
Block Elements
Tag Tag Assignment
html Root tag
body Document body
h1-h6 Header tags
p Paragraph
div Content block
address Address
article Article
aside Side column
nav Navigation on the page
main The main content of the web page
header The top of the page or section
footer The bottom of the page, section or block quotation
section Page section
audio Insert audio
video Insert video
blockquote Block quotation
caption Table header
colgroup Defines the column group of a table
table Table
thead, tbody,
To select row groups of a table
tfoot
form To create a form
datalist Content for filling out the form field
select Drop-down list
fieldset Form field group
legend Header for fieldset
dl, ul, ol List tags
5
Lesson 2. Text formatting by means of HTML
Tag Tag Assignment
canvas To draw graphics using JavaScript
details To create an interactive element
summary The visible part of the text of the details element
figure The wrapper for the <img> element
figcaption The header for the <figure> tag
map Interactive map
iframe Container for loading the contents of another html-
page
pre Preformatted text
progress Progress indicator
Inline Elements
Tag Tag Assignment
a Link
abbr Abbreviation
b, strong Bold text
i, em Italic text
dfn Definition
br Line break
button, input, The button, the text field and the text area - the form
textarea, elements
label Label for the form element
cite Title of work, reference to source
code To highlight program code
kbd Code input from the keyboard
samp An example of outputting something in a computer
program
var Variable in any program
col Column in the table
del Text that has been deleted
ins The text that was added (often follow the <del> tag)
s Strikethrough text, i.e. text that is not already correct
or reliable. It's better to use the <del>
6
Block and Inline Tags
Tag Tag Assignment
span Container for css-formatting of a certain amount of
text
sub Subscript (H2O)
sup Superscript (x2)
small Smaller text
img Inserting images
mark Highlighted text
meter Horizontal meter
q Short quote
I immediately make a reservation that today we will look
at the examples of only a part of these tags, since we simply
do not have enough time for everything. In addition, some
elements assume the use of several tags at once. For example,
<table>, <tr>, and <td> tags are required to form a table, but
<caption>, <colgroup>, <col>, <thead>, <tfoot> and <tbody>
tags can be also used inside the table. In addition to the <form>
tag, the <input>, <textarea>, <select> and <button> tags are
usually used to create a form, and each of these elements has
its own features, which we will be discussed in a separate topic.
Today, we need to understand the differences between
inline and block tags and see how browsers display them when
formatting an html page.
Examples can be found in separate documents:
■■ Block tags
■■ Inline tags
Topic-related links
■■ http://htmlreference.io/
■■ https://www.w3schools.com/html/html_blocks.asp.
7
Lesson 2. Text formatting by means of HTML
Tags of physical and logical
formatting
At the beginning of the HTML development, new tags
were added, which allowed, as a rule, visually changing
the appearance of the text. These are <b> and <i> tags,
which are used up to now and are already discussed, and
which set bold and italic style of the text. There is also
a <u> tag that underline the text, and the <s> tag strike it
through, <small> makes the text smaller, and the <sup>
and <sub> tags, respectively, convert the text to upper and
lower indexes. Another tag — <pre> allows you to display
text in the html-document in the form in which it was
typed in a text editor, i.e. preserving all line breaks, tabs,
and extra spaces.
We can say that all these tags physically change the ap
pearance of the text on the html-page. Therefore, they are
referred to the group of physical formatting tags.
In contrast to these tags there are logical formatting
tags that also physically change the appearance of the text
on the page, but their name contains, as a rule, a word or
a part of it in English. For example, the <del> tag derives
from the English word delete and indicates text deleted in
the new version of the document or after some time. Visually,
it displays the text stricken through. The <dfn> tag is derived
from the English word definition, and is intended just for
displaying any definitions. In the browser, it will be highlighted
in italic text.
8
Tags of physical and logical formatting
In HTML5, there are many logical formatting tags that
define the semantic structure of a document. These are tags
such as the header — header of a page or article, main —
the main part of the document, section — a section of
the document, article — an article, footer — the bottom
of the document or article. These tags were introduced
to replace the divs with the appropriate classes or id
and define the markup logic for the page. In this case,
the word semantics, which is very often encountered
when describing html-markup in various articles, indicates
the correspondence of the internal markup of the html-
document and its visual formatting. From the point of view
of semantics, consider page markup and search engines,
and screen readers — programs for reading web pages from
the screen for visually impaired people.
For example, the <strong> and <em> tags, like the <b>
and <i> tags, print the text in bold or italic, but also have
a semantic meaning. The text enclosed in the <strong> tags
has the increased significance of its contents, and the text
in the <em> tags (emphatic stress) contains an emotional
emphasis on this passage of the text. In ordinary speech, we
emphasize such words by voice (intonation, loudness, etc.).
9
Lesson 2. Text formatting by means of HTML
It should be noted that the HTML5 standard introduced
semantic content for physical formatting tags. The same <b>
tag, already mentioned repeatedly, should be used for text
that the reader should pay attention to, but without increasing
the importance of text or intonation as it is for the <strong>
tag (Link to an article). As for the <i> tag, it is implied that it
contains a text that is out of the general environment, but not
emotionally colored.
It should be noted that quite a few logical formatting tags are
not used too often and on sites of a certain subject. For example,
elements <code>, <var>, <samp>, <kbd>, as a rule, are used on
websites devoted to one or another programming language, and
<abbr> and <dfn> are more likely to be found on reference sites,
providing information on any course (chemistry, physics, law,
etc.). It is very convenient for such elements to describe uniform
formatting rules for the entire site in css-properties.
I think that at this stage it will be quite difficult for you to
understand why all these "semantic difficulties" are needed,
if the text visually looks exactly the same. Nevertheless, in
the process of learning HTML as a hypertext markup language,
you will understand that you should pay close attention to
semantics and use predominantly logical formatting tags,
because they are more important for SEO1, and for screen
readers able to emphasize some of the logical tags by voice.
1
SEO (Search Engine Optimization is a series of activities aimed at making
the site appeared on the first pages of search engines by certain search phrases
or words. While the goal of the HTML course is not to promote the site, in
fact it is very important to take into account some requirements related to
SEO when designing the page, so that you do not have to re-structure the site
later. Read about SEO: Wikipedia — https://en.wikipedia.org/wiki/Search_
engine_optimization; Google for web-masters — https://www.google.com/
intl/en/webmasters/learn/
10
Tags of physical and logical formatting
In order to view the use of both groups of tags, open the file
tags_start.html. Ready-made markup is in the tags.html file.
In HTML5, there are also added elements that can be
conditionally referred to as interactive. These are elements
such as <details> and <summary>, which allow you to
display hidden content by click, and <progress> <meter>,
the use of which makes sense after learning the JavaScript
language since it is best to manage them in this language.
Look at the appearance of these elements in the file
interective.html.
11
Lesson 2. Text formatting by means of HTML
Deprecated tags
and attributes
HTML, as the hypertext markup language, was repeatedly
changed and had a number of standards, in which one tags
were introduced and the use of others was abolished. HTML5
standard introduced many new tags, but some of those that
were popular in previous versions of HTML were defined as
obsolete or deprecated. Thus, the use of such tags is highly
recommended in your document that supports the HTML5
standard, otherwise the document will not pass validation.
Let me remind you that the browser determines which
standard your document belongs to by DOCTYPE, which is
specified at the very beginning of the markup, and it looks
like this for HTML5:
<!DOCTYPE html>
As for the deprecated tags and attributes it would be
desirable to note that we will not consider them in detail
in this course since our goal is to create a layout based on
modern standards. Nevertheless, there are a lot of lessons
on the Internet that were created long ago, in which these
deprecated tags or attributes are used and recommended.
For example, to increase the font size, the <big> tag was
used previously, which is now considered deprecated, but
the <small> tag, which reduces the font size, is still used.
The same goes for the <strike> tag - it crossed out the text
in HTML4, but it's out of date in HTML5. Instead, you can
use the <s> tag or, better, the <del> tag, which indicates that
12
Deprecated tags and attributes
the crossed out information is obsolete or not correct at all.
The same goes for the <tt> tag, which was previously used to
display text in monospaced font.
Another example: to denote the abbreviation, it was
possible to use previously two tags <abbr> or <acronym>. In
the HTML5 standard, only <abbr> remains, and <acronym>
becomes deprecated. This was done due to the fact that
<acronym> tag (a conventional abbreviation that is used as
an independent word, for example, the UN or DOM, or IMHO
often used in comments), is different from the abbreviation
(the <abbr> tag) by sound, but from the point of view of
HTML has the same meaning, so the need to use acronyms has
disappeared. For example, in the documentation of developer.
mozilla.org you can see this message:
There is another deprecated tag, which for some reason is
incredibly popular among students starting to learn HTML.
13
Lesson 2. Text formatting by means of HTML
This is a <font> tag that allowed specifying the size, color and
font family in previous standards. For example:
The HTML validator for this example produced the fol
lowing error:
In fact, this tag earlier replaced the use of such css-
properties as font-size, color and font-family. Please do not
use this tag in your files. It is already so deprecated that its
presence in your code is a direct indication that you do not
know HTML, and you are simply too lazy to deal with css.
The same applies to attributes, which in earlier standards
were used pretty often. For example, an attribute such as align
had the following values: left, right, center, justify, and very
often used to format text in headings, paragraphs, divs and
even for text wrapping around images.
Due to the fact that all the possibilities of this attribute can
be replaced with the css-property text-align or the property
float for pictures, this attribute is deprecated.
Look at the list of deprecated tags and attributes in
an article at html.com. A screenshot with a list of tags and
attributes can be viewed below.
14
Deprecated tags and attributes
If you look closely at this list, you can conclude that those
tags and attributes have become deprecated, the need for
which either has disappeared, or they can be replaced with
css-properties.
Related Links:
■■ https://developer.mozilla.org/en-US/docs/Web/HTML/
Element;
■■ https://html.com/html5/#Deprecated_Features_in_
HTML5;
■■ https://html.com/invalid-html/#HTML_Elements_to_
Stop_Using_Immediately.
15
Lesson 2. Text formatting by means of HTML
Character Entities
in HTML. Using Them
in an HTML Page
You may have encountered characters in Word
documents. They are usually not on the keyboard, but
are inserted using a special menu item. For example,
you cannot type the copyright character © or the arrow
characters (↓ or ↑). The same situation is in HTML: some
characters can either be copied from the text in the same
Word, or added using special codes. Character entities have
2 syntax options — in the form of parts of English words or
numbers, which necessarily begin with the ampersand (&)
and end with a semicolon (;). You can use any of the options,
but note that without a named code character entities can
be displayed not completely or be displayed incorrectly in
different browsers.
For example, the copyright symbol © can be represented
as a character entity © or ©
In the text editor you will see a set of characters, and on
the html-page they will represent only one character.
You will find tables of various characters divided by
category in the addendum of this lesson. It should be noted
that most of them, most likely, will never be used, but there
are a number of characters, which should be known by heart,
since you will apply them in different situations.
16
Character Entities in HTML. Using Them in an HTML Page
Copyright or Trademark Signs
For example, this is the same copyright sign (copyright),
without which usually any site cannot do. Most often, it is
placed at the bottom of the site (footer). For example, on
the official website of the STEP Academy it looks like this:
Also, the trademark (entity ™ or ™) can be
used next to the company name. For example:
© 2017 Audit Systems LLC ™
However, this sign is used much rarer than the copyright
character.
As for the Brackets, when you enter the initial characters
of the entity, a hint appears, which contains both the complete
code and its appearance on the page.
You can see the example in the header-section-nav.html
file in the examples folder.
17
Lesson 2. Text formatting by means of HTML
If the company (enterprise) for which the site is
made has a registered trademark, then you can indicate
the sign ® (entity ® or ®) next to the name of this
company (enterprise). For example, this entity is used on
the Wikipedia site.
Excerpt from the page code:
մմ Note: To see the code of the page opened in the browser,
you can press Ctrl + U keys or right-click anywhere
in the page to select the View Page Code item in
the shortcut menu.
Using spaces and hyphens
There are situations where some phrases cannot be moved
to another line by words. The most common situations are
the surname and initials, the form of ownership and the name
18
Character Entities in HTML. Using Them in an HTML Page
of the company, the name of the city or village. For example,
A.F. Ivanov, Stroyinvest LLC, Kharkov. In this case, for their
"gluing", the non-breaking space or   is used
instead of the usual blank space. Compare the appearance of
the text in the screenshot:
Without non-breaking space
It should be considered that our company Stroyinvesttrade
LLC represented by the Chief Executive Officer V.N.
Boyko will represent all our best workings at the Expo
2018 in January 2018 in Kharkov
With non-breaking space
It should be considered that our company
Stroyinvesttrade LLC represented by the Chief Executive
Officer V.N. Boyko will represent all our best workings at
the Expo 2018 in January 2018 in Kharkov
Another situation is related to the need to add hyphens
between parts of words, because the text block size may be too
small to accommodate long words like "recommendations".
While HTML does not fully support the automatic hyphenation
by syllables, although this is a matter of the near future. Now
if you need to break the too long word, you can put the soft
hyphen signs (­ or ­) in the right places. They
should be set in accordance with the norms of the language.
The number of hyphens depends on the length of the word and
your needs. The soft hyphens can be used after each syllable:
Rec­om­men­da­tion
Soft Hyphen and Nonbreaking Space
According to a report on the results of a sociological survey
published by Microsoft in 2015, an average person aged
19
Lesson 2. Text formatting by means of HTML
18 to 24 years old can focus on something for no more than
8 seconds. This is the so-called attention span, a period
of continuous focus of attention. Fifteen years ago this in-
dicator was equal 12 seconds. The goldfish has an attention
span of nine seconds. That is, if we take the average "yester-
day's teenager" and place him in a maze, such as those for
studying the small rodents’ ability to learn, then he will help-
lessly bang into the walls, since he is pathologically incapa-
ble of focusing attention for some time span to memorize
the details of the route. And if you give him a mobile phone,
he will never get out. ("What do you do when nothing is oc-
cupying your attention?" The 77% of respondents answered
"I reach for my phone").
As for the automatic hyphenation, the css-property
hyphens was introduced for this purpose. With the value
auto when specifying the language in the lang attribute for
the html tag, long words will be automatically hyphened
according to the desired dictionary. For example, the text
that we previously hyphened using the special character ­
can now be hyphened by specifying css-styles:
<html lang="ru">
…
<style>
.hyphens {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
</style>
The downside of this method is that such hyphens are
not supported by all browsers. For example, if in Firefox text
20
Character Entities in HTML. Using Them in an HTML Page
appears with hyphens, then in Chrome we see "ragged edges"
on the right side.
See the example in the file entities.html.
In order to be aware of how this or that css-property is
supported in browsers, you can make a request at the site
caniuse.com.
21
Lesson 2. Text formatting by means of HTML
In the screenshot you can see that the green color indicates
browsers and their versions that support this property, red are
those that do not support, olive means supported, but with
some kind of condition (for example, Chrome started with
version 55 only supports Android platforms or Mac).
The minus sign indicates that the property is supported
with the so-called "vendor prefix":
■■ -moz — for Mozilla FireFox,
■■ -ms — for Internet Explorer,
■■ -webkit — for Safari, Chrome, and other browsers based
on Chromium — the Chrome engine
The Use of Entities
There are a lot of character entities, but I would like to
emphasize two of them, which are related to the html-code.
For example, on such reference sites as http://htmlbook.
ru/ or https://webref.ru/ there are lots of code examples
that you can copy into your text editor and see in reality.
How can it be possible to display tags that the browser
should interpret and display as text? To do this, all the angle
brackets are "coded" using entities: the left corner bracket
(less than sign <) — as <, the right angle bracket (greater
than sign >) — as >.
22
Character Entities in HTML. Using Them in an HTML Page
After that, the code is displayed as plain text.
In the example in the file entities.html, you can see that
the html code has ceased to be the same in a text editor due
to replacing bracket with entities, but looks like the html code
on the page.
23
Lesson 2. Text formatting by means of HTML
In order to save the appearance of text lines in the editor
and on the page, you must set the following css-properties
for the <code> tag:
code {
white-space: pre;
}
And we see that all the spaces, tabs, and line breaks are
displayed on the html page.
24
Character Entities in HTML. Using Them in an HTML Page
Also, such angle brackets are converted into entities in
CMS (content management systems) when trying to insert
them into the text of the article. And in the server programming
language PHP (Hypertext Preprocessor), which is used to create
and edit a set of web sites, as well as to process these forms,
for example, there is a special function for converting angle
brackets into entities to prevent the insertion of malicious
code. However, we will talk about this in other courses.
Sometimes you might need short (– or –)
and long dashes (— and —). Probably, characters
of quotes, arrows or currencies will be useful. They can either
be copied from any text editor (for example, Microsoft Word)
or added as an HTML entity.
All other entities are used quite rarely. Usually these are
narrowly targeted sites where physical or chemical formulas
should be used, and so on.
25
Lesson 2. Text formatting by means of HTML
CSS properties
for text formatting
Today, we'll look at the properties that are used to break
lines, to form intervals between characters or words, and to
design a text.
1. The white-space property is responsible for displaying
the spaces between words. By default, the value normal sets
automatic word wraps when the right edge of the browser or
the parent block is reached.
white-space: normal | nowrap | pre | pre-line | pre-wrap
The nowrap value does not take into account the spaces
and line breaks in the HTML code, and all text is displayed
as one line. In this case, a horizontal scroll bar can be added
if the text does not fit the width of the parent container. Only
adding the tag <br> moves the text to a new line.
26
CSS properties for text formatting
The pre value displays the text with all the spaces, tabs,
and hyphenations that are present in the HTML code.
For a too long line a horizontal scroll bar will be added in
the browser.
The pre-line value does not take into account the spaces,
and the text itself will be moved to the next line if it does not
fit into the parent container.
The pre-wrap value saves all the spaces and hyphens that
were in the text editor, but if the line does not fit the width of
the parent container, the text will automatically be moved to
the next line.
Emmet wsn, wsp, wsnw, wspl, wspw
2. The word-break property is responsible for breaking
lines inside words that do not fit the intra-parent container
in width. Has the following values:
word-break: normal | break-all | keep-all
The normal value (default) hyphenates the whole word
when it reaches the right edge of the parent block
The break-all value adds line breaking so that the word
fits into the given width of the parent block (cannot be used
for text in Chinese, Korean or Japanese).
27
Lesson 2. Text formatting by means of HTML
The keep-all value prevents the line breaking for text
in Chinese, Korean or Japanese. For other languages, it
corresponds to normal.
Emmet: wbn, wbba, wb:ka
3. The word-wrap property specifies whether to wrap
words that do not fit within the parent container in width.
Has the following values:
word-wrap: normal | break-word
The normal value (default) wraps the whole word when it
reaches the right edge of the parent block or in places where
the <br> tag is added inside the text.
The break-word value adds the line breaking so that
the word fits into the specified width of the parent block.
28
CSS properties for text formatting
Emmet: wwn, wwb
4. One of the new properties added to the CSS3 speci
fication is writing-mode, which defines the direction of text
on the page — horizontal or vertical. The default value is
horizontal-tb:
writing-mode: horizontal-tb | vertical-rl | vertical-lr
■■ The value horizontal-tb determines the direction of
the text horizontally from top to bottom and from left
to right.
■■ The value vertical-rl determines the direction of the text
vertically from top to bottom and from right to left.
■■ The value vertical-lr determines the direction of the text
vertically from top to bottom and from left to right.
Applies to all elements except for cells and table rows
Emmet: wm
29
Lesson 2. Text formatting by means of HTML
5. The word-spacing property specifies the spacing
between words. By default, the normal value sets the normal
interval corresponding to the font parameters. You can also
specify the size in any units except %:
word-spacing: number in px, pt, em, but not in %| normal
Emmet: wos
Negative values that
reduce the distance between words
are also supported.
In the case where the text-align: justify property is set
for the text, the spacing between words will be set forcibly,
but the value will not be less than that specified in word-
spacing.
30
CSS properties for text formatting
6. The letter-spacing property allows you to set
the interval between the characters for the selector. By default,
this distance is determined depending on the font. You can
specify negative values, if necessary, and id this does not make
the appearance ugly.
letter-spacing: number in px, pt, em, but not in %| normal
Emmet: ltsn, lts:number
.lettering {letter-spacing: 6px;}
31
Lesson 2. Text formatting by means of HTML
7. The text-transform property allows you to change
the case of text by converting characters to uppercase or
lowercase. The value none leaves the text unchanged, and
capitalize converts the first letters of each word to capital
(more peculiar for the English language).
text-transform: capitalize | lowercase | uppercase | none
Emmet: ttn, ttc, ttl,ttu
8. The text-decoration property adds text underlining
(underline value), strikethrough (line-through value) or
overlining (overline value). The value of none leaves the text
unchanged.
text-transform: underline | line-through | overline | none
32
CSS properties for text formatting
The text-decoration property consists of 3 properties that
can be set individually or together in the integrated property
text-decoration:
text-decoration: text-decoration-line |
text-decoration-style |text-decoration-color
The text-decoration-line property defines the line type
and has values as in the main property:
text-decoration-line: line-through| overline |
underline | none
You can add multiple lines by listing values separated by
commas.
The line type is defined by the text-decoration-style
property:
text-decoration-style: solid | double | dotted |
dashed | wavy
The values of this property are as follows:
■■ solid — solid single line
■■ double — double line.
■■ dotted — dotted line.
■■ dashed — dashed line.
■■ wavy — wavy line.
The text-decoration-color property specifies the color of
the line. Its values can be set in the same way as for the color
property.
33
Lesson 2. Text formatting by means of HTML
Emmet: tdn, tdlt, tdo, tdu, tdn
9. The text-shadow property allows you to add a shadow
to the text. The values are: the horizontal offset (offX),
the vertical offset (offY), the blur radius (blur), and the color
(color).
By default, any text has no shadow (none).
text-shadow: none | offX offY blur color
You can add multiple shadows by listing their parameters
with a comma.
34
CSS properties for text formatting
text-shadow: offX1 offY1 blur1 color1, offX2 offY2
blur2 color2, offX3 offY3 blur3 color3;
Emmet: ts
You can look at the css-properties in the file css-properties.
html.
35
Lesson 2. Text formatting by means of HTML
Home Assignment
In the homework you will need to format the text of
the article (use the <article> tag) using different tags and
css-styles. Note that the font on the page is sans serif, and
the size of the article is reduced in comparison with the size
of the browser. At the moment we will not consider in detail
how to do this, but simply use the following css properties:
article {
width: 90%;
margin: auto;
}
This will reduce the width of the article and center it in
the browser.
Note that in the text there is often the bold style, including
the color emphasis (red, yellow, green, etc.). Think about
which inline elements can be used for html-markup and do
not forget to specify different classes for color characteristics.
You can find the task in the archive HW2. There is a text
file and an image with the final appearance of the article.
36
Assignment
Assignment
HTML SPECIAL ENTITIES
Trademarks & Copyright
© © © Copyright Sign
® ® ® Registered Trademark
™ ™ ™ Trademark
Signs of Hyphenation and Special Signs
‰ ‰ ‰ Per Thousand Sign
π π π Pi Sign
¦ ¦ ¦ Broken Vertical Bar
§ § § Section
° ° ° Degree
µ µ µ Micro Sign
¶ ¶ ¶ Paragraph Sign
… … … Ellipsis
‾ ‾ ‾ Overline
– – – En-Dash
— — — Em-Dash
´ ´ ´ Acute Accent
№ № Number Sign
­ ­ Soft Hyphen
  Non-Breaking Space
    En-Space
    Em-Space
Currency Signs
€ € € Euro
¢ ¢ ¢ Cent
37
Lesson 2. Text formatting by means of HTML
£ £ £ Pound
¤ ¤t; ¤ Currency Sign
¥ ¥ ¥ Yen And Yuan Sign
ƒ ƒ ƒ Florin Sign
Quotation Signs
" " " Double Quotes
& & & Ampersand
« « « Double Left-Pointing Angle Quotation Mark
» » » Double Right-Pointing Angle Quotation Mark
‹ ‹ Single Left-Pointing Angle Quotation Mark
› › Single Right-Pointing Angle Quotation Mark
′ ′ ′ Prime
″ ″ ″ Double Prime
‘ ‘ ‘ Left Single Quotation Mark
’ ’ ’ Right Single Quotation Mark
‚ ‚ ‚ Single Low-9 Quotation Mark
“ “ “ Left Double Quotation Mark
” ” ” Right Double Quotation Mark
„ „ „ Double Low-9 Quotation Mark
Markers
• • • Bullet
○ ○ White Circle
· · · Middle Dot
† † Dagger
‡ ‡ Double Dagger
♠ ♠ ♠ Spades
♣ ♣ ♣ Clubs
♥ ♥ ♥ Hearts
♦ ♦ ♦ Diamonds
38
Assignment. Цвета в Web-дизайне
◊ ◊ ◊ Lozenge
✏ Pencil
✎ Lower Right Pencil
✐ Upper Right Pencil
✍ Writing Hand
&10084 Heavy Black Heart
Mathematical Signs
× × × Multiplication
÷ ÷ ÷ Division
< < < Less Than Sign
> > > Greater Than Sign
± ± ± Plus/Minus
¹ ¹ ¹ Superscript 1
² ² ² Superscript 2
³ ³ ³ Superscript 3
¬ ¬ ¬ Not Sign
¼ ¼ ¼ Fraction One Quarter
½ ½ ½ Fraction One Half
¾ ¾ ¾ Fraction Three Quarters
⁄ frasl; ⁄ Fraction Slash
− minus; − Minus
≤ ≤ ≤ Less-Than Or Equal To
≥ ≥ ≥ Greater-Than Or Equal To
≈ ≈ ≈ Almost Equal To
≠ ≠ ≠ Not Equal To Sign
≡ ≡ ≡ Identical To
√ √ √ Square Root
∞ ∞ ∞ Infinity
∑ ∑ ∑ N-Ary Summation
∏ ∏ ∏ N-Ary Product
39
Lesson 2. Text formatting by means of HTML
∂ ∂ ∂ Partial Differential
∫ ∫ ∫ Integral
∀ ∀ For All
∃ ∃ There Exists
� ∅ ∅ Empty Set
Ø Ø Ø Uppercase O With Slash (Diameter)
∈ ∈ Element Of
� ∉ ∉ Not An Element Of
∋ ∗ Contains As Member
⊂ ⊂ Subset Of
⊃ ⊃ Superset Of
� ⊄ ⊄ Not A Subset Of
⊆ ⊆ Subset Of Or Equal To
⊇ ⊇ Superset Of Or Equal To
⊕ ⊕ ⊕ Circled Plus
⊗ ⊗ ⊗ Circled Times
⊥ ⊥ Up Tack
∠ ∠ Angle
∧ ∧ Logical And
∨ ∨ Logical Or
∪ ∪ Union
∩ ∩ Intersection
Arrows
← ← ← Left Arrow
↑ ↑ ↑ Up Arrow
→ → → Right Arrow
↓ ↓ ↓ Down Arrow
↔ ↔ ↔ Left-Right Arrow
↕ ↕ Up-Down Arrow
↵ ↵ ↵ Down Arrow With Corner Left
40
Assignment. HTML Special Entities
⇐ ⇐ ⇐ Left Double Arrow
⇑ ⇑ ⇑ Up Double Arrow
⇒ ⇒ Right Double Arrow
⇓ ⇓ ⇓ Down Double Arrow
⇔ ⇔ Left Right Double Arrow
⇕ ⇕ Up Down Double Arrow
▲ ▲ Black Up-Pointing Triangle
▼ ▼ Black Down-Pointing Triangle
► ► Black Right-Pointing Triangle
◄ ◄ Black Left-Pointing Triangle
Stars, snowflakes
☃ Snowman
❄ Snowflake
❅ Tight Trifoliate Snowflake
❆ Heavy Chevron Snowflake
★ Black Star
☆ White Star
✪ Circled White Star
✫ Open Centre Black Star
✯ Pinwheel Star
⚝ Outlined White Star
⚪ Medium White Circle
⚫ Medium Black Circle
⚹ Sextile
✵ Eight Pointed Pinwheel Star
❉ Balloon-Spoked Asterisk
❋ Heavy Eight Teardrop-Spoked Propeller Asterisk
✺ Sixteen Pointed Asterisk
✹ Twelve Pointed Black Star
41
Lesson 2. Text formatting by means of HTML
✸ Heavy Eight Pointed Rectilinear Black Star
✶ Six Pointed Black Star
✷ Eight Pointed Rectilinear Black Star
✴ Eight Pointed Black Star
✳ Eight Spoked Asterisk
✲ Open Centre Asterisk
✱ Heavy Asterisk
✧ White Four Pointed Star
✦ Black Four Pointed Star
⍟ ⍟ Apl Functional Symbol Circle Star
⊛ ⊛ Circled Asterisk Operator
Clocks, Time
⏰ Alarm Clock
⌚ Watch
⌛ ⌛ Hourglass
⌛ ⏳ Hourglass With Flowing Sand
Greek Alphabet
Lowercase Uppercase
Description
Symbol HTML-code Symbol HTML-code
α α Α Α Alpha
β β Β Β Beta
γ γ Γ Γ Gamma
δ δ Δ Δ Delta
ε ε Ε Ε Epsilon
ζ ζ Ζ Ζ Zeta
η η Η Η Eta
θ θ Θ Θ Theta
ι ι Ι Ι Iota
κ κ Κ Κ Kappa
42
Assignment. HTML Special Entities
Lowercase Uppercase
Description
Symbol HTML-code Symbol HTML-code
λ λ Λ Λ Lambda
μ μ Μ Μ Mu
ν ν Ν Ν Nu
ξ ξ Ξ Ξ Xi
ο ο Ο Ο Omicron
π π Π Π Pi
ρ ρ Ρ Ρ Rho
σ σ Σ Σ Sigma
ς ς Final Sigma
τ τ Τ Τ Tau
υ υ Υ Υ Upsilon
φ φ Φ Φ Phi
χ χ Χ Χ Chi
ψ ψ Ψ Ψ Psi
ω ω Ω Ω Omega
Латинский алфавит
Lowercase Uppercase
Sym HTML- Sym HTML- Description
Code Code
bol code bol code
à à à À À À A With Grave
á á á Á Á Á A With Acute
â â â Â Â Â A With Circumflex
ã ã ã Ã Ã Ã A With Tilde
ä ä ä Ä Ä Ä A With Diaeresis
å å å Å Å Å A With Ring Above
æ æ æ Æ Æ Æ AE symbols
ç ç ç Ç Ç Ç C With Cedilla
è è è È È È E With Grave
é é é É É É E With Acute
43
Lesson 2. Text formatting by means of HTML
Lowercase Uppercase
Sym HTML- Sym HTML- Description
Code Code
bol code bol code
ê ê ê Ê Ê Ê E With Circumflex
ë ë ë Ë Ë Ë E With Diaeresis
ì ì ì Ì Ì Ì I With Grave
í í í Í Í Í I With Acute
î î î Î Î Î I With Circumflex
ï ï ï Ï Ï Ï I With Diaeresis
ð ð ð Ð Ð Ð Eth (D with dash)
ñ ñ ñ Ñ Ñ Ñ N With Tilde
ò ò ò Ò Ò Ò O With Grave
ó ó ó Ó Ó Ó O With Acute
ô ô ô Ô Ô Ô O With Circumflex
õ õ õ Õ Õ Õ O With Tilde
ö ö ö Ö Ö Ö O With Diaeresis
÷ ÷ ÷ × × × Multiplication Sign
ø ø ø Ø Ø Ø O With Stroke
ù ù ù Ù Ù Ù U With Grave
ú ú ú Ú Ú Ú U With Acute
û û û Û Û Û U With Circumflex
ü ü ü Ü Ü Ü U With Diaeresis
ý ý ý Ý Ý Ý Y With Acute
Þ Þ Þ THORN
ƒ ƒ ƒ Latin Small Letter F With Hook- Florin
œ œ œ Œ Œ Œ Ligature OE
š š š Š Š Š S With Caron
Ÿ Ÿ Ÿ Y With Diaeresis
Cards
♠ ♠ ♠ Spades
♣ ♣ ♣ Clubs
44
Assignment. HTML Special Entities
♥ ♥ ♥ Hearts
♦ ♦ ♦ Diamonds
Zodiac Signs
♈ ♈ Aries
♉ ♉ Taurus
♊ ♊ Gemini
♋ ♋ Cancer
♌ ♌ Leo
♍ ♍ Virgo
♎ ♎ Libra
♏ ♏ Scorpio
♐ ♐ Sagittarius
♑ ♑ Capricorn
♒ ♒ Aquarius
♓ ♓ Pisces
Chess Symbols
♔ ♔ White Chess King
♕ ♕ White Chess Queen
♖ ♖ White Chess Rook
♗ ♗ White Chess Bishop
♘ ♘ White Chess Knight
♙ ♙ White Chess Pawn
♚ ♚ Black Chess King
♛ ♛ Black Chess Queen
♜ ♜ Black Chess Rook
♝ ♝ Black Chess Bishop
♞ ♞ Black Chess Knight
♟ ◻ Black Chess Pawn
45
Lesson 2. Text formatting by means of HTML
BLOCK TAGS
<address> Text </address>
Attribute: universal.
Description:
Used to display contact information about the author of
this article or site and can include such HTML-elements as
links, address, author's name, and other text reporting some
author’s data.
If the <address> tag is inside the <body>, then the data
refers to the entire document, if it is inside the <article> tag,
then the information applies to the author of the article.
By default, the text inside the <address> container is
displayed in italics.
Example:
<address>
<p>24 Gimnazicheskaya Embankmen,
room 32<br>Kharkow, 61000</p>
<p>Tel.: (057) 752-33-22</p>
<p>Email: [email protected]</p>
</address>
View the file header-section-nav-footer-address.html.
46
Assignment. Block tags
<blockquote> Text </blockquote>
Attribute: cite — address, which specifies the source of the
quote.
Description:
Designed to highlight long quotes within the document.
The text indicated by this tag is traditionally displayed as
a justified block with left and right indents (approximately
40 pixels), and also with a top and bottom interval.
Note: to highlight short quotations that are part of the current
paragraph, use the <q> tag.
Example:
<blockquote cite="https://citaty.info/quote/554">
"You should never ask anyone for anything.
Never- and especially from those who are more
powerful than yourself. They will make the offer
and they will give of their own accord"
<footer>Mikhail Bulgakov</footer>
</blockquote>
View the file tags.html
47
Lesson 2. Text formatting by means of HTML
<div> Text </div>
Attribute: universal.
Description:
<div> is a "brick" element for creating a document
structure, for example, for building multiple columns. Has
no indents, compared to <p>. All formatting is specified using
css-styles, in which the selectors for the <div> tag are .class
or #id.
You can not put it in <p>.
Example:
<div class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Adipisci iure, deserunt tenetur facilis earum
veritatis.
</div>
<div class="block">
Veniam mollitia minus ab, hic, sint illo inventore
neque quod perspiciatis explicabo. A, impedit,
earum.
</div>
48
Assignment. Block tags
<h1> Text </h1> ... <h6> Text </h6>
Attribute: universal.
Description:
They are intended for designing headings on a web page.
Each of the headings has a certain weight (importance), which
is determined by the figure after the letter h, i.e. <h1> is the
most important of headings, and <h6> is the least significant
one.
The text enclosed inside any heading is displayed in bold
and has a different size, decreasing as the number increases.
Example:
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
49
Lesson 2. Text formatting by means of HTML
<header> Text and other <tags> </header>
Attribute: universal.
Description:
Usually placed at the top of the document, article or
section. This element contains navigation, headers, and also
some input content. This tag can be placed inside <article> or
<section>, but more often it starts the mark-up of the whole
html-page. In this case, the site heading and logo, the menu,
the main heading (<h1>), the search form and so on are placed
inside the <header> element.
If the header is placed in <article> or <section>, it must
have a heading or an introductory part for its parent element.
The <header> tag cannot be placed in <footer>, <address>,
or another <header> element
Example:
<header>
<nav>
<a href="#about">About Program</a>
<a href="#prices">Prices</a>
<a href="#contact">Contact Info</a>
</nav>
<h1>Increase your sales with the program
"Limitless Audit" </h1>
<button>Read more</button>
</header>
<section>
<h2>About Program</h2>
<p>The program "Limitless Audit" was created by
a group of developers from Ukraine.…</p>
</section>
50
Assignment. Block tags
View the file header-section-nav-footer-address.html.
<p> Text </p>
Attribute: universal.
Description:
Paragraph is the main element for text formatting. By
default, it is separated from the previous and following
element by an empty string.
Example:
<p> <strong>Paragraph 1.</strong> Lorem ipsum dolor
sit amet, consectetur adipisicing elit…</p>
<p> <strong>Paragraph 2.</strong> Eos perferendis
voluptate voluptatibus provident eum obcaecati
nesciunt voluptates, sequi dolo...</p>
<p> <strong>Paragraph 3.</strong> Iure in enim
suscipit placeat deserunt totam cupiditate ...</p>
51
Lesson 2. Text formatting by means of HTML
<article> Text and other <tags> </article>
Attribute: universal.
Description:
It is used to output some integral information in the form
of an article, a message on the forum, a blog entry, a user
comment.
Elements <article> can be nested inside each other. For
example, the forum message can be in one <article> element,
and each comment on the message can be in a separate child
<article> element.
Headings in the form of h1 ... h6 tags must be present for
the <article>.
Example:
<article>
<header>
<h1>HTML (Hypertext Markup Language)</h1>
</header>
<p>HTML (Hypertext Markup Language) is the set of
markup symbols or codes inserted in a file
intended for display on a World Wide Web
browser page. The markup tells the Web browser
how to display a Web page's words and images
for the user....</p>
<footer>
<p>Information from <a href="http://
searchmicroservices.techtarget.com/
definition/HTML-Hypertext-Markup-Language">
searchmicroservices</a>
</p>
</footer>
</article>
52
Assignment. Block tags
View the example in the file article-blockquote-q.html.
<main> Text and other <tags> </main>
Attribute: universal.
Description:
Designed to display the main content of the page. It can
be on the page in a single instance, unlike section, article, nav.
It should not include such sections of the site as navigation,
site name, logo, search form, banners, etc.
You cannot nest it in elements such as article, aside,
header, footer, nav
Example:
<main>
<section>
<h2>Section 1</h2>
<article>
<h3>Happy Article 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Molestiae quas blanditiis
repellat nisi illo veniam dolore sapiente
excepturi suscipit laborum?</p>
</article>
</section>
</main>
53
Lesson 2. Text formatting by means of HTML
П View the example in the file main-section-aside.html.
<aside> Text and other <tags> </aside>
Attribute: universal.
Description:
Specifies a section with content that complements the
main content, but is not an integral part of it.
The <aside> element may contain additional comments,
help information, a list of terms, a collection of links on a topic
or even an advertisement if the ads are relevant to the content.
This element can even contain a full-fledged article,
placing it in its child <article> element with the <header>
and <footer>, for example, a comment.
Example:
<aside>
<nav>
<a href="#">Menu Item 1</a><br>
<a href="#">Menu Item 2</a><br>
<a href="#">Menu Item 3</a><br>
<a href="#">Menu Item 4</a><br>
</nav>
54
Assignment. Block tags
<article>
<h4>Comment</h4>
<p>Very interesting site with Lorem ipsum
content. That's great...</p>
</article>
</aside>
Посмотреть пример можно в файле main-section-
aside.html.
<section> Text and other <tags> </section>
Attribute: universal.
Description:
The content of the <section> tag is a section of the web
page. It requires its own heading.
Examples of grouping content are the usual chapters to
which the content is divided, or the home page of a website
that can be divided into sections for introduction, news, and
contact information.
Can contain its own header, footer.
55
Lesson 2. Text formatting by means of HTML
Example:
<section id="about">
<h2>About Program</h2>
<p>The program "Limitless Audit" was created by
a group of developers from Ukraine.</p>
<p>It has no analogues in the CIS, since it takes
into account the requirements of the law, and can
be changed in accordance with the latest changes
in the tax code.</p>
<p>The program "Limitless Audit" was created after
the detailed analysis of modern tax situation in
the former-Soviet society.</p>
</section>
View the file header-section-nav-footer-address.html
<footer> Text and other <tags> <footer>
Attribute: universal.
Description:
Defines a footer for the entire web page or for a specific
section. It can also be used in a <blockquote> tag. Usually
56
Assignment. Block tags
it contains additional information about the contents of its
parent element, for example author's full name, contact details,
copyright or license information, additional navigation, links to
other documents, and so on. In it, you can place the <address>
The <footer> element must necessarily have a closing tag
and can contain any HTML elements, except for the <header>
element and the other <footer>.
Example:
<footer>
<p class="copyright">©
2017 Audit Systems LLC ™</p>
</footer>
View the file header-section-nav-footer-address.html.
<pre> Text </pre>
Attribute: universal.
Description:
It is intended for blocks with preformatted text, i.e. text in
which all spaces, tabs, and line breaks are saved from a text editor.
In addition, the text located inside the <pre> tags is displayed
in monospaced font. Inside the <pre> tag, you can use such
elements to format a text, for example: <code>, <b>, <i>, etc.
It should be used for:
■■ Displaying poems with authorial arrangement of lines;
■■ Displaying pictures;
■■ Code mapping.
57
Lesson 2. Text formatting by means of HTML
Example:
<pre>
Sale!!!
Sale!!
Sale!
Buy an Elephant at an Attractive Price!
</pre>
View the file tags.html
<hr>
Attribute: universal (for HTML5). In HTML 4 it had 5 attri
butes.
Description:
Abbreviation of horizontal rule; in the browser it displays
a horizontal line, the appearance of which depends on the
browser.
Example:
<p>We are building a national 3G coverage, have
already invested 11 billion hryvnias and continue
to invest in construction. <b class="blue">By the end
of the year we plan to cover 80% of the population,
and more than 90% next year</b>. But the number of
subscribers who use 3G Internet is far behind the
58
Assignment. Block tags
pace of our construction. Not least, this is due to
the fact that smartphones are still expensive and
many Ukrainians cannot afford them.</p>
<hr>
<p>It is not easy to open a store: …</p>
View the file tags.html.
<nav> Text and other <tags> </nav>
Attribute: universal.
Description:
The tag is a container for navigation - a group of links that
lead to other pages of the site or to sections of the current web
page. Also in <nav> there may be content of this page.
You can use multiple <nav> tags on a page.
It is undesirable to place normal link groups in the <nav>
element, and also the <address> tag cannot be placed in it.
Example:
<nav>
<a href="#about">О программе</a>
<a href="#prices">Цены</a>
<a href="#contact">Контакты</a>
</nav>
59
Lesson 2. Text formatting by means of HTML
View the file header-section-nav-footer-address.html.
60
Assignment. Inline tags
INLINE TAGS
<abbr> Text </abbr>
Attribute: Title — a tooltip for full decryption, which becomes
active when you move the cursor over the abbreviation text.
Recommended for screen readers and search engines.
Description:
Required to indicate an abbreviation or acronym
(established abbreviations). By default, the characters in this
tag with the title attribute are underlined with a dashed line.
Example:
<abbr title="Cascading Style Sheets">CSS</abbr>
allows you to change the style of any logic
formatting tag easily!
<b> Text </b>
Attribute: universal.
Description:
Used to make a text bold. You can use it together with the
class attribute to assign a highlight color, for example.
Example:
<p>We are building a national 3G coverage, have
already invested 11 billion hryvnias and continue
to invest in construction. <b class="blue">
61
Lesson 2. Text formatting by means of HTML
By the end of the year we plan to cover 80% of
the population, and more than 90% next year</b>.
But the number of subscribers who use 3G Internet
is far behind the pace of our construction. Not least,
this is due to the fact that smartphones are still
expensive and many Ukrainians cannot afford them.</p>
<strong> Text </srong>
Attribute: universal.
Description:
Used to highlight an important piece of text, to which you
need to pay attention of both the user and the search engine.
By default, it is highlighted in bold type in browsers.
If you just want to select a font with boldface, without
emphasis on the importance of the text, it is recommended
to use the CSS property font-weight.
Example:
<p><strong>Attention</strong>: the bus schedule
"Kharkov-Ternovaya" was changed on <em>12.12.2012
</em>.</p>
62
Assignment. Inline tags
<mark> Text </mark>
Attribute: universal.
Description:
Highlights a piece of text in yellow.
It is necessary where you need to draw the user's attention
to something that is relevant at the moment.
It is not about the importance of the selected text, unlike
the <strong> tag.
Example:
<p><em>Russian phrase</em>: "И напоследок <mark>важная
информация</mark> о месте и времени воскресных
собраний нашей церкви."<br>
<em>English phrase</em>: "And in the end take
notice of the <mark>important information</mark>
about the place and time of Sunday meetings."</p>
<em> Text </em>
Attribute: universal.
Description:
This tag (abbreviated from emphasized) is designed
to highlight text, which is worth paying attention to. It is
displayed in browsers in italics.
Compared with <i> it has a more pronounced emotional
coloring. A text is emphasized in speech browsers.
63
Lesson 2. Text formatting by means of HTML
Example:
<p><strong>Attention</strong>:the bus schedule
"Kharkov-Ternovaya" was changed on
<em>12.12.2012</em>.</p>
<i> Text </i>
Attribute: universal.
Description:
Designed to highlight text in italics. The <i> tag can
be used to indicate technical terms, phrases from another
language, thoughts, names of something, etc. Less important
than other semantic elements with italic text, namely:
■■ <em> (emphasized text)
■■ <cite> (work title)
■■ <dfn> (term definition)
Example:
<p> For a little child, <b>physical development</b>
is as important as <b>mental one</b>. As a rule,
the faster a child learns <i>to roll over, creep or
walk</i>, the faster he develops <i>at the intelligence
level</i>. But with the development of speech it is
very important for parents to constantly communicate
with the child.</p>
64
Assignment. Inline tags
<cite> Text </cite>
Attribute: universal.
Description:
Required for presenting the title of a book, article, film,
script, song, game, etc. It can be a work referenced in a quote,
or just some kind of work. In browsers it is usually italicized.
Example:
<p>In the magazine <cite>"Pulp Fiction #11/2017"</cite>,
the cover cites an article <cite>"Lenin is awesomer
than Padva and Reznik"</cite>.</p>
<q> Text </q>
Attribute: cite — indicates the address of the document quoted.
The attribute is required for screen readers.
Description:
Designed to emphasize a quote text with quotation marks
within a text. This tag is useful for search engines when they
select pages with quotes.
65
Lesson 2. Text formatting by means of HTML
It also makes sense to use the <q> tag to create styles for
citations using CSS on specialized sites.
Example:
<p>Mikhail Bulgakov: <q cite="http://masterimargo.ru/
quote.html">But what can be done, the one who loves
must share the fate of the one he loves</q>.</p>
<dfn> Text </dfn>
Attribute: universal.
Description:
The <dfn> tag is used to define the terms that first appeared
in the text of the document.
The text in <dfn> is displayed in italics.
Example:
<p><dfn>Химия</dfn> is the scientific discipline
involved with compounds composed of atoms, i.e.
elements, and molecules, i.e. combinations of atoms:
their composition, structure, properties, behavior
and the changes they undergo during a reaction with
other compounds.</p>
View the file css-properties.html.
66
Assignment. Inline tags
<code> Text </code>
Attribute: universal.
Description:
It is intended for the text containing the program code.
The code includes variable declarations, keywords, functions,
etc. In the browser, the content of the <code> tag is displayed
in a monospaced font of a smaller size than the main text.
In the <code> tag, line breaks can be done using the <br>
tag or css-properties.
Example:
<p><code>
var picHolder = document.getElementById(
"picHolder" ); <br>
var img = document.createElement("img");<br>
img.src = "images/stone3.jpg";<br>
picHolder.appendChild(img);
</code>
</p>
<del> Text </del>
Attribute: universal.
Description:
It is intended to highlight text that was deleted in the new
version of the document. The tag allows you to track changes
in the text of the document compared to the old version.
67
Lesson 2. Text formatting by means of HTML
In the browser, the text in the <del> tag looks crossed out.
It is intended to highlight the text that was added to the new
version of the document. The tag allows you to track changes in
the text of the document compared to the old version.
In the browser, the text in the <ins> tag looks underlined.
Example:
<p>To display abbreviations, use the tag
<del>acronym</del> <ins>abbr</ins>.</p>
<ins> Text </ins>
Attribute:
Сite — to specify the address of the document, which
explains the reasons for editing and adding text.
Datetime — specifies the date and time when the text was
either edited or deleted. The date format can be varied.
Description: It is intended to highlight the text that was added
to the new version of the document. The tag allows you to
track changes in the text of the document compared to the
old version.
In the browser, the text in the <ins> tag looks underlined.
Example:
<p>To display abbreviations, use the tag
<del>acronym</del> <ins>abbr</ins>.</p>
68
Assignment. Inline tags
<s> Text </s>
Attribute: universal.
Description:
Determines the text, which at the moment is not correct
or relevant. It is displayed in the browser as a crossed out text.
If you want to show that the text was deleted, use the <del> tag.
Example:
<p><s>Old price 1000UAH</s> - New price 999UAH!!!</p>
<u> Text </u>
Attribute: universal.
Description:
It is used for text that should be stylistically different from
the usual text. It can be misspelled words, text in another
language. It is advisable to avoid using the <u> element,
since visually it can be confused with a link, which is also
underlined by browsers.
Example:
<p><s>Old price 1000UAH</s> - <u>New price 999UAH!!!
</u></p>
69
Lesson 2. Text formatting by means of HTML
<small> Text </small>
Attribute: universal.
Description:
Indicates that its contents are in addition to the main
text. Displayed in the browser in a font smaller than the main
text. Can represent a quote, clarification, notice of copyright,
licenses, any restrictions. Not intended for large amounts of
text, only for short phrases embedded in the main text, or
footnotes located after the article or at the end of the document.
Example:
<p><small>The text is available under the Creative
Commons Attribution-ShareAlike license; in some
cases, additional conditions may apply. For more
information, see Terms of Use.</small></p>
<sub> Text </sub>
Attribute: universal.
Description:
Defines the text in the subscript.
70
Assignment. Inline tags
This text will be smaller than the main text, and is located
lower than the base line of the characters in the string. Most
often used for formulas.
Can be replaced with the css-property vertical-align
Example:
<p> <p>All of us know a simple water formula
H<sub>2</sub>O, how can we do without it? </p>
<sup> Text </sup>
Attribute: universal.
Description:
Defines the text in the superscript.
This text will be smaller than the main text, located higher
than the base line of the characters in the string. Most often
used for formulas.
Can be replaced with the css-property vertical-align
Example:
<p>Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> =
c<sup>2</sup>.</p>
71
Lesson 2. Text formatting by means of HTML
<var> Text </var>
Attribute: universal.
Description:
It is used to highlight variables when writing code.
The browser displays this text in italics.
Example:
<p>This function uses the variable
<var>$count</var>.After the increase, it can be
assigned to the variable <var>$score</var>.</p>
<kbd> Text </kbd>
Attribute: universal.
Description:
Used to indicate the text that is typed on the keyboard or
for the name of the keys. The browser displays it as a mono
spaced font.
Example:
<p>Press <kbd>Ctrl + Z</kbd> to undo the last action.
To return the undone operation, press <kbd>Ctrl + Y
</kbd></p>
72
Assignment. Inline tags
<samp> Text </samp>
Attribute: universal.
Description:
Used for the text that results from the output of the program
code or script. The browser displays it as a monospaced font.
Example:
<p>In the process of solving the problem
<samp>2+2</samp> the program will output: <samp>4
</samp> </p>
<span>...</span>
Attribute: universal.
Description:
It is intended for selection of elements inside the main
text of block elements basically in order to set css-formatting
for a small amount of the text. Therefore, such attributes are
most often set for it:
■■ style — style of element
■■ class — class of styles
■■ id — unique identifier
Example:
<p><span class="red">М</span>ikhail
<span class="red">B</span>ulgakov:
73
Lesson 2. Text formatting by means of HTML
<q cite="https://www.goodreads.com/author/quotes/
3873.Mikhail_Bulgakov">But what can be done, the one
who loves must share the fate of the one he loves
</q>.</p>
74
Assignment. Inline tags
75
Lesson 2.
Text formatting by means of HTML
© Elena Slutskaya.
© STEP IT Academy, www.itstep.org.
All rights to protected pictures, audio, and video belong to their authors or legal
owners.
Fragments of works are used exclusively in illustration purposes to the extent
justified by the purpose as part of an educational process and for educational
purposes in accordance with Article 1273 Sec. 4 of the Civil Code of the Russian
Federation and Articles 21 and 23 of the Law of Ukraine “On Copyright and Related
Rights”. The extent and method of cited works are in conformity with the standards,
do not conflict with a normal exploitation of the work, and do not prejudice the
legitimate interests of the authors and rightholders. Cited fragments of works can
be replaced with alternative, non-protected analogs, and as such correspond the
criteria of fair use.
All rights reserved. Any reproduction, in whole or in part, is prohibited. Agreement
of the use of works and their fragments is carried out with the authors and other
right owners. Materials from this document can be used only with resource link.
Liability for unauthorized copying and commercial use of materials is defined
according to the current legislation of Ukraine.
You might also like
- SY BCA Science Sem-IV Practical Examination Slips100% (2)SY BCA Science Sem-IV Practical Examination Slips64 pages
- Creating A Contact Form With Google Sheets and App Script - She Designs ThingsNo ratings yetCreating A Contact Form With Google Sheets and App Script - She Designs Things6 pages
- Let's Ask ChatGPT How To Learn HTML, CSS, and JavaScript in 45 Minutes (Chatgpt Book Writing and Ai Tools 1) (Chukwubueze, Israel Joshua) (Z-Library)No ratings yetLet's Ask ChatGPT How To Learn HTML, CSS, and JavaScript in 45 Minutes (Chatgpt Book Writing and Ai Tools 1) (Chukwubueze, Israel Joshua) (Z-Library)192 pages
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML11 pages
- David Mraz Your Guice To Becoming Frontend Developer SampleNo ratings yetDavid Mraz Your Guice To Becoming Frontend Developer Sample50 pages
- Learn HTML - Forms Cheatsheet - CodecademyNo ratings yetLearn HTML - Forms Cheatsheet - Codecademy8 pages
- Be 5 It Gecbvn Bharatvainsh Unit 2 (HTML) WD 3151606 2024No ratings yetBe 5 It Gecbvn Bharatvainsh Unit 2 (HTML) WD 3151606 202438 pages
- Scripting Languages Digital Notes 2022-2023No ratings yetScripting Languages Digital Notes 2022-202392 pages
- 27 B.com Computer Applications (Hons) MajorNo ratings yet27 B.com Computer Applications (Hons) Major72 pages
- Learne HTML: by Exccc For R00Tw0Rm MembersNo ratings yetLearne HTML: by Exccc For R00Tw0Rm Members22 pages
- XML Stands For Extensible Markup LanguageNo ratings yetXML Stands For Extensible Markup Language61 pages
- Web Page Design: Opening and Closing TagsNo ratings yetWeb Page Design: Opening and Closing Tags15 pages
