HTML Pptshow

HTML
stands
for
Hyper
Text
Markup
Language
Hyper is the opposite of linear. HTML allows the person viewing the
World Wide Web page to go anywhere,any time they want.
Text is what you will use. Real, honest to goodness English letters.
Mark up is what you will do.It Refers to sequence of characters or
symbols that are inserted in text or word processing file
Language because they needed something that started with "L" to finish
HTML and Hypertext Markup Louie didn't flow correctly. Because it's a
language, really -- but the language is plain English.
12/25/2014
A.Nagesh,Informatics
Dept.
HTML Document Structure

HTML consists of standard ASCI (American Standard Character
Interchange) text surrounded by html tags.
Tags are instructions which tell a web browser how to display a
document.
HTML tags are enclosed within < and > symbols so that the
editor knows that anything within those symbols needs to be
interpreted as an instruction rather than being displayed as
text.
HTML files are saved with an .html or .htm extension
HTML files are created by using a simple text editor
(Notepad,Wordpad etc.,)
HTML tags normally come in pairs like and 
The first tag in a pair is the start tag, the second tag is the end
tag
The text between the start and end tags is the element content
12/25/2014
HTML tags are not case
sensitive, means the same as 
Dept.
Many HTML tags contain one or more attributes that can give extra
information to tell the browser how to interpret the tag.( In most tags,
the attributes are optional
Attributes always come in name/value pairs like this: name="value".
<TAG ATTRIBUTE1=value1 ATTRIBUTE2=value2> </TAG>
Attributes are always added to the start tag of an HTML element.
Attribute values should always be enclosed in quotes. Double style
quotes are the most common, but single style quotes are also allowed
An html document is divided into two main sections the head
section and the body section.
The head section contains information about the document and is
usually placed at the top of the html document (so it can load into the
browser first) and wont be displayed inside your browser window.
The body section contains the content of your document that will be
displayed, such as text and images.
12/25/2014
Dept.
Basic HTML Tags

<HTML> ... </HTML> Tag
This element identifies the document as containing HTML elements.

The HTML element is not visible upon HTML user agent rendering and
can contain only the <HEAD> and <BODY> elements.
<HEAD> ... </HEAD> Tag

The head of an HTML document is an unordered collection of
information about the document.
<TITLE> ... </TITLE> Tag
<TITLE> is included in the head section
<TITLE>- Specifies the title of the document that will display in your
browsers title bar
<BODY> ... </BODY> Tag
The body of a HTML document contains all the text and images that
make up the page, together with all the HTML elements that provide
the control/formatting of the page
12/25/2014
Dept.
Attributes of <BODY>
BGCOLOR
The BGCOLOR attribute, allows setting of the background colour for
the document.
Example :<BODY BGCOLOR="#rrggbb">
Document here
</BODY>
BACKGROUND
The BACKGROUND attribute can be used to point to an image file that
will be tiled across the browser window, to provide a background for
the document. Specifying :
Example :<BODY BACKGROUND="URL or path/filename.gif">
Document here
</BODY>
12/25/2014
Dept.
TEXT
This attribute is used to control the colour of all the normal text
in the document.
Example :<BODY TEXT="#rrggbb">
Document here
</BODY>
LINK, VLINK, and ALINK attributes

These attributes allow control over the link text colouring. VLINK
stands for visited link, and ALINK stands for active link. The default
colouring of these is: LINK=blue (#0000FF), VLINK=purple (#400040),
and ALINK=red (#FF0000).
Example :<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Document here
</BODY>
12/25/2014
Dept.
HTML Document Structure

Set up an html document
1 Open your HTML editor
You should have a blank document to begin with
2 Enter the following HTML.
<HTML>
<HEAD>
<TITLE>Cannington Cougars Football Club Website</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black" LINK="blue"
VLINK="purple" ALINK="red" BACKGROUND="back.gif">
</BODY>
</HTML>
3 Save the file as index.html. Make sure the file called back.gif has also
been saved in that same location.
4 Preview your document in your web browser. To do this, you can open
your web browser, go to your file menu and then open the index file
you just saved. Many HTML editors also have a built in preview option.
12/25/2014
Dept.
Headings
HTML defines six levels of heading. A Heading element implies all the
font changes, paragraph breaks before and after, and white space
necessary to render the heading.
Headings are defined with the <h1> to <h6> tags. <h1> defines the
largest heading. <h6> defines the smallest heading.
The exact sizes they appear as will vary from one browser to another
<H1>Level 1 heading</H1>
ALIGN attribute
The ALIGN = left | center | right attribute has been added to the <H1>
through to <H6> elements.
Example :<H1 ALIGN=center>Hello, this is a heading</H1>
HTML automatically adds an extra blank line before and after a
heading.
12/25/2014
Dept.
Horizontal rules
A horizontal <HR> rule may be used to place a dividing line in your

document and is a good way to separate different sections. It will
usually appear as 3D style engraved line.
Some of the attributes that can be included in a <HR> tag are:
WIDTH
Can be specified in pixels or percentage of page width
<HR WIDTH=150> or <HR WIDTH=80%>
ALIGN
Specifies if the line will be aligned to the left, center (use
US spelling) or right <HR ALIGN=center>
SIZE
Specifies the height (thickness) of the line in pixels
<HR SIZE=5>
NOSHADE Normally a horizontal rule will appear as an engraved line.
Specifying this option will make it appear as a solid colour.
<HR NOSHADE
COLOR
Internet Explorer allows the specifying of the hard
rule colour.Accepted values are any of the Explorer supported colour
names, or any acceptable rrggbb hex triplet.
<HR COLOR=name|#rrggbb>
12/25/2014
Dept.
Comments in HTML
The comment tag is used to insert a comment in the HTML source
code. A comment will be ignored by the browser. You can use
comments to explain your code, which can help you when you edit the
source code at a later date.
Example :
Line Breaks
The Line Break element specifies that a new line must be started at the
given point.
The tag is used when you want to end a line, but don't want to
start a new paragraph. The tag forces a line break wherever you
place it.
Example :This is a para graph with line breaks
The tag is an empty tag. It has no closing tag.
12/25/2014
Dept.
Paragraphs
The Paragraph element indicates a paragraph. Typically, paragraphs
are surrounded by a vertical space of one line or half a line. With
some browsers, the first line in a paragraph is indented.
Paragraphs are defined with the tag.
This is a paragraph
This is another paragraph
ALIGN attribute
Basically, ALIGN = left | center | right attributes have been added to
the element.
Example : ... 
All text within the paragraph will be aligned to the left side of the page
layout. This setting is equal to the default element.
 ... 
All text within the paragraph will be aligned to the centre of the page.
 ... 
All text within the paragraph will be aligned to the right side of the
page.
HTML automatically adds an extra blank line before and after a
paragraph.
A division tag <DIV> </DIV> can also be used to create a new
paragraph. The difference is that it doesnt create a blank space before
the paragraph the way a tag will .
12/25/2014
Dept.
Text Formatting Tags
 ... Tag

The Bold element specifies that the text should be rendered in
boldface, where available. Otherwise, alternative mapping is allowed.
Example :The instructions must be read before continuing.
<BIG> ... </BIG> Tag

The <BIG> element specifies that the enclosed text should be
displayed, if practical, using a big font (compared with the current
font).
Example :This is normal text, with <BIG>this bit</BIG> being big text.
 ... Tag

The Emphasis element indicates typographic emphasis, typically
rendered as italics.
Example :The Emphasis element typically renders as Italics.
12/25/2014
Dept.
 ... Tag

The Italic element specifies that the text should be rendered in italic
font, where available. Otherwise, alternative mapping is allowed.
Example :
Anything between the I elements should be italics.
 ... Tag
The element specifies that the enclosed text should be
displayed, if practical, using a small font (compared with the current
font).
Example :This is normal text, with this bit being small text
 ... Tag
The Strong element indicates strong typographic emphasis, typically
rendered in bold.
Example :The instructions must be read before
continuing.
12/25/2014
Dept.
 ... Tag

The element specifies that the enclosed text should be
displayed as a subscript, and if practical, using a smaller font
(compared with normal text).
Example :This is the main text, with this bit being subscript.
 ... Tag
The element specifies that the enclosed text should be
displayed as a superscript, and if practical, using a smaller font
(compared with normal text).
Example :This is the main text, with this bit being
superscript.
<STRIKE> ... </STRIKE> Tag
The <STRIKE> ... </STRIKE> element states that the enclosed text
should be displayed with a horizontal line striking through the text.
Alternative mappings are allowed if this is not practical.
Example :This text would be <STRIKE>struck through</STRIKE>
12/25/2014
Dept.
 ... Tag

The ... Elements state that the enclosed text should be
rendered, if practical, underlined. This is an HTML 3.0 element and
may not be widely supported.
Example :The main point of the exercise
<PRE> ... </PRE> Tag
The Preformatted Text element presents blocks of text in fixed-width
font, and so is suitable for text that has been formatted on screen.
WIDTH attribute
The <PRE> element may be used with the optional WIDTH attribute,
which is a Level 1 feature. The WIDTH attribute specifies the maximum
number of characters for a line and allows the HTML user agent to
select a suitable font and indentation. If the WIDTH attribute is not
present, a width of 80 characters is assumed. Where the WIDTH
attribute is supported, widths of 40, 80 and 132 characters should be
presented optimally, with other widths being rounded up.
Example: <PRE WIDTH="80">
This is an example line.
12/25/2014
</PRE>
Dept.
The FONT tag
One of the most commonly used formatting tags in standard html is

the tag. With its various properties it allows you to specify
several types of formatting at once. These are some of the properties
that can be set in the font tag:
SIZE
specifies the size where 1=smallest and 7=largest. Size 2
or
3 will usually be close to normal text size. The exact size
may
vary from one browser to another.
COLOR
specifies the colour of the text (NOTE: you need to use
US
spelling).
FACE
specifies the font (such as Arial) that will be used. You
can
specify an alternate font in case the person viewing your
site
doesnt have the one you specified. Simply type the
name of
each font separated by commas. If the first font
isnt available
the next will be used. If none are
available, the default
system font will be used.
Example:

Sample text

12/25/2014
Dept.
The Image Tag
The Image element is used to incorporate in-line graphics into an HTML

document. This element cannot be used for embedding other HTML
text.
In HTML, images are defined with the <img> tag. The <img> tag is
empty, which means that it contains attributes only and it has no
closing tag.
Image Attributes
SRC Specifies the URL of the image to be displayed on page.
HEIGHT
These two attributes specify the size of the image
WIDTH
in pixels. If they are not included, the image will display
at its normal size. It is usually a good idea to include
these
attributes for two reasons.
1 The browser can load the picture quicker when it
already
knows its exact size.
2 The browser will make room for the loading
picture rather
than shifting everything down the page as each
image loads.
HSPACE
These attributes specify the amount of horizontal
VSPACE
and vertical space around the picture in pixel
measurements.
12/25/2014
Dept.
ALT
Specifies the text that will display while the picture is
loading
or if it doesnt load. If the pictures important,
make sure you
include this. Some people dont have
browsers that show
images and some turn image loading off
to speed up their
browsing. Recent browsers use the
alternate text as a popup when the mouse is moved
over the image.
BORDER
Specifies the width (in pixels) of the pictures border. Set
this
to 0 if the picture is a hyper-link; otherwise a border the
colour of your links will appear around the image.
ALIGN
TOP
Aligns the top of the picture with the
top of
the current line of text
MIDDLE
Aligns the middle of the picture with the
middle of the current line of text
BOTTOM
Aligns the bottom of the picture with
the
bottom of the current line of text
LEFT
Aligns the picture to the left of text and
will
make text wrap around the picture
RIGHT
Aligns the picture to the right of text
and
will make text wrap around the picture
12/25/2014
Dept.

HTML Pptshow

Uploaded by

Copyright:

Available Formats

HTML Pptshow

Uploaded by

Document Information

Original Description:

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

HTML Pptshow

Uploaded by

Copyright:

Available Formats

HTML

HTML Document Structure

Basic HTML Tags

This element identifies the document as containing HTML elements.

<HEAD> ... </HEAD> Tag

<BODY> ... </BODY> Tag

LINK, VLINK, and ALINK attributes

HTML Document Structure

A horizontal <HR> rule may be used to place a dividing line in your

Text Formatting Tags

<B> ... </B> Tag

<BIG> ... </BIG> Tag

<EM> ... </EM> Tag

Text Formatting Tags

<I> ... </I> Tag

Text Formatting Tags

<SUB> ... </SUB> Tag

Text Formatting Tags

<U> ... </U> Tag

The FONT tag

One of the most commonly used formatting tags in standard html is

The Image Tag

The Image element is used to incorporate in-line graphics into an HTML

You might also like