Week 4 Lecture Part 2
Download as PPTX, PDF0 likes687 views
This document discusses various HTML formatting tags including <p> for paragraphs, <h1>-<h6> for headings, <strong> for bold text, <em> for emphasized text, <br/> for line breaks, and <hr/> for horizontal rules. It provides examples of how each tag is structured and used in HTML code to format text and create structure in a web document.
Week 4 Lecture Part 2
- 1. WEEK 4 FORMATTING HTML CONTENT
- 2. THE <P> TAG • HTML content is very different than working in an application like InDesign, MS Word or other word processor • By adding a couple of additional tags to our basic HTML structure, we can start to build and format content. • When adding paragraphs of copy within a web document you have to use the opening and closing <p> </p> tags to create the separation between sections of copy • Example: <p>Everything between the opening and closing <p> tags is being described to the web browser as a paragraph</p> • <p> </p> = Used to create paragraphs, require an opening and closing tag
- 3. THE <P> TAG <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <p>Just some random text to make a paragraph. Just some random text to make a paragraph.</p> <p>Just some random text to make a paragraph. Just some random text to make a paragraph</p> </body> </html>
- 4. THE <H1> TO <H6> TAGS • HTML has 6 available heading tags <h1> to <h6> • They are tag pairs, meaning they have an opening tag and a matching closing tag
- 5. THE <H1> TO <H6> TAGS • Heading tags define the headings and sub-headings in your page • They enable the user to quickly understand what they're reading and how the sections of content relates to each other. • Heading tags should be used in descending order as intended and only used for headings • Headings should not be used to format other content (eg. make text larger) • The first heading tag <h1> is the biggest and boldest, it should only be used once per page • The rest of the content uses sub-headings: <h2> - <h6>
- 6. THE <H1> TO <H6> TAGS <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>Here is a heading to my content</h1> <p>Just some random text to make a paragraph. Just some random text to make a paragraph.</p> <h2>Here is a sub heading to my content</h2> <p>Just some random text to make a paragraph. Just some random text to make a paragraph.</p> </body> </html>
- 7. THE <STRONG> TAG • The <strong> tag is used to make portions or single words strong, or bold • Although there is a bold tag available in HTML <b> the newer versions of HTML (HTML 5) requires we use <strong> instead of <b> because it is more semantic (descriptive) to the web browser • The <strong> tag require pairs - an opening tag and a matching closing tag Example: <strong>This text now become strong or bold</strong> • The <strong> tag is usually “nested” inside of another tag and it can describe 1 word or multiple words as being strong
- 8. THE <STRONG> TAG <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <p>Just some <strong>random text</strong>to make a paragraph. Just some random text to make a paragraph. Just some random text to make a paragraph.</p> </body> </html>
- 9. THE <EM> TAG • The <em> tag is used to make portions or single words emphasized or italicized • Although there is a italics tag available in HTML <i> the newer versions of HTML (HTML 5) requires we use <em> instead of <i> because it is more semantic (descriptive) to the web browser • The <strong> tag require pairs - an opening tag and a matching closing tag Example: <em>This text now emphasized</em> • The <em> tag is usually “nested” inside of another tag and it can describe 1 word or multiple words as being emphasized
- 10. THE <EM> TAG <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <p>Just some <strong>random text</strong>to make a paragraph. Just some Just some <em>random text to</em> make a paragraph. Just some random text to make a paragraph.</p> </body> </html>
- 11. THE <BR /> TAG • The <br /> tag is used to insert a lines break in text • The <br /> tag is a “self closing” or “self terminating” tag which means it does not require a closing tag • You may also see it written as <br> (without the /> on the right) Example (code): <p>This is some text that will be <br />broken to another line with the break <br />tag.</p> How it will display: This is some text that will be broken to another line with the break tag. • The <br /> tag is usually “nested” inside of another tag to break paragraph text to new lines but can be used on its own to create space between elements
- 12. THE <BR /> TAG <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <p>Just some <strong>random text</strong>to make a paragraph. Just some Just some <em>random text to</em> make a paragraph. <br />Just some random text to make a paragraph.</p> </body> </html>
- 13. THE <HR /> TAG • The <hr /> tag is used to insert a horizontal rule usually to indicate a new section of text or for visual interest • The <hr /> tag is a “self closing” or “self terminating” tag which means it does not require a closing tag Example (code): <h1>This is a heading</h1> <hr /> <p>This is a paragraph of text</p> How it will display: This is a heading This is a paragraph of text
- 14. THE <HR /> TAG <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <p>Just some <strong>random text</strong>to make a paragraph. Just some Just some <em>random text to</em> make a paragraph.</p> <hr /> <p>Just some random text to make a paragraph.</p> </body> </html>