learn html5: text formatting
Post on 16-Apr-2017
15.045 Views
Preview:
TRANSCRIPT
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
Headers
inarocket.com - HTML / Text Formatting
HEADERS
<h1> <h2> <h6><h3> <h4> <h5>
Very important
Less important
inarocket.com - HTML / Text Formatting
index.html
HEADERS
Browser
Tim Berners-Lee
<body><h1>Tim Berners-Lee</h1></body>
Editor READY TO USE CODE
Paragraphs
inarocket.com - HTML / Text Formatting
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>
Editor READY TO USE CODE
Spaces
inarocket.com - HTML / Text Formatting
SPACES: NON BREAKING SPACES
The character entity stands for “non breaking space”
Inserts a single space into your content
inarocket.com - HTML / Text Formatting
index.html
SPACES: NON BREAKING SPACES
Browser
Hello world!
<body><p>Hello world!</p></body>
Editor
Three spaces
READY TO USE CODE
inarocket.com - HTML / Text Formatting
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
inarocket.com - HTML / Text Formatting
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
inarocket.com - HTML / Text Formatting
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
inarocket.com - HTML / Text Formatting
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>
Editor READY TO USE CODE
Preformatted text
inarocket.com - HTML / Text Formatting
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
Blockquote
inarocket.com - HTML / Text Formatting
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
Mark
inarocket.com - HTML / Text Formatting
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
Lists
inarocket.com - HTML / Text Formatting
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
inarocket.com - HTML / Text Formatting
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>
Editor READY TO USE CODE
ol = ordered list. li = list item.
inarocket.com - HTML / Text Formatting
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>
Editor READY TO USE CODE
inarocket.com - HTML / Text Formatting
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>
Editor READY TO USE CODE
Details
inarocket.com - HTML / Text Formatting
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>
Editor READY TO USE CODE
inarocket.com - HTML / Text Formatting
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>
Editor READY TO USE CODE
Figure
inarocket.com - HTML / Text Formatting
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
Comments
inarocket.com - HTML / Text Formatting
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><!-- 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>
Editor
A comment can be useful for documenting your code and is ignored by the browser.
READY TO USE CODE
Block & inline elements
inarocket.com - HTML / Text Formatting
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>
inarocket.com - HTML / Text Formatting
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>
inarocket.com - HTML / Text Formatting
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
inarocket.com - HTML / Text Formatting
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
Are you also interested in learning
BOOTSTRAP 4POSTCSS?+
http://inarocket.teachable.com/courses/css-postcssPlease visit:
inarocket.com
HTMLLearn at rocket speedTEXT FORMATTING
top related