Internet Fundamentals and HTML

 World Wide Web and Internet

 Web Browsers and Web Servers with examples
 URL
 MIME
 List
 Tables
 images
 Forms
 Frames
 World Wide Web and Internet

• Internet: This is a global network of interconnected computers and servers. It is

a vast infrastructure that includes everything from hardware like routers and
cables to software protocols that manage data transmission. It supports a range
of services and applications, including email, file transfers, and many others.
• WWW (World Wide Web): This is a system of interlinked hypertext documents
and multimedia content accessed via the internet. The WWW uses the HTTP
(Hypertext Transfer Protocol) to transfer data and is accessed through web
browsers. It’s essentially a way to view and interact with information over the
internet through websites and web pages.
Diagram of Internet, WWW, and computer
relationship
 Internet WWW
Internet is a global network of networks. WWW stands for World wide Web

It provides various services such as email, file transfer, It enables users to access websites, web pages, and
remote login, and browsing multimedia content through web browsers

Internet protocols such as TCP/IP govern the transmission of The World Wide Web uses HTTP (Hypertext Transfer Protocol)
data over the Internet for communication between web browsers and web servers

It is a network of networks that spans the globe, connecting The World Wide Web consists of interconnected web pages
various devices and networks that are linked through hyperlinks

The Internet is essential for various online activities, including The World Wide Web revolutionized the way information is
communication, information sharing, and online services accessed, shared, and published on the Internet

Internet connectivity is provided by Internet Service Providers Websites and web pages are created and hosted by
(ISPs) individuals, organizations, and businesses
 Web Browsers and Web Servers with examples
Web Browser
• Definition: A web browser is a software application used to access and view websites on the internet. Examples
include Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge.
• Function: It requests web pages from servers, interprets the HTML, CSS, and JavaScript, and renders the
content so users can interact with websites. Essentially, it acts as the client in a client-server model.
• User Interaction: Browsers provide a graphical interface that allows users to navigate the web, enter URLs, and
interact with web content.
Web Server
• Definition: A web server is a software application or hardware device that stores, processes, and serves web
content to clients (such as browsers) over the internet. Examples include Apache, Nginx, and Microsoft IIS.
• Function: It handles incoming requests from web browsers, processes them (often involving fetching data from
databases or other resources), and sends back the requested web pages or files. It acts as the server in a client-
server model.
• Content Management: Web servers manage and serve static content (like HTML files) as well as dynamic
content (generated on-the-fly by server-side scripts or applications).
Working of web browser and Web Server
Parameters Web Browser Web Servers

Respond to requests made by web

Function Access and view content on the internet
browsers.
Type of
Client-side (e.g. computer, mobile, etc.) Server-side
Application

Users interact with web servers through

Interaction Users interact with the web browser directly
web browsers

Supported
HTML, CSS, JavaScript HTTP, HTTPs, and other web protocol
Technologies
Security
Cache and Cookies Firewalls and Intrusion Detection System
Features

Google Chrome, Mozilla Firefox, Microsoft

Examples Apache, Nginx, IIS, Tomcat, JBoss
Edge, Apple Safari
 URL-Uniform Resource Locator

• A URL is another word for a web address.

• A URL can be composed of words (e.g. eduprime.com), or an Internet Protocol (IP)
address (e.g. 192.68.20.50).
• It tells the browser where to find a specific resource, such as a webpage, image, or
video.
scheme://host:port/path
Scheme: Indicates the protocol to be used for accessing the resource.
e.g. http, https, ftp, etc
Host: The domain name or IP address of the server where the resource is located.
Port :Specifies the port number on the server to connect to.
e.g. port 80 for HTTP and port 443 for HTTPS
Path: The specific location of the resource on the server.
e.g. /path/to/resource.html
MIME
• MIME is an acronym for Multipurpose Internet Mail Extension
• It is used to describe message content types
• MIME is a kind of add-on or a supplementary protocol that allows
non-ASCII data to be sent through SMTP.
• MIME messages can contain text, images, audio, video, and other
application-specific data (e.g. PDF Files, Microsoft Word Documents,
and so on)
• It is used to make internet messages richer It allows applications (and
users) to exchange rich content other than text It is an extension to
the original email specification
 MIME Cont..
• MIME, which stands for Multipurpose Internet Mail Extensions, is a
standard that extends the format of email messages to support text in
character sets other than ASCII, as well as attachments of audio,
video, images, and application programs.

• Originally designed to enhance email functionality, MIME has also

been adapted for use in other internet protocols like HTTP, making it
essential for web browsing. It defines headers that provide
information about the type of content being sent, so that the
receiving client can correctly interpret and display it.
• For example:
• MIME Type: This specifies the nature and format of a document, file,
or set of bytes. Common types include text/plain, image/jpeg,
application/json, etc.
• MIME Headers: These are used to describe the data format, such as
Content-Type to indicate the media type, and Content-Disposition to
specify if the content is inline or an attachment.
In summary, MIME is a crucial component in ensuring that different
types of data are properly understood and managed across different
systems and applications.
HTML
• HTML means Hyper Text Markup Language.
• The HTML allow us to define the structure of a document or a website.
• HTML is NOT a programming language, it’s a markup language, which means its purpose is to give
structure to the content of the website.
• It is a series of nested tags that contain all the website information (like texts, images and videos).
• HTML specifies a set of tags that identify structure and content type
• tags are enclosed in < >
• <img src="image.gif"> specifies an image

• most tags come in pairs, marking a beginning and ending

• <title> and </title> enclose the title of a page
• HTML Tags not case-sensitive
• Lower-case tags recommended
• HTML Tags may contain attributes
• Can nest tags
• Tags cannot overlap
Tags vs. Elements

• An HTML element is an object enclosed by a pair

of tags
• <title>My Home Page</title> is a TITLE element

• <b>This text appears bold.</b> is a BOLD element

• <p>Part of this text is <b>bold</b>.

• </p> is a PARAGRAPH element that contains a BOLD element
HTML: Document Tags
<HTML> … </HTML>
Beginning and end of every HTML document
<HEAD> … </HEAD>
Contains information about the document including the title that is to appear in
the title bar
<TITLE> … </TITLE>
Causes the page title to be displayed in the title bar
<BODY> … </BODY>
All content for the page is placed between these tags
HTML Document Structure
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
Basic HTML Tags

Tag Description
<!DOCTYPE> This tag is used by the web browser to understand the version of the HTML used in the
document.
<html> Defines an HTML document
<head> Contains metadata/information for the document

<title> Defines a title for the document

<body> Defines the document's body
<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break
<em> Defines emphasized text
<!--...--> Defines a comment
LIST

• HTML lists allow web developers to group a set of related items in lists.

• HTML offers three ways for specifying lists of information. All lists must
contain one or more list elements.
Lists may contain
<ul> Unordered list - Used to create a list of related items, in no
particular order.
<ol> Ordered list-Used to create a list of related items, in a specific
order.
<dl> Description list - Used to create a list of terms and their
descriptions.
Unordered List

• "An unordered list is a collection of related items that have no special

order or sequence. "
• An unordered list created using the <ul> element, and each list item
starts with the <li> element.
• The list items in unordered lists are marked with bullets.
Here's an example:
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
Unordered List Attribute
• This attribute gives the type of bullets to be used in the list.
• type='disc': Gives default bullet structure/ By Default
• type='square': Looks like solid box bullets
• type ='circle': Gives Hollow box structure
Unordered List
with Square
Bullets

<!DOCTYPE html>
<html>
<body>
<ul type='square'>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered List
• "An Ordered list is a collection of related items that have special order
or sequence."
• An Ordered list created using the <ol> element, and each list item
starts with the <li> element.
• The list items in Ordered lists are marked with Numbers.
Here's an example:
<ol>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ol>
Ordered List Attribute

Ordered Lists has Two types attribute they are following

1. "Type"
2. "Start"
"Type": the type attribute Sets the numbering type (type = "type
Value").

Type Value Generated Style Sample Sequence

A Capital Letters A,B,C,D........
a Lowercase Letters a,b,c,d.
I Capital Roman Numerals I,II,III,IV.....
i Lowercase Roman i, ii, iii, iv
Numerals
1 Numberals 1,2,3,4..
Example-start

<html>
<body>
<ol start=4>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Example –"type"
<html>
<body>
<ol Type = "A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Example -"type+Start"
</body>
</html>
<ol Type = "A" Start = 3>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<html>
<body>
Description List
• "A description list is a list of items with a description
or definition of each item."
• The description list is created using <dl> element.
• The <dl> element is used in conjunction with the <dt> element which
specify a term, and the <dd> element which specify the term's
definition.
Example of definition list
<html>
<head>
<title> HTML DEFINITION LIST </title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>HTTP</dt>
<dd>Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
Assignment 1: Build a page as shown below
using <h1>,<ul>,<ol> and <em> tags
Tables
• We use <table> to create a table.
• <tr> defines a row, <th> defines a header cell, and <td> defines a
standard cell.
• The letters td stands for "table data," which is the content of a data
cell.
• A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.
• To display a table with borders, you will have to use the border
attribute.
• If you do not specify a border attribute the table will be displayed
without any borders.
Table Attributes

• Headings in a table are defined with the <th>

tag
• To display a table with borders, we have to
use the border attribute.
• If we won’t specify a border attribute the
table will be displayed without any borders.
• The cellspacing attribute defines the width of
the border.
• cellpadding represents the distance between
cell borders and the content within a cell.
Colspan and Rowspan Attributes
• We will use colspan attribute if you want to merge two or more columns into a single column.
• We will use rowspan if you want to merge two or more rows.

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2" bgcolor="red">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr> <td colspan="3" bgcolor="yellow">Row 3 Cell 1</td> </tr>
</table>
Attributes of table tag
• Align attribute of Table can positioning Tables and their contents in
relation to other elements on the Web page.
• Align attributes can be set in two levels
1. Table Alignment
2. The alignment of content inside the Table Cells.
Tables Backgrounds
• You can set table background using one of the following two ways
• bgcolor attribute - You can set background color for whole table or
just for one cell.
• background attribute - You can set background image for whole table
or just for one cell.
• You can also set border color also using bordercolor attribute.
• Table Caption: The caption tag will serve as a title or explanation for
the table and it shows up at the top of the table.
<table border="1">
<tr>
<td>ename</td>
<td>emp_id</td>
</tr>
<tr>
<td>Rohan</td>
<td>1JB11SCN01</td>
</tr>
</table>

<table border="1“ bgcolor=“pink”,>

<tr>
<td>ename</td>
<td>emp_id</td>
</tr>
<tr>
<td>Rohan</td>
<td>1JB11SCN01</td>
</tr>
</table>
Assignment 2:Build a table as shown below using
rowspan and colspan attribute in a table tag.
Images
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked
to web pages.
• 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 has two required attributes:
• src :-attribute specifies the path to the image file.
• Alt:- attribute provides alternative text for screen readers and when
the image fails to load.
Syntax:
<img src="url" alt="alternatetext">
Attributes of Image
<img src="URL"|"name“ height="n" width="n“ [alt="string"]
[align= top | center | bottom] [usemap= URL ]>

Image Size - Width and Height

• We use the style attribute to specify the width and height of an
image.
Example:
<img src="img_ocean.jpg" alt=“ocean“
style="width:500px;height:600px;">
Image Attributes
• Alternatively, we can use the width and height attributes:
Example:
<img src="img_ocean.jpg" alt=“ocean“
width="500“height="600" >

• Image as a Link
We can use an image as a link, put the <img> tag inside the <a> tag
<a href="URL">text message</a>
<a href= URL ><img src= filename ></a>
Usemap attribute
• The usemap attribute is used to define an image map, which allows you to create click
able areas within an image.
syntax:
<img src="URL" usemap="URL">
• Tells the browser to display the source image and to map the second URL, the imagemap, onto it
<area shape= circle | rect | poly | defaulthref="URL" coords=s= string alt= string >
creates a clickable area on an image map.
Example:
<img src="./mappic.gif" usemap="#main_map"height=30 width=50>
<a name="#main_map" >
<map name="main_map">
<area shape="rect" href="./images/imgl.jpg"alt="Image One" coords="0,0,25,25">
<area shape="rect" href="./pagel.html"alt="Page One" coords="26,26,50,50">
<area shape=default href="./page32.html"alt="Page 32">
</map>
</a>
<body>
<img src="luke-miller-67k2pcAjisk-unsplash.jpg"
usemap="#image-map" alt="Example Image"
width="100" height="100" target="_blank">
<!-- Define the image map -->
<map name="image-map">
<!-- Define a rectangular clickable area -->
<area shape="rect" coords="34,44,270,350"
href="https://www.youtube.com/" alt="Section 1">
<!-- Define a circular clickable area -->
<area shape="circle" coords="150,150,50"
href="https://www.google.com/ alt="Section 2">
<!-- Define a polygonal clickable area -->
<area shape="poly" coords="10,10, 50,20, 20,40"
href="https://www.facebook.com/" alt="Section 3">
</map>
</body>
Forms

• Forms are used to collect information.

• The information is then sent back to the server.
• Information is stored and analyzed using a program on the server.
• We can have more than one form in a single page.
• Don’t put one form in another form(Nested Form).
• The <form> Element
<form> - begin a form
<input> - ask for information in one of several different ways
<input> - there can be as many input areas as you wish
</form> - end a form HTML form
• The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
<input> Tag: Used for various types of user input.
• type="text": A single-line text input.
• type="email": A field for email addresses with validation.
• type="checkbox": A checkbox input.
• type="radio": A radio button input.
• type="submit": A button to submit the form.
• <textarea> Tag: A multi-line text input field.

Additional Input Types

• <input type="date">: For selecting dates.
• <input type="number">: For numeric input with optional constraints.
• <input type="range">: For selecting a value from a range.
• <input type="color">: For selecting a color.
• <input type="file">: For file uploads.
 The Method Attribute

• The method attribute specifies the HTTP method to be used when submitting the form
data.
• The form-data can be sent as URL variables
(with method="get") or as HTTP post transaction
(with method="post").
• The default HTTP method when submitting form data is GET.
Example
This example uses the GET method when submitting the form data:
• <form action="/action_page.php" method="get">

Attributes
• action: URL where the form data is sent.
• method: HTTP method used to send data (GET or POST).
• name: Name of the form control, which is used to reference the data on the server side.
• value: The value associated with an input element, like the text displayed on a submit
The differences between the two methods of submitting data
GET/POST are summarized below:

GET method.
• The GET method is the default method for browsers to submit information.
• GET is easy to deal and fast.
• All the information form the form is appended onto the end of the URL.
• It is not secure because the data input appears in the URL.
• Most browsers limit a URL to several thousand characters.

POST method.
• Used to pass large amount of information to the server.
• Contents are sent with HTTP request body not with URL
Assignment 3: Build a page as shown below and
text box shown it should be displayed at the center
of the browser window.
 HTML FRAMES
• With frames ,you can display more than one HTML documents in the
same browser window.
• The frameset element holds one or more frame elements.
• Each html document is called frame and each frame is independent of
each other.
• <frameset> tag is used to divide Browser Window.
• <Body> tag is not required.
• The <frame> tag defines what HTML document to put into each frame.
• The <frameset> requires a mandatory attribute of either COLS or ROWS
that
• How much percentage/pixels of space will occupy each of them.
Attributes of the FRAMESET/FRAME tag are as given below.

Frameset.
• COLS : Defines the number of frame columns and their widths.
• ROWS : Defines the number of frame rows and their heights.
• FRAMEBORDER : Defines borders around each frame, A value of “0” leaves no visible
borders and a value of “1” display the border.
• FRAMESPACING : Defines the space in pixels between frames.
• SCROLLING : Determines weather or not scroll bars are displayed on all the frames, value
are YES, NO and AUTO.

Frame.
• NAME : Name of the frame.
• NORESIZE : Prevents the user from resizing the frame.
• SCROLLING : Control the display of scrollbars. The value are AUTO (or) NO.
• SRC : Specifies the full or partial URL of the document displayed in a frame.
• VERTICAL FRAMESET
<frameset Cols=”25%,50%,25%”> Frame_a.html
<frame src=”frame_a.html”/> <html>
<body style=”background-color: red”>
<frame src=”frame_b.html”/> <h3>frame A</h3>
<frame src=”frame_c.html”/> </body>
</frameset> </html>

FRAME_b.html FRAME_c.html
<html> <html>
<body style=”background-color : green”> <body style=”background-color: blue”>
<h3> frame B </h3> <h3> frame C </h3>
</body> </body>
</html> </html>
HTML FRAMES
Frame 1: f1.html
Output
Floating Frames (Inline Frames)

• Floating Frames
• Floating frames are scrollable areas that appear in a HTML document. Unlike regular
frames they cannot be resized.
• Unlike the <FRAME> element which should occur only within the
• <FRAMESET> element.
• <IFRAME> tag and may occur anywhere within the <BODY> tag

• Not attached to the sides of the browser.

– Acts similar to an embedded object.
– Occurs within the <BODY> .
– <IFRAME> </IFRAME> tag.
syntax:
<IFRAME SRC="bot.html" WIDTH=“450” HEIGHT=“400”></IFRAME>
<body>
<iframe src="list1.html" frameborder="3"></iframe>
</body>
</html>
Assignment 5: Build a page as
shown below using <table> tag and
<form> tag