Scribd
Upload
195 views30 pages

Unit-I Widt-Ug

HTML is used to structure and present content on the web. It has elements like headings, paragraphs, and lists that can be styled with CSS. Web applications differ from desktop apps in that they require an internet connection, updates automatically, are cross-platform, use less resources but have less performance and security. The basic HTML page structure includes <html>, <head>, and <body> tags. Elements have opening and closing tags and can be block-level, inline, or empty elements. Attributes provide additional information about elements to affect styling. Common attributes include id, title, style, and class.

Uploaded by

Surekha Tharigopula
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
195 views30 pages

Unit-I Widt-Ug

HTML is used to structure and present content on the web. It has elements like headings, paragraphs, and lists that can be styled with CSS. Web applications differ from desktop apps in that they require an internet connection, updates automatically, are cross-platform, use less resources but have less performance and security. The basic HTML page structure includes <html>, <head>, and <body> tags. Elements have opening and closing tags and can be block-level, inline, or empty elements. Attributes provide additional information about elements to affect styling. Common attributes include id, title, style, and class.

Uploaded by

Surekha Tharigopula
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Web Interface Designing Technologies UNIT: I

HTML: Introduction to web designing, difference between web


applications and desktop applications, introduction to HTML, HTML
structure, elements, attributes, headings, paragraphs, styles, colours,
HTML formatting, Quotations, Comments, images, tables, lists, blocks and
classes, HTML CSS, HTML frames, file paths, layout, symbols, HTML
responsive,

Introduction to web designing: Web design is the planning and creation of


websites. This includes a number of separate skills that all fall under the umbrella
of web design.
Some examples of these skills are information architecture, user interface,
site structure, navigation, layout, colours, fonts, and overall imagery.

Difference between web applications and desktop applications: Desktop


application is a computer program that runs locally on a computer device (Eg:
desktop or a laptop). A web application needs an internet connection for the
device to run that application. Desktop apps are restricted by the hardware
requirements of the device on which they run. A web application can be used by
anyone who has access to the web browser.
Factors Web App Desktop App
Internet Connection Needed Not Needed
Installation & Updates Automatic Manual
Accessibility Cross-Platform OS-Specific
OS Features Restricted OS Features Can Access All
Features
Computer Resources Utilizes less computer Can utilize computer
resources resources as per need
Performance Good Better
Platform Dependency No Yes
Security Less secure Highly Secure

HTML structure: All HTML documents follow the same basic structure. They
have a head which contains control information used by the browser and server
and a large body. The body contains the content that displays on the screen and
tags which control how that content is formatted by the browser. The basic
document is:
<html>
Krishnaveni Degree College :: Narasaraopet Page No. : 1
Web Interface Designing Technologies UNIT: I
<head>
<title>A Minimal HTML document</title>
</head>
<body>
<h1>The Largest Heading</h1>
<p>A sample paragraph showing formatting and
followed by a line across the screen.</p>
<hr>
</body>
</html>
<html> tag: The <html> tag encloses all other HTML tags and associated text
within the document. It is an optional tag. You can create an HTML document
with out this tag and the web browser can still read it and display it. But it is
always a good form to include the start and end html tags.
<head> tag: This tag comes after the HTML start tag. It contains <title> tag to
give the document title that displays on the browsers title bar at the top. The
other tags that are used in the head are <style> and <link>.
Example: <title>First Web Page</title>
<body> tag: The actual content of the webpage are placed in the body section.
The body tag contains all the text and graphics which are to be displayed in the
web page. The tag consists of various attributes. They are bgcolor, link, alink,
vlink, text.
Example: <body bgcolor=”red” alink=”blue” vlink=”yellow”>
The body tag uses various tags such as <h1>, <p> and <hr>. <h1> tag is
used to display the heading in a larger font. <p> is used to write the text in a
paragraph and <hr> can be used to draw a horizontal line in the web page.

HTML elements: An HTML file is made of HTML elements. These elements are
responsible for creating web pages and define content in that webpage. An
element in HTML usually consist of a start tag <tag name>, close tag </tag
name> and content inserted between them. Thus an element is a collection of
start tag, attributes, end tag, content between them.
Some elements does not have end tag and content, these elements are
termed as empty elements or self-closing element or void elements.
Ex: <p> Welcome to HTML world!!! </p>
Ex: <hr>
HTML provides over 90 different elements. These elements fall into
different categories. They are
Krishnaveni Degree College :: Narasaraopet Page No. : 2
Web Interface Designing Technologies UNIT: I
1. Top-level elements: html, head, and body.
2. Head elements: elements placed inside head, including title (page title),
style (rendering style), link (related documents), meta (data about the
document), base (URL of document), and script (client-side scripting).
3. Block-level elements: elements behaving like paragraphs, including h1|h6
(headings), p(paragraph), pre (pre-formatted text), div (designated block),
ul, ol, dl (lists), table(tabulation), and form (user input forms). When
displayed, a block-level (or simply block) element always starts a new line
and any element immediately after the block element will also begin on a
new line.
4. Inline elements: elements behaving like words, characters, or phrases
within a block, including a (anchor or hyperlink), br (line break), img
(picture or graphics), em (emphasis), strong (strong emphasis), sub
(subscript), sup (superscript), code (computer code), var (variable name),
kbd (text for user input), samp (sample output), span (designated inline
scope).
5. When an element is placed inside another, the containing element is the
parent and the contained element is the child.
6. Comments in an HTML page are given as <!-- a sample comment -->.
Text and HTML elements inside a comment tag are ignored by browsers.
Be sure not to put two consecutive dashes (--) inside a comment. It is good
practice to include comments in HTML pages as notes, reminders, or
documentation to make maintenance easier.
7. In an HTML document certain characters, such as < and &, are used for
markup and must be escaped to appear literally. Other characters you may
need are not available on the keyboard. HTML provides entities (escape
sequences) to introduce such characters into a Web page. For example,
the entity &lt; gives < and &divide; gives ¥.

Attributes: HTML elements often have attributes. These attributes provide


additional information about HTML elements. They affect the way that the
element operates but they are optional. Attributes are always specified in the
start tag. Attributes usually come in name/value pairs like: name="value". HTML
elements commonly use the following core attributes. They are
1. Id
2. Tiitle
3. Style
4. Class
Krishnaveni Degree College :: Narasaraopet Page No. : 3
Web Interface Designing Technologies UNIT: I
Id: Id attribute is used to Uniquely identify the element in a page. All ids in a
document must be distinct.
<! -- HTML Program to demonstrate usage of id attribute-- >
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
<h1 >My Second Header</h1>
</body>
</html>

Title: Title attribute is used to provide a title for the element. The title must be
text-only, and it is shown in the web page when the cursor is placed on the
element.
<!-- HTML Program to demonstrate usage of title attributes-->
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h1Title="myHeader">My Header</h1>
<h1 >My Second Header</h1>

</body>

</html>

Style: Style attribute is used to provide presentation styles for the individual
element.
Krishnaveni Degree College :: Narasaraopet Page No. : 4
Web Interface Designing Technologies UNIT: I
<body style="background-color: cyan">
The above statement gives the color value cyan to the style property
background-color for this element. Several style properties separated by
semicolons (;) can be given. The style attribute is a direct but inflexible way to
specify presentation style.
<!--Program to demo style attribute-->
<html>
<head>
<title>style Attribute</title>
</head>
<body >

<h1 style=" background-color: lightblue; color: black; text-align: center;


"> My Header </h1>
<h1 >My Second Header</h1>
</body>
</html>

Class: Class attribute is used to specify the style class for the element. Thus,
HTML elements may use different classes and the specified presentation styles
are applied to elements belonging to the same class.
<!--Program to demo class atribute-->
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="head1">This is a heading</h1>
<h1 id ="head2">This is a paragraph.</h1>
</body>
</html>

/*external style sheet named as styls.css*/


#head1 {
background-color: lightblue;
color: pink;
text-align: center;
}
Krishnaveni Degree College :: Narasaraopet Page No. : 5
Web Interface Designing Technologies UNIT: I
#head2 {
background-color: lightgreen;
color: yellow;
text-align: left;
}

Other useful HTML attributes: Apart from core attributes, there are other useful
attributes that are used with other HTML elements.
href Attribute: The href attribute is used to link to another page or another web
address. It is used in a tag. It provides a URL to the link.
<!--Program to demo href atribute in anchor tag-->
<html>
<head>
<title >Href attribute </title>
</head>
<body>
<a href="file:///E:/htmlprac/clsatr.html">This is first Link</a>
</body>
</html>

src Attribute: src attribute is used to define file location. It accepts the URL of the
resource. It is used with <img> , <iframe>, <audio>, <video>, etc.
<!--Program to demo src atribute in image tag-->
<html>
<head>
<title >Href attribute </title>
</head>
<body>
<img src="file:///E:/htmlprac/build.jpeg" width="200" height="200">

</body>
</html>

alt Attribute: The alt attribute is added as an alternate text in a <img> tag. It
holds a description of the image.
The text provided in the alt attribute is shown when the image is not loaded due
to the unavailability of an image or some error. It is not mandatory to

Krishnaveni Degree College :: Narasaraopet Page No. : 6


Web Interface Designing Technologies UNIT: I
use alt attributes but is incredibly useful for accessibility. Screen readers read
this to their users.
<!--Program to demo alt atribute in image tag-->
<html>
<head>
<title >Href attribute </title>
</head>
<body>
<img src="file:///E:/htmlprac/build.jpeg" width="200" height="200">
</body>
</html>

Headings: HTML offers six heading elements, h1 through h6, for level-one to
level-six section headings. Headings are block elements and are usually
displayed with a heavier font weight followed by a blank line. Use h1 for top-
level section headings, and h2 for subsections within top-level sections, and so
on. Unless otherwise specified, browsers use increasingly larger fonts to render
higher level headings. It is advisable to use h1 for the most prominent heading
such as the headline of an article.
<!-- HTML Program to demonstrate usage of six heading elements -->
<! DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
</body>
</html>

Paragraphs: The <p> tag in HTML defines a paragraph. These have both
opening and closing tags. So anything mentioned within <p> and </p> is

Krishnaveni Degree College :: Narasaraopet Page No. : 7


Web Interface Designing Technologies UNIT: I
treated as a paragraph. Browsers automatically add a single blank line before
and after each <p> element.
Whitespace in between words is treated as a single character, and
whitespace at the start and end of elements and outside elements is ignored. So
when we want to display the content in a structured way then <p> tag is used.
<!-- HTML Program to demonstrate usage of paragraph element -->
<! DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<p>This is the First Para</p>
<p>This is the Second Para</p>
</body>
</html>

Styles: Browsers follow built-in default presentation styles and styles based on
end-user preferences to render Web pages. It is usually important for the Web
developer to control the presentation style in order to achieve well-designed
visual effects. Document presentation can be controlled by attaching style rules
to elements. There are three ways to attach style rules:
1. Inline - by using the style attribute inside HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file
Using the style attribute inside HTML element: The style attribute inside the html
element takes more precedence over styles in the <style> element. <style>
element takes more precedence over those specified in separate style sheets.
A style attribute is given in the general form:
style="property1:value1; property2:value2 . . . "
For example,
<h1 style="color: blue;font=verdana">The Styled Heading</h1>
<!--Program to demo inline style sheet-->
<html>
<head>
<title>inline style sheet</title>
</head>
<body >
Krishnaveni Degree College :: Narasaraopet Page No. : 8
Web Interface Designing Technologies UNIT: I
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>

Using the <style> element in the <head> section: The <style> element in the
<head> section is used to define a style for a single HTML page.
A style element is given in the general form:
<style>
Html element {property1:value1; property2:value2 . . . }
</style>
For example,
<style>
H1 {color: blue;font:verdana}
</style>
<!Program to demo inline style sheet>
<html>
<head>
<title>internal style sheet</title>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body >
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Using a <link> element to link to an external CSS file: An external style sheet is
used to define the style for many HTML pages. To use an external style sheet,
add a link to it in the <head> section of each HTML page.
The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension. Here is what
the "styles.css" file looks like:
body
Krishnaveni Degree College :: Narasaraopet Page No. : 9
Web Interface Designing Technologies UNIT: I
{
background-color: powderblue;
}
h1
{
color: blue;
}
p
{
color: red;
}
renders the heading in blue. All three ways of attaching style rules can be used
in the same page. The style attribute takes precedence over styles in the <style>
element which takes precedence over those specified in separate style sheets.
!Program to demo external style sheet>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

/*external style sheet named as styls.css*/


body
{
background-color: powderblue;
}
h1
{
color: blue;
font-family: verdana;
font-size: 300%;
}
p
{
Krishnaveni Degree College :: Narasaraopet Page No. : 10
Web Interface Designing Technologies UNIT: I
color: red;
font-family: courier;
font-size: 160%;
}

Colours: The style attribute which uses color values are


1. Background-color
2. Color
3. bordercolor
The Color values in style properties can be
1. color names
2. RGB (Red-Green-Blue) values
3. hsl(h,s%,l%)
Color Names: A color can be specified by using a color name. Syntax for specifying
colorname is
<tag style=”property:colorname”>text</tag>
Ex: <p style=”background-color:colorname;color:colorname”>Hello</p>
Commonly used color names are
1. Red
2. Green
3. Blue
4. Orange
5. OrangeRed
6. LightGreen
RGB values: The RGB values for creating colors can be specified in three
notations. They are
#rrggbb: #rrggbb is a six hexadecimal digits notation which uses 24-bit color.
In this first two digits specify red, middle two specify green, and last two specify
blue values respectively(e.g. #0ace9f).
<tag style=”property:colorname”>text</tag>
Ex: <p style=”background-color:#3399aa;color: #0ace9f”>Hello</p>
#rgb: #rgb is a three hexadecimal digits notation which uses 12-bit color. In this
first digit specify red, middle digit specify green, and last digit specify blue values
respectively(e.g. #0a9f).
<tag style=”property: #rgb”>text</tag>
Ex: <p style=”background-color:#39a;color: #ae9”>Hello</p>
rgb(r , g , b ): rgb(r , g , b ) function uses three arguments in decimal notation. In
this the first argument specifies red value, middle value specifies green value
and the last argument specifies blue value. The values of the argument are base-
10 integers between 0 and 255.
<tag style=”property: rgb(r , g , b )”>text</tag>
Krishnaveni Degree College :: Narasaraopet Page No. : 11
Web Interface Designing Technologies UNIT: I
Ex:<p style=”background-color: rgb(200,100,50 );color: rgb(50,100,200)Hello</p>
HSL values: The HSL values for creating colors can be specified using hsl(). This
function uses three arguments to specify hue, saturation, and lightness. Hue is a
degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value. 0% means a shade of gray, and 100% is the full
color. Lightness is also a percentage value. 0% is black, and 100% is white.
<tag style=”property: hsl(h, s% ,l% )”>text</tag>
Ex:
<p style=”background-color:hsl(200,75%,25%); color:hsl(300,50%,75%)”> Hello
</tag>

HTML formatting: One of the most important design aspect of a website is its
readability. The textual content of the site must be easily readable and the
designer's understanding of what factors enhance readability is absolutely
essential to Web development.HTML contains several elements for defining text
with a special meaning.
Bold text<b>: The HTML <b> element defines bold text, without any extra
importance.
Important text<strong>: The HTML <strong> element defines text with strong
importance. The content inside is typically displayed in bold. <i> - Italic text
Italix text<i>: The <i> tag is often used to indicate a technical term, a phrase
from another language, a thought, a ship name, etc.
Emphasized text<em>: The HTML <em> element defines emphasized text. The
content inside is typically displayed in italic.
Marked text<mark>: The HTML <mark> element defines text that should be
marked or highlighted Smaller text <small>:
Deleted text<del>: The HTML <del> element defines text that has been deleted
from a document. Browsers will usually strike a line through deleted text.
Inserted text<ins>: The HTML <ins> element defines a text that has been
inserted into a document. Browsers will usually underline inserted text.
Subscript text<sub>: The HTML <sub> element defines subscript text. Subscript
text appears half a character below the normal line, and is sometimes rendered
in a smaller font. Subscript text can be used for chemical formulas, like H2O.
Superscript text<sup>: The HTML <sup> element defines superscript text.
Superscript text appears half a character above the normal line, and is
sometimes rendered in a smaller font. Superscript text can be used for formulas,
like X2.
<!--Html Program to Text Formatting-->
<html>

Krishnaveni Degree College :: Narasaraopet Page No. : 12


Web Interface Designing Technologies UNIT: I
<head>
<title>Text Formatting</title>
</head>
<body>
<b>Defines bold text</b><br/>
<em>Defines emphasized text</em> <br/>
<i>Defines a part of text in an alternate voice or mood</i><br/>
<small> Defines smaller text</small><br/>
<strong>Defines important text</strong><br/>
<sub>Defines subscripted text</sub><br/>
<sup>Defines superscripted text</sup><br/>
<ins>Defines inserted text</ins><br/>
<del>Defines deleted text</del><br/>
<mark>Defines marked/highlighted text</mark><br/>
</body>
<html>
Quotations: The Quotation elements in HTML are used to insert quoted texts in
a web page, that is portion of texts different from the normal texts in the web
page. Commonly used quotation elements in HTML are:
S.No. Tag Description
1. <abbr> Defines an abbreviation or acronym
2. <address> Defines contact information for the
author/owner of a document
3. <bdo> Defines the text direction
4. <blockquote> Defines a section that is quoted from
another source
5. <cite> Defines the title of a work
6. <q> Defines a short inline quotation

<abbr> element: The <abbr> element is used to define a text as an acronym or


abbreviations. The title attribute can be used to show the full version of the
abbreviation/acronym when you hover When the mouse over the <abbr>
element the full version of the abbreviation/acronym is displayed. It has both
opening and closing tags. This is useful for browsers and search engines.
<address> element: Using the <address> element, we can define an address in
a webpage and the text put inside the address tag will be emphasized. Usually
line break is added before and after the address tag and content inside this tag
is generally renders in italic format. It also has both opening and closing tags.
Krishnaveni Degree College :: Narasaraopet Page No. : 13
Web Interface Designing Technologies UNIT: I
<bdo> element: The <bdo> element is used to define a bidirectional override
which means that, the text written from right to left or left to right. It has both
opening and closing tags. It is used to over-ride the current text direction. It
takes an attribute “rtl” to display the text from right to left.
<blockquote> element: The <blockquote> element is also used for quotations
in a different way. Instead of putting the text in quotes, it adds space before the
start of the sentence, with this tag we can also indent the start of the new
paragraph. It has both opening and closing tags.
<cite> element: This element is used to define a title of a work and emphasizes
a text.
<q> element: The <q> element is used to set a set of text inside the quotation
marks. It has both opening and closing tags.
Example:
<!--Html Program to demo the usage of Quotations-->
<html>
<head>
<title>Quotations</title>
</head>
<body>
<p>The<abbr title="World Health Organization">WHO
</abbr> was founded in 1948.</p>
<address>
Written by Sai<br>
Visit us at:<br>
kvdcnrt.com<br>
Narasaraopet<br>
</address>
<bdo dir="rtl">This text will be written from right to left</bdo>
<p>Here is a quote from KVDC website:</p>
<blockquote cite="http://www.kvdcnrt.com">
“Education is a shared commitment between dedicated teachers, motivated
students and enthusiastic parents with high expectations”
</blockquote>
<p><cite> KVDC</cite> Established in 2005.</p>
<p>KVDC goal is to:<q>get a job along with degree to every student.</q></p>
</body>
</html>

Krishnaveni Degree College :: Narasaraopet Page No. : 14


Web Interface Designing Technologies UNIT: I
Comments: Comments in an HTML page are given as <!-- a sample comment -
->. Text and HTML elements inside a comment tag are ignored by browsers. Be
sure not to put two consecutive dashes (--) inside a comment. It is good practice
to include comments in HTML pages as notes, reminders, or documentation to
make maintenance easier.

Images: The <img> tag is used to embed an image in an HTML page. Images
are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image. The <img>
tag has two required attributes. They are
1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image, if the image for some reason
cannot be displayed
<!--Program to demo image tag-->
<html>
<head>
<title >Image </title>
</head>
<body>
<img src="file:///E:/htmlprac/build.jpeg"
alt=”no image” width="200" height="200">
</body>
</html>

Tables: Tables display information in a clear and concise fashion. The block
element table organizes and presents information in neatly aligned rows and
columns. It is often used to present tabular data.
Table Basics: A simple table simply has a number of rows, each row containing
the same number of columns. The table is enclosed in between<table> and
</table>. The common tags used in table are
<caption> : The <caption> tag is optional. It is used to display the heading for
the table.
<th> : The <th> tag is used to display the heading for the column or row.
<tr> : The <tr> tag is used to write rows in the table.
<td> : The <td> tag is used to write data in the cell. The <td> tag is embedded
in <tr> tag.
Table Formatting: The common attributes used in table are

Krishnaveni Degree College :: Narasaraopet Page No. : 15


Web Interface Designing Technologies UNIT: I
Border: To specify the border for the table. Default value for the border is 0. It
can have values such as 1, 2….
Cellspacing: Cellspacing specifies the space between cells (i.e) it defines the
whitespace between the edges of the adjacent cells. It can have values such as
1, 2….
Cellpadding: Cellpadding specifies the space between the border of a table cell
and its contents (i.e) it defines the whitespace between the cell edge and the
content of the cell. It can have values such as 1, 2….
<!-- Html Program to demo Table attributes -->
<html>
<head>
<title>Table attributes</title>
</head>
<body>
<table border="12" bordercolor="red" cellspacing="4" cellpadding="8" >
<tr>
<th>Rollno</th>
<th>Name</th>
<th>Group</th>
</tr>
<tr>
<td>101</td>
<td>Sai</td>
<td>MPCS</td>

</tr>
<tr>
<td>102</td>
<td>Gita</td>
<td>MSCS</td>
</tr>
<tr>
<td>103</td>
<td>Kiran</td>
<td>MECS</td>
</tr>
</table>
</body>
Krishnaveni Degree College :: Narasaraopet Page No. : 16
Web Interface Designing Technologies UNIT: I
<html>
Table Positioning: A table is normally positioned left adjusted by itself on the
page. To center a table horizontally on the page use the margin style properties
(Ex: CenteredTable):
<table style="margin-left: auto; margin-right: auto">
Table Width and Height: The width and height of a table is automatically
computed to accommodate the contents in the table cells. The width of the table
can be specified using the width attribute of table. The attribute width="wd"
speciifies the overall width of the table in pixels (width="400")or as a percentage
(width="100%") of the available horizontal space. Use a percentage rather than
a fixed length whenever possible. The height of the table can be specified using
the height attribute of table. The attribute height="ht" speciifies the overall
height of the table in pixels or as a percentage of the available vertical space.
Use a percentage rather than a fixed length whenever possible.
Row and Column Spans: A table cell can span multiple rows and/or columns. Use
the rowspan attribute to specify the number of rows a table cell spans. Use the
colspan attribute to specify the number of columns a table cell spans.
<!-- Html Program to demo Column Span -->
<html>
<head>
<title>Column Span</title>
</head>
<body>
<table border="2" width="60%" >
<tr align="center" >
<td colspan = "2" style="width:10%">10%</td>
<td style="width:30%">20%</td>
</tr>
<tr align="center" >
<td style="width:10%">10%</td>
<td style="width:30%">20%</td>
<td style="width:40%">30%</td>
</tr>
</table>
</body>
<html>

<!-- Html Program to demo Row Span -->


Krishnaveni Degree College :: Narasaraopet Page No. : 17
Web Interface Designing Technologies UNIT: I
<html>
<head>
<title>Row
Span</title>
</head>
<body>
<table border="2" width="60%" >
<caption> Row Span</caption>
<tr align="center" >
<td style="width:30%">20%</td>
<td rowspan = "2" style="width:10%">10%</td>
</tr>
<tr align="center" >
<td style="width:40%">30%</td>
</tr>
</table>
</body>
<html>
Table Nesting: Placing one table within another table is called table nesting.
<!-- Html Program to demo Table Nesting -->
<html>
<head>
<title>Table Nesting</title>
</head>
<body>
<table border="2" bordercolor="green">
<tr>
<td>Table 1</td>
<td>
<table border="2" bordercolor="blue">
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
<tr>
<td> Table 2 </td>
<td>Table 2</td>
</tr>
Krishnaveni Degree College :: Narasaraopet Page No. : 18
Web Interface Designing Technologies UNIT: I
</table>
</td>
</tr>
<tr>
<td> Table 1 </td>
<td> Table 1. </td>
</tr>
</table>
</body>
<html>

Lists: In addition to headings and paragraphs, lists can be used to organize and
present information for easy reading. Three block-level list elements are
available. They are
Bullet list: The ul element provides an unordered list where the ordering of the
items is unimportant. A ul is usually presented as a set of bullet items.
Ordered list: The ol element offers an numbered list where the ordering of the
items is important. An ol is typically displayed as a sequence of enumerated
items.
Definition list: The dl element is handy for a definition list where each term
(<dt>) is given a definition or description. <!--Html Program to demo
unordered, ordered and definition lists-->
<html>
<head>
<title>Lists</title>
</head>
<body>
<ul type="square">
<li>Fruits</li>
<li>Cereal</li>
<li>Meats</li>
</ul>
<ol type="I">
<li>Fruits</li>
<li>Cereal</li>
<li>Meats</li>
</ol>
<dl>
Krishnaveni Degree College :: Narasaraopet Page No. : 19
Web Interface Designing Technologies UNIT: I
<dt>Fruits</dt> <dd>Mango is an example of fruit</dd>
<dt>Cereal</dt> <dd>Cereals are example of Pulses</dd>
</dl>
</body>
<html>

Blocks and Classes: Styles can be used to change the appearance of individual
elements but often want to change the way that every instance of an element
appears. A class is a definition of a set of styles which can be applied as required.
Classes can be applied to a single type of element, or may be anonymous and
hence applicable to any element. The following code shows the difference
between the two types:
h1 {
color: red;
border: thin groove;
}
h2.some {
color: green;
margin-left: 60%;
}
.anyelement {
text-align: right;
color: purple;
}
The style defined for h1 applies to all h1 elements in the document. The h2 style
is only applied when it is explicitly called by using the below statement.
<h2 class="some">...</h2>
The .anyelement style can be applied wherever it is needed:
<h2 class=anyelement>...</h2>
<p class=anyelement>...</p>
Divisions: An elements for which same style can be applied are inserted <div>.
</div> pair of tags. Any formatting that needs adding is placed inside the div
tag thus:
<div class="anyelement">
<p>. . . < / p>
<h2>. . . </h2>
<hr>
Krishnaveni Degree College :: Narasaraopet Page No. : 20
Web Interface Designing Technologies UNIT: I
</div>
A division is now a logical part of the document and treat divisions as individual
items.
Spans: A simple and efficient model to format a part of the element is to use
span tag. Spans are used as follows:
<p><span class="anyelement">The</span> span tag
The div and span tags have identical parameters but the effects of those
parameters are altered by the context in which they are used.

Each can have an id so that it can be identified by other elements on the page.
This is not generally useful on a static page of text but it is useful in the context
of Dynamic HTML. Styles are applied to span and div through either the class or
style parameters. A set of styles can be defined within the tag and applied
though style while a predefinedclass is applied through class.

HTML CSS: A Web page has two important aspects, document structure and
presentation style. Cascading Style Sheets (CSS) is a language to specify the
presentation style. CSS provides the means to implement that well-designed
style.

CSS is a language supported by major browsers, for specifying presentation


styles for HTML. CSS, or simply style sheets, will supply the capability of
specifying presentation styles and associating them with HTML elements in
multiple ways. CSS brings unprecedented power and control over presentation
styles. With CSS, display styles are suggested to browsers, print formats to
printers, and device dependent styles for other media such as page readers for
the vision impaired.
Components of CSS: CSS consists of the following components. They are
1. Style declarations
2. Selectors
3. Inheritance and cascading rules
Style declarations: A style declarations is in given in the form
property : value
Krishnaveni Degree College :: Narasaraopet Page No. : 21
Web Interface Designing Technologies UNIT: I
There are many properties (over 50) for the various presentational aspects of
HTML elements, including font properties, color and background properties, text
properties etc. Browsers provide default presentation styles to all HTML
elements. By associating style declarations the presentation style of an entire
page and how any element in it is displayed can be controlled.
Selectors: CSS defines selectors to give you multiple ways to indicate which style
properties are assigned to which HTML elements. Assigning style properties by
selectors is in addition to defining the style attributes for HTML elements.
With CSS, style rules can be defined and attach them to HTML elements, thus
controlling their presentation style. Hence, each Web page may have an HTML
file and a set of style rules. A style rule consists of a selector and one or more
style declarations separated by semicolons (;). Therefore, the general syntax for
a style rule is

selector
{ property1 : value1 ;
property2 : value2 ;
...
propertyn : valuen
}
Figure : Structure of A Style Rule
Inheritance and cascading rules: CSS defines how values for properties assigned
to an HTML element are inherited by its child elements. For example, because
of inheritance, font and background settings for body can affect the entire HTML
document. Also because of no inheritance, margin, padding and border
declarations do not affect child elements. CSS documents the inheritance status
of each style property. When conflicting style declarations happen on a single
HTML element, cascading rules govern which declaration will apply.
Style Sheets: A style sheet is a file with the .css as suffix that contains one or
more style rules. In a style sheet, comments may be given between /* and */. A
style sheet is just a set of style rules.
For example, the rule
h1 { font-size: large }
specfies the font size for all first-level headers to be large, a CSS predefined size.
And the two rules
h2 { font-size: medium }

Krishnaveni Degree College :: Narasaraopet Page No. : 22


Web Interface Designing Technologies UNIT: I
h3 { font-size: small }
give the font size for second and third level headers. These rules only affect the
font size,
the headers will still be bold because that is their default font-weight.
To make these three headers dark blue, the rules can become
h1 { font-size: large; color: #009 }
h2 { font-size: medium; color: #009 }
h3 { font-size: small; color: #009 }
A well-designed site should use a consistent set of font family, size, and line
height settings for all its pages. CSS rules can help the implementation of this
immensely.
Attaching A Style Sheet: To attach the style rules to a Web page place them in a
file with suffix .css say, and put the following link element inside the head
element of the HTML code.
<link rel="stylesheet" type="text/css" href="myfile.css" />

This external file approach allows to easily attach the same style sheet to
multiple pages of your website. The same style sheets can be used at other sites
by giving a full URL for the href. The above Figure shows the relation between a
Web page and its style sheet.
A .html file may have one or more link rel="stylesheet" elements. At the
beginning of a style sheet file (before all style rules), the other style files can be
included with the statement
@import url("target-sheet-url");
Instead of a separate file, the rules can be included directly in a Web page
via the style element
<style type="text/css">
body { font-size: small }

Krishnaveni Degree College :: Narasaraopet Page No. : 23


Web Interface Designing Technologies UNIT: I
h1 { font-size: large; color: #009 }
h2 { font-size: medium; color: #009 }
h3 { color: #009 }
</style>
which is also placed inside the head element. This is the style-element approach.
The external file approach has advantages. It makes changing the style that
affects multiple pages easy. And, a browser needs to download the style sheet
only once for all the pages that uses it, making your site faster to load.

HTML frames: Normally a browser window displays one Web page. The
frameset element, used instead of body, allows to divide a window into
rectangular regions, called frames, and display a different page in each frame.
Frequently, frames are used to divide a window into fixed-display and variable-
content regions. Frames can give a page a “broken-up" look or a monotonous
look. Use the rows and cols attributes of <frameset> to subdivide the browser
window into frames.
Attributes of Frameset tag: The attributes commonly used for frameset tag are
cols: The cols attribute is used to create vertical frames in web browser. This
attribute is basically used to define the no of columns and its size inside the
frameset tag. The size or width of the column is set in the frameset in the
following ways:
1. Use absolute value in pixel
Example:
<frameset cols = "300, 400, 300">
2. Use percentage value
Example:
<frameset cols = "30%, 40%, 30%">
3. Use wild card values:
Example:
<frameset cols = "30%, *, 30%">
In the above example * will take the remaining percentage for
creating vertical frame.
rows: The rows attribute is used to create horizontal frames in web browser. This
attribute is used to define no of rows and its size inside the frameset tag. The
size of rows or height of each row use the following ways:
1. Use absolute value in pixel
Example:
<frameset rows = "300, 400, 300">
Krishnaveni Degree College :: Narasaraopet Page No. : 24
Web Interface Designing Technologies UNIT: I
2. Use percentage value
Example:
<frameset rows = "30%, 40%, 30%">
3. Use wild card values
Example:
<frameset rows = "30%, *, 30%">
In the above example * will take the remaining percentage for creating
horizontal frame.
border: This attribute of frameset tag defines the width of border of each frames
in pixels. Zero value is used for no border.
Example:
<frameset border="4" frameset>
frameborder: This attribute of frameset tag is used to specify whether the three-
dimensional border should be displayed between the frames or not. For this use
two values 0 and 1, where 0 defines for no border and value 1 signifies for yes
there will be border.
framespacing: This attribute of frameset tag is used to specify the amount of
spacing between the frames in a frameset. This can take any integer value as an
parameter which basically denotes the value in pixel.
Example:
<framespacing="20">
It means there will be 20 pixel spacing between the frames
Attributes of Frame Tag: The attributes commonly used for frame tag are
name: This attribute is used to give names to the frame. It differentiate one frame
from another. It is also used to indicate which frame a document should loaded
into.
Example:
<frame name = "top" src = "build.jpeg" />
<frame name = "main" src = " fontatr.html " />
<frame name = "bottom" src = " fontatr.html " />
Here we use three frames with names as left center and right.
src: This attribute in frame tag is basically used to define the source file that
should be loaded into the frame. The value of src can be any url.
Example:
<frame name = "top" src = "e:/htmlprac/build.jpeg" />
In the above example name of frame is left and source file will be loaded from
“e:/htmlprac/build.jpeg” in frame.

Krishnaveni Degree College :: Narasaraopet Page No. : 25


Web Interface Designing Technologies UNIT: I
marginwidth: This attribute in frame tag is used to specify width of the spaces in
pixels between the border and contents of left and right frame.
Example:
<frame marginwidth="20">
marginheight: This attribute in frame tag is used to specify height of the spaces
in pixels between the border and contents of top and bottom frame.
Example:
<frame marginheight="20">
scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute
in frame tag. This is basically used to control the appearance of scrollbar. The
value of this attribute can be yes, no, auto. Where the value no denotes there
will be no appearance of scroll bar.
Example:
<frame scrollbar="no">
Advantages:
1. It allows the user to view multiple documents within a single Web page.
2. It load pages from different servers in a single frameset.
Disadvantages: Due to some of its disadvantage it is rarely used in web browser.
1. Frames can make the production of website complicated.
2. A user is unable to bookmark any of the Web pages viewed within a frame.
3. The browser’s back button might not work as the user hopes.
4. The use of too many frames can put a high workload on the server.
5. Many old web browser doesn’t support frames.

File paths: A file path describes the location of a file in a web site's folder
structure. File paths are used when linking to external files, like:
1. Web pages
2. Images
3. Style sheets
4. JavaScripts
Absolute File Paths: An absolute file path is the full URL to a file.
Example
<img src="https://www.kvdcnrt.com/images/picture.jpg" alt="Mountain">
The <img> tag uses the filepath in the src attribute to identify the location of
the external file.
Relative File Paths: A relative file path points to a file relative to the current page.
Example
<img src="/images/picture.jpg" alt="Mountain">
Krishnaveni Degree College :: Narasaraopet Page No. : 26
Web Interface Designing Technologies UNIT: I
In the following example, the file path points to a file in the images folder
Best Practice: It is best practice to use relative file paths (if possible). When using
relative file paths, the web pages will not be bound to current base URL. All links
will work on your own computer as well as on your current public domain and
your future public domains.

Layout: Websites often display content in multiple columns. HTML has several
elements that define the different parts of a web page. They are
<header> - Defines a header for a document or a
section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-
contained content
<aside> - Defines content aside from the content
(like a sidebar)
<footer> - Defines a footer for a document or a
section
<details> - Defines additional details that the
user can open and close on demand
<summary> - Defines a heading for the <details>
element
Layout Techniques: There are four different techniques to create multicolumn
layouts. Each technique has its pros and cons. They are
1. CSS framework
2. CSS float property
3. CSS flexbox
4. CSS grid
CSS framework: CSS framework comprises several CSS stylesheets ready for use
by web developers and designers. With a CSS framework, the user has a
completed CSS stylesheet, and they only have to code the HTML with accurate
classes, structure, and IDs to set up a web page. The framework already has
classes built-in for common website elements – footer, slider, navigation bar,
etc.
Advantages:
1. Speeds up your development
2. Enforces good web design habits
3. Provides symmetrical layouts
Krishnaveni Degree College :: Narasaraopet Page No. : 27
Web Interface Designing Technologies UNIT: I
Disadvantages:
1. Restricts your freedom
2. Adds extra code
CSS float property: The float property specifies whether an element should float
to the left, right, or not at all. Absolutely positioned elements ignore the float
property. Elements next to a floating element will flow around it.
Advantages:
1. Float is easy to learn
Disadvantages:
1. Floating elements are tied to the document flow
CSS flexbox: CSS flexbox layout ensures that elements behave predictably when
the page layout must accommodate different screen sizes and different display
devices.
Advantages:
1. Ability to compose complex layout
2. Work well with existing HTML layout.
3. Easy to understand.
Disadvantages:
1. Older browsers will not support
2. Different concepts need to learn
CSS Grid Layout: The CSS Grid Layout Module offers a grid-based layout system,
with rows and columns, making it easier to design web pages without having to
use floats and positioning.
Advantages:
1. Low cost
2. Speed of development
3. Simple to use
Disadvantages:
1. Plain Design
2. Offers limited browsing

Symbols: Entities are used to display reserved characters in HTML and symbols
that are not present on the keyboard. Some characters such as less than (<) or
greater than (>) signs are reserved in HTML. An HTML entity is a piece of text
("string") that begins with an ampersand ( & ) and ends with a semicolon ( ; ). If
these symbols are in the text then &lt; and &gt; are to be used. To display a
less than sign (<) we can also use &#60;. A commonly used entity in HTML is the
non-breaking space is &nbsp;. This non-breaking space is used to create a space
Krishnaveni Degree College :: Narasaraopet Page No. : 28
Web Interface Designing Technologies UNIT: I
between the words in a line. Symbols that are not present on the keyboard can
also be added by using entities. They are
Sailaja --- 9348133355
Char Entity Description
< &lt; LESS THAN
> &gt; GREATER THAN
∀ &forall; FOR ALL
∃ &exist; THERE EXISTS
∈ &isin; ELEMENT OF
∉ &notin; NOT AN ELEMENT OF
∏ &prod; N-ARY PRODUCT
Α &Alpha; GREEK CAPITAL LETTER ALPHA
Β &Beta; GREEK CAPITAL LETTER BETA
Γ &Gamma; GREEK CAPITAL LETTER GAMMA

HTML responsive: Responsive web design is about creating web pages that
look good on all devices. A responsive web design will automatically adjust for
different screen sizes. It uses HTML and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on all devices such as desktops,
tablets, and phones.
Setting The Viewport: To create a responsive website, add the following <meta>
tag to all the web pages.
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will set the viewport of the page, which will give the browser instructions
on how to control the page's dimensions and scaling.
Responsive Images: Responsive images are images that scale nicely to fit any
browser size. It can be done in two ways. They are
1. Using the width Property: If the CSS width property is set to 100%, the image
will be responsive and scale up and down.
Example: <img src="img_girl.jpg" style="width:100%;">
2. Using the max-width Property: If the max-width property is set to 100%, the
image will scale down if it has to, but never scale up to be larger than its
original size.
Example: <img src="img_girl.jpg" style="max-width:100%;height:auto;">
3. Using Different Images Depending on Browser Width: The HTML <picture>
element allows you to define different images for different browser window
sizes.
Example:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
Krishnaveni Degree College :: Narasaraopet Page No. : 29
Web Interface Designing Technologies UNIT: I
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Responsive Text Size: The text size can be set with a "vw" unit, which means the
"viewport width". That way the text size will follow the size of the browser
window.
Example: <h1 style="font-size:10vw">Hello World</h1>

Krishnaveni Degree College :: Narasaraopet Page No. : 30

You might also like