Learn HTML5 fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- 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.
- How to display reserved and invisible characters with HTML entities.
1. Text formatting
IN A ROCKET
Learn front-end development at rocket speed
HTML HTML FUNDAMENTALS
2. 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.
5. HTML FUNDAMENTALS: Text formatting inarocket.com
<h1> <h2> <h6><h3> <h4> <h5>
Very
important
Less
important
6. HTML FUNDAMENTALS: Text formatting inarocket.com
HEADERS
Editor Browser
<body>
<h1>Tim Berners-Lee</h1>
</body>
READY TO USE CODE
Web page title
index.html
Tim Berners-Lee
7. CONGRATULATIONS!
YOU'VE LEARNED:
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.
10. HTML FUNDAMENTALS: Text formatting inarocket.com
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>
<h1>Tim Berners-Lee</h1>
<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
11. CONGRATULATIONS!
YOU'VE LEARNED:
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.
13. HTML FUNDAMENTALS: Text formatting inarocket.com
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
14. HTML FUNDAMENTALS: Text formatting inarocket.com
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.
16. HTML FUNDAMENTALS: Text formatting inarocket.com
SPACES: NON BREAKING SPACES
The entity stands for "non breaking space"
Inserts a single space into your content
17. HTML FUNDAMENTALS: Text formatting inarocket.com
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
18. HTML FUNDAMENTALS: Text formatting inarocket.com
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
19. HTML FUNDAMENTALS: Text formatting inarocket.com
SPACES: LINE BREAKS
Editor Browser
<body>
<p>Sir Timothy John "Tim" Berners-
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
Sir Timothy John "Tim" Berners- Lee is a British computer
scientist,
best known as the inventor of the World Wide Web.
line break
20. HTML FUNDAMENTALS: Text formatting inarocket.com
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
21. HTML FUNDAMENTALS: Text formatting inarocket.com
SPACES: HORIZONTAL LINES
Editor Browser
<body>
<h1>Tim Berners-Lee</h1>
<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".
23. HTML FUNDAMENTALS: Text formatting inarocket.com
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 fixed-width font, and it preserves
both
spaces and line
breaks.
24. CONGRATULATIONS!
YOU'VE LEARNED:
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.
26. HTML FUNDAMENTALS: Text formatting inarocket.com
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!");}
28. HTML FUNDAMENTALS: Text formatting inarocket.com
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.
30. HTML FUNDAMENTALS: Text formatting inarocket.com
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
31. CONGRATULATIONS!
YOU'VE LEARNED:
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.
32. in a
ROCKET
MARK
Use it to represent highlighted text due to its relevance in a particular context
34. HTML FUNDAMENTALS: Text formatting inarocket.com
MARK
Editor Browser
<body>
<h1>Tim Berners-Lee</h1>
<p>Sir Timothy John "Tim" Berners-
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
Sir Timothy John "Tim" Berners- Lee is a British computer
scientist, best known as the inventor of the World Wide Web.
35. CONGRATULATIONS!
YOU'VE LEARNED:
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.
37. HTML FUNDAMENTALS: Text formatting inarocket.com
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
38. HTML FUNDAMENTALS: Text formatting inarocket.com
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
39. HTML FUNDAMENTALS: Text formatting inarocket.com
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
40. HTML FUNDAMENTALS: Text formatting inarocket.com
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.
41. CONGRATULATIONS!
YOU'VE LEARNED:
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.
43. HTML FUNDAMENTALS: Text formatting inarocket.com
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
44. HTML FUNDAMENTALS: Text formatting inarocket.com
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.
45. CONGRATULATIONS!
YOU'VE LEARNED:
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.
47. HTML FUNDAMENTALS: Text formatting inarocket.com
COMMENTS
Editor Browser
<body>
<!-- Main paragraph starts -->
<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.
48. HTML FUNDAMENTALS: Text formatting inarocket.com
"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.
52. CONGRATULATIONS!
YOU'VE LEARNED:
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.
53. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
54. 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.
Learn front-end development at rocket speed
inarocket.com
55. Text formatting
IN A ROCKET
Learn front-end development at rocket speed
HTML HTML FUNDAMENTALS