What is Programming?

+ Your First HTML Page

Lesson 2: From Hardware to Software

Learning to give instructions to computers

What We'll Learn Today

💭 What is programming?
🌐 How do websites work?
📝 What is HTML?
🛠️ Setting up VS Code
🎨 Creating your first webpage
🚀 Seeing your code in a browser

What is Programming?

Programming is giving instructions to a computer

Step-by-step instructions - like a detailed recipe
Using a special language - that computers understand
Solving problems - breaking big tasks into small steps
Creating things - websites, apps, games, tools

Remember: Computers are very fast but not very smart - they need precise instructions!

Programming Languages

Just like human languages, there are many programming languages:

🌐 Web Development

HTML, CSS, JavaScript

📱 Mobile Apps

Swift, Java, React Native

🎮 Games

C#, C++, Python

🤖 AI/Data Science

Python, R, SQL

We're starting with HTML - the language of web pages!

How Do Websites Work?

🖥️ Your Computer

Opens web browser
Types web address
Requests webpage
Turns code into a webpage

🌐 Web Server

Stores website files
Receives your request
Sends back HTML code

HTML is the "skeleton" that tells the browser how to structure a webpage

What is HTML?

HyperText Markup Language

HyperText: Text with links to other text
Markup: Adding attributes/tags to elements (e.g. text)
Language: A set of rules computers understand

HTML uses "tags" to tell the browser:

"This text is a heading"
"This text is a paragraph"
"This text is a link"

Understanding HTML Tags

HTML tags are like labels that wrap around content:

<tagname>Content goes here</tagname>

Opening Tag

<h1>

Starts the instruction

Closing Tag

</h1>

Ends the instruction

Notice the / in the closing tag!

Your First HTML Tags

  <h1>This is a big heading</h1>
  <h2>This is a smaller heading</h2>
  <p>This is a paragraph of text.</p>
  <a href="https://google.com">This is a link</a>

What they create:

🌐 Your webpage

This is a big heading

This is a smaller heading

This is a paragraph of text.

This is a link

Every HTML Page Needs Structure

<!DOCTYPE html>
  <html>
    <head>
      <title>My First Webpage</title>
    </head>
    <body>
      <h1>Welcome to my page!</h1>
      <p>This is my first webpage.</p>
    </body>
  </html>

<head>: Information about the page (title, settings)
<body>: The actual content people see

🛠️ Let's Set Up VS Code!

Step 1: Open VS Code
Step 2: Create a new file (Ctrl+N or Cmd+N)
Step 3: Save it as "index.html" (Ctrl+S or Cmd+S)
Step 4: Choose a folder to save it in

💡 Tip: Create a folder called "Projects" to keep things organized!

✨ Let's Code Your First Webpage!

Type this exactly into VS Code:

<!DOCTYPE html>
            <html>
            <head>
            <title>My First Page</title>
            </head>
            <body>
            <h1>
            Hello, World!
            </h1>
            <p>
            This is my very first webpage!
            </p>
            </body>
            </html>

Save the file when you're done (Ctrl+S or Cmd+S)

🌐 See Your Webpage in Action!

Step 1: Find your saved "index.html" file
Step 2: Right-click on it
Step 3: Choose "Open with" → Your web browser
Step 4: Marvel at your creation! 🎉

You should see "Hello, World!" as a big heading and your paragraph below it!

🎨 Make It Your Own!

Let's personalize your webpage. Try adding:

Change the title to your name
Add more paragraphs about yourself
Add an <h2> heading for different sections
Add a link to your favorite website

              <h2>About Me</h2>
              <p>
              I'm learning to code!
              </p>
              <a href="https://youtube.com">
              My favorite site
              </a>

🎉 What We Just Did!

✅ Learned what programming is - giving instructions to computers
✅ Understood how websites work - browsers, servers, HTML
✅ Created our first HTML file - with headings, paragraphs, links
✅ Saw our code come to life - in a real web browser
✅ Made it personal - customized our own webpage

You're officially a web developer! 🚀

Coming Up Next...

Making It Beautiful with CSS

What is CSS and why do we need it?
Adding colors, fonts, and spacing
Making your webpage look professional
Understanding the separation of content and style

From plain text to stunning designs! 🎨

Keep experimenting with your HTML file before next lesson!