SK - PUJITHA, Asst - Prof, Dept of CSE, VLITS

SK.PUJITHA ,Asst .
Prof ,Dept of CSE,VLITS

TEXTBOOKS
1. Programming the World Wide Web, Robet

W Sebesta, 7ed, Pearson.
2. Web Technologies, Uttam K Roy, Oxford
3. The Web Warrior Guide to Web Programming,
Bai, Ekedahl, Farrelll, Gosselin, Zak, Karparhi,
Maclntyre, Morrissey, Cengage
SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

OBJECTIVES
This course is designed to introduce students

with no programming experience to the
programming languages and techniques
associated with the World Wide Web. The
course will introduce web-based media-rich
programming tools for creating interactive web
pages.

OUTCOMES
• Analyse a web page and identify its elements and attributes.

• Create web pages using XHTML and Cascading Styles sheets.
• Build dynamic web pages.
• Build web applications using PHP.
• Programming through PERL and Ruby
• Write simple client-side scripts using AJAX

SYLLABUS
UNIT-I: HTML, CSS Basic Syntax, Standard HTML

Document Structure, Basic Text Mark up, Images, Hypertext
Links, Lists, Tables, Forms, HTML5
CSS: Levels of Style Sheets, Style Specification Formats,

Selector Forms, The Box Model, Conflict Resolution

What is HTML?

HTML is the standard markup language for creating Web
pages.

HTML stands for Hyper Text Markup Language.

HTML describes the structure of Web pages using
markup.

HTML elements are the building blocks of HTML pages.

What is HTML?
HTML is case-insensitive (or) not case-sensitive.
The latest version of HTML is HTML5 introduced in
the year 2014.

Web browsers read HTML documents and display them.
HTML elements are represented by tags.
Browsers do not display the HTML tags, but use them to
render the content of the page
The output of HTML programs is displayed in a web

browser’s window.
What is HTML?
The window contains two sections:

(i) Header Section: It contains meta information about
document.
(ii) Body Section: It contains content HEADER
to be displayed
SECTION in the web
page.
HTML was invented by Tim berners

Lee. HTML was introduced in the
year 1989. The latest version of BODY SECTION
HTML is HTML5 which was
introduced in the year 2014.
What is HTML?
HTML programs don’t have any standard syntax i.e
(i) Any string enclosed with angular brackets(< >) is treated

as tag and will be processed by interpreter.
(ii) Any string that is not enclosed with angular brackets
(< >) is treated as text and will be displayed on the
web page.
STRUCTURE OF HTML
The structure of HTML program is shown below.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

STRUCTURE OF HTML
Let us see HTML program that displays simple text message on the output screen i.e
window.
<HTML>
<HEAD>
<TITLE> HEADER SECTION
first program
</TITLE> First program

</HEAD>
<BODY> Welcome to html
welcome to html
BODY SECTION
</BODY>
</HTML>
BASIC TEXT MARK UP
 An HTML element usually consists of a start tag and end tag, with the content
inserted in between .
 There are two types of HTML tags.

1. Container Tags.
2. Empty tags.
Container tags:
 They are the tags that encloses the content with a starting tag and ending tag.
 The examples of container tags are <b>, <i>, <u> etc
Empty tags:
 They are the tags that have a start tag, but doesn’t have an end tag and content .
 The examples of empty tags are <br>, <hr>,<img>, <input> etc.
 Empty tags can also be represented as <br/>, <hr/>, <img/>, <input/> etc.
BASIC TEXT MARK UP
1. <BR> :: The <br> tag defines a line break.
Example1.html
Welcome <br> to<br> html
OUTPUT:

BASIC TEXT MARK UP
2. <HR> :: The <hr> tag defines a horizontal line.

Example1.html
Department of Computer Science & Engineering
<hr>
OUTPUT:

BASIC TEXT MARK UP
2. <HR> :: The <hr> tag defines a horizontal line.
Example2.html
Vignan’s Lara Institute of Technology and Science
<hr>Department of Computer Science & Engineering
OUTPUT:

BASIC TEXT MARK UP
3. <SUP> :: It defines a superscript.
Example1.html
(A + B)<sup>2 </sup>
OUTPUT:

BASIC TEXT MARK UP
4. <SUB> :: It defines a subscript.
Example1.html
H<sub> 2</sub> O
OUTPUT:

BASIC TEXT MARK UP
5. <pre> :: It is used for indicating preformatted text.
Example1.html
Welcome
To
HTML
OUTPUT:
Welcome to HTML
Reason: The browser removes any extra lines or extra spaces from the program while
displaying the output on the window.

BASIC TEXT MARK UP
6. <P> :: It defines a paragraph.
Example1.html
Welcome to html.<p>HTML stands for Hyper Text Markup Language. It
is an interpreted language. It was developed by tim berners-lee. It was
first introduced in the year 1991. It is maintained by World Wide Web
Consortium(W3C).</p>The latest version of HTML is HTML5
introduced in the year 2014.
OUTPUT:

BASIC TEXT MARK UP
 The important attribute of <p> tag is align.
 The possible values for align attribute are left, right and center.
Example1.html
<p align=“right”>Welcome to html</p>.
OUTPUT:

BASIC TEXT MARK UP
Example1.html
<p align=“center”>Welcome to html</p>.
OUTPUT:

BASIC TEXT MARK UP
7. <H1> to <H6> :They define HTML headings.
Example1.html
<h1>welcome to html</h1>
OUTPUT:
BASIC TEXT MARK UP
8.<strike> or <s> or <del> :: It displays a strikethrough text.
Example1.html
<strike>Department of Computer Science & Engineering </strike>
OUTPUT:

BASIC TEXT MARK UP
9.<u> :: It displays underlined text.

Example1.html
<u>Department of Computer Science & Engineering
</u>
OUTPUT:

BASIC TEXT MARK UP
10.<font> ::
 It allows designer to change size, color and face of the text.
 The attributes for font tag are size and color.
 The possible values for the attributes are listed in the table
given below:
Attribute Values Description
Name
color Red, green, blue. magenta Color can be represented in 2ways:
etc (i) Using color codes
(ii) Using color names
For Eg:
#FF0000 represents red color.
#800000 represents gray color.

BASIC TEXT MARK UP

Name
Size 1,2,3,4,5,6,7 Default value for size is 3.

Size=1 represents smallest font.
Size=7 represents largest font.
If the user mentions a value less than 1 for size
attribute, browser treats value of size as 1.
Example:
size=0  size=1
size= -5  size=1
If the user mentions a value greater than 7 for size
attribute, browser treats value of size as 7.
Example:
size=90  size=7
size= 500  size=7

BASIC TEXT MARK UP
Example1.html
<font color=red> welcome to html </font>
OUTPUT:

BASIC TEXT MARK UP
Example1.html
<font color=red size=7> welcome to html </font>
OUTPUT:

BASIC TEXT MARK UP
11.<marquee> :: It moves the text across a defined section

of web page.
Direction=up, down, left, right
Default value is left
Behavior=scroll, alternate
Example1.html
<marquee> welcome to html</marquee>
OUTPUT:
BASIC TEXT MARK UP
12.<mark>: It is used to highlight a text.

Example1.html
<mark>this text is highlighted</mark>
OUTPUT:
The default color to highlight the text is yellow.
The default color of text is black.

BASIC TEXT MARK UP
13.<center> :: It displays the text at the center of the

line .
Example1.html
<center> welcome to html</center>
OUTPUT:

BASIC TEXT MARK UP
14.<b> (or) <strong> :: It displays text in bold.

Example1.html
<b> welcome to html</b>
OUTPUT:

BASIC TEXT MARK UP
15.<i> :: It displays text in italic.

Example1.html
OUTPUT:

IMAGES
The <img> tag is used to insert an image in the web

page.
The <img> tag has two important attributes:
Attribute Name Description

Src
It specifies the location of the image in the
computer.
Alt
It specifies the alternate text to be displayed
when the browser failed to display the image.
IMAGES
The following code inserts an image in the web page:
<img src=“D:\Sample Pictures\desert.jpg”>

IMAGES
<img src=“D:\Sample Pictures\desert.jpg” alt =“desert”>
desert

IMAGES
<img src=“D:\Sample Pictures\desert.jpg” width=100 height=100>

IMAGES
<img src=“D:\Sample Pictures\desert.jpg”>
The above code works well for Internet Explorer and Google chrome,
but doesn’t work well for Mozilla Firefox.
The following code should be used to insert an image in web page

using Mozilla Firefox.
 <img src=“file:\\\ D:\Sample Pictures\desert.jpg”>

HYPERLINKS
<A> :
 It is called anchor tag.
 It defines a hyperlink, which is used to link from one page
to another page.

HYPERLINKS
<A> :
 The important attributes of <a> tag are:
Attribute Name Description

href It indicates the location (or) address of web page to
which the user want to navigate
target The target attribute inside anchor tags (<a>) tells
the browser where the linked document should be
loaded.
SK.PUJITHA ,Asst . Prof ,Dept of CSE, VLITSc

HYPERLINKS
Click here to visit Facebook website
<a href = “ https://www.facebook.com “ target = “_self “ >

Click here </a> to visit facebook website
SK.PUJITHA ,Asst . Prof ,Dept of CSE, VLITS

HYPERLINKS
Click here to visit facebook website
<a href = “ https://www.facebook.com “ target = “ _blank “ >

Click here
</a>
to visit facebook website
HYPERLINKS
Click here to download CSE syllabus
<a href = “ D:\cse.pdf “ target = “ _blank “ >

Click here
</a>
to download CSE syllabus
HYPERLINKS
HTML stands for Hyper Text Markup

Language. It was introduced in the year
1991 by Tim Berners lee. It is an
example1.html interpreted language. It is maintained by
World Wide Web Consortium(W3C).
<a href =“ D:\history.html “ target = “ _blank “ >
HTML is Case sensitive.
Click here history.html
</a> <p>
to know history of HTML HTML stands for Hyper Text Markup
Language. It was introduced in the year
1991 by Tim Berners lee. It is an
Click here to know history of HTML
interpreted language. It is maintained by
World Wide Web Consortium(W3C).
HTML is Case sensitive.
</p>
LISTS
A list is a collection of related elements.

There are 3 lists in HTML
(i) Unordered List
(ii) Ordered List
(iii) Definition List
Unordered List:
 An unordered list is a collection of related items that

have no special order or sequence.
 Let us see a simple example for Unordered list.

SK.PUJITHA ,Asst . Prof ,Dept of CSE, VLITSc
LISTS
* The default type for unordered list is “disc”.

<HTML>
<HEAD>
<TITLE> Unordered List </TITLE> Unordered List
</HEAD>
•TV9
<BODY> •ETV2
<UL type=“disc” > •ABN
•HMTV
<LI> TV9 </LI>
<LI> ETV2 </LI>
DISC
<LI> ABN </LI>
<LI> HMTV </LI>
</UL>
</BODY>
</HTML>
LISTS
<HTML>
<HEAD>
oTV9
</HEAD>
oETV2
<BODY> oABN
<UL type=“circle” > oHMTV
<LI> TV9 </LI>

CIRCLE
<LI> ETV2 </LI>
<LI> ABN </LI>
<LI> HMTV </LI>
</UL>
</BODY>
</HTML>
LISTS
<HTML>
<HEAD>
</HEAD> TV9
ETV2
<BODY> ABN
<UL type=“square” > HMTV
<LI> TV9 </LI>

SQUARE
<LI> ETV2 </LI>
<LI> ABN </LI>
<LI> HMTV </LI>
</UL>
</BODY>
</HTML>
ORDERED LIST
• An ordered list is used to display a list of items that need to

be placed in a specific order.
• An ordered list is defined by using a tag called <OL>.
• The attributes of <OL> tag are:
Name
type 1, i, I, a, A Default value for type is 1.
start 1,2,3,4,5,6,7………. Default value for start is 1.

<HTML>
* By default, Ordered list is a numbered list.
<HEAD>
<TITLE> Ordered List </TITLE>
</HEAD>
<BODY> Ordered List
<OL type=“1” >
1. TV9
2. ETV2
<LI> TV9 </LI> 3. ABN
4. HMTV
<LI> ETV2 </LI>
<LI> ABN </LI>
<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
Ordered List
<BODY>
<OL type=“1” start=“4” > 4. TV9
5. ETV2
6. ABN
<LI> TV9 </LI> 7. HMTV
<LI> ETV2 </LI>

<LI> ABN </LI>
<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
Ordered List
<OL type=“i” >
i. TV9
<LI> TV9 </LI> ii. ETV2
iii. ABN
iv. HMTV
<LI> ETV2 </LI>
<LI> ABN </LI>
<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL type=“i” start=“4” > Ordered List
iv. TV9
<LI> TV9 </LI> v. ETV2
vi. ABN
<LI> ETV2 </LI> vii. HMTV
<LI> ABN </LI>
<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL type=“I” > Ordered List
<LI> TV9 </LI> I. TV9

II. ETV2
III. ABN
<LI> ETV2 </LI>
IV. HMTV
<LI> ABN </LI>
<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
Ordered List
<OL type=“I” start=“4” >
IV. TV9
<LI> TV9 </LI> V. ETV2
VI. ABN
<LI> ETV2 </LI> VII. HMTV
<LI> ABN </LI>

<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL type=“a” > Ordered List
a. TV9
<LI> TV9 </LI> b. ETV2
c. ABN
<LI> ETV2 </LI> d. HMTV
<LI> ABN </LI>

<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL type=“a” start=“4” >
Ordered List
<LI> TV9 </LI>
d. TV9
e. ETV2
<LI> ETV2 </LI> f. ABN
<LI> ABN </LI> g. HMTV
<LI> HMTV </LI>

</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
Ordered List
<OL type=“A” >
A. TV9
<LI> TV9 </LI> B. ETV2
C. ABN
<LI> ETV2 </LI> D. HMTV
<LI> ABN </LI>

<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY> Ordered List
<OL type=“A” start=“4” >
D. TV9
E. ETV2
<LI> TV9 </LI> F. ABN
G. HMTV
<LI> ETV2 </LI>
<LI> ABN </LI>
<LI> HMTV </LI>
</OL>
</BODY>
</HTML>
DEFINITION LIST
• A definition list is a list of terms with a

description of each term.
• Let us discuss a simple example on Definition
List.
Definition Title (or)
Definition Term
HTML
Hyper Text Markup Language Definition Data
XML
eXtensible Markup Language
AJAX
Asynchronous Javascript And XML
<DL>
<DT> HTML </DT>
<DD>Hyper Text Markup Language</DD>
<DT> XML </DT>
<DD> eXtensible Markup Language </DD>
<DT> AJAX </DT>

<DD> Asynchronous Javascript And XML </DD>
</DL>
TABLES
A table is a collection of data (or) organization of data in tabular form i.e

in the form of rows and columns.
The different tags used to create tables in HTML are:
(i) <TABLE>: It defines a table.
(ii) <TR>: It defines a Table Row.
(iii) <TH>: It defines a Table Head.
(iv) <TD>: It defines a Table Data.
(v) <caption>: It is used to give a short description of a table or brief
description or explanation about the table and helps you understand its
purpose.
TABLES
<th>
S.NO ROLL NUMBER ATTENDANCE

<tr>
1 15FE1A0501 75
<tr>
2 15FE1A0502 85
<tr>
<td>
TABLES
1 15FE1A0501 75
2 15FE1A0502 85
The different attributes of <TABLE> tag are:

(i) Border:
 When you create a table, it appears without border and looks incomplete because by
default, the table border is set to zero
 You can add a border to a table using the following statement <table border=1>
(ii) Align:
 By default, the table in a web page is aligned to the left.
1 15FE1A0501 75
2 15FE1A0502 85
You can also align the cell content using align

attribute.
TABLES
By default, the table head elements are

aligned to center in bold font.

1 15FE1A0501 75
2 15FE1A0502 85
TABLES
(iv) bgcolor:
 If you want to change the background color for entire table, use the bgcolor attribute in the
<table> tag.
 To specify a color for bgcolor attribute, you can use
(i) RGB color codes
(ii) Color names.
 You can find color names and color codes from the below link:
https://www.w3schools.com/colors/colors_names.asp
 By default, the table background color is same as the background color of the page.
TABLES
HUMAN’S PERCEPTION: 1 15FE1A0501 75

A table is a collection of
data in rows and columns.
2 15FE1A0502 85
REALITY:
A table is a collection of
data in rows and columns S.NO ROLL NO ATTENDANCE
in the form of cells.
1 15FE1A0501 75
2 15FE1A0502 85
Cell spacing:
 It is used to specify the space between the borders of cells.
 It controls the space between table cells. Although there is no official
default, browsers usually use a default of 2.
Example: Cell spacing=50
TABLES

TABLES

TABLES

(vi) Cell padding:
It sets the amount of space between the contents of the cell and the cell
wall.
The default value for cell padding is 1.
Example: Cell padding for a single cell “S.NO”.
Cell padding=50
Cell padding=2 Cell padding=10
TABLES
The different attributes of <TR> tag are:

(i) align
(ii) bgcolor
The different attributes of <TH> and <TD> tags are:

(i) Align
(ii) Width
(iii) Bgcolor
(iv) Rowspan
(v) Colspan
TABLES
There are two types of tables

(i) Simple Tables
(ii) Complex Tables
Simple Table: A simple table is a table which doesn’t contain
spanned rows and columns.
Complex Table: A complex table is a table which contains
spanned rows and columns.
<table border = 1>
<tr>
<th> NAME </th>
<th> FAVOURITE COLOR </th>
</tr>
<tr>
<td> Sai Krishna </td> NAME FAVOURITE COLOR
<td> Blue </td> Sai Krishna Blue
</tr> Naveen Yellow

<tr> Sudheer Green
<td> Naveen </td>
<td>Yellow </td>
</tr>
<tr>
<td> Sudheer </td>
<td> Green </td>
</tr>
</table>
<table border = 1>
<tr>
<th> S.NO </th>
<th> ROLL NUMBER </th>
<th> ATTENDANCE </th>
</tr>
<tr>
<td> 1 </td> S.NO ROLL ATTENDANCE
NUMBER
<td> 15FE1A0501 </td> 1 15FE1A0501 75
<td> 75 </td> 2 15FE1A0502 85
</tr>
<tr>
<td> 2 </td>
<td> 15FE1A0502 </td>
<td> 85 </td>
</tr>
</table>
SUMMARY

SK - PUJITHA, Asst - Prof, Dept of CSE, VLITS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SK - PUJITHA, Asst - Prof, Dept of CSE, VLITS

Uploaded by

Copyright:

Available Formats

SK.PUJITHA ,Asst .

Prof ,Dept of CSE,VLITS

1. Programming the World Wide Web, Robet

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

This course is designed to introduce students

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

• Analyse a web page and identify its elements and attributes.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

UNIT-I: HTML, CSS Basic Syntax, Standard HTML

CSS: Levels of Style Sheets, Style Specification Formats,

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

HTML is case-insensitive (or) not case-sensitive.

The latest version of HTML is HTML5 introduced in

the year 2014.

HTML elements are represented by tags.

Browsers do not display the HTML tags, but use them to

render the content of the page

The output of HTML programs is displayed in a web

The window contains two sections:

HTML was invented by Tim berners

HTML programs don’t have any standard syntax i.e

(i) Any string enclosed with angular brackets(< >) is treated

(ii) Any string that is not enclosed with angular brackets

(< >) is treated as text and will be displayed on the

The structure of HTML program is shown below.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

</TITLE> First program

 There are two types of HTML tags.

1. <BR> :: The <br> tag defines a line break.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

2. <HR> :: The <hr> tag defines a horizontal line.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

2. <HR> :: The <hr> tag defines a horizontal line.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

3. <SUP> :: It defines a superscript.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

4. <SUB> :: It defines a subscript.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

5. <pre> :: It is used for indicating preformatted text.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

6. <P> :: It defines a paragraph.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

 The important attribute of <p> tag is align.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

7. <H1> to <H6> :They define HTML headings.

8.<strike> or <s> or <del> :: It displays a strikethrough text.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

9.<u> :: It displays underlined text.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

Attribute Values Description

Size 1,2,3,4,5,6,7 Default value for size is 3.

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

SK.PUJITHA ,Asst . Prof ,Dept of CSE,VLITS

11.<marquee> :: It moves the text across a defined section

Direction=up, down, left, right

Default value is left

<marquee> welcome to html</marquee>

12.<mark>: It is used to highlight a text.

<mark>this text is highlighted</mark>