Scribd
Upload
20 views

Unit

Unit

Uploaded by

anandarmy20
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Unit

Unit

Uploaded by

anandarmy20
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

lOMoARcPSD|43097713

IT8078 WEB Design AND Management

Full Stack Web development (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university


Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

IT8078 WEB DESIGN AND MANAGEMENT LTPC


3003
OBJECTIVES:
 To Learn the basic concepts in HTML, CSS, Javascript
 To Understand the responsive design and development
 To learn the web project management and maintenance process
 To Design a Website with HTML, JS, CSS / CMS - Word press
UNIT I WEB DESIGN - HTML MARKUP FOR STRUCTURE 9
Working of Web - HTML Markup for Structure - Creating simple page - Marking up text – Adding Links
- Adding Images - Table Markup - Forms - HTML5
UNIT II CSS AND JAVASCRIPT 9
CSS - Formatting text - Colours and Background - Padding, Borders and Margins - Floating and positioning
- Page Layout with CSS - Transition, Transforms and Animation - Javascript - Using Java Script
UNIT III RESPONSIVE WEB DESIGN 9
Sass for Responsive Web Design - Marking Content with HTML5 - Mobile-First or Desktop-First - CSS
Grids, CSS Frameworks, UI Kits, and Flexbox for RWD - Designing small UIs by Large Finger - Images
and Videos in Responsive Web Design - Meaningful Typography for Responsive Web Design
UNIT IV WEB PROJECT MANAGEMENT 9
Project Life Cycle - Project Definition - Discovery and Requirements - Project Schedule and Budgeting -
Running the project - Technical Documentation - Development , Communicaton, Documentation - QA and
testing -Deployment - Support and operations
UNIT V PROJECT CASE STUDY 9
Using HTML, CSS, JS or using Opensource CMS like Wordpress, design and develop a Website having
Aesthetics, Advanced and Minimal UI Transitions based on the project - Host and manage the project live
in any public hosting
TOTAL : 45 PERIODS
OUTCOMES:
On Successful completion of the course ,Students will be able to
 Design Website using HTML CSS and JS
 Design Responsive Sites
 Manage, Maintain and Support Web Apps
TEXT BOOKS:
1. Jennifer Niederst Robbins, "Learning Web Design", O'REILLY 4th Edition
2. Ricardo Zea, "Mastering Responsive Web Design", PACKT Publishing, 2015
3. Justin Emond, Chris Steins, "Pro Web Project Management", Apress,2011

REFERENCES:
1. Jon Duckett, "HTML and CSS: Design and Build Websites", John Wiley and Sons, edition 2014
2. Jon Duckett, Jack Moore, "JavaScript & JQuery: Interactive Front-End Web Development", John Wiley

IV Year/VIII Sem/2021-2022(Even)
1
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

and Sons, edition 2014


3. Uttam K. Roy "Web Technologies" Oxford University Press, 13th impression, 2017 www.padeepz.net
4. Wordpress - http://www.wpbeginner.com/category/wp-tutorials/

IV Year/VIII Sem/2021-2022(Even)
2
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

UNIT I WEB DESIGN - HTML MARKUP FOR STRUCTURE

PART-A

1. What is HTML?(R)

Hypertext is ordinary text that has been designed with extra features such as formatting, images,
multimedia and links to other documents. Markup is the process of taking ordinary text and adding
extra symbols. Each of the symbols used for markup in HTML is a command that tells a browser
how to display the text. HTML is the technical term for the format used to create normal web pages

2. Write The Format Of Html Program. (R)

<HTML>
<HEAD>
<TITLE> This is the Title </TITLE>
</HEAD>
<BODY>
…. Type the body of the program .
</BODY>
</HTML>

3. What are HTML forms? (R)

An HTML form is used to allow a user to input data on a web page and the element usedis
form element and its main attributes are action and method. Its format is

<form action = http://www.example.org method = ―get‖> <form>

4. Discuss about comments in HTML. . (R)

A comment in HTML, like comments in other computer languages, is something that is intended
to be read by the programmers but to be ignored by the software processing the document. A
comment begins with the string of characters <!—which must contain no white space. A comment
ends with the string --> again with no white space.

<!-- Single line Comment Multi line Comments -->

5. What are the types of list supported by HTML? . (R)

There are three types of list supported by HTML.

Unordered – A bullet list

Ordered – a number list

IV Year/VIII Sem/2021-2022(Even)
3
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

6. What Do You Mean By Column Spanning and Row Spanning? . (R)


Row spanning is used to merge (combine) two or more rows. Column spanning is used to merge
(combine) two or more columns.

7. List the elements of WWW. . (U)

• Client & server

• Web languages & protocols

• Web pages

• Home page

• Web browsers

• Web sites

8. How do you create links to sections within the same page? . (U)

Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For
example, you can have one line as <a href=‖#topmost‖>BACK TO TOP</a>, which would result in the
words ―BACK TO TOP‖ appearing on the webpage and links to a bookmark named topmost. You then
create a separate tag command like <a name=‖topmost‖> somewhere on the top of the same webpage so
that the user will be linked to that spot when he clicked on ―BACK TO TOP‖

9. Is there any way to keep list elements straight in an HTML file? . (U)

By using indents, you can keep the list elements straight. If you indent each subnested list in further than
the parent list that contains it, you can at a glance determine the various lists and the elements that it
contains.

10. Does a hyperlink apply to text only? (An)

No, hyperlinks can be used in the text as well as images. That means you can convert an image into a link
that will allow users to link to another page when clicked. Surround the image within the <a href=‖
―>…</a> tag combinations

11. How do you change the number type in the middle of a list? (An)

The <li> tag includes two attributes – type and value. The type attribute can be used to change the
numbering type for any list item. The value attribute can change the number index

12. State bullet types available in HTML. (U)

With ordered lists, you can select to use some different list types including alphabetical and Roman
numerals. The type attribute for unordered lists can be set to disc, square, or circle.

13. How do you create multicolored text in a webpage? (An)


To create text with different colors, use the <font color=‖color‖>…</font> tags for every character that

IV Year/VIII Sem/2021-2022(Even)
4
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

you want to apply color. You can use this tag combination as many times as needed, surrounding a single
character or an entire word

14. What is the advantage of grouping several checkboxes together? . (U)

Although checkboxes don’t affect one another, grouping checkboxes together help to organize them.
Checkbox buttons can have their name and do not need to belong to a group. A single web page can have
many different groups of checkboxes

15. What will happen if you overlap sets of tags? . (U)

If two sets of HTML tags are overlapped, only the first tag will be recognized. You will find this problem
when the text does not display properly on the browser screen

16. What if there is no text between the tags or if a text was omitted by mistake? Will it affect
the display of the HTML file? . (U)

If there is no text between the tags, then there is nothing to format. Therefore no formatting will appear.
Some tags, especially tags without a closing tag like the <img> tag, do not require any text between them

17. Is it possible to set specific colors for table borders? (An)

You can specify a border color using style sheets, but the colors for a table that does not use style sheets
will be the same as the text color.

18. How do you create a link that will connect to another web page when clicked? (An)

To create hyperlinks, or links that connect to another web page, use the href tag. The general format for this
is: <a href=‖site‖>text</a>
Replace ―site‖ with the actual page URL that is supposed to be linked to when the text is clicked

19. What other ways can be used to align images and wrap text? (An)

Tables can be used to position text and images. Another useful way to wrap text around an image is to use
style sheets

20. Can you change the color of bullets? (An)

The bullet color is always the same as that of the first character in the list item. If you surround the <li> and
the first character with a set of <font> tags with the color attribute set, the bullet color, and the first character
will be a different color from the text

21. What is the relationship between the border and rule attributes? (U)

Default cell borders, with a thickness of 1 pixel, are automatically added between cells if the border attribute
is set to a nonzero value. Likewise, If the border attribute is not included, a default 1-pixel border appears if
the rules attribute is added to the <table> tag.
22. What happens if the list-style-type property is used on a non-list element like a paragraph? (U)
If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored
and do not affect the paragraph.

23. Which browsers support HTML5? (U)

IV Year/VIII Sem/2021-2022(Even)
5
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

The latest versions of Google Chrome, Apple Safari, Mozilla Firefox, and Opera all support most of the
HTML5 features.

24. Name two new tags included in the HTML 5(U)

<Video> and <Audio> are new tags which are included in HTML5 version. They are mainly used as a
replacement for Flash, Silverlight, and similar technologies to play multimedia items

25. What is <figure> in HTML5? (U)

This tag represents a piece of self-contained flow content. It is mostly used as a single unit as a reference
the main flow of the document.

26. What is the use of Canvas element? (U)

The canvas element helps to build charts, graphs, bypass Photoshop to create 2D images and place them
directly into HTML5 code

27. What are the new FORM elements which are available in HTML5? (U)

The new Form elements in HTML5 offers much better functionality than the earlier versions.

The tags given provided to carry out these functions are:

1) <datalist> – This tag is use to specify a list of options for input controls.

2) <keygen> – This tag represents a key-pair generator field.

3) <output> – It represents the result of any scripting calculation.

28. Tell me two benefits of HTML5 Web Storage(U)

Two main benefits of HTML5 Web Storage:

 It can store up to 10 MB data which is certainly more than what cookies have.
 Web storage data cannot be transferred with the HTTP request. It helps to increase the
performance of the application

29. What are two types of Web Storage in HTML5? (U)

Two storage types of HTML5 are:

Session Storage:It stores data of current session only. It means that the data stored in
session storage clearautomatically when the browser is closed.

Local Storage:

Local storage is another type of HTML5 Web Storage. In local storage, data is not deleted
automatically when the current browser window is closed.

IV Year/VIII Sem/2021-2022(Even)
6
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

30. What is the Application Cache in HTML5 and why it is used? (U)

The Application Cache concept means that a web application is cached. It can be accessible
without the need for internet connection.

31. Explain five new input types provided by HTML5 for forms? (U)

Following are the important, new data types offered by HTML5:

1. Date: It allows the user to select a date.


2. datetime-local: This input type allows the user to select a date and time without time zone.
3. datetime: This input type allows the user to select a date and time with time zone.
4. month: It enables the user to select a month and year
5. email: These input fields used to contain an e-mail address.

32. Explain the different types of list supported by HTML.(U)

There are three types of list supported by HTML


1. UNORDERED:A bulleted list
2. ORDERED:A numbered list
3. DEFINITION:A list of terms and definitions for each

Part-B
1. Explain in detail the HTML Markup for Structure. Organize how tables are used?
2. Explain form controls in detail and create a web page with necessary
form controls.
3. Examine the audio and video formats supported by HTML5. Also write in detail
about video and audio encoding tools.
4. Explain in detail the linking to pages on the web and Linking within your own site with example. .
5. Explain in detail the working of web.
6. Explain in detail to add images in the web page with example.

UNIT –II CSS AND JAVASCRIPT

PART-A

1. What are Style Sheets? (U)

A style sheet provides a great deal of control over the presentation of a document.

2. Mention the need for cascading style sheets. (U)

Allow the information in the document to be presented without change in a variety of ways

Relatively easy to give all of the elements on a page consistent appearance

Both the document author and the person viewing the document can specify aspect of the document style

IV Year/VIII Sem/2021-2022(Even)
7
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

as it is displayed by the browser

3. What is the use of @import at-rule? (U)


The @import at-rule is used to input one style sheet fie into another one. For e.g @import
url(―common.css‖); will first read in rules from the file common.css before continuing with
the other rules in this style sheet

4. What are external style sheets? (U)

The style sheets which has been stored in separate files and included in an HTML

documents through the use of a link element are known as external style sheets.

What is margin collapse?


When two consecutive block boxes are rendered (the first on top of the second), a special rule called
margin collapse is used to determine the vertical separation between the boxes. As the name implies, two
margins--the bottom margin of the first (upper) box and the top margin of the second (lower) box—are
collapsed into a single margin.

5. What are embedded style sheets? (U)

A style sheet that is included in the content of a style element is known as an embedded style sheet

6. What are the two methods of implementing style sheets? (U)

The two methods of implementing styles to HTML elements are

Rule Cascading

Inheritance

7. Give the syntax of CSS rule. (U)

A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML
element you want to style. Each declaration consists of a property and a value. The property is the style
attribute you want to change. Each property has a value

8. Who could be the origin of the declaration? (U)

The origin of a style sheet declaration is who wrote the declaration, the person who wrote the HTML
document , the person who is viewing the document, or the person who wrote the browser software that is
displaying the document. Specifically the origin can be one of the following. i) Author ii) User Agent iii)
Use

9. List out some primary CSS text properties.(An)

Some of the primary CSS text properties are:

IV Year/VIII Sem/2021-2022(Even)
8
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

TEXT-DECORATION, LETTER-SPACINGWORD-SPACINGTEXT-TRANSFORM

TEXT-INDENT

TEXT-ALIGN WHITE-SPACE

10. Explain Normal Flow Box Layout. (U)

It is a browser’s standard rendering model (normal flow processing), where every HTML element
rendered by the browser has a corresponding regular box that contains the rendered content of the element

11. What is the use of list style property? (U)

The list-style-type property can be used to vary the default styles used for bulleted and numbered list
items. It can be applied to the li, ol, ul element type

12. What are the types of positioning? (U)

Normal flow positioning Relative positioning Absolute positioning Float positioning

13. Define font family? (U)

Font family is a collection of related fonts, and a font is a mapping from a character

(Unicode Standard code point) to a visual representation of the character (a glyph).

14. List out the class of selectors(U)

i. ID Selectors

ii. Class and pseudo-class selectors

iii. Descendent and type selectors

iv. Universal selectors

15. What is a Javascript statement? Give an example. (U)


A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what
to do. This JavaScript statement tells the browser to write "Hello Dolly" to the web page: document. write
("Hello Dolly"); It is normal to add a semicolon at the end of each executable statement. Most people think
this is a good programming practice, and most often you will see this in JavaScript examples on the web.

16. Why JavaScript has been called dynamically typed language?(An)

JavaScript performs many conversions between data types automatically. It is also possible to store

IV Year/VIII Sem/2021-2022(Even)
9
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

different data types in the same variable which is not possible in other languages like Java and C++ which
are called statically typed languages. According to the data type stored the type of the variable is determined
and it is not necessary for variable type declaration. Hence JavaScript is called dynamically typed language

17. What is the use of typeof operator? (U)

typeof is an operator that provides information about the data type of a value stored in a variable and also
its use is to test that a variable has been defined before attempting to use it.

18. What are the three types of statements in JavaScript? (U)

Expression statement: that consists entirely of an expression

Block statement: that consists of set of statements enclosed in braces { } Keyword statement: that begin
with keywords such as var, if, for etc

19. What is Node object? (U)

Every element in a document tree refers to a Node object. Some nodes of the tree are

JavaScript objects corresponding to HTML elements such html or body.

20. What do you mean by document node? (U)

The document object itself is considered to be DOM tree node with node type 9 and symbolic constant
DOCUMENT_NODE and it has its own properties and methods

21. List out some properties of the document object. (U)

The properties of document object are DOCTYPE, TITLE, BODY, COOKIE, URL, DOMAIN,
REFERRER, CREATEELEMENT(STRING), CREATETEXTNODE(STRING),
GETELEMENTBYID(STRING), GETELEMENTBYTAGNAME(STRING)

22. Explain Event object. (U)


In the DOM event model, when an event occurs, an instance of a host object named Event is created. This
instance contains information about the event, including the type of event and a reference to the document
node corresponding to the markup element that generated the event which is called the event target. The
Event instance properties type and target provides this information.

23. What is the important feature of dynamic positioning? (APRIL/MAY 2008) (U)

Dynamic positioning allows you to tell the browser exactly where to put a block of content without using
tables.

IV Year/VIII Sem/2021-2022(Even)
10
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

24. What is Event Listener? (U)

An Event Listener is simply a function that takes a single argument that is an instance of an Event. A call
to the addEventListener() method on a node object associates an event listener with a type of event occurring
on that node.

25. What are the types of Events? (U)

i. HTML intrinsic events

ii. HTML Events

iii. UI Events

iv. Mutation Events

26. List out some common window object methods. (An)

alert(String), confirm(String), prompt(String, String), open(String, String) close(), focus(), blur(), print()

27. List out some common window object methods related to time. (An)

i) setTimeout(String, Number)

ii) clearTimeout(Number)

iii) setInterval(String, Number)

iv) clearInterval(Number)

28. What is DHTML? (U)

The combination of HTML plus JavaScript and the DOM is referred to as Dynamic HTML (DHTML), and
an HTML document that contains scripting is called a dynamic document.

Part-B
1. Discover the categories of selectors used in CSS. Explain with example.
2. Explain in detail the types of CSS with example.
3. Explain about adding multiple colours and backgrounds in CSS. Explain in detail
about the formatting text?
4. Explain in detail padding, borders and margins with example.
5. Summarize the types of floating and positioning in CSS?
6. Identify the page layout type which resizes proportionally when the
browser window resizes.
7. Inspect about Transition, Transforms and animation and its related properties.

IV Year/VIII Sem/2021-2022(Even)
11
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

8. Discuss in detail the javascript with example.

UNIT III RESPONSIVE WEB DESIGN

1. What is SASS? (U)

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with
CSS and saves time. It is more stable and powerful CSS extension language that describes style of
document cleanly and structurally.
Why to use SASS?
 It is pre-processing language which provides indented syntax (its own syntax) for CSS.
 It allows writing code more efficiently and easy to maintain.
 It is super set of CSS which contains all the features of CSS and is an open source pre-processor,
coded in Ruby.
 It provides document style in good structure format than flat CSS.
 It uses re-usable methods, logic statements and some of the built in functions such as color
manipulation, mathematics and parameter lists.
2. List out some features of SASS? (U)

 It is more stable, powerful and compatible with versions of CSS.


 It is super set of CSS and is based on the JavaScript.
 It is known as syntactic sugar for CSS which means it makes easier way for user to read or
express the things more clearly.
 It uses its own syntax and compiles to readable CSS.
 You can easily write CSS in less code within less time.
 It is an open source pre-processor which is interpreted into CSS.
3. What are advantages of SASS? (U)

 It allows writing clean CSS in a programming construct.


 It helps in writing CSS quicker.
 It is superset of CSS which helps designers and developers work more efficiently and quickly.
 As Sass is compatible with all versions of CSS, we can use any available CSS libraries.
 It is possible to use nested syntax and useful functions such as color manipulation, mathematics
and other values.
4. What are disadvantages of SASS? (U)

 It takes time for developer to learn new features present in this pre-processor.
 If more number of people working on the same site, then will use the same preprocessor. Some
people use the Sass and some people use the CSS to edit the files directly. So it will become

IV Year/VIII Sem/2021-2022(Even)
12
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

difficult to work with site.


 There are chances of losing benefits of browser's built-in element inspector.
5. Name the two syntaxes supported by SASS? (U)

SASS supports two syntaxes namely SCSS and Indented syntax.


 The SCSS (Sassy CSS) is an extension of CSS syntax that makes much easier to maintain large
stylesheets and can recognize vendor specific syntax and many CSS. SCSS files use the extension
.scss.
 The Indented is an older syntax and sometimes just called as Sass. Using this form of syntax, CSS
can be written concisely. SASS files use the extension .sass.
6. In how many ways you can use the SASS? (An)

You can use SASS in three different ways −


 As a command line tool
 As a Ruby module
 As a plugin for Rack enable framework
7. What are nested rules in SASS? (U)

Nesting is combining of different logic structures. Using SASS, we can combine multiple CSS rules within
one another. If you are using multiple selectors, then you can use one selector inside another to create
compound selectors.
8. How to refer parent selector in the SASS? (U)

You can select the parent selector by using the & character. It tells where the parent selector should be
inserted.
9. How to write placeholder selector in SASS? (U)

SASS supports placeholder selector using class or id selector. In normal CSS, these are specified with "#"
or ".", but in SASS they are replaced with "%".
10. Mention the different types of operations on the SASS? (U)

There are 5 types of operations −


 Number Operations
 Color Operations
 String Operations
 Boolean Operations
 List Operations
11. What are number operations?

It allows for mathematical operations such as addition, subtraction, multiplication and division.

IV Year/VIII Sem/2021-2022(Even)
13
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

12. What are color operations? (U)

It allows using color components along with arithmetic operations.


13. What are list operations? (U)

Lists represent series of values which are separated using commas or space.
14. What are boolean operations? (U)

You can perform boolean operations on Sass script by using and, or and not operators.
What are parentheses in SASS?
Parentheses is pair of signs which are usually marked off by round brackets ( ) or square brackets []
which provides symbolic logic that affect the order of operations.
15. What is interpolation in SASS? (U)

It provides SassScript variables in selectors and property names using #{ } syntax. You can specify
variables or property names within the curly braces.
16. What is variable defaults? (U)

You can set default values for variables by adding !default flag to the end of the variable value. It will
not re-assign the value, if it is already assigned to the variable.
17. What is import directive? (U)

It directly takes the filename to import and all the imported files will get combined in a single CSS file.
18. What is media directive? (U)

It set style rule to different media types.


19. What is extend directive? (U)

It is used to share rules and relationships between selectors. It can extend all another class styles in one
class and can also apply its own specific styles.
20. What is at-root directive? (U)

It is is a collection of nested rules which is able to make style block at root of the document.
21. What is @if directive? (U)

It is used to selectively execute the code statements based on the result of the evaluating an expression.
22. What is @else if directive? (U)

The @else if statements are used with the @if directive, whenever the @if statement fails then the @else
if statements are tried and if they also fails then the @else is executed.

IV Year/VIII Sem/2021-2022(Even)
14
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

23. What is @for directive?What is @each directive? (U)

In @each directive, a variable is defined which contains the value of each item in a list.
24. What is @mixin directive? (U)

It is used to define the mixins that includes optionally the variables and argument after the name of the
mixin.
25. What is @include directive? (U)

It is used to include the mixin in the document and styles defined by the mixin can be included into the
current rule.
26. What are mixin arguments? (U)

The SassScript values can be taken as arguments in mixins which are given when mixin is include and
are available as variable within the mixin.
27. Mention the two types of mixin arguments? (U)

There are two types of mixin arguments −


 Keyword Arguments
 Variable Arguments
28. What are mixin arguments? (U)

The SassScript values can be taken as arguments in mixins which are given when mixin is include and
are available as variable within the mixin.
29. Mention the two types of mixin arguments? (U)

There are two types of mixin arguments −


 Keyword Arguments
 Variable Arguments
30. What are keyword arguments?What are variable arguments? (U)

Variable arguments are used to pass any number of arguments to mixin. It contains keyword arguments
passed to the function or mixin.
31. What are function directive? (U)

Using function directive, you can create your own function and use them in your script context or can be
used with any value.
32. What is SASS output style? (U)

The CSS file that the SASS generates consists of default CSS style which reflects the structure of

IV Year/VIII Sem/2021-2022(Even)
15
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

document. The default CSS styling is good but might not be suitable for all situations.
33. What is nested CSS style? (U)

Nested style is default styling of SASS. This way of styling is very useful when you are dealing with
large CSS files.
34. What is expanded CSS style? (U)

In expanded output styling, each property and rule has its own line. It takes more space compared to
nested CSS style.
CSS properties can be declared in two ways −
 Properties can be declared similar to CSS but without semicolon(;).
 colon(:) will be prefixed to every property name.
35. What is shorthand for writing @mixin and @include directives? (An)

You can use = for @mixin directive and + for @include directive which requires less typing and makes
your code simpler, and easier to read.
36. Which command is used to watch the file and update the CSS whenever SASS file
changes?Whatare comments in SASS? (An)

Comments take up entire line and enclose all the text nested under them and they are line-based in
indented syntax.
37. Which command is used to run SASS code from the command line? (An)

sass input.scss output.css


38. What are the CSS specifications for character encoding of stylesheets?How many types are
there in comments? (An)

Sass supports two types of comments −


 Multiline comments − These are written using /* and */. Multiline comments are preserved in
CSS output.
 Single line comments − These are written using // followed by comments. single line comments
are not preserved in CSS output.

39. Which one is a server-side solution for implementing responsive

images?(U)

http://adaptive-images.com

Which one is not included in the framework?

button styles

IV Year/VIII Sem/2021-2022(Even)
16
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

40. What should be the set value of the background-size property such that image will fit
in the content area? (U)

100%100%, If the background-size property is set to ―contain‖, the background image will scale and will
try to fit in the content area. Still, the image will keep its aspect ratio i.e. the proportional relationship
between the image’s width and height.

41. Which tag is used to let control over the viewport? (U)

<meta>

42. Which plugin allows the element to become locked or sticky? (An)

.affix, Affix plugin allows an element to become affixed i.e. sticky or locked to an area on the page. It
toggles position:fixed on and off, .alert-link is used on links inside alerts to add matching colored links.

43. Which is a container for slide items? (An)

.carousel-inner is a container for slide items, .carousel-caption creates a caption text for each slide in the
carousel, .carousel-control is container for next and previous links, .carousel-indicators adds little dots at
the bottom of each slide

44. What clears floats? (U)

.clearfix clears floats, .close indicates a close icon, .checkbox ia a container for checkboxes, .col-*-* is a
responsive grid (span 1-12 column), extra small devices phones (<786px), tablets (>=786px), medium
devices desktops (>=992px), large devices desktops (>=1200px).

To enable slideshow, what we should not be included?

To construct HTML for slideshow simply wrap the content or the images within unordered list element
with data-orbit. For enabling slideshow we will need to include jquery.js, foundation.js, foundation.orbit.js
or zepto.js within HTML.

45. Which class is used to separate links in dropdown menu? (An)

.divider class is there to separate links in dropdown menu with thin horizontal border, .dl-horizontal lines
up the terms <dt> and descriptions <dd> in <dl> elements side-by-side, .dropdown creates a toggleable
menu that allows user to choose one value from predefined list.

46. Which class adds a rounded border around an element? (An)

.well adds a rounded border around an element with gray background color and some padding, .well-lg is
a large well i.e. for more padding, .well-sm is a small well with less padding.

47. Which class is a container for responsive columns? (An)


.row class is for container for responsive columns, .small creates a lighter, secondary text in any heading,
.sr-only hides an element on all devices except for screen readers, .show class shows an element.

IV Year/VIII Sem/2021-2022(Even)
17
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

48. Which class is a container for progress bars? (An)

progress class is a container for progress bars, .progress-bar creates a progress bar, .progress-bar-success
creates a green progress bar and indicates success, .progress-bar-info shows light-blue progress bar
indicating information.

49. Which of the following aligns media objects? (An)

.media aligns media objects like images or videos often used for comments in a blog post, .media-body
specifies the text that should appear next to media object, .media-list creates nested media lists, .media-
object indicates a media object

50. Which shapes an image to a thumbnail? (An)

.img-thumbnail shapes image to a thumbnail (borders), .img-rounded adds rounded crners to an image,
.img-responsive makes an image responsive, .img-circle shapes an image to a circle, it is not supported in
IE8 and earlier versions

51. Which is not a container for embedded content? (An)

.embed-responsive-item is used inside .embed-responsive, scales the video nicely to the parent element,
.embed-responsive, .embed-responsive-16by9, .embed-responsive-4by3 are containers for embedded
content. They creates given aspect ratio embedded content.

Part-B

1. What are the basic concepts of SAAS for Responsive Web Design?
2. Demonstrate CSS grids along with its pros and cons. Explain in detail CSS
Frameworks.
3. Explain in detail the marking content with HTML 5 and mobile first or desktop first
4. Illustrate building a sample page with Flex box. Explain in detail about UI
5. Examine the meaningful Typography for Responsive Web Design.
Explain how Images and Videos are added in Responsive Web Design.

UNIT IV WEB PROJECT MANAGEMENT

PART-A
1. What is a project?(U)
The dictionary definitions put a clear emphasis on the project being a planned activity. A project
is a unique venture with a beginning and an end, conducted by people to meet established goals
within parameters of cost, schedule and quality.

2. What are the characteristics of a project? (U)

o Non-routine tasks are involved


o Planning is required

IV Year/VIII Sem/2021-2022(Even)
18
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

o Specific objects are to be met or a specified product is to be correct


o The project has a predetermined time span

3. Why organize an activity or job as a project? (U)


o It allows you to better structure and organize the tasks that need to be performed
o Well-developed approaches and tools are available for managing projects
o Easy-to-use software is available for scheduling and budgeting projects.

4. Define Feasibility Study. (U)


It is based on an outline design of system requirements in terms of Input, Processes, Output, Fields,
Programs, and Procedures. This can be quantified in terms of volumes of data, trends, frequency of
updating, etc.

5. What is meant by planning? (U)


Planning as a process involves the determination of future course of action, that is, why an action,
what action, how to take action, and when to take action. These why, what, how, and when
are related with different aspects of planning process.

6. What are the phases in software development life cycle? (U)

o Requirement analysis
o Architecture design
o Detailed design
o Code and test
o Integration
o Qualification testing.
o Installation.
o Acceptance support

7. Define Requirement Analysis. (U)


This investigates what the potential users and their managers and employers require as
features
and qualities of the new system.

8. What is meant by qualification testing? (U)


The system, including the software components, has to be tested carefully to ensure that all the
requirements have been fulfilled.

9. What is management? (U)


Management can be defined as all activities and tasks undertaken by one or more Persons for the
purpose of planning and controlling the activities of others in order to achieve objectivesor
complete an activity that could not be achieved by others acting independently.

10. What are the problems with software project from manager’s point
ofview?(May/Jun2013) (U)

IV Year/VIII Sem/2021-2022(Even)
19
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

o Poor estimates and plans.


o Lack of quality standards and measures.
o Lack of techniques to make progress visible.
o Lack of guidance about organizational Decisions.
o Poor role definition. 6.Incorrect success criteria

11. What are the steps involved in step wise planning? (U)

o Identify project scope and objectives.


o Identify project infrastructure.3.Analyze project characteristics.
o Identify project products and activities.
o Estimate effort for each activity.
o Identify activity risks.
o Allocate resources.
o Review / publicize plan9. Execute plan/ lower levels of planning.

12. Explain the steps involved in to identify activity risks. (U)


The first thing to understand in risk management is that it's a on-going activity. It's not about
identifying risks upfront and then forging ahead regardless. It's too easy to forget the risks
once the project is started and fail to recognize and raise new risks when the project is
underway.
The key steps to risk management are summarized below.
 Risk Assessment
 Risk Reduction /Minimization/ Containment
 Risk Monitoring
 Risk Reporting
 Risk Evaluation

13. Explain the steps in project planning with case studies example. (U)
Define
 Project goal
 Project deliverables
 Project schedule
 Supporting plans

14. Define project Evaluation. (U)


Project evaluation is a systematic method for collecting, analyzing, and using information to
answer questions about projects, policies and programs, particularly about their effectiveness and
efficiency.

15. Define technical assessment.(may/Jun2013) (U)


Technical assessment of a proposed system consists of evaluating the required functionality
against
the hardware and software available. Organizational policy aimed at the provision of a

IV Year/VIII Sem/2021-2022(Even)
20
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

uniform and consistent hardware/software infrastructure is likely to place limitations on the


nature of technical solutions that might consider.

16. Define development costs. (U)


Development costs include the salaries and other employment costs of the staff involved in the
development project and all associated costs.
• TDEV = 3 ´ (PM)(0.33+0.2*(B-1.01))

• PM is the effort computation and B is the exponent computed as discussed above


(B is 1 for the early prototyping model). This computation predicts the nominal
schedule for the project.

17. What are the steps involved in Activity Planning? (U)

o Ensure that the appropriate resources will be available precisely when required.
o Avoid different activities competing for the same resources at the same time.
o Produce a detailed schedules showing which staff carry out each activity.
o Produce a timed cash flow forecast.

18. Write short notes on WBS. (U)


This involves identifying the main tasks required to complete a project and then breaking
each of
these down into set of lower-level tasks.

19. Write short notes on control. (U)


Control uses the information supplied by the monitoring techniques in order to bring project
actual results in line with stated project performance standards.

20. Define slip chart. (U)


A slip chart is a very alternative favored by some project managers who believe it provides a
more
Striking visual indication of those activities that are not progressing to schedule the more the
slip line bends, the greater variation from the plan.

21. Define Gantt Chart. (U)


One of the simplest and oldest techniques project progress is the Gantt -chart this is
essentially an
activity bar chart indicating scheduled activity dates and duration frequently augmented with
activity floats.

22. What are the services to be provided in contracts? (U)

o Training

IV Year/VIII Sem/2021-2022(Even)
21
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

o Documentation
o Installation
o Conversion of existing files
o Maintenance agreements
o Transitional insurance agreements.

23. What are the objectives of managing people and organizing teams?(Apr2014) (U)

o Identify some of the factors that influence people’s behavior in project.


o Select and induct new staff into a project.
o Increase staff motivation.
o Improve group working.
o Use the most appropriate leadership styles.

24. How to becoming a team? (U)

o Forming- The members of the groups get to know each other and try to set up
o some ground rules about behaviour
o Storming- one nice packaging, all for publishing need
o Norming- Asset Management is a powerful and complete asset management
solution
o Performing- Optimize project delivery across the software
o Adjourning - added a final stage

Part-B

1. What are the phases of project life cycle? Explain each phase with diagram.
2. Summarize the Project Scheduling and Budgeting?
3. Explain in detail about project definition. List out the characteristics of project life cycle.
4. Explain in detail about Discovery and Requirements.
5. Review each type of documentation that you need for a successful project.
6. Explain in detail about how to run the project
7. Explain in detail the deployment, QA and testing

UNIT V PROJECT CASE STUDY

Part-A

1. Which rules you should have to follow for WordPress plugin development? (U)
1. Create a unique name
2. Create the plugin’s folder
3. Create a sub-folder for PHP files, translations, and assets
2. In which way you can get involved with WordPress? (U)

IV Year/VIII Sem/2021-2022(Even)
22
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

1. Attend Word Camp


2. Edit the Codex (documentation)
3. Help in the Forums
3. In which case we recommend WordPress to our client? (U)

1. If our client is working on non-CMS based project

2. If a site wants complex or innovative e-commerce

3. In the case of enterprise intranet solution

4. Which steps you should can take if your WordPress file is hacked? (U)

1. Install security plugins like WP security

2. Re-install the latest version of WordPress

3. Change password and user-ids for all your users

5. What is a WordPress taxonomy? (U)

1. Category

2. Tag

3. Link Category

4. Post-Formats

6. How many free plug self-hosted that work on WordPress only? (An)

30,000

7. What are the rules to follow in WordPress plugin development? (U)

1. Find a unique name

2. Setup a prefix (related to your brand)


3. Create the plugin’s folder

8. What if there is no text between the tags or if a text was omitted by mistake? Will it affect
the display of the HTML file? (U)

If there is no text between the tags, then there is nothing to format. Therefore no formatting will
appear. Some tags, especially tags without a closing tag like the <img> tag, do not require any text
between them

IV Year/VIII Sem/2021-2022(Even)
23
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

9. Is it possible to set specific colors for table borders? (An)

You can specify a border color using style sheets, but the colors for a table that does not use style
sheets will be the same as the text color.

10. How do you create a link that will connect to another web page when clicked? (C)

To create hyperlinks, or links that connect to another web page, use the href tag. The general
format for this is: <a href=‖site‖>text</a>
Replace ―site‖ with the actual page URL that is supposed to be linked to when the text is clicked

11. What other ways can be used to align images and wrap text?(An)

Tables can be used to position text and images. Another useful way to wrap text around an image
is to use style sheets

12. Can you change the color of bullets? (An)

The bullet color is always the same as that of the first character in the list item. If you surround the
<li> and the first character with a set of <font> tags with the color attribute set, the bullet color, and
the first character will be a different color from the text

13. Explain array creation in Java script with example. (APRIL/MAY 2011) ?(U)

Array can be defined in three ways i. Using the array constructor directly in a call with no argument.
E.G: VAR ARY1=NEW ARRAY(); ARY1[0]=4; ARY1[1]=TRUE; ARY1[2]=‖OK

14. What are the two components of Javascript implementation? (An)

The primary component is a scripting engine, which includes a Javascript interpreter as well as
core ECMAScript functionality that must be present regardless of the scripting environment.

The second component is a hosting environment, which provides environment specific


capabilities to Javascript programs running within the environment.

15. What do you mean by global object? (U)

Global object is named window as global variables declared by your program are actually stored
as properties of this object. All built-in and host objects are also stored as properties of global object
16. List out some of the built-in objects of JavaScript? (U)

Built-in objects of JavaScript are STRING, NUMBER, BOOLEAN, DATE, MATH, REGEXP.

17. What are the six JavaScript data types? (U)

i. Number

IV Year/VIII Sem/2021-2022(Even)
24
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

ii. String

iii. Boolean

iv. Null

v. Object

vi. Undefined

Part-B
1. Explain about WordPress in detail? Interpret the steps in designing a website using WordPress.
2. Elloborate the hosting of website?
3. Make use of the necessary elements to design a website with aesthetics. Explain advanced and
Minimal UI Transitions based on the project.
4. What is HTML? How will you create a responsive web page using HTML.
5. Show the responsive design of web page using CSS.

IV Year/VIII Sem/2021-2022(Even)
25
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

Course Name : IT8078 - WEB DESIGN AND MANAGEMENT


Year/Semester : IV/ VIII
Year of Study : 2021 –2022 (R – 2017)
On Completion of this course student will be able to
COURSE OUTCOMES
CO DESCRIPTION
CO1
Design the Website using HTML
CO2
Design the Website using CSS

CO3
Design the Website using Java Script
CO4
Design the Responsive Sites
CO5
Manage the Web Project
CO6
Maintain and support Web Apps
CO-PO MATRIX:

PO10 PO1 1 PO12


CO PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9

CO.1 3 - 3 - - - - - - - - -

CO.2 3 - 3 - - - - - - - - -

CO.3 3 - 3 - - - - - - - - -

CO.4 3 - 3 - - - - - - - - -

CO.5 3 - 3 - - - - - - - - -

CO 3 - 3 - - - - - - - - -

CO – PSO MATRIX:

CO PSO1 PSO2 PSO3


CO.1 3 3 -
CO.2 3 3 -
CO.3 3 3 -
CO.4 3 3 -
CO.5 3 3 -
CO 3 3 -

IV Year/VIII Sem/2021-2022(Even)
26
Downloaded by 5015 Gunasekaran.k ([email protected])
lOMoARcPSD|43097713

Panimalar Institute of technology Department of Information Technology

IV Year/VIII Sem/2021-2022(Even)
27
Downloaded by 5015 Gunasekaran.k ([email protected])

You might also like