Scribd
Upload
9 views

CA - Unit-3 HTML CSS JS

The document discusses HTML and provides details about various HTML tags and their usage including headings, text formatting, hyperlinks, lists, tables, images and colors. It explains tags like <h1>-<h6>, <p>, <br>, <a>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <img> and how to use them to format text, add links, create lists and tables, insert images and set colors on web pages.

Uploaded by

aman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

CA - Unit-3 HTML CSS JS

The document discusses HTML and provides details about various HTML tags and their usage including headings, text formatting, hyperlinks, lists, tables, images and colors. It explains tags like <h1>-<h6>, <p>, <br>, <a>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <img> and how to use them to format text, add links, create lists and tables, insert images and set colors on web pages.

Uploaded by

aman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 67

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:Priya.patel42089@paruluniversity.ac.in">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

You might also like