Scribd
Upload
10 views42 pages

HTML CSS Web-Technologies Notes

Uploaded by

23eg105j50
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
10 views42 pages

HTML CSS Web-Technologies Notes

Uploaded by

23eg105j50
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

Web Technologies 10

LEARNING MATERIAL

 INTRODUCTION TO HTML:

 HTML stands for Hyper Text Markup Language.

 HTML is a method of describing the format of web documents

 It is used to display the document in the web browsers.

 HTML was developed by Tim Berners-Lee. HTML standards are created by a


group of interested organizations called W3C (World Wide Web consortium).

HTML Tags:

o In HTML, formatting is specified by using tags.

o A tag is a format name surrounded by angle brackets.

o End tags which switch a format off also contain a forward slash.

Points to be remembered for HTML tags:


 They are not case sensitive i.e., <head>, <HEAD> and <Head> is equivalent.
 If a browser does not understand a tag it will usually ignore it.
 White spaces, tabs and newlines are ignored by the browser.

STRUCTURE OF A HTML DOCUMENT:

 HTML document consists of 2 sections.


1. Head Section
2. Body Section
 The basic document is shown below.
<html>
<head>
<! -- Head Section -->
</head>
<body>
<! -- Body Section -->
</body>
</html>

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 11

HTML ELEMENTS:
An HTML element is everything from the start tag to the end tag
<p> This is a Paragraph </p>

Start Tag Element Content End Tag

HTML ATTRIBUTES:
HTML Elements can have Attributes. Attribute provide additional information
about an element and are always specified in the start tag.
Syntax: <tag attributename=”value” > Content </tag>
Sample.html
<html>
<head>
<title> Basic HTML document </title>
</head>
<body>
<h1> Welcome to the world of Web Technologies</h1>
<p> A sample HTML program </p>
</body>
</html>

Output:

BASIC HTML TAGS:

1. <html> :
 The <html> tag tells the browser that this is an HTML document.
 The <html> tag represents the root of an HTML document.
 The <html> tag is the container for all other HTML elements .

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 12

2. <title>:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results
3. <body>:
 The <body> tag defines the document's body.
 The <body> element contains all the contents of an HTML document, such as
text, hyperlinks, images, tables, lists, etc.

Attribute Value Meaning


background URL Specifies a background image for a document
bgcolor Color Specifies the background color of a document
text Color Specifies the color of the text in a document

4. <!- - - - > Comment Tag:


 The comment tag is used to insert comments in the source code. Comments
are not displayed in the browsers.
5. Heading Tags:
 There are 6 heading tags.
 The <h1> to <h6> tags are used to define HTML headings.
 <h1> defines the most important heading. <h6> defines the least important
heading.
Attribute Value Meaning
Left
Align Right Specifies the alignment of a heading
Center

Example: Headings.html
<html>
<head>
<title>Heading Tage</title>
</head>
<body bgcolor=yellow text=blue>
<! - - This is a Comment - - >
<h1 align="left">This is Heading 1</h1>
<h2 align="center">This is Heading 2</h2>
<h3 align="right">This is Heading 3</h3>
<h4>This is Heading 4</h4>
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 13

<h5>This is Heading 5</h5>


<h6 align="right">This is Heading 6</h6>
</body>
</html>
Output:

6. <p>: paragraph Tag


 Browser automatically add some space before and after each <p> element

Attribute Value Meaning


Align Left, Right, Center Specifies the alignment of text
Justify within a paragraph

7. <a>: Anchor Tag


 The <a> tag defines a hyperlink, which is used to link from one page to
another.
 The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Attribute Value Meaning
href URL Specifies the destination of the link
_blank
_self
target _parent Specifies where to open the linked document
_top
framename

Example: Link.html
<html>
<body>
<a href="http://www.google.com" target="_self"> GOOGLE</a>
<br>
<a href="http://www.yahoo.com" target="_blank">YAHOO</a>
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 14

<br>
<a href="Headings.html" target="_parent"> My Page</a>
</body>
</html>
Output:

8. <font>:
The <font> tag specifies the font face, font size, and color of text.
Attribute Value Meaning
Color rgb(x,x,x) Specifies the color of text
#xxxxxx
colorname
Face font_family Specifies the font of text
Size Number Specifies size of text

9. <link>:
 The <link> tag defines a link between a document and an external resource.
 The <link> tag is used to link to external style sheets.

Attribute Value Meaning


Href URL Specifies the location of the linked document
_blank
_self Specifies where the linked document is to be
Target _parent
loaded
_top
framename
Specifies the relationship between current
Rel Stylesheet
document and the linked document
10. <div>:
 The <div> tag defines a division or a section in an HTML document.
 The <div> tag is used to group block-elements to format them with CSS.
Attribute Value Meaning
Align Left, Right, Center Specifies the alignment of a heading
Justify

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 15

11. <br>:
 The <br> tag inserts a single line break.
 The <br> tag is an empty tag which means that it has no end tag.

12. Various Text Formatting Tags:


The following HTML tags are used for format the appearance of the text on your
web page.
(a). Headings – <h1> to <h6>
(b). Bold - <b> </b> or <strong> </strong>
The text in between the tags will be displayed in bold
(c). Italic - <i> </i>
Renders the text in italics i.e displays the text at a slight angle.
(d). Underline - <u> </u>
Underlines the text written in between the tags
(e). Strike out - <strike> </strike>
Defines strike through text, puts a line right through the center of the text,
crossing it out.
(f).Preformatted text - <pre> </pre>
Text in <pre> element is displayed in fixed width font, and it preserves both
spaces and line breaks.
(g). Typewriter Text - <tt> </tt>
The text appears to have been typed by a type writer\
(h). <big> </big> - Defines bigger text
(i). <small> </small> - Defines smaller text
(j). <sub> </sub> - Defines a subscript text. Subscript that appears half a
character below the baseline.
(k). <sup> </sup> - Defines a superscript text. Superscript that appears half a
character above the baseline.
(l). <center></center> - It align the text to the center of the page

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 16

Example: TextFormattingTags.html
<html>
<body>
<h1>This is Heading 1</h1>
<b>This text is in bold</b><br>
<i>This text is in Italics</i><br>
<u>This text is in Underlined</u><br>
<strike>This text is Striked</strike><br>
<em>This text is Emphasized</em><br>
<tt>This text is Type Writer Text</tt><br>
<big>This text is Bigger</big><br>
<small>This text is Smaller</small><br>
H<sub>2</sub>O<br>
(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup><br>
<center>This Text is aligned to Center</center><br>
</body>
</html>

Output:

13. <marquee>:
It is used for Scrolling images and text in the web page
Attribute Value Meaning

Scroll, slide
behavior Defines the type of scrolling.
alternate
rgb(x,x,x)
Deprecated-Defines the direction of scrolling the
bgcolor #xxxxxx
content.
colorname
Up, down,
direction Defines the direction of scrolling the content.
left, right

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 17

Specifies how many times to loop. The default


loop Number value is INFINITE, which means that the
marquee loops endlessly.
scrolldelay Seconds Defines how long to delay between each jump.
scrollamount number Defines how how far to jump.

 WORKING WITH LISTS:


 Lists are used to collect a group of items.
 There are 3 types of Lists in HTML
1. Ordered List
2. Unordered List
3. Definition List

1. ORDERED LIST:
 These are those in which the items are arranged in some specific order.
 This list can be numerical or alphabetic.
 <ol> tag: The <ol> tag defines an ordered list.

Attributes :
Name Value Meaning
1
A
Specifies the kind of marker to use
type a
in the list
I
i
Specifies the start value of an
start number
ordered list
Specifies that the list order should
reversed reversed
be descending

 <li> tag: defines a list item.


 Example:
<html>
<body>
<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 18

<ol type="A">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
<ol start=3 type="i">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
</body>
</html>
Output:

2. UNORDERED LIST:
 The Unordered lists are those in which the items are not arranged in any
order.
 This defines a Bulleted List.
 <ul> tag: defines an unordered (bulleted) list.
Attributes:
Name Value Meaning
Disc
Specifies the kind of marker to use in
Type Square
the list
Circle

 <li> tag: defines a list item.


 Example:
<html>
<body>
<ul>
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 19

<li>Red</li>
<li>Black</li>
<li>White</li>
</ul>
<ul type="circle">
<li>Red</li>
<li>Black</li>
<li>White</li>
</ul>
<ul type="square">
<li>Red</li>
<li>Black</li>
<li>White</li>
</ul>
</body>
</html>
Output:

3. DEFINITION LIST
 These are lists of items that have 2 parts, a term to be defined and the
definition.
 This create lists similar to a dictionary.
 <dl> tag: defines a definition list. It is used in conjunction with <dt> and
<dd>
 <dt> tag: defines a term/name in a definition list.
 <dd> tag: used to describe a term/name in a definition list.
 Example:
<html>
<body>
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 20

<dl>
<dt>HTML:</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS:</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>

Output:

 TABLES:
 For Systematic arrangement of information we often require Tabular
Structure.
 The biggest advantage of using tables on the web page is that the information
gets arranged systematically.
 The <table> tag defines an HTML table.
 An HTML table consists of the <table> element and one or more <tr>, <th>,
and<td> elements.
 The <tr> element defines a table row, the <th> element defines a table header,
and the <td> element defines a table cell.
 An HTML table has two kinds of cells:
o Header cells - contains header information (created with the <th>
element)
o Standard cells - contains data (created with the <td> element)
 The text in <th> elements are bold and centered by default.

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 21

 The text in <td> elements are regular and left-aligned by default.


 Attributes of <table> tag:

Name Value Meaning


Left
Specifies the alignment of a table
align Right
according to surrounding text
center
rgb(x,x,x)
Specifies the background color
bgcolor #xxxxxx
for a table
colorname
Specifies whether or not the
0
border table is being used for layout
1
purposes
Specifies the space between the
cellpadding pixels
cell wall and the cell content
cellspacing pixels Specifies the space between cells
Pixels
Width Specifies the width of a table
%

 Attributes of <tr> tag:

Name Value Meaning


Left
Right
align Aligns the content in a table row
Center
justify
rgb(x,x,x)
Specifies a background color for a
bgcolor #xxxxxx
table row
colorname
top
middle Vertical aligns the content in a
valign
bottom table row
baseline

 Attributes of <th> and <td> tags:


Name Value Meaning
Left, Right
align Center Aligns the content in a cell
justify
rgb(x,x,x)
bgcolor #xxxxxx Aligns the content in a cell
colorname
Specifies the number of rows a
rowspan number
cell should span
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 22

Specifies the number of rows a


colspan number
cell should span
Top, middle
valign bottom Vertical aligns the content in a cell
baseline
Pixels
Width Specifies the width of a cell
%
 Example:
<html>
<body>
<table bgcolor="yellow" border="1" cellspacing="0" cellpadding="10"
bordercolor="green" align="center">
<tr>
<th rowspan="2">Header1</th>
<th colspan="3">Header2</th>

</tr>
<tr>
<td>r1,c1</td>
<td>r1,c2</td>
<td>r1,c3</td>

</tr>
<tr>
<td colspan="2">r2,c1</td>
<td>r2,c2</td>
<td>r2,c3</td>
</tr>
<tr>
<td>r3,c1</td>
<td>r3,c2</td>
<td colspan="2">
<table border="1" bgcolor="cyan" cellspacing="0"
bordercolor="red">
<tr>
<th colspan="2">Nested Table</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 23

</table>
</td>
</tr>
</table>
</body>
</html>
Output:

 FORMS:
 Form is a typical layout on the web page by which a user can interact with the
web page.
 The <form> tag is used to create an HTML form for user input.
 The <form> element can contain one or more of the following form elements:
 <input> <textarea> <select> <option> <label>
 Attributes of <form> tag:

Name Value Meaning


Specifies where to send the form-
action URL
data when a form is submitted
get Specifies the HTTP method to use
method
post when sending form-data
name text Specifies the name of a form
_blank
Specifies where to display the
_self
target response that is received after
_parent
submitting the form
_top
 <input>:
 The <input> tag specifies an input field where the user can enter data.
 <input> elements are used within a <form> element to declare input
controls that allow users to input data.
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 24

 An input field can vary in many ways, depending on the type attribute.
 Attributes of <input > tag:

Name Value Meaning


Button, checkbox
date, file, hidden
Specifies the type <input> element to
type image, month, number
display
password, radio, reset
submit, text
name text Specifies the name of an <input> element
Specifies that an <input> element should
checked checked be pre-selected when the page loads (for
type="checkbox" or type="radio")

value Text Specifies the value of an <input> element

 <textarea>:
 The <textarea> tag defines a multi-line text input control.
 A text area can hold an unlimited number of characters, and the text
renders in a fixed-width font (usually Courier).
 The size of a text area can be specified by the cols and rows attributes
 Attributes of <textarea > tag:

Name Value Meaning


name text Specifies a name for a text area
rows number Specifies the visible number of lines in a text area
cols number Specifies the visible width of a text area
 <select>:
 The <select> element is used to create a drop-down list.
 The <option> tags inside the <select> element define the available options
in the list.
 Attributes of <select > tag:

Name Value Meaning


name name Defines a name for the drop-down list
multiple multiple Specifies that multiple options can be selected at once
Defines the number of visible options in a drop-down
size number
list
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 25

 <label>: The <label> tag defines a label for an <input> element.


 Example: Login.html
<html>
<body>
<form name="f1" method="post" action="">
<table align="center" cellspacing="10">
<tr>
<td><label> Username: </label> </td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><label> Password: </label></td>
<td><input type="password" name="t2"></td>
</tr>
<tr>
<td><input type="submit" value="SUBMIT" ></td>
<td><input type="reset" value="RESET" ></td>
</form>
</body>
</html>
Output:

 FRAMES:
 HTML Frames divide a browser window into several pieces or panes, each pane
containing a separate HTML page.
 Each portion is called as a Frame.
 A Collection of Frames in the browser window is known as a Frameset.
 HTML Frames allow authors to present documents in multiple views, which
may be independent windows or sub windows.

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 26

 One of the Key advantages that frames offer is that you can load and reload
single frames without having to reload the entire contents of the browser
window.
 <frameset>:
 The <frameset> tag defines a frameset.
 The <frameset> element holds one or more <frame> elements. Each
<frame> element can hold a separate document.
 The <frameset> element specifies how many columns or rows there will be
in the frameset, and how much percentage/pixels of space will occupy each
of them.
 Attributes of <frameset> tag:

Name Value Meaning


Pixels, %
cols Specifies the number and size of columns in a frameset
*
Pixels, %
rows Specifies the number and size of rows in a frameset
*

 <frame>:
 The <frame> tag defines one particular window (frame) within a <frameset>.
 Each <frame> in a <frameset> can have different attributes, such as
border, scrolling, the ability to resize, etc.
 Attributes of <frame> tag:

Name Value Meaning


Specifies the URL of the document to show in a
src URL
frame
0 Specifies whether or not to display a border
frameborder
1 around a frame
name text Specifies the name of a frame
noresize noresize Specifies that a frame is not resizable
yes
Specifies whether or not to display scrollbars in
scrolling no
a frame
auto

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 27

 Example:
Frames.html:
<html>
<frameset cols="25%,*,25%">
<frame src="http://www.bing.com" name="f1" noresize>
<frame src="http://www.w3schools.com" name="f2" noresize>
<frame src="Mypage.html" name="f3" noresize>
</frameset>
</html>

Mypage.html:
<html>
<body>
<h1 align="center">This is Frames Demo</h1>
</body>
</html>
Output:

 IMAGES:
 Images increase the visual appearance of web pages and makes your web pages
more attractive.
 The <img> tag defines an image in an HTML page.
 The <img> tag has two required attributes: src and alt.
 Attributes of <img> tag:
Name Value Meaning
src URL Specifies the URL of an image
Top, bottom
Specifies the alignment of an image according
align middle
to surrounding elements
left, right
alt text Specifies an alternate text for an image
Specifies the width of the border around an
border pixels
image
width pixels Specifies the width of an image
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 28

height pixels Specifies the height of an image


Specifies the whitespace on left and right side
hspace pixels
of an image
Specifies the whitespace on top and bottom of
vspace pixels
an image
ismap ismap Specifies an image as a server-side image-map
usemap #mapname Specifies an image as a client-side image-map

 Example:
<html>
<body>
<br>
<img src="14.jpg" width="400" height="200" align="right">
<img src="C:\\Users\\Admin\\Desktop\\Others\\13.jpg"
width="300" height="250" border="3" alt="Alternative Text">
</body> </html>
Output:

 IMAGEMAPS:
 An Image Map is a large picture which has areas that the user can click with a
mouse.
 Each clickable area on an image map is called as a “HOT SPOT”. It is the area of
the image that provides a link and when clicked by the user navigates to
different pages.
 There are 2 types of Image maps:
1. Server – Side Image Maps
2. Client – Side Image Maps

 With Client - Side Image maps, the browser indicates which page you should be
taken to based upon where the user clicks.
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 29

 With Server - Side Image maps, the browser sends co-ordinates on the image
where the user clicked, to the server and these are processed by a script file on
the server that determines which page the user should be navigated to.
 <map>:
 The <map> tag is used to define a client-side image-map.
 The required name attribute of the <map> element is associated with the
<img>'s usemap attribute and creates a relationship between the image and
the map.
 The <map> element contains a number of <area> elements that defines the
clickable areas in the image map.
 <area>:
 The <area> tag defines an area inside an image-map (an image-map is an
image with clickable areas).
 The <area> element is always nested inside a <map> tag.
 Attributes of <area> tag:
Name Value Meaning
coords coordinates Specifies the coordinates of the area
Default, rect
shape Specifies the shape of the area
circle, poly
Specifies the hyperlink target for the
href URL
area
_blank
Specifies where to open the target
target _parent, _self
URL
_top, framename

 Example:
<html>
<body>
<img src="2.png" width="400" height="400" alt="Cartoon" hspace="10"
vspace="10" align="left" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,50,50"
href="http://www.google.com"
alt="Search" target="_blank">
<area shape="circle" coords="100,100,25"
href="C:\\Users\\Admin\\Desktop\\1.jpg" alt="Flower">
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 30

<area shape="poly"
coords="200,200,350,200,200,250,350,250,450,225"
href="14.jpg" alt="Car">
<area shape="default" href="http://www.yahoo.com" alt="Search"
target="_blank">
</map>
</body>
</html>

Output:

CASCADING STYLE SHEETS

 INTRODUCTION TO CSS:
 A Style sheet is a set of Stylistic rules that expresses the Presentation and
Layout of Structured documents (Web Pages).
 Using CSS we can determine the style and layout of the web page.
 CSS is a style sheet language used to describe the presentation semantics of a
document written in Markup Language.

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 31

 They allow us to specify rules for how the content of elements within your
document appears.
 With CSS, all formatting could be removed from the HTML document and stored
in a separate CSS file.
 Advantages of CSS:
1. Improves the formatting capability of a HTML page
2. Reduced Document size
3. Reduced Complexity and repetition – can reuse the same style sheet with
many different HTML documents.
4. Saves time
5. A style sheet can import and use styles from other style sheets.
 CSS RULES:
 CSS consists of set of rules that determines how the content of elements within
your document should be formatted.
 Syntax:
Selector { property1:value ; property2:value; }
 CSS rule is made up of 2 parts:
1. Selector
2. Declaration
 Selector : Element/ set of elements to which declaration must be applied to
 Declaration: (i). Property: CSS Property that is to be applied
(ii). Value: Value of CSS property
 Example:
h1
{
font-family : arial;
color : blue;
text-align : center;
}
 Grouping of Selectors: Separate selector with a Comma
h1, h2, h3
{
color : blue;
font-family : calibri;
text-align : center;
}

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 32

 ‘CLASS’ SELECTOR / STYLESHEET CLASS:-


 ‘Class’ selector allows us to define multiple styles for the same type of HTML
element.
 Syntax:
selector.classname
{
Property1 : valuel; property2 : value;
}
 To define a style that can be used by multiple HTML elements remove tag
name/selector.
 Syntax:
.classname
{
Property1 : valuel; property2 : value;
}

 THE ‘id’ SELECTOR:


 The #id selector styles the element with the specified id
 Syntax:
#id
{
Property1 : valuel; property2 : value;
}

 EXAMPLE:
<html>
<head>
<style type="text/css">
p.center
{ text-align:center; }

p.right
{ text-align:right; }

h2
{ text-align:center; color:orange; font-family:calibri; }
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 33

.cl1
{ color:green; }

#id1
{ color:blue; background-color:orange; }
</style>
</head>
<body>
<p class="center">This paragraph is styled by class 'center'</p>
<p class="right">This paragraph is styled by class 'right'</p>
<p class="cl1">This paragraph is styled by class 'cl1'</p>
<p id="id1">This paragraph is selected by ID selector</p>
<h1 class="cl1">This Heading is styled by class 'cl1'</h1>
</body>
</html>
Output:

 TYPES OF CSS:
 When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.
 There are three ways of inserting a style sheet:
1. Inline style sheet
2. Internal/Embedded style sheet
3. External style sheet

1. INLINE STYLE SHEET:


 Inline styles are placed directly inside a specific HTML element in the code.
 The style is applied at the occurrence of the HTML element by using “style”
attribute in the relevant tag.
 The style attribute can contain any CSS Properties

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 34

 Inline styles cannot be reused at all


 Example:
<html>
<body>
<h1>This is Normal Text</h1>
<p style="color:red;font-size:30pt;text-align:center">This Text is Styled</p>
</body>
</html>
Output:

2. INTERNAL STYLE SHEET:


 An internal style sheet may be used if one single page has a unique style.
 Internal styles are defined within the <style> element, inside the <head>
section of an HTML page.
 All the desired selectors along with the properties and values are included in
the header section between <style> and </style> tags.
 Example:
<html>
<head>
<style>
body {
background-color:pink;
}
h1 {
color: maroon;
font-family: verdana;
}
</style>
</head>
<body>

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 35

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:

3. EXTERNAL STYLE SHEET:


 External Style Sheets are useful when we need to apply particular style to
more than one web page.
 The central idea in this type of style sheet is that the desired style is stored
in an external .css file.
 The name of the external .css file has to be mentioned on our web pages.
Then the styles defined in the .css file will be applied to all those web pages.
 <link> tag is used to link the external style sheet to a web page.
 Example:
Mystyle.css:
p.left
{
text-align:left;
color:red;
text-decoration:overline;
font-family:tahoma;
font-size:20pt;
}
p.center
{
color:green;
text-align:center;
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 36

text-decoration:underline;
font-family:calibri;
font-size:30pt;
}

Ext.html:
<html>
<head>
<link rel="stylesheet" href="Mystyle.css">
</head>
<body>
<p class="left">This paragraph is styled by class 'left'</h1>
<p class="center">This paragraph is styled by class
'center'</p>
</body>
</html>
Output:

 CSS PROPERTIES:
 CSS BACKGROUND PROPERTIES:

PROPERTY NAME VALUE


background-attachment fixed, scroll
background-color Rgb(X,X,X), #XXXXXX, colorname
background-image url(‘ url of image’)
background-position left top,left center, left bottom
center top,center bottom, center center
right top,right center, right bottom
Example:
<html>
<head>
<style type="text/css">
h1
{
background-image:url('2.gif');

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 37

background-attachment:fixed;
background-repeat:no-repeat;
}
body
{
background-position:center top;
background-image:url('bunny giving flower.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-color:green;
}
</style>
</head>
<body>
<h1>This element is Styled</h1>
</body>
</html>

Output:

 CSS TEXT PROPERTIES:


PROPERTY NAME VALUE
color Color name
direction ltr,rtl
text-align left, right, center, justify
text-decoration Underline, overline, Line-through, blink
text-transform none, uppercase, lowercase, capitalize
text-indent length, %

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 38

vertical-align length, %, top, middle, bottom, sup, super


letter-spacing normal, length(-ve)
word-spacing normal, length

 CSS FONT PROPERTIES:

PROPERTY NAME VALUE


font-family Arial, Times New Roman, Etc……
font-size Small, smaller, medium, large, larger,
length, %
font-style normal, italic
font-variant normal, small-caps
font-weight normal, bold, bolder, 100-900
font-stretch Normal, wider, narrower

Example:
TextFont.css:
p.right
{
color:red;
font-size:large;
text-transform:capitalize;
text-align:right;
font-weight:200;
letter-spacing:-3;
word-spacing:5;
}
p.center
{
color:blue;
text-align:center;
text-decoration:underline;
text-tranform:uppercase;
font-style:italic;
font-size:30;

}
.left
{
color:green;
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 39

text-indent:20;
text-decoration:overline;
text-transform:lowercase;
font-family:tahoma;
font-size:small;
font-style:italic;

#id1
{
color:purple;
font-weight:900;
font-family:verdana;
text-decoration:line-through;
text-align:right;
font-variant:small-caps;
font-size:20;
}

TextFont.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="TextFont.css">
</head>
<body>
<p>This Paragraph is not styled</p>
<p class="left">This paragraph is styled by class left</p>
<p class="right">This paragraph is styled by class right</p>
<p class="center">This pragraph is styled by class center</p>
<p id="id1">This paragraph is styled by id</p>
</body>
</html>

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 40

Output:

 CSS LINK PROPERTIES:


The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

Example:
Links.html
<html>
<head>
<style type="text/css">
a:link
{
color:red;
font-family:tahoma;
font-size:12pt;
}
a:visited
{
color:green;
font-family:calibri;
font-size:20pt;
text-decoration:underline;
}
a:active
{
color:orange;

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 41

font-family:cambria;
font-size:20pt;
}
a:hover
{
color:brown;
font-family:Brush Script MT;
font-size:22pt;
text-decoration:overline;
}
</style>
</head>
<body>
<a href="www.google.com">This is a Link</a>
</body>
</html>
Output:

 CSS LIST PROPERTIES:

PROPERTY NAME DESCRIPTION


list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the
content flow
list-style-type Specifies the type of list-item marker

Example:
<html>
<head>
<style>
ol.b {
list-style-type: upper-roman;
list-style-position:outside;
}
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 42

ul.c {
list-style-type:circle;
list-style-position:inside;
}
ol li
{
background: #ff9999;
}
ul li
{
background: #3399ff;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors:</h1>
<ol class=”b”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul class=”c”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Output:

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 43

 CSS TABLE PROPERTIES:

PROPERTY NAME VALUE


border-style Dotted, dashed, double, groove, ridge, inset, outset
border-width thin, medium, thick, pixels
border-color Colorname, rgb(X,X,X), #XXXXX
padding – top,padding-bottom pixels, %
padding – left,padding - right
text-align left, right, center
vertical-align top, bottom, middle

Example:
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr: nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Indira</td>
<td>Gamini</td>
<td>$200</td>
</tr>
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 44

<tr>
<td>Vineela</td>
<td>Suri</td>
<td>$150</td>
</tr>
</table>
</body>
</html>

Output:

 CSS POSITIONING ELEMENTS:

PROPERTY NAME VALUE


Position static (normal flow), fixed (will not move)
relative (can overlap), absolute ( x & y co-ordinates)
Left, right, top, bottom any Numeric value

Example:
<html>
<body>
<h1 style="position:relative;left:10;top:10;z-index:3;background-color:yellow">
This is layer 1</h1>
<h1 style="position:relative;left:50;top:-20;z-index:2;background-color:red">
This is layer 2</h1>
<h1 style="position:relative;left:100;top:-50;z-index:1;background-color:green">
This is layer 3</h1>
<br><br><br>
<h1 style="position:relative;left:10;top:10;z-index:2;background-color:yellow">
This is layer 1</h1>
<h1 style="position:relative;left:50;top:-20;z-index:3;background-color:red">

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 45

This is layer 2</h1>


<h1 style="position:relative;left:100;top:-50;z-index:1;background-color:green">
This is layer 3</h1>
<br><br><br>
<h1 style="position:relative;left:10;top:10;z-index:1;background-color:yellow">
This is layer 1</h1>
<h1 style="position:relative;left:50;top:-20;z-index:2;background-color:red">
This is layer 2</h1>

<h1 style="position:relative;left:100;top:-50;z-index:3;background-color:green">
This is layer 3</h1>
</body>
</html>

Output:

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 46

Assignment-Cum-Tutorial Questions
SECTION-A

I. Objective Questions
1. Latest version of HTML in use is ____ [ ]
A).4 B).5 C). 6 D). 7
2. HTML Tags are Case Sensitive. (True / false) [ ]
3. ______Tag is used to create Hyperlinks in HTML [ ]
A). link B). href C). a D). src
4. The following <table> tag attribute specifies the space between Cell Wall and
the Content present inside a cell. [ ]
A). Cellspacing B). Cellpadding C).letter-spacing D).word-spacing
5. Match the following
1. src [ ] A). Specifies an image as a client-side image-
map
2. href [ ] B). Specifies the URL of an Image
3. ismap [ ] C). Specifies an image as a client-side image-
map
4. usemap [ ] D). Specifies the destination of a link
6. Which HTML attribute is used to define inline styles? [ ]
A). style B). id C). Class D). styles
7. _______ tag is used to attach External CSS file to a Web Page [ ]
A). a B). link C). href D). style
8. Which of the following property is used to control the scrolling of an image in
the background? [ ]
A). background-attachment B). background
C). background-repeat D). background-position
9. Which CSS property controls the text size? [ ]
A). text-style B). text-size C). font-style D). font-size
10. What is the correct HTML for making a drop-down list [ ]
A). <input type="list"> B). <list>
C). <select> D). <input type="dropdown">
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 47

11. Where in an HTML document is the correct place to refer to an external


style sheet? [ ]
A). In the <body> section B). At the end of the document
C). In the <head> section D). At the top of the document
12. The parts of a CSS Style rule are [ ]
A). Selector, statements B). Tags, declarations
C). Selector, declarations D). Tags, statements
13. In CSS, declarations must be separated using _______ and Terminated
using _______ [ ]
A). Colons, Semicolon B). Comma, semicolon
B). Semicolon, Comma D). Colon, Comma
14. How to define the link should open in new page in HTML? [ ]
A). <a href = “http://www.google.com/” target = “blank”>Click Here</a>
B). <a href = “http://www. google.com/” target = “_blank”> Click Here </a>
C). <a href = “http://www. google.com/” target = “#blank”> Click Here </a>
D). <a href = “http://www. google.com/” target = “@blank”> Click Here </a>
15. Which of the following is correct HTML for inserting an image? [ ]
A). <image source= “admin.jpg” alt= “This is GEC” />
B). <img src= “admin.jpg” alt= “This is GEC” />
C). <img href= “admin.jpg” alt= “This is GEC” />
D). <img alt= “This is GEC”>admin.jpg
16. How do you add a background color for all <p> elements? [ ]
A). all.p {background-color:#FFFFFF;}
B). p.all {background-color:#FFFFFF;}
C). p {background-color:#FFFFFF;}
D). p {backgroundcolor:#FFFFFF;}
17. Which is the correct CSS syntax? [ ]
A). body {color: black;} B). {body;color:black;}
C). body:color=black; D). {body:color=black;}

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 48

18. How do you display hyperlinks without an underline? [ ]


A). a {decoration:no underline} B). a {text-decoration: no
underline}
C). a {text-decoration: no-underline} D). a { decoration: no-underline}

SECTION-B
II. Descriptive Questions & Problems
1. List out Common HTML tags and design a webpage using them.
2. Elaborate on various types of Lists in HTML and Design the following web
page using HTML lists

3. Explain <table> tag and its sub-tags with an example. Design the following
table structure using HTML

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 49

4. Create a HTML table with columns for a country name, national sport,
national flower, national animal and national tree. There must be at least 5
rows in the table.

5. Compare and contrast between Images and Imagemaps.


6. Define frame? What is the advantage of using a frame? Design the following
web page using HTML Frames. Fill all the Frames with different colors

7. Create a HTML document that has two frames in one column. The top frame,
which must be 20 percent of the column, must have at least four links to
other documents; the bottom frame will display those documents. The links
must be names of the departments in your college; the documents must be
description of the departments.
8. Design the following Registration form using HTML

9. Define CSS and explain in detail different types of cascading style sheets with
examples.
III YEAR-I SEMESTER A.Y.2018-19 CSE
Web Technologies 50

10. Explain the following CSS Properties with example


1). background-attachment 2). background-image
3). text-decoration 4). text-transform
5). font-family 6). font-weight
11. Design the following web page using CSS Style sheet Class (Use CSS Text &
Font Properties)

SECTION-C

III.Questions testing the analyzing / evaluating ability of students

1. Given below are several usages of the anchor tag in HTML. [ ]


I. <A HREF = "http://www.gate.ac.in/HTML/BASIC/testpage.html">Test
Me</A>
II. <A HREF = "/BASIC/testpage.html">Test Me</A>
III. <A HREF = "testpage.html">Test Me</A>
IV. <A HREF = "testpage.html#test">Test Me</A>
Which of the above are valid? GATE - 2004
(A) I and II only (B) I and III only
(C) I, II and III only (D) I, II, III and IV

2. A HTML form is to be designed to enable purchase of office stationery.


Required items are to be selected (checked). Credit card details are to be
entered and then the submit button is to be pressed. Which one of the
following options would be appropriate for sending the data to the server.
Assume that security is handled in a way that is transparent to the form
design. GATE - 2005
A). Only GET [ ]
B). Only POST
C). Either of GET or POST
D). Neither GET nor POST

III YEAR-I SEMESTER A.Y.2018-19 CSE


Web Technologies 51

3. Which of the following is an advantage of putting presentation information in


a separate CSS file rather than in HTML itself? [ ]
A). The content becomes easy to manage. GATE - 2015
B). Becomes easy to make site for different devices like mobile by making
separate CSS files.
C). CSS Files are generally cached and therefore decrease server load and
network traffic.
D). All of the above

4. To add a background color for all h1 elements, which of the following HTML
syntax is used ISRO CS - 2015
(A) h1 { background-color :#FFFFFF} [ ]
(B) { background-color :#FFFFFF} . h1
(C) h1 { background-color :#FFFFFF} . h1(all)
(D) h1. all{bgcolor= #FFFFFF}

5. Create a HTML that has five frames. There must be two rows of frames the
first with three frames and the other with two frames. The frames in the first
row must have equal width. The left frame in the second row must be 50
percent of the width of display. Each of the frames in the top row must
display a document that has a form. The left top frame must have two text
boxes, each 30 characters wide, labeled Name and Address. The middle top
must have five radio buttons with color name labels. The right top frame
must have four check boxes, labeled with four kinds of car equipment such
as a CD player and air Conditioning. The two bottom frames must have
images of two different cars. The top row of frames must use 20 percent of
the height of the display.

III YEAR-I SEMESTER A.Y.2018-19 CSE

You might also like