WEB INTERFACE DESIGNING TECHNOLOGIES

UNIT – II

HTML forms: HTML form elements, input types, input attributes, HTML5, HTML graphics,
HTML media – video, audio, plug INS, you tube.

HTML API’S: Geo location, Drag/drop, local storage, HTML SSE.

CSS: CSS home, introduction, syntax, colours, back ground, borders, margins, padding,
height/width, text, fonts, icons, tables, lists, position, over flow, float, CSS combinators,
pseudo class, pseudo elements, opacity, tool tips, image gallery, CSS forms, CSS counters,
CSS responsive.

1. Explain about HTML form elements? (Or) Form towards interactivity.

• HTML Forms are required when you want to collect some data from the site visitor.
• Aform will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc.
• The back-end application will perform required processing on the passed data based
on defined business logic inside the application.
• There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.
• The HTML <form> tag is used to create an HTML form and it has following syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
Form Attributes:
❖ Apart from common attributes, following is a list of the most frequently used form
attributes:
 action:Backend script ready to process your passed data.
 method:Method to be used to upload data. The most frequently used are
GET and POST methods.
 target:- Specify the target window or frame where the result of the script will
be displayed. It takes values like _blank, _self, _parent etc.

HTML Form Controls:

❖ There are different types of form controls that you can use to collect data using
HTML form:

1. Single-line text input controls:

❖ This control is used for items that require only one line of user input, such as
search boxes or names. They are created using HTML <input> tag.
❖ The common attributes are type, name, value, size and maxlength used in <input>
tag to create text field.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 1
WEB INTERFACE DESIGNING TECHNOLOGIES

Syntax:
<form>
First name: <input type="text" name="first_name" />
Last name: <input type="text" name="last_name" />
</form>

2. Password input controls:

❖ This is also a single-line text input but it masks the character as soon as a user
enters it.
❖ They are also created using HTML <input> tag but type attribute is type= password.
❖ The common attributes are type, name, value, size and maxlength used in <input>
tag to create password field.
Syntax:<form >
User ID : <input type="text" name="user_id" />
Password: <input type="password" name="password" />
</form>

3. Multiple-Line Text Input Controls:

❖ This is used when the user is required to give details that may be longer than a
single sentence.
❖ Multi-line input controls are created using HTML <textarea> tag. The common
attributes are name, rows,cols are used in <textarea> tag to create text area.
Syntax:<form>
Address : <br />
<textarea rows="5" cols="50" name="address">
Enter address here...
</textarea></form>

4.Checkbox Control:
❖ Checkboxes are used when more than one option is required to be selected.
❖ They are also created using HTML <input> tag but type attribute is
target= checkbox.
❖ The common attributes are type, name, value and checked used in <checkbox>
tag.
Syntax:<form>
<input type="checkbox" name="Web technology" value="on"> Web technology
<input type="checkbox" name="Mathematics" value="on"> Mathematics
</form>

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 2
WEB INTERFACE DESIGNING TECHNOLOGIES

5.Radio Button Control:

❖ Radio buttons are used when out of many options, just one option is required to
be selected.
❖ They are also created using HTML <input> tag but type attribute is type= radio.
❖ The common attributes are type, name, value and checked used in radio button.
Syntax:<form>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</form>

6. Select Box Control:

❖ A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more
options.
❖ The common attributes are name, size and multiple used in <select> tag. Value,
selected and label are important attributes of <option> tag.
Syntax:<form>
<select name="state">
<option value="andhrapradesh" selected>Andhrapradesh</option>
<option value="telangana">telangana</option>
</select>
</form>

7. File Upload Box:

❖ If you want to allow a user to upload a file to your web site, you will need to use a
file upload box, also known as a file select box.
❖ This is also created using the <input> element but type attribute is target= file.
Name and accept areimportant attributes of file upload box.
Syntax:<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
8.Button Controls:
❖ There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input> tag by setting its type attribute to button.
❖ The type attribute can take the following values.
 submit: - This creates a button that automatically submits a form.
 reset: - This creates a button that automatically resets form controls to their
initial values.
 button: - This creates a button that is used to trigger a client-side script
when the user clicks that button.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 3
WEB INTERFACE DESIGNING TECHNOLOGIES

 image: - This creates a clickable button but we can use an image as

background of the button.

Syntax:<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="D:\subbu\webtech\html5.gif" />
</form>

Program for creating a form using form elements:

<html>
<head>
<title>Form Elements</title>
</head>
<body bgcolor="pink" leftmargin="50">
<h2 style="color:olive;">Using of Form Elements</h2>
<form>
First name: <input type = "text" name = "first_name" />
Last name: <input type = "text" name = "last_name" /><br/><br/>
User ID : <input type = "text" name = "user_id" /><br><br/>
Password: <input type = "password" name = "password" /><br/><br/>
Select Gender:
<input type = "radio" name = "male" value = "Male"> Male
<input type = "radio" name = "male" value = "Female"> Female
<br/><br/>
Select your Cluster:
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
<option value = "Computer Science">Computer Science</option>
</select>
<br/><br/>
Select Elective Subjects:
<input type = "checkbox" name = "maths" > Maths
<input type = "checkbox" name = "physics" > Physics
<input type ="checkbox" cheked> Computer Science
<br/><br/>
Reason For Selecting Cluster : <br/>
<textarea rows = "5" cols = "50" name = "description">
Enter description here...

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 4
WEB INTERFACE DESIGNING TECHNOLOGIES

</textarea>
<br/><br/>
4 Upload Aadhar Card:
<input type = "file" name = "fileupload" accept = "image/*" /><br/><br/>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton"
src = "D:\WebTech\Html5.png" width="60" height="40"/><br/><br/>
<marquee bgcolor="yellow" >Hi Welcome to Form Elements</marquee>
</form></body></html
Output:

2. Explain Multimedia Objects in HTML?

• Multimedia: Multimedia comes in many different formats. It can be almost anything you
can hear or see.
• Multimedia on the web is sound, music, videos, movies, and animations and more. Web
pages often contain multimedia elements of different types and formats.
• Multimedia Formats:Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file is to look at the file extension.
• Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4,
.mpg, .wmv, and .avi.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 5
WEB INTERFACE DESIGNING TECHNOLOGIES

1. video tag:HTML 5 supports <video> tag also. The HTML video tag is used for streaming
video files such as a movie clip, song clip on the web page. Currently, there are three video
formats supported for HTML video tag.
1. mp4 2. webM 3. Ogg

Video tag attributes:

Attribute Description
Controls It defines the video controls which is displayed with play / pause buttons
Height It is used to set the height of the video player
Width It is used to set the width of the video player
Poster It specifies the image which is displayed on the screen when the video is not
played.
Autoplay It specifies that the video will start playing as soon as it is ready.
Loop It specifies that the video file will start over again, every time when it is
completed.
Muted It is used to mute the video output.
Preload It specifies the author view to upload video file when the page loads.
Src It specifies the source URL of the video file.
Example:
<html>
<head>
<title>html video tags</title>
</head>
<body>
<video width=”320” height=”240” controls autoplay loop>
<source src=”movie.mp4” type=”video/mp4”>
</video>
</body>
</html>

2. audio tag:since the release of HTML 5, audios can be added to webpages using the
“audio” tag.

Audio tag attributes:

• Controls: Designates what controls to display with the audio player.
• Autoplay: designates that the audio file will play immediately after it load controls.
• Loop: Designates that the audio file should continuously repeat.
• Src: designates the URL of the audio file.
• Muted: Designates that the audio file should be muted.
Example:
<html>
<head>

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 6
WEB INTERFACE DESIGNING TECHNOLOGIES

<title>html audio tags</title>

</head>
<body>
<audio width=”320” height=”240” controls autoplay loop>
<source src=”audio.mp4” type=”audio/mp3”>
</audio>
</body>
</html>

3. Plug – in: Plug – ins are computer programs that extend the standard functionality of the
browser.
a. The <embed> element: The <embed> element also defines an embedded object with in
an HTML document. Web browsers have supported the <embed> element for a long time.
However, it has not been a part of the HTML specification before HTML5.
Example:
<html>
<head>
<title>html embed tags</title>
</head>
<body>
<embed src=”audi.jpeg”>
</body>
</html>
b. The <object> element: The <object> element defines an embedded object with in an
HTML document. It was designed to embed plug – ins in web pages, but can also be used to
include HTML in HTML.
Example:
<html>
<head>
<title>html object tags</title>
</head>
<body>
<object width=”100%” height=”500px” data=”objects.html” type=”audio/mp3”>
</object>
</body>
</html>

4. Youtube: youtube accepts all types of videos to upload and get them played without
converting it. Youtube also supports add youtube links to the HTML tags and get them
played on the web pages without downloading.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 7
WEB INTERFACE DESIGNING TECHNOLOGIES

Example:
<html>
<head>
<title>html iframe tags</title>
</head>
<body>
<iframe width=”500%” height=”480”
src=”https://www.youtube.com/embed/il_t1WVLNxk” >
</iframe>
</body>
</html>

2. What is Cascading Style Sheet (CSS)? Explain about CSS Syntax.

❖ Style sheet: A Style Sheet is a collection of style rules that tells a browser how the
various styles are to be applied to the HTML tags to present the document.
❖ CSS stands for Cascading Style Sheets. CSS was invited by HakonWium Lie on
October 10, 1994.
❖ It is a style sheet language which is used to describe the look and formatting of a
document written in markup language.
❖ CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
❖ External style sheets are stored in CSS files.
❖ HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.

CSS Syntax:

❖ A CSS comprises of style rules that are interpreted by the browser and then applied
to the corresponding elements in your document.
❖ The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
❖ A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 8
WEB INTERFACE DESIGNING TECHNOLOGIES

❖ A style rule is made of three parts.

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

3. Explain what are the Advantages of CSS?

❖ CSS saves time − you can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many
Web pages as you want.
❖ Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
❖ Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
❖ Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML
pages to make them compatible to future browsers.
❖ Offline Browsing − CSS can store web applications locally with the help of an offline
catche. Using of this, we can view offline websites. The cache also ensures faster
loading and better overall performance of the website.
❖ Platform Independence − The Script offer consistent platform independence and
can support latest browsers as well.
❖ Multiple Device Compatibility– CSS can also allow the HTML documents to be
optimized for more than one type of device or media.

4. Explain types of Cascading Style Sheets? (Or)

What is a styles of CSS? (Or)Imported style sheets. (Or)

Explain the embedded style sheets and internal style sheets?

❖ Style sheet: A Style Sheet is a collection of style rules that that tells a browser how
the various styles are to be applied to the HTML tags to present the document.
❖ Rules can be applied to all the basic HTML elements, for example the <p> tag, or
you can define you own variation and apply them where you wish to.
❖ CSS is added to HTML pages to format the document according to information in
the style sheet.
❖ There are three ways to insert CSS in HTML documents.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 9
WEB INTERFACE DESIGNING TECHNOLOGIES

1. Inline CSS
2. Internal CSS or Embedded CSS
3. External CSS

1. Inline Cascading Style Sheet:

❖ An inline style may be used to apply a unique style for a single element.
❖ To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
❖ Inline CSS follows the below syntax:
Syntax:<element_name style = "property: value; property: value;">
Example: <p style=”font-family: vardana; font-style: italic;”>Hello CSS</p>

Program for creating Inline style sheet:

<html>
<head>
<title> An Inline CSS</title>
</head>
<body>
<h1 style = "color: red; background-color: pink; margin-left:30px;">
Inline CSS is applied on this heading. </h1>
<p style = "color: blue; background-color: lightblue; border-style: solid">
Inline CSS is applied on this paragraph. </p>
<p>This paragraph is not affected. </p>
</body>
</html>Output:

2. Internal (or) Embedded Cascading Style Sheet:

❖ An internal style sheet may be used if one single page has a unique style.
❖ An embedded style sheet is a part of an HTML document.
❖ Internal styles are defined within the <style> element, inside the <head> section of
an HTML page.
❖ Rules defined using this syntax will be applied to all the elements available in the
document.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 10
WEB INTERFACE DESIGNING TECHNOLOGIES

❖ An internal CSS follows the below syntax:

Syntax:
<head>
<style type="text/css">
Element_name {property: value;}
</style></head>

Program for creating Internal style sheet:

<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
body {
background-color: lightblue;
}
h1 {
color: maroon; font-style:italic;
background-color: linen;
}
p{
color: black; font-size-20;background-color:coral;
}
</style>
</head>
<body>
<h1>The internal CSS applied on this heading. </h1>
<p>The Internal CSS is applied on this paragraph.</p>
<h2>This heading is not affected. </h2>
</body>
</html>

Output:

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 11
WEB INTERFACE DESIGNING TECHNOLOGIES

3. External Cascading Style Sheet:

❖ The styles can be implemented in multiple ways one of which is used as global
template is created using external style sheet.
❖ External style sheets are used to declare style separately and implement for
multiple pages. The file storing the external style sheet uses .CSS extension.
❖ Create the structure as given below with multiple styles for different tags in a
single page and save the file with .CSS extension. Example (MyStyle.css)

body { background-color: pink; }

h1 {color: green; font-style:italic; border-style: dotted;
background-color: linen; }
p { color: black; font-size-20;background-color:yellow; }

To link the style page to html page:

❖ The link tag used to specify that a web page should use an external style sheet.
❖ The link element only requires a start tag <link> and is inserted in between the
<head>....</head> tags of html page. The link tag attributes are:
1. rel: specify the relationship of the document which is linked to.
2. type: used to specify the type used majorly in embedded style sheet. Values
are text/css.
3. href: the main attribute which establish the link between the html and css.

Program for creating External style sheet:

<!DOCTYPE html>
<html>
<head><title>An External CSS</title>
<link rel="stylesheet" type="text/css" href="MyStyle.css">
</head>
<body>
<h1>The External CSS applied on this heading. </h1>
<p>The EXternal CSS is applied on this paragraph. </p>
<h2>This heading is not affected. </h2>
</body>
</html>
Output:

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 12
WEB INTERFACE DESIGNING TECHNOLOGIES

5. Explain Formatting blocks in CSS (Or)

Explain about <div> tag and <span>tag with example?
HTML has two block formatting commands which are used to apply formatting within
the page. There are
I) <div> tag II) <span> tag

I. <div>tag :
❖ DIV is a division tag which is used to set the position of the content dynamically in
the webpage.
❖ The div element block separates the block from its surrounding content by a line
break.
❖ The <div> tag defines logical divisions in web page. It acts a lot like a paragraph tag,
but it divides the page up into larger sections.
❖ <div> tag gives the chance to define the style of whole section of HTML.
❖ The primary attributes of the <div> tag are: style, class and ID.
❖ To display the content in the specific position using div tag we have to use dynamic
properties as

• Position: absolute
• Left: point from the side specified
• Top: points from the top position
• Width: horizontal size of the div tag
• height: vertical size of the div tag
Example: To implement overlapping of images using img tag and div tag.
<!DOCTYPE html>
<html>
<head>
<title> Division tag </title>
</head>
<body bgcolor="sky blue">
<div style="position: absolute; left: 100; top: 80; border: 5px solid;">

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 13
WEB INTERFACE DESIGNING TECHNOLOGIES

<imgsrc="C:\Users\Subbu\Desktop\html5.jpg" width=400 height=200>

</div>
<div style="position: absolute; left: 150; top: 200; border: 5px solid;">
<imgsrc="C:\Users\Subbu\Desktop\html5.jpg" width=400 height=200>
</div>
</body></html>

Output:

II. <span> tag:

❖ The span element block flows within the surrounding content.
❖ The HTML <span> is an inline element and it can be used to group inline-elements
in an HTML document.
❖ The <span> tag has very similar properties to the <div> tag, in that it changes the
style of the text it encloses.
❖ Without any style attributes, the <span> tag won’t change the enclosed items at all.
❖ The difference between the <span> tag and the <div> tag is that the <span> tag is
used with inline elements whereas the <div> tag is used with block-level elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Span Tag</title>
</head>
<body>
<p> I am studying <span style = "color: green">
B.Sc (Computer Science).</span></p>
<p>Myfavorite subject is <span style = "color: red">
Web Technologies.</span></p>
</body>
</html>
Output:

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 14
WEB INTERFACE DESIGNING TECHNOLOGIES

6. Explain Layer Property with example? (Or)

What is a layer? How are they describe in HTML code?
❖ <layer> tag : - This is another browser dependent tag which is used to set the
position of the given text or an image in the web page.
❖ This is also called as position tag which helps in fixing the position of the content of
the web page with the help of various attributes. The following attributes are:
 top: specifies the points to move the content from the top.
 left: Display position from left.
 z-index: The inline layer's position within the z-order (number).
 width: The inline layer's width, in pixels.
 src: The URL of a page that will appear inside the inline layer.
 visibility: Determines whether the inline layer is visible.
 name: The name of the inline layer.
 bgcolor: The color to use for the inline layer background
❖ The browser maintains a stack of layers of content. The background image is placed
first, with text and images on top of it.
❖ Divisions have to be placed on the screen top left corner starts at pixel 0, 0. They
can be given specific locations, but the placement of that layer may be either
absolute (a fixed point on the screen) or relative to the placement of other content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Layer Tag</title></head>
<body style=”background-color:pink;”>
<layer style="background-color: green; width:300px; height:100px;
position:relative; top:10px; left:80px; z-index:3;">
</layer>
<layer style="background-color: tomato; width:300px; height:100px;
position:relative; top:-60px; left:35px; z-index:1;">

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 15
WEB INTERFACE DESIGNING TECHNOLOGIES

</layer>
<layer style="background-color: blue; width:300px; height:100px;
position:relative; top:-220px; left:120px; z-index:3;">
</layer>
</body>
</html>
Output:

Attributes Value Description

Above Layer The name of the inline layer that will be
positioned directly above the current layer in the
z – order.
Background URL A file name or URL for an image upon which the
inline layer’s text and images will appear.
Below Layer name The name of the inline layer that will be
positioned directly below the current layer in the z
– order.
Bgcolor Colorname The colour to use for the inline layer back ground
Clip Number The coordinates of the inline layer’s viewable
area.
Height Pixels The inline layer’s height, in pixels.
Left Number The position of the left side of the inline layer. It
the current inline layer is part of another layer.
called the parent layer – then the position is
relative to the parent layer.
Name Layer name The name of the inline layer
Pagex Number The position of the left side of the inline layer
relative to the browser window.
Pagey Number The position of the top of the inline layer relative
to the browser window.
Src URL The URL of a page that will appear inside the inline
layer.
Top Number The position of the op of the inline layer. If the
current inline layer is part of another layer – called
the parent layer – then the position is relative to

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 16
 WEB INTERFACE DESIGNING TECHNOLOGIES

the parent layer.

Visibility Show hide inherit Determines whether the inline layer is visible.
Width Pixels The inline layer’s width, in pixels
Z – index Number The inline layer’s position within the z – order,
inline layers with higher Z – INDEX values.

7. Explain Cascading Style Sheet properties and values?

There are mainly certain types of properties of font, color and background, text, boxes and
lists etc.

I. Font properties:
The following are the font properties available:

Property Valid values Sample usage Purpose

font- family Times roman, Verdana, Arial, { font- family: Arial, Specifies the actual
Calibri etc times roman; } font like Arial etc.
font- style Normal, italic and oblique. { font- style: italic; } To make text as
italic.
font-size Small, medium, large etc { font-size: 12pt; } Sets the size of font.
font- variant Small-caps, normal { font-variant: small-caps; Set the font variant
} of an element.

II. Color and Background properties:

These properties control the color of the text and the background, as well as the placement
and properties of a background image.

Property Valid values Sample usage Purpose

Color color { color: green; } Sets the foreground color,
name or code.
background- color/transparent { background-color: blue; } Sets the background color,
color name or code.

background- “ URL”/ none { background-color: Sets the background

image url(c:\WT\html5.jpg); } image by URL name.
background- scroll/ fixed { background- attachment: fixed; Specifies if the
attachment } background scrolls with
the rest of the document.
background- center/ left / right/ { background-position: center; } Specifies initial position of
position top /bottom the background image.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 17
 WEB INTERFACE DESIGNING TECHNOLOGIES

background- no-repeat/ { background- repeat: It repeats the background

repeat repeat-x/ repeat-y. repeat-x; image horizontally and
} vertically

III. Text properties:

These properties control text alignment, spacing, and other formatting, such as underline
and case.

Property Valid values Sample usage Purpose

text- align left/right/center/ { text- align: center; } Aligns text within an
justify element.
text- decoration none/underline/ { text- decoration: blink;} Adds decoration to an
overline/blink elements text.

text- indent length/percentage { text- indent: 25px; } Indents the first line of
text
text- shadow length/percentage {text- shadow: 4px 4px 8px blue; } Set the shadow
around a text.
letter- spacing normal/length { letter- spacing: 4pt; } Provides space
between the letters
word- spacing normal/length { word- spacing: 4pt; } Set the space between
words.

IV. Border and margin properties (Box Properties):

These properties provide borders and margins on screen.

Property Valid values Sample usage Purpose

border- color(1,4) { border- color: green red Set the border color
color white blue; } for element.
Solid/dashed/dotted { border- style: dotted; } Set the border style for
border- style /double/groove. element.

thin/ medium / thick { border- width: medium; } Specifies the width of a

border- border.
width
This property allows
border- length/ percentage {border- radius: 25px; } you to add rounded
radius borders to elements!
Margin length/percentage { margin: 10px 5px 10px 5px; Set the margin.
}
Padding length/percentage { padding: 10px 5px 10px To generate space
5px; } around elements.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 18
 WEB INTERFACE DESIGNING TECHNOLOGIES

Margin – top Length/percentage/ { margin – top:10px; } Set the top margin

auto

Margin – Length/percentage/ { margin – bottom:10em; } Set the bottom margin

bottom auto

Margin – left Length/percentage/ { margin – left:7pt; } Set the left margin

auto

Margin - Length/percentage/ { margin – right:7px; } Set the right margin

right auto

Clear Left/right/both {clear: left Clear the text

V. List properties:
These properties control the formatting of HTML lists, ie<ol>and <ul>.

Property Valid values Sample usage Purpose

list-style-type Disc/circle/upp { list-style-type: circle ; } Specifies the type of list item
er- marker.
roman/none.
list-style-image url/none { list-style-image: Specifies an image as the list item
url(html5.jpg) ; } marker.

list-style- inside/outside { list-style-position: specifies whether the list-item

position inside; } markers should appear inside or
outside the content flow

Explain about CSS Tables?

We can apply style on HTML tables for better look and feel. There are some CSS properties
that are widely used in designing table using CSS:
CSS Table Properties:
1. Table Borders:
To specify table borders in CSS, use the border property. The example below specifies a
solid border for <table>, <th> and <td> elements.
Example:
<html>
<head>
<style>
table,th,td{
border: 1px solid;
}

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 19
WEB INTERFACE DESIGNING TECHNOLOGIES

</style>
</head>
<body>
<h2>add a border to a table</h2>
<table>
<tr>
<th>firstname</th>
<th>lastname</th>
</tr>
<tr>
<td>balu</td>
<td>u</td>
</tr>
<tr>
<td>mani</td>
<td>k</td>
</tr>
</table>
</body>
</html>

2. Collapse Table Borders:

The border – collapse property sets whether the table borders should be collapsed
into a single border
Example:
table{
border-collapse:collapse;
}
3. CSS border – spacing property: Specifies the distance between the borders of
adjacent cells.
Example:
table{
border-collapse:separate;
border-spacing:15px;
}

4. CSS table – layout property: The table – layout property defines the algorithm
used to layout table cells, rows, and columns.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 20
WEB INTERFACE DESIGNING TECHNOLOGIES

Example:
table{
table-layout:auto;
width:100%;
}
table{
table-layout:fixed;
width:100%;
}

5. CSS caption – side property: The caption – side property specifies the placement
of a table caption.
Example:
table{
caption-side:top;
}

6. CSS empty – cells property: The empty – cells property sets whether or not to
display borders on empty cells in a table.
Example:
table{
empty-cells:hide;
}

8. Explain about CSS selectors?

❖ CSS Selectors:CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more.
1. Element selector:
❖ The element selector selects elements based on the element name.
❖ You can select all <p> elements on a page like this (in this case, all <p> elements
will be left-aligned, with a blue text color)
Example:
<html>
<head>
<style type="text/css">
p{
text-align: left;
color: blue;
}

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 21
WEB INTERFACE DESIGNING TECHNOLOGIES

</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Welcome to CSS</p>
<p>Hello CSS</p>
</body>
</html>
Output:

2. The id Selector:
❖ The id selector uses the id attribute of an HTML element to select a specific
element.
❖ The id of an element should be unique within a page, so the id selector is used to
select one unique element!
❖ To select an element with a specific id, write a hash (#) character, followed by the
id of the element.
❖ The style rule below will be applied to the HTML element with id="para1":
Example :
<html>
<head>
<style type="text/css">
#para1
{
text-align: left;
color: navy;
font-family:verdana;
}
</style>
</head>
<body>
<p id="para1">Hello Welcome to CSS</p>

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 22
WEB INTERFACE DESIGNING TECHNOLOGIES

<p><h1>This paragraph will not be affected.<h1></p>

</body>
</html>
Output:

3. The class Selector:

❖ The class selector selects elements with a specific class attribute.
❖ To select elements with a specific class, write a period (.) character, followed by the
name of the class.
❖ In the example below, all HTML elements with class="center" will be red and
center-aligned.
Example:
<html>
<head><title> Class Selector</title>
<style>
.center {
text-align: center;
color: teal;
background-color:pink;
}
</style>
</head>
<body>
<h1 class="center">This heading is teal and center-aligned.</h1>
<p class="center">This paragraph is teal and center-aligned.</p>
</body>
</html>
Output:

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 23
WEB INTERFACE DESIGNING TECHNOLOGIES

4. Grouping Selectors:
❖ If you have elements with the same style definitions. It will be better to group the
selectors, to minimize the code.
❖ To group selectors, separate each selector with a comma.
❖ In the example below we have grouped the selectors.
Example:
<html>
<head>
<style type="text/css">
h1, h2, p {
text-align: center;
color: tomato;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<h2>Hello CSS</h2>
<p>You are working with Group Selector</p>
</body>
</html>
Output:

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 24
WEB INTERFACE DESIGNING TECHNOLOGIES

9. What are CSS measurement units?

❖ CSS supports a number of measurements including absolute units such as inches,
centimeters, points, and so on, as well as relative measures such as percentages
and em units.
❖ You need these values while specifying various measurements in your Style rules.
Example: border = "1px solid red".

Unit Description Example

% Defines a measurement as a percentage p {font-size: 16pt; line-height: 125%;
relative to another value, typically an }
enclosing element.
cm Defines a measurement in centimeters. div {margin-bottom: 2cm; }
em A relative measurement for the height of a p {letter-spacing: 7em; }
font in em spaces.
in Defines a measurement in inches. p {word-spacing: .15in; }
mm Defines a measurement in millimeters. p {word-spacing: 15mm; }
pt Defines a measurement in points. A point is body {font-size: 18pt; }
defined as 1/72nd of an inch.
px Defines a measurement in screen pixels. p {padding: 25px; }
Pc Defines a measurement in picas. A pica is p {font-size: 20pc; }
equivalent to 12 points, thus, there are 6
picas per inch.

6. Write about Pseudo-Elements in CSS?

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Syntax:
The syntax of pseudo-elements:
selector::pseudo-element
{
property: value;
}

1. The :: first-line Pseudo-element

The :: first-line pseudo-element is used to add a special style to the first line of a text. The
following example formats the first line of the text in all <p> elements:

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 25
WEB INTERFACE DESIGNING TECHNOLOGIES

Example
p::first-line
{
color: #ff0000;
font-variant: small-caps;
000000000000000000000000000000000000000}

2. The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text. The
following example formats the first letter of the text in all <p> elements:
Example
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}

3. The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an
element. The following example inserts an image before the content of each <h1> element:
Example
h1::before
{
content: url(smiley.gif);
}

4. The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an
element. The following example inserts an image after the content of each <h1> element:
Example
h1::after
{
content: url(smiley.gif);
}

5. The ::marker Pseudo-element

The ::marker pseudo-element selects the markers of list items. The following example styles
the markers of list items:
Example
li::marker

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 26
WEB INTERFACE DESIGNING TECHNOLOGIES

{
color: red;
font-size: 23px;
}

6. The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is selected by a
user. The following CSS properties can be applied to ::selection: color, background,cursor,
and outline. The following example makes the selected text red on a yellow background:
Example
p::selection
{

color: red;
background: yellow;
}
Example program:
<html>
<head>
<title>example of css</title>
<style>
P::first-line{
color:blue;
font-variant:small-caps;
}
h1::before{
content:url(“/examples/images/marker-left.gif”);
}
h1::after{
Content:url(“/examples/images/marker-left.gif”);
}
h2:: first-letter{
color:red;
font-size:xx-large;
}
</style>
</head>
<body>
<h1>Adityadegree college</h1>
<p>
The first line of this paragraph is styled differently form the rest of line

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 27
WEB INTERFACE DESIGNING TECHNOLOGIES

The first line of this paragraph is styled differently form the rest of line
</p >
<h2>hello india</h2>
</body>
</html>

7. Write about Pseudo-classes in CSS?

A pseudo-class is used to define a special state of an element. For example, it can be used
to:
• Style an element when a user mouse over it
• Style visited and unvisited links differently
Syntax:
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
Example
<html>
<head>
<title>example of pseudo - classes</title>
<style>
a:link{
color:blue;
}
a:visited{
text-decoration:none;
}
a:hover{
color:red;
}
a:active{
color:black;
}
a:focus{
color:yellow;
}
</style>
</head>
<body>

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 28
WEB INTERFACE DESIGNING TECHNOLOGIES

<p>visit<a href=https://www.adityacollege.comv
target="_blank">adityaclg</a></p>
</body>
</html>
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
Pseudo-class names are not case-sensitive.

8. Write about CSS Counters?

CSS counters are "variables" maintained by CSS whose values can be incremented by
CSS rules (to track how many times they are used). Counters let you adjust the appearance
of content based on its placement in the document.

Automatic Numbering With Counters

CSS counters are like "variables". The variable values can be incremented by CSS rules
(which will track how many times they are used). To work with CSS counters we will use the
following properties:
• counter-reset :it is used to creates or resets a counter
• counter-increment –it is used to increment the counter value
• content: - it is used to Insert generated content
• counter() or counters() function: it is used to adds the value of a counter to an
element

To use a CSS counter, it must first be created with counter-reset.

The following example creates a counter for the page (in the body selector), then
increments the counter value for each <h2> element and adds "Section <value of the
counter>:" to the beginning of each <h2> element:
Example

<html>

<head>

<style>

body

counter-reset: section;

h2::before

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 29
WEB INTERFACE DESIGNING TECHNOLOGIES

counter-increment: section;

content: "Section " counter(section) }":";

</style>

</head>

<style>

body{

counter-reset:section;

content:"section" counter(section)":";

h2::before {

counter-increment: section;

content: "section" counter(section) ":";

</style>

</head>

<body>

<h1>examples of CSS Counters</h1>

<h2>java</h2>

<h2>html</h2>

<h2>css</h2>

<h2>oracle</h2>

<p><strong>Note:</strong> IE8 supports these properties only if a !DOCTYPE is

specified.</p>

</body>

</html>

9. Write about CSS icons?

Icons can be defined as the images or symbols used in any computer interface refer to an
element. It is a graphical representation of a file or program that helps the user to identify
about the type of file quickly.

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 30
WEB INTERFACE DESIGNING TECHNOLOGIES

Using the icon library is the easiest way to add icons to our HTML page. It is possible to
format the library icons by using CSS. We can customize the icons according to their color,
shadow, size, etc.
There are given some of the icon libraries such as Bootstrap icons, Font Awesome
icons, and Google icons that can be used in CSS easily. There is no need to install or
download the libraries mentioned above.

1. Font Awesome icons:

To use this library in our HTML page, we need to add the following link within
the <head></head> section.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

Example:
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous">
</script>
</head>
<body>
<i class="fasfa-cloud"></i>
<i class="fasfa-heart"></i>
<i class="fasfa-car"></i>
<i class="fasfa-file"></i>
<i class="fasfa-bars"></i>
</body>
</html>

2. Google icons:
As similar to the above libraries, we can add it in our HTML page simply by adding the
link given below in the <head></head> section.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Example:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 31
WEB INTERFACE DESIGNING TECHNOLOGIES

<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>

3. Bootstrap Icons:
To use the Bootstrap glyphicons, add the following line inside the <head> section of
your HTML page:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Example:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
</head>
<body>
<i class="glyphiconglyphicon-cloud"></i>
<i class="glyphiconglyphicon-remove"></i>
<i class="glyphiconglyphicon-user"></i>
<i class="glyphiconglyphicon-envelope"></i>
<i class="glyphiconglyphicon-thumbs-up"></i>
</body>
</html>

K.Manikanta, Department Of Computer Science, Aditya Degree College For Women, Kkd 32