Demo Mode

Lesson 2 of 14

Concept 2: Introduction to HTML

Introduction to HTML

:dart: Learning Objectives

By the end of this lesson, you will be able to:

Define what HTML is and explain its purpose
Identify and use basic HTML elements
Add attributes to HTML elements
Create your first simple web page

:emoji: What is HTML?

:information_source: HTML (HyperText Markup Language) is the special language we use to create web pages. Think of it as the building blocks for everything you see on the internet!

How HTML Works

HTML uses special tags that tell your web browser what to display. Here's what HTML does:

Shows content: Tells the browser what text, images, and videos to display
Formats content: Makes text big or small, bold or italic
Creates links: Connects your page to other websites

:bulb: Tip You can write HTML in any text editor! Just save your file with .html at the end (like mypage.html) and open it in a web browser.

:emoji: The Journey of a Web Page

When you type a website address (like www.telebort.com) into your browser, here's what happens:

Your browser asks the web server for the page
The server finds the HTML file
The server sends the file to your computer
Your browser reads the HTML and shows you the web page

Graphical illustration of how does HTML work

:memo: Note HTML is like a human body! Just as our body has a head and a body, an HTML page has a <head> section (for information) and a <body> section (for content).

Analogy of HTML structure as human body

:rocket: Your First HTML Example

Let's see how HTML transforms into a web page:

HTML Input:

html

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

Browser Interpretation:

less

The browser reads the HTML tags and understands:
- <h1> = Main heading
- <p> = Paragraph text
- <title> = Page title (shown in browser tab)

Output:

vbnet

Welcome to My Website
This is my first paragraph.

:emoji:️ HTML Elements

:information_source: HTML Elements are the building blocks of web pages. Most elements have two parts: an opening tag and a closing tag that wrap around your content.

How Elements Work

Elements wrap around your content like a sandwich:

Opening tag: Starts with <tagname>
Content: Your text or other elements go here
Closing tag: Ends with </tagname>

Let's create a paragraph:

HTML Input:

html

<p>Hi! My name is Chong Wei!</p>

Output:

csharp

Hi! My name is Chong Wei!

:dart: Empty Elements

Some elements don't need closing tags. We call these empty elements:

 : Creates a line break (like pressing Enter)
<img>: Adds an image
<hr>: Draws a horizontal line

Here's how   works:

HTML Input:

html

<p>Hi!<br /> My name is Chong Wei!</p>

Output:

csharp

Hi!
My name is Chong Wei!

:bulb: Tip HTML tags work in UPPERCASE or lowercase ( = ), but always use lowercase. It's easier to read and is the standard way to write HTML!

:emoji:️ HTML Attributes

:information_source: HTML Attributes are like special instructions that give extra information about an element. They help control how elements look and behave.

What Attributes Do

Attributes are powerful tools that:

Add information: Tell the browser extra details about the element
Control appearance: Set sizes, colors, and styles
Define behavior: Make elements interactive or clickable

How to Write Attributes

Attributes always go in the opening tag and follow this pattern:

html

<tag attribute="value">...</tag> OR <tag attribute="value">

:emoji:️ Image Example

The <img> tag uses the src attribute to show images. Here's how:

HTML Input:

html

<img src="https://example.com/kitten.jpg" />

Output:

html

<!-- Browser renders: -->
<img src="https://example.com/kitten.jpg" />
<!-- This displays an image of a kitten on the webpage -->

:memo: Multiple Attributes

You can add many attributes to one element. Just separate them with spaces!

:memo: Note The alt attribute is super important! It shows text when:

The image can't load

Someone uses a screen reader

The internet is slow

Let's add an alt attribute:

HTML Input:

html

<img src="https://example.com/kitten.jpg" alt="A cute kitten" />

Output:

html

<!-- Browser renders: -->
<img src="https://example.com/kitten.jpg" alt="A cute kitten" />
<!-- If image fails to load, displays: "A cute kitten" -->

:white_check_mark: HTML is the language for creating web pages :white_check_mark: Elements are building blocks with opening and closing tags :white_check_mark: Attributes add extra information to elements :white_check_mark: Tags should be written in lowercase :white_check_mark: Some elements like   and <img> don't need closing tags

:movie_camera: Video Tutorial

Introduction to HTML

:emoji: AI Prompt

Code with AI: Let AI help you write HTML!

Prompts:

css

"Generate HTML for a paragraph with the text 'Hello, world!'"
"Create HTML for an image with the source 'image.jpg' and alt text 'My Image'."
"Generate HTML for an unordered list with three items: apples, bananas, and oranges."

:books: Additional Resources

HTML Beginner's Guide

:dart: Practice Time!

Try these exercises to test your new skills:

Create a paragraph: Write an HTML paragraph about your favorite hobby
Add a line break: Use the   tag to split a sentence into two lines
Insert an image: Add an image with both src and alt attributes
Combine elements: Create a page with a heading, paragraph, and image

Remember: The best way to learn HTML is by practicing. Open a text editor and start coding!

Lesson 2 of 14

Concept 2: Introduction to HTML

Introduction to HTML

:dart: Learning Objectives

By the end of this lesson, you will be able to:

Define what HTML is and explain its purpose
Identify and use basic HTML elements
Add attributes to HTML elements
Create your first simple web page

:emoji: What is HTML?

:information_source: HTML (HyperText Markup Language) is the special language we use to create web pages. Think of it as the building blocks for everything you see on the internet!

How HTML Works

HTML uses special tags that tell your web browser what to display. Here's what HTML does:

Shows content: Tells the browser what text, images, and videos to display
Formats content: Makes text big or small, bold or italic
Creates links: Connects your page to other websites

:bulb: Tip You can write HTML in any text editor! Just save your file with .html at the end (like mypage.html) and open it in a web browser.

:emoji: The Journey of a Web Page

When you type a website address (like www.telebort.com) into your browser, here's what happens:

Your browser asks the web server for the page
The server finds the HTML file
The server sends the file to your computer
Your browser reads the HTML and shows you the web page

Graphical illustration of how does HTML work

:memo: Note HTML is like a human body! Just as our body has a head and a body, an HTML page has a <head> section (for information) and a <body> section (for content).

Analogy of HTML structure as human body

:rocket: Your First HTML Example

Let's see how HTML transforms into a web page:

HTML Input:

html

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

Browser Interpretation:

less

The browser reads the HTML tags and understands:
- <h1> = Main heading
- <p> = Paragraph text
- <title> = Page title (shown in browser tab)

Output:

vbnet

Welcome to My Website
This is my first paragraph.

:emoji:️ HTML Elements

:information_source: HTML Elements are the building blocks of web pages. Most elements have two parts: an opening tag and a closing tag that wrap around your content.

How Elements Work

Elements wrap around your content like a sandwich:

Opening tag: Starts with <tagname>
Content: Your text or other elements go here
Closing tag: Ends with </tagname>

Let's create a paragraph:

HTML Input:

html

<p>Hi! My name is Chong Wei!</p>

Output:

csharp

Hi! My name is Chong Wei!

:dart: Empty Elements

Some elements don't need closing tags. We call these empty elements:

 : Creates a line break (like pressing Enter)
<img>: Adds an image
<hr>: Draws a horizontal line

Here's how   works:

HTML Input:

html

<p>Hi!<br /> My name is Chong Wei!</p>

Output:

csharp

Hi!
My name is Chong Wei!

:bulb: Tip HTML tags work in UPPERCASE or lowercase ( = ), but always use lowercase. It's easier to read and is the standard way to write HTML!

:emoji:️ HTML Attributes

:information_source: HTML Attributes are like special instructions that give extra information about an element. They help control how elements look and behave.

What Attributes Do

Attributes are powerful tools that:

Add information: Tell the browser extra details about the element
Control appearance: Set sizes, colors, and styles
Define behavior: Make elements interactive or clickable

How to Write Attributes

Attributes always go in the opening tag and follow this pattern:

html

<tag attribute="value">...</tag> OR <tag attribute="value">

:emoji:️ Image Example

The <img> tag uses the src attribute to show images. Here's how:

HTML Input:

html

<img src="https://example.com/kitten.jpg" />

Output:

html

<!-- Browser renders: -->
<img src="https://example.com/kitten.jpg" />
<!-- This displays an image of a kitten on the webpage -->

:memo: Multiple Attributes

You can add many attributes to one element. Just separate them with spaces!

:memo: Note The alt attribute is super important! It shows text when:

The image can't load

Someone uses a screen reader

The internet is slow

Let's add an alt attribute:

HTML Input:

html

<img src="https://example.com/kitten.jpg" alt="A cute kitten" />

Output:

html

<!-- Browser renders: -->
<img src="https://example.com/kitten.jpg" alt="A cute kitten" />
<!-- If image fails to load, displays: "A cute kitten" -->

:books: Summary

Let's review what we learned:

:movie_camera: Video Tutorial

Introduction to HTML

:emoji: AI Prompt

Code with AI: Let AI help you write HTML!

Prompts:

css

"Generate HTML for a paragraph with the text 'Hello, world!'"
"Create HTML for an image with the source 'image.jpg' and alt text 'My Image'."
"Generate HTML for an unordered list with three items: apples, bananas, and oranges."

:books: Additional Resources

HTML Beginner's Guide

:dart: Practice Time!

Try these exercises to test your new skills:

Create a paragraph: Write an HTML paragraph about your favorite hobby
Add a line break: Use the   tag to split a sentence into two lines
Insert an image: Add an image with both src and alt attributes
Combine elements: Create a page with a heading, paragraph, and image

Remember: The best way to learn HTML is by practicing. Open a text editor and start coding!