html tutorial

 Hyper text markup language (HTML) -
 The language used to develop web pages is called hyper text
markup language (HTML). HTML is the language
interpreted by a browser. Web pages are also called HTML
documents. HTML is a set of special codes that can be
embedded in text to add formatting and linking
information. HTML is specified as TAGS in an HTML
document (i.e. the web page).
 HTML Tags –
 Tags are instruction that are embedded directly into the
document. An HTML tag is a single to a browser that it
should to something other than just throw text up on the
screen. By convention all HTML tags begin with an open
angle bracket (<) and end with a close angle bracket (>).

 HTML tags can be of two types:-
 Paired tags -
 A tag is said to be paired tag if it, along with a companion tag, flanks
the text. For example the tag is paired tag. The tag with its
companion tag causes the text contained between them to be
rendered in bold. The effect of other paired tags is applied only to the
text they contain.
 In paired tags, the first tag () is often called the opening tag and the
second tag () is called the closing tag.
 The opening tag activates the effect and the closing tag turns the effect
off.
 Singular Tags –
 The second type of tag is the singular or stand-alone tag. A stand-alone
tag does not have a companion tag. For example tag will insert a
line break. This tag does not require any companion tag.

 Commonly Used HTML Commands -
 The Structure of an HTML program –
 Every HTML program has a rigid structure. The entire web page is
enclosed within <HTML> <HTML> tags. Within these tags two distinct
sections are created using the <HEAD> </HEAD> tags and the
<BODY> </BODY> tags. These sections are described below.
 Document Head –
 Information placed in this section is essential to the inner working of
the document and has nothing to do with be content of the document.
With the exception of information contained within the <TITLE>
</TITLE> tags, all information placed within the <HEAD> </HEAD>
tags is not displayed in the browser. The HTML tags used to indicate
the start and end of the head section are:
 <HEAD><TITLE>…………</TITLE></HEAD>

 Document Body –
 The tags used to indicate the start and end of the main
body of textual information are:
 <BODY>
 …………
 </BODY>
 Page defaults like background color, text color, font
size, font weight and so on can be specified as
attributes of the <BODY> tag. The attributes that the
<BODY> tag takes are:

BGCOLOR Changes the default background color to
whatever color is specified with this tag. The
user can specify a color by name or its
equivalent hexadecimal number.
BACKGROUND Species the name of the Gif file that will be
used as the background of the document. This
Gif tiles up across the page to give a
background.
TEXT Changes the body text color from its default
value to the color specified with this attribute.

 Example:-
 <BODY BACKGROUND =“starfield.gif” TEXT=red>

 Titles And Footers –
 Title – A web page could have a title that describes what the page is
about without being too wordy. This can be achieved by using the
TITLE tag. Text included between the <TITLE>…..</TITLE> tag shows
up in the title bar of the browser window.
 Footer – Just as a title can be placed in the title bar of the browser
window, certain information is commonly placed at the foot of the web
page. Copyright information, contact details of the creator of the web
page and so on are the type of information traditionally placed at the
foot of the web page. The HTML tags are:
 <ADDRESS>…..</ADDRESS>
 This tag should ideally be placed immediately after the last line of the
textual material of the web page. However, it could also be placed
anywhere in the body of the document. The text typed within these
tags always appears in italics.

 Example:-
 <HEAD><TITLE>This is the title </TITLE></HEAD>
 <BODY>
 ………….
 <ADDRESS>This is the footer </ADDRESS>
 </BODY>
 Text Formatting –
 Paragraph breaks –
 A blank line always separates paragraphs in textual
material. The tag that provides this functionality is .
On encountering this tag the browser, moves into a new
line, skipping one line between the previous line and the
new line.

 Line Breaks –
 When text to start from a new line not continue on the
same line (without skipping a blank line), the tag
should be used. This tag simply jumps to the start of the
next line.
 Example:
 Silicon Chip Technologies, A/5, Jay Apartments,
 Vile Parle (East), Mumbai – 400057.
 Output:
 Silicon Chip Technologies,
 A/5, Jay Apartments,
 Vile Parle (East),
 Mumbai – 400057.

 Emphasizing Material In A Web Page –
 Document pages are usually divided into sections and subsection (i.e.
pages could have headings and sub headings), which need to be
emphasized. HTML provides certain HEADING STYLES and
HORIZONTAL RULES, which helps break text into logical sections
with visual appeal.
 Heading Styles –
 HTML supports six different levels of heading. The highest-level
header format is <H1> and the lowest level is <H6>. All the styles
appear in BOLDFACE and the size of the heading depends on the level
chosen, i.e. <H1> to <H6>
 Example:
 <H3> The early years </H3>
 Output:
 The early years

 Drawing Lines –
 The tag <HR> draws line and horizontal rules. This tag
draws a horizontal line across the whole page,
wherever specified. The attributes to the <HR> tag are:
 Attributes Description
ALIGN Align the line on the Browser screen, which is by default,
aligned to the center of the screen,.
ALIGN = LEFT will align the line to the left of the screen
ALIGN = RIGHT will align the line to the right of the screen
ALIGN = CENTER will align the line to the center of the
screen
SIZE Changes the size of the rule.
WIDTH Sets the width of the rule. It can be set to a fixed number of
pixels, or to a percentage of the available screen width.

 Example:
 Welcome to our web site.
 <HR ALIGN=LEFT WIDTH=10 SIZE=4>

 Text Styles –
 Bold –
 Displays text in BOLDFACE style. The tags used are … 
 Example:
 Welcome to our home page! 
 Output:
 Welcome to our home page!
 Italics –
 Displays text in ITALICS. The tags used are between …
 Example:
 Welcome to our home page! 
 Output:

 Underline –
 Displays text as UNDERLINED, The tags used are
…..
 Example:
 Welcome to our home page! 
 Output:
 Focus 3:
 Emphasize the headings and sub-headings displayed
on the DEPL web page.

 Lists –
 Types Of Lists –
 Unordered List (Bullets) –
 An unordered list starts with the tag <UL> and ends with </UL>. Each list item
start with the tag <LI>. The attributes that can be specified with <LI> are:
TYPE Specifies the type of the bullet.
TYPE= FILLROUND will give a solid round black bullet
TYPE= SQUARE will give a solid square black bullet

 Example:
 Some of these products include:
 <UL> TYPE= FILLROUND>
 <LI> Floppies
 <LI> Hard Disks
 <LI> Monitors
 </UL>

 Output:
 Floppies
 Hard Disks
 Monitors
 Ordered List (Numbering)
 An ordered list start with the tag <OL>. Each list
items start with the tag <LI>. The attributes that
can be specified with <LI> are:

TYPE Controls the numbering scheme to be used.
TYPE = “1” will give counting number (1, 2, ……..)
TYPE = “A” will give Uppercase letters (A, B, …….)
TYPE = “a” will give Lowercase letters (a, b, ……..)
TYPE = “I” will give Uppercase Roman Numerals (I, II, …….)
TYPE = “i” will give Lowercase Roman Numerals (i, ii, ……..)

START Alters the numbering sequence. Can be set to any numeric
value.
VALUE Changes the numbering sequence in the middle of an
ordered list. It is to be specified with the <LI> tag.

 Example:
 <OL TYPE=“1” START=“3”>
 <LI> Floppies
 <LI> Hard Disks
 <LI> Monitors
 </OL>
 Output:
 Some of these product include:
1. Floppies
2. Hard Disks
3. monitors

 Definition Lists –
 Definition list values appear within tag <DL> and <DL>. Definition
lists consists of two parts:

Definition term appears after the tag <DT>
Definition description appears after the tag <DD>

 Example:
 <DL>
 <DT> Keyboard
 <DD> An input device
 <DT> Printer
 <DD> An output device
 </DL>

 Output:
 Keyboard
 An input device
 Printer
 An output device
 Adding Graphics To HTML Documents –
 Other than text, HTML allows placing of static and/or animated
images in an HTML page, HTML accepts two picture file formats .gif
and .jpg.
 Once an image is ready and stored in the above-mentioned formats, it
can be inserted into a web page using the tag <IMG>, which takes the
name of the image file (file name .gif file name .jpg or file name .jpeg)
as an attribute. In addition, HTML also allows control of the height,
width, border and so on, of every image placed on the web page. The
<IMG> tag takes the following attributes:

 Example:
 <IMG Align=CENTER Border=0 Height=57 H Space=0 Src=“Image1.GIF” Width=447>
 The attributes taken by the <IMG……..> tag are explained in the following examples.
 Using The Border Attribute –
 Example:

 <HTML>
 <HEAD><TITLE> Working with image </TITLE></HEAD>
 <BODY Background=“images/texturel1.gif”>
 Controlling image borders!<CENTER>
 Image without a BORDER 
 <IMG Src=“images/corp.gif”> 
 Image with BORDER = 3 
 <IMG Border=3 Src=“images/crop.gif”> 
 </CENTER>
 </BODY>
 </HTML>

 Linking Documents –
 Links –
 HTML allows linking to other HTML document as well as image. Clicking on a
section of text or an image in one web page will open an entire web page or an
image. The text or on image that provides such linking is called Hypertext, a
Hypertext, or a Hotspot.
 Link are are created in a web page by using the <A>….</A> tags. Anything
written between the <A></A> tags become a hyperlink/hotspot.
 Example:
 <A Href=“filename.html”>
 Hyperlinks can be of two types:
 Links to an external document
 Link (jumps) to a specific place within the same document
 Generally done in case of a web page containing a large amount of text
 Example:
 <A Href=“deatails.html”> Visit my Home Page</A>

 Code for index.html –
 <HTML>
 <BODY Background=“../images/texture1.gif”>
 <CENTER>
 SILICON CHIP TECHNOLOGIES 
 <IMG Width=50 Height=50 Src=“../images/traing31.gif”>
 </CENTER><HR>
 <H4>SCT provides Corporate Training For Following Products:</H4>
 <UL>
 <LI><A Href=“HTMLSyl.html”>HTML</A>
 <LI><A Href =“JsSyl.html”>JavaScript</A>
 <LI><A Href=“CGISyl.html”>CGI</A>
 <LI><A Href=“JvSyl.html”>java</A>
 <LI><A Href=“PBSSyl.html”>Power Builder</A>
 <LI><A Href=“OraSyl.html”>Oracle Developer 2000</A>
 <LI><A Href=“DbaSyl.html”>Oracle DBA</A>
 </Ul><SPACER Size=275>Click for more Details!
 </BODY>
 </HTML>

 Images As Hyperlinks –
 Just as text can act as a hyperlink, so also images can
act as hyperlinks. Anything included within
<A>…</A> tags become a Hotspot. Thus, an image can
be made a Hotspot by enclosing an <IMG> tag within
the <A>…</A> tags. The <IMG> tag places the image
on the screen, and because the <IMG> tag is enclosed
within the <A>…</A> tags, it becomes a Hotspot.
 Example:
 <A Href=“details.html”><IMG Src=“mickey.gif”></A>

 Frames –
 Introduction To Frames –
 Until now each web page when opened takes over the entire browser screen. The
browser screen could not be split into separate (Unique) sections, showing different
but related information.
 The <Frame> Tag –

SRC=“url” Indicates the URL of the document to be loaded in to frame.
Margin Height=“n” Specifies the amount of white space to be left at the top and
bottom of the frame.
Margin Width=“n” Specifies the amount of white space to be left along the sides of the
frame.
Name=“name” Gives the frame a unique name so it can be targeted by other
documents. The name given must being with an Alphanumeric
character.
Noresize Disables the frames resizing capability.
Scrolling Controls the appearance of horizontal and vertical scrollbars in a
frame. This takes the value YES/NO/AUTO.

 Example:
 <HTML>
 <FRAMESET Row=“30%”> -- Divides the screen into 2 rows. One
occupying 30% of the screen. And the
other occupying the remaining space,
i.e.70% of the screen.

html tutorial

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (12)

Ähnlich wie html tutorial

Ähnlich wie html tutorial (20)

Mehr von pacatarpit

Mehr von pacatarpit (9)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

html tutorial