What is internet?

Why internet was invented?

US Military Communication
Academic Collaboration
Innovative Experimentation
Global Connectivity Vision
Do you know who invented internet?
 Who invented internet
Internet was not invented by one organization

ARPANET (packets switching)

Vint Cerf and Bob (protocols)
Tim Berners-Lee invented the World Wide Web
Do you know the full form of www?
 Who invented www?

In 1989, Tim Berners-Lee invented the World Wide Web (WWW), creating a
user-friendly way to access and share information on the Internet.
What is web server?
 What is web server?

A web server is software or hardware that delivers web pages to users over
the internet. It is available 24*7.
What is website?
 What is website?
A website is a collection of web pages that are stored on a web server and
accessible through the internet.
 Static and Dynamic website
A static website has fixed content that doesn't change unless manually updated.
Each page is the same for every visitor.

A dynamic website can change content based on user interaction or data, such as
showing personalized info or updating in real-time.
Let’s Begin our Web development journey
 What is HTML?
HTML (HyperText Markup Language) is the standard language used to
create the structure of a web pages
HTML / CSS / JAVASCRIPT
Which is the current latest version of HTML?
HTML 5.2
HTML Release History
Requirement to create a webpage

Text Editor
Web Browser
What is Text Editor
Text Editor
What is Browser and its uses?
 What is Browser?

A browser is a software which is use to access internet (websites) on

electronic devices.
Different Browser name’s?
Browser
What is IDE?
 What is IDE?

An IDE (Integrated Development Environment) is a software application that

provides tools like a code editor, debugger, and Extensions.
Types of IDE for Web Development
Best IDE
Best Browser
Why internet explorer is best?
Best Browser’s
What is file extension and why to use it?
 File Extensions

A file extension is the last part of a file's name, starting with a dot (.),
that tells you what kind of file it is.
HTML File Extension
 Why write home page name as [Link] ?

The reason many websites use [Link] as the name for the homepage
is based on a convention set by web servers.

[Link]
 Let’s Write Our First Webpage Program

In Which we will print Career Inspire is Best IT Training Institute

Do you know what is Boilerplate code?
Boilerplate Code
What is Tag and Element
 Types of Tags

In HTML, there are two types of tags:

1. Paired (Opening and Closing) Tags

2. Self-Closing (Empty) Tags
 Types of Tags

In HTML, there are two types of tags:

1. Paired (Opening and Closing) Tags

2. Self-Closing (Empty) Tags
What is Heading ?
 Heading tags

<h1>This is Heading 1 </h1>

<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
How many h1 Heading tag be on a single page can have
and Why?
Is HTML case sensitive language???
Let’s Optimize Our VS Code For Productivity

Shortcuts
Extensions
 Paragraph tag

<p>Career Inspire is a leading IT training

institute offering comprehensive courses
in various technologies. It provides expert
guidance, hands-on training, and
industry-relevant skills to help students
excel in the IT field.</p>
 What is Attribute?

An attribute in HTML provides additional

information about an element.
 Pre tag

<pre>
Rise up, face the day,
Let your dreams lead the way.
Through the storm, find the light,
Keep going, you'll take flight.
</pre>
 Line Break tag

<p>Career Inspire is a leading IT training

institute offering comprehensive courses
in various technologies. <br /> It provides
expert guidance, hands-on training, and
industry-relevant skills to help students
excel in the IT field.</p>
 Horizontal Ruler tag

<p>Career Inspire is a leading IT training

institute offering comprehensive courses
in various technologies. <hr /> It provides
expert guidance, hands-on training, and
industry-relevant skills to help students
excel in the IT field.</p>
Text Formatting tag
Do you know the meaning of deprecated???
 Text Formatting tag

<p>I am <bold>bold</bold></p>
<p>I am <strong>strong</strong></p>
<p>I am <i>italic</i></p>
<p>I am <em>emphasized</em></p>
<p>I am <big>big</big></p>
<p>I am <small>small</small></p>
<p>I am <strike>strikethrough</strike></p>
<p>I am <del>deleted</del></p>
<p>I am <mark>marked</mark></p>
<p>I am Superscript x⁵</p>
<p>I am Subscript H₂O</p>
 Comments

<!-- My navbar starts from here -->

<nav>
Home
About
Contact
</nav>
<!-- My navbar ends here -->
 Img tag

<img src=”[Link]” alt=”UFO image” width=”200px” height=”200px” loading=”eager”/>

 Absolute Path Vs Relative Path

An absolute file path is the full URL to a file.

<img src="[Link] alt="Mountain" />

A relative file path points to a file relative to the current page.

<img src="img/[Link]" alt="Mountain" />

I recommend you to use relative path

 Anchor tag
<a href="[Link] />Visit to career Inspire</a>

<a href="[Link] Email</a>

<a href="[Link] Now</a>

<a href="[Link] download="example-

file">Download PDF</a>

<a href=”[Link] target="_blank">Open in New Tab</a>

 Image with a Link

<a href="[Link] /><img src="[Link]" /></a>

Table tag
Table tag all attributes
Colspan attribute
Rowspan attribute
Semantic Table tags

<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
Lists
Types of Lists
 List attributes

type
start
reversed
 Div tag

The <div> tag in HTML is a container element used to group other HTML
elements together.
Basic Structure of a Webpage
 Span tag

The <span> tag in HTML is a generic inline container used to group and
style a portion of text or other inline elements
Block and Inline tag
Block Elements
Inline Elements
 Semantic tags
Semantic tags are elements that clearly describe their meaning to
both the browser and developers.
Div Vs Semantic Tags
 Form tag

Do you know why we create a form?

 Form tag
The form tag is used to take input from the user , it is used to
collect user data.
Form tag
Textual Input Types
Numeric Input Types
Date and Time Input Types
Boolean Input Types
File Input Types
Button Types
Specialized Input Types
Textarea tag
Get and Post method
 Iframe tag

<iframe src="[Link] width="300px"

height="600px" border="1"></iframe>
Map Embed
Youtube Video Embed
 Marquee tag

The <marquee> tag in HTML is used to create a scrolling text or image that
moves horizontally or vertically across the web page.
 Entities

Entities in HTML are used to represent reserved characters, symbols, or characters

not found on the keyboard. HTML entities can be represent with entity name or
entity numbers.
What is Emoji’s and why we use it?
Emoji’s
 Favicon

A favicon (short for "favorite icon") is a small icon or image associated with a
website, displayed in browser tabs, bookmarks, and sometimes in the address
bar. It helps users visually identify a website.
What is Multimedia?
 Multimedia

Multimedia on the web is sound, music, videos, and movies.

 Audio tag
<audio id="myAudio" src="sample-audio.mp3" controls autoplay loop
muted preload="auto" crossorigin="anonymous">
<source src="sample-audio.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Audio tag attributes
 Video tag
<video id="myVideo" width="640" height="360" controls autoplay loop
muted preload="auto" poster="[Link]" crossorigin="anonymous">
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
<source src="[Link]" type="video/webm">
Your browser does not support the video element.
</video>
Video tag attributes
 Graphics
In HTML, graphics refers to any visual elements used to enhance the
appearance of a webpage, such as images, drawings, animations, and
interactive visual components.
 SVG

<svg><rect width="150" height="100" fill="orange" /></svg>

 Canvas
<canvas id="canvas"></canvas>
<script>
const canvas = [Link]("canvas");
const ctx = [Link]("2d");
[Link] = "orange";
[Link](10, 10, 150, 100);
</script>
 Global Attributes

Global attributes are attributes that can be used on almost any HTML element.
Global Attributes
Global Attributes
Global Attributes
Let’s Store HTML webpage Data to Spreadsheets
 What is hosting?
Website hosting is a service that allows you to store your website's
files (like images, text, and code) on a server so that people can
access your website on the internet. In simple terms, it's like renting a
space on the internet where all the content of your website is kept.
Hosting service providers
 What is DNS
The Domain Name System (DNS) is the phonebook of the Internet. Humans
access information online through domain names, like [Link] or
[Link].
Let’s Free Host a Website
Congrulations