We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 179
3
—==—=CONTENS SS
KIT 401 : WEB DESIGNING
UNIT-1 : INTRODUCTION (1-1 J to 1-16 4)
Introduction : Basic principles involved in developing a web site,
Planning process, Domains and Hosting, Responsi
Designing, Types of Websites (Static and Dynamic Websites), Web
Standards and W3C recommendations.
Introduction to HTML: What is HTML, HTML Documents, Basic
_ Structure of an HTML document, Creating an HTML document,
Mark up Tags, Heading-Paragraphs, Line Breaks.
UNIT-2 : ELEMENTS OF HTML (2-1 Jt 2-524)
HTML Tags, Working with Text, Working with Lists, Tables and
Frames, Working with Hyperlinks, Images and Multimedia,
Working with Forins and controls,
UNIT-3 : CONCEPT OF CSS (3-1 J to 3-46 3)
Creating Style Sheet, CSS Properties, CSS Styling (Background,
Text Format, Controlling Fonts), Working with block elements and
objects, Working with Lists and Tables, CSS Id and Class, Box
‘Model (Introduction, Border properties, Padding Properties, Margin
properties) CSS Advanced (Grouping, Dimension, Display,
| Positioning, Floating, Align, Pseudo class, Navigation Bar, Image
Sprites, Attribute sector), CSS Color, Creating page Layout and
Site Designs.
| UNIT-4 : INTRODUCTION TO CLIENT SIDE SCRIPTING (4-1 J to 4-26 J)
Introduction to Client Side Scripting , Introduction to Java Script ,
Javascript Types, Variables in JS, Operators in JS, Conditions
Statements, Java Script Loops, JS Popup Boxes, JS Events, JS
Arrays, Working with Arrays, JS Objects, JS Functions, Using Java
Script in Real time, Validation of Forms, Related Examples.
| UNIT-5 : WEB HOSTING & CONCEPTS OF SEO (5-1 J to 5-15.)
| Web Hosting: Web Hosting Basics, Types of Hosting Packages,
| Registering domains, Defining Name Servers, Using Control Panel,
] Creating Emails in Cpanel, Using FTP Client, Maintaining a
Website.
| Concepts of SEO : Basics of SEO, Importance of SEO, Onpage
1 Optimization Basics.
| SHORT QUESTIONS (SQ-13teSQisy .
pit
Scanned with CamScannerIntroduction
CONTENTS
Part-1 : Introduction ; Basic Principles ..
Involved in Developing
a Website, Planning Process
1-23 to 1-63
Part-2
Domains and Hostings,
1-63 to 1-75
Responsive Web Des
Part-3 : Types of Website:
(Static and Dynamic
Websites), Web
Standards and W3C
Recommendations
wns ATS to 1-95
Part-4 : Introduction to HTML =
‘What is HTML, HTML
Documents, Basic Structure
of an HTML Document
1-90 to 1-125
Part-5
Creating an HTML ..
1-123 to 1-133
Document, Markup
Part-6
Headings : Paragraph:
Line Breaks
1-189 to 1-165
1-19 ('T-Sem-4)
Scanned with CamScanner1-25 AT-Sem-4) Introduction
PART-1
Introduction. : Basie Principles Involued in Developing a Website,
Planning Process.
5 Questions-Answers
‘Long Answer Type and Medium Answer Type Questions
Queid. | Discuss the basic principles involved in developing a
website.
! [Answer
Basic principles involved in developing a website :
1. Simple is the best:
i. The over-designed website can distract visitors from the main
purpose of the website.
Clean and fresh design of the website makes the website appealing
and helps the user to navigate from one page to another seamlessly.
iii, Keep the design simple so that the visitors can feel it easy-to-use
and can find their ways easily.
2 Consistency :
i. Give attention to match design elements throughout each page.
‘The fonts, sizes, headings, sub-headings, and button styles must be
| the same throughout the website.
Plan should be done in advance. Finalize the fonts and the right
colors for the texts, buttons, etc., and stick to them throughout the
development.
iii, CSS (Cascading Style Sheets) is convenient to keep the complete
information about design styles and elements.
3 ‘Typography and readability :
i, ‘Text provides users the desired information. Since search engine
crawlers are familiar with this data, it becomes an integral part of
SEO (Search Engine Optimization) activities.
ii, ‘Typography should be visually appealing and readable for visitors,
along with the tricky use of keywords, meta-data, and other SEO-
sensitive elements.
iii, Use fonts that are easier to read. The modern sans-serif fonts as,
Arial, Helvetica, ete., can be used for the body texts.
Scanned with CamScannerWeb Designing 1-85 (IT-Sem)
Make proper combinations of typefaces for each des
such as headlines, body tests, buttons, etc,
4 Mobile compatibility
i
‘ign element
‘The web design must be effective for various screens because of
the ever-growing usage of smartphones, tablets.
There are a number of web design studios or service points from
where we can turn the desktop design into a responsive and adaptive
one for all screen sizes.
5. Color palette and imagery
i
A perfect color combination attracts users while a poor combination
can lead to distraction,
Pick a perfect color palette for the website which can create a
pleasing atmosphere, thus leaving a good impact on visitors.
Enhance user's experience by selecting a complementary color
paletie to give a balanced-look to the website design.
Avoid using too many colors. 3 or 4 tones for the whole websites are
ample to give an appealing and clear design. Do not use multiple
vibrant images.
@ Easy loading:
i. Easy loading can be achieved by optimizing image sizes, combining
code into a central CSS or JavaScript file which reduces HTTP
requests.
Also we can compress HTML, JavaScript, and CSS for enhanced
loading speed.
Easy navigation :
Visitors stay more time on the websites having easy navigation. So,
for effective navigation, create a logical page hierarchy, using bread
scrums, and designing clickable buttons.
We should follow the “three-click-rule” so that visitors can get the
required information within three clicks.
& Communication :
i The purpose of the visitors is to get information, and ifthe website
is able to communicate with visitors efficiently, they would spe™
more time on website, .
i
To establish effortless communication with the visitors, organiZ®
information by making good use of headlines and sub-headlines,
cut the waffle, and use bullet points, rather than long 6¥5
sentences.
@uei2. | Describe in brief the steps used for planning a weP=i**
OR
Describe the planning process for web designing.
Scanned with CamScanner14d GT-Sem-4) Introduction
Answer
Steps used for planning a website:
1. Research and goal setting :
i Doproper research and set goals before beginning with any project.
i, By setting goals, it will help the website to have a clear direction
and purpose.
‘The research has different purposes like it can help to determine
what we want and do not want for the website to have.
iv. Do some research on the target audience by understanding what
our audience wants is crucial to planning the rest of the website.
v. Do research on keywords to use with the website.
2 Planning the site :
i. Planning the website involves creating a wireframe and sitemap. It
is kind of skeleton of the site.
‘The sitemap allows the developer to get an outline of what the site
will look like, what pages there will be and how they will interact
with each other.
This helps with planning and is beneficial to the user experience.
A.user should be able to easily navigate a site, and this begins with
the development of the sitemap.
v. Before beginning to plan content, a sitemap helps to design what
the structure will look like.
vi Once the sitemap is completed, create a wireframe or mock-up.
This is visual representations of what the site will look like.
3 Designing the layout :
In this step we have to be creative with pictures, videos and what
kinds of things the customer will notice when they come to website.
During this step, it is important to keep referring to the target
audience.
Consider colors, logos that will encourage the audience to interact
with the site.
iv. It should help the audience to get a feel for our business or product.
4. Writing the content :
i. The written content of a website is important to its success. It is
crucial and deserves a lot of expertise.
The written content on a website helps a visitor to determine their
next steps.
iii, A website should have a vocabulary that the average person can
understand,
Scanned with CamScannerWeb Designing 1-55 (IT-Sem-4)
iv. Considering the target audience is extremely important, especially
when it comes to the text being used to give customers information.
v. Create catchy titles and headlines to draw people.
‘i. The content should get customers excited about buying a product
& Coding the website:
i The coding begins with the homepage and gradually branches out
to the other pages included in the site.
The sitemap should be followed to ensure everything is coded
Hi It is also important to set up frameworks to make sure that
eversthing will fit onto the server during the installation process.
Once the website is laid out according to the sitemap, it should be
‘ed before moving any further.
‘ell. then the rest of the content should be added, and
ing should be completed.
phase involves having a deep understanding ofthe technology
+E. During coding. consider factors such as SEO, CMS plugins, and
sdditional tools that is used for analyzing and testing the website in
& Testing and launching :
4 Before the website is launched, it is crucial that it is tested out by
real users,
‘There is user testing that can be completed to make sure the website
js giving users what they need to be successful on the test.
Check the website multiple times. When we are confident that
everything is working in order, we can go ahead and launch the
website live.
comes to launching, we are finally ready and can do this by
g it to the server. Need FTP (File Transfer Protocol) for
process
also important to make sure everything is running smoothly
i Since technology and products are changing more rapidly than
‘ore, it is important to stay up-to-date with what is happening
on
{sintaining a website is hard work, but the more effort is put into
its maintenance, it becomes the better.
It should constantly be checked out for errors.
Scanned with CamScanner1-65 (IT-Sem-4) Introduction
iv. User-experience should be tested often, and it should be ongoing.
All content is current. This means that the correct information is
on the website such as contact information, pricing, and customer
reviews.
vi. Reports can be sent daily or in other time increments to give data
and information about how the site is performing.
PART-2
Domains and Hostings, Responsive Web Designing.
Questions-Answers
Long Answer Type and Medium Answer Type Questions
Que 1.3. | Write a short note on domain name and web hosting
(Answer
Domain name:
1. A domain is a name that identifies IP addresses on the internet. A
domain is the address of the website. It is used to identify web pases.
2, We can register a domain name by registering with a domain name
services registrar.
3. Domain name is a string of characters that give the website an identi
4, Examples of domain name are google.com, alexa.com, linux.org,
quantumpage.co.in, ete.
5. All domain names are unique. This means there can be only one
google.com in the world. We cannot register a name once itis registered
by others (governed by ICANN).
Web hosting =
1. Web hosting is a service that allows organizations and individuals to post
a website or web page onto the Internet.
2. Aweb host, or web hosting service provider, is a business that provides
the technologies and services needed for the website or webpage to be
viewed in the Internet.
3. Websites are hosted, or stored, on special computers called servers.
4. When Internet users want to view the website, they need to type the
website address or domain into their browser. The computer will then
connect to the server and the webpages will be delivered to them through
the browser.
Scanned with CamScanner|
|
A
Web Designing 1-73 (T-Sem-4)
QeeTA] Discuss responsive web design.
1
Responsive web design is the practice of building a website suitable to
work on every device and every screen size, no matter how large or
small, mobile or desktop.
Responsive web design is focused for providing an intuitive and gratifying
experience for everyone. Desktop computer and cell phone users alike
all benefit from responsive websites,
Responsive web design provides an optimal experience, easy reading
and easy navigation with a minimum of resizing on different devices
such as desktops, mobiles and tabs.
Responsive web design uses HTML and CSS to automatically resize,
hide, shrink or enlarge, a website to make it look good on alll devices
(desktops, tablets, and phones).
‘Types of websites:
Static website: s
1. In static websites, web pages are returned by the servers which are
prebuilt source code files, built using simple languages such as HTML,
CSS or JavaScript.
There is no processing of content on the server (according to the user)
in static websites.
Web pages are returned by the server with no change therefore, static
websites are fast.
‘There is no interaction with databases. Also, they are less costly as the
host does not need to support server-side processing with different
languages.
Scanned with CamScanner1-85 (IT-Sem-4) Introduction
Dynamic website:
1. In dynamic websites, web pages are returned by the servers which are
processed during runtime which means they are not prebuilt web pages
but they are built during runtime according to the user's demand with
the help of server-side scripting languages such as PHP, Node.js,
ASP.NET and many more supported by the server.
2. ‘They are slower than static websites but updates and interaction with
databases are possible.
ESTEE] Dirrerentiate between static websites and dynamic
website.
iAnewer
| Binticwensite [| Dynamic website
L Content of web pages cannot | Content of web pages can be
be change at runtime. changed.
2. No interaction with database | Interaction with database is
is possible. possible.
| It is faster to load as | Itisslower than static website.
compared to dynamic
website.
4. | Lower development costs. | Higher development costs.
No feature of content
management system.
Feature of content management
system,
6. | HTML, CSS, JavaScript is
used for developing the
website.
Server side languages such as
PHP, Node js are used.
Same content is delivered
every time the page is loaded.
Content may change every time
the page is loaded.
TEER] Discuss about web standards and WSC
recommendations.
‘Web standards are rules and guidelines established by the World Wide
‘Web Consortium (W3C) developed to promote consistency in the design
code which makes up a web page.
It is the guideline for the mark-up language which determines how a
web page displays in a visitor's browser window.
rr
Scanned with CamScanner‘Web Designing 1-9 J T-Sem-4)
iii Advantages to these standards are :
1
5.
Web pages will display in a wide variety of browsers and computers,
including new technology like iPhones, iPads, PDA devices, mobile
phones, which greatly increases the viewing audience.
WSC standards promote the use of Caseading Style Sheets (CSS)
or design code which is attached to the web page rather than
embedded in the page. _
‘The use of style sheets significantly reduces the page file size which
means not only a faster page loading time but lower hosting costs
for frequently visited sites due to using less bandwidth.
‘Design features such as colors and fonts can be easily changed by
just modifying one style sheet instead of editing every individual
page in a website, reducing the costs to modify the site.
Search engines are able to access and index pages designed to web
standards with greater efficiency.
iv. WSC continues to evolve to provide the community a productive
environment for creating Web standards. W3C standards =
L
2
3
4
5.
Are created following a consensus-based decision process.
Consider aspects of accessibility, privacy, security, and
internationalization.
Reflect the views of diverse industries and global stakeholders.
Balance speed, fairness, public accountability, and quality.
Benefit from Royalty-Free patent licensing commitments from
participants.
Are stable (and W3C seeks to ensure their persistence at the
published URD.
‘Benefit from wide review from groups inside and outside WSC.
Are downloadable at no cost. .
Are maintained in a predictable fashion.
Are strengthened through interoperability testing.
Scanned with CamScanner1-105 (IT-Sem-4) Introduction
‘What is HTML ?
1. HTML (Hypertext Markup Language) is a markup language commonly
used to create web pages.
2. Amarkup language provides a way to describe the structure of text and
graphics on a web page.
3. HTML is developed and maintained by World Wide Web consortium
(wsc).
‘4. In HTML, the term hyper signifies the navigation from one location to
another in a non-linear fashion.
5. HTML defines the content, .e., the structure and the layout of a web
page with the help of elements and attributes. An element includes the
> start and end tags, with some content within them, and attributes provide
additional information (such as alignment of element on a web page)
about the elements.
(Qaet9F | Define HTML documents. Give the basic structure of an
HTML document.
Aaewer,
1. An HTML document is created by using elements, attributes and has
the -html extension.
2 The very first element of an HTML document is DOCTYPE, which
specifies the DTD definition used by the document. DTD refers to a
separate file that contains a formal definition of the grammar, such as
the supported elements and attributes used to the document, and the
version of the markup language in which the document is written.
3. Abrowser checks the code of the document according to the rules in the
declaration.
4, The basic structure of an HTML document :
Scanned with CamScanner
sina1-115 (IT-Sem-4)
.
5. Basic structure in the following sections : .
a Elements and attributes :
i Elements are the building blocks of an HTML document. A
‘browser interprets an HTML document on the basis of the
elements that are added in the document.
An clement provides instruction to a web browser, specifying
how to display the HTML document.
Elements are represented by tags that use the <, /, and >
symbols.
fl
In the given HTML document, HTML, BODY, HEAD, and
‘TITLE are elements. .
‘The document starts with the DOCTYPE element and the
HTML code resides in the HTML element. The HTMT element
has two subelements, HEAD and BODY.
vi. The HEAD clement contains another subelement, TITLE,
which is used to specify a title of an HTML document.
vii. The BODY element contains the actual content of the
document. 4
vill Attributes are used to provide additional information about
the properties and behaviour of HTML elements.
ix Most HTML attributes are name-value pairs separated by the
equal (=) sign. Attribute values are enclosed within single or
double quotes.
In HTML, each element consists of the own set of attributes.
HTML tags, elements, and attributes are collectively known a5
HTML markup.
b :
i Most HTML elements are represented by an opening taf,
, and a closing tag, .
‘The opening tags are written within less than (<) and greater
than (>) signs.
Scanned with CamScanner42.3 (IT-Sem-4) Introduction
aaedaTSem#) _Ttroduetion
iii, ‘The closing tags are written within the signs with a
forward slash (/) appended before the name of the tag.
iv. On the basis of opening and closing tags, elements are divided
into the following two categories
1. Container elements or tags : These tags contain
content or other elements.
2 Empty elements or tags : These tags do not contain
any content or elements.
c. The DOCTYPE element :
i. The DOCTYPE element provides the Document Type
Definition declaration, or called DOCTYPE declaration, for
browsers to specify which version of the markup language is
used in the HTML document.
ii, ‘This clement is used before the tag, and does not
have a closing tag.
[QHETAO] Write the steps to create an HTML document.
eer
Steps to create HTML document :
Step 1: Creating the HTML file :
Open up computer's plain text editor (Notepad) and create a new file.
Step 2: Type some HTML cod
Start with an empty window and type the following code =
For example :
A simple HTML document
oe
Scanned with CamScannerWeb Designing
Hello Worldtep>
Step 8 : Saving the file:
Now save the file on desktop as “myfirstpage-htmI”.
‘To open the file ina browser. Navigate the file then double click on it. Tt will
open in the default Web browser. If it does not, open your browser and drag.
the file to it.
‘Que 1.11. | Describe markup tags.
‘Answer
1-18 J (T-Sem-4)
1 Amarkup tag is a directive that contains snippet of code with a relative
reference to an object in the store such as a variable, URL, image, or
block. .
2 Markup tags can be used anywhere the editor is available and
incorporated into the HTML of email and news letter templates, as well
as other types of content.
3. Markup tags are enclosed in double, curly braces, and can cither be
generated by the Widget tool, or typed directly into HTML content.
4 Rather than hard-coding the full path to @ page, we can use a markup
tag to represent the store URL.
5. Amarkup tagis the fundamental characteristic of HTML. Every markup
tag is a eommand placed between a left bracket (<) and a right bracket
).
6. Markup tags are not revealed by a web browser, they are invisible.
7
Inmost cases, markup tags (containing commands) come in pairs, with
text or a graphic image located between the beginning and ending tags :
text or graphic image =~
It controls or regulates the text or graphic image information between
the two non-empty markup tags.
Pairs of markup tags are referred to as non-empty tags, because
something is contained between the beginning tag and the ending tag.
A beginning tag and an ending tag are identical, except a “slash” (/) is
placed before the command of the ending tag to tell the browser that the
command has been completed.
Scanned with CamScanner1-143 (T-Sem-4) Introduction.
‘A HTML heading or HTML (h) tag canbe defined as a title or a subtitle
which is displayed on the webpage.
2. When we place the text within the heading tags ........./hI>, it is
displayed on the browser in the bold format and size of the text depends
on the number of heading.
3. There are six different HTML headings which are defined with the
to
tags, from highest level hl (main heading) to the least
level h6 (least important heading).
4. his the largest heading tag and h6is the smallest one. So h1 is used for
most important heading and h6 is used for least important heading.
For example :
1. Heading no. 1
2.
Heading no. 2/h2>
3.
Heading no. 3
4. Heading no. 4
5.
Heading no. 5
.
6. Heading no. 6
Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
Scanned with CamScannerWeb Designing 1-16 J T-Sem-4)
Importance of headings =
1. HTMLheadings provide valuable information by highlighting important,
topics and the structure ofthe document, so we optimize them to improve
user engagement.
2 Donot use headings to make your text look BIG or bold. Use them only
for highlighting the heading of the document and to show the document
structure.
3. Scarch engines, such as Google, use headings to index the structure
nd content of the web pages so use them wisely in webpage.
4
‘Use the
headings as main headings of your web page, followed by
the
headings, then the less important
headings, and so on.
Que 1.13. | Write a short note on paragraphs and line breaks.
Answer
Paragraph tag:
1. The
tag in HTML defines a paragraph. These have both opening
and closing tag. So anything mentioned within
and
is treated
asa paragraph.
2 Most browsers read a line as a paragraph even if we do not use the
closing tag i.e,
, but this may raise unexpected results.
3
So, it is both a good convention and we must use the closing tag.
For example :
Paragraph
Quantum Series for engineering student.
It is the complete one stop solution for a simple yet effective
guidance for core engineering subjects.
ourPuT:
Quantum Series for engineering student.
It is the complete one stop solution for a simple yet effective guidance
for core engineering subjects.
Scanned with CamScanner1-16 J (IT-Sem-4)
Introduction
4. Properties of paragraph tag:
The
tag automatically adds space before and after any
paragraph, whichis basically margins added by the browser.
ii, If a user adds multiple spaces, the browser reduces them it to a
single space.
5M, Ifa user adds multiple lines, the browser reduces them to asingle
HTML line breales:
i. The HTML element defines a line break.
fi, ‘The tag is an empty tag which means that it has no end tag.
‘The tag is used, if we want a line break (a new line) without
starting a new paragraph :
For example :
This is a paragraph with line breaks.
Ooo
Scanned with CamScanner
—sPart
Part-2
Part-3
Blements of HTML : ~
HTML Tags
Working with Text,
Working with Lists
Tables and Frames, -
CONTENTS
B23 to 219d
2-18 to 2-205
. 2-205 to 2-443
Working with Hyperlinks
Images and Multimedia, ~.
Working with Forms
and Controls
| 2-443 to 2-520
2-13 (IT-Sem-4)
Scanned with CamScanner2-23 UT-Sem-4) Elements of HTML
Pesress
L
Hlements are the building blocks of an HTML document. The browser
interprets an HTML document on the basis of the clement types that
are added in the document.
An HTML document is displayed with all the properties specified by the
elements embedded in it.
An element instructs the Web browser how to display the HTML
document on the user's screen.
The structure of an HTML element consists of three basic components :
an opening/starting tag, a closing/ending tag, and the content of the
element enclosed between the opening and closing tags, as shown in the
following code =
‘This is my first paragraph.
In the preceding code :
i,
: Represents the opening tag of the paragraph clement.
ii,
: Represents the closing tag of the paragraph element.
iii, Thisis my first paragraph : Represents the content enclosed between
the opening and closing tags.
‘The opening tags are written within opening angle bracket (<) and
closing angle bracket (>) signs. For example,
& TheNAVelement: .
a
b.
a
‘The NAV clement is used to navigate from one HTML page to
another.
‘The element displays a group of links on an HTML document
‘Togo toa particular HTML page, we can click the link associated
with that page.
‘The following code snippet shows an example of the NAV
element :
4 The ARTICLE clement:
‘The ARTICLE element is used to represent a sec
contains the information about an HTML page, such asits title
and the date of its creation.
Scanned with CamScanner2-10 J (IT-Sem-4) Elements of HTML A
b. To display the information in this element in various formats,
such as a news article, a blog post, or user’s comments section.
‘The following code snippet shows an example of using the
article element :
Some heading content
Some article content
. -
6. TheASIDEclement:
a. The ASIDE element allows to create a section that is used to
display information about the content of other elements, such
as time and date, current news, and weather report.
‘This element can also be used for inserting typographical effects
in a document, such as sidebars for advertisements, links,
notes, and tips.
‘The following code snippet shows an example for the ASIDE,
element :
Article Heading-
Article content
6 TheHEADER element:
a, The HEADER element is used to provide the introductory
content on an HTML pages.
b. The HEADER clement can contain headings, paragraphs, links,
and other content.
‘The following code snippet shows an example for the HEADER,
element :
Heading level 1
Scanned with CamScanner
7, The FOOTER clement:
a
|
|
‘The FOOTER element is used to represent the footer, which
contains various types of information, such as links and |
copyright data related to a document or a section of the
document. |
‘The following code snippet shows an example of the FOOTER
element :