Embed Size (px)
Citation preview
inarocket.com
HTMLLearn at rocket speed
TEXT FORMATTING
Paragraphs
inarocket.com - Learn HTML at rocket speed
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
Spaces
inarocket.com - Learn HTML at rocket speed
SPACES:
The character entity stands for “non breaking space”
Inserts a single space into your content
inarocket.com - Learn HTML at rocket speed
index.html
SPACES:
Browser
Hello world!
<body> <p>Hello world!</p></body>
Editor
Three spaces
inarocket.com - Learn HTML at rocket speed
SPACES: <br>
<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 - Learn HTML at rocket speed
index.html
SPACES: <br>
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
inarocket.com - Learn HTML at rocket speed
SPACES: <hr>
<hr>
HTML elements with no content are called empty elements and they have no closing tag
Inserts a horizontal line and can be used to separate content
inarocket.com - Learn HTML at rocket speed
index.html
SPACES: <hr>
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
Preformatted text
inarocket.com - Learn HTML at rocket speed
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.
Blockquote
inarocket.com - Learn HTML at rocket speed
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.
Mark
inarocket.com - Learn HTML at rocket speed
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 which has relevance.
Lists
inarocket.com - Learn HTML at rocket speed
index.html
LISTS: UNORDERED
Browser
• Spielberg• Coppola• Scorsese
<ul> <li>Spielberg</li> <li>Coppola</li> <li>Scorsese</li></ul>
Editor
li = list item.
inarocket.com - Learn HTML at rocket speed
index.html
LISTS: ORDERED
Browser
1. Usain Bolt - Gold2. Yohan Blake - Silver3. Justin Gatlin - Bronze
<ol> <li>Usain Bolt - Gold</li> <li>Yohan Blake - Silver</li> <li>Justin Gatlin - Bronze</li></ol>
Editor
inarocket.com - Learn HTML at rocket speed
index.html
LISTS: NESTED
Browser
• Red• Light• Dark
• Green• Blue
<ul> <li>Red <ul> <li>Light</li> <li>Dark</li> </ul> </li> <li>Green</li> <li>Blue</li> </ul>
Editor
inarocket.com - Learn HTML at rocket speed
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.
<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>
Editor
Details
inarocket.com - Learn HTML at rocket speed
index.html
DETAILS
Browser
• What is HTML Hypertext Markup Language.
• What is CSS
<details> <summary>What is HTML</summary> <p>Hypertext Markup Language</p></details>
<details> <summary>What is CSS</summary> <p>Cascading Style Sheets.</p></details>
Editor
inarocket.com - Learn HTML at rocket speed
index.html
DETAILS: NESTED
Browser
• What is HTML Hypertext Markup Language.
HTML5 Latest HTML recommendation by the W3C.
<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>
Editor
Figure
inarocket.com - Learn HTML at rocket speed
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.
inarocket.com - Learn HTML at rocket speed
NOTICE
Sorry for the inconvenience.
This presentation is a work in progress.
inarocket.com
HTMLLearn at rocket speed
TEXT FORMATTING
