02 Formatting Text.

docx 1

LinkedIn
HTML Essential Training

Contenido
2. Formatting Text......................................................................................................................................... 1
2.1 The syntax of HTML elements ................................................................................................................ 1
2.2 Paragraphs .............................................................................................................................................. 2
2.3 Headlines................................................................................................................................................. 3
2.4 Bold and italics ........................................................................................................................................ 4
2.5 Lists ......................................................................................................................................................... 6
2.6 Quotes..................................................................................................................................................... 7
2.7 Dates and times ...................................................................................................................................... 8
2.8 CODE, PRE, AND BR................................................................................................................................. 9
2.9 Superscripts, subscripts and small text................................................................................................. 10
2.10 Chapter Quiz 21 questions.................................................................................................................. 11

2. Formatting Text
2.1 The syntax of HTML elements
- Let's jump right in. HTML looks like this. In this case, p stands for paragraph. We make this HTML by
starting out with a less-than symbol, followed by the correct letter, or word, or abbreviated word, and
finishing with a greater-than symbol. That makes what's called a tag, an HTML tag. Basically, all HTML
markup looks like this. The syntax itself is fairly simple. The trickier part is knowing which tags to use
when. There are actually two kinds of tags, two flavors, opening tags and closing tags. This p is an
opening tag. The closing tag is very similar, but it has a slash in it. Less-than symbol, a forward slash, the
letter or word that matches the tag that we're closing, and a greater-than symbol. To markup a
paragraph properly, we use an opening tag at the beginning of the paragraph, and then a closing tag at
the end, like this. The opening tag marks the beginning, the content goes in the middle, and the closing
tag marks the end. These opening and closing tags travel the world together, in pairs. The whole thing is
called an element. Now, not every element has a closing tag. We'll be looking at some of those later. But
a lot of the HTML elements do have both an opening and a closing tag. Here are some other examples.
There's a paragraph wrapped in p tags. We wrap a headline in h1 tags. An article is wrapped in an article
tag. We'll be going through dozens of HTML elements in this course, learning when to use each one, so
don't worry about that yet. Just understand the basic mechanics for now. The markup conveys purpose
and meaning. It provides computers a way to understand more about what the content, or the
interface, means to humans. HTML provides a connection of meaning between the human world and
the computer world. Let's take a look at another example. Here, we have a very short paragraph. This
paragraph has text that's emphasized for effect. The whole paragraph is wrapped in opening and closing
p tags, and then, inside the paragraph, we have another phrase, text that's emphasized. And we made
that into another element by wrapping it in opening and closing em tags. I'll explain the em element
later, just notice how one HTML element can be nested inside of another. In fact, and entire HTML
document is a whole bunch of HTML elements all nested inside of each other. If you've studied
computer science, you may recognize that nesting elements like this will create a tree, a document tree.
Or if you aren't a comp-sci geek, then maybe imagine a family tree with parents, and children, and
siblings. The browser pays attention to the structure of how HTML elements are nested, and it creates a
big family tree out of who's related to who, and how.