Comprehensive Assessment
Prof. Vijya Tulsani, Assistant Professor
IT and Computer Science
CHAPTER-3
HTML,CSS,Javascript
What is HTML?
• HTML is a language for describing web pages.
• With HTML you can create your own Web site.
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags to describe web pages
• HTML is not case sensitive language.
HTML Tags
• HTML markup tags are usually called HTML tags
• A tag is always enclosed in angle bracket
<> like <HTML>
• HTML tags normally come in pairs like <HTML> and </HTML>
i.e. Start tag = <HTML>
End tag =</HTML>
• Start and end tags are also called opening tags and closing tags
What are HTML Documents and Web Pages ?
• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
How to Start?
• Write html code in notepad.
• Save the file with (.Html)/(.Htm) extension.
• View the page in any web browser viz. Chrome , firefox etc.
• The purpose of a web browser is to read html documents and display
them as web pages.
Code with HTML block
CODE :
OUTPUT
Explanation of TAGS
• <HTML>
Describe HTML web page that is to be viewed by a web browser.
• <HEAD> -
This defines the header section of the page.
• <TITLE> -
This shows a caption in the title bar of the page.
• <BODY> -
This tag show contents of the web page that will be displayed.
Types of HTML Tags
• There are two different types of tags
1. Container Element
Container Tags contains start tag & end tag
i.e. <HTML>… </HTML>
2. Empty Element
Empty Tags contains only start tag i.e. <BR>
Text formatting tags
➢ Heading Element :
• There are six heading elements :
<H1>,<H2>,<H3>,<H4>, <H5>,<H6>
• All the six heading elements are container tag and requires a closing
tag.
• <h1> will print the largest heading
• <h6> will print the smallest heading
Heading Tag Code - Text formatting tags
CODE : OUTPUT
Text Alignment Tag
• It is use to change alignment of the text.
1.Left alignment <align=“left”>
2.Right alignment <align=“right”>
3.Center alignment <align=“center”>
Text Alignment Tag
CODE :
Text Alignment Tag
OUTPUT :
HTML Comment Tags
• You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
• Note that there is an exclamation point (!) in the start tag, but not in
the end tag.
• With comments you can place notifications and reminders in your
HTML code:
Heading Tag Code - Text formatting tags
CODE :
OUTPUT
Hyperlink
• HTML uses the <a> anchor tag to create a link to another document or web
page.
• An anchor can point to any resource on the Web: an HTML page, an image, a
sound file, a movie, etc.
• The syntax of creating an anchor: <a href="url">Text to be displayed</a>
✓ The <a> tag is used to create an anchor to link from
✓ href attribute is used to tell the address of the document or page we are linking
to
✓ words between the open and close of the anchor tag will be displayed as a
hyperlink.
Hyperlink
The Target Attribute:
• With the target attribute, you can define where the linked document
will be opened.
• By default, the link will open in the current window.
• alink - sets a color for active links or selected links.
• link - sets a color for linked text.
• vlink - sets a color for visited links - that is, for linked text that you have
already clicked on.
Image source : Google
Hyperlink
Email Links :
• To create an email link, you will use mailto: plus your email address.
• <a href="mailto:[email protected]">Prof. Priya
Patel</a>
Image source : Google
Hyperlink
Email Links Example :
Output :
Image source : Google
Colors in HTML
• Colors are very important to give a good look and feel to your website.
• You can specify colors on page level using
• <body> tag
• bgcolor attribute to set colors for individual tags
• The <body> tag has following attributes which can be used to set different
colors.
Image source : Google
Colors in HTML
1. bgcolor - sets a color for the background of the page.
2. text - sets a color for the body text.
3. alink - sets a color for active links or selected links.
4. link - sets a color for linked text.
5. vlink - sets a color for visited links - that is, for linked text that you
have already clicked on.
Image source : Google
Bgcolor – Colors in HTML
bgcolor - sets a color for the background of the page.
CODE : OUTPUT
Text – Colors in HTML
text - sets a color for the body text.
CODE :
OUTPUT
link– Colors in HTML
link - sets a color for linked text.
CODE :
OUTPUT
HTML Lists
• HTML provides a simple way to show unordered lists (bullet lists) or
ordered lists (numbered lists).
1. Unordered lists
2. Ordered lists
3. Definition lists
Image source : Google
HTML Lists
Unordered Lists :
• An unordered list is a list of items marked with bullets (typically small
black circles).
• An unordered list starts with the <ul> tag.
• Each list item starts with the <li> tag.
Image source : Google
Unordered Lists :
CODE : OUTPUT
HTML Lists
Ordered Lists
• An ordered list is also a list of items.
• The list items are marked with numbers.
• An ordered list starts with the <ol> tag.
• Each list item starts with the <li> tag.
Image source : Google
Unordered Lists :
CODE : OUTPUT
HTML Lists
Definition Lists
• Definition lists consist of two parts: a term and a description.
• To mark up a definition list, you need three HTML elements :
• a container <dl>
• a definition term <dt>
• a definition description <dd>.
Image source : Google
Definition Lists
CODE : OUTPUT
HTML Table
• Tables are defined with the <table> tag.
• A table is
1. divided into rows (with the <tr> tag), and
2. each row is divided into data cells or columns (with the <td> tag).
➢ The letters td stands for table data, which is the content of a data cell.
➢ A data cell can contain text, images, lists, paragraphs, forms, horizontal
rules, tables, etc.
➢ Border=“color” is used inside table tag to set border of a table
HTML Table
CODE : OUTPUT
Headings in HTML Table
• An HTML table contains a set of columns and actual data rows and
each row consists of one or more cells, which can be either header or
data cells.
• Headings in a table are defined with the <th> tag.
• The < th > element defines a header cell in a table.
Image source : Google
HTML Table
CODE : Output :
HTML Table
Table Tags :
Image source : Google
HTML Image tag
• Images are very important to beautify as well as to depict many complex
concepts in simple way on your web page.
Insert Image :
• You can insert any image in your web page using <img> tag.
<img src="Image URL" ... attributes-list/>
• You can use PNG, JPEG or GIF image file based on your comfort but make sure
you specify correct image file name in src attribute.
• Image name is always case sensitive.
Image source : Google
HTML Image tag
Set Image Location :
• Usually we keep our all the images in a separate directory.
• So let's keep HTML file test.htm in our home directory and create a
subdirectory images inside the home directory where we will keep our
image test.png.
Image source : Google
HTML Image tag
CODE :
Image source : Google
HTML Image tag
OUTPUT :
HTML Image tag
Set Image Width/Height :
• You can set image width and height based on your requirement using width and
height attributes.
• You can specify width and height of the image in terms of either pixels or
percentage of its actual size.
Image source : Google
HTML Image tag
CODE :
Image source : Google
HTML Image tag
OUTPUT :
Image source : Google
HTML Image tag
Set Image Border :
• By default image will have a border around it, you can specify border thickness in
terms of pixels using border attribute.
• A thickness of 0 means, no border around the picture.
<body>
<p>Setting image Border</p>
<img src="/html/images/test.png" alt="Test Image" border="3"/>
</body>
Image source : Google
HTML Image tag
Set Image Border Code :
Image source : Google
HTML Image tag
Set Image Border Output :
Image source : Google
HTML Image tag
Set Image Alignment :
• By default image will align at the left side of the page, but you can use align
attribute to set it in the center or right.
Image source : Google
HTML Image tag
Set Image Alignment :
Image source : Google
HTML Image tag
Set Image Alignment :
Image source : Google
Creating Frames
• To use frames on a page we use <frameset> tag instead of <body> tag.
• The <frameset> tag defines, how to divide the window into frames.
• The rows attribute of <frameset> tag defines horizontal frames and cols
attribute defines vertical frames.
• Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.
Example : Creating Frames
CODE : FRAME
OUTPUT
Example : Creating Frames
CODE : TOP FRAME
Example : Creating Frames
CODE : MAIN FRAME
Example : Creating Frames
CODE : BOTTOM FRAME
Example : Creating Frames
OUTPUT
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once
• External stylesheets are stored in CSS files
CSS Syntax
• A CSS rule consists of a selector and a declaration block.
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated by a
colon.
• Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
CSS Syntax
p {
color: red;
text-align: center;
}
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each HTML page must include a reference to the external style
sheet file inside the <link> element, inside the head section.
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
• An external style sheet can be written in any text editor, and must
be saved with a .css extension.
• The external .css file should not contain any HTML tags.
• Here is how the "mystyle.css" file looks:
Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside
the head section.
Internal CSS
<html>
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a
heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
JavaScript
• JavaScript was initially created to “make web pages alive”.
• The programs in this language are called scripts. They can be
written right in a web page’s HTML and run automatically as the
page loads.
• Scripts are provided and executed as plain text. They don’t need
special preparation or compilation to run.
• In this aspect, JavaScript is very different from another language
called Java.
www.paruluniversity.ac.in
