Web Designing:

INTRODUCTION
Web design has been identified as a key factor for the acceptance
and success of the websites and electronic commerce. We analyse from
a marketing point of view the main aspects that could influence online
users’ perceptions and behaviours, in order to achieve a successful e-
commerce website.
Nowadays websites are the most convenient way to present and
disseminate information to the maximum number of people in the world.
The web browsers are the means to render the information on a
webpage, the basic building blocks of a website which has the basic
structure (architecture) written in web Program. In today’s Information
age, almost all organizations have a website with their manifesto and
their product and service information. It is probably the most economic
and the most convenient way to disseminate information all over the
world. We will define the website as a big container of relevant and
related information arranged in some logical way.
Web design can be best viewed as a client-server architecture,
where a client machine requests for service(s) and the server validates
the request to access service, probably from a database.
BASIC TERMINOLOGY
What is a web(world wide web)?

The World Wide Web (WWW), also known as the Web, is an

interconnected network of web pages and documents accessible through
the Internet. Tim Berners-Lee created it in 1989 as a way for researchers
to share information through linked documents.

The Web has since grown into a vast network of information,

entertainment, commerce, and communication accessible to anyone with
an internet connection.

The World Wide Web has become the world's

dominant information systems platform.[3][4][5][6] It is the primary tool
billions of people worldwide use to interact with the Internet

What is internet?
The Internet is a global network of connected computers and
devices that communicate with each other using standardized protocols.
It allows people and machines to exchange information and data across
geographical distances. The World Wide Web, on the other hand, is a
subset of the Internet that consists of related documents and resources
that are accessed through web browsers.
What is a web page?
A webpage is a part of a website; it means a website contains
different web pages. Such as javaTpoint.com is a website, and the page
currently you are accessing is the webpage. It can be understood as an
example of a book. So, a Website is like a complete book, and a
webpage is like a page of that book.
What is a web site?

Websites are files stored on servers, which are computers that host
(fancy term for “store files for”) websites. These servers are connected
to a giant network called the Internet.

The webpage is a single document on the web using a unique

URL, while a website is a collection of multiple webpages in which
information on a related topic or another subject is linked together under
the same domain address.

Website Examples: Flipkart.com, Nykaa.com, Amazon.com and

more

What is browser?

Browsers are computer programs that load websites via your

Internet connection, such as Google Chrome or Internet Explorer, while
the computers used to access these websites are known as “clients”.

What is URL?
Web pages are identified by URLs, which are unique addresses
that point to the location of the web page on the Internet. URLs typically
start with "http://" or "https://" and include the domain name of the web
server and the path to the specific web page.
What is IP address?
To access a website, you need to know its Internet Protocol (IP)
address. An IP address is a unique string of numbers. Each device has an
IP address to distinguish itself from the billions of websites and devices
connected via the Internet.
The IP address for HubSpot is 104.16.249.5. You can find any website’s
IP address by visiting a site like Site 24x7 or by using Command Prompt
on Windows or Network Utility > Traceroute on MacBooks.

To find your device’s IP address, you can also type “what’s my IP

address” into your search browser.

While you can access a website using its IP address, most Internet
users prefer to use domain names or by going through search engines.

What is domain name?

When referring to an Internet address or name,
a domain or domain name is the location of a website. For example, the
domain name "google.com" points to the IP address "216.58.216.164".
Generally, it's easier to remember a name rather than a long string of
numbers. A domain name contains a maximum of sixty three characters,
with one character minimum, and is entered after the protocol in
the URL, as shown in the following example.
What is DNS?
(Domain Name System) The Internet's system for converting
alphabetic names into numeric IP addresses. For example, when a Web
address (URL) is typed into a browser, DNS servers return the IP
address of the Web server associated with that name. In this made-up
example, the DNS converts the URL www.company.com into the IP
address 204.0.8.51. Without DNS, you would have to type the series of
four numbers and dots into your browser to retrieve the website, which
you actually can do. See IP address.
What is http?

HyperText Transfer Protocol (HTTP) connects you and your

website request to the remote server that houses all website data. It’s a
set of rules (a protocol) that defines how messages should be sent over
the Internet. It allows you to jump between site pages and websites.

When you type a website into your web browser or search for
something through a search engine, HTTP provides a framework so that
the client (computer) and server can speak the same language when they
make requests and responses to each other over the Internet. It’s
essentially the translator between you and the Internet — it reads your
website request, reads the code sent back from the server, and translates
it for you in the form of a website.
What is web server?

A Web server is server software, or hardware dedicated to running

said software, that can satisfy World Wide Web client requests. A web
server can, in general, contain one or more websites. A web server
processes incoming network requests over HTTP and several other
related protocols.
The primary function of a web server is to store, process and
deliver web pages to clients.[51] The communication between client and
server takes place using the Hypertext Transfer Protocol (HTTP). Pages
delivered are most frequently HTML documents, which may
include images, style sheets and scripts in addition to the text content.
What is coding?
Coding refers to writing code for servers and applications
using programming languages. They’re called “languages” because they
include vocabulary and grammatical rules for communicating with
computers. They also include special commands, abbreviations, and
punctuation that can only be read by devices and programs.
What is a cookie?
An HTTP cookie (also called web cookie, Internet cookie, browser
cookie, or simply cookie) is a small piece of data sent from a website and
stored on the user's computer by the user's web browser while the user is
browsing. Cookies were designed to be a reliable mechanism for
websites to remember stateful information (such as items added in the
shopping cart in an online store) or to record the user's browsing activity
(including clicking particular buttons, logging in, or recording which
pages were visited in the past). They can also be used to remember
arbitrary pieces of information that the user previously entered into form
fields such as names, addresses, passwords, and credit card numbers
 HTML

A Brief History of HTML

1993 - Present
The first version of HTML was written by Tim Berners-Lee in 1993.
Since then, there have been many different versions of HTML. The
most widely used version throughout the 2000's was HTML 4.01,
which became an official standard in December 1999.
Another version, XHTML, was a rewrite of HTML as an XML
language. XML is a standard markup language that is used to create
other markup languages. Hundreds of XML languages are in use today,
including GML (Geography Markup Language), MathML, MusicML,
and RSS (Really Simple Syndication). Since each of these languages
was written in a common language (XML), their content can easily be
shared across applications. This makes XML potentially very powerful,
and it's no surprise that the W3C would create an XML version of
HTML (again, called XHTML). XHTML became an official standard
in 2000, and was updated in 2002. XHTML is very similar to HTML,
but has stricter rules. Strict rules are necessary for all XML languages,
because without it, interoperability between applications would be
impossible. Most pages on the Web today were built using either
HTML 4.01 or XHTML 1.0. However, in recent years, the W3C (in
collaboration with another organization, the WHATWG), has been
working on a brand new version of HTML, HTML5. Currently (2011),
HTML5 is still a draft specification, and is not yet an official standard.
However, it is already widely supported by browsers and other web-
enabled devices, and is the way of the future. Therefore, HTML5 is
the primary language taught in this course.
 HTML, or Hypertext Markup Language, is a markup language for
the web that defines the structure of web pages.

It is one of the most basic building blocks of every website, so it's

crucial to learn if you want to have a career in web development.

INTRODUCTON TO HTML
What is HTML?
To understand "HTML" from front to back, let's look at each word
that makes up the abbreviation:

Hypertext: text (often with embeds such as images, too) that is

organized in order to connect related items
Markup: a style guide for typesetting anything to be printed in hardcopy
or soft copy format
Language: a language that a computer system understands and uses to
interpret commands.
HTML determines the structure of web pages. This structure alone is not
enough to make a web page look good and interactive. So you'll use
assisted technologies such as CSS and JavaScript to make your HTML
beautiful and add interactivity, respectively.

In this case, I like to break down the three technologies – HTML, CSS,
and JavaScript – this way: they are like a human body.

 HTML is the skeleton,

 CSS is the skin,
 and JavaScript is the circulatory, digestive, and respiratory systems that
brings the structure and the skin to life.
You can also look at HTML, CSS, and JavaScript this way: HTML is
the structure of a house, CSS is the interior and exterior decor, and
JavaScript is the electricity, water system, and many other functional
features that make the house livable.
  HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

Advantages :

 HTML helps to build structure of a website and is a widely used

Markup language.
 It is easy to learn.
 Every browser supports HTML Language.
 HTML is light weighted and fast to load.
 Storage of big files are allowed because of the application cache
feature.
 Do not get to purchase any extra software because it’s by default in
every window.
 Loose syntax (although, being too flexible won’t suit standards).
 HTML is simple to edit as being a plain text.
 It integrates easily with other languages such as JavaScript, CSS etc.
 HTML is that it is easy to code even for novice programmers.
 HTML also allows the utilization of templates, which makes
designing a webpage easy.
 It is fast to download as the text is compressible.
 Very useful for beginners in the web designing field.
 HTML can be supported to each and every browser, if not supported
to all the browsers.
 HTML is built on almost every website, if not all websites.
 HTML is increasingly used for data storage as like XML syntax.
 HTML has many tag and attributes which can short your line of
code..
Disadvantages :

 It cannot produce dynamic output alone, since it’s a static language.

 Making the structure of HTML documents becomes tough to
understand.
 Errors can be costly.
 It is the time consuming as the time it consume to maintain on the
color scheme of a page and to make lists, tables and forms.
 We need to write a lot of code for just creating a simple webpage.
 We have to check up the deprecated tags and confirm not to use
them to appear because another language that works with HTML has
replaced the first work of the tag, and hence the opposite language
needs to be understood and learned.
 Security features offered by HTML are limited.
 If we need to write down long code for creating a webpage then it
produces some complexity.
 HTML can create only static and plain pages so if we’d like dynamic
pages then HTML isn’t useful.
 Editing of web page need to be done separately , they are not
centralized.

Why We Use HTML

HTML, or HyperText Markup Language, is the code that makes up
a web page. It’s a standard language that all web browsers
understand. So, by using HTML, you can create pages that will
look the same on any device or platform. In addition to basic text
formatting options, HTML allows you to add images, videos, and
other multimedia content to your pages. 1 Plus, it provides ways to
control how your content is displayed and interacted with by users.
HTML PLATFORMS MOBILE, TABLET, LAPTOP,
DESKTOP
What are the Benefits of Using HTML in Web Pages?
 When creating a website, HTML is the foundation that holds all
the content and design elements together. 2
 It gives structure to the web page, defining things like headings,
paragraphs, and links. Without HTML, a web page would just
be a jumbled mess of text and images.
 While other technologies, such as CSS and JavaScript
programming languages, add to the esthetic and functionality of
a website, HTML remains a crucial component in every single
webpage.
 However, beyond just the esthetic, HTML also plays a key role
in improving a website’s search engine optimization (SEO).By
including proper tags and titles, HTML helps search engines
easily crawl and index a site, improving its chances of showing
up in relevant search results.
 For web developers and marketers alike, understanding and
utilizing HTML can lead to improved online visibility and
increased potential for success. In short, HTML is essential for
building an effective website.
How Does HTML Work?
When a user visits a website, the browser sends a request to
the server hosting the site. The server then retrieves the HTML
document and sends it back to the browser. The browser reads the
HTML code and translates it into a visual layout, allowing the user
to interact with the website.

HTML plays an essential role in this process, as it determines

the structure and content of a website. Along with the
programming languages CSS and JavaScript, HTML allows
developers to create visually appealing and functional websites.
Along with being important, HTML is quite easy for beginners to
learn and use. 5
 By understanding basic tags and attributes, even novice
developers can create their own meaningful web content. Overall,
HTML is an integral part of building successful websites.

Most web browsers, such as Microsoft ® Internet Explorer ® ,

Mozilla ® Firefox, or Google Chrome™, can render HTML pages.
Additionally, there are several free and commercial software
packages available that will allow you to view HTML pages
offline.

Software that supports /used to build HTML

Notepad

Notepad++

Visual studio code

Adobe dreamweaver

HTML Tags
Since HTML defines the markup for a particular web page, you'll
want the text, images, or other embeds to appear in certain ways.

For example, you might want some text to be big, other text to be small,
and some to be bold, italic, or in bullet point form.

HTML has "tags" that let you get this done. So, there are tags to create
headings, paragraphs, bolded words, italicized words, and more.

The image below describes the anatomy of an HTML tag:

HTML Elements
An element consists of the opening tag, a character, the

content, and a closing tag. Some elements are empty – that is, they don't
have a closing tag but instead have a source or link to content that you
want to embed on the web page.

An example of an empty element is <img>, which you use to embed

images on a web page.

Common HTML Tags

The following are some facts about HTML tags
 Web pages are just plain text. You can view or edit the source code
using any text editor.
 "Tags" provide web browsers with instructions about the web
page, such as where to display images, and how the document is
structured.
 Tags are always enclosed in angle brackets: < >.
 Tags are comprised of elements and attributes. An element is an
object on a page (such as a heading, paragraph, or image), and
attributes are qualities that describe that element (such as width
and height).
  Tags usually travel in pairs. An opening tag begins a section of
page content, and a closing tag ends it. For example, to markup a
section of text as a paragraph, you would open the paragraph with
an opening paragraph tag <p> and close it with a closing
paragraph tag </p> (closing tags always proceed the element with
a /).
 A few tags are called non-container tags, because they don't
contain any content - they stand alone. Examples are images and
line breaks. XHTML is more strict than HTML, and requires that
all open tags must be closed, even if they're not container tags.
Therefore, non-container tags end in />. For example, the tag for a
line break is <br />. HTML does not have this same requirement,
but it's a good habit to get into in case you ever need to code in
XHTML.
 Tags in HTML are not case sensitive, but in XHTML all tags must
be in lower case. Even when coding in HTML, you should get in
the habit of writing tags in lower case.
 White space is ignored by web browsers. So, if you hit the space
bar multiple times within a document, only one of those spaces
will actually be displayed by the browser.
 Tags can be nested. For example:
<div><p>This paragraph is nested inside a division</p></div>
Note that the order of nested tags is important: The container tags
surrounding any content should be symmetrical.
SYNTAX OF HTML

<!DOCTYPE html>
<html>
<head>
<title>Digi growth</title>
</head>
<body>
<h1> Syntax of html</h1>
<h2>Syntax of html</h2>
<h3>Syntax of html</h3>
<h4>Syntax of html</h4>
<h5>Syntax of html</h5>
<p>Hi am Kalyani</p>
<a href=https://www.digigrowth.net>Digigrowth</a>
</body>
</html>

DOCTYPE: Defining your version of HTML

Every web page must start with a DOCTYPE declaration. It has to
be the very first item on the very first line of your HTML or XHTML
code. This tells browsers what version of HTML the web page was
coded in, which helps them to know how to process the code. Prior to
HTML5, DOCTYPE declarations were long and complex. For
example, here's the DOCTYPE declaration for XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
In HTML5, the DOCTYPE declaration is much simpler:
<!DOCTYPE html>

Understanding the following tables:

Common HTML tags are presented below, organized into four tables
based on their purpose. The first table includes tags that control the
overall structure of the web page. The second and third tables include
tags that mark up the majority of web page content. Container tags
(those that contain content) are presented in the second table, and non-
container tags (those that stand alone) are presented in the third table.
 The final table contains tags that are used in markup of HTML tables,
which are covered in Module 5 of this unit.
Document Structure
Opening Closing
Description
Tag Tag

<html> </html> Opens and closes an HTML document

The first of two main sections of an HTML

document. The <head> section is used to provide
<head> </head>
information about the document for use primarily
by search engines and browsers.

The title of document. This element is nested

inside the <head> section. In HTML5, this is
<title> </title>
the only required tag other than the
DOCTYPE declaration.

The second of two main sections of an HTML

<body> </body> document. The <body> section contains all the
content of the web page.

Content (Container) Tags

Opening Tag Closing Tag Description

</h1>to</ Headings. H1 is the main heading, H2 is

<h1> to <h6>
h6> secondary, etc.

<p> </p> Paragraph

<div> </div> A container for a block of content

<span> </span> A container for in-line content, such as

 content inside a paragraph.

Gives the contained text emphasis

<em> </em>
(usually as italics).

<strong> </strong> Makes the contained text bold.

<a href =
"document </a> Link
location">

<ol> </ol> Ordered (numbered) list

<ul> </ul> Unordered (bulleted) list

List item, must be nested inside a list

<li> </li>
element such as a <ol> or <ul>

Comment. Anything between these tags

is not displayed on the screen. This is
<!-- --> useful for making notes to yourself or to
others who may view the source code of
the web page.

HTML5 Semantic Tags

HTML5 introduced several new tags called semantic tags. These tags
were designed to communicate the function of blocks of content that
were common on many web pages. Prior to HTML5, developers just
used <div> tags for all blocks.

Opening Closing
Description
Tag Tag

<header> </header> Contains introductory content for a page (e.g., a

 banner), or a section of a page.

Contains navigation content, such as a website

<nav> </nav>
navigation menu.

<main> </main> Contains the main content of the web page.

Contains content that is tangentially related to

<aside> </aside> the main content of the page (often this is
presented in a sidebar).

Contains the footer of a page, or of a section of

a page. Typically the footer contains
<footer> </footer>
information about the content, such as the
author and a copyright statement.

Empty (Non-Container) Tags

Tag Description

<br /> Line break.

<img src
="image
location" Inserts an image into a web page.
alt="alternate
text" />

Tables
Opening Closing
Sample Attributes Description
Tag Tag

<table> </table> Adds a table

<tr> </tr> Table row (start & end).

 When creating a table to
display data, use this tag to
differentiate the first row or
column of cells as heading
cells for all the other cells in
scope="row" the same column or row.
<th> </th>
scope="col" Browsers typically display
this element bold and
centered within the table cell.
The scope attribute defines
whether this is a row header
or column header.

<td> </td> Table data cell.

Use with <th> or <td>

colspan="number" elements. Spans cells across
multiple columns.

Use with <th> or <td>

rowspan="number
elements. Spans cells across
"
multiple rows.