📝 Today's Focus: Making text meaningful and beautiful in HTML!
🎯 Learning Objectives
By the end of this class, I will be able to:
- Create properly formatted _________________
- Use all _____ heading levels effectively
- Apply _________________ and _________________ formatting
- Understand element _________________ and relationships
- Master HTML _________________
- Practice proper code _________________
🤔 The Whitespace Problem
What happens to multiple spaces and line breaks in HTML?
Browsers _________________ all whitespace into _________________ space!
Example: What will this display?
<body>
Lorem ipsum dolor sit amet.
Ut enim ad minim veniam.
</body>
Result: _________________________________________
Solution: We need HTML _________________ to structure our text!
¶ Paragraph Elements
Creating Paragraphs
The paragraph tag: _______
<_____>
<_____>First paragraph of text</_____>
<_____>Second paragraph of text</_____>
</body>
💡 VS Code Tip: Type __________ + Enter to generate Lorem Ipsum text!
Quick Practice: Add 3 paragraphs to your website
□ Paragraph 1: ________________________________
□ Paragraph 2: ________________________________
□ Paragraph 3: ________________________________
📰 HTML Headings
Six Levels of Headings
| Tag |
Purpose |
Size |
| <h1> |
_________________________ |
Largest |
| <h2> |
_________________________ |
↓ |
| <h3> |
_________________________ |
↓ |
| <h4> |
Sub-subsection |
↓ |
| <h5> |
Minor heading |
↓ |
| <h6> |
Smallest heading |
Smallest |
⚠️ Important Rule: Only _______ h1 per page!
Proper Heading Hierarchy
✅ Good Structure:
- h1: _________________________
- h2: _________________________
- h3: _________________________
❌ Never skip levels! (Don't go from h1 → h3)
✨ Text Formatting Elements
Making Text Bold: <strong>
Purpose: Makes text _________________ AND _________________
<p>This is <________>important</________> text!</p>
Adding Emphasis: <em>
Purpose: Makes text _________________ AND _________________
<p>I <_____>really</_____> love coding!</p>
Combining Elements
<p><strong><em>Warning:</em></strong> This is bold AND italic!</p>
💡 Remember: These tags add _________________ meaning, not just styling!
🪆 Nesting and Element Relationships
HTML Family Tree
<body>
<!-- Parent -->
<div>
<!-- Child of body, Parent of h2 & p -->
<h2>Title</h2>
<!-- Sibling 1 -->
<p>Text</p>
<!-- Sibling 2 -->
</div>
</body>
Fill in the relationships:
- Elements inside another element are called _________________
- The containing element is called the _________________
- Elements at the same level are called _________________
Indentation Best Practices
Standard indentation: _____ spaces per nesting level
Alternative: _____ spaces (just be consistent!)
Practice: Properly indent this code:
<body>
<header>
<h1>Title</h1>
</header>
<main>
<p>Content</p>
</main>
</body>
💭 HTML Comments
Comment Syntax
Opening: __________
Closing: __________
_______ This is a comment _______
_______
Multi-line
comment
_______
VS Code Shortcut
Windows/Linux: __________ + _____
Mac: __________ + _____
Good Uses for Comments
- ✅ _________________________________
- ✅ _________________________________
- ✅ _________________________________
- ✅ _________________________________
📝 Blog Article Practice
Create a blog article with these requirements:
Your Article Checklist:
- □ ONE h1 for article title: _______________________________
- □ 2-3 h2 section headings:
1. _______________________________
2. _______________________________
3. _______________________________
- □ At least one h3 subsection: _______________________________
- □ 3+ paragraphs with lorem ipsum
- □ Bold 3 important terms:
1. _______________________________
2. _______________________________
3. _______________________________
- □ Italicize 2+ words for emphasis:
1. _______________________________
2. _______________________________
- □ Add comments marking each section
- □ Maintain proper indentation
⚠️ Common Mistakes to Avoid
| Mistake |
Why It's Wrong |
Correct Approach |
| Multiple h1 tags |
_________________________ |
_________________________ |
| Skipping heading levels |
_________________________ |
_________________________ |
| Using <strong> just for bold |
_________________________ |
_________________________ |
| No indentation |
_________________________ |
_________________________ |
📋 Quick Reference
Essential Text Elements
| Element |
Tag |
Purpose |
| Paragraph |
<p> |
Text blocks |
| Main Heading |
<h1> |
Page title (only one!) |
| Section Headings |
<h2>-<h6> |
Content hierarchy |
| Bold/Important |
<strong> |
Important text |
| Italic/Emphasis |
<em> |
Emphasized text |
| Comment |
<!-- --> |
Hidden notes |
📚 Homework Assignment
Due: Before Next Class (Thursday)
- Watch Kevin Powell's HTML Paragraph and Headings Video
Notes: _________________________________________
- Watch Kevin Powell's HTML Bold and Italic Text Video
Notes: _________________________________________
- Create a complete blog article page with:
- □ Proper heading hierarchy
- □ Multiple paragraphs
- □ Bold and italic text
- □ HTML comments
- Add AT LEAST 3 different text tags to your one-page website:
Tag 1: _________ Tag 2: _________ Tag 3: _________
⚠️ Don't forget: Push to GitHub and submit link on D2L!
📝 Additional Notes
Use this space for any additional notes during the lecture:
🔑 Key Takeaways
- HTML is about _________________, not appearance
- Browsers compress _________________ into single spaces
- Only use _______ h1 per page
- Don't skip _________________ levels
- <strong> and <em> add _________________ meaning
- Proper _________________ makes code readable
- Comments are for _________________, not users