Learn HTML5: Text Formatting

inarocket.com

HTMLLearn at rocket speedTEXT FORMATTING

LET'S LEARN HTML! 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 a 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 What's the difference between inline and block level elements

Learn front-end development at rocket speed

inarocket.com

by miguelsanchez.com

FULL COURSE

http://www.inarocket.com

http://miguelsanchez.com

Headers

inarocket.com - HTML / Text Formatting

HEADERS

<h1>

<h2>

http://inarocket.com


HEADERS

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

Very important

Less important



index.html

HEADERS

Browser

Tim Berners-Lee

<body><h1>Tim Berners-Lee</h1></body>

Editor READY TO USE CODE


http://codepen.io/inarocket/pen/RawWLP

Paragraphs


PARAGRAPHS

<p>



index.html

PARAGRAPHS

Browser

Tim Berners-LeeSir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.

<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>



http://codepen.io/inarocket/pen/ONJypN

Spaces


SPACES: NON BREAKING SPACES

The character entity stands for “non breaking space”

Inserts a single space into your content



index.html

SPACES: NON BREAKING SPACES

Browser

Hello world!

<body><p>Hello world!</p></body>

Editor

Three spaces

READY TO USE CODE


http://codepen.io/inarocket/pen/ONJyQb


SPACES: LINE BREAKS

<br>

HTML elements with no content are called empty elements and they have no closing tag in HTML5

Inserts a line break into your content



index.html

SPACES: LINE BREAKS

BrowserEditor

<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>

Sir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.

Line break

READY TO USE CODE


http://codepen.io/inarocket/pen/VawvXw


SPACES: HORIZONTAL LINES

<hr>

HTML elements with no content are called empty elements and they have no closing tag in HTML5

Inserts a horizontal line and represents a thematic break between paragraph-level elements



index.html

SPACES: HORIZONTAL LINES

Browser

Tim Berners-Lee

Sir Timothy John "Tim" Berners- Lee is the inventor of the World Wide Web.

<body><h1>Tim Berners-Lee</h1><hr><p>Sir Timothy John "Tim" Berners-Lee is the inventor of the World Wide Web.</p></body>



http://codepen.io/inarocket/pen/wGvKXd

Preformatted text


index.html

PREFORMATTED TEXT

Browser

Performed text is displayed in a fixed-width font, and it preserves both spaces and line breaks.

<body><pre>Preformatted text is displayed in a fixed-width font. It also preserves both spaces and line breaks.</pre></body>

Editor

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

READY TO USE CODE


http://codepen.io/inarocket/pen/zqYvLy

Blockquote


index.html

BLOCKQUOTE

Browser

What's the worst that could happen? - Tim Ferriss

<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>

Editor

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

READY TO USE CODE


https://en.wikipedia.org/wiki/Tim_Ferriss

http://codepen.io/inarocket/pen/eZYpQP

Mark


MARK

<mark>



index.html

MARK

Browser

Tim Berners-LeeSir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.

<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>

Editor

Mark element is used to tag content that has relevance.

READY TO USE CODE


http://codepen.io/inarocket/pen/grOaZL

Lists


index.html

LISTS: UNORDERED

Browser

• Spielberg• Coppola• Scorsese

<body><ul> <li>Spielberg</li> <li>Coppola</li> <li>Scorsese</li></ul></body>

Editor

ul = unordered list. li = list item.

READY TO USE CODE


http://codepen.io/inarocket/pen/XdWmoO


index.html

LISTS: ORDERED

Browser

1. Usain Bolt - Gold2. Yohan Blake - Silver3. Justin Gatlin - Bronze

<body><ol> <li>Usain Bolt - Gold</li> <li>Yohan Blake - Silver</li> <li>Justin Gatlin - Bronze</li></ol></body>


ol = ordered list. li = list item.


http://codepen.io/inarocket/pen/GZRpzN


index.html

LISTS: NESTED

Browser

• Red• Light• Dark

• Green• Blue

<body><ul> <li>Red <ul> <li>Light</li> <li>Dark</li> </ul> </li> <li>Green</li> <li>Blue</li> </ul></body>



http://codepen.io/inarocket/pen/Yqzygw


dl = definition list. dt = definition term. dd = definition definition.

index.html

LISTS: DESCRIPTION

Browser

W3C Is the main international standards organization for the World Wide Web.HTML Is the standard markup language used to create web pages.

<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>



http://codepen.io/inarocket/pen/pyojYK

Details


index.html

DETAILS

Browser

• What is HTML Hypertext Markup Language.

• What is CSS

<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>



http://codepen.io/inarocket/pen/yOLYWx


index.html

DETAILS: NESTED

Browser

• What is HTML Hypertext Markup Language.

HTML5 Latest HTML recommendation by the W3C.

<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>



http://codepen.io/inarocket/pen/Vawvoe

Figure


index.html

FIGURE

Browser

Armstrong on the Moon

<body><figure> <img src=“armstrong.png” alt="Neil Armstrong descending the ladder of the Apollo 11.”> <figcaption>Armstrong on the Moon </figcaption></figure></body>

Editor

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.

READY TO USE CODE


http://codepen.io/inarocket/pen/xVxZKK

Comments


index.html

COMMENTS

Browser

Carl Edward Sagan was an American astronomer, cosmologist, astrophysicist, astrobiologist, author, science popularizer, and science communicator in astronomy and other natural sciences.

<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>

Editor

A comment can be useful for documenting your code and is ignored by the browser.

READY TO USE CODE


https://codepen.io/inarocket/pen/zwGeZo

Block & inline elements


INLINE ELEMENTSAn inline element occupies only the space bounded by the tags that define the inline element.

Example:

index.html

Carl Sagan is the author of Cosmos.

<body><strong>Carl Sagan</strong> is the author of <em>Cosmos</em>.</body>



INLINE ELEMENTS

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn>

<em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script>

<select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>



BLOCK-LEVEL ELEMENTSA block-level element occupies the entire space of its parent element (container).

Example:

index.html

Front-end web development<body><h1>Front-end web development</h1> <p>Is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly.</p><ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul></body>

Also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly.

• HTML • CSS • JavaScript



BLOCK-LEVEL ELEMENTS

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <fieldset> <figcaption>

<figure> <footer> <form> <h1> - <h6> <header> <hgroup> <hr> <li> <main> <nav>

<noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>


CONGRATULATIONS! NOW YOU KNOW:

How to structure your content with headers How to organize your ideas with paragraphs How to force spaces and preformat a 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 What's the difference between inline and block level elements

Learn front-end development at rocket speed

inarocket.com

by miguelsanchez.com

FULL COURSE

http://www.inarocket.com

http://miguelsanchez.com

Are you also interested in learning

BOOTSTRAP 4POSTCSS?+

http://inarocket.teachable.com/courses/css-postcssPlease visit:

http://inarocket.teachable.com/courses/css-postcss

http://inarocket.teachable.com/courses/css-postcss

inarocket.com

HTMLLearn at rocket speedTEXT FORMATTING

Software

Learn HTML5: Text Formatting