2- Learn HTML Fundamentals / Text Formatting

Text formatting
IN A ROCKET
Learn front-end development at rocket speed
HTML HTML FUNDAMENTALS

LET'S LEARN HTML!
IN THIS MODULE YOU'LL LEARN:
HTML FUNDAMENTALS: Text formatting inarocket.com
How to structure your content with headers.

How to organize your ideas with paragraphs.

How to force spaces and preformat text.

How to format quotes with blockquote.

How to tag relevant content with mark.

How to create ordered, unordered and description lists.

How to show/hide additional content with details.

How to document your code with comments.

in a
ROCKET
HEADERS
Use them to define structure and hierarchy of your content

<h1> <h2> <h6><h3> <h4> <h5>
Very

important
Less

important

HEADERS
Editor Browser
<body>
<h1>Tim Berners-Lee</h1>
</body>
READY TO USE CODE
Web page title
index.html
Tim Berners-Lee

CONGRATULATIONS!
YOU'VE LEARNED:
How to structure your content with headers.

How to organize your ideas with paragraphs.

How to force spaces and preformat text.

How to format quotes with blockquote.

How to tag relevant content with mark.

How to create ordered, unordered and description lists.

How to show/hide additional content with details.

How to document your code with comments.

in a
ROCKET
PARAGRAPHS
They help you structure the text

<p>

Web page title
index.html
Tim Berners-Lee
Sir Timothy John "Tim" Berners- Lee is a British computer
scientist, best known as the inventor of the World Wide Web.
PARAGRAPHS
Editor Browser
<body>
<p>Sir Timothy John "Tim" Berners-
Lee is a British computer
scientist, best known as the
inventor of the World Wide Web.</p>
</body>
READY TO USE CODE

in a
ROCKET
EMPHASIS & IMPORTANCE
Use them to stress and emphasize certain words

EMPHASIS
Editor Browser
<body>
<p>Ask not what your country can
do for you; ask what <em>you</em>
can do for your country.</p>
</body>
READY TO USE CODE
The em element marks text that has stress emphasis.
Web page title
index.html
Ask not what your country can do for you; ask what you can
do for your country.
em

IMPORTANCE
Editor Browser
<body>
<p>Registration opens
<strong>tomorrow at 10 am</strong>.
</p>
</body>
READY TO USE CODE
The strong element gives text strong importance, and is
typically displayed in bold.
Web page title
index.html
Registration opens tomorrow at 10 am.

in a
ROCKET
SPACES
They help you separate content

SPACES: NON BREAKING SPACES
The   entity stands for "non breaking space"
 
Inserts a single space into your content

SPACES: NON BREAKING SPACES
Editor Browser
<body>
<p>Hello   world!</p>
</body>
READY TO USE CODE
Web page title
index.html
Hello world!
Three spaces

SPACES: LINE BREAKS
HTML elements with no content are called empty elements and
they have no closing tag in HTML5
<br>
Inserts a line break into your content

SPACES: LINE BREAKS
Editor Browser
<body>
Lee is a British computer
scientist, <br>best known as the
inventor of the World Wide Web.</p>
</body>
READY TO USE CODE
Web page title
index.html
scientist,

best known as the inventor of the World Wide Web.
line break

SPACES: HORIZONTAL LINES
HTML elements with no content are called empty elements and
they have no closing tag in HTML5
<hr>
Inserts a horizontal line and

represents a thematic break between paragraph-level elements

SPACES: HORIZONTAL LINES
Editor Browser
<body>
<p>Sir Timothy John "Tim" Berners-Lee
is the inventor of the World Wide Web.
</p>
<hr>
<h1>Vinton Cerf</h1>
<p>Is an American Internet pioneer, who
is recognized as one of "the fathers of
the Internet".</p>
</body>
READY TO USE CODE
Web page title
index.html
Tim Berners-Lee
Sir Timothy John "Tim" Berners- Lee is the inventor of the
World Wide Web.
Vinton Cerf
Is an American Internet pioneer, who is recognized as one of
"the fathers of the Internet".

in a
ROCKET
PREFORMATTED TEXT
Text is rendered using a fixed font and
whitespace characters are treated literally

PREFORMATTED TEXT
Editor Browser
<body>
<pre>Preformatted text is displayed in
a fixed-width font, and it preserves
both
spaces and line
breaks.</pre>
</body>
READY TO USE CODE
The pre element represents a block of preformatted

text, in which structure is represented by typographic

conventions rather than by elements.
Web page title
index.html
Performed text is displayed in

a ﬁxed-width font, and it preserves

both

spaces and line

breaks.

in a
ROCKET
CODE
Use it to represent fragments of computer code

CODE
Editor Browser
<body>
<p>To add a header you can use the
following code:<br>
<code>function hello()
{alert("Hello world!");}</code>
</p>
</body>
READY TO USE CODE
The code element represents a fragment of computer code.
Web page title
index.html
To add a header you can use the following code:

function hello() {alert("Hello world!");}

in a
ROCKET
FIGURE
Used to represent self-contained content, frequently with a caption

FIGURE
Editor Browser
<body>
<figure>
<code>var i=0;</code>
<figcaption>A JavaScript variable  
declaration.</figcaption>
</figure>
</body>
READY TO USE CODE
The figure element represents some flow content,

optionally with a caption, that is self-contained and is

typically referenced as a single unit from the main flow

of the document.
Web page title
index.html
var i=0;
A Javascript variable declaration.

in a
ROCKET
BLOCKQUOTE
It indicates that the enclosed text is an extended quotation

BLOCKQUOTE
Editor Browser
<body>
<blockquote>What's the worst that could
happen? - <cite><a href=“https://
en.wikipedia.org/wiki/Tim_Ferriss">Tim
Ferriss</a></cite>
</blockquote>
</body>
READY TO USE CODE
The blockquote element represents content that is

quoted from another source, optionally with a citation

which must be within a footer or cite element.
Web page title
index.html
What's the worst that could happen? - Tim Ferriss

in a
ROCKET
MARK
Use it to represent highlighted text due to its relevance in a particular context

<mark>

MARK
Editor Browser
<body>
Lee is a British computer scientist,
best known as <mark>the inventor of
the World Wide Web</mark>.</p>
</body>
READY TO USE CODE
Mark element is used to tag content that has relevance.
Web page title
index.html
Tim Berners-Lee
scientist, best known as the inventor of the World Wide Web.

in a
ROCKET
LISTS
Use them to mark up lists of items

LISTS: UNORDERED
Editor Browser
<body>
<ul>
<li>Spielberg</li>
<li>Coppola</li>
<li>Scorsese</li>
</ul>
</body>
READY TO USE CODE
ul = unordered list.

li = list item.
Web page title
index.html
• Spielberg

• Coppola

• Scorsese

LISTS: ORDERED
Editor Browser
<body>
<ol>
<li>Usain Bolt - Gold</li>
<li>Yohan Blake - Silver</li>
<li>Justin Gatlin - Bronze</li>
</ol>
</body>
READY TO USE CODE
ol = ordered list.

li = list item.
Web page title
index.html
1. Usain Bolt - Gold

2. Yohan Blake - Silver

3. Justin Gatlin - Bronze

LISTS: NESTED
Editor Browser
<body>
<ul>
<li>Red
<ul>
<li>Light</li>
<li>Dark</li>
</ul>
</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
READY TO USE CODE
Web page title
index.html
• Red

• Light

• Dark

• Green

• Blue

LISTS: DESCRIPTION
Editor Browser
<body>
<dl>
<dt>W3C</dt>
<dd>Is the main international
standards organization for the World
Wide Web.</dd>
<dt>HTML</dt>
<dd>Is the standard markup language
used to create web pages.</dd>
</dl>
</body>
READY TO USE CODE
dl = definition list.

dt = definition term.

dd = definition definition.
Web page title
index.html
W3C

Is the main international standards organization

for the World Wide Web.

HTML

Is the standard markup language used to create

web pages.

in a
ROCKET
DETAILS
A disclosure widget from which the user can retrieve additional information

DETAILS
Editor Browser
<body>
<details>
<summary>What is HTML</summary>
<p>Hypertext Markup Language</p>
</details>
<details>
<summary>What is CSS</summary>
<p>Cascading Style Sheets.</p>
</details>
</body>
READY TO USE CODE
Web page title
index.html
What is HTML 
Hypertext Markup Language.

What is CSS

Editor Browser
<body>
<details>
<summary>What is HTML</summary>
<p>Hypertext Markup Language</p>
<details>
<summary>HTML5</summary>
<p>Latest HTML recommendation by the
W3C.</p>
</details>
</details>
</body>
READY TO USE CODE
DETAILS: NESTED
Web page title
index.html
What is HTML 
Hypertext Markup Language.

HTML5 
Latest HTML recommendation by the W3C.

in a
ROCKET
COMMENTS
Include them in your code to say how it works

COMMENTS
Editor Browser
<body>

<p>Carl Edward Sagan was an American
astronomer, cosmologist, astrophysicist,
astrobiologist, author, science
popularizer, and science communicator in
astronomy and other natural sciences.</p>
</body>
READY TO USE CODE
A comment can be useful for documenting your code and is
ignored by the browser.
Web page title
index.html
Carl Edward Sagan was an American astronomer,
cosmologist, astrophysicist, astrobiologist, author, science
popularizer, and science communicator in astronomy and
other natural sciences.

"Any fool can write code that a computer can understand.
Good programmers write code that humans can understand."
- Martin Fowler
British software developer, author and international public speaker on software development.

in a
ROCKET
HTML ENTITIES
Used to display reserved and invisible characters

RECOMMENDED REFERENCE

inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

We respect your time 
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code 
Real code you can just copy and paste into
your real projects.
Step by step guides 
Clear and concise steps to build real use
solutions. No missed points.
inarocket.com

2- Learn HTML Fundamentals / Text Formatting

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à 2- Learn HTML Fundamentals / Text Formatting

Similaire à 2- Learn HTML Fundamentals / Text Formatting (20)

Plus de In a Rocket

Plus de In a Rocket (15)

Dernier

Dernier (20)

2- Learn HTML Fundamentals / Text Formatting