2- Learn HTML Fundamentals / Text Formatting
0 likes225 views
The document covers the fundamentals of HTML focusing on text formatting techniques such as structuring content with headers, organizing paragraphs, and formatting lists. It explains various HTML elements like <blockquote>, <mark>, and <details>, along with their usage and importance in building web pages. The document also emphasizes the significance of documenting code with comments and using HTML entities for reserved characters.
2- Learn HTML Fundamentals / Text Formatting
- 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.
- 3. in a ROCKET HEADERS Use them to define structure and hierarchy of your content
- 4. HTML FUNDAMENTALS: Text formatting inarocket.com <h1> <h2>
- 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.
- 8. in a ROCKET PARAGRAPHS They help you structure the text
- 9. HTML FUNDAMENTALS: Text formatting inarocket.com <p>
- 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.
- 12. in a ROCKET EMPHASIS & IMPORTANCE Use them to stress and emphasize certain words
- 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.
- 15. in a ROCKET SPACES They help you separate content
- 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".
- 22. in a ROCKET PREFORMATTED TEXT Text is rendered using a fixed font and whitespace characters are treated literally
- 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.
- 25. in a ROCKET CODE Use it to represent fragments of computer code
- 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!");}
- 27. in a ROCKET FIGURE Used to represent self-contained content, frequently with a caption
- 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.
- 29. in a ROCKET BLOCKQUOTE It indicates that the enclosed text is an extended quotation
- 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
- 33. HTML FUNDAMENTALS: Text formatting inarocket.com <mark>
- 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.
- 36. in a ROCKET LISTS Use them to mark up lists of items
- 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.
- 42. in a ROCKET DETAILS A disclosure widget from which the user can retrieve additional information
- 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.
- 46. in a ROCKET COMMENTS Include them in your code to say how it works
- 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.
- 49. in a ROCKET HTML ENTITIES Used to display reserved and invisible characters
- 50. HTML FUNDAMENTALS: Text formatting inarocket.com RECOMMENDED REFERENCE
- 51. HTML FUNDAMENTALS: Text formatting inarocket.com Editor BrowserREADY TO USE CODE HTML ENTITIES Web page title index.html <body> <p>Total price: 4.000 €.</p> <p>© All rights reserved.</p> </body> Total price: 4.000 €. © All rights reserved. € ©
- 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