Html ppt computer

Introduction toIntroduction to
HTMLHTML
Made by Anmol Pant, Class 8C,
Roll NO.-31

HTML
HTML, which stands for HyperText Markup Language, and it is
used to create hypertext documents for the world wide web.
It provides a means to create structured documents by
denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes, and other items. It allows
images and objects to be embedded and can be used to create
interactive forms. It is written in the form of HTML elements
consisting of "tags" surrounded by angle brackets within the
web page content. A tag is a markup which indicates how the
contents of the webpage should look like.
All the HTML documents are created in a Word
processing software such as Notepad and are saved with the
extension of .htm or .html

Basic HTML Commands
Basic steps: using tags
HTML uses tags to communicate to the client (browser) how to display text
and images. Tags are contained in < > symbols. In most cases you start with
the beginning tag, put in the word or words that will be affected by this
tag, and at the end of the string of word(s), you place a closing tag.
For example, to create a title for a document you would do the following:
<title>My First HTML Document</title>
The closing tag normally contains a "/" before the directive to indicate the
termination of the action.
HTML tags are not case-sensitive, although URLs generally are. In most
cases (with the exception of preformatted text) HTML collapses many
spaces to one space and does not read blank lines. However, when you write
your text you should leave several blank lines between paragraphs to make
editing your HTML source document easier.

The HTML tag
Although not currently required by all clients, the <html> tag signals the point where text
should start being interpreted as HTML code. It's probably a good idea to include it in all
your documents now, so you don't have to go back to your files and add it later.
The <html> tag is usually placed on the first line of your document. At the end of your
document you should close with the </html> tag.
The head tag
Just like the header of a memo, the head of an HTML document contains special
information, like its title. The head of a document is demarcated by <head> and </head>
respectively.
For the purposes of this class, only the title tag, below, should be included in the document
head. A typical head section might look like
<html>
<head>
</head>

Types of HTML tags
Container 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.
• Examples:-
• <b> and </b>
• <table>and</table> etc…
Empty tags
• Empty tags are standalone
tags and do not have an end
tag.
• Examples:-
• <br>
• <p>

Attributes
• Attributes provide additional information to
the tag. A tag becomes more meaningful with
the help of an attribute.
• Example- a simple <p> tag will create a new
paragraph but when we add the align
attribute to it, we can set the alignment of
the paragraph like <p align=“Left” will make
the paragraph aligned to the left of the
browser window.

Titles
A title tag allows you to specify a Document Title in your browser window. When
people make hotlists, this title is what they see in their list after they add your
document. The format is:
Remember, the title usually doesn't appear in the document itself, but in a title box
or bar at the top of the window.
The body tag
Like you might expect, the body tags <body> and </body> define the beginning and end
of the bulk of your document. All your text, images, and links will be in the body of
the document.
The body should start after the head. A typical page might begin like
<html>
<head>
</head>
<body>

Headers
There are up to six levels of headers that can be used in your document, h1 through h6.
Header 1 is the largest header and they get progressively smaller through header 6. Below are
each of the six headers and how they usually appear in relation to one another.
<h1>This is a header 1 tag</h1>
This is a header 1 tag

Paragraphs
In HTML, a paragraph tag <p> should be put at the end of every
paragraph of "normal" text (normal being defined as not already
having a tag associated with it).
<p> causes a line break and adds a trailing blank line
<br> causes a line break with no trailing blank line
As a convenience to yourself and others who might have to edit
your HTML documents, it's a very good idea to put two or three
blank lines between paragraphs to facilitate editing.

Boldface and Italics
You can add emphasis to text by using the boldface and italic tags or the
emphasis and strong tags.
There is an underline tag as well, but most people don't use it since text
that is linked is often underlined. The potential for confusion and the
archaic nature of underlining in general make it a poor marker for
emphasis.
When using these tags, you usually cannot (and probably should not) have
text that is both boldface and italics; the last tag encountered is usually
the tag that is displayed. For example, if you had a boldface tag followed
immediately by an italic tag, the tagged word would appear in italics.
Physical tags
This is a <b>boldface</b> tag.
This is how boldfacing appears.
This is an <i>italic</i> tag.
This is how italics appear.

Lists
There is an easy way in HTML to have numbered, unnumbered, and definition lists. In
addition, you can nest lists within lists.
When using lists, you have no control over the amount of space between the bullet or list
number, HTML automatically does this for you. Neither (as yet) do you have control over
what type of bullet will be used as each browser is different.
Unnumbered lists
Unnumbered lists are started with the <ul> tag, followed by the actual list items, which
are marked with the <li> tag. The list is ended with the ending tag </ul>.
For example, here is an unnumbered list with three items:
<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
Here is how that list would display:
* list item 1
* list item 2
* list item 3

*
Numbered lists
Here is the same list using a numbered list format:
<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>
Here is how that list would display:
1. list item 1
2. list item 2
3. list item 3

3. Definition lists
Definition lists allow you to indent without necessarily having to use bullets.
<dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>
And here is how this would be displayed
This is a term
This is a definition.
And yet another definition.
Another term
Another definition

Horizontal Rule
To separate sections in a document, you can insert a horizontal rule tag <hr>. A
horizontal rule is displayed as follows:
Addresses
The <address> tag normally appears at the end of a document and is used most
frequently to mark information on contacting the author or institution that has
supplied this information. Anything contained within the address tag appears in italics.
The address tag is another example of a logical tag, and although it currently does
nothing but make text appear in italics, this could change as HTML code advances.
Here is an example of how an address might appear:
<address>
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
</address>
And it would appear as:
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu

Comments
It is possible to include comments in a source HTML document
that do not appear when seen through a browser. This is most
useful for giving warnings and special instructions to future
editors of your document.
Comments take the form:

The comment can even break lines

bgcolor=" "
Defines the default background colour of the screen used for the page.
Expressed as a named colour or as the hexadecimal code of a specific colour in
#RRGGBB format.
<BODY>
Examples:
bgcolor="white" bgcolor="#ffffff"
bgproperties=
Used in conjunction with the background parameter in the Internet Explorer
browser, this command attribute will allow a background image to float on a page like
a watermark.
fixed
<BODY>
Example:
bgproperties=fixed

border=
Defines the width in pixels of the border surrounding a bordered object.
Expressed as the number of pixels.
All commands using this parameter.
Example:
border=10
bordercolor=" "
Defines the color applied to the border of a bordered object.
Expressed as a named color or as the hexadecimal code of a specific color in
#RRGGBB format. The attribute is recognized only by the Internet Explorer browser.
<FRAME> <TABLE> <TD> <TH> <TR>
Examples:
bordercolor="blue" bordercolor="#0000ff"

Cell padding=
Defines the standoff or amount of white space between the edges of a table cell
and the table data.
<TABLE>
Example:
cellpadding=10
Cell spacing=
Defines the amount of space or gutter to allow between table cells in a table.
<TABLE>
Example:
cellspacing=5

face=" "
Defines a single font face or a list of font faces to be used. Only face names
exactly matching those installed on the user's microcomputer can be displayed.
The first matching font face presented in the font name list is accepted and
displayed.
Any font face name.
<BASEFONT> <FONT>
Example:
face="geneva, arial, helvetica, helv, futura"
frame value.
<COMMANDS>

vspace=
Defines the vertical standoff or amount of white space surrounding an object
or element.
Expressed in pixels.
Example:
vspace=10
width=
Defines the width of an object or element.
Expressed either in pixels or as a percent of the space available for
display.
Examples:
width=600width=75%

Html ppt computer

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html ppt computer

Similar to Html ppt computer (20)

More from Anmol Pant

More from Anmol Pant (9)

Recently uploaded

Recently uploaded (20)

Html ppt computer