History Of HTML


HTML stands for Hyper-Text Markup Language. It is a codinglanguage, which uses a method called markup, to create hyper-text.HTML is actually a simplified subset of a more general markuplanguage called SGML, which stands for Standard Generalized Markup Language, but is gradually returning to SGML as it evolves. This evolution of HTML is worth knowing at least a little about, since HTMLis not set in stone. The changes that are occurring have their reasons,mostly in terms of creating capabilities that previous versions werelacking. In the beginning…In 1989, Tim Berners-Lee, working at theEuropean particle physics institute known as CERN (Centre European pour la Recherché Nucleaire), proposed a system to allow scientists to share papers with other using electronic networking methods. His idea became what is called the World-Wide Web. Since these documents were to be shared, some common method coding them needed to be developed. Tim Berners-Lee suggested that it be based on the already existing SGML. Here are a few quotes from a 1990 CERN memo that Berners-Lee wrote: Hypertext is a way to link and access information of various kinds as a web of nodes in which the user can browse at will. It provides a single user-interface to large classes of information (reports, notes, data-bases, computer documentation and on-line help). We propose a simple scheme incorporating servers already available at CERN…A program which provides access to the hypertext world we call a browser… It would be inappropriate for us (rather than those responsible) to suggest specific areas, but experiment online help, accelerator online help, assistance for computer center operators, and the dissemination of information by central services such as the user office and CN [Computing & Networks] and ECP [Electronics & Computing for Physics] divisions are obvious candidates. WorldwideWeb (or W3) intends to cater for these services across the HEP [HighEnergy Physics] community. As you can see, Tim Berners-Lee put all of the basic pieces into place. In 1992, when there were all of 50 webservers in the world, CERN released the portable Web browser asfreeware. Marc Andreessen, who was working at the National Center for Supercomputing Applications, created a browser called Mosaic which was released in 1993. Shortly after that, he left NCSA to found Netscape. The first version of the Netscape browser implemented HTML 1.0.HTML 1.0 and 2.0 in 1992, Berners-Lee and the CERN team releasedthe first draft HTML 1.0, which was finalized in 1993. This specification was so simple it could be printed on one side of a piece of paper, but even then it contained the basic idea that has become central in therecent evolution of HMTL, which is the separation between logicalstructures and presentational elements. This is the most important single idea to grasp in learning HTML, IMHO. In 1994, HTML 2.0 was developed by the Internet Engineering Task Force’s HTML Working Group. This group later was disbanded in favor of the World Wide Web Consortium (http://www.w3.org), which continues to develop HTML. Browsers and HTML Netscape was just one of a number of browsers available. Mosaic was still offered by NCSA, Lynx was available on UNIX machines, and few other companies were creating browsers. One of them, Spyglass, was purchased by Microsoft, and became the basis for Internet Explorer. Each browser contains, in its heart, a rendering engine, which is the code that tells it how to take your HTML and turn it into something you can see on the screen. What happened at this point is that each company, most particularly Netscape and Microsoft, started to develop their own “extensions” to HTML, often going in different directions. This problem bedevils us to this day, though the upcoming Netscape6 browser may resolve this by being 100% compliant with he published HMTL standards. We are still waiting to see what this will look like. W3C takes over: HTML 3.0 and HTML 3.2 The World Wide Web Consortium (W3C), which had taken over HTML development, attempted to create some standardization in HTML 3.0. But there was so much argument over what should be included that it never got beyond the draft discussion stage. Finally, in 1996 a consensus version, HTML 3.2, was issued. This added features like tables, and text flowing around images, to the official specification, while maintaining backwards compatibility with HTML 2.0. This also is a convenient place for marking the divergence in practice from the separation that Berners Lee first made between logical structures and presentational elements.And as the Web took off in popularity, this breakdown became widespread and serious. The main focus of the W3C since then has been to rectify the situation. An example of this is the widespread use of tables and transparent “shim” GIFsto create page layout. While this creates pages that are visually correct, the logical structure of the page is pretty much destroyed, and such pages are frequently useless to anyone using a text browser, or a text-to-speech parser. HTML 4.0x The W3C released the HTML 4.0 specification at the end of 1997, and followed with HTML 4.01 in 1999, which mostly corrected a few errors in the 4.0 specification. This release attempted to correct some of the more egregious errors that 3.2 had allowed (encouraged?) designers to commit, particularly in introducing Cascading Style Sheets. But in fact the W3C has abandoned HTML s the default standard in favor of a move back towards the root of SGML, a larger and more complex language.There will probably never be another HTML specification. XHTML 1.0 This is the successor to HTML. The “X” stands for Extensible. This is a reformulation of HTML 4.01 within XML (Extensible Markup Language), which is far more rigorous, and is intended to start moving the creation of Web pages away from HTML. This was released earlier this year, and is the most current standard for creating Web pages. This introduces some interesting changes in coding. For example, virtually all tags now have to be closed, including paragraph tags. Other tags, like the FONT tag, have been banished in favor of using Cascading Style Sheets to control all presentational elements. Back to the browsers now, while standards are wonderful, that does not mean that browsers follow them. No browser currently available is completely consistent with HTML 4.0, which is already two and a half years old. Support for Cascading Style Sheets (CSS), for instance, is spotty and incomplete in all browsers. Also, each browser (rendering engine) interprets the specifications in different ways, leading to the eternal complaint ofpages looking different in different browsers. Plus, most browsers have tried to maintain backwards compatibility with older standards, which complicates things when a newer standard invalidates some aspect of an older standard. As I mentioned before, Netscape 6, which is still in development, is claimed to be 100% standards compliant with HTML 4.0, XHTML 1.0, CSS1, and partially compliant with CSS2. If they can pull it off, this would be wonderful for Web developers. But we have to wait and see what happens. Also, Netscape is not the only browser on the market. The leader, Microsoft’s Internet Explorer, has better standards support than Netscape does among current browsers, but IE has appeared to drop full compliance from its plans, and has received a lot of criticism from the Web developer community on that account. Netscape, meanwhile, has made the decision to drop backwards compatibility from its rendering engine so as to get a lean, efficient, standards- compliant browser. It is entirely possible, therefore, that many pages that work fine now will stop

WWW (World Wide Web).

Www is the subnet of the internet. It was started at govt. researchproject at the CERN European Laboratory for particle physics).Laboratory in the Switzerland and today provides the information to the users in the all over the world. The World Wide Web is based on the mechanism that is used to make resources available to users are:

· Protocol: - 

“Http” Hypertext transfer protocol is used to accessresources over the web. The protocols transfers data in the form ofplain text, Hypertext, Audio, Video and so on. However it is calledhypertext because its efficiency allows its use in a hypertext document where there are jumps from one document to another.·

Address: - World Wide Web follows a uniform naming schemeto access resources on the web URL (Uniform Resource Locator). URL is a standard defining any trend of information on theinternet. URL defines these things.

o Method:-The method is the protocol used to retrieve the document. There are several different protocols that can retrieve the document e.g. GOPHER, FTP, HTTP, NEWS X, Telnet are such protocols.

o Host:- The host is a computer at which the information is available. However the name of such computer can be web pages usually stored in the computers given name begin with the www.o Path:- The path is the path name of the files where the information is located. Path can contain slashes that separate directories and sub directories and the files.

o Html:- Html is used to create the documents that can be addressed over the web.
Html: - Hypertext Markup
 Language
What is Html?

Html is a standard markup language usually known as Html which isused to create the web pages on the World Wide Web. Html uses tags to indicate how web browsers should display web page elements such as graphics, Text, Tables, Forms etc. And how it responds a user action. Html files are simple (ASCII text files with codes embedded to denoteformatting and Hypertext documents.

Hypertext: - Hypertext is the text which contains hyperlinks. The text which is displayed on an electronic device or a computer with referenceto hyperlinks.

Markup: - Markup is the set of instructions through which weinstruct the web browser that how it displays its contents or how itresponds the user action. Markup is set of two elements which are:- 

 · Tag: - A tag is a piece of text that is always written between twoangle brackets and what goes inside is tag, A tag tells the webbrowser what to do.· Attributes:-An attribute is also a Piece of text that goes insidethe tag and tells the web browser how to do a particular task.


Html Tools


The tools used for writing and executing a webpage are called the html tool. The main tools which are required are;
· Html Editor: - A program which is used to write a webpage isknown as html editor. E.g. Notepad, Notepad ++, Adobe Dreamviewer etc.

· Web Browser: - A program which is used to view or test theWeb Pages is known as web browser. A web browser changes thehtml encoded files into real text, image, forms, tables, Frames,audios Videos etc

The list of Html Tags used in Html.·

<a>Anchor· 

<address>Makes the text italic·

<b>Makes the text bold·

<br/>Breaks the line· 

<body> For writing the body text ·

<center>For aligning the elements in the center of the webpage·

<Caption>For writing the caption of a figure or a table·

<cite> Makes the text italic· <div>Used to make the divisions in a webpage· 

<dl>Used for making the definition lists·

<Dt> used for defining the definition term·

<dd>used for defining the definition· 

<del>Strikes the text· 

<em>Emphasis Makes the text italic·

<font> Effects the font of the paragraph· 

<form>Used in making the online forms·

<frameset>Used to dividing the total window into multiple frames· 

<fieldset> Used for making the separate sections of a web page·

<html>First point where we start the web page·

<head>Used for the heading of the web page·

<h1-h6> Six styles of the heading·

<hr/>Inserts a horizontal rule in a webpage·

<img/>Inserts an image in a webpage·

<i>Makes the text italic·

<input> Form element, Used in forms for defining the type of input.·

<li>Used in lists for inserting the items of a list·

<legend>Inserts a legend name·

<marquee> used to move the text in a desired direction (movingeffect)· 

<ol>Makes the ordered lists· 

<option>Used for inserting an option in the dropdown list· 

<p>effects the paragraph· 

<pre>Makes the text as pre-formatted·

<q>Quotes the text “used for writing the quotations”·

<s>Strikes the text>·

<select>Makes a selection/dropdown list·

<strong>Makes the text bold·

<strike>Strikes the text·

<sup>Makes the text as superscript· 

<sub>Makes the text as subscript· 

<title>Used for writing the title of the webpage·

<table>used for inserting a table in a webpage·

<tr>Used for inserting a new table row· 

<th>Used for table headings· 

<td>used for table data· 

<textarea>Used for inserting a comment box in forms 

· <u>Makes the text underlined· 

<ul>Used to make the lists unordered


List of Attributes used in the above tags<a> href:-used to link the selected text by a urlSyntax:-<a href=”url”>Link Name</a>

<body alink>Used to change the color of an active link Syntax:- <alink=”red or #660000”> <body vlink> Changes the color of a visited linkSyntax:- <body vlink=”green or #ccffoo”><body>bgcolor:- changes the background colorSyntax <body bgcolor=”color name”><body>background:-makes the image as a backgroundsyntax<body background=”url”>

<font> Color, Face, sizeSyntax:- <font color=”color name” size=”no. of pixels” face=”fontname”>

<h1-h6>

Align

Syntax:- <h1 align=”center|left|right”> 

<img> src:-defines the source of the image<img> width:-specifies the width of a image<img>height:-specifies the height of an image <img> align:- specifies the alignment of an image<img>valign:-specifies the vertical alignment of an image<img>alt:- defines the alternate text<img>title: specifies the title of the image<img> border:-specifies the border of an image Syntax:-<img src=”url”height=”percentage|pixels”width=”percentage|pixels”align=”center|right|left” valign=”top|middle|bottom” border=”no.of pixels” alt=”alternate text” title=”title name”> 

<input> type:-used for defining the type of inputSyntax:- <input type=”text|date|email|phone|number|url|password|button|submit|reset|radio|checkbox|”>

<legend>Align aligns the legendSyntax:-<legend align=”right|center|left”>

<marquee>bgcolor:-changes the background color of moving textSyntax:-<marquee bgcolor=”color name”><marquee>direction:-moves the text in the four directions Syntax:-<Marquee direction=”up|left|down|right”><marquee>behavior:-makes the movement of text in a separatebehaviorSyntax:-<marquee behavior =”slide|scroll|alternate”>

<ol> type:- defines the type of ordered listSyntax:-<ol type=”a|A|i|I|1”>

<p>align:-aligns the paragraphSyntax:- <p align=”center|right|left”>

<table>bgcolor:-changes the background color of a table<table>height:-defines the height of a table<table>width:-Defines the width of s table<table>background:-sets the background as an image<table> border:-sets the thickness of a border<table>

cellspacing:-defines the space in between the cells<table>

cellpadding:-defines the space between the cell border andthe cell content<table>

bordercolor:-specifies the color of the border in a tableSyntax:-<table bgcolor=”color name” background=”url”border=”no. of pixels” height=”percentage|pixels”width=”percentage|pixels” bordercolor=”color name”cellpadding=”no. of pixels” cellspacing=”no. of pixels”><th> colspan:-merges the columns<th> Rowspan:- merges the rows in a tableSyntax:-<th colspan=”no. of columns” rowspan=”no of rows”><ul>type:- defines the type of unordered listSyntax:- <ul type=”disc|circle|square”>  

Structure of a web age

<html><

title>First Webpage</title><head>

First Webpage</head>

<body>

<font color=”red” size=”12” face=”Edwardian script ITC”><i>Html:-Hypertext Markup Language</i></font>

</body>

</html>
Lists and their types: -

· Ordered Lists:- (Numbered lists) An ordered list is one that isnumbered and also may be used to indicate sequential form ofinformation. It is always written under the body tag and by defaultordered list uses Arabic numerals i.e. (1,2, 3). We can change thetype of ordered lists to upper alpha, lower alpha, upper roman,lower roman, by writing <ol type=”A|a|I|i”>.

· Unordered Lists:- Unordered lists are used to represent a setof items that have the relation among themselves but do not followa specific order. The syntax is same as ordered list but the ol is replaced by ul and by default unordered list uses the discs but wecan change the bullets like <ul type=”disc|Square|circle”>.

· Definition Lists: - A definition list is a list of items preparedwith associated definitions. Definition list is used to provide twolevels of information. The two levels of information arerepresented by using the terms and definition with <Dt>and<DD>, Where <DT> is used to write the term of definition and<DD> is used to define the term.

What is a table?

Table is an orderly arrangement of data distributed across the grid ofrows and columns. Tables are the powerful elements of a webpagelayouts and can display the data in more compact form which can beeasily readable and understood. Table provides a summary of lengthyinformation and arranges the data in the well-defined form. A table ismade up of rows and columns, the horizontal area is known as a rowand the vertical area is known as column, The intersection of rows and columns is known as cell and the data is entered into the cells. To create a table the following elements are required;<Table><tr> Table Row<th> Table Heading<td> Table DataList of attributes used in table:-Rowspan, Colspan, Cellspacing, Cellpadding, Caption. · Rowspan:- Rowspan is used to combine or merge the no. of cellsin a column to make the one large cell. It is mainly used in the weblayouts.<th rowspan=”no of cells”>

· Colspan:- Colspan is used to merge or combine the no of cells in arow to make a large cell.<td colspan=”no. of cells”>

· Cellspacing:- It is the amount of space you want to put between thetwo adjacent cells. These spaces marks the table contents mucheasier to read. These spaces are specified in pixels and by defaultthe value is 2 pixels it is included in opening table tag.

· Cellpadding:- it is defined as the amount of space between theborder of a cell and the contents of a cell. This is also specified inthe no. of pixels and by default its value is 1 pixels.· Caption:- A caption is an important element for a table and is usedto summarize the table contents. It is an explanatory text whichidentifies the table. A caption is added to a table by using thecaption tag bellow the table tag.

Graphics

What are graphics?Ans:- Graphics is derived from the greek word “Graphikos” whichmeans a visual presentation on some surface such as a wall, Canvas,Screen, Paper or Stone to brand or illustrate inform or entertain. Graphics is the word derived from the graph so it has X and Y axis like a graph. In the same way something which can be created in digital word is seen on digital screen also has X and Y axis. So the output of any digital device is termed as graphics. In other words it is an image that is generated by a computer is called graphics.What are the different types of images?Ans:- There are various formats of images but common among themare:-

· Gif:- Graphics Image FormatCommonly used image format on the web because gif formatssupports transparency, Interchanging, Animation.

· Jpeg:- Joint Photographs Expert Group. It is a lossy imageformat designed for compressing photographic images thatcontain thousands of colors or shapes of Z Ray.

· Png:- Portable Network Graphics. Png supports animationthrough its related (MNG) Multiple Network Graphics formatsimilar to what is provided in gif’s animation.How can we insert an image with the specific height and widthin a web page?Ans:- To insert an image with the specific height and width in a webpage we need to include image tag and its attributes height and widthwith a reference to a desired image. The image tag is empty that means it has not a closing tag and we can use both as icons and images of full size. Images Support five alignmentssyntax<img src=”url” align=”right|middle|left|bottom|top”>What are thumbnails? How are they created?Ans:- Thumbnails are the small versions of the actual images which isalso a link to its larger versions. With the thumbnails a visitor has achoice whether he wants to see the actual images or not. To create athumbnail we need to write the following code<a href=”url”><img src=”url” border=”1”></a>What are image maps?Ans:- An image map is an extended version of image link in which asingle image represents multiple links depends on where a user wishes to click. Image maps provide a respond to the user action through graphics. They have become first choice for the menu development on the web instead of going on a textual menu. Image maps can concentrate a great deal of information in a small space. In image maps the whole image is divided into the multiple active areas called hotspots. These hotspots are linked to a separate “url”. Circles rectangles and polygons are used for linked hotspots.Syntax;<img src=”url” usemap=”imagemap”/><map name=”imagemap”><area shape=”rect” cords=”60,79,0,55” href=”url” alt=”displaywhat”> <area shape=”circle” href=”url” alt=”what should be displayes when a user place cursor”></map>

Form

What is a form?Ans:- An Html form is a section of web document into which a user can enter the information. The information is passed back to a web server where it is recorded in a database for future use or perhaps is used to control what information is returned to the user to the type of same text or choose from the no. of options. Collect several different items of information at once and can restrict user responses to know values including forms in a web page. Forms are used for two waycommunications in between the web pages and websites. The commonuse of forms include;· Commitment Response· Online Order Forms· Subscription Forms· Registration Forms· Customization FormsForms only prompt the user for information to handle the informationentered by the user through the form usually requires the provider towrite CGI base program designed specifically to process submission of form.Explain the different form elements?Ans:- A form is made up of fields and controls as well as the markupnecessary to structure a form or control its presentation. The controlsare the items filled in or manipulated by the user to indicate the state  of form. Form controls include;· Text Fields: - These are the areas for brief text inputs.· Checkboxes: - These allows the visitor to select several items ofhis choice from the multiple options.· Submit & Reset Buttons:- These send the form information to theserver for processing and return to the form to its original settings.· Radio Buttons:- They give visitors and users an one opportunity toselect appropriate one among the multiple options.· Text Areas:- These are the areas for lengthy text inputs as in openended comments or the form responses (Feedback).· Select Lists:- These are the lists from which a visitor can chooseone or more items use them to present long but finite list ofchoices.

Frames

What are frames? Ans:- A frame is an independent scrolling region or window of a webpage. A framed document divide a browser window into multiple panes or smaller window frames. Each frame may contain a differentdocument. Frames can communicate with each other that are actionperformed on a page in one frame can change the contents and thebehavior of another frame. User can view information in one framewhile keeping another frame for reference intended on moving back and forth between pages. Frames offer many possibilities. By using frame tag we can divide the total window into multiple panes or windows and in each we can work separately by using the bellow syntax<frameset rows=”23%,34%,40%,*”>Divides the window into fourwindows in horizontal called rows.<frameset cols=”40%,20%,20%,*”>divides the window into partsvertically called columns.