HTML & CSS Training Institute in Ambala ! Batra Computer Centre

Today’s Topics
What is HTML
Definition
History
How it Works
Basic Structure
Types of tags
Basic tags
Ph. No. :9729666670,4000670 Website: www.batracomputercentre.com
What is CSS
How does CSS affects
HTML
Types of CSS
Explain types:
Inline Style
Internal Style
External Style

What is HTML
• HTML stands for Hyper Text Markup
Language, which is the most widely used
language on Web to develop web pages.
• HTML is a computer language devised to allow
website creation. These websites can then be
viewed by anyone else connected to the
Internet.

Definition of HTML
• HyperText is the method by which you move
around on the web — by clicking on special
text called hyperlinks which bring you to the
next page.
• Markup is what HTML tags do to the text
inside them. They mark it as a certain type of
text (italicised text, for example).
• HTML is a Language, as it has code-words and
syntax like any other language.

History of HTML
HTML was created by Berners-Lee in late 1991
but "HTML 2.0" was the first standard HTML
specification which was published in 1995.
HTML 4.01 was a major version of HTML and it
was published in late 1999. Though HTML 4.01
version is widely used but currently we are
having HTML-5 version which is an extension to
HTML 4.01, and this version was published in
2012.

How Does it Work
HTML consists of a series of short codes typed into
a text-file by the site author — these are the tags.
The text is then saved as a html file, and viewed
through a browser, like Internet
Explorer or Netscape Navigator. This browser reads
the file and translates the text into a visible form,
hopefully rendering the page as the author had
intended. Writing your own HTML entails using tags
correctly to create your vision. You can use anything
from a rudimentary text-editor to a powerful
graphical editor to create HTML pages

Basic Structure of HTML

Types of Tags
Container Tags Empty Tags
Container tags have a
beginning and an end tag, the
end tag is similar to the
beginning tag but with a “/”
sign in front of it.
Empty tags are standalone tag
and do not have en end tag.
Example:- <b>and</b> Example:- <br>
<table>and</table>etc. <hr> etc.

Basic Tags
• Heading Tag:
– Any document starts with a heading. You can use
different sizes for your headings. HTML also has
six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds
one line before and one line after that heading.

Example of Heading Tag
Example of code Output

• Paragraph Tag
– The <p> tag offers a way to structure your text
into different paragraphs. Each paragraph of text
should go in between an opening <p> and a
closing </p> tag.
– This tag indicates the starting of a paragraph.

Example of Paragraph Tag

• Line Break Tag
– Whenever you use the <br /> element, anything
following it starts from the next line. This tag is an
example of an empty element, where you do not
need opening and closing tags, as there is nothing to
go in between them.
– The <br /> tag has a space between the
characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the
line break, while if you miss the forward slash
character and just use <br> it is not valid in XHTML

Example of Line Break Tag

• Horizontal Lines
– Horizontal lines are used to visually break up
sections of a document.
– The <hr>tag creates a line from the current
position in the document to the right margin and
breaks the line accordingly.
– The <hr> tag defines a thematic break in an HTML
page .
– The <hr> element is used to separate content (or
define a change) in an HTML page.

Example of Horizontal Line

• Image Tag
– The HTML <img> tag is used to put an image in an
HTML document.
– The <img> tag has two required attributes: src and
alt.
– To link an image to another document, simply nest
the <img> tag inside <a> tags.

Example of Image Tag

• Table Tag
– The HTML tables allow web authors to arrange data
like text, images, links, other tables, etc. into rows and
columns of cells.
– The HTML tables are created using the <table> tag in
which the <tr> tag is used to create table rows
and <td> tag is used to create data cells.
– It includes three elements in it as <th>, <tr>, <td>.
– The <tr> element defines a table row, the <th>
element defines a table header, and the <td>
element defines a table cell.

Example of Table Tag

• Anchor Tag
– The <a> tag defines a hyperlink, which is used to
link from one page to another.
– A link is specified using HTML tag <a>. This tag is
called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes
part of the link and a user can click that part to
reach to the linked document. Following is the
simple syntax to use <a> tag.

Example of Anchor Tag

What is CSS
• The technology behind style sheet is called
CSS, which stands for Cascading Style Sheets.
• CSS is a language that defines style constructs
such as font, color, and positioning, which are
used to describe how information on a web
page is formatted and displayed.
• CSS styles can be stored in an HTML webpage
or in a separate style sheet file.

How does CSS affect HTML
Web browsers apply CSS rules to a document to
affect how they are displayed. A CSS rule is formed
from:
• A set of Properties, which have values set to
update how the HTML content is displayed, for
example I want my element's width to be 50% of
its parent element, and its background to be red.
• A selector, which selects the element(s) you want
to apply the updated property values to. For
example, I want to apply my CSS rule to all the
paragraphs in my HTML document

Types of CSS

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 3 types
of style sheets. The difference is where the style
is defined and the area where that style is
applied. These are:
o Inline Style
o Internal Style Sheet
o External Style Sheet

Inline Styles
• 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
• Inline style sheet within a tag. Applies only to
that particular occurrence of that tag.

Example of Inline Style
• The sytax for inline styles is slightly simpler than
that of Internal and External styles in that there
is no selector and no curly brackets.
– Syntax:-
<element STYLE="property:value">
– Example:-
<h1 style="color:blue;margin-left:30px;">This is a Inline
Style</h1>

Internal Style Sheets
• An internal style sheet may be used if one
single page has a unique style.
• The definition is written once in In the head
part of a page. It must be written on every
page that requires that style.
• Internal styles are placed at the top of each
web page document, before any of the
content is listed.

Example of Internal Style Sheet
• The Internal style sheet is defined within the
head section.
– Syntax:-
<head>
< style type="text/css">
Your Style definitions
go here
< /style>
< /head>
– Example:-
<head>
< style type="text/css">
Body {background-color:
#3333FF; color: #000033;}
p {margin-left: 6px}
< /style>
< /head>

External Style Sheets
• With an External style sheet, you can change
the look of an entire website by changing just
one file!
• External style sheets are separate files full of
CSS instructions (with the file extension .css).
• Each page must include a reference to the
external style sheet file inside the <link>
element.

Example of External Style Sheets
• The <link> element goes inside the <head>
section:
<head>
<link rel="stylesheet" type="text/css" href="mysty
le.css">
</head>
• Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}

CONTACT US
BATRA COMPUTER CENTRE
SCO 15, Dayal Bagh,
Near Hanuman Mandir,
Ambala Cantt.
Phn No.: 9729666670,0171-4000670
Email: info.jatinbatra@gmail.com
Website: www.batracomputercentre.com

HTML & CSS Training Institute in Ambala ! Batra Computer Centre

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to HTML & CSS Training Institute in Ambala ! Batra Computer Centre

Similar to HTML & CSS Training Institute in Ambala ! Batra Computer Centre (20)

More from jatin batra

More from jatin batra (20)

Recently uploaded

Recently uploaded (20)

HTML & CSS Training Institute in Ambala ! Batra Computer Centre