Notes 10 October 2024
Title: Introduction to HTML
• Subtitle: Unlocking the World of Web Development!
• Visuals: Use a colorful background with images of websites or HTML code.
What is HTML?
• Content:
o HTML stands for HyperText Markup Language.
o It’s the standard language for creating web pages.
o HTML uses tags to structure content.
• Visuals: Include a simple HTML code snippet and an image of a website layout.
Why Learn HTML?
• Content:
o Build Your Own Websites!
o Learn the foundation of web development.
o Create interactive and visually appealing content.
• Visuals: Show examples of websites made with HTML.
Basic HTML Structure
• Content:
o An HTML document has a basic structure:
<!DOCTYPE html>`
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
o Key Parts:
▪ DOCTYPE: Declares the document type.
▪ <html>: The root element.
▪ <head>: Contains meta-information.
▪ <body>: Contains the content of the page.
• Visuals: Break down the code into parts with annotations.
Common HTML Tags
• Content:
o Headings: <h1>, <h2>, <h3>, etc.
o Paragraphs: <p>
o Links: <a href="url">
o Images: <img src="image.jpg" alt="description">
• Visuals: Show examples of each tag in action on a sample webpage.
Creating a Simple Web Page
• Content:
o Example of a simple web page:
html
Copy code
<html>
<head>
<title>My Favorite Animals</title>
</head>
<body>
<h1>My Favorite Animals</h1>
<p>I love dogs and cats!</p>
<a href="https://www.google.com">Visit Google</a>
</body>
</html>
• Visuals: Display a preview of how this code would look on a web browser.
Fun Activity
• Content:
o Let’s create a mini web page together!
o Include your favorite hobby or interest.
• Instructions:
o Use the basic structure we learned.
o Add headings, paragraphs, and an image!
• Visuals: Use an example layout to inspire students.
Resources to Explore
• Content:
o Websites to learn HTML:
▪ W3Schools
▪ Codecademy
▪ Mozilla Developer Network
• Visuals: Icons of the resources mentioned.
Questions & Discussion
• Content:
o What do you want to create with HTML?
o Any questions about what we've learned today?
• Visuals: Use a fun background image related to coding or technology.
