Truth Wins Out: Introduction To HTML:-

Introduction To HTML:-

HTML stands for Hypertext Markup Language.

Hypertext is an ordinary text that had been dressed up with extra features such as formatting images, multimedia and links to other documents.

Markup is the process of taking ordinary text and adding extra symbols, such as editors proof reading symbols are type of markup. Each of symbols used for markup in HTML is command that tells the browser how to display the text.

v HTML is an application of standard general listed markup language.

v HTML is simple language & used to create WebPages.

v HTML consist no. of tags used to create webpages.we have to write these tags within the angle brackets (<->).

v The text within the brackets is called as Tag, Which is not case sensitive.

v The Markup Language such as HTML is simply the collection of codes called as elements that are used to indicate Structure & format of the document.

Why HTML:

The internet is an international network of computers that exchange information with each other.

v www is world wide web, web consist of several pages(WebPages).

v HTML is used to build the WebPages.

v Once web page is build, it can be published on internet.

Web Publishing:-

Web publishing means launching your website .Publishing means transferring web page to the server so that people all over the world will be able to read it.

v Internet Explorer is a web browser.

v Mozilla Firefox, Google chrome, opera these are also web browsers.

v It is universal language for classifying the functions of different section of the document.

v This allows document to be displayed any kind of platform. That is document can be displayed on different hardware having different operating system.

v HTML is designed to work not only on simple PCs but also on graphical work stations, dumb terminals, network computers, hand held devices & etc.

Advantages of HTML Documents:

1. For creating HTML document , what you need is only text editor, No special software is required.

2. HTML document can be created on any hardware platform using any text editor.

3. You will have a much better concept of the structure of your page & understanding of why it works.

4. When something is not working, then finding error is easy in HTML.

5. It has no Cost.

6. There is no expensive license to buy or no upgrades to purchase.

7. You can work independently.

8. Learning HTML is simple than any programming language.

Disadvantages of HTML Documents:

HTML is not a programming language in true sense.
Any simple calculation cannot be done in HTML.
It cannot be used to display even date.
The interactive WebPages cannot built by HTML.
WebPages developed in HTML cannot behave like an application.
The webpage developed in HTML do not have their own interface.

Web Page Layout:

Above fig shows the layout of basic structure of any webpage.It is broadly devided into three sections.

Heading section:

The heading section contains documents titles, heading & other supplementary information.

Body Section:

This section contain actual document information with other details.

Footer section:

This section contain the information about name of author, total no of pages, current page no., etc

Structure Of HTML Document:

<HTML>

<HEAD>

<TITLE>

Title of your document

</TITLE>

</HEAD>

<BODY>

Body of Actual document

</BODY>

</HTML>

Ø HTML is hypertext markup language.

Ø The structure of HTML document is specified by a document type definition (DTD).

Ø As shown in above structure every program in HTML can be written within<HTML> & </HTML>.

Ø i.e. <HTML> indicates start of program.

Ø </HTML> indicates End of program.

The program contains two primary sections Head & Body.

1. Heading Section:

The Head can contains program heading & title. The Head always contain document title written in <TITLE> & </TITLE> pair.

2. Body Section:

This section contains actual document information & other details.

This is the structure of any HTML document.

Study Of Tags:

 Text enclosed within the angles < > is called as TAG.

 A tag is a unit of markup. It is a set of symbols defined in HTML to have special meaning

 Tags are start with a less than sign(<) followed by a keyword & conclude with greater than sign(>).

 These symbols are known as angle brackets.

 E.g. The tags are :

<HTML>

<TITLE>

Every tag is in HTML has a meaning & it is usually straight forward.

That means is a tag to switch on bold.

There are two types of tags.

1. Start tag

2. End tag

Start tags are used to begin an effect & end tags are used to end that effect.

End tags are always repeat the keyword with a forward slash in front.

Example:

 is called as End tag.

 Text to be displayed in bold is enclosed within start tag &.

E.g. Hello

Here Hello word will be displayed in Bold.

 Tags can be nested within each other so

 if for Bold

 for Italic

 Then you can combine as,

Hello

The word Hello will appear in both bold & italic. Observe that italic start & end tags are contained completely within Bold tags.

Tag Attributes:

Many start tag can take attributes that affect the tags behavior.

An attribute is a keyword separated by a space within angle brackets.

E.g.<HR no shade> this means for an unshaded horizontal rule.

 Some attributes requires a value, preceded by equal to sign, such as <HR width=”200”> This means a horizontal rule that is 200 units wide.

 In browser, the tags themselves are not displayed but their effect is displayed .Any tags & attributes that are unknown are ignored.

HTML performs different tag to perform different operations we have to use the tags in proper sequence & correct syntax.

1) <HTML> tag:

The <HTML> and </HTML> tags provides beginning & the end of an HTML document. The end tag is optional.

<HTML>

The markup tag

</HTML>

This tag contains Head, Body & different frames.

Syntax:

2) <HEAD> Tag:

The <HEAD> section of HTML document describes the various properties of document like document title, different headings.

The <HEAD> tag defines the document.

<HEAD> tag defines the header area of page. Which is not displayed within the page itself in the browser? In the <HEAD> section we have <TITLE> tag.

The end tag</HEAD>ends the head section.

<HTML>

<HEAD>

<TITLE>Document</TITLE>

</HEAD>

</HTML>

3) <TITLE> tag

Defines the title of a page. You must have a title element to produce a valid document and it must be placed within the head element.

The words placed in <TITLE> & </TITLE> defines the title of the document.

<html>

<Head>

<Title>Title of your document</title>

</head>

<Body>

[Content]

</body>

</html>

4) <BODY > tag:

The main body of an HTML document where all of the content is placed. You must use this element and it should be used just once. It must start immediately after the closing head tag and end directly before the closing html tag.

<BODY> tag defines actual body of document.

There are several optional attributes that control color & background of the document.

The body section start with <BODY> tag & ends with the </BODY>tag.

<Html>

<Head>

<Title>Yours Title</title>

</head>

<Body>

[Your main html code here...]

</body>

</html>

Changing color scheme:

By using attributes of <BODY> tag, we can define appearance of document. These attributes let you declare background & foreground colors your pages text & link, as well as background image.

There are six body attributes:

1) BGCOLOR

2) BACKGROUND

3) TEXT

4) LINK

5) VLINK

6) ALINK.

Colors in HTML can be specified by a color name or by color code known as RGB code, RGB stands for Red,Green,Blue.

There are 16 color names in HTML:

they are BLACK,SILVER,GRAY,WHITE,MAROON,RED,PURPLE,FUCHSIA,GREEN,LIME,OLIVE,YELLOW,BLUE,TEAL & AQUA.

RGB code is always 6 numbers. two no specified an amount of red, followed two no specified an amount of green & last two no specified an amount of blue. By mixing three types of color it is possible to generate any color.

For Blue color RGB code is:#00 00 FF

For green color RGB code is:#00 FF 00

For Blue color RGB code is:#FF 00 00

Yellow is combination of maximum red & green

RGB code is: #FF FF 00

For Black color RGB code is:#00 00 00

For White color RGB code is:#FF FF FF

Background color of document can be changes as:

We can use any image file on background

DEFAULT TEXT COLOR IS BLACK.

The link attribute specifies the color used for hypertext links.

For example:

The visited link can be set as:

The color of active link can be set as:

 tag:

A paragraph tag can be created by enclosing text within paragraph codes and . Remember that browser will ignore any “paragraph” you created by pressing enter while working on HTML code in a text editor.You must specifically define a paragraph in the code by using a paragraph tag.

This is first paragraph; is code

Continuous over several lines, but

will be displayed as a single paragraph in a browser.

and this is second paragraph that will also be

Displayed as such in a browser.

* This code will appear as two separate paragraph in your browser. Note that the length of each line is determined by width of browser’s window. The browser will insert some extra space between paragraph.

In some instances we do not want extra spaces, then we can use line-break tag, .It tells the browser to wrap the text that follows onto a new line without inserting any extra space between the line.

tag has one optional attribute called as align. It allows you to specify where the text appears on screen.

Left alignment like normal text

text is aligned to right margin but no justified as left. text

text is centered.

 tag:

tag is used to insert the line break into the text flow means the text after tag will be displayed on starting position of next line.

It has no ending tag.

E.g.

R.A.Shinde Teachers colony

Barshi Road Osmanabad 413501.

In above example name & address is break into several lines and matter will be displayed as:

R.A.Shinde

Teacher’s colony

Barshi Road

Osmanabad 413501.

<HR>tag:

A web page can be divided into separate sections by using horizontal rule.,<HR>tag.

It also called horizontal line.

This tag is mostly used decorative purpose.

This tag draws lines and horizontal rules.

ATTRIBUTES:

1. Size: It changes size of the rule.

2. Width: It changed width of rule in the form of pixels

3. Align: It aligns the line on the browser screen to left,right or center.

Formatting Text:

Addition of bold face, italic and underlining to the text gives additional emphasis to words and phrases in the text. It is important in passing message to the audience.HTML consist of different tags for formatting text,,,,<PRE>,<AADDRESS>,etc.

tag:

is bold tag is used to provide bold style to the text. It will display the text enclosed within & tag. In Bold format.

tag:

is italic tag is used to provide Italic style to the text. It will display the text enclosed within & tag. In Italic format.

tag:

tag is used to apply underline to the given text.

It will display the text enclosed within & tag.

E.g.. Hello

It will be displayed as:

Hello

<PRE>:

It is preformatted text.

It displayed the text without any formatting that is this tag displayed the etxt in exactly same format as the character and line spacing format defined in the source code.

E.g.. <PRE>Truth

Wins

Out</PRE>

It will be displayed as in browser..

Truth

Wins

Out

<ADDRESS>:

HTML address element represents contact information in an HTML document.

It may contain hyperlinks to the url, where some contact information relevant to the page is located.

Browsers display the contact information within address element in italics.

<Address>contact information</address>

tag:

is emphasis tag. The text appearing between & will be displayed in italic. This tag is used to emphasis the text. Emphasis has meaning compared to italic tag,which is meaningless.

E.g. youmusthandover the money to him

tag:

This is a strong tag. The text appearing between & will be displayed in bold. This is used to create strong emphasis. Text to speech reader gives strident pronunciation to strong text.

E.g. I swear ,if they don’t give me that raise

Tomorrow ,I quit

<A> tag:

<A> is anchor tag. This tag is used to create links(hyperlinks).Links point to different files on the web. The text or image enclosed within <A> and </A> tag is a link.

This link is clickable in a graphical browser, text within the anchor tags is displayed in a different color,& underlined.

For example:

HOME page of Google </A>

tag:

tag is subscript tag. The text within enclosed in and is displayed in subscript form. It is bit lower that text. This is useful for mathematical formulas.

For example:

H2O.

This will be displayed as: H₂O

tag:

is superscript tag. The text enclosed within and is displayed in superscript form. This element is also useful for mathematical formulas.

For example: E=MC2

Which is displayed as: E=MC2

It can be used for trademark symbol.

Use HCLTMcomputers.

This will be displayed as: Use HCL^TM

tag:

This is font tag. It is used to format the size, type face, and color of enclosed text.

This tag is used to display the text in Different style with different text.

Attribute:

SIZE:

This attribute is used to display or apply a particular size to the text. Size from 1 to 72

FACE:

This will be changes the style of the text.

COLOR:

It sets the color of given text.

Color attribute is specified with an RGB values, or you can change color name also.

For example:

Formatted Text

<BIG>tag:

<BIG>is big tag. The text enclosed in<BIG> & </BIG> is displays in larger font. <BIG> tag has the same effect as

If already size is largest, tag is ignored.

For example:

<BIG>the Big Company</BIG>

tag:

is Small tag. The text enclosed in & is displays in larger font. tag has the same effect as

If already size is SMALLEST, tag is ignored.

For example:

The Big Company

<STRIKE>tag:

<STRIKE>is strike tag. The text enclosed in<STRIKE> & </STRIKE>(Or </S>and</S>) would have a line drawn through the middle of text.

For example:

<STRIKE>The Big Company</STRIKE>

This will be displayed as:

The Big Company

<MARQUEE>tag:

<MARQUEE>is a marquee tag. The text enclosed in<MARQUEE> & </MARQUEE> would be Rolled over horizontal line on the web page. This is used to roll the current new or position of different companies in stock market.

For example:

<MARQUEE>STOCK MARKET COLLAPSES</MARQUEE>

This will be displayed as: CONTINUOUS ROLLING OF THE WORDS STOCK MARKET COLLAPSES

IMAGES:

A visual element like graphics, images, and pictures makes your page more attractive & gives a unique look. The image can be added by using <IMG >tag.

<IMG>tag:

IMAGE FORMAT:

Generally the images are having many format, we are having two specific format.

1.GIF

2.JPEG

3.PNG

1.GIF(GRAPHICAL INTERCHANGE FORMAT):

GIF is good for line drawings, icons, computer generated images, cartoons or any images with big areas of solid colors.

JPEG stands for Joint Photographic Experts Group. It is compact format, designed for photographs & other images.

PNG is another image format.PNG stands for Portable Network Graphics.PNG are superior to GIF,PNG are smaller have more colors.

GIF is widely used format for the web. The images which we are inserting in the web falls in two categories:

1) Inline images

2) External images

1.Inline Images:

These images can display within the page itself. These images are automatically displayed with the page.

2. External Images:

The external images can be displayed on the page if the user wants to view them. these images are stored in separate webpage. And can be view only if the user wants to display that link.

We can insert inline images by using <IMG> tag.

It has following attributes:

1) SRC:

It specifies images, files, address to the html document.

<IMG src=”Image1.gif”>into your webpage.

2) ALIGN:

It controls the alignment of the image to top, middle or bottom.

The value ALIGNS=TOP will align the image to top of line.

Similarly, The value ALIGN=MIDDLE will align the image to middle of line.

& the value ALIGN=BOTTOM will align the image to BOTTOM of line, respectively.

We can also use center, right & left attribute to set the image.

3) BORDER:

It specifies the size of border to the place around the image.

4) WIDTH:

It sets the width of image in the form of pixels.

5) ALT:

It indicates the alternate text to be unable to display the specified images whose address is provided with the src attribute.

6) HSPACE:

It indicates the amount of space to the left & right of the image.

7) VSPACE:

It indicates the amount of space to the top & bottom of the image.

EXCERSIZE 4:

Write a HTML code for creation of web page for T-Shirt company.Incorporate image in webpage.

<HTML>

<HEAD>

<TITLE> CAMBRIDGE T-SHIRT COMPANY</TITLE>

</HEAD>

<BODY>

<H1 >Welcome to Cambridge T-Shirt!!!</H1>

<H2>Fabulus T-Shirt Since 1955</H2>our company

Cambridge Fabulus T-Shirt Company

Second best choice

For T-Shirt

Write us at:

555,Desai Road

Mumbai-65

call us at(022)111-4234

We are here for ur HELP

<HR>

<CENTER>Why not visit:<A HREF=”http:\\www.yahoo.com”> yahoo </A></CENTER>

</BODY>

</HTML>

Tuesday 23 October 2012

Introduction To HTML:-

2 comments: