Web Technologies
HTML
(Hyper Text Markup Language)
2
SGML
• Standardized General Markup Language
• In 1986, ISO approved an international standard for descriptive
markup
• SGML is a metalanguage for defining markup languages
• HTML is one example of an SGML-defined language
3
The History of HTML
The Web Hypertext Application Technology Working Group
(WHATWG) is a community of computer professionals and general
users with an interest in improving HTML 4
HTML
HTML is a markup language for describing web documents (web
pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
TAG: A command inserted in a document that specifies how the
document, or a portion of the document, should be formatted.
Attribute refers to the properties of the HTML elements.
5
HTML Tags
HTML tags are keywords (tag names) surrounded by angle
brackets:
<tagname> content </tagname>
• HTML tags normally come in pairs like <p> and</p>.
• The first tag in a pair is the start tag, the second tagis the
end tag.
• The end tag is written like the start tag, but with a slash
before the tag name.
• The start tag is often called the opening tag. The end tag is
often called the closing tag.
6
HTML Documents
HTML documents are text documents
• We use simple text files
• Html file extensions: .html or .htm
We can create html documents using:
• Notepad in Windows and TextEdit (MAC OS X)
7
HTML Editors
HTML editors are called “WYSIWYG”
• What You See Is What You Get!
Examples of HTML Editors:
• Dreamweaver
• Front Page
• Go Live
• Coffee Cup
• Microsoft Expression Web
8
Structure of HTML Program
• Starting with the tag <html>...</html>
Everything about the <html>
web page should be .......
enclosed here
</html>
9
HTML Document Structure
The HTML document is divided into two major parts:
HEAD: contains information about the document:
Title of the page (which appears at the top of the
browser window)
Meta tags: used to describe the content (used by Search
engines)
JavaScript and Style sheets generally require
statements in the document Head
BODY: Contains the actual content of the document
This is the part that will be displayed in the browser
window
10
Structure of HTML Program
• Inside the <html></html> tag
– Each web page has a head part described in
<head></head> tag:
<html>
The title of the <head>
web page should <title> CSE</title>
be put here
</head>
</html>
11
HTML Program
• Inside the <html></html> tag
– Each web page has a body part described in
<body></body> tag:
<html>
<head>
• <title>My First HTML Page</title>
</head>
<body>
• <p>This is some text...</p>
</body>
</html> The content of the
whole web page
should be put here
12
Title
Body
13
Body tag
Tag <body> can contain several attributes, which determine the
view of the HTML page.
These attributes are:
• bgcolor (background color of the page)
• background (image as a background)
• text
• link
14
Example
<html>
<head>
<title>body color</title>
</head>
<body bgcolor="blue" >
The bgcolor is blue
</body>
</html>
15
Example
<html>
<head>
<title>body color</title>
</head>
<body background="[Link]" >
using background attribute
</body>
</html>
16
Heading
<h1>Heading 1</h1> h1 is 32px
<h2>Sub heading 2</h2> h2 is 24px
<h3>Sub heading 3</h3> h3 is 20.8px
<h4>Sub heading 4</h4> h4 is 16px
<h5>Sub heading 5</h5> h5 is 12.8px
<h6>Sub heading 6</h6> h6 is 11.2px
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
17
Example
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p> This is a paragraph </p>
</body>
</html>
18
Example
<html><body>
<p>This is some text.</p>
<center>This text will be center-aligned.</center>
<p>This is some text.</p>
<p>This is a <u>paragraph</u>.</p>
<p>This is a <em>paragraph</em>.</p>
<p>This is a <i>paragraph</i>.</p>
<p>This is a <strong>paragraph</strong>.</p>
<p>This is a <u><b>parragraph</b></u>.</p> </body></html>
19
Example
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<p>
To break lines<br>in a text,<br>use the br element.</p>
<p>This text contains <sup>superscript</sup> text.</p>
<p>This text contains <sub>subscript</sub> text.</p>
<p>My favorite color is <del>blue</del> </p>
</body></html>
20
Font tag
• <font> tag specifies the font size, font face and color of text
<html><body>
<p><font size="3" color="red">This is some text!</font></p>
<p><font size="7" color="blue">This is some text!</font></p>
<p><font face="verdana" color="green">This is some
text!</font></p>
<font face="Times New Roman" size="5" color="brown">Times
New Roman</font><br />
</body></html>
21
<marquee> tag
The HTML <marquee> tag is used for scrolling piece of text or
image displayed either horizontally across or vertically down
your web page depending on the settings.
Attribute Value Description
behavior scroll Defines the type of scrolling.
slide
alternate
bgcolor rgb(x,x,x) Specifies the background color
#xxxxxx
colorname
direction up Defines the direction of scrolling the
down content.
left
right
22
<img > Tag
• The <img> tag defines an image in an HTML page.
• The <img> tag has two required attributes: src and alt.
Attribute Value Description
align top Specifies the alignment of an image
bottom according to surrounding elements.
right
left
alt text Specifies an alternate text for an image.
border pixels Specifies the width of the border around
an image.
height pixels Specifies the height of an image .
hspace pixels Specifies the whitespace on left and
right side of an image.
src URL Specifies the URL of an image
vspace pixels Specifies the whitespace on top and
bottom of an image
23
width pixels Specifies the width of an image
<img > Tag
<html>
<body>
<img src="[Link]" alt=“BRECW Logo" width="100" height="100">
</body>
</html>
24
Anchor tag
The HTML anchor tag defines a hyperlink that links one page to
another page. It can create hyperlink to other web page as well as
files, location, or any URL.
The href attribute is used to define the address of the file to be
linked. In other words, it points out the destination page.
<html><head><title>anchor tag</title></head>
<body >
<a href="[Link]"> Click to open hello </a>
<p> This is an example </P>
<p> This is an example </P>
….
<p> This is an example </P>
<p> This is an example </P>
</body></html>
25
Lists
HTML offers three ways for specifying lists of information. All lists
must contain one or more list elements. Lists may contain:
• Unordered Lists
• Ordered Lists
• Definition Lists
• <ul> - An unordered list. This will list items using plain bullets.
• <ol> - An ordered list. This will use different schemes of
numbers to list your items.
• <dl> - A definition list. This arranges your items in the same
way as they are arranged in a dictionary.
26
Unordered Lists
• An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
• The list items will be marked with bullets (small black circles)
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
27
Ordered Lists
• An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
• The list items will be marked with numbers:
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
28
Definition Lists
• A description list is a list of terms, with a description of each
term.
• The <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term:
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body> 29
Nested Lists
<html><body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body></html>
30
Tables
•<caption> element puts a title above the table
Table attributes
•align
•width
•border
•cellspacing
•cellpadding
•bgcolor
31
Tables
<html><head> <title>Table 1</title> </head>
<body>
<table border="1">
<tr>
<th>Subject</th>
<th>Branch</th>
<th>Year</th>
</tr>
<tr>
<td>CP</td>
<td>CSE</td>
<td>I Year</td>
</tr>
<tr>
<td>WT</td>
<td>CSE</td>
<td>III Year</td>
</tr>
</table> </body> </html>
32
Tables
<table border="1">
<tr>
<th>Subject</th>
<td>CP</td>
<td>WT</td>
</tr>
<tr>
<th>Course</th>
<td>CSE</td>
<td>CSE</td>
</tr>
<tr>
<th>Year</th>
<td>I</td>
<td>III</td>
</tr>
</table>
33
Rowspan
If you want to make a cell span more than one row, you can use the
rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will
depend on rowspan values.
<html><body>
<h2>Cell that spans two rows:</h2>
<table border="3" width=“50%">
<tr>
<th>Name:</th>
<td>abc</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
34
</tr></table> </body></html>
colspan
If you want to make a cell span more than one column, you can use
the colspan attribute.
It will divide one cell/row into multiple columns, and the number of
columns depend on the value of colspan attribute.
<html><body>
<h2>Cell that spans two columns:</h2>
<table border=2 width=50%>
<caption>Telephone</caption>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>ABC</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr></table> </body></html> 35
Example
<html><body>
<table border="1">
<tr>
<th colspan="2">Subject</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>CP</td>
<td>Computer Programming</td>
<td rowspan="2">CSE</td>
<td>I Year</td>
</tr>
<tr>
<td> WT</td>
<td>Web Technologies</td>
<td> III Year</td>
</tr>
<tr>
</table> </body></html> 36
Example
<html><body>
<table border="1" align="center">
<tr>
<th colspan="2" width="60%">Subject</th>
<th rowspan="2">Course</th>
<th rowspan="2">Year</th>
</tr>
<tr>
<th>In Short</th>
<th> Description</th>
</tr>
<tr>
<td>CP</td>
<td>Computer Programming</td>
<td>CSE</td>
<td align="center">I Year</td>
</tr> </body></html>
37
Cellpadding and cellspacing
Cellpadding is the amount of space between the outer edges of the
table cell and the content of the cell.
Cellspacing is the amount of space in between the individual table
cells.
<html> <body>
<table border "1" style="width:60%" cellpadding=25 cellspacing=20>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr> <tr>
<td>January</td>
<td>$100</td>
</tr> <tr>
<td>February</td>
<td>$50</td>
</tr></table>
</body></html> 38
Example
<html> <body> <td>def</td>
<table border="1" align="center"> <td>abc</td>
<tr>
<th colspan="2" <td>[Link]</td>
width="60%">Name</th> <td align="center">2
<th rowspan="2">Course</th> </td>
<th rowspan="2">Year</th> </tr>
</tr> </table></body></html>
<tr>
<th>First</th>
<th>Last</th>
</tr>
<tr>
<td>xyz</td>
<td>pqr</td>
<td>[Link]</td>
<td align="center">3</td>
</tr>
<tr> 39
Example
<html><body>
<table border="0" cellspacing="10">
<tr>
<td>
<img src="[Link]" alt="cat">
<ul>
<li>cats</li>
<li>dogs</li>
<li>butterflies</li>
</ul>
</td>
<td>
This piece of text illustrates
the idea of placing two columns
of information in a web page...
Note also that there is no
border in this table.
</td>
</tr> 40
</table></body> </html>
Example
<html><body>
<table border="3" align="center" cellspacing="6" cellpadding="6"
bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Subject</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>WT</td>
<td>CSE</td>
<td> III Year</td>
</tr>
</body></html>
41
Example
<html><body>
<table border="3" align="center" cellspacing="66" cellpadding="6"
bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Subject</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>WT</td>
<td>CSE</td>
<td> III Year</td>
</tr>
</body></html>
42
Example
<html><body>
<table border="3" align="center" cellspacing="6" cellpadding="55"
bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Subject</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>WT</td>
<td>CSE</td>
<td> III Year</td>
</tr>
</body></html>
43
Frame and Frameset Tag
Frameset Attributes
• Rows
• Cols
• Border
• Framespacing
Frame Attributes
• Src
• Name
• Frameborder
• Marginwidth
• Marginheight
• Scrolling
• noresize
The <noframes> tag was used in HTML 4 to act as a fallback
tag for browsers that did not support frames.
44
Example
[Link]
<html> <head>
<title>HTML Target Frames</title>
</head>
<frameset cols="30%,*">
<frame src="[Link]" name="main"/>
<frame src="[Link]" name="menu"/>
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
45
Example
[Link]
<html> <body bgcolor="#4a7d49">
<a href="[Link] target="menu">Google</a>
<br /><br />
<a href="[Link] target="menu">Microsoft</a>
<br /><br />
<a href="[Link] target="menu">BBC
News</a>
</body> </html>
[Link]
<html> <body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be
displayed here.</h3>
<p>So now click any link and see the result.</p>
</body> </html>
46
Example
47
Example
<HTML>
<HEAD>
<TITLE>A Basic Example of Frames</TITLE>
</HEAD>
<FRAMESET ROWS="75%, *" COLS="*, 40%">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
<NOFRAMES>
<H1>No Frames? No Problem!</H1>
Take a look at our
<A HREF="[Link]">no-frames</A>
version.
</NOFRAMES>
</FRAMESET>
</HTML>
48
Example
49
Example
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>
50
Example
51
Example
<html>
<head><title>Frames2</title></h
ead>
<frameset cols="140,*">
<frame name="navF"
src="[Link]">
<frameset rows="30%,70%">
<frame name="upperF"
src="[Link]">
<frame name="lowerF"
src="[Link]">
</frameset>
</frameset>
</html>
52
The <form> tag
• The <form arguments> ... </form> tag encloses form elements
(and probably other elements as well)
• The arguments to form tell what to do with the user input
– action="url" (required)
• Specifies where to send the data when the Submit button
is clicked
– method="get" (default)
• Form data is sent as a URL with form_data info appended
to the end
• Can be used only if data is all ASCII and not more than 100
characters
– method="post"
• Form data is sent in the body of the URL request in
encrypted form
• Cannot be bookmarked by most browsers
– target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
53
The <input> tag
• Form elements use the input tag, with a type="..." argument
to tell which kind of element it is
– type can be text, checkbox, radio, password, hidden,
submit, reset, button, file, or image
• Other common input tag arguments include:
– name: the name of the element
– id: a unique identifier for the element
– value: the “value” of the element; used in different ways for
different values of type
54
Forms: Input Elements
Text Fields: allows the user to type in text into the text field
box.
<input type=“text" /> defines a one-line input field that a user
can enter text into. Default width of a text field is 20 characters.
Code View: Browser View:
<html><body>
<form>
Name: <input type="text”
name="Name" /><br />
Father's Name: <input
type="text" name="Father's
Name" />
</form> </body></html>
55
textarea
The <textarea> element is used to create a text input area of unlimited
length.
Code View: Browser View:
<form >
<textarea rows="4" cols=“20" >
Enter text here...</textarea>
</form>
56
Forms: Input Elements
Password Field: like the text field, it allows the user to type in
text into the text field box but the characters are masked.
<input type=“password" /> defines a password field.
Code View: Browser View:
<form>
Password:
<input type="password"
name="password" /> with user input
</form>
57
Text input
A text field:
[Link] 2. Name 3. Value [Link] 5. maxlength
<input type="text" name="textfield" value="with an initial value" />
A multi-line text field
1. Name 2. rows 3. cols
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret" />
58
Buttons
A submit button:
<input type="submit" name="Submit" value="Submit" />
A reset button:
<input type="reset" name="Submit2" value="Reset" />
A plain button:
<input type="button" name="Submit3" value="Push Me" />
submit: send data
reset: restore all form elements to their
initial state
button: take some action as specified
by JavaScript
Image:clickable button with an image
59
Forms: Input Elements
Radio Buttons: let a user select ONLY ONE of a limited number
of choices.
<input type="radio" /> defines a radio button.
Input tag attributes : type, name, value, checked
Code View: Browser View:
<form>
<input type="radio" name=“First"
value=“1" /> I Year<br />
<input type="radio" name=“First "
value=“2" /> II Year<br />
<input type="radio" name=“First "
value=“3" /> III Year</form>
60
Forms: Input Elements
Checkboxes: let a user select ONE or MORE options of a limited
number of choices.
A checkbox:
<input type="checkbox" name="checkbox" value="checkbox"
checked="checked">
Input tag attributes : type, name, value, checked
Code View: Browser View:
<form>
<input type="checkbox"
name="language" value="English" />
I speak English<br />
<input type="checkbox"
name="language" value=“Telugu" />
I speak Telugu </form>
61
Type=hidden
<html>
<body>
<form action="demo_form.html">
First name: <input type="text" name="fname"><br>
<input type="hidden" name="course" value="CSE">
<input type="submit" value="Submit">
</form>
<p>Notice that the hidden field above is not shown to a user.</p>
</body>
</html>
62
Select tag
Select tag: name, size, multiple
Option tag: value, selected, label
A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select> Browser View:
default view
Code View:
Course Name<br /><form action=“”>
<select name=“Course">
<option value=“CSE">CSE</option>
<option value=“ECE”>ECE</option>
<option value=“IT">IT</option>
<option value=“EEE“>EEE</option>
</select></form>
with drop-down
menu engaged
63
Input type = image
Type = image
<input type="image" src="E:\[Link]" name="image" width="60"
height="60"><br>
64
A complete example
<html><head>
<title>Get Identity</title>
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<label><input type="radio" name="gender" value="m" />
Male</label>
<label><input type="radio" name="gender" value="f" />
Female</label>
</p>
</form></body></html>
65
A complete example
<html><head><title>Personal Select a Level of Education:<br>
INFO</title></head><body><form > <select name="education">
Name:<input type="text" size="12" <option value="[Link]">[Link]
maxlength="12" name="Fname">:<br> </option>
Password:<input type="password" <option value="HighSchool">
size="12" maxlength="36" HighSchool</option>
name="Lname">:<br>Gender::<br>
<option value="College">College
Male:<input type="radio" value="Male" </option></select>:<br>
name="gender">:<br>
Select your favorite time of day::<br>
Female:<input type="radio"
value="Female" name="gender">:<br> <select name="day" size="3">
Please choose type of residence::<br> <option value="Morning">Morning
</option>
Hos[Link] type="checkbox"
value="hostel" name="res1">:<br> <option value="Day">Day </option>
Paying Guest:<input type="checkbox" <option value="Night">Night</option>
value="pg" name="res1">:<br> </select>:<br>
<textarea rows="5" cols="20" <input type="submit" value="submit"
name="quote" >Enter your favorite name="submit"><br></form><br /
quote!</textarea>:<br> > </body></html>
66
A complete example
67
Cascading Style Sheets (CSS)
• Cascading Style Sheets (CSS) – is a rule-based language that
applies styling to your HTML elements.
• We can write CSS rules in elements, and modify properties of
those elements such as color, background color, width, border
thickness, font size, etc.
• We can write CSS rules for how elements are positioned and
laid out, what background images or background colors are to
be used, different displays for different devices and screen
sizes.
68
Syntax of CSS
The CSS syntax is made up of 5 parts:
• selector
• property/value
• declaration
• declaration block
• curly braces
69
Selector
Definition: identifies the HTML elements that the rule will be
applied to, identified by the actual element name, e.g.
<body>, or by other means such as class attribute values.
•Example:
70
Property & Value
Definition: The property is the style attribute you want to
change. Each property has a value.
• Properties are separated from their respective values by colons :
• Pairs are separated from each other by semicolons ;
71
Declaration
• Definition: Each CSS line that includes property and value
*Each declaration consists of a property and a value.
72
Declaration Block
Definition: multiple declaration lines including the curly braces
73
Curly Braces
Definition: the curly braces contain the properties of the
element you want to manipulate, and the values that you want
to change them to. The curly braces plus their content is
called a declaration block.
•Example:
74
How CSS is Applied to A Web Page
CSS is applied to a web page using three different methods:
• Inline style
• Internal style sheet
• External style sheet
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external
CSS file
75
Inline CSS
• Applies styles directly to the elements by adding declarations
into the style
Style = “property_1:value1; property_2:value2; …
Property_2:valuen;”
Example:
<p style=“color: red;”> This is a simple paragraph, and the
inline style makes it red.</p>
76
Internal CSS
• Document style specifications appear as the content of a style
element within the header of a document.
<style type=“text/css”>
Rule list
</style>
Example:
<style type=“text/css”>
H1 {color:red;}
H2 {color:green;}
</style>
77
Internal CSS
<html> <head> <title> New Document </title>
<style type="text/css">
H1 {color:red;}
H2 {color:green;}
</style>
</head> <body>
<H1>This header is for h1</H1>
<H2> This header is for h2</H2>
</body>
</html>
78
External CSS
• Applies styles as a separate file with a .css extension. The file
is then referenced from inside the <head> element by a link to
the file.
Example:
<head>
<title>my external style sheet page</title>
<link rel=“style sheet” type=“text/css” href=“[Link]”>
</head>
<body>
<p>This is external style sheet</p>
</body>
79
External CSS
[Link]
p{color:blue;font-size:25;}
80
Cascading Style Sheets (CSS)
• Web developers rarely use inline CSS. Since they prefer to not
mix content with presentation. And it is not efficient since you
must declare the style individually for every component.
• Internal and External style sheets are more popular because
you can style multiple elements with one rule.
• External style sheets are best because they allow you to save
all the style information on a separate file from the content.
You can then modify a style for a site, and it will update all the
pages in a site.
81
Selector Forms
simple selector forms
• CSS selectors are used to select the content you want to
style.
• The simple selector form is a single element name, such as
h1. In this case the property values in the rule apply to all the
occurrences of the named element.
Example
H1 {font-size: 24pt;}
H2,h3 {font-size:20pt;}
82
simple selector forms
<html>
<head>
<title> New Document </title>
<style type="text/css">
H1 {font-size: 24pt;}
H2,h3 {font-size:20pt;}
</style>
</head>
<body>
<H1>header1</H1>
<H2>header2</H2>
<H3>header3</H3>
</body>
</html>
83
Class Selectors
• The class selector is used to specify a style for a group of
elements. the class selector is most often used on several
elements.
• A style class is defined in a style element by giving it a name,
which is attached to the tag’s name with a period.
• The class selector uses the HTML class attribute, and is
defined with a "."
[Link] {text-align:center;}
In the example below, all HTML elements with class="center" will
be center-aligned:
<p class=“center”>
This is III cse wt class
</p>
84
Class Selectors
<html>
<head>
<style type=”text/css”>
[Link] {text-align:center;}
[Link]{text-align:right}
</style>
</head>
<body>
<p class=“center”>This is III cse wt class</p>
<p class=“right”>This is III cse wt class</p></body>
</html>
85
Generic Selectors
• Sometimes we have a class of style specifications that applies to
the content of more than one kind of tag.
• This is done by generic class which is defined without a tag name
in its name.
.sale {property-value list}
Example:
<h3 class=“sale”>There is a weekend sale</h3>
…..
<p class = “sale”>
This is wt class</p>
86
Generic Selectors
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
87
id Selectors
• In addition to setting a style for a HTML element, CSS allows
you to specify your own selectors called "id" and "class".
• The id selector is used to specify a style for a single, unique
element.
• The id selector uses the id attribute of the HTML element and
is defined with a "#".
#specific–id{property -value list}
The style rule below will be applied to the element with id="para1"
#para1 {text-align:center;color:red;}
Example:
<h2 id=“para1”>this is cse</h2>
88
id Selectors
<html><head>
<style type="text/css">
#para1
{
text-align:center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body></html>
89
Universal Selectors
• The universal selector , denoted by * applies its style to all
elements in the document
* {color:red;}
makes all the elements in the document red
Example : [Link]
*{
color: blue;
background: silver;
}
90
Universal Selectors
<html>
<head>
<title>Simple Example of CSS universal selectors </title>
<link rel='stylesheet' href='[Link]' type='text/css'>
</head>
<body>
<h1>Example of CSS.</h2>
<h2>Example of grouping of CSS universal selectors.</h2>
<p>A paragraph</p>
</body>
</html>
91
Inline Style Sheet
<html>
<head><title>black, centered, 12px text</title></head>
<body>
<p style="text-align:center; font-size:24px;color:green;">
This is black, 24px, centered text.</p>
</body>
</html
92
Embedded Style Sheet
<html>
<head><title>Embedded style sheet</title>
<style type="text/css">
h1 {color:red; background-color:#123456; font-family: Georgia,
Times New Roman, Times, serif;}
</style>
</head><body>
<h1>This will also appear as a heading 1 in red Georgia font.
</h1>
<p>This is Simple
</p>
</body>
</html>
93
Internal CSS
<html>
<head>
<style type="text/css">
p {color:red; text-align:center;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
94
Internal CSS
<head>
<title>my page</title>
<style type=“text/css”>
p{color:blue}</style>
</head>
<body>
<p style=“color:red”>this is a simple paragraph
</p>
</body>
95
Linked Style Sheets
<html>
<head><title>Linked style sheet</title>
<link rel="stylesheet" type="text/css" href=“[Link]">
</head><body>
<h1 class= "redH1" >This will be in the style specified by class
redH1 in [Link]</h1>
<p class= "blueback" >This will be in the style specified by class
blueback in [Link]<p>
<p> External Style Sheet </p>
</body>
</html>
</html>
96
Linked Style Sheets
[Link]
h1.redH1 {
color:yellow; align:left;
font-family: Georgia, Times New Roman, Times, serif
}
body {
background-color: silver;
}
.blueback {
background-color: blue;
color: white
}
p{
font-size: 12px;
text-align: center;
} 97
List Properties
98
CSS List properties
•list-style-type property specifies the type of list item marker.
ul{
list-style-type: circle;
}
ul{
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
•list-style-image property specifies an image as the list item marker:
ul {
list-style-image: url('[Link]');
}
99
CSS List properties
list-style-position property specifies the position of the list-item markers
(bullet points).
• “List-style-position:outside;”
• “List-style-position:inside;”
100
CSS List properties
The list-style property is a shorthand property. It is used to set all
the list properties in one declaration:
ul {
list-style: square inside url("[Link]");
}
Order will be type-position-image
Styling List With Colors
ol {
background: #ff9999;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px; 101
}
<!DOCTYPE html> CSS List properties
<html><head>
<style>
ul.a { list-style-type: circle;}
ul.b { list-style-type: square;}
ol.c { list-style-type: upper-roman;}
ol.d { list-style-type: lower-alpha;}
</style>
</head><body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li> <li>Tea</li> <li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li> <li>Tea</li> <li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c"> <li>Coffee</li> <li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li> <li>Tea</li> <li>Coca Cola</li>
</ol></body></html> 102
Pseudo Classes
• The :focus selector is used to select the element that has focus.
• The :active selector is used to select and style the active link. A
link becomes active when you click on it.
• Use the :link selector to style links to unvisited pages
• The :visited selector to style links to visited pages
• The :hover selector to style links when you mouse over them.
…….
<style type=”text/css”>
Input:focus{color:green;}
Input:hover{color:red;}
Input:active{color:blue;}
</style>
.…....
<label>name:<input type=”text”>/label>
103
Pseudo Classes
104
FONT Properties
• Font-family : Arial, futura, sans-serif
• Font-family : ’Times New Roman’
• Font-size: 10 pt
• Font-varaint : normal or small-caps
• Font-styles : italic
• Font-weight : bold
• Font Shorthands
eg: font : bold 14 pt sans-serif Arial
105
Text Decoration
• Text-decoration property is used to specify some special features
of text
<html><head>
<style type=“text/css”>
[Link] {text-decoration: line-through}
[Link] {text-decoration: overline}
[Link] {text-decoration: underline}
</style></head>
<body>
<p class = “Delete”>This is III CseA </p>
<p class = “cap”>This is Wt class </p>
<p class = “attention”>This is I unit </p>
</body></html>
106
Color Properties
• The color property is used to specify the foreground color of HTML
elements
<html><body>
<p style="background-color:#FFF111">
Color set by using hex value</p>
<p style="background-color:rgb(0,255,0);">
Color set by using rgb value</p>
<p style="background-color:red">
Color set by using color name</p>
</body></html>
107
Text Alignment
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-align: center;}
h2 { text-align: left;}
h3 { text-align: right;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
108
Text Indentation
<head>
<style>
p{
text-indent: 100px;
}
</style>
</head>
<body>
<p>WT Includes Technologies like
HTML, Java Script, PHP,
XML, Servlets, JSP, JDBC. </p>
</body>
</html>
109
float
<style>
img { float:right;}
</style>
<body>
<p>In the paragraph below, we have added an image
with style <b>float:right</b>. The result is that the
image will float to the right in the paragraph.</p>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
<img src="[Link]" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
110
The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
Div tag
The <div> tag is easily styled byThe <div>
using the tagiddefines
class or a division or a section in an HTML document.
attribute.
The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
• The <div> tag defines a division or a section in an HTML
document.
• The <div> tag is used as a container for HTML elements - which
is then styled with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• The div tag is used in HTML to make divisions of content in the
web page like (text, images, header, footer, navigation bar, etc).
• Div tag has both open (<div>) and closing (</div>) tag and it is
mandatory to close the tag.
111
The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
Div tag
The <div> tag is easily styled byThe <div>
using the tagiddefines
class or a division or a section in an HTML document.
attribute.
The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>Div Example</h2>
<p>BRECW.</p>
</div>
</body></html>
112
Span tag
• The HTML <span> tag is an inline container that is used to
group and apply styles or scripts to specific parts of text or
elements within a document.
• In HTML, the span tag is a generic inline element. With the help
of a span tag, we can wrap a particular text and provide the style
with the help of a CSS property.
• The <span> tag is easily styled by CSS or manipulated with
JavaScript using the class or id attribute.
• The <span> tag is much like the <div> element, but <div> is a
block-level element and <span> is an inline element.
113
<!DOCTYPE html>
span tag
<html>
<head>
<title>Node JS</title>
</head>
<body>
<span style="background-color:powderblue;">
II CSE B
</span>
<span style="background-color: lightgray;">
Node JS
</span>
<span style="background-color: yellow;">
React JS
</span>
<span style="background-color: lightgreen;">
Django Lab
</span>
</body>
</html> 114
CSS Box Shadow
• The CSS box-shadow property is used to apply one or more
shadows to an element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 50px;
padding: 15px;
background-color: coral;
box-shadow: 10px 20px 5px 12px red inset;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>Bhoj Reddy Engineering College for Women</div>
</body> 115
</html>
CSS Gradients
• The Gradient in CSS is a special type of image that is made up of
progressive & smooth transition between two or more colors. CSS
gradients let you display smooth transitions between two or more
specified colors.
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)
CSS Linear Gradients
• The linear-gradient() function sets a linear gradient as the
background image.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
116
CSS Gradients
<!DOCTYPE html>
<html><head>
<style>
#grad1 {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, red, orange, yellow, green, blue,
indigo, violet);}
#grad2 {
height: 100px;
background-color: red; background-image: linear-gradient(90deg, red,
blue); }
#grad3 {
height: 100px;
background-image: linear-gradient(to bottom right, red , yellow);}
</style></head><body>
<div id="grad1" style="text-align:center; margin:auto; color:#888888;font-
size:40px; font-weight:bold">Rainbow Background</div><br>
<div id="grad2"></div><br> <div id="grad3"></div> 117
</body></html>
CSS Gradients
CSS Radial Gradients
• A radial gradient is defined by its [Link] create a radial gradient you must also
define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
<html><head><style>
#grad1 {
height: 150px; width: 200px;
background-image: radial-gradient(red, yellow, green);}
#grad2 {
height: 150px; width: 200px;
background-image: radial-gradient(circle, green, blue, orange);}
</style></head><body>
<h1>Radial Gradient - Shapes</h1>
<h2>Ellipse (this is default):</h2><div id="grad1"></div>
<h2><strong>Circle:</strong></h2><div id="grad2"></div>
</body></html> 118
CSS Transitions
• CSS transitions allows you to change property values smoothly, over a given
duration.
<html><head><style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style></head><body>
<h1>The transition Property</h1>
<div></div></body></html>
119
Flexbox
• The flexbox or flexible box model in CSS is a one-dimensional layout model
that has flexible and efficient layouts with distributed spaces among items to
control their alignment structure. Flexbox can be useful for creating small-
scale layouts & is responsive and mobile-friendly.
Features of flexbox:
A lot of flexibility is given.
Arrangement & alignment of items.
Proper spacing
Order & Sequencing of items.
Flex Container: The parent “div” which contains various divisions is called a
flex container.
Flex Items: The items inside the container “div” are flex items.
120
Flexbox
Properties for the Parent(flex container)
• display
This defines a flex container; inline or block depending on the given value. It
enables a flex context for all its direct children.
.container {
display: flex;}
• flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap: nowrap | wrap | wrap-reverse;
• justify-content: flex-start | flex-end | center | space-between | space-around |
space-evenly | start | end | left | right;
• align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last
baseline | start | end | self-start | self-end;
• align-content: flex-start | flex-end | center | space-between | space-around |
space-evenly | stretch | start | end
• gap: 10px;
• gap: 10px 20px;
• row-gap: 10px;
• column-gap: 20px; 121
Flexbox
<html><head><style> </style></head><body>
.flex-container { <h1>The align-content Property</h1>
display: flex; <div class="flex-container">
height: 600px; <div>1</div>
flex-wrap: wrap; <div>2</div>
align-content: flex-end; <div>3</div>
overflow: scroll; <div>4</div>
background-color: DodgerBlue; <div>5</div>
} <div>6</div>
.flex-container > div { <div>7</div>
background-color: #f1f1f1; <div>8</div>
width: 100px; <div>9</div>
margin: 10px; <div>10</div>
text-align: center; <div>11</div>
line-height: 75px; <div>12</div>
font-size: 30px; </div></body></html>
122
}
Flexbox
123
Grid in CSS
• 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.
• The CSS grid layout module excels at dividing a page into major regions or
defining the relationship in terms of size, position, and layer, between parts of
a control built from HTML primitives.
Properties for the Grid Container
• display
.container {
display: grid | inline-grid;}
• grid-template-columns: col-start 2|1fr 50px 1fr 1fr|repeat(3, 20px [col-start])
• grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
• grid-template-areas: Defines a grid template by referencing the names of the
grid areas which are specified with the grid-area property
.container {
grid-template-areas:
"<grid-area-name> | . | none | ..."
"...";} 124
Grid in CSS
Properties for the Grid Items
• grid-column-start: <number> | <name> | span <number> | span <name> | auto;
• grid-column-end: <number> | <name> | span <number> | span <name> | auto;
• grid-row-start: <number> | <name> | span <number> | span <name> | auto;
• grid-row-end: <number> | <name> | span <number> | span <name> | auto;
• grid-column: <start-line> / <end-line> | <start-line> / span <value>;
• grid-row: <start-line> / <end-line> | <start-line> / span <value>;
•grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
.item-d {
grid-area: 1 / col4-start / last-line / 6;
}
125
Grid in CSS
<html><head><style> .grid-container > div {
.item1 { grid-area: header; } background-color: pink;
.item2 { grid-area: menu; } text-align: center;
.item3 { grid-area: main; } padding: 20px 0;
.item4 { grid-area: right; } font-size: 30px;
.item5 { grid-area: footer; } }
.grid-container { </style></head><body>
display: grid; <h1>Grid Layout</h1>
grid-template-areas: <div class="grid-container">
'header header header header <div class="item1">Header</div>
header header' <div class="item2">Menu</div>
'menu main main main right right' <div class="item3">Main</div>
'menu footer footer footer footer <div class="item4">Right</div>
footer';
<div class="item5">Footer</div>
gap: 10px;
</div>
background-color: #2196F3;
</body></html> 126
padding: 10px;}
Grid in CSS
127
Grid in CSS
<html><head><style> .one {
*{ grid-column: 1 / 3;
box-sizing: border-box;} grid-row: 1;}
.wrapper { .two {
max-width: 940px; grid-column: 2 / 4;
margin: 0 auto;} grid-row: 1 / 3;}
.wrapper > div { .three {
border: 2px solid rgb(233 171 88); grid-column: 1;
border-radius: 5px; grid-row: 2 / 5;}
background-color: pink; .four {
padding: 1em; grid-column: 3;
color: green;} grid-row: 3;}
.wrapper { .five {
display: grid; grid-column: 2;
grid-template-columns: repeat(3, 1fr); grid-row: 4;}
gap: 10px; .six {
background-color: blue; grid-column: 3;
grid-auto-rows: minmax(100px, auto); grid-row: 4;}
} </style></head
128
Grid in CSS
<body>
<h1>Grid Layout</h1>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
129
Responsive Web Design
• Responsive web design makes your web page look good on all devices.
• Responsive web design (RWD) is a web development approach that creates
dynamic changes to the appearance of a website, depending on the screen
size and orientation of the device being used to view it.
• Web pages can be viewed using many different devices: desktops, tablets,
and phones. Web page should look good, and be easy to use, regardless of
the device. Web pages should not leave out information to fit smaller devices,
but rather adapt its content to fit any device.
Desktop Tablet Phone
• It is called responsive web design when you use CSS and HTML to resize,
hide, shrink, enlarge, or move the content to make it look good on any screen.
130
Creating a responsive webpage in HTML
• Webpage can be made responsive by adding a “viewport“. The viewport does
not have any fixed size.
<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′>
• For displaying responsive images on the webpage, we can use the <picture>
element of HTML
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.
Media Queries
• With media queries you can define completely different styles for different
browser sizes.
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}}
131
Creating a responsive webpage in HTML
<html><head> .right {
<meta name="viewport" background-color: #04AA6D;
content="width=device-width, initial- padding: 20px;
scale=1.0"> float: left;
<style> width: 20%;}
*{ @media screen and (max-width: 800px) {
box-sizing: border-box; .left, .main, .right {
} width: 100%; }}
.left { </style></head><body>
background-color: #2196F3; <h2>Media Queries</h2>
padding: 20px; <div class="left">
float: left; <p>Left Menu</p>
width: 20%} </div>
.main { <div class="main">
background-color: #f1f1f1; <p>Main Content</p>
padding: 20px; </div>
float: left; <div class="right">
width: 60%;}
<p>Right Content</p>
</div>
</body></html> 132
Creating a responsive webpage in HTML
133
