ONLINE FOOD SHOP WEBSITE

A INTERNSHIP REPORT
Submitted to

JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY ANANTAPUR,

ANANTHAPURAMU
In partial fulfilment of the requirements for the award of the degree of
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
by

JONNAVADA KEERTHI
(H.T. No. 20JN1A0557)

Under the Esteemed

Guidance of

Mr.G.Vidya Sagar, M. Tech

Assistant Professor, Department of CSE

Department of Computer Science and Engineering

SREE VENKATESWARA COLLEGE OF
ENGINEERING
NAAC ‘A’ Grade Accredited Institution, An ISO 9001::2015 Certified Institution
(Approved by AICTE, New Delhi and Affiliated to JNTUA, Ananthapuramu)
NORTHRAJUPALEM(VI), KODAVALURU(M), S.P.S.R NELLORE (DT) – 524
316

2020-2024
 SREE VENKATESWARA COLLEGE OF ENGINEERING
NAAC ‘A’ Grade Accredited Institution, An ISO 9001:: 2015 Certified Institution
(Approved by AICTE, New Delhi and Affiliated to JNTU, Anantapur)

NORTHRAJUPALEM(VI), KODAVALURU(M), S.P.S.R NELLORE (DT) – 524316

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BONAFIDE CERTIFICATE

This is to certify that the internship report entitled “ONLINE FOOD SHOP
WEBSITE” submitted by JONNAVADA KEERTHI (H.T.No.20JN1A0557) is
work done by him and submitted during the academic year 2023- 2024, in partial
fulfillment of the requirement for the award of degree of BACHELOR OF
TECHNOLOGY in ”COMPUTER SCIENCE AND ENGINEERING” at
1STOP ,BANGALORE.

Signature of the Guide Signature of Head of the Dept.

Mr. G.Vidya Sagar, M.Tech., Mr. M.Praveen Kumar, M.Tech., (Ph.D)
Assistant Professor, Associate Professor,
Dept.of Computer Science and Engg, Head of the Department,
Sree Venkateswara college of Engineering, Dept.of Computer Science and Engg,

Nellore - 524316 Sree Venkateswara college of Engineering,

Nellore – 524316

Date of VIVA- VOCE

Examiner I Examiner II
 DECLARATION

I hereby declare that the INTERNSHIP report entitled “ONLINE FOOD SHOP WEBSITE”
done by me under the esteemed guidance of, Mr.G.Vidya Sagar, Assistant Professor, Department of
Computer Science and Engineering. This internship work has been submitted to SREE
VENKATESWARA COLLEGE OF ENGINEERING in partial fulfillment of the requirements for the
award of the Bachelors of Technology.

I also declare that this internship report has not been submitted at any time to other Institute or
University for the award of any degree.

Internship Associative

JONNAVADA KEERTHI
HT. No. 20JN1A0557
 ACKNOWLEDGEMENT

With immense respect, I express my sincere gratitude to Dr. P. BABUNAIDU,

Chairman, who took keen interest and encouraged in every effort throughout this course. I
own my gratitude to Dr. P. KUMAR BABU, Principal, SREE VENKATESWARA
COLLEGE OF ENGINEERING, NELLORE for giving us the opportunity to fulfill our
aspiration and become engineers.
I would like to extend ardent thanks to Mr. M.Praveen Kumar, M.Tech., (Ph.D),

Associate Professor & Head of the Department, Computer Science and Engineering,
for endowing a practical environment in the institute.
I take this opportunity to express my sincere deep sense of gratitude to my guide
Mr. G. VIDYA SAGAR, M.Tech., Assistant professor, Department of Computer
Science and Engineering, for his significant suggestions and help in every aspect to
accomplish the internship.

I would like to express my gratitude to our trainer MEGHA SINGH, 1STOP, for her
guidance, significant suggestions and help in every aspect to accomplish the
internship. Her persisting encouragement, everlasting patience and keen interest in
discussions have benefited me to an extent that cannot be spanned by words. I am thankful to
the staff members of my department for their cooperation over the completion of this
internship.

Finally, I thank one and all who directly or indirectly supported me in the completion of
this internship successfully.

Submitted by
JONNAVADA KEERTHI
H.T No.20JN1A0557

I
PARTICIPATION CERTIFICATE

INTERNSHIP CERTIFICATE

II
 ABSTRACT

Website Design and learning HTML were the main objectives of this internship. To
develop a web-based application, there are several programming languages that are in use. Some
of them are only used for the frontend and backend design of the software. For example, HTML3,
HTML4, HTML5, CSS, Bootstrap, JavaScript etc. There are also some other programming
languages that are used to develop the dynamic functions of the software or application. For
example- PHP, Java etc. Nowadays there are also some frameworks that use vastly. Frameworks
are basically structured programming by using Model, View and Controller. It is also called as
MVC. If we develop web-based application that is very useful for us because we can access it
from anywhere in the world. It is very helpful for our daily life. That is why I choose subject of
my report as "WEB DESIGN". Training in Universal Informatics added huge experiences in my
upcoming career. Solving real life problems was another key issue. This report takes us through
all the details of WEBSITE DESIGN knowledge and experience gathered during this
internship period. Web development is the work involved in developing a website for
the Internet (World Wide Web) or an intranet (a private network). Web development can range
from developing a simple single static page of plain text to complex web applications, electronic
businesses, and social network services. A more comprehensive list of tasks to which Web
development commonly refers, may include Web engineering, Web design, Web content
development, client liaison, client-side/server-side scripting, Web server and network
security configuration, and e-commerce development

III
 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

WEEK 1
DATE DAY NAME OF THE TOPIC/MODULE
COMPLETED

01/05/23 Monday HTML Introduction

02/05/23 Tuesday HTML Attributes

03/05/23 Wednesday HTML Headings

04/05/23 Thursday HTML Paragraphs

05/05/23 Friday HTML Styles

06/05/23 Saturday HTML Links

Week 2

DATE DAY NAME OF THE TOPIC/MODULE

COMPLETED

08/05/23 Monday HTML Images

09/05/23 Tuesday HTML Favicon

10/05/23 Wednesday HTML Page Title

11/05/23 Thursday HTML Tables, Lists, Id, Classes

12/05/23 Friday HTML Media Tags, Forms

13/05/23 Saturday HTML Semantic Tags

IV
Week 3

DATE DAY NAME OF THE TOPIC/MODULE

COMPLETED

15/05/23 Monday CSS Introduction

16/05/23 Tuesday CSS Syntax

17/05/23 Wednesday CSS Selectors

18/05/23 Thursday CSS Colors

19/05/23 Friday CSS Backgrounds

20/05/23 Saturday CSS Border

Week 4

DATE DAY NAME OF THE TOPIC/MODULE

COMPLETED

22/05/23 Monday CSS Margins

23/08/22 Tuesday CSS Padding

24/05/23 Wednesday CSS Box Model

25/05/23 Thursday CSS Fonts

26/05/23 Friday CSS Icons

27/05/23 Saturday CSS Buttons

V
Week 5

DATE DAY NAME OF THE TOPIC/MODULE

COMPLETED

29/05/23 Monday CSS Gradients

30/05/23 Tuesday CSS Shadows

31/05/23 Wednesday CSS Transitions

01/06/23 Thursday CSS Opacity

02/06/23 Friday CSS Flexbox

03/06/23 Saturday CSS Animations

WEEK 6

DATE DAY NAME OF THE TOPIC/MODULE

COMPLETED

05/06/23 Monday JS Introduction

06/06/23 Tuesday JS Statements

07/06/23 Wednesday JS Datatypes

08/06/23 Thursday JS Operators

09/06/23 Friday JS Functions

10/06/23 Saturday JS Strings

VI
WEEK 7

DATE DAY NAME OF THE TOPIC/MODULE

COMPLETED

12/06/23 Monday Live session on HTML-1

13/06/23 Tuesday Live session on HTML-2

14/06/23 Wednesday Live session on CSS-1

15/06/23 Thursday Live session on CSS-2

16/06/23 Friday Live session on CSS-3

17/06/23 Saturday Live session on JavaScript

Week 8

DATE DAY NAME OF THE

TOPIC/MODULE
COMPLETED

19/06/23 Monday Project session

20/06/23 Tuesday Project coding HTML

21/06/23 Wednesday Project coding CSS

22/06/23 Thursday Project coding JS

23/06/23 Friday Project code verification &

documentation
24/06/23 Saturday Project code verification &
documentation

VII
 CONTENTS

S.NO TOPIC NAME PAGE NO

1. Introduction 1

1.1..Web Technology Definition 1

1.2..Web Technology classification 1

2. Web Development classification 2-3

2.1..Frontend Languages 2

2.2..Backend Languages 3

3. Markup languages and style sheets 4-6

3.1..Markup Languages 4

3.2..Style Sheets 4

3.3..Benefits 4-6

4. Designing a Page 7-24

4.1..HTML5 7-13

4.2..CSS3 14-21

4.3..Javascript 21-24

5. Project code 25-37

6. Output Screenshots 38-42

7. Conclusion 43

8. References 44

VII
I
 LIST OF TABLES

TABLE NO TITLE PAGE NO

4.1.2 Removed elements in HTML5 9-10
4.2.1 CSS Measurement Units 17-18

LIST OF FIGURES

FIGURE NO TITLE PAGE NO

4.1.1 HTML4 vs HTML5 9
4.3.1 Types of languages 24
6.1 main page division block 38
6.2 Latest collection division block 38
6.3 Our products division block 39
6.4 Product categories division block 39
6.5 Customers review division block 40
6.6 Blogs division block 40
6.7 Footer division block 41
6.8 Login Console 41
6.9 Login page 42

IX
 B.Tech IV Year -I Sem – Internship 2022

1. INTRODUCTION
1.1 Web Technology

Web Technology refers to the various tools and techniques that are utilized in the process of
communication between different types of devices over the internet. A web browser is used to
access web pages. Web browsers can be defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked resources on the World Wide Web can be
accessed using software interfaces provided by Web browsers.

1.2 Web Technology can be classified into the following sections:

World Wide Web (WWW): The World Wide Web is based on several different technologies:
Web browsers, Hypertext Markup Language (HTML) and Hypertext Transfer Protocol
(HTTP). Web Browser: The web browser is an application software to explore www (World
Wide Web). It provides an interface between the server and the client and requests to the
server for web documents and services.
Web Server: Web server is a program which processes the network requests of the users and
serves them with files that create web pages. This exchange takes place using Hypertext
Transfer Protocol (HTTP).
Web Pages: A web page is a digital document that is linked to the World Wide Web and
viewable by anyone connected to the internet has a web browser.
Web Development: Web development refers to the building, creating, and maintaining of
websites. It includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the internet i.e.,
websites

Department Of Computer Science and Engineering,SVCN Page | 1

 B.Tech IV Year -I Sem – Internship 2022

2. Web Development Classification

Web Development can be classified into two ways:

 Frontend Development: The part of a website that the user interacts directly is
termed as front end. It is also referred to as the ‘client side’ of the application.

 Backend Development: Backend is the server side of a website. It is the part of the
website that users cannot see and interact. It is the portion of software that does not
come in direct contact with the users. It is used to store and arrange data.

Frontend Languages: The frontend portion is built by using some languages which are
discussed below:

 HTML: HTML stands for Hypertext Markup Language. It is used to design the front-
end portion of web pages using a markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the web pages. The
markup language is used to define the text documentation within the tag which defines
the structure of web pages.

 CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. CSS allows you to
apply styles to web pages. More importantly, CSS enables you to do this independent of
the HTML that makes up each web page.

 JavaScript: JavaScript is a famous scripting language used to create magic on the

sites to make the site interactive for the user. It is used to enhancing the functionality of
a website to running cool games and web-based software.

 AJAX: Ajax is an acronym for Asynchronous JavaScript and XML. It is used to

communicate with the server without refreshing the web page and thus increasing the
user experience and better performance.

There are many other languages through which one can do front-end development depending
upon the framework for example Flutter user Dart, React uses JavaScript and Django uses
Python, and much more.

Department Of Computer Science and Engineering,SVCN Page | 2

 B.Tech IV Year -I Sem – Internship 2022
Backend Languages: The back-end portion is built by using some languages which are
discussed below:

 PHP: PHP is a server-side scripting language designed specifically for web

development. Since PHP code executed on the server-side, so it is called a server-side
scripting language.

 Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.

 Java: Java is one of the most popular and widely used programming languages and
platforms. It is highly scalable. Java components are easily available.

 JavaScript: JavaScript can be used as both (front end and back end) programming.

 C#: C# is a general-purpose, modern and object-oriented programming language

pronounced as “C sharp”.

 DBMS: The software which is used to manage database is called Database

Management System (DBMS).

Department Of Computer Science and Engineering,SVCN Page | 3

 B.Tech IV Year -I Sem – Internship 2022

3. Markup languages and style sheets

3.1 Markup Languages

Markup languages are computer languages that are used to structure, format, or define
relationships between different parts of text documents with the help of symbols or tags
inserted in the document. These languages are more readable than usual programming
languages with strict syntax. There are several markup languages available but the most
popular among them are as follows.

1. HTML
2. XML
3. XHTML
4. SGML

3.2 Cascading sheets

A web style sheet is a form of separation of content and presentation for web design in which
the markup (i.e., HTML or XHTML) of a webpage contains the page's semantic content and
structure, but does not define its visual layout (style). Instead, the style is defined in an
external style sheet file using a style sheet language such as CSS or XSLT. This design
approach is identified as a "separation" because it largely supersedes the antecedent
methodology in which a page's markup defined both style and structure.

3.3 Benefits
Separation of style and content has advantages, but has only become practical after
improvements in popular web browsers CSS implementations.

Speed

Overall, users experience of a site utilizing style sheets will generally be quicker than sites
that don’t use the technology. ‘Overall’ as the first page will probably load more slowly –

Department Of Computer Science and Engineering,SVCN Page | 4

 B.Tech IV Year -I Sem – Internship 2022
because the style sheet AND the content will need to be transferred. Subsequent pages will
load faster because no style information will need to be downloaded – the CSS file will
already be in the browser’s cache.

Maintainability

Holding all the presentation styles in one file can reduce the maintenance time and reduces the
chance of error, thereby improving presentation consistency. For example, the font color
associated with a type of text element may be specified — and therefore easily modified —
throughout an entire website simply by changing one short string of characters in a single file.
The alternative approach, using styles embedded in each individual page, would require a
cumbersome, time consuming, and error-prone edit of every file.

Accessibility

Sites that use CSS with either XHTML or HTML are easier to tweak so that they appear
similar in different browsers (Chrome, Internet Explorer, Mozilla Firefox, Opera, Safari, etc.).

Sites using CSS "degrade gracefully" in browsers unable to display graphical content, such
as Lynx, or those so very old that they cannot use CSS. Browsers ignore CSS that they do not
understand, such as CSS 3 statements. This enables a wide variety of user agents to be able to
access the content of a site even if they cannot render the style sheet or are not designed with
graphical capability in mind. For example, a browser using a refreshable braille display for
output could disregard layout information entirely, and the user would still have access to all
page content.

Customization

If a page's layout information is stored externally, a user can decide to disable the layout
information entirely, leaving the site's bare content still in a readable form. Site authors may
also offer multiple style sheets, which can be used to completely change the appearance of the
site without altering any of its content.

Most modern web browsers also allow the user to define their own style sheet, which can
include rules that override the author's layout rules. This allows users, for example, to bold

Department Of Computer Science and Engineering,SVCN Page | 5

 B.Tech IV Year -I Sem – Internship 2022
every hyperlink on every page they visit. Browser extensions like Stylish and Stylus have
been created to facilitate management of such user style sheets.

Consistency

Because the semantic file contains only the meanings an author intends to convey, the styling
of the various elements of the document's content is very consistent. For example, headings,
emphasized text, lists and mathematical expressions all receive consistently applied style
properties from the external style sheet. Authors need not concern themselves with the style
properties at the time of composition. These presentational details can be deferred until the
moment of presentation.

Portability

The deferment of presentational details until the time of presentation means that a document
can be easily re-purposed for an entirely different presentation medium with merely the
application of a new style sheet already prepared for the new medium and consistent with
elemental or structural vocabulary of the semantic document. A carefully authored document
for a web page can easily be printed to a hard-bound volume complete with headers and
footers, page numbers and a generated table of contents simply by applying a new style sheet.

Department Of Computer Science and Engineering,SVCN Page | 6

 B.Tech IV Year -I Sem – Internship 2022

4.Designing a Page
4.1 HTML
HTML stands for Hyper Text Markup Language. It is used to design web pages using a
markup language. HTML is an abbreviation of Hypertext and Markup language. Hypertext
defines the link between the web pages. The markup language is used to define the text
document within the tag which defines the structure of web pages. HTML 5 is the fifth and
current version of HTML. It has improved the markup available for documents and has
introduced application programming interfaces (API) and Document Object Model (DOM).

Features:
 It has introduced new multimedia features which support audio and video controls by
using <audio> and <video> tags.

 There are new graphics elements including vector graphics and tags.

 Enrich semantic content by including <header> <footer>, <article>, <section> and

<figure> are added.

 Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.
 Geo-location services- It helps to locate the geographical location of a client.

 Web storage facility which provides web application methods to store data on the web
browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>

Department Of Computer Science and Engineering,SVCN Page | 7

 B.Tech IV Year -I Sem – Internship 2022

BASIC HTML TAGS

Heading Tags
Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line
after that heading.

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag.

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag
is an example of an empty element, where you do not need opening and closing tags, as there is
nothing to go in between them.

Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.

Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag
creates a line from the current position in the document to the right margin and breaks the line
accordingly.

Again <hr /> tag is an example of the empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit
this space, older browsers will have trouble rendering the horizontal line, while if you miss
the forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the
HTML document. In these cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.

Department Of Computer Science and Engineering,SVCN Page | 8

 B.Tech IV Year -I Sem – Internship 2022

HTML4 vs HTML5

Fig 4.1.1: HTML4 vs HTML5

Removed elements from HTML 5: There are many elements which are depreciated from
HTML 5 are listed below:

Removed Elements Use Instead Elements

<acronym> <abbr>

<applet> <object>

<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>

Department Of Computer Science and Engineering,SVCN Page | 9

 B.Tech IV Year -I Sem – Internship 2022

<font> CSS

<frame>

<frameset>

<noframes>

<isindex>

<strike> CSS, <s> or <del>

<tt> CSS

Fig 4.1.2: Removed Elements in HTML5

New Added Elements in HTML 5:

 <aside>: The <aside> tag is used to describe the main object of the web page in a
shorter way like a highlighter. It basically identifies the content that is related to the
primary content of the web page but does not constitute the main intent of the primary
page. The <aside> tag contains mainly author information, links, related content and so on.

 <article>: The <article> tag is used to represent an article. More specifically, the content
within the <article> tag is independent from the other content of the site (even though it can be
related).

 <fig caption>: The <fig caption> tag in HTML is used to set a caption to the figure
element in a document.

 <figure>: The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos or codes listing in a document. It is related to main flow but
it can be used in any position of a document and the figure goes with the flow of the
document and if remove it then it should not affect the flow of the document.

Department Of Computer Science and Engineering,SVCN Page | 10

 B.Tech IV Year -I Sem – Internship 2022
 <header>: It contains the section heading as well as other content, such as a
navigation links, table of contents, etc.

 <footer>: The <footer> tag in HTML is used to define a footer of HTML document.
This section contains the footer information (author information, copyright information,
carriers etc.). The footer tag are used within body tag. The <footer> tag is new in the
HTML 5. The footer elements require a start tag as well as an end tag.

 <main>: Delineates the main content of the body of a document or web app.

 <mark>: The <mark> tag in HTML is used to define the marked text. It is used to
highlight the part of the text in the paragraph.

 <nav>: The <nav> tag is used to declaring the navigational section in HTML
documents. Websites typically have sections dedicated to navigational links, which
enables user to navigate the site. These links can be placed inside a nav tag.

 <section>: It demarcates a thematic grouping of content.

 <details>: The <details> tag is used for the content/information which is initially
hidden but could be displayed if the user wishes to see it. This tag is used to create
interactive widget which user can open or close it. The content of details tag is visible
when open the set attributes.
 <summary>: The <summary> tag in HTML is used to define a summary for the

<details> element. The <summary> element is used along with the <details> element and
provides a summary visible to the user. When the summary is clicked by the user, the
content placed inside the <details> element becomes visible which was previously hidden.
The <summary> tag was added in HTML 5. The <summary> tag requires both starting
and ending tag.

 <time>: The <time> tag is used to display the human-readable data/time. It can also
be used to encode dates and times in a machine-readable form. The main advantage for
users is that they can offer to add birthday reminders or scheduled events in their
calendars and search engines can produce smarter search results.

 <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates a text
from other text that may be formatted in different direction. This tag is used when a user
generated text with an unknown direction.

Department Of Computer Science and Engineering,SVCN Page | 11

 B.Tech IV Year -I Sem – Internship 2022
 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to
define the position within the text which is treated as a line break by the browser. It is
mostly used when the used word is too long and there are chances that the browser may
break lines at the wrong place for fitting the text.

 <datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML
files. It can be used with input tag, so that users can easily fill the data in the forms using
select the data.

 <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in
a form. The purpose of <keygen> element is to provide a secure way to authenticate users.
When a from is submitted then two keys are generated, the private key and public key.
The private key is stored locally, and the public key is sent to the server. The public key
is used to generate a client certificate to authenticate users for future.

 <output>: The <output> tag in HTML is used to represent the result of a calculation
performed by the client-side script such as JavaScript.

 <progress>: It is used to represent the progress of a task. It also defines how much
work is done and how much is left to download a things. It is not used to represent the
disk space or relevant query.

 <svg>: It is the Scalable Vector Graphics.

 <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using
JavaScript. It can be used to draw paths, boxes, texts, gradients and add images. By
default, it does not contain border and text.

 <audio>: It defines the music or audio content.

 <embed>: Defines containers for external applications (usually a video player).

 <source>: It defines the sources for <video> and <audio>.

 <track>: It defines the tracks for <video> and <audio>.

 <video>: It defines the video content.

Advantages:

 All browsers are supported.

 More device friendly.

Department Of Computer Science and Engineering,SVCN Page | 12

 B.Tech IV Year -I Sem – Internship 2022

 Easy to use and implement.

 HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites.

Disadvantages:

 Long codes have to be written which is time-consuming.

 Only modern browsers support it.

Supported Browsers: It is supported by all modern

browsers. Below examples illustrate the HTML 5 content.

EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title>HTML 5</title>

<style>

h1 {

font-size:50px;

</style>

</head>

<body>

<h1>THIS IS A SIMPLE HTML CODE</h1>

</body>

</html>

Department Of Computer Science and Engineering,SVCN Page | 13

 B.Tech IV Year -I Sem – Internship 2022

4.2 CSS3
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language. CSS3 is the latest standard of CSS
earlier versions (CSS2).

CSS3 modules

CSS3 is collaboration of CSS2 specifications and new specifications, we can call this
collaboration a module. Some of the modules are shown below −

 Selectors
 Box Model
 Backgrounds
 Image Values and Replaced Content
 Text Effects
 2D Transformations
 3D Transformations
 Animations
 Multiple Column Layout
 User Interface

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs, variations in display for different
devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML
or XHTML.

Department Of Computer Science and Engineering,SVCN Page | 14

 B.Tech IV Year -I Sem – Internship 2022

Advantages of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So, less code means faster download times.
Easy maintenance − To make a global change, simply change the style, and all elements in
all the web pages will be updated automatically.

 Superior styles to HTML − CSS have a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility − Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.

CSS-Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied
to the corresponding elements in your document. A style rule is made of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector {property: value}

Department Of Computer Science and Engineering,SVCN Page | 15

 B.Tech IV Year -I Sem – Internship 2022

You can define selectors in various simple ways based on your comfort. Let me put these
selectors one by one.

The Type Selectors

This Type Selector is to give a color to all level 1 headings −

Example

h1 {
color: #36CFFF; }

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type −

Example

*{
color: #000000; }

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside
a particular element. As given in the following example, style rule will apply to <em> element
only when it lies inside <ul> tag.

Example

ul em {
color: #000000; }

The Class Selectors

You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.

Example

.black {
color: #000000; }

Department Of Computer Science and Engineering,SVCN Page | 16

 B.Tech IV Year -I Sem – Internship 2022

This rule renders the content in black for every element with class attribute set to black in our
document. You can make it a bit more particular.

Example

h1.black {
color: #000000; }

This rule renders the content in black for only <h1> elements with class attribute set to black.

The ID Selectors

You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.

Example

#black {
color: #000000; }

This rule renders the content in black for every element with id attribute set to black in our
document

CSS-Measurement units

CSS supports a number of measurements including absolute units such as inches,

centimeters, points, and so on, as well as relative measures such as percentages and em units.
You need these values while specifying various measurements in your Style rules e.g.,
border
= "1px solid red".

We have listed out all the CSS Measurement Units along with proper Examples −

Unit Description Example

% Defines a measurement as a percentage relative p {font-size: 16pt; line-height: 125%;}

to another value, typically an enclosing
element.

cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}

Department Of Computer Science and Engineering,SVCN Page | 17

 B.Tech IV Year -I Sem – Internship 2022

em A relative measurement for the height of a font

in em spaces. Because an em unit is equivalent
to the size of a given font, if you assign a font p {letter-spacing: 7em;}
to 12pt, each "em" unit would be 12pt; thus,
2em would be 24pt.

ex This value defines a measurement relative to a

font's x-height. The x-height is determined by p {font-size: 24pt; line-height: 3ex;}
the height of the font's lowercase letter x.

in Defines a measurement in inches. p {word-spacing: .15in;}

mm Defines a measurement in millimeters. p {word-spacing: 15mm;}

pc Defines a measurement in picas. A pica is

equivalent to 12 points; thus, there are 6 picas p {font-size: 20pc;}
per inch.

pt Defines a measurement in points. A point is body {font-size: 18pt;}

defined as 1/72nd of an inch.

Defines a measurement in screen pixels. p {padding: 25px;}

Fig 4.2.1: CSS Measurement Units

CSS-Background

You can set the following background properties of an element −

• The background-color property is used to set the background color of an element.

• The background-image property is used to set the background image of an element.
• The background-repeat property is used to control the repetition of an image in
the background.
• The background-position property is used to control the position of an image in the
background.
• The background property is used as a shorthand to specify a number of other
background properties.

Department Of Computer Science and Engineering, SVCN Page | 18

 B.Tech IV Year -I Sem – Internship 2022

CSS-Fonts
You can set following font properties of an element −

• The font-family property is used to change the face of a font.

• The font-style property is used to make a font italic or oblique.
• The font-variant property is used to create a small-caps effect.
• The font-weight property is used to increase or decrease how bold or light a
font appears.
• The font-size property is used to increase or decrease the size of a font.
• The font property is used as shorthand to specify a number of other font properties

CSS-Text Properties

This chapter teaches you how to manipulate text using CSS properties. You can set following
text properties of an element −

• The color property is used to set the color of a text.

• The direction property is used to set the text direction.
• The letter-spacing property is used to add or subtract space between the letters that
makeup a word.
• The word-spacing property is used to add or subtract space between the words
of a sentence.
• The text-indent property is used to indent the text of a paragraph.
• The text-align property is used to align the text of a document.
• The text-decoration property is used to underline, overline, and strikethrough text.
• The text-transform property is used to capitalize text or convert text to uppercase or
lowercase letters.
• The white-space property is used to control the flow and formatting of text.
• The text-shadow property is used to set the text shadow around a text.

CSS-Border

Images play an important role in any web page. Though it is not recommended to
include a lot of images, but it is still important to use good images wherever required.

CSS plays a good role to control image display. You can set the following image properties
using CSS.

Department Of Computer Science and Engineering, SVCN Page | 19

 B.Tech IV Year -I Sem – Internship 2022

• The border property is used to set the width of an image border.

• The height property is used to set the height of an image.
• The width property is used to set the width of an image.
• The -moz-opacity property is used to set the opacity of an image.

The Image Border Property

The border property of an image is used to set the width of an image border. This
property can have a value in length or in %.

CSS-Link

You can set following properties of a hyper link −

We will revisit the same properties when we will discuss Pseudo-Classes of CSS.

• The: link signifies unvisited hyperlinks.

• The: visited signifies visited hyperlinks.
• The: hover signifies an element that currently has the user's mouse pointer hovering
over it.
• The: active signifies an element on which the user is currently clicking.

CSS-Border

The border properties allow you to specify how the border of the box representing an
element should look. There are three properties of a border you can change −

• The border-color specifies the color of a border.

• The border-style specifies whether a border should be solid, dashed line, double line,
or one of the other possible values.
• The border-width specifies the width of a border.

Department Of Computer Science and Engineering, SVCN Page | 20

 B.Tech IV Year -I Sem – Internship 2022

CSS-Margins

The margin property defines the space around an HTML element. It is possible to use
negative values to overlap content.

The values of the margin property are not inherited by the child elements. Remember that the
adjacent vertical margins (top and bottom margins) will collapse into each other so that the
distance between the blocks is not the sum of the margins, but only the greater of the two
margins or the same size as one margin if both are equal.

We have the following properties to set an element margin.

• The margin-bottom specifies the bottom margin of an element.

• The margin specifies a shorthand property for setting the margin properties in one
declaration.
• The margin-top specifies the top margin of an element.
• The margin-left specifies the left margin of an element.
• The margin-right specifies the right margin of an element.

CSS-Padding

The padding property allows you to specify how much space should appear between
the content of an element and its border −

The value of this attribute should be either a length, a percentage, or the word inherit.
If the value is inherit, it will have the same padding as its parent element. If a percentage is
used, the percentage is of the containing box.

The following CSS properties can be used to control lists. You can also set different
values for the padding on each side of the box using the following properties −

• The padding-bottom specifies the bottom padding of an element.

• The padding-top specifies the top padding of an element.
• The padding-left specifies the left padding of an element.
• The padding-right specifies the right padding of an element.
• The padding serves as shorthand for the preceding properties.

Department Of Computer Science and Engineering, SVCN Page | 21

 B.Tech IV Year -I Sem – Internship 2022

4.3 JAVASCRIPT
 JavaScript to program the behavior of web pages

 The HTML <script> tag is used to define a client-side script (JavaScript).

 The <script> element either contains script statements, or it points to an external script
file through the src attribute.

 Common uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.

 To select an HTML element, JavaScript most often uses

the document.getElementById() method.

Ways to include JavaScript in html

There are 3 ways to include JavaScript in HTML:

1. External JavaScript, load a JavaScript file-<script src="FILE.JS"></script>

2. Internal JavaScript, add a block of code in the HTML document itself-<script>DO
SOMETHING</script>
3. Inline JavaScript, directly add JavaScript to an HTML element - <input type="button"
value="Test" onclick="FUNCTION()"/>

Programming languages vs scripting languages vs markup languages

When it comes to making a website or app coding involves basically

three types of languages i.e., the programming language, Scripting Language and
Markup Language.
There are a lot of people who consider coding as just developing or making
a website but they need to understand every single language fits into a particular
category and we need to know which category that language fits into. We will
discuss in detail about the difference between these three main categories or
pillars of a website or an app i.e., Programming language, Scripting Language
and Markup Language.

Department Of Computer Science and Engineering, SVCN Page | 22

 B.Tech IV Year -I Sem – Internship 2022
Programming language: In simple terms, programming languages are set of instructions or
code which tells a computer what it needs to do. So basically, we provide a logic or
instruction to the computer to perform some tasks to get the desired output from it.
Programming languages are high-level languages that need to be converted into machine
level language because a computer can only understand machine level language or binary
language (0 and 1). So we write the instructions in human-readable form and then we hit the
compile button to convert this into machine level language which a computer can
understand and then the computer performs the task. Examples are Java, C, C++, C#.
Programming languages are most widely used to make software or drivers.

Scripting Language: As the name suggest, it’s all about giving the script to perform some
certain tasks. Scripting languages are basically the subcategory of programming languages
which is used to give guidance to another program or we can say to control another program,
so it also involves instructions. It basically connects one language to one another languages
and doesn’t work standalone. JavaScript, PHP, Perl, Python, VBScript these all are the
examples of scripting language. Scripting languages need to be interpreted (Scanning the
code line by line, not like compiler in one go) instead of compiled. There is no scope of
compiler in scripting languages. Scripting languages are most widely used to create a
website.

Markup Languages: Markup languages are completely different from programming

languages and scripting languages. Markup languages prepare a structure for the data or
prepare the look or design of a page. These are presentational languages and it doesn’t
include any kind of logic or algorithm, for example, HTML. HTML is not asking any kind
of question to the computer or it’s not comparing things and it’s not asking any logical
question. It’s just used to represent a view inside a web browser. It tells the browser how to
structure data for a specific page, layout, headings, title, table and all or styling a page in a
particular way. So basically, it involves formatting data or it controls the presentation of data.
Examples of Markup languages are HTML, CSS or XML. These languages are most widely
used to design a website.

Department Of Computer Science and Engineering,SVCN Page | 23

 B. Tech IV Year -I Sem – Internship 2023

Fig 4.3.1: Types of languages

Example: To show date and time

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date and Time example</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

Department Of Computer Science and Engineering, SVCN Page | 24

 B. Tech IV Year -I Sem – Internship 2023

5. PROJECT CODE

INDEX.HTML :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link
href="https://fonts.googleapis.com/css2?
family=Ubuntu+Mono&display=swap"
rel="stylesheet">
</head>

<body>
<header>
<h1 id="top">Online</h1>
<h1 id="top1">FoodShop</h1>
</header>
<hr>
<nav id="navbar">
<img src="data:image/png; ">
<ul id="navcontent">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="contact.html">ContactUs</a></li>
</ul>
</nav>
<div id="container1">
<div id="row1">
Welcome to Online FoodShop
</div>
<button class="btn">ORDER NOW</button>
<div id="container3">
<div id="row2">
<button class="btn">Prices</button>
</div>
<div id="row3">
<button class="btn">Specials</button>
</div>
</div>
</div>
<hr>
<h1 id="top3">Featured Products</h1>
<div id="container4">
Department Of Computer Science and Engineering, SVCN Page | 25
 B. Tech IV Year -I Sem – Internship 2023
<div id="row4">
<button class="btn">ORDER NOW</button>
</div>
<div id="row5">
<button class="btn">ORDER NOW</button>
</div>
<div id="row6">
<button class="btn">ORDER NOW</button>
</div>
</div>
<footer>Copyright © 2020-2021 OnlineFoodShop.
All Rights are reserved</footer>
</body>
</html>

STYLE.CSS :
/*CSS Reset*/
*{
margin:0px;
padding:0px;
}
/*Header Styling*/

#top{
color:rgb(245, 10, 10);
text-align:center;
font-size:46px;
font-family: 'Ubuntu Mono', monospace;
}
#top1{
text-align:center;
color:black;
font-size:21px;
font-family: 'Ubuntu Mono', monospace;
}
/* Navigation bar styling*/

/*Navbar image styling*/

#navbar img{
display:block;
width: 50px;
height:50px;
margin:auto;
margin-bottom: 3px;
}

/*Navbar Functionality*/
#navbar{
display:flex;
flex-direction: column;
background-color: gray;
height: 14vh;
width: 100vw;
Department Of Computer Science and Engineering, SVCN Page | 26
 B. Tech IV Year -I Sem – Internship 2023
font-family: 'Ubuntu Mono', monospace;
margin-top:10px;
border: 2px solid black;
border-radius:15px;
}

/*Navbar content functionality*/

#navcontent{
display: flex;
justify-content: center;
}

/*Navbar content styling*/

ul li{
list-style: none;
margin: 15px;
border-radius: 20px;
}
ul li a{
padding: 1px;
color:white;
text-decoration: none;
border-radius:10px;
}
ul li a:hover{
background-color: red;
border-radius: 10px;
}

/* website background image designing */

#container1{
background-image: url('https://cdn.downtoearth.org.in/library/large/2019-03-
05/0.89399200_1551782137_fast1.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height:63vh;
}

/*Setting the background image using before pseudo selector*/

#container1::before{
content:'';
background: url("./1.jpg") no-repeat center center/cover;
width: 100vw;
height:59vh;
position: absolute;
Department Of Computer Science and Engineering, SVCN Page | 27
 B. Tech IV Year -I Sem – Internship 2023
top:0px;
left: 0px;
font-family: 'Ubuntu Mono', monospace;
margin-right:45px;
font-weight: bold;
z-index: -1;
opacity: 0.89;
border: 2px solid black;
border-bottom-left-radius: 100px;
}

#row1{
color: black;
font-weight:bold;
font-size: 2rem;
text-align: center;
margin-top: 35px;
}
/*Button Styling*/
.btn{
margin-top:15px;
border: 3px solid white;
border-radius:15px;
background-color:yellow;
font-size:20px;
font-weight: bold;
font-family: 'Ubuntu Mono', monospace;
}
.btn:hover{
cursor: pointer;
background-color: red;
}

#container3{
display: flex;
justify-content: space-evenly;
}
#row2{
width:24vw;
height:21vh;
background-image: url('https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTRYS27Wz35HfFMR3HjPKPIiRjgK21Shv4IpUeOt96u1g&usqp=CAU&ec=48665
701');
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
box-shadow: 2px 7px 16px 19px;
margin-top:51px;
margin-bottom: 51px;
display: flex;
justify-content: center;
align-items: flex-end;
Department Of Computer Science and Engineering, SVCN Page | 28
 B. Tech IV Year -I Sem – Internship 2023
position: relative;
margin-right: 38px;
border-radius: 40px;
}
#row2::before{
content: '';
background: url('2.jpeg') no-repeat center center/cover;
position: absolute;
top: 0px;
left:0px;
width: 24vw;
height:21vh;
z-index: -1;
border-radius: 40px;
}
#row3{
position: relative;
background-image: url('https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRSTx_bdPia6bD-cjlxtFtn03ea-61QeDlYsucvNQOevg&usqp=CAU&ec=48665701');
background-repeat: no-repeat;
background-size: cover;
background-position: right;
width: 24vw;
height:21vh;
display: flex;
justify-content: center;
align-items: flex-end;
box-shadow: 2px 7px 16px 19px;
margin-top:51px;
margin-bottom: 51px;

margin-left: 38px;
border-radius: 40px;
}
#row3::before{
content: '';
background: url('3.jpeg') no-repeat center center/cover;
position: absolute;
top:0px;
left:0px;
width: 24vw;
height:21vh;
z-index: -1;
border-radius: 40px;
}

#top3{
text-align: center;
color:red;
font-family: 'Ubuntu Mono', monospace;
}
#container4{
display: grid;
Department Of Computer Science and Engineering, SVCN Page | 29
 B. Tech IV Year -I Sem – Internship 2023
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
margin: 41px;
}
#row4{
width: 29vw;
height: 360px;
border: 2px solid black;
background-image: url('data:image/jpeg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
justify-content:center;
align-items:flex-end;
border-radius: 15px;
}
#row5{
width: 29vw;
height: 360px;
border: 2px solid black;
background-image: url('https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcR2GlCpZAzNcVg-
7STYXgQYcThhSJPssQGoxju6v2R_4A&usqp=CAU&ec=48665701');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
justify-content:center;
align-items:flex-end;
border-radius: 15px;
}
#row6{
width: 30vw;
height: 360px;
border: 2px solid black;
background-image: url('data:image/jpeg;base64');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content:center;
align-items:flex-end;
border-radius: 15px;
}
/*Designing the footer*/
footer{
text-align: center;
}
/*Designing of Contact Us*/
#ContactUs{
width:100vw;
height:100vh;
display:flex;
Department Of Computer Science and Engineering, SVCN Page | 30
 B. Tech IV Year -I Sem – Internship 2023
flex-direction: column;
align-items: center;
background-color: gray;
}
.form-shape input, .form-shape select, .form-shape textarea{
width: 92%;
padding: 0.5rem;
}
/*Changing the color of placeholder*/
::placeholder{
color:gray;
}
/*Making the webpage responsive using media queries*/
@media only screen and (max-width:1131px){
#row4{
width: 42vw;
}
#row5{
width:45vw;
}
#row6{
margin-top: 20px;
width:90vw;
}
}
@media only screen and (min-width:600px) and (max-width:781px)
{
#row4{
width:84vw;
margin: auto;
margin-left: 22px;
}
#row5{

width:84vw;
margin: auto;
margin-top: 20px;
margin-left: 22px;
}
#row6{
width:84vw;
margin: auto;
margin-top: 20px;
margin-left: 22px;
}
}
@media only screen and (max-width:600px){
#row4{
width:78vw;
margin: auto;
margin-left: 3px;
}
#row5{
Department Of Computer Science and Engineering, SVCN Page | 31
 B. Tech IV Year -I Sem – Internship 2023

width:78vw;
margin: auto;
margin-top: 20px;
margin-left: 3px;
}
#row6{
width:78vw;
margin: auto;
margin-top: 20px;
margin-left: 3px;
}
}
@media only screen and (min-height:1000px){
#navbar{
height:10vh;
}
#container1::before{
height:39vh;
}
#container1{
height:44vh
}
}
CONTACT.HTML :
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<title>ContactUs</title>
</head>

<body>
<div id="ContactUs">
<h1>Contact Us</h1>
<form action="#">
<div class="form-shape">
<label for="query">
Type of Query
</label>
<select name="myQuery" id="query">
<option value="sel" selected>
Select
</option>
<option value="ord">
Order related Issues
</option>
<option value="Site">
Department Of Computer Science and Engineering, SVCN Page | 32
 B. Tech IV Year -I Sem – Internship 2023
Site related Issues
</option>
<option value="fed">
Complaint related Issues
</option>
<option value="others">
Others
</option>
</select>
</div>
<div class="form-shape">
<label for="name">Name</label>
<input type="text" name="myName"
id="name"
placeholder="Enter your Name">
</div>
<div class="form-shape">
<label for="email">Email-Id</label>
<input type="email" name="myEmail"
id="email"
placeholder="Enter your email">
</div>
<div class="form-shape">
<label for="pho">Phone Number</label>
<input type="phone" name="myPhone"
id="pho"
placeholder="Enter your Phone no">
</div>
<div id="radio">
Are you a member of OnlneFoodShop:
Yes <input type="radio" name="eligible">
No <input type="radio" name="eligible">
</div>
<div class="form-shape">
<label for="message">
Ellaborate your query
</label>
<textarea name="mesg" id="message"
cols="30" rows="10">
</textarea>
</div>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>
</body>

</html>

Department Of Computer Science and Engineering, SVCN Page | 33

 B. Tech IV Year -I Sem – Internship 2023

6. OUTPUT SCREEN SHOTS

Fig 6.1: main page division block

Fig 6.2: Latest collection division block

Department Of Computer Science and Engineering, SVCN Page | 34

 B. Tech IV Year -I Sem – Internship 2023

Fig 6.3: Our Products division block

Fig 6.4: Login Console

Department Of Computer Science and Engineering, SVCN Page | 35

 B. Tech IV Year -I Sem – Internship 2023

7. CONCLUSION
The end of this module brought with it new techniques and tools for;

 organizing websites
 identifying & grouping specific elements within websites
 including & embedding multi-media content
 adding metadata to further define our webpages

At this point, you should be feeling comfortable with HTML and the ways that this markup
language allows developers and content creators to build and create webpages.

This not only includes your own writing of webpages with HTML, but the necessary step of
reading other’s HTML to understand how they use the language to present content and solve
problems. This latter task is greatly facilitated by the open nature of the Internet, and the fact
that all content is sent as documents to your web browser, allowing you to view others source
code.

This is quite exciting, as it will allow you to transform your “plain” looking pages. This work
will build directly off of your knowledge and understanding of HTML. Therefore, if you are
still struggling with any topics or concepts, please leverage your resources (i.e., the
instructors, class issues forum, and google) and take the time this week to bring everything
taught so far in this semester together.

Department Of Computer Science and Engineering, SVCN Page | 36

 B. Tech IV Year -I Sem – Internship 2023

8. REFERENCES

I. www.javatpoint.com

II. www.w3schools.com

III. www.geeksforgeeks.org

IV. www.wikipedia.com

Department Of Computer Science and Engineering, SVCN Page | 37