Module 1
Introduction to the Internet &
Web Technologies
CO1: Understand the fundamentals of internet protocols, HTTP
communication, and utilize Git and GitHub for version control and
collaboration.
Class: SE
Sem: IV (NEP 2020)
Introduction to HTML
HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags contains label pieces of content such as "heading",
"paragraph", "table",etc
• Browsers do not display the HTML tags, but use them to render the
content of the page
Example Output
[Link]
<!DOCTYPE html>
<html>
<head>
<title>PageTitle</title>
</head>
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>
HTML Tags/Elements
HTML tags are element names surrounded by angle brackets:
<tagname> content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start / opening tag, the second tag is the
end/closing tag.
• The end tag is written like the start tag, but with a forward slash inserted
before the tag name
HTML Tags
1. Structured Tag
2. Text Formatting Tag
3. List tag
4. Image tag
5. Table tag
6. Form and Input tag
HTML Structural Tags
1. <!DOCTYPE html>: Declares the document type and version of HTML.
2. <html>: Represents the root of an HTML document.
3. <head>: Contains metadata, links to stylesheets, and scripts.
4. <title> : Sets the page title in the browser tab.
5. <body>: Encloses the main content of the [Link] all visible
page content.
Formatting elements were designed to
HTML Formatting Elements display special types of text:
Element Use
<b> </b> defines bold text
<i></i> content inside is typically displayed in italic.
<sub></sub> defines subscript text. Subscript text appears half a character below the normal
line
<sup></sup> defines superscript text. Superscript text appears half a character above the
normal line
<mark></mark> defines text that should be marked or highlighted:
<strong></strong> defines text with strong importance. The content inside is typically displayed in
bold
<small></small> defines smaller text:
<del</del> text that has been deleted from a document. Browsers will usually strike a line
through deleted text
<ins></ins> defines a text that has been inserted into a document. Browsers will usually
underline inserted text
HTML List
HTML lists are used to group related items in a structured manner.
Why use Lists?
• Organize content in structured form
• Improve readability
• Useful for menus, steps, features, points, etc.
Types of lists in HTML:
1. unordered lists
2. ordered lists
3. description lists.
Unordered List Ordered List
• Displays bullet points • Displays numbered list
• No specific sequence • Follows a sequence/order
• Each item written inside <li> • Uses <li> for items
Tag: Tag:
<ul> </ul> <ol></ol>
Attribute: Attribute:
type = disc|circle|square type = 1|A|I|a|i
Description List List
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
1. The <dl> tag defines the description list
2. The <dt> tag defines the term (name)
3. The <dd> tag describes each term.
HTML Heading
• The HTML heading tags (<h1> to <h6>) are used to add headings to a
webpage.
• Tags <h1> to <h6> to create headings of varying sizes and importance.
• The <h1> tag denotes the most important heading on a webpage.
Similarly, <h6> denotes the least important heading.
Anchor/Link tag
• The anchor tag <a> is a hyperlink that allows people to navigate among
various web pages, files, or parts of a webpage.
• Href, which is often abbreviated as hypertext reference, is the most
important attribute of this tag because it contains the destination of the
URL or path.
<a href = "..........."> Link Text </a>
href represents the attribute that contains the destination address, and Link
Text represents the clickable text visible to users.
By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
HTML Table tag
Attribute Description Values
1, 2, 3... (Not recommended in HTML5;
border Adds border to table and cells
use CSS instead)
width Sets table width pixels (300px) or percentage (80%)
height Sets table height pixels or %
align Aligns table on page left, center, right(obsolete in HTML5)
bgcolor Sets background color of table color name or hex(obsolete; use CSS)
Space between cell border and
cellpadding pixels (10)(obsolete; use CSS)
content
cellspacing Space between cells pixels (5)(obsolete; use CSS)
Image Tag
• The HTML <img> tag is used to embed an image in a web page.
• The <img> tag creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
• The <img> tag hasfollowing attributes:
1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image
3. width and height - determine the display size of an image in pixel
<img src="url" alt="alternatetext">
Paragraph Tag
• HTML paragraphs are tags that are necessary for the organization and
presentation of the text on a webpage .
• They are defined with the <p> tag.
• They enable developers to break content into senseful readable blocks
that enhance clarity and arrangement.
• If we use <p> tag then the browser automatically adds a single blank
line between the two paragraphs.
<p>This is a paragraph.</p>
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-
width font (usually Courier), and it preserves both
spaces and line breaks:
Font tag (Not Supported in HTML5
• HTML <font> tag is used to define the font style for the text contained
within it.
• It defines the font size, color, and face or the text in an HTML document.
<font size=" " color=" " face=" ">
Content....
</font>
color- It specifies the color of the content
face- It specifies thefont family of the content.
size - It specifies the size of the content.
HTML Color
• HTML color is used to change the color of text, background, borders,
and other elements on a web page.
• HTML itself does not have a <color> tag.
• Colors are applied using CSS, mostly through the style attribute in
HTML5.
<tag style="color:value;">
Content
</tag>
You can apply color to:
1. Text
2. Background
3. Borders
4. Tables
5. Headings, paragraphs, links, etc.
Example:
<h1 style="color:green;"> Heading </h1>
<p style="color:#0000FF;"> Paragraph </p>
Types of Color Values in HTML
Color Type Format Example
Color Name red color:red;
HEX #RRGGBB color:#FF5733
RGB rgb(0–255) color:rgb(255,0,0)
RGBA rgba() color:rgba(0,0,0,0.5)
HTML <div>
• The HTML <div> tag is used to group the large section of HTML elements
together.
• It is just like a container unit which is used to hold other page elements and
divides the HTML documents into sections.
• The div tag is generally used by web developers to group HTML elements
together and apply CSS styles to many elements at once.
<div style="border:1px solid pink;padding:20px;font-size:20px;color:green">
<p>
Welcome to FAMT,Ratnagiri.
</p>
<p>
This is second paragraph
</p>
</div>
HTML Form
• The HTML form is used to collect input from users through different
interactive controls, such as numeric inputs, text fields, checkboxes,
submit buttons, radio buttons, password fields, email fields, etc.
• We use the HTML <form> tag to create forms.
• The <form> element serves as the container for various input elements.
<form>
<!--form elements-->
</form>
attributes Description
action defines where to send form data when a form is submitted. It has URL for the
server where the form data is sent.
method defines the HTTP method used when the form is submitted.
post: Sends form-datato the server and get: Appends data to the URL(Default).
target It indicates where to display the response received after the form is submitted.
_blank, _self (default) , _parent , _top
name This attribute defines the name of the form. It is used in JavaScript to access
or reference the form.
autocomplete specifies whether a form can have autocomplete on or off for input element
enctype enctype attribute specifies how to encode form data when it is submitted to
the server. It takes values: It takes values:
• application/x-www-form-urlencoded (default)
• multipart/form-data
• text/plain
<!DOCTYPE html>
<label> Name:
<html>
<input type="text" name="username"
<head>
required>
<title>Form Attributes Demo</title>
</label><br><br>
</head>
<body>
<label> Upload File:
<h2>Sample Form Using All Attributes</h2>
<input type="file" name="myfile">
<form
</label><br><br>
name="feedbackForm"
action="[Link]"
<button type="submit">
method="post"
Submit
enctype="multipart/form-data"
</button>
target="_blank"
</form>
autocomplete="on"
</body>
>
</html>
HTML <form> Elements
1. HTML <label> Element
• The <label> tag defines labels for <form> elements.
• As the screen reader reads the label out loud while users focus on the
input element, it is a useful tag for screen reader users.
• Moreover, it is also helpful for users who find it difficult to click on
small regions, such as checkboxes and radio buttons, because it
toggles those regions when users click the text placed within the
<label>.
<label for="name">Name:
<input type="text" id="name" name="name">
</label>
2. HTML <input> Element
• The <input> element in HTML is the most commonly used
element to get different types of input data from users, such as a
password, text, email, etc.
• It can be displayed in different ways based on the type attribute.
<label for="name">Name:
<input type="text" id="name" name="name">
</label>
Input type Description
<input type="text"> Defines a single-line text input field.
<input type="radio"> Defines a radio button that lets users select one of many
choices.
<input type="password"> Defines a password field.
<input type="checkbox"> Defines checkboxes where users can select zero or
multiple options.
Defines a submit button for form submission to a form-
input type="submit"> handler, which is typically a file on the server with a
script to process input data.
<input type="button"> Defines a clickable button.
Input type Description
<input type="reset"> Defines a reset button.
<input type="time"> Let users select a time.
<input type="date"> Allows users to select a date from a calendar.
<input type="email"> Validates that user input is a valid email address.
<input type="file"> Allows users to select a file to upload.
Allows users to enter a number. It takes min, max, and
<input type="number">
step attributes for range.
3. HTML <textarea> Element
• This element in HTML defines a multi-line input field.
• We use the row attribute to specify the visible number of lines in
the text field and the col attribute to define the visible width of
the text field.
<textarea rows="4" cols="30">
Enter your message here...
</textarea>
4. HTML <select> and <option>Element
• We use the <select> element in HTML to create a drop-down list.
• We use the <option> element in HTML to define the options in a
drop-down list.
• By default, the first item in the list is selected.
<select name="city">
<option value="delhi"> Delhi </option>
<option value="mumbai"> Mumbai </option>
<option value="kolkata" selected>Kolkata </option>
</select>
5. HTML <fieldset> Element and <legend> Element
• <fieldset> Element: The <fieldset> tag is used to group related
form elements together and shows a box around them.
• <legend> Element: The <legend> element in HTML is used to
define a caption or title for the <fieldset> element.
<fieldset>
<legend>Personal Info</legend>
<label for="email">Email:</label>
<input type="email" id="email">
</fieldset>
6. HTML <button> Element
This tag is used to define a clickable button to perform programmable actions,
such as form submission, opening a dialog box, or triggering JavaScript
functions.
The <button> element takes three values:
reset: Clicking the button will reset all fields to their initial value.
submit: Clicking the button will submit the form.
button: Clicking the button calls javascript function.
<button type="submit"> Submit </button>
<button type="Reset"> Reset </button>
7. HTML <datalist> Element
• The <datalist> element in HTML specifies a pre-defined list of
options for the <input> element.
• Users see this list of options as a drop-down list.
• The <input> element’s list attribute must refer to the id attribute
of the <datalist> tag.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
HTML vs HTML5
HTML HTML5
A hypertext markup language (HTML) is HTML5 is a new version of HTML with new
the primary language for developing web functionalities with markup language with
pages. Internet technologies.
HTML does not support video and audio. HTML5 supports both video and audio.
It uses cookies to store temporary data. It uses SQL databases and application
cache to store offline data.
Does not allow JavaScript to run in the Allows JavaScript to run in the background.
browser. This is possible due to JS Web worker API
in HTML5.
Not possible to draw shapes like circle, HTML5 allows to draw shapes like circle,
rectangle, triangle etc. rectangle, triangle etc.
HTML HTML5
<HTML>,<Body> , and <Head> tags are These tags can be omitted while writing
mandatory while writing a HTML code. HTML code.
Doctype declaration is too long and Doctype declaration is too long and
complicated. complicated.
It works with all old browsers. It supported by all new browser like Firefox,
Mozilla, Chrome, Safari, etc
Elements like nav, header were not New element for web structure like nav,
present. header, footer etc.
Layout in HTML
• A layout divides a web page into multiple sections by arranging
different elements of an HTML web page in an organized manner.
• A layout uses various HTML tags to structure a web page to ensure users
can navigate easily through content.
<header> Content... </header>
<nav> Content... </nav>
<main> Content... </main>
<footer> Content... </footer>
Elements Description
header Defines the header section in an HTML web page.
Represents navigation links or hyperlinks to other pages or parts within
nav
the same web page.
Defines the main part of the web page where all the important content
section
is displayed.
footer Defines the footer section of the webpage.
article Defines independent, self-contained content.
<!DOCTYPE html> <main>
<html> <h2>Main Content</h2>
<head> <p>This is where the main content of the
<title>HTML Layout</title> page goes.</p>
</head> </main>
<body>
<footer>
<header> <p>© 2025 My Website. All rights
<h1>My Website</h1> reserved.</p>
<p>Welcome to my site!</p> </footer>
</header>
</body>
<nav> </html>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
HTML <audio> Elements
• The HTML <audio> tag is used to embed audio content on a web page.
The audio content can be music or any other audio streams.
• We use <audio> with the <source> tag to add an audio player in HTML.
• The <audio> tag can contain one or more <source> tags with different
audio sources. The browser chooses the source it supports.
• Also, the browser that doesn’t support the <audio> element displays text
placed between <audio> and </audio>.
• HTML supports three audio formats- MP3, WAV, and OGG.
attributes Description
Specifies that the audio file will play soon
autoplay
after it loads controls and is ready.
Specifies that the audio file should be
muted
muted.
Specifies what controls to display with
controls
the audio player.
Specifies that the audio file should start
loop
over, every time it is finished
src Specifies the URL of the audio file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Audio Tag Example</title>
</head>
<body>
<h1>HTML Audio Tag Example</h1>
<audio controls>
<source src="SampleAudio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
HTML <video> Elements
• The HTML <video> element is used to embed video content in a web
page.
• The tag works similarly to the <img> tag, requiring the path URL of the
video within the src attribute.
• It contains one or more <source> tags with different sources of videos,
and the browser chooses the first source it supports.
• The text placed between <video> and </video> tags is displayed when
the browser doesn’t support the video file.
<video src="" controls> </video>
Here,
• src: Specifies the video URL.
• controls: Adds Default controls like play, volume, and pause.