+91 9580 740 740 info@[Link] [Link].
com
Course Overview - HTML
Basic understanding of HTML
Create HTML code
Hands-on task with VS Code
Leverage AI (ChatGPT) to write HTML code using
prompts
What is HTML and XML?
HTML stands for Hyper Text Markup Language
XML stands for Extensible Markup Language
Frontend-Middleware-Backend
Frontend-Middleware-Backend
Components of a Webpage
1. HTML (Structure)
What it does: Builds the skeleton of the webpage.
Think of it like: The frame of a house – walls, roof, doors.
Example: Tells the browser where the headings, paragraphs, images, and links go.
2. CSS (Style)
What it does: Adds style and design to the HTML.
Think of it like: Interior decoration – paint, furniture, layout.
Example: Colors, fonts, spacing, and layout of the page.
3. JavaScript (Behavior)
What it does: Adds interactivity and logic to the page.
Think of it like: The electrical system – lights turn on, doors open automatically.
Example: Clicking a button shows a popup, form validation, animations.
Let’s Get Started with HTML
HTML stands for HyperText Markup Language.
It’s like the skeleton or building blocks of a web page.
Latest version of HTML is HTML5.
Example:
Imagine you’re building a house:
HTML is the structure — the walls, the rooms, the windows.
It tells the browser what goes where:
“Here’s a heading”
“Here’s a paragraph”
“Put an image here”
“Make this a link”
But HTML doesn’t make it look pretty — that’s the job of CSS (like painting and decorating).
HTML5 - Latest Version of HTML
What is HTML5?
HTML5 is the latest version of HTML, the language used to build web pages.
✅ What’s new or better in HTML5?
Compared to older versions, HTML5 is:
🆕 Smarter — supports new elements like:
<header>, <footer>, <article>, <section> (for better structure)
🎥 Media-friendly — you can add video and audio without extra plugins (like Flash):
<video src="video.mp4" controls></video>
Mobile-ready — works better on phones and tablets
🧠 Interactive — supports things like: Healthy
Food
Vegan
Food
Drag and drop
Canvas (for drawing graphics)
Geolocation (find your location)
⚡ Faster and cleaner code — no need for as much extra scripting
Quiz Time -1.1
What does HTML stands for ?
HyperText Markup Language
Home Tool Machine Language
Hyper Link Markup Language
Healthy Vegan
Hyper Transfer Markup Language
Food Food
Quiz Time -1.2
Where is HTML used?
Frontend
Backend
Middleware
Healthy Vegan
Data transfer between systems
Food Food
HTML Tags
HTML Tag is a container for some content or some other HTML Tags.
HTML Elements
An HTML element is a building block of a web page. It usually has a start tag, some
content, and an end tag.
HTML Tags
Example of HTML
Healthy Vegan
Food Food
Structure of HTML Code
Write your first HTML Code
1. Open Notepad on your computer.
2. Follow the instructions given by trainer.
Download VS Code
1. Download VS Code on your system/laptop.
2. VS Code Link:
[Link]
3. Follow instructions
Technical Writer’s Role in HTML Coding
Technical writers don’t usually build full websites, but they often use HTML
in documentation, help files, or online manuals.
HTML Assignment 1
HTML Assignment:
1. Create Your First Web Page
2. Goal: Create a basic web page that introduces yourself.
3. Instructions:
4. Open Notepad (or any simple text editor).
5. Copy and paste the following HTML code.
6. Customize it with your own info (name, hobbies, etc.).
7. Save the file as: my_first_page.html
8. Choose "All Files" as the file type
9. Add .html at the end manually
Download Notepad ++
HTML tasks:
1. Open your browser
2. Search for Notepad++
3. Download it.
<head> vs <header> tags
<head> tag
<header> tag
<div> tag
<div> tag
<div> tag
<a href=> tag
<a href=> tag
<a href=> tag
Table Tags
Table Tags
Table Tags
HTML Tags - Basic Tags
HTML Tags - Text Formatting Tags
HTML Tags - Links and Media Tags
HTML Tags - Container Tags
HTML Tags - List Tags
HTML Tags - Table Tags
What is CSS ?
Components of CSS
Components of CSS
Components of CSS
Components of CSS
Components of CSS
<style> vs <class>
<style> vs <class>
CSS Quiz
1. CSS stands for ?
Cascading Style Sheet
Creative Style Syntax
Coding Style Scripts
CSS Quiz
2. What is the purpose of CSS?
Add comments to HTML
Style and layout webpages
Debug HTML code
CSS Quiz
3. What is CSS selector?
A function in CSS
Name of the file
Part that selects the HTML element to the
style
+91 9580 740 740 info@[Link] [Link]