HTML Tutorial Part 1: Overview and Structure
Slide 1 – Title Slide
HTML Tutorial Part 1
Overview and Structure
Computer Programming (.NET Technology) Senior High School
Slide 2 – Learning Objectives
At the end of the lesson, learners should be able to:
1. Define HTML and its purpose.
2. Identify the parts of an HTML document.
3. Use a text editor to create HTML files.
4. Save HTML files correctly.
5. Create a simple webpage using HTML.
Slide 3 – What is HTML?
HTML
HyperText Markup Language
• Standard markup language for creating web pages.
• Used to structure content on websites.
• Interpreted by web browsers.
• Foundation of web development.
Note:
HTML is a markup language, not a programming language.
Slide 4 – Why Learn HTML?
HTML allows you to:
• Create websites
1
• Organize webpage content
• Display text, images, videos, and links
• Build the foundation for CSS and JavaScript
Slide 5 – Tutorial Flow
Topics Covered:
1. What is HTML?
2. Text Editors
3. Installing Visual Studio Code
4. Preparing the Workspace
5. Saving HTML Files
6. HTML Elements
7. HTML Page Structure
8. Creating Your First Webpage
Slide 6 – Web Browsers
HTML files are displayed using web browsers such as:
• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Safari
Browsers interpret HTML code and display web pages.
Slide 7 – Text Editors
A text editor is software used to write code.
Examples:
• Notepad
• Notepad++
• Sublime Text
• Visual Studio Code (VS Code)
Benefits:
• Syntax highlighting
• Code completion
2
• Easier editing
Slide 8 – Visual Studio Code
Why Use VS Code?
• Free
• Lightweight
• Beginner-friendly
• Supports HTML, CSS, and JavaScript
• Thousands of extensions available
Slide 9 – Installing VS Code
Steps
1. Visit the VS Code website.
2. Download the installer.
3. Run the setup file.
4. Accept the license agreement.
5. Complete installation.
6. Launch Visual Studio Code.
Slide 10 – Preparing the Workspace
Organizing Files
Create a folder such as:
HTML Tutorial Projects
Benefits:
• Easier file management
• Organized coding projects
• Faster access to files
3
Slide 11 – Saving HTML Files
HTML files use:
• .html
• .htm
Examples:
• [Link]
• [Link]
• [Link]
Important: Always save with the correct extension.
Slide 12 – Opening HTML Files
HTML files can be:
• Edited in text editors
• Opened in browsers
Example:
[Link]
Double-click the file to open it in Chrome or Edge.
Slide 13 – HTML Elements
An HTML element usually contains:
• Opening Tag
• Content
• Closing Tag
Example:
<p>Hello World</p>
Slide 14 – Parts of an HTML Element
Example:
4
<p>Hello World</p>
Opening Tag: <p>
Content: Hello World
Closing Tag: </p>
Slide 15 – HTML Page Structure
Basic Structure:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
Slide 16 – DOCTYPE Declaration
<!DOCTYPE html>
Purpose:
• Tells the browser the document uses HTML5.
• Ensures proper rendering.
Slide 17 – The HTML Element
<html>
Purpose:
• Root element of the webpage.
• Contains all HTML content.
Slide 18 – The HEAD Element
<head>
Contains:
• Metadata
• Page title
5
• CSS links
• Scripts
Not visible on the webpage.
Slide 19 – The BODY Element
<body>
Contains:
• Text
• Images
• Tables
• Videos
• Links
Visible to users.
Slide 20 – Creating Your First Webpage
Example:
<!DOCTYPE html> <html> <head> <title>My First Website</title> </head> <body> <p>Hello World</p> </
body> </html>
Slide 21 – Output
Browser Display:
My First Website
Hello World
Slide 22 – Classroom Activity
Create Your First HTML Page
Instructions:
1. Open VS Code.
6
2. Create a file named: [Link]
3. Type the sample HTML code.
4. Save the file.
5. Open it in a browser.
Slide 23 – Assessment
Answer the following:
1. What does HTML stand for?
2. Is HTML a programming language?
3. What is the purpose of the HEAD element?
4. What is the purpose of the BODY element?
5. What file extension is used for HTML files?
Slide 24 – Summary
Today we learned:
✓ What HTML is
✓ Text editors used in web development
✓ Installing VS Code
✓ Saving HTML files
✓ HTML elements
✓ HTML page structure
✓ Creating a simple webpage
Slide 25 – Thank You
Next Lesson:
HTML Headings, Paragraphs, and Text Formatting
Questions?