• Like
Raju html
Upcoming SlideShare
Loading in...5

Raju html

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. 1 Introduction about HTML & DHTML History of HTML: Where did HTML – and for that matter, web pages –come from? It’s worth taking a look at HTML’s history, and I’ll dothat inoverview here. The first person to actually use the word hypertext was Ted Nelson in the 1960s. Was he a computer expert? No, his specialities were philosophyand sociology. Ted Nelson originally came up within idea for a system he called Xanadu (www.xanadu.net), which allowednon sequential text access. We all know the result as implemented in modern Web browsers with hyperlinks you can move from location to location just byclicking a link. Although it took a long time to catch on, there’s simply no doubting its tremendous success. I can still remember the time I firstsaw anearly version of the National Center for Supercomputing Aplplications (NCSA) Mosaic browser atwork at Cornell University. It was shown to me by a memberof the anthropology deartment who clicked a link, waited for a few minutes, and then saw new text appear. “That,” he said with great satisfaction, “came fromCalifornia.”Iwas comletelyamazed andknew I had toget intothisstuff. Tim Berners Leewho created the first web server, came upwith the term HTML , theterm HTTP (Hypertext Transport Protocol,whichspecifies how hypertext is sent on theInternet), and the term URL(Uniform ResourceLocator) to represent a World Wide Web address (more on URLs in a few pages). To create HTML, Tim Berners-Lee knew that we would need a markup language, so he chose SGML (Standard Generalized Markup Language), which wasa general markuplanguagethathad been aroundfor a longtime andwasalreadyin use on computers forspecialized applications. Using SGML, you can define markup languages, specifying their rules and grammar. Tim Bernerrs-Lee createda DTDfor HTML specifying the early syntax of HTML, and so HTML and therefore web pages, were born. What’s HTML All About? HTML (Hypertext Markup Language) is the language you use to create Web pages. Left to themselves, Web browsers would take the text and images in your Web page and wrap them up into what looks like a single
  • 2. 2 aragraph without any line breaks. With HTML, youact much like an editor does, marking you an age to indicateits format, telling the Web browserwhere you want a new line to begin or how you want text or images aligned a more. In other words, HTML is all about specifying thestructure and format of your Web page. Before seeing any Web pages, we’re going toget right to the HTML. ThisWeb page is a simple one. It displays the text “Web page number one!” in a Web browser’s title bar and the text “Welcome to HTML~” in theWeb browser itself. <HTML> <HEAD> <TITLE> Web age number one! <TITLE> </HEAD> <BODY> <H1> Welcome toHTML </H1> </BODY> </HTML> The results of this HTML appear in Microsoft internet Explorer. Browser Wars: The Browsers available today are Netwscape Navigator and Microsoft internet Explorer. Both of them deviate to some degree from the HTML, standard as set by W3C. For example, there are quite a few tag attributes that W3C has defined as standard that neither Netscape Navigator nor Internet Explorer implement. And there are quite a few attributes and even tags (like the Netscape Navigator <LAYER> tag and the Internet Explorer <MARQUEE> tag) that are not part of the HTML standards at all, but are implemented by one or the other of the big browsers. In fact, things differ by browser version some attributes only appear in Internet Explorer 5, for example.
  • 3. 3 Creating a Web Page: We’ve already seen an example Web page. <HTML> <HEAD> <TITLE> Web page number one! </TITLE> </HEAD> <BODY> <H1> Welcome to HTML! </H1> </BODY> </HTML> All you have to do is enter this HTML into a fle, and then open that file in your web browser. To create that file, you can use common editors like Windows Wordpad or Notepad if you save the page in text format. You can even use a word processor like Microsoft Word, but note that you cannot save normal Web pages in .doc format (Which includes many special formatting characters that Web browsers won’t understand) they must be saved in text format from the Save As dialog box. The name you give the web page doesn’t matter as long as long as you give it the extension .html to indicate that it’s an HTML document. For example, you might enter the previous text into a file named one.html. Because of the fact that MS-DOS used to only recognize three –letter extenstions, you can also use the extension .htm and not have a problem with most browsers. That’s the process; just enter the previous HTML in a file and save the file in text format, giving it the extension .html, such as one.html. Copngratulations you’ve just created your first Web page! In fact, there are many tools called HTML editors to help you with the process many of which will even write the HTML for you. I’ll take a look at some of these in the next section (note that for this book, all you need is a
  • 4. 4 simple text editor like Windows Wordpad or Notepad, or VI or emacs in UNIX). What HTML Editors Are Available? There is great number of HTML editors available for you to use in creating Web pages. Here’s starter list: • Adobe PageMill (http://adobe.com) an editor that helps automate the whole process of site design and implementation. • Allaire’s HomeSite (www.allaire.com) A simple, but powerfuil, editor • American Cybernetics Multi-Edit (www.amcyber.com) An HTML editor that works well for programmers. • Microsoft Frontpage (www.microsoft.com) an editor contained in a powerful package than integrates directly with your web site. • Netscape Composer (www.netscape.com) and editor that comes with the Netscape communicator, more or less WYSIWYG. It is easy to use, but somewhat limited. Installing a Web Page: To install a Web page like one.html on the World Wide Web you use an Internet Service Provider (ISP) such as America Online (AOL), Compuserve, or any one of thousands of local companies (including, increasingly, phone companies that let you connect through fiber optics). You can also use Web sites like GeoCities (www.geocities.com) that let you install Web pages free webpage and be prepared for many matches. I got 53,113 matches), the actual installation process depends on your ISP, but I’ll go over the process in general here. What’s My URL? ISPs have their own ways of shorting Web pages, and only they will be able to tell you what your page’s web address, its URL, will be. For example, if your ISP is named “starpowder.com” and your account’s name is
  • 5. 5 “steve”, your Web page’s URL, when you install it may be http://ww.starpowder.com/steve/one.html. Note the parts of this URL: It begins with “http” indicating that we’re using HTTP, the web browser protocol, which is what you see to look at web pages in browsers. Next is the name of the ISP followed by the name of your account and then the name of the actual page itself, “one.html”? What your Web page’s actual URL will be depends on the ISP; for example, it’s common to place a tilde (-) before the account name like this: http://www.starpowder.com/-steve/one.html. You might even end up with something like this. http://www.starpowder.com/customers/steve/one.html. This is something only your ISP can tell you, so make sure you ask it. Viewing a web page: You use a web browser to view your new Web page. There are two ways to view a Web page: locally and from the internet. Local pages are on your own computer. To open them, you just use the Open item in the Web browser’s File menu. For example, say on.html was stored in the File menu. In addition, both Netscape Navigator and Internet Explorer let yuou enter the loction of Web page by typeing it directly into a box. You can type c:wwwone.html directly into that box. On the other hand, if you want to open a web page from the Internet, you connect to the Internet and enter the URL of that page page directly into that box. As you might expect, there are quite a few browser availble for you to use. Here’s a partial list:  Hotjava (http://java.sun.com/products/hotjava/) /sun microsystem’s browsers which are well integrated with current jave versions.  Lynx (www.lynx.browser.org) a text based Web browser, popular in UNIX shell accounts.  Microsoft Internet Explorer (www.microsoft.com/ie/) Microsoft’s browser, now in Release 5. Internet Explorer is trying hard to become the king of browser.s Free and huge, it’s become the choice of many. One of the two top browsers.  Netscape Navigator (www.netscape.com, part of the Nescape Communicator suite) the original big browser; now in competition with Internet Explorer; Navigator was the first one to come up with dynamic HTML and many other innovations. One of the two top browsers.
  • 6. 6 Links and Lists: LISTS IN HTML DOCUMENT: Html 4 defines three kinds of lists:  Ordered lists: typically labeled with numbers, alphabets, roman numbers.  Unordered lists: typically labeled with bullets, circle, or square.  Glossary lists: in which each item in the list has a term and a definition for that term, arranged so that term, arranged so that the term is somehow highlighted or drawn out from the text. Image element: HTML provides for a way of aligning the text with relation to the graphic. Simply add the ALIGN attribute to the IMG element. This attribute can take one of three values: TOP, MIDDLE, or BOTTOM. If you use the TOP value for the ALIGN attribute, the browser aligns the top first line of the text even with the top of the graphic. The MIDDLE value puts the baseline of the current line of the text even with the middle of the image. The BOTTOM value aligns the baseline of the text with the bottom of the graphic. By default, the BOTTOM value is used with the IMG element. <IMG SRC=”test.gif” HEIGHT=100 WIDTH=50> CLICKABLE IMAGES: Many home pages on the web contain clickable graphics. That is, you can click on some images on a home page, and you go to a new URL. You don’t want to change the URL, just the apprearance of the hyperlink. Instead of using <A HREF= “http://www.mysite.com”><IMG SRC=”mylog.gif”></A> HTML LINKS: If you are going to use a document that creates as a home page, you need to add some hyperlinks so that you can jump to other pages. You can jump to other pages that you create locally or you can link to pages on other web servers. These links, also created in your HTML document, enable you to click a word, a phrase, or even an image to connect with other web resources.
  • 7. 7 You may recall that hyperlinks on web pages use underlying address called URLs. It is short for universal resource locater. URLs are the mechanism used by the web to find a particular page, image, or sound. Basically, you can think of a URL as the address by which you find a page. URLs are either of two types. The first is an absolute URL. This URL is a complete address, and nothing more is needed to find the information. The second type of URL is a relative URL. A relative URL is one that contains only the necessary address to find what you want from where you currently are. HTML TABLES: Tables were one of the first extensions to HTML that were proposed as part of HTML. Tables almost immediately revolutionized web page design because tables can be used not just for presenting data in a tabular form, but also for page layout and control over placement of various HTML elements on a page. The < TABLE> TAG to create a table in HTML, use the < TABLE>………< /TABLE> tags, ehich contain the code for a caption and then contents of the table itself. The most common attribute to the < table> tag is the BORDER attribute. BORDER causes the table to be drawn with a border around it, which can be a fancy border in a graphical browser or just a series of dashes and pipes (|) in a text-based browser. CAPTION: Table caption tell your reader what the table is for. The < CAPTION > tag goes inside the < TABLE > tag just before the table rows, and it contains the title of the table. It closes with the < /CAPTION > tag. <CAPTION> employee table < /CAPTION> ROWS AND CELLS: Each table row is indicated by the <TR> tag and ends with the appropriate closing </TR>. Each row, in turn, has a number of table cells,
  • 8. 8 which are indicated using the <TH>… </TH> (for heading cells) and <TD>…</TD>tags (for data cells). <TABLE> <TR> <TH>heading</TH> <TD>data </TD> <TD>data</TD> </TR> </TABLE> DEFINING TABLE AND COLUMN WIDTHS: TABLE WIDTHS: The width attribute to the <TABLE> tag defines how wide the table will be on the page. WIDTH can have a value that is Either the exact width of the table (in pixels) or a percentage (such as 50 percent or 75 percent) of the current screen width, which can therefore change if the window is resized. If width is specified, the width of the columns with in the table can be compressed or expanded to fit the required width. COLUMN WIDTHS: The WIDTH attribute can also be used on individual cells (<TH> OR <TD>) to indicate the width of individual columns. As width tag in cells can be an exact pixel width or apercentage (which is taken as a percentage of the full table width). Tables Creating a Table To create a table to use the <table> element which is the ease part? Then it’s up to you to structure the table using the elements like <TR> to create a table row. <TD> to insert the data into the table, and <TH> to create the table headings. Example: <TABLE> <TR> .
  • 9. 9 . . </TR> . . . </TABLE> DIFFERENT TYPES OF TAGS There are two different types of tags are available in HTML: They are: 1. Paired Tags 2. Unpaired Tags 1. PAIRED TAGS: The tags which close corresponding to the given tags are called paired tags. Ex: <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> <A> </A> 2. Unpaired Tags: The tags which doen’t has the closed corresponding tags are called unpaired tags.
  • 10. 10 Ex: for the unpaired tags are <p> <Br> etc IMAGES: We have been dealing exclusively with text. In this images concept , we can also include images with different attributes.Like we can give images with width attribute , height attribute, center alignment of the image, ATTRIBUTES Width, Center alignment, Height Border Example of the images attributes <HTML> <HEAD> <TITLE>IMAGES</TITLE> </HEAD> <BODY BACKGROUND=”background.gif”> <CENTER> <IMG SRC=”example.gif” border=”1” height=”144” width=”200”> </CENTER> </BODY> </HTML> .
  • 11. 11 FORMATTING TEXT WITH <FONT>: We have seen how to make pages visually richer using background and images. We demonstrate the common methods of formatting lines 15 through 17. <p><font color=”red” size=”+1” face=”arial” > we have designed this site to teach about the wonders of <EM>HTML</EM>.</FONT> Here several attributes of the font elements are demonstrated .The first attribute is COLOR,which indicates the colour of the formatted text in the same manner in which you indicate a background colour:You enter either a preset colour name or a hex colour code remember to include the quotation marks around the color name. Note that you can set the font color for the whole document by putting a TEXT attribute into the body element indicating the color in the same manner as above. <HTML> <HEAD> <TITLE>FONT</TITLE> </HEAD> <BODY BGCOLOR=”BLUE”> <FONT COLOR=”red” SIZE=”+1” FACE =”ARIAL” > </font> In this text can be appears in the red color with font face arial. <FONT COLOR=”green” SIZE=”+1” FACE =”helvectica” > In this you will get the text with color green with font face helvectica. </font> </BODY> </HTML>
  • 12. 12 <FRAMESET>Tag All of the Web pages we have designed so far have the ability to link to other pages but can display only one page at a time.Which can help you display more than one HTML file at a time Frames, when used properly, can make your site more readable and usable for your users. <HTML> < HEAD> <TITLE>FONT</TITLE> </HEAD> <FRAMESET COLS=3”> <FRAME NAME=”XYZ”> <FRAME NAME=”ABC”> </FRAMESET> </HTML> HEADERS: Headers are simple form of text formatting that varies text size based on the headers level. The 6 header elements H1 through H6 are often used to delineate new sections and sub sessions of the page. They are used and their relative display sizes.Note that the actual size of the text of each header element is selected by the browser & can infact very significantly between the browsers.Later to discuss how you can take control on sprcifying the text sizes and the text attributes as well. Summary: HTML is not a procedural programming languagelike C, FORTRAN, Cobal.It is a markup language that identifies the elements of a page so that a browser can render the page on the screen. HTML is used to format text & information.This marking up of information is different from the intent of traditional programming languages, which is to perform actions in the designated order.
  • 13. 13 In HTML text is markup with elements, delineated by tags that are key words contrain in pairs of angle brackets. Create HTML files also called HTML document using a text editor. A text editor called Notepad is built into windows. Tou can alsodownload an HTML share ware sourcecode editororuse Microsoft’s Visual interDev. All HTML files reqire either the .htm or the .html file name extensions Comments in HTML always begin with <!—and end with & can span across the several source lines. The browser ignores any text & or tags placed inside a comment. Every HTML file is separated into a header section & a body. Includiong a title is for every HTML document.Use the <TITLe>……..</TITLE> Tags to do so.They are placed inside a header. <Body>opens the body element the body of an HTMLdoc is the area where you place all content you would like browser to display. All text between the <p>…</p> tags one paragraph. The paragraph will be set a part from all other material on the page by aline vertical of space both before & after the paragraph. The center elementcauses all material with lists <center> and </center> tags to be placed horizontal in the browser window. DHTML Introduction: In this DHTML topic there are mainly draging and dropping, data binding and behaviours. Netscape Navigator does not support these topics, unfortunately except for draging and dropping, and of course you implement it differently than you would in internet explorer.
  • 14. 14 Dragging and Dropping: There are two ways to implement dragging and dropping in internet explorer First one is Simple Dragging and dropping using obsolute position in with styles, and the second one is dragging and Dropping of the data. Simple Dragging and Dropping using mouse clicks and settings an elements position to match mouse moments. Dragging and dropping of data, on the other hand, involves specialized data transfer: you can even dragg and drop data across applications. In Nestscape Navigator you use layers to implement dragging and dropping. These dragging operations being then the mouse button are pressed when the mouse is on the image. Because there are two images the code needs to determine which one of being dragged, and I do that with the event objects srcElement properties. Note that I also check to make sure that a type of element being dragged is in deed an image before allowing it to be dragged, and then I stored the dragged images id in a variable names . Data Binding: Another important aspect of dynamic HTML, in internet Explorer is dta binding, Using binding, you can connect you can connect HTML elements in a web page to a data source. There are two aspects to this process using data source objects object (DSOs) and blinding to HTML elements. Data Source Objects: There are a variety of DSOs in internet explorer, including the Microsoft HTML (MSHTML) control, the tabular data control (TDC), and the extensible Markup Language (XML) data source control. I’ll take a look at all of them in this chapter. I’ll also take a look at the more complex remote remote data service (RDS) DSO, which you use to connect to data base application son web servers. It uses RDS to connect to the Microsoft SQL, server on a web server. DSOs are invisible in the webpge, but you can bind them to HTML elements and control their behaviour with buttons and other controls. Using the MSHTML control makes this process easy. For example, say that you have Web page with data about various employess, employee.htm, which
  • 15. 15 looks like the following example where a <SPAN> element is used to identify the fields of your database NAME ID, HIRE_DATE, nd DEPARTMENT each group of such elements forms a record. Internet Explorer Behaviors: As of internet explorer 5, dynamic HTML supports behaviours. As the name indicates, behaviours set the behaviours of HTML elements. For example, you can create behaviour that applys a different filter to HTML elements. Each time it’s invoked. You can think of behaviours much like styles, which you can code using java script or other scripting languages. To create behaviour, you write HTML components (HTC) which is a separate HTML file that holds the script for the behaviour. Microsoft‘s motivation in creating HTC was to separate code from data, which has become a big moment in HTML programming these days (and its one of the reason the www consortium would not make the <LAYER> element into an official element). You can use HTC to implement behaviors that do the following:  Access the containing pages Dynamic HTML object model you can use the element object in HTCs to accesss the actual element that has the behaviour attatched. Using this object, you can access properties, methods and events of containing document.  Expose custom events you can create events with the Events element. These events will be sending to the containing page with the element’s fire method.  Expose properties and methods You can creates properties and methods with the PROPERTY and METHOD elements, respectively  Reeceive Notifications You can use the ATTACH element to make sure that the browser will pass on standard events to the HTC.
  • 16. 16 Features of DHTML: Dynamic HTML isn’t radically different from regular HTML. All the old tags are still supported, and scripts inside the page can exploit an expanded object model that’s compatible with the previous version, so they’ll continue to work as before. In a sense and at the risk of oversimplifying, we can say that the real difference between regular HTML and Dynamic HTML is in how the page is interpreted by the browser when the page is being downloaded from the remote server. Among the new features of DHTML, the following ones deserve special mention: Dynamic redrawing of the page, which means that you can change the style, the color or any other attribute of an element of the page. The DHTML object model gives you access to any element of the page, including tags, images and paragraphs. Styles and style sheets have been expanded with more attributes, a so they give you more control over the page elements. The new event model adds flexibility in how a user’s actions can be processed by scripts in the page. DHTML includes many other improvements over traditional HTML, such as better control over the creation of tables and support for additional graphic formats.
  • 17. 17 CONCLUSION: HTML is used to format text & information. This marking up of information is different from the intent of traditional programming languages, which is to perform actions in the designated order. HTML provides for a way of aligning the text with relation to the graphic. You use a web browser to view your new Web page. There are two ways to view a Web page: locally and from the internet. Local pages are on your own computer. To open them, you just use the Open item in the Web browser’s File menu. HTML (Hypertext Markup Language) is the language you use to create Web pages. Left to themselves, Web browsers would take the text and images in your Web page and wrap them up into what looks like a single Paragraph without any line breaks. REFERENCE: DYNAMIC HTML REFERENCE AND SOFTWARE DEVELOPMENT - FRANCESCO BALENA.