HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser...
Transcript of HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser...
![Page 1: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/1.jpg)
inarocket.com
HTMLLearn at rocket speed
TEXT FORMATTING
![Page 3: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/3.jpg)
Paragraphs
![Page 5: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/5.jpg)
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
![Page 6: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/6.jpg)
Spaces
![Page 7: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/7.jpg)
inarocket.com - Learn HTML at rocket speed
SPACES:
The character entity stands for “non breaking space”
Inserts a single space into your content
![Page 8: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/8.jpg)
inarocket.com - Learn HTML at rocket speed
index.html
SPACES:
Browser
Hello world!
<body> <p>Hello world!</p></body>
Editor
Three spaces
![Page 9: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/9.jpg)
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
![Page 10: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/10.jpg)
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
![Page 11: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/11.jpg)
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
![Page 12: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/12.jpg)
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
![Page 13: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/13.jpg)
Preformatted text
![Page 14: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/14.jpg)
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.
![Page 15: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/15.jpg)
Blockquote
![Page 16: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/16.jpg)
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.
![Page 17: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/17.jpg)
Mark
![Page 19: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/19.jpg)
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.
![Page 20: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/20.jpg)
Lists
![Page 21: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/21.jpg)
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.
![Page 22: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/22.jpg)
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
![Page 23: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/23.jpg)
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
![Page 24: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/24.jpg)
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
![Page 25: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/25.jpg)
Details
![Page 26: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/26.jpg)
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
![Page 27: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/27.jpg)
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
![Page 28: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/28.jpg)
Figure
![Page 29: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/29.jpg)
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.
![Page 30: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/30.jpg)
inarocket.com - Learn HTML at rocket speed
NOTICE
Sorry for the inconvenience.
This presentation is a work in progress.
![Page 32: HTML - WordPress.com · inarocket.com - Learn HTML at rocket speed index.html PARAGRAPHS Browser Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist,](https://reader035.fdocuments.us/reader035/viewer/2022062915/5e93a75133a8dc149f1a87c4/html5/thumbnails/32.jpg)
inarocket.com
HTMLLearn at rocket speed
TEXT FORMATTING